/* ============================================================================
   app.css — the provisioner design system (ops dashboard · light + dark).

   Brand hues are injected inline in base.html from the env-driven Brand
   (--brand-primary / -dark, --on-brand, --brand-accent / -dark, --on-accent).
   Everything else — neutral surfaces, elevation, the status palette, density —
   lives here as tokens, with a [data-bs-theme="dark"] mirror. Bootstrap's own
   --bs-* variables are remapped onto these tokens so BS components (cards,
   tables, dropdowns, modals, inputs, offcanvas) adopt the theme automatically.

   Sections:
     1. Design tokens (:root, light)  +  1b. dark mirror
     2. Bootstrap variable remap (inside the token blocks)
     3. Base elements + brand controls (buttons, links)
     4. Status chips (signature component)  +  legacy badge/gradient fallbacks
     5. Machine-identifier (monospace) treatment
     6. Layout chrome (sidebar / topbar / main / footer / theme toggle)
     7. Component polish (cards, tables, tabs) + density + depth
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem; --sp-6: 2rem;

  /* Radii */
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 11px;
  --radius-pill: 999px;

  /* Elevation — layered depth. 0 = hairline ring, 3 = overlay (modal/popover). */
  --elev-0: 0 0 0 1px var(--border);
  --elev-1: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.05);
  --elev-2: 0 4px 12px -2px rgba(16,24,40,0.09), 0 2px 4px -2px rgba(16,24,40,0.05);
  --elev-3: 0 14px 32px -6px rgba(16,24,40,0.14);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.125rem;

  /* Neutral surfaces + text + border (light). Cool-grey bias toward the brand. */
  --surface-0: #f4f5f7;   /* app background */
  --surface-1: #ffffff;   /* cards / panels / topbar */
  --surface-2: #fdfdfd;   /* raised insets / hovers */
  --text: #0f1c22;
  --text-muted: #5a6b72;
  --border: rgba(18,41,48,0.13);

  /* Density (compact) */
  --pad-card: 0.7rem 0.9rem;
  --pad-row: 0.45rem;

  /* Functional status palette — brand-neutral by design, high-contrast so state
     reads at a glance. Each: a solid (text/dot) value + a subtle tint (chip bg). */
  --status-success: #00875a; --status-success-bg: #d6f4e6;
  --status-info:    #0369a1; --status-info-bg:    #d6ecfb;
  --status-warning: #b45309; --status-warning-bg: #fcedcb;
  --status-danger:  #dc2626; --status-danger-bg:  #fbe0e0;
  --status-neutral: #41505c; --status-neutral-bg: #e6ebf0;

  /* Sidebar — a deep, near-black rail derived from the brand hue so it follows
     any rebrand (color-mix keeps it env-driven; no second brand var needed). */
  --side-bg: color-mix(in srgb, var(--brand-primary) 24%, #0c1013);
  --side-text: #e9eef2;
  --side-muted: #93a3b0;
  --side-border: rgba(255,255,255,0.09);
  --side-hover: rgba(255,255,255,0.07);
  --side-active: color-mix(in srgb, var(--brand-primary) 82%, #ffffff);
  --side-active-text: #ffffff;

  /* 2. Remap Bootstrap onto the tokens (light) */
  --bs-body-bg: var(--surface-0);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-0);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-dark);
}

/* 1b. Dark theme mirror ----------------------------------------------------- */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --elev-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.34);
  --elev-2: 0 4px 12px -2px rgba(0,0,0,0.50), 0 2px 6px -2px rgba(0,0,0,0.40);
  --elev-3: 0 18px 40px -8px rgba(0,0,0,0.62);

  --surface-0: #0a1319;
  --surface-1: #111d24;
  --surface-2: #1a2831;
  --text: #e7eef1;
  --text-muted: #93a7b0;
  --border: rgba(241,244,244,0.16);

  --status-success: #34d399; --status-success-bg: rgba(16,185,129,0.20);
  --status-info:    #38bdf8; --status-info-bg:    rgba(56,189,248,0.18);
  --status-warning: #fbbf24; --status-warning-bg: rgba(245,158,11,0.20);
  --status-danger:  #f87171; --status-danger-bg:  rgba(239,68,68,0.20);
  --status-neutral: #9fb2ba; --status-neutral-bg: rgba(159,178,186,0.16);

  /* Re-assert the BS remap so our dark values win over Bootstrap's own
     [data-bs-theme="dark"] defaults (equal specificity, later source order). */
  --bs-body-bg: var(--surface-0);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-1);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border);
}

/* 3. Base elements + brand controls ---------------------------------------- */
body { font-family: var(--font-sans); }
.navbar-brand-logo { height: 30px; width: auto; }

/* Links + primary text pick up the brand. */
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-dark); }
.text-primary { color: var(--brand-primary) !important; }

/* Primary button — brand fill, guaranteed-legible foreground (--on-brand). */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--on-brand);
  box-shadow: var(--elev-1);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-active-color: var(--on-brand);
}
/* Accent button — reserved for a single emphasis action per view. */
.btn-accent {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: var(--brand-accent-dark);
  --bs-btn-hover-border-color: var(--brand-accent-dark);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: var(--brand-accent-dark);
  --bs-btn-active-color: var(--on-accent);
  box-shadow: var(--elev-1);
}

/* Legacy Soft-UI fallbacks — the templates were authored against a theme that
   isn't loaded (bg-gradient-*, badge-sm). Keep these correct-contrast fallbacks
   so un-migrated pages render right; new/migrated markup uses .btn-primary /
   .chip instead. */
.btn.bg-gradient-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--on-brand) !important;
  box-shadow: var(--elev-1);
}
.btn.bg-gradient-primary:hover { background: var(--brand-primary-dark) !important; }
.bg-gradient-primary { background: var(--brand-primary) !important; }
/* Destructive buttons authored as .btn.bg-gradient-danger (delete / reimage). */
.btn.bg-gradient-danger {
  background: var(--status-danger) !important;
  border-color: var(--status-danger) !important;
  color: #fff !important;
}
.btn.bg-gradient-danger:hover { filter: brightness(0.93); }
.text-bg-primary { background-color: var(--brand-primary) !important; color: var(--on-brand) !important; }

/* 4. Status chips — signature component ------------------------------------
   Compact pill + leading dot for machine state. <span class="chip chip--success">On</span> */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  white-space: nowrap; color: var(--status-neutral); background: var(--status-neutral-bg);
}
.chip::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.chip--success { color: var(--status-success); background: var(--status-success-bg); }
.chip--info    { color: var(--status-info);    background: var(--status-info-bg); }
.chip--warning { color: var(--status-warning); background: var(--status-warning-bg); }
.chip--danger  { color: var(--status-danger);  background: var(--status-danger-bg); }
.chip--neutral { color: var(--status-neutral); background: var(--status-neutral-bg); }
.chip--running { color: var(--status-info);    background: var(--status-info-bg); }
.chip--running::before { animation: chip-pulse 1.4s ease-in-out infinite; }
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .chip--running::before { animation: none; } }

/* Legacy gradient badges → map onto the status palette (contrast-safe). */
.badge.bg-gradient-primary   { background-color: var(--brand-primary) !important; color: var(--on-brand); }
.badge.bg-gradient-secondary { background-color: var(--status-neutral) !important; color: #fff; }
.badge.bg-gradient-success   { background-color: var(--status-success) !important; color: #fff; }
.badge.bg-gradient-info      { background-color: var(--status-info) !important; color: #fff; }
.badge.bg-gradient-danger    { background-color: var(--status-danger) !important; color: #fff; }
.badge.bg-gradient-warning   { background-color: var(--status-warning) !important; color: #fff; }
.badge.bg-gradient-dark      { background-color: #212529 !important; color: #fff; }

/* 5. Machine-identifier treatment ------------------------------------------ */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

/* 6. Layout chrome ---------------------------------------------------------- */
main { min-height: calc(100vh - 12rem); }
footer { color: var(--text-muted); }

.app-topbar { background: var(--surface-1); }

.app-sidebar {
  width: 240px;
  /* --bs-offcanvas-bg colours the mobile slide-in panel; the !important
     background beats Bootstrap's `.offcanvas-lg { background: transparent
     !important }` reset at ≥lg, which would otherwise show the white page bg. */
  --bs-offcanvas-bg: var(--side-bg);
  background: var(--side-bg) !important;
}
.app-sidebar .navbar-brand-logo,
.app-sidebar .app-sidebar-title { color: var(--side-text); }
/* Section labels ("Operate", "Console", …) — override text-secondary so they
   don't render dark-on-dark on the always-dark rail. */
.app-sidebar h6,
.app-sidebar .text-secondary { color: var(--side-muted) !important; }
.app-sidebar .nav-link { color: var(--side-muted); border-radius: var(--radius-sm); }
.app-sidebar .nav-link:hover { color: var(--side-text); background: var(--side-hover); }
.app-sidebar .nav-link.active {
  background-color: var(--side-active) !important;
  color: var(--side-active-text) !important;
  box-shadow: var(--elev-1);
}
.app-sidebar hr { border-color: var(--side-border); }
/* Mobile offcanvas close button sits on the dark rail — make it light. */
.app-sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (min-width: 992px) {
  .app-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    flex-shrink: 0; border-right: 1px solid var(--side-border);
  }
}

/* Theme toggle — show the icon for the theme you'd switch TO. */
.theme-toggle .theme-icon-light { display: none; }
.theme-toggle .theme-icon-dark { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }

/* 7. Component polish + density + depth ------------------------------------ */
.card { box-shadow: var(--elev-1); border-radius: var(--radius); }
/* Interactive cards (links / actionable tiles) lift on hover for depth. */
.card.card--interactive { transition: box-shadow 0.16s ease, transform 0.16s ease; cursor: pointer; }
.card.card--interactive:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }

/* Density: compact table rows (safe — uses Bootstrap's own table cell vars, no
   conflict with template utility classes). Cards pick up --pad-card where the
   template doesn't force a p-* utility. */
.table { --bs-table-cell-padding-y: var(--pad-row); --bs-table-cell-padding-x: 0.9rem; }
.table > thead th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text-muted); font-weight: 600;
}
.card > .card-body:not([class*="p-"]) { padding: var(--pad-card); }
.card > .card-header:not([class*="p-"]) { padding: var(--pad-card); }

/* Active tab carries the accent underline. */
.nav-tabs .nav-link.active {
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 var(--brand-accent);
  font-weight: 600;
}

/* Modals / dropdowns / offcanvas get real elevation (overlay tier). */
.modal-content, .dropdown-menu, .offcanvas { box-shadow: var(--elev-3); }

/* 8. Soft-UI compatibility utilities ---------------------------------------
   The templates lean on a Soft-UI vocabulary that vanilla Bootstrap 5 does not
   define (text-sm / text-xs / text-xxs, font-weight-bold / -bolder) — without
   these they silently render at the inherited size/weight. Back them with the
   type scale so existing markup reads as intended; new markup can use these or
   Bootstrap's own fs-*/fw-* utilities. */
.text-sm  { font-size: var(--fs-sm) !important; }
.text-xs  { font-size: var(--fs-xs) !important; }
.text-xxs { font-size: 0.6875rem !important; }
.font-weight-bold   { font-weight: 600 !important; }
.font-weight-bolder { font-weight: 700 !important; }