/* Homepage — Corviduo "Raven" theme, ported from Arbo (irv-ml1:8201).
 *
 * PROVENANCE: every value below is lifted verbatim from Arbo's own :root
 * custom properties, read off the running app rather than eyeballed from a
 * screenshot. Keep the --raven-* / --eye-* / --surface* names identical to
 * Arbo's so a future drift check is a diff, not an interpretation.
 *
 * WHY CSS AND NOT settings.yaml: Homepage's `color:` setting only accepts
 * built-in Tailwind ramps (slate, zinc, ...). None of them is the raven mint,
 * and there is no setting for surface/border/accent separately. `color: slate`
 * stays as the base ramp because it is the closest neutral; everything that
 * makes this look like Arbo is here.
 *
 * SPECIFICITY: Homepage is Tailwind-generated, so utility classes win on
 * equal specificity. `!important` below is deliberate and load-bearing —
 * removing it silently reverts individual rules to the stock theme.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* --- Arbo brand ramp (verbatim) --- */
  --raven-ink: #021425;
  --raven-black: #0f2131;
  --raven-eye: #2ffc89;
  --raven-bone: #e5f4f4;

  --black-700: #1b2e3d;
  --black-600: #283b4a;
  --slate-400: #6a7f88;
  --slate-300: #8499a0;

  --eye-500: #2ffc89;
  --eye-400: #77ffa3;
  --eye-600: #00cf67;

  --info-500: #00a5fb;
  --success-500: #30ab60;
  --warning-500: #ecb230;
  --error-500: #f5686c;

  /* --- semantic surfaces (Arbo's own mapping) --- */
  --bg: var(--raven-ink);
  --bg-sunken: #010e1b;
  --surface: #112333;
  --surface-2: #1b2e3d;
  --surface-3: #283b4a;
  --fg: #dfeeee;
  --fg-muted: var(--slate-300);
  --fg-subtle: var(--slate-400);
  --border: #1b2e3d;
  --border-strong: #283b4a;
  --accent: var(--eye-500);
}

/* ---------- page ---------- */
/* Flat ink, no photo. Arbo has no background image and the wallpaper was
 * fighting the card surfaces for contrast — the cards are only ~0x10 lighter
 * than the page, which reads as depth on flat ink and as mud over a photo. */
body,
#page_wrapper,
#page_container {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---------- header widgets ---------- */
#information-widgets .widget-container,
#information-widgets .information-widget-search {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
}

#information-widgets .information-widget-search input {
  background: transparent !important;
  color: var(--fg) !important;
}

/* ---------- tabs ---------- */
/* Arbo marks the active nav item with a mint rule and a raised surface. */
#myTab li button,
#services + div li button {
  color: var(--fg-muted) !important;
  border-radius: 0.5rem !important;
}

#myTab li button[aria-selected="true"],
#myTab li button.active {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
  box-shadow: inset 0 -2px 0 0 var(--accent) !important;
}

/* ---------- group headers ---------- */
.service-group-name,
.bookmark-group-name {
  color: var(--fg-subtle) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
}

/* ---------- service cards ---------- */
.service-card,
.bookmark li > a,
.bookmark-list li > a {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

.service-card:hover,
.bookmark li > a:hover,
.bookmark-list li > a:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
}

.service-name,
.bookmark-name {
  color: var(--fg) !important;
  font-weight: 600 !important;
}

.service-description,
.bookmark-description {
  color: var(--fg-muted) !important;
}

/* ---------- status pills + widget stat blocks ---------- */
/* Stock Homepage renders every pill in the same slate; Arbo reserves colour
 * for signal. Green only means "this is actually serving". */
.service-tag,
.service-block,
.service-stats {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  border-radius: 0.375rem !important;
}

.status-online,
.status-healthy,
.status-running {
  color: var(--eye-500) !important;
}

.status-offline,
.status-unhealthy,
.status-error {
  color: var(--error-500) !important;
}

.status-unknown,
.status-exited,
.status-partial {
  color: var(--warning-500) !important;
}

/* ---------- focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}