/* ================================================================
   SAGAR — Design System
   CoreUI-Inspired Enterprise Dashboard — Dark Edition
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Figtree:wght@400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* ── Backlink-module compatibility aliases ─────────────────
     Templates use --accent-green / --accent-red / --accent-yellow / --bg-card.
     Map them to the canonical design tokens so no colour is ever undefined. */
  --accent-green:  var(--accent-emerald);
  --accent-red:    var(--accent-rose);
  --accent-yellow: var(--accent-amber);
  --bg-card:       var(--card-solid);
  --primary:        #00A5FF;
  --surface:        var(--bg-surface);
  --surface-subtle: var(--bg-hover);

  /* ── Cross-template compatibility & semantic aliases ─────── */
  --bg-surface-elevated: var(--card-elevated, #FFFFFF);
  --bg-surface-raised:   var(--card-solid, #FFFFFF);
  --border-color:        var(--border, #E2E8F0);
  --accent-purple:       #A855F7;
  --accent-primary:      var(--primary, #00A5FF);
  --bg-secondary:        var(--bg-hover, #E8EEF5);
  --accent-success:      var(--accent-emerald, #10B981);
  --accent-danger:       var(--accent-rose, #EF4444);
  --danger:              var(--accent-rose, #EF4444);
  --border-focus:        var(--primary, #00A5FF);
  --text-rose:           var(--accent-rose, #EF4444);
  --text-md:             15px;
  --accent-blue:         #00A5FF;
  --bg-sub:              var(--bg-hover, #E8EEF5);
  --bg-base:             var(--bg-primary, #DCE4EE);
  --tile-accent-color:   var(--primary, #00A5FF);
  --chip:                var(--bg-hover, #E8EEF5);
  --score:               var(--primary, #00A5FF);

  /* ── Typography scale (rem-based, matches Tailwind defaults) ──
     Used as var(--text-xs) / var(--text-sm) etc. throughout templates. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  /* ── Spike Admin Light Theme ──────────────────────────────── */
  --bg-primary:    #DCE4EE;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #FFFFFF;
  --bg-hover:      #E8EEF5;
  --bg-active:     #CBD5E1;

  /* Page canvas */
  --page-bg-base:      #DCE4EE;
  --card-solid:        #FFFFFF;
  --card-elevated:     #FFFFFF;
  --card-border:       #E2E8F0;
  --border:            #E2E8F0;
  --card-shadow:       0 4px 20px -2px rgba(112, 144, 176, 0.12), 0 2px 6px -1px rgba(112, 144, 176, 0.08);
  --shadow-card:       0 4px 20px -2px rgba(112, 144, 176, 0.12), 0 2px 6px -1px rgba(112, 144, 176, 0.08);
  --card-shadow-hover: 0 10px 30px 0 rgba(0, 165, 255, 0.10);
  --shadow-tile:       0 4px 20px -2px rgba(112, 144, 176, 0.12), 0 2px 6px -1px rgba(112, 144, 176, 0.08);

  /* Text on light canvas */
  --text-on-page-h: #0F172A;
  --text-on-page-p: #1E293B;
  --text-on-page-m: #334155;
  --accent-cyan-on-page: #0284C7;

  /* Glass (still used by the dark sidebar) */
  --glass-bg:      rgba(33, 38, 49, 0.03);
  --glass-border:  rgba(33, 38, 49, 0.08);
  --glass-shine:   rgba(255, 255, 255, 0.03);

  /* Accent Colors — CoreUI's real palette (coreui/coreui _variables.scss).
     Variable *names* kept as-is (--accent-cyan etc. are referenced in
     ~80+ places across templates) so this remap alone re-colors most
     of the app without touching individual templates. */
  --accent-cyan:    #5856D6;  /* CoreUI Primary (indigo) */
  --accent-cyan-dim: rgba(88, 86, 214, 0.10);
  --accent-cyan-glow: rgba(88, 86, 214, 0.18);
  --accent-cyan-strong: #423FC4;  /* darkened hover/active state for solid indigo surfaces */
  --accent-violet:  #6B7785;  /* CoreUI Secondary (gray) */
  --accent-violet-dim: rgba(107, 119, 133, 0.10);
  --accent-emerald: #1B9E3E;  /* CoreUI Success */
  --accent-emerald-dim: rgba(27, 158, 62, 0.10);
  --accent-rose:    #E55353;  /* CoreUI Danger */
  --accent-rose-dim: rgba(229, 83, 83, 0.10);
  --accent-amber:   #F9B115;  /* CoreUI Warning */
  --accent-amber-dim: rgba(249, 177, 21, 0.12);
  --accent-orange:  #C25E0A;  /* distinct warm tone for dual-tier warnings (CoreUI has no 7th color).
     Darkened from #FD7E14 — white text on the lighter shade only reached a 2.57:1 contrast ratio
     (fails the 3.0 minimum) on every tile-warning/stat-amber solid card app-wide; this shade holds
     a ~4.3:1 ratio with white text while staying recognizably orange, never yellow. */
  --accent-orange-dim: rgba(194, 94, 10, 0.12);
  --accent-info:    #1A75D1;  /* CoreUI Info — new. Darkened from #3399FF — white text on the lighter
     shade only reached a 2.94:1 contrast ratio (fails the 3.0 minimum) on every tile-info/stat-blue-alt
     solid card app-wide; this shade holds a ~4.7:1 ratio with white text. */
  --accent-info-dim: rgba(26, 117, 209, 0.10);

  /* Stat-tile solid-background palette only (.metric-tile.tile-solid variants) — kept separate
     from --accent-cyan (indigo, used ~80+ places elsewhere) because that specific tile needs a
     brighter cyan-blue than the shared indigo primary color.
     --tile-blue darkened from #0EA5E9 — white text on the lighter shade only reached a 2.77:1
     contrast ratio (fails the 3.0 minimum) on every tile-primary/stat-blue solid card app-wide;
     this shade holds a ~4.1:1 ratio with white text. --tile-blue-strong (the former --tile-blue
     value's hover/active shade) was correspondingly darkened one step further so it still reads
     as a distinct, darker hover state. */
  --tile-blue: #0284C7;
  --tile-blue-strong: #0369A1;

  /* Light highlight-box treatment (was a dark-canvas mint accent) */
  --accent-mint-pale: #EEF0FF;
  --on-mint-text:      #1D2129;

  /* Text — dark text for light surfaces */
  --text-primary:  #0F172A;
  --text-secondary: #1E293B;
  --text-muted:    #334155;
  --text-disabled: #64748B;
  --text-faint:    #475569;

  /* Borders */
  --border-subtle:  #E7EAEE;
  --border-default: #DBDFE6;
  --border-strong:  #CFD4DE;

  /* Shadows — soft, low-opacity (light-UI appropriate; the old glow
     shadows were tuned for a dark canvas) */
  --shadow-sm:   0 1px 2px rgba(33,38,49,0.05);
  --shadow-md:   0 4px 12px rgba(33,38,49,0.08);
  --shadow-lg:   0 12px 28px rgba(33,38,49,0.12);
  --shadow-glow-cyan:   0 4px 14px rgba(88, 86, 214, 0.16);
  --shadow-glow-violet: 0 4px 14px rgba(107, 119, 133, 0.16);

  /* Elevation (resting depth for cards/tiles, plus hover/featured steps) */
  --elevation-1: 0 1px 2px rgba(33,38,49,0.06), 0 2px 6px rgba(33,38,49,0.05);
  --elevation-2: 0 2px 4px rgba(33,38,49,0.07), 0 6px 16px rgba(33,38,49,0.08);
  --elevation-3: 0 4px 8px rgba(33,38,49,0.08), 0 12px 28px rgba(33,38,49,0.10);

  /* Sidebar & Topbar */
  --sidebar-width:       256px;
  --sidebar-collapsed:   64px;
  --topbar-height:       57px;

  /* Sidebar-only tokens — the sidebar stays dark (CoreUI's own
     convention) while the rest of the app goes light, so it needs its
     own surface/text tokens independent of the ones above. Values
     below are the ACTUAL computed styles read directly off CoreUI's
     live demo sidebar (getComputedStyle, not eyeballed from a
     screenshot) — background rgb(33,38,49), border rgb(50,58,73),
     active-link background rgba(135,145,175,0.1), base text opacity
     0.87, muted/icon opacity 0.38. */
  --sidebar-bg:             #212631;
  --sidebar-elevated:       #2A303D;
  --sidebar-hover-bg:       rgba(135, 145, 175, 0.1);
  --sidebar-active-bg:      rgba(135, 145, 175, 0.1);
  --sidebar-text:           #FFFFFF;
  --sidebar-text-secondary: rgba(255, 255, 255, 0.87);
  --sidebar-text-faint:     rgba(255, 255, 255, 0.38);
  --sidebar-border:         rgb(50, 58, 73);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius — Spike Admin standard */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* Button height scale */
  --btn-height-xs: 26px;
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 46px;

  /* Transitions */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Spike-style card border & shadow tokens */
  --card-border: #E2E8F0;
  --card-shadow: 0 4px 20px -2px rgba(112, 144, 176, 0.12), 0 2px 6px -1px rgba(112, 144, 176, 0.08);
  --card-shadow-hover: 0 10px 30px 0 rgba(0, 165, 255, 0.10);

  /* Light semantic aliases */
  --bg-surface-elevated: #F8FAFC;
  --bg-surface-raised:   #FFFFFF;
  --border-color:        #DBDFE6;
  --bg-secondary:        #F1F5F9;
  --bg-sub:              #F8FAFC;
  --bg-base:             #F8FAFC;
  --chip:                #E2E8F0;
  --confetti-x:          0px;
  --confetti-y:          -100px;
  --confetti-rot:        360deg;
}

/* ── Spike Admin Dark Theme ────────────────────────────────── */
html.dark {
  --bg-primary:    #0B1426;
  --bg-surface:    #111C2D;
  --bg-elevated:   #15243B;
  --bg-hover:      #15243B;
  --bg-active:     #1E2B45;

  --page-bg-base:  #0B1426;
  --card-solid:    #111C2D;
  --card-elevated: #15243B;
  --card-border:   #1E2B45;
  --border:        #1E2B45;
  --card-shadow:       0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-card:       0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 10px 30px 0 rgba(0, 165, 255, 0.15);
  --shadow-tile:       0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3);

  --text-primary:  #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted:    #94A3B8;
  --text-disabled: #64748B;
  --text-faint:    #64748B;
  --text-on-page-h: #FFFFFF;
  --text-on-page-p: #E2E8F0;
  --text-on-page-m: #94A3B8;

  --border-subtle:  #1E2B45;
  --border-default: #1E2B45;
  --border-strong:  #2D3A55;

  --accent-cyan:    #00A5FF;
  --accent-cyan-dim: rgba(0, 165, 255, 0.15);
  --accent-cyan-glow: rgba(0, 165, 255, 0.25);
  --accent-cyan-on-page: #00A5FF;

  --sidebar-bg:       #111C2D;
  --sidebar-elevated: #15243B;
  --sidebar-border:   #1E2B45;

  /* Dark semantic aliases */
  --bg-surface-elevated: #15243B;
  --bg-surface-raised:   #111C2D;
  --border-color:        #1E2B45;
  --bg-secondary:        #0B1426;
  --bg-sub:              #0B1426;
  --bg-base:             #0B1426;
  --chip:                #1E2B45;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--page-bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Page canvas — flat CoreUI gray-100. (Previously a textured/grained
   dark-on-light "Craft-app" aesthetic; CoreUI's own canvas is flat.) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--page-bg-base);
}

/* ── Layout ────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: var(--space-6) var(--space-8);
  max-width: calc(100vw - var(--sidebar-width));
}

.app-layout.collapsed .main-content {
  margin-left: var(--sidebar-collapsed);
  max-width: calc(100vw - var(--sidebar-collapsed));
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-width);
  /* Sidebar stays dark even though the main content area is now light —
     CoreUI's own convention. Uses the dedicated --sidebar-* tokens
     rather than the (now light) shared --bg- / --text- ones. */
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.app-layout.collapsed .sidebar { width: var(--sidebar-collapsed); }

/* Collapsed sidebar: icons only — smoothly fade text labels so nothing pops or clips inside rail */
.sidebar-logo-text,
.sidebar-section-label,
.sidebar-item-text,
.sidebar-badge,
.sidebar-user-info {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: translateX(0);
}

.app-layout.collapsed .sidebar-logo-text,
.app-layout.collapsed .sidebar-section-label,
.app-layout.collapsed .sidebar-item-text,
.app-layout.collapsed .sidebar-badge,
.app-layout.collapsed .sidebar-user-info {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  pointer-events: none;
}

.app-layout.collapsed .sidebar-logo,
.app-layout.collapsed .sidebar-item,
.app-layout.collapsed .sidebar-user {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-cyan);
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 30%, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }

.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-text-faint);
  padding: var(--space-4) var(--space-4) var(--space-2);
  white-space: nowrap;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--sidebar-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: all var(--t-fast);
  position: relative;
  white-space: nowrap;
  margin: 1px var(--space-2);
  border-radius: var(--radius-md);
}

.sidebar-item:hover {
  color: var(--sidebar-text);
  background: var(--sidebar-hover-bg);
}

.sidebar-item.active {
  color: var(--sidebar-text);
  background: var(--sidebar-active-bg);
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--accent-cyan);
  border-radius: 0 3px 3px 0;
  margin-left: calc(var(--space-2) * -1);
}

.sidebar-item.coming-soon {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.sidebar-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-item-text { flex: 1; }

.sidebar-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-secondary);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Project switcher */
.project-switcher {
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-elevated);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--t-fast);
}

.project-switcher:hover { border-color: var(--sidebar-border); background: var(--sidebar-hover-bg); }

.project-switcher-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-emerald);
  flex-shrink: 0;
}

.project-switcher-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: var(--space-3);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--sidebar-text-secondary);
  transition: all var(--t-fast);
}

.sidebar-user:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }

.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: calc(var(--sidebar-width) - 14px);
  width: 28px;
  height: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  color: var(--text-muted);
}

.sidebar-toggle:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.app-layout.collapsed .sidebar-toggle { left: calc(var(--sidebar-collapsed) - 14px); }

/* ── Cards — CoreUI-Aligned Solid Dark Surfaces ───────────────
   Cards now carry a visible 1px border + refined shadow (CoreUI pattern).
   Border provides structural clarity at any canvas brightness level.
   Shadow provides physical depth without the heavy stack from before. */
.card, .project-card, .metric-tile, .project-card-horizontal {
  background: var(--card-solid, #FFFFFF);
  border: 1px solid var(--card-border, #E2E8F0);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 4px 20px -2px rgba(112, 144, 176, 0.12), 0 2px 6px -1px rgba(112, 144, 176, 0.08));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
  /* Crisp text fix: cards get scale()/translateY() transforms on load
     and on hover via Motion.js. will-change reserves a stable GPU
     compositing layer up front so text doesn't rasterize on a
     fractional-pixel boundary when the layer is promoted/demoted
     mid-animation (the classic "blurry text on animated cards" bug). */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card:hover, .project-card:hover, .metric-tile:hover, .project-card-horizontal:hover {
  /* translateY-only: no scale(). Even backface-visibility:hidden + will-change:transform
     (above) don't fully prevent lingering sub-pixel text blur from a fractional scale()
     value once the transform reverts — this is a real, documented rendering quirk in
     Chromium/WebKit, not something fixable purely via GPU-layer hinting. */
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-default);
}

html.dark .card,
.dark .card {
  background: #111C2D !important;
  border-color: #1E2B45 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Project Sparkline Highlight Box */
.project-sparkline-box {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-sparkline-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.project-card:hover .project-sparkline-box,
.project-card-horizontal:hover .project-sparkline-box {
  border-color: rgba(88, 86, 214, 0.35);
  box-shadow: inset 0 0 16px rgba(88, 86, 214, 0.12);
}

/* Sparkline Empty State HTML Glass Pill Overlay */
.sparkline-pending-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.sparkline-pending-pill {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(18, 18, 24, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(88, 86, 214, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(88, 86, 214, 0.15);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sparkline-pending-pill .pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  animation: pulseGlow 1.8s ease-in-out infinite;
}

.sparkline-zero-pill {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-rose);
  background: rgba(18, 18, 24, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sparkline-zero-pill .zero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-rose);
  box-shadow: 0 0 6px var(--accent-rose);
}

/* Clickable Metric Cards */
.clickable-metric-tile {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.clickable-metric-tile:hover {
  /* No scale() — see the .card:hover comment above on why fractional scale leaves text blurry. */
  transform: translateY(-4px);
  border-color: rgba(88, 86, 214, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(88, 86, 214, 0.12) !important;
}

/* ── Project Avatar Ring ───────────────────────────────────────── */
.project-avatar-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(88, 86, 214, 0.12);
  border: 1.5px solid rgba(88, 86, 214, 0.4);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px rgba(88, 86, 214, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover .project-avatar-ring,
.project-card-horizontal:hover .project-avatar-ring {
  /* No scale() — this ring sometimes wraps a text initial (see tasks templates), same
     blur risk as .card:hover above. The stronger glow alone still reads as a hover state. */
  box-shadow: 0 0 14px rgba(88, 86, 214, 0.45);
}

/* ── Actions Dropdown Drawer Styling ───────────────────────────── */
.actions-dropdown-menu {
  /* Absolutely positioned against its .project-actions-dropdown wrapper */
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #111C2D !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-md, 8px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
  z-index: 100;
  padding: 6px !important;
  overflow: hidden;
  min-width: 175px;
}

html:not(.dark) .actions-dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #E2E8F0 !important;
  text-decoration: none;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

html:not(.dark) .dropdown-item {
  color: #1E293B !important;
}

.dropdown-item:hover {
  background: rgba(0, 165, 255, 0.15) !important;
  color: #38BDF8 !important;
  transform: translateX(2px);
}

html:not(.dark) .dropdown-item:hover {
  background: #F1F5F9 !important;
  color: #0284C7 !important;
}

.dropdown-item svg {
  color: #94A3B8;
  opacity: 0.9;
  flex-shrink: 0;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dropdown-item:hover svg {
  color: #38BDF8;
  opacity: 1;
  transform: scale(1.1);
}

html:not(.dark) .dropdown-item svg {
  color: #64748B;
}

html:not(.dark) .dropdown-item:hover svg {
  color: #0284C7;
}

.dropdown-item-danger {
  color: #F87171 !important;
}

.dropdown-item-danger svg {
  color: #F87171 !important;
}

.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
}

.dropdown-item-danger:hover svg {
  color: #EF4444 !important;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

html:not(.dark) .dropdown-divider {
  background: #E2E8F0;
}

/* ── Page Header ───────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  position: relative;
  z-index: 5;
}

/* ── Custom Theme-Matched Glassmorphic Dropdowns ──────────────── */
.custom-dropdown {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.custom-dropdown-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 34px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.custom-dropdown-btn:hover {
  background: var(--bg-hover);
  border-color: rgba(88, 86, 214, 0.4);
  box-shadow: 0 0 12px rgba(88, 86, 214, 0.15);
}

.custom-dropdown-btn.active {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(88, 86, 214, 0.25);
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
}

.custom-dropdown-btn .dropdown-chevron {
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.custom-dropdown-btn.active .dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 175px;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 9999 !important;
  padding: 5px !important;
  overflow: hidden;
}

.custom-dropdown-menu:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.custom-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.custom-dropdown-option:hover {
  background: rgba(88, 86, 214, 0.16) !important;
  color: var(--accent-cyan) !important;
  transform: translateX(2px);
}

.custom-dropdown-option.active {
  background: rgba(88, 86, 214, 0.22) !important;
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

.custom-dropdown-option .option-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.custom-dropdown-option .check-icon {
  color: var(--accent-cyan);
}

/* ── Audit Page: Table Filter Dropdowns (status code / issues selects) ──
   Alpine.js-driven custom selects (see templates/audit/overview.html) had
   no CSS at all for these three classes, so the open panel rendered as
   unstyled inline flow content — all option labels ran together on one
   line instead of stacking in a floating, bordered panel. Styled to match
   the existing .custom-dropdown-* pattern used elsewhere for consistency. */
.audit-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 0 12px;
  height: 36px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.audit-select-trigger:hover {
  background: var(--bg-hover);
  border-color: rgba(88, 86, 214, 0.4);
}

.audit-select-trigger svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.audit-select-pane {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 200;
  padding: 5px !important;
  overflow: hidden;
}

.audit-select-item {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.audit-select-item:hover {
  background: rgba(88, 86, 214, 0.14) !important;
  color: var(--accent-cyan) !important;
  transform: translateX(2px);
}

.audit-select-item.active {
  background: rgba(88, 86, 214, 0.22) !important;
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--card-border);
}

/* Card footer — CoreUI-style separator above footer actions */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--card-border);
}

.card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.metric-tile {
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Top vibrant accent line */
.metric-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: var(--tile-accent-color, var(--accent-cyan));
  border-radius: 999px;
  opacity: 0.75;
  box-shadow: 0 0 12px var(--tile-accent-color, var(--accent-cyan));
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
}

/* Opt-out for the top accent line — applied to the grid container so
   individual card markup doesn't need to change. Used on All Projects,
   Rankings, and Analytics, where the line was flagged as unwanted. */
.metrics-grid-flat .metric-tile::before { display: none; }

.metric-tile:hover {
  z-index: 10;
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-default);
}

.metric-tile:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 16px var(--tile-accent-color, var(--accent-cyan));
}

.metric-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin-bottom: var(--space-2);
  transition: color 0.3s ease;
}

.metric-tile:hover .metric-tile-label {
  color: var(--text-primary);
}

.metric-tile-value {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-2);
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.metric-tile:hover .metric-tile-value {
  /* No scale() — directly scaling number/text glyphs is the worst-case version of the
     blurry-text-after-hover bug (see .card:hover above). Color shift alone still reads
     as a clear hover state. */
  color: var(--accent-cyan);
}

.metric-tile-trend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  font-weight: 500;
}

/* ── Solid CoreUI Stat Widget ────────────────────────────────────
   Opt-in via .metric-tile.tile-solid + a .tile-<color> variant.
   Matches CoreUI's real CWidgetStatsA component (solid saturated
   background, white text, inline trend, small chart along the
   bottom edge) rather than the app's usual white-card-with-accent-
   bar tile. White text is used even on the amber/warning variant —
   confirmed against CoreUI's own shipped widget, which uses white
   text there too for this large-bold-number treatment. */
.metric-tile.tile-solid {
  border: none;
  overflow: hidden;
}
.metric-tile.tile-solid::before { display: none; }

.metric-tile.tile-solid.tile-primary   { background: var(--tile-blue); color: rgba(255,255,255,0.92); }
.metric-tile.tile-solid.tile-info      { background: var(--accent-info); color: rgba(255,255,255,0.92); }
.metric-tile.tile-solid.tile-warning   { background: var(--accent-orange); color: rgba(0,0,0,0.78); } /* orange, not amber/yellow — user asked for no yellow on any card */
.metric-tile.tile-solid.tile-danger    { background: var(--accent-rose); color: rgba(255,255,255,0.92); }
.metric-tile.tile-solid.tile-success   { background: var(--accent-emerald); color: rgba(255,255,255,0.92); }
.metric-tile.tile-solid.tile-secondary { background: var(--accent-violet); color: rgba(255,255,255,0.92); }
/* Yellow is used only where explicitly requested (Health Score 70–79 band). It's too light for
   white text, so everything on it — value, label, trends, menu, help tip, health ring — goes dark. */
.metric-tile.tile-solid.tile-yellow { background: #EAB308; color: #1F2937; }
.metric-tile.tile-solid.tile-yellow .metric-tile-value,
.metric-tile.tile-solid.tile-yellow .metric-tile-label,
.metric-tile.tile-solid.tile-yellow .tile-solid-trend,
.metric-tile.tile-solid.tile-yellow .tile-solid-menu,
.metric-tile.tile-solid.tile-yellow .health-ring-number { color: #1F2937 !important; }
.metric-tile.tile-solid.tile-yellow .help-tip { color: #1F2937 !important; border-color: rgba(31,41,55,0.45) !important; background: rgba(255,255,255,0.35) !important; }
.metric-tile.tile-solid.tile-yellow .health-ring-fill { stroke: #1F2937 !important; }
.metric-tile.tile-solid.tile-yellow .health-ring-bg { stroke: rgba(31,41,55,0.2) !important; }

.metric-tile.tile-solid .metric-tile-label {
  color: rgba(255,255,255,0.92);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
  order: 2;
}
.metric-tile.tile-solid:hover .metric-tile-label { color: #fff; }

.metric-tile.tile-solid .metric-tile-value {
  color: #fff;
  font-size: 28px;
  letter-spacing: -0.5px;
  margin-bottom: 2px;
  order: 1;
}
.metric-tile.tile-solid:hover .metric-tile-value { color: #fff; }

.tile-solid-trend {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  margin-left: 2px;
}
/* Direction-coded trend text. Light tints by default — read fine
   against the indigo/blue/red/green/gray tile backgrounds, which are
   all mid-to-dark. The amber/warning tile is the one outlier (it's
   the brightest of the six), so it gets its own dark-shade override
   below rather than reusing the light tints, which would wash out
   against a light background the same way white nearly does. */
.tile-solid-trend.trend-up   { color: #BBF7D0; }
.tile-solid-trend.trend-down { color: #FECACA; }

/* Some dashboards (analytics/overview, gsc, cannibalization, rankings/dashboard) use an older
   .metric-tile-trend element with its own inline dynamic color (var(--accent-emerald) for up,
   var(--accent-rose) for down, var(--text-muted) for flat) instead of .tile-solid-trend +
   .trend-up/.trend-down. On a now-colored tile background that inline color can land as
   green-on-green or red-on-red — force it to the same light/legible tint regardless of the
   inline style once the tile itself is tile-solid. */
.metric-tile.tile-solid .metric-tile-trend { color: rgba(255,255,255,0.85) !important; }

.tile-warning .tile-solid-trend.trend-up    { color: #14532D; }
.tile-warning .tile-solid-trend.trend-down  { color: #7F1D1D; }
.tile-warning .tile-solid-trend.trend-neutral,
.tile-warning .tile-solid-trend             { color: rgba(0,0,0,0.6); }

/* .trend-neutral (generic utility class, defined further below with
   color: var(--text-muted)) has the same specificity as .tile-solid-trend,
   so on a tile-solid card it can win the cascade by source order and land
   muted-gray-on-saturated-background — nearly invisible. Force it back to
   the same light tint as the rest of .tile-solid-trend on every non-warning
   tile (warning already gets a dark tint above, which stays correct on the
   orange tile-warning background). */
.metric-tile.tile-solid:not(.tile-warning) .tile-solid-trend.trend-neutral { color: rgba(255,255,255,0.82) !important; }

/* Ad-hoc badges/labels inside a solid tile that set their own inline
   color: var(--text-muted) or var(--text-secondary) — meant to read as
   quiet gray text against the app's dark page background — go equally
   invisible once their parent tile has a saturated solid background.
   Same failure mode as .metric-tile-trend above, just on elements that
   aren't that exact class (a child's own inline color always wins over
   an inherited parent value, even an !important one), so it needs its
   own override here. */
.metric-tile.tile-solid [style*="var(--text-muted)"],
.metric-tile.tile-solid [style*="var(--text-secondary)"] { color: rgba(255,255,255,0.82) !important; }
.metric-tile.tile-solid.tile-warning [style*="var(--text-muted)"],
.metric-tile.tile-solid.tile-warning [style*="var(--text-secondary)"] { color: rgba(0,0,0,0.6) !important; }

/* A generic .badge (e.g. severity-badge-low/medium/high in analytics/cannibalization.html)
   carries its own semantic tint — translucent green/amber/red text designed to sit on a
   neutral card. Dropped inside a solid tile-solid card, that tint either goes low-contrast
   against a same-hue tile (e.g. green badge text on the green tile-success background,
   ~1.8:1) or reintroduces a bare yellow/amber (severity-badge-medium) onto a card that is
   otherwise solid-color-only. Force a neutral translucent pill instead, matching whichever
   text tone the rest of that tile already uses. */
.metric-tile.tile-solid .badge {
  color: #fff !important;
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.metric-tile.tile-solid.tile-warning .badge {
  color: rgba(0,0,0,0.75) !important;
  background: rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.28) !important;
}

.tile-solid-menu {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  z-index: 3;
  transition: color var(--t-fast);
}
.tile-solid-menu:hover { color: #fff; }

.metric-tile.tile-solid { display: flex; flex-direction: column; }

/* Metric tile icon avatar (CoreUI widget-stat pattern) */
.metric-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tile-accent-color, var(--accent-cyan-dim));
  color: var(--tile-accent-color, var(--accent-cyan));
  font-size: 22px;
}

/* ── Widget Stat — CoreUI-style KPI widget with icon on right ──
   Use: <div class="widget-stat">
          <div class="widget-stat-body">
            <div class="widget-stat-label">Sessions</div>
            <div class="widget-stat-value">1,234</div>
            <div class="widget-stat-trend trend-up">↑ 4.2%</div>
          </div>
          <div class="widget-stat-icon"><svg.../></div>
        </div> */
.widget-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.widget-stat-body { flex: 1; min-width: 0; }
.widget-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.widget-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.widget-stat-trend {
  font-size: 12px;
  font-weight: 600;
  margin-top: var(--space-1);
}
.widget-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
  font-size: 24px;
  transition: transform 0.2s ease;
}
.metric-tile:hover .widget-stat-icon { transform: scale(1.08); }

/* ── Progress Group — CoreUI labeled progress row ─────────────
   Label on left, percentage on right, bar below. */
.progress-group {
  margin-bottom: var(--space-4);
}
.progress-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}
.progress-group-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.progress-group-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.progress-group-bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.progress-group-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent-cyan);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trend-up { color: var(--accent-emerald); }
.trend-down { color: var(--accent-rose); }
.trend-neutral { color: var(--text-muted); }

/* ── Mint Highlight Card ───────────────────────────────────────
   Floating pastel-mint card treatment (matches the reference's
   "Ready to assign" / "Amount Owed" light cards on a dark canvas).
   Opt-in via .card-mint / .metric-tile.tile-mint. */
.card-mint, .metric-tile.tile-mint {
  background: var(--accent-mint-pale);
  border-color: transparent;
  color: var(--on-mint-text);
  /* Stacked-card illusion: two receding "cards" peeking out behind,
     plus a soft ambient shadow — mirrors the reference's card-deck look. */
  box-shadow:
    0 6px 0 -2px var(--bg-elevated),
    0 12px 0 -4px var(--bg-hover),
    0 22px 36px rgba(0,0,0,0.5);
}

.card-mint:hover, .metric-tile.tile-mint:hover {
  box-shadow:
    0 6px 0 -2px var(--bg-elevated),
    0 12px 0 -4px var(--bg-hover),
    0 28px 48px rgba(0,0,0,0.6);
}

.card-mint .card-title,
.tile-mint .metric-tile-value { color: var(--on-mint-text); }

.card-mint .card-title,
.card-mint .metric-tile-label,
.tile-mint .metric-tile-label { color: rgba(10, 46, 39, 0.65); }

.card-mint::before, .tile-mint::before { display: none; }
.card-mint::after { background: radial-gradient(circle 120px at 100% 0%, rgba(10, 46, 39, 0.08), transparent 70%); }
.tile-mint::after { background: radial-gradient(circle, rgba(10, 46, 39, 0.08), transparent 70%); }

/* ── Health Score Ring ─────────────────────────────────────── */
.health-ring { position: relative; display: inline-flex; }
.health-ring svg { transform: rotate(-90deg); }
.health-ring-bg { fill: none; stroke: var(--border-subtle); stroke-width: 8; }
.health-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.health-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}
.health-ring-number { font-size: 18px; font-weight: 700; }
.health-ring-unit { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

/* ── Semi-Circle Gauge (flagship radial-progress card) ────────
   Minimalist 180° gauge with 0/100 end markers, used for hero
   metric cards (e.g. Audit Health Score). */
.gauge-semi { position: relative; width: 220px; max-width: 100%; }
.gauge-semi svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-semi-bg { fill: none; stroke: var(--border-subtle); stroke-width: 14; stroke-linecap: round; }
.gauge-semi-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.gauge-semi-tick { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); }
.gauge-semi-value {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.gauge-semi-number { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; }
.gauge-semi-unit { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Buttons — Spike & Shadcn Design System ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px; /* Spike Shadcn 8px rounded corners */
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 38px;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}

.btn svg, .btn i {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.btn:focus-visible {
  outline: 2px solid #00A5FF;
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled, .btn[disabled], .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* 1. Primary Button (Spike Blue) */
.btn-primary {
  background: #00A5FF;
  color: #FFFFFF !important;
  border: 1px solid #00A5FF;
  box-shadow: 0 2px 6px rgba(0, 165, 255, 0.25);
}
.btn-primary:hover {
  background: #0092E0;
  border-color: #0092E0;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 165, 255, 0.35);
  transform: translateY(-1px);
}

/* 2. Slate / Secondary Button (Dark Gray in screenshot) */
.btn-slate, .btn-dark-secondary {
  background: #5A6A85;
  color: #FFFFFF !important;
  border: 1px solid #5A6A85;
  box-shadow: 0 2px 6px rgba(90, 106, 133, 0.25);
}
.btn-slate:hover, .btn-dark-secondary:hover {
  background: #465670;
  border-color: #465670;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 3. Secondary Button (Spike Soft Slate) */
.btn-secondary {
  background: #EEF5FC;
  color: #2A3547 !important;
  border: 1px solid #DFE5EF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
  color: #00A5FF !important;
  border-color: #BEE3F8;
  background: #E2EFFC;
  transform: translateY(-1px);
}
html.dark .btn-secondary, [data-theme="dark"] .btn-secondary, .dark .btn-secondary {
  background: #1E2B45;
  color: #FFFFFF !important;
  border-color: #2D3D5E;
}
html.dark .btn-secondary:hover, [data-theme="dark"] .btn-secondary:hover, .dark .btn-secondary:hover {
  background: #253654;
  border-color: #00A5FF;
  color: #00A5FF !important;
}

/* 4. Indigo / Purple Button */
.btn-indigo, .btn-purple {
  background: #5E5CE6;
  color: #FFFFFF !important;
  border: 1px solid #5E5CE6;
  box-shadow: 0 2px 6px rgba(94, 92, 230, 0.25);
}
.btn-indigo:hover, .btn-purple:hover {
  background: #4E4CC8;
  border-color: #4E4CC8;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 5. Success / Green Button */
.btn-success {
  background: #13DEB9;
  color: #FFFFFF !important;
  border: 1px solid #13DEB9;
  box-shadow: 0 2px 6px rgba(19, 222, 185, 0.25);
}
.btn-success:hover {
  background: #02b390;
  border-color: #02b390;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 6. Warning / Orange Button */
.btn-warning {
  background: #FFA800;
  color: #FFFFFF !important;
  border: 1px solid #FFA800;
  box-shadow: 0 2px 6px rgba(255, 168, 0, 0.25);
}
.btn-warning:hover {
  background: #e09400;
  border-color: #e09400;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 7. Info / Cyan Button */
.btn-info {
  background: #46CAEB;
  color: #FFFFFF !important;
  border: 1px solid #46CAEB;
  box-shadow: 0 2px 6px rgba(70, 202, 235, 0.25);
}
.btn-info:hover {
  background: #2dbadc;
  border-color: #2dbadc;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 8. Danger / Red / Coral Button */
.btn-danger, .btn-destructive, .btn-error {
  background: #FA896B;
  color: #FFFFFF !important;
  border: 1px solid #FA896B;
  box-shadow: 0 2px 6px rgba(250, 137, 107, 0.25);
}
.btn-danger:hover, .btn-destructive:hover, .btn-error:hover {
  background: #f8704d;
  border-color: #f8704d;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 9. Outline Button */
.btn-outline {
  background: transparent;
  color: #2A3547 !important;
  border: 1px solid #DFE5EF;
}
.btn-outline:hover {
  color: #00A5FF !important;
  border-color: #00A5FF;
  background: rgba(0, 165, 255, 0.05);
  transform: translateY(-1px);
}
html.dark .btn-outline, [data-theme="dark"] .btn-outline, .dark .btn-outline {
  color: #E2E8F0 !important;
  border-color: #1E2B45;
}
html.dark .btn-outline:hover, [data-theme="dark"] .btn-outline:hover, .dark .btn-outline:hover {
  color: #00A5FF !important;
  border-color: #00A5FF;
  background: rgba(0, 165, 255, 0.1);
}

.btn-outline-primary {
  background: transparent;
  color: #00A5FF !important;
  border: 1px solid #00A5FF;
}
.btn-outline-primary:hover {
  background: #00A5FF;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 165, 255, 0.3);
  transform: translateY(-1px);
}

.btn-outline-success {
  background: transparent;
  color: #13DEB9 !important;
  border: 1px solid #13DEB9;
}
.btn-outline-success:hover {
  background: #13DEB9;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(19, 222, 185, 0.3);
  transform: translateY(-1px);
}

.btn-outline-warning {
  background: transparent;
  color: #FFA800 !important;
  border: 1px solid #FFA800;
}
.btn-outline-warning:hover {
  background: #FFA800;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(255, 168, 0, 0.3);
  transform: translateY(-1px);
}

.btn-outline-danger {
  background: transparent;
  color: #FA896B !important;
  border: 1px solid #FA896B;
}
.btn-outline-danger:hover {
  background: #FA896B;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(250, 137, 107, 0.3);
  transform: translateY(-1px);
}

/* 5. Ghost Button */
.btn-ghost {
  background: transparent;
  color: #7C8FAC !important;
  border: 1px solid transparent;
}
.btn-ghost:hover {
  color: #00A5FF !important;
  background: #EEF5FC;
}
html.dark .btn-ghost:hover, [data-theme="dark"] .btn-ghost:hover, .dark .btn-ghost:hover {
  background: #1E2B45;
  color: #FFFFFF !important;
}

/* 6. Success / Emerald Button */
.btn-success {
  background: #13DEB9;
  color: #FFFFFF !important;
  border: 1px solid #13DEB9;
  box-shadow: 0 3px 10px rgba(19, 222, 185, 0.28);
}
.btn-success:hover {
  background: #02b390;
  border-color: #02b390;
  color: #FFFFFF !important;
  box-shadow: 0 5px 16px rgba(19, 222, 185, 0.38);
  transform: translateY(-1px);
}

.btn-light-success, .btn-soft-success {
  background: #E8F7F5;
  color: #13DEB9 !important;
  border: 1px solid rgba(19, 222, 185, 0.25);
}
.btn-light-success:hover, .btn-soft-success:hover {
  background: #13DEB9;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
html.dark .btn-light-success, [data-theme="dark"] .btn-light-success, .dark .btn-light-success {
  background: rgba(19, 222, 185, 0.15);
  border-color: rgba(19, 222, 185, 0.3);
}

/* 7. Warning / Amber Button */
.btn-warning {
  background: #FFA800;
  color: #FFFFFF !important;
  border: 1px solid #FFA800;
  box-shadow: 0 3px 10px rgba(255, 168, 0, 0.28);
}
.btn-warning:hover {
  background: #e09400;
  border-color: #e09400;
  color: #FFFFFF !important;
  box-shadow: 0 5px 16px rgba(255, 168, 0, 0.38);
  transform: translateY(-1px);
}

.btn-light-warning, .btn-soft-warning {
  background: #FFF8EC;
  color: #FFA800 !important;
  border: 1px solid rgba(255, 168, 0, 0.25);
}
.btn-light-warning:hover, .btn-soft-warning:hover {
  background: #FFA800;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
html.dark .btn-light-warning, [data-theme="dark"] .btn-light-warning, .dark .btn-light-warning {
  background: rgba(255, 168, 0, 0.15);
  border-color: rgba(255, 168, 0, 0.3);
}

/* 8. Danger / Destructive Button */
.btn-danger, .btn-destructive, .btn-error {
  background: #FA896B;
  color: #FFFFFF !important;
  border: 1px solid #FA896B;
  box-shadow: 0 3px 10px rgba(250, 137, 107, 0.28);
}
.btn-danger:hover, .btn-destructive:hover, .btn-error:hover {
  background: #f8704d;
  border-color: #f8704d;
  color: #FFFFFF !important;
  box-shadow: 0 5px 16px rgba(250, 137, 107, 0.38);
  transform: translateY(-1px);
}

.btn-light-danger, .btn-soft-danger {
  background: #FDF3F0;
  color: #FA896B !important;
  border: 1px solid rgba(250, 137, 107, 0.25);
}
.btn-light-danger:hover, .btn-soft-danger:hover {
  background: #FA896B;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
html.dark .btn-light-danger, [data-theme="dark"] .btn-light-danger, .dark .btn-light-danger {
  background: rgba(250, 137, 107, 0.15);
  border-color: rgba(250, 137, 107, 0.3);
}

/* 9. Info / Cyan Button */
.btn-info {
  background: #46CAEB;
  color: #FFFFFF !important;
  border: 1px solid #46CAEB;
  box-shadow: 0 3px 10px rgba(70, 202, 235, 0.28);
}
.btn-info:hover {
  background: #2dbadc;
  border-color: #2dbadc;
  color: #FFFFFF !important;
  box-shadow: 0 5px 16px rgba(70, 202, 235, 0.38);
  transform: translateY(-1px);
}

.btn-light-info, .btn-soft-info {
  background: #E8F8FA;
  color: #46CAEB !important;
  border: 1px solid rgba(70, 202, 235, 0.25);
}
.btn-light-info:hover, .btn-soft-info:hover {
  background: #46CAEB;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 10. Link Button */
.btn-link {
  background: none;
  border: none;
  color: #00A5FF !important;
  padding: 0;
  min-height: auto;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover {
  color: #0080CC !important;
  text-decoration: underline;
}

/* ── Button Sizing Scale ───────────────────────────────────── */
.btn-xs {
  min-height: 26px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
}
.btn-sm {
  min-height: 32px;
  padding: 4px 14px;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
}
.btn-md {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 14px;
}
.btn-lg {
  min-height: 48px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
}

/* Icon Buttons (Square & Circle) */
.btn-icon {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 9999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-sm {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 9999px;
  flex-shrink: 0;
}
.btn-icon-lg {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 9999px;
  flex-shrink: 0;
}
.btn-rounded-square {
  border-radius: 12px !important;
}

/* Button Groups */
.btn-group {
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.btn-group > .btn {
  border-radius: 0 !important;
  border-right-width: 0;
}
.btn-group > .btn:first-child {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  border-right-width: 1px;
}

/* ── Badges / Status Pills — Spike & Shadcn Standard ───────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-body);
  line-height: 1.25;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

/* Badge size variants */
.badge-xs { padding: 1px 6px; font-size: 10px; }
.badge-sm { padding: 2px 8px; font-size: 11px; }
.badge-md { padding: 3px 10px; font-size: 11.5px; }
.badge-lg { padding: 5px 14px; font-size: 13px; }
.badge-pill { border-radius: 9999px !important; }
.badge-square { border-radius: 6px !important; }

/* ── 1. Soft / Light Badges (Spike Default) ── */
.badge-primary, .badge-soft-primary, .badge-cyan, .badge-notice, .badge-soft-notice {
  background: #E8F7FF;
  color: #00A5FF !important;
  border: 1px solid rgba(0, 165, 255, 0.2);
}
.badge-indigo, .badge-purple, .badge-soft-indigo, .badge-soft-purple {
  background: #EEEDFD;
  color: #5E5CE6 !important;
  border: 1px solid rgba(94, 92, 230, 0.2);
}
.badge-secondary, .badge-default, .badge-neutral, .badge-soft-secondary {
  background: #F4F7FB;
  color: #7C8FAC !important;
  border: 1px solid #DFE5EF;
}
.badge-success, .badge-soft-success {
  background: #E8F7F5;
  color: #13DEB9 !important;
  border: 1px solid rgba(19, 222, 185, 0.2);
}
.badge-warning, .badge-high, .badge-soft-warning, .badge-soft-high {
  background: #FFF8EC;
  color: #FFA800 !important;
  border: 1px solid rgba(255, 168, 0, 0.2);
}
.badge-danger, .badge-critical, .badge-error, .badge-soft-danger, .badge-soft-critical {
  background: #FDF3F0;
  color: #FA896B !important;
  border: 1px solid rgba(250, 137, 107, 0.2);
}
.badge-info, .badge-soft-info {
  background: #E8F8FA;
  color: #46CAEB !important;
  border: 1px solid rgba(70, 202, 235, 0.2);
}

/* Dark Mode Soft Badges */
html.dark .badge-primary, html.dark .badge-soft-primary, html.dark .badge-cyan, html.dark .badge-notice, html.dark .badge-soft-notice,
.dark .badge-primary, .dark .badge-soft-primary, .dark .badge-cyan, .dark .badge-notice, .dark .badge-soft-notice {
  background: rgba(0, 165, 255, 0.15);
  color: #00A5FF !important;
  border-color: rgba(0, 165, 255, 0.3);
}
html.dark .badge-indigo, html.dark .badge-purple, html.dark .badge-soft-indigo, html.dark .badge-soft-purple,
.dark .badge-indigo, .dark .badge-purple, .dark .badge-soft-indigo, .dark .badge-soft-purple {
  background: rgba(94, 92, 230, 0.15);
  color: #8D8BF5 !important;
  border-color: rgba(94, 92, 230, 0.3);
}
html.dark .badge-secondary, html.dark .badge-default, html.dark .badge-neutral, html.dark .badge-soft-secondary,
.dark .badge-secondary, .dark .badge-default, .dark .badge-neutral, .dark .badge-soft-secondary {
  background: #1E2B45;
  color: #A1B1C8 !important;
  border-color: #2D3D5E;
}
html.dark .badge-success, html.dark .badge-soft-success,
.dark .badge-success, .dark .badge-soft-success {
  background: rgba(19, 222, 185, 0.15);
  color: #13DEB9 !important;
  border-color: rgba(19, 222, 185, 0.3);
}
html.dark .badge-warning, html.dark .badge-high, html.dark .badge-soft-warning, html.dark .badge-soft-high,
.dark .badge-warning, .dark .badge-high, .dark .badge-soft-warning, .dark .badge-soft-high {
  background: rgba(255, 168, 0, 0.15);
  color: #FFA800 !important;
  border-color: rgba(255, 168, 0, 0.3);
}
html.dark .badge-danger, html.dark .badge-critical, html.dark .badge-error, html.dark .badge-soft-danger, html.dark .badge-soft-critical,
.dark .badge-danger, .dark .badge-critical, .dark .badge-error, .dark .badge-soft-danger, .dark .badge-soft-critical {
  background: rgba(250, 137, 107, 0.15);
  color: #FA896B !important;
  border-color: rgba(250, 137, 107, 0.3);
}
html.dark .badge-info, html.dark .badge-soft-info,
.dark .badge-info, .dark .badge-soft-info {
  background: rgba(70, 202, 235, 0.15);
  color: #46CAEB !important;
  border-color: rgba(70, 202, 235, 0.3);
}

/* ── 2. Solid Badges ── */
.badge-solid-primary   { background: #00A5FF !important; color: #FFFFFF !important; border: 1px solid #00A5FF !important; }
.badge-solid-indigo    { background: #5E5CE6 !important; color: #FFFFFF !important; border: 1px solid #5E5CE6 !important; }
.badge-solid-secondary { background: #7C8FAC !important; color: #FFFFFF !important; border: 1px solid #7C8FAC !important; }
.badge-solid-success   { background: #13DEB9 !important; color: #FFFFFF !important; border: 1px solid #13DEB9 !important; }
.badge-solid-warning   { background: #FFA800 !important; color: #FFFFFF !important; border: 1px solid #FFA800 !important; }
.badge-solid-info      { background: #46CAEB !important; color: #FFFFFF !important; border: 1px solid #46CAEB !important; }
.badge-solid-error, .badge-solid-danger, .badge-solid-critical { background: #FA896B !important; color: #FFFFFF !important; border: 1px solid #FA896B !important; }

/* ── 3. Outline Badges ── */
.badge-outline, .badge-outline-secondary { background: transparent !important; color: #7C8FAC !important; border: 1px solid #DFE5EF !important; }
html.dark .badge-outline, html.dark .badge-outline-secondary, .dark .badge-outline, .dark .badge-outline-secondary { border-color: #2D3D5E !important; color: #A1B1C8 !important; }
.badge-outline-primary   { background: transparent !important; color: #00A5FF !important; border: 1px solid #00A5FF !important; }
.badge-outline-indigo    { background: transparent !important; color: #5E5CE6 !important; border: 1px solid #5E5CE6 !important; }
.badge-outline-success   { background: transparent !important; color: #13DEB9 !important; border: 1px solid #13DEB9 !important; }
.badge-outline-warning   { background: transparent !important; color: #FFA800 !important; border: 1px solid #FFA800 !important; }
.badge-outline-info      { background: transparent !important; color: #46CAEB !important; border: 1px solid #46CAEB !important; }
.badge-outline-error, .badge-outline-danger, .badge-outline-critical { background: transparent !important; color: #FA896B !important; border: 1px solid #FA896B !important; }

/* ── 4. Dot Status Badges ── */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Spike Dashboard 2 Colorful Stat Cards (Sales, Refunds, Earnings) ── */
.spike-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: 24px;
  color: #ffffff;
  box-shadow: 0 4px 20px -2px rgba(112, 144, 176, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spike-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.25);
}
.spike-stat-card::after {
  content: '';
  position: absolute;
  top: -15px;
  right: -15px;
  width: 85px;
  height: 85px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  background: rgba(255, 255, 255, 0.20);
  pointer-events: none;
}
.spike-stat-card.stat-blue   { background: linear-gradient(135deg, #00A5FF 0%, #0088DB 100%); }
.spike-stat-card.stat-coral  { background: linear-gradient(135deg, #FA896B 0%, #F86E4B 100%); }
.spike-stat-card.stat-purple { background: linear-gradient(135deg, #7C3AED 0%, #6324D6 100%); }
.spike-stat-card.stat-green  { background: linear-gradient(135deg, #13DEB9 0%, #0BBF9E 100%); }
.spike-stat-card.stat-amber  { background: linear-gradient(135deg, #FFA800 0%, #E69500 100%); }

/* ── btn-outline / btn-xs ──────────────────────────────────────
   Secondary-emphasis bordered button + compact size variant used
   throughout the backlinks module tables and card headers. */
.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-outline:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}


/* ── Stats Grid / Stat Cards (Backlink Overview KPIs) ──────────
   Four-column KPI row with dark solid cards, matching the global
   .metric-tile visual language but lighter-weight. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}
.stat-card {
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); border-color: var(--border-default); }
.stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.stat-change {
  font-size: 12px;
  font-weight: 500;
  margin-top: var(--space-1);
}
.stat-change.positive { color: var(--accent-emerald); }
.stat-change.negative { color: var(--accent-rose); }

/* ── .stat-card solid color variants ───────────────────────────
   Same solid-colored-tile look as .metric-tile.tile-solid (see ~line 1122),
   as an add-on modifier class so existing .stat-card markup (label/value/
   change children, onclick handlers, data-counter attrs) doesn't need to
   change — just add one of these classes to the existing .stat-card div.
   !important on the inner text colors overrides any per-card inline
   color:var(--accent-*) styles set on .stat-value/.stat-change today. */
.stat-card.stat-blue      { background: var(--tile-blue); border: none; }
.stat-card.stat-blue-alt  { background: var(--accent-info); border: none; }
.stat-card.stat-green     { background: var(--accent-emerald); border: none; }
.stat-card.stat-gray      { background: var(--accent-violet); border: none; }
.stat-card.stat-red       { background: var(--accent-rose); border: none; }
.stat-card.stat-amber     { background: var(--accent-orange); border: none; } /* orange, not amber/yellow — user asked for no yellow on any card */

.stat-card.stat-blue, .stat-card.stat-blue-alt, .stat-card.stat-green, .stat-card.stat-gray, .stat-card.stat-red {
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92); /* inherits into any plain-text child with no color of its own */
}
.stat-card.stat-amber {
  box-shadow: none;
  color: rgba(0, 0, 0, 0.78);
}
.stat-card.stat-blue:hover, .stat-card.stat-blue-alt:hover, .stat-card.stat-green:hover,
.stat-card.stat-gray:hover, .stat-card.stat-red:hover, .stat-card.stat-amber:hover {
  border-color: transparent;
}
.stat-card.stat-blue .stat-label, .stat-card.stat-blue-alt .stat-label, .stat-card.stat-green .stat-label,
.stat-card.stat-gray .stat-label, .stat-card.stat-red .stat-label, .stat-card.stat-amber .stat-label {
  color: rgba(255, 255, 255, 0.85) !important;
}
.stat-card.stat-blue .stat-value, .stat-card.stat-blue-alt .stat-value, .stat-card.stat-green .stat-value,
.stat-card.stat-gray .stat-value, .stat-card.stat-red .stat-value, .stat-card.stat-amber .stat-value {
  color: #fff !important;
}
.stat-card.stat-blue .stat-change, .stat-card.stat-blue-alt .stat-change, .stat-card.stat-green .stat-change,
.stat-card.stat-gray .stat-change, .stat-card.stat-red .stat-change, .stat-card.stat-amber .stat-change,
.stat-card.stat-blue [style*="color"], .stat-card.stat-blue-alt [style*="color"], .stat-card.stat-green [style*="color"],
.stat-card.stat-gray [style*="color"], .stat-card.stat-red [style*="color"], .stat-card.stat-amber [style*="color"] {
  color: rgba(255, 255, 255, 0.82) !important;
}
.stat-card.stat-amber .stat-label, .stat-card.stat-amber .stat-value, .stat-card.stat-amber .stat-change,
.stat-card.stat-amber [style*="color"] {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* ── .kpi-card solid color variants ────────────────────────────
   A third stat-tile pattern used by a few pages (teams/workload.html,
   teams/dashboard.html, local_seo/gbp_review_management.html,
   ai_search/dashboard.html's ".card kpi-card") — each defines its own local
   `.kpi-card` background (in a per-template <style> block or inline), so
   every rule here needs !important to reliably win regardless of source
   order or inline styles. Mirrors the .stat-card variants above. */
.kpi-card.kpi-blue      { background: var(--tile-blue) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
.kpi-card.kpi-blue-alt  { background: var(--accent-info) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
.kpi-card.kpi-green     { background: var(--accent-emerald) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
.kpi-card.kpi-gray      { background: var(--accent-violet) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
.kpi-card.kpi-red       { background: var(--accent-rose) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
.kpi-card.kpi-orange    { background: var(--accent-orange) !important; border-color: transparent !important; color: rgba(0,0,0,0.78) !important; }
/* ai_search/dashboard.html's cards also carry a bare "card" class (class="card kpi-card
   kpi-blue"), and `html.dark .card` (~line 565) has HIGHER specificity (0,2,1, thanks to the
   "html" type selector) than `.kpi-card.kpi-blue` alone (0,2,0) — so in dark mode that rule
   was silently winning and resetting every one of these cards back to the plain dark card
   background. These dark-mode-qualified duplicates have specificity (0,3,1), guaranteed to
   beat it regardless of source order. */
html.dark .kpi-card.kpi-blue, .dark .kpi-card.kpi-blue           { background: var(--tile-blue) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
html.dark .kpi-card.kpi-blue-alt, .dark .kpi-card.kpi-blue-alt   { background: var(--accent-info) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
html.dark .kpi-card.kpi-green, .dark .kpi-card.kpi-green         { background: var(--accent-emerald) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
html.dark .kpi-card.kpi-gray, .dark .kpi-card.kpi-gray           { background: var(--accent-violet) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
html.dark .kpi-card.kpi-red, .dark .kpi-card.kpi-red             { background: var(--accent-rose) !important; border-color: transparent !important; color: rgba(255,255,255,0.92) !important; }
html.dark .kpi-card.kpi-orange, .dark .kpi-card.kpi-orange       { background: var(--accent-orange) !important; border-color: transparent !important; color: rgba(0,0,0,0.78) !important; }
/* .color set on the card itself (above) naturally inherits into any plain-text descendant
   that has no color of its own (e.g. a caption <div> with only inline font-size); the rules
   below additionally win against descendants that DO set their own explicit color/inline
   style, which would otherwise block that inheritance. */

.kpi-card.kpi-blue [style*="color"], .kpi-card.kpi-blue-alt [style*="color"], .kpi-card.kpi-green [style*="color"],
.kpi-card.kpi-gray [style*="color"], .kpi-card.kpi-red [style*="color"],
.kpi-card.kpi-blue .kpi-label, .kpi-card.kpi-blue-alt .kpi-label, .kpi-card.kpi-green .kpi-label,
.kpi-card.kpi-gray .kpi-label, .kpi-card.kpi-red .kpi-label,
.kpi-card.kpi-blue .kpi-value, .kpi-card.kpi-blue-alt .kpi-value, .kpi-card.kpi-green .kpi-value,
.kpi-card.kpi-gray .kpi-value, .kpi-card.kpi-red .kpi-value,
.kpi-card.kpi-blue .kpi-sub, .kpi-card.kpi-blue-alt .kpi-sub, .kpi-card.kpi-green .kpi-sub,
.kpi-card.kpi-gray .kpi-sub, .kpi-card.kpi-red .kpi-sub,
.kpi-card.kpi-blue .kpi-trend, .kpi-card.kpi-blue-alt .kpi-trend, .kpi-card.kpi-green .kpi-trend,
.kpi-card.kpi-gray .kpi-trend, .kpi-card.kpi-red .kpi-trend,
.kpi-card.kpi-blue .trend-flat, .kpi-card.kpi-blue-alt .trend-flat, .kpi-card.kpi-green .trend-flat,
.kpi-card.kpi-gray .trend-flat, .kpi-card.kpi-red .trend-flat,
.kpi-card.kpi-blue .trend-up, .kpi-card.kpi-blue-alt .trend-up, .kpi-card.kpi-green .trend-up,
.kpi-card.kpi-gray .trend-up, .kpi-card.kpi-red .trend-up,
.kpi-card.kpi-blue .trend-down, .kpi-card.kpi-blue-alt .trend-down, .kpi-card.kpi-green .trend-down,
.kpi-card.kpi-gray .trend-down, .kpi-card.kpi-red .trend-down {
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}
.kpi-card.kpi-orange [style*="color"], .kpi-card.kpi-orange .kpi-label, .kpi-card.kpi-orange .kpi-value,
.kpi-card.kpi-orange .kpi-sub, .kpi-card.kpi-orange .kpi-trend,
.kpi-card.kpi-orange .trend-flat, .kpi-card.kpi-orange .trend-up, .kpi-card.kpi-orange .trend-down {
  color: rgba(0, 0, 0, 0.88) !important;
}
.kpi-card.kpi-blue i, .kpi-card.kpi-blue-alt i, .kpi-card.kpi-green i, .kpi-card.kpi-gray i, .kpi-card.kpi-red i {
  color: #FFFFFF !important;
}
.kpi-card.kpi-orange i { color: rgba(0, 0, 0, 0.88) !important; }

/* Small decorative icon badges (.kpi-badge-amber/blue/purple/green/red, used in
   local_seo/gbp_review_management.html) sit on top of the card independently of its own
   color class — e.g. a green badge inside a now-green kpi-card would be near-invisible.
   Force them to a neutral translucent pill regardless of hue once inside a colored card. */
.kpi-card.kpi-blue .kpi-icon-badge, .kpi-card.kpi-blue-alt .kpi-icon-badge, .kpi-card.kpi-green .kpi-icon-badge,
.kpi-card.kpi-gray .kpi-icon-badge, .kpi-card.kpi-red .kpi-icon-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}
.kpi-card.kpi-orange .kpi-icon-badge {
  background: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  color: rgba(0, 0, 0, 0.78) !important;
}

/* ── .card-body — inner padding container ──────────────────────
   Optional wrapper inside .card that provides consistent inset padding. */
.card-body { padding: var(--space-5); }

/* ── .page-container ───────────────────────────────────────────
   Content wrapper providing vertical rhythm below the subnav. */
.page-container { padding-bottom: var(--space-12); }

/* ── .form-control — alias for .form-input ─────────────────────
   Backlink templates use Bootstrap-style .form-control; wire it up
   to the project's canonical form-input tokens. */
.form-control {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-dim);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 9px auto;
  padding-right: 28px;
}
.form-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: 1.5;
}

/* ── .table / .table-sm — data table aliases ───────────────────
   Backlink templates use Bootstrap-style .table; alias to the project
   design-system's table token set so rows, headers, and hover states
   are consistent. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-secondary);
}
/* Header style matches CoreUI's real smart-table (computed styles read
   directly off the live demo): white/transparent background (no gray
   band), bold near-black text rather than a muted uppercase label,
   plain sentence case. Kept at a more compact size than CoreUI's own
   16px so it still fits this app's denser, many-column data tables. */
.table thead th {
  background: transparent;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-hover); }
.table td { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.table-sm thead th { padding: var(--space-2) var(--space-3); font-size: 10px; }
.table-sm td { padding: var(--space-2) var(--space-3); font-size: 12px; }

/* CoreUI table variants */
.table-striped tbody tr:nth-child(even) { background: rgba(33,38,49,0.025); }
.table-striped tbody tr:nth-child(even):hover { background: var(--bg-hover); }
.table-bordered { border: 1px solid var(--border-subtle); }
.table-bordered thead th,
.table-bordered tbody td { border: 1px solid var(--border-subtle); }
/* Compact table wrapper with card-border (CoreUI table-inside-card pattern) */
.table-card {
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.table-card .table { margin: 0; }
.table-card .table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.table-card .table thead th:last-child { border-top-right-radius: var(--radius-lg); }


/* ── .alert — flash message banners ───────────────────────────
   Django messages framework uses msg.tags for class names. */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: var(--space-4);
}
.alert-success, .alert-info    { background: var(--accent-cyan-dim);    color: var(--accent-cyan);    border: 1px solid rgba(88,86,214,0.2); }
.alert-warning                  { background: var(--accent-amber-dim);   color: var(--accent-amber);   border: 1px solid rgba(245,158,11,0.2); }
.alert-error, .alert-danger     { background: var(--accent-rose-dim);    color: var(--accent-rose);    border: 1px solid rgba(244,63,94,0.2); }

/* ── Grid/List View Toggle (reusable) ─────────────────────────
   Generalized from the pill-pair used on the All Projects page. */
.view-toggle {
  display: inline-flex;
  background: var(--bg-elevated);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.view-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.view-btn.active { background: var(--bg-active); color: var(--accent-cyan); }

/* ── Kanban Board ──────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  align-items: start;
}
.kanban-column {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2) var(--space-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.kanban-column-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-elevated);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}
.kanban-column-cards {
  flex: 1;
  min-height: 120px;
  border-radius: var(--radius-md);
  transition: background var(--t-fast);
  display: flex;
  flex-direction: column;
}
/* Shown on the column currently under the dragged card's cursor */
.kanban-column.drag-over {
  border-color: var(--accent-cyan, #0ea5e9);
  background: rgba(14, 165, 233, 0.03);
}
.kanban-column-cards.drag-over {
  background: var(--accent-cyan-dim);
  outline: 2px dashed var(--accent-cyan-dim);
  outline-offset: -2px;
}
.kanban-add-task-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.kanban-add-task-btn:hover {
  background: var(--bg-hover);
  color: var(--accent-cyan);
}
.kanban-add-task-plus {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.task-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  text-decoration: none;
  color: inherit;
  cursor: grab;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.task-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan-dim);
  box-shadow: var(--shadow-md);
}
.task-card.dragging { cursor: grabbing; }
.task-card-drop-marker {
  height: 3px;
  border-radius: 2px;
  background: var(--accent-cyan);
  margin: 2px 0 8px;
  box-shadow: 0 0 8px var(--accent-cyan-glow);
}
.data-table tbody tr[draggable="true"] { cursor: grab; }
.data-table tbody tr.dragging { opacity: 0.4; cursor: grabbing; }
.data-table tbody tr.drop-target-above { box-shadow: inset 0 2px 0 0 var(--accent-cyan); }
.data-table tbody tr.drop-target-below { box-shadow: inset 0 -2px 0 0 var(--accent-cyan); }
.task-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}
.task-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}
.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-size: 11.5px;
  color: var(--text-muted);
}
.task-card-due.overdue { color: var(--accent-rose); font-weight: 600; }
.task-priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Kanban micro-interactions: lift, drop placeholder, WIP pulse, completion ── */

/* Drag-and-drop lift: applied to the offscreen clone used as the native drag image
   (the real dragged element is hidden — see .task-card.dragging below — since the OS-rendered
   drag ghost can't be restyled after the fact, only a custom drag image set via setDragImage). */
.kanban-drag-lift-clone {
  transform: scale(1.06) rotate(-1deg);
  box-shadow: 0 22px 40px -8px rgba(0, 0, 0, 0.35), 0 8px 16px -4px rgba(0, 0, 0, 0.25);
}

/* The dragged card is dimmed and semi-transparent during dragging, never display:none
   which aborts the browser HTML5 drag session. */
.task-card.dragging {
  opacity: 0.35;
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: grabbing !important;
}

/* Drop target placeholder: a dashed gap that smoothly grows in where the card will land. */
.kanban-drop-placeholder {
  border: 2px dashed var(--accent-cyan-dim);
  border-radius: var(--radius-md);
  background: var(--accent-cyan-dim);
  margin-bottom: var(--space-2);
  box-sizing: border-box;
  transform-origin: top center;
  animation: kanbanPlaceholderGrow 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes kanbanPlaceholderGrow {
  from { transform: scaleY(0.4); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* WIP limit pulse: soft flash on the column boundary when its card count reaches the limit. */
.kanban-column.wip-limit-reached {
  animation: kanbanWipPulse 1.1s ease-in-out infinite;
}
@keyframes kanbanWipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); border-color: var(--border-subtle); }
  50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); border-color: var(--accent-rose); }
}
.kanban-wip-limit-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--border-subtle);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.kanban-wip-limit-label:hover { color: var(--accent-cyan); border-color: var(--accent-cyan-dim); }
.kanban-column.wip-limit-reached .kanban-column-count {
  color: var(--accent-rose);
  font-weight: 700;
}

/* Completion celebration: subtle color fade + checkmark morph on a card that lands in a
   "Done"-like column, plus a light confetti burst rendered as small absolutely-positioned dots. */
@keyframes kanbanCompleteFade {
  0% { background: var(--bg-elevated); border-color: var(--border-subtle); }
  30% { background: rgba(16, 185, 129, 0.16); border-color: var(--accent-emerald, #10b981); }
  100% { background: var(--bg-elevated); border-color: var(--border-subtle); }
}
.task-card.kanban-complete-flash {
  animation: kanbanCompleteFade 1.1s ease-out;
  position: relative;
}
.kanban-complete-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-emerald, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: scale(0);
  animation: kanbanCheckMorph 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
  z-index: 2;
}
@keyframes kanbanCheckMorph {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.kanban-confetti-piece {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 3;
  animation: kanbanConfettiBurst 0.7s ease-out forwards;
}
@keyframes kanbanConfettiBurst {
  0% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-rot)); opacity: 0; }
}
.priority-critical { background: var(--accent-rose); box-shadow: 0 0 6px var(--accent-rose); }
.priority-high { background: var(--accent-orange); }
.priority-medium { background: var(--accent-amber); }
.priority-low { background: var(--accent-violet); }

/* ── Workload: Capacity Bar ───────────────────────────────────
   Horizontal fill bar; color communicates headroom vs overload. */
.capacity-bar-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  overflow: hidden;
}
.capacity-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--t-normal);
}
.capacity-bar-fill.capacity-ok { background: var(--accent-emerald); }
.capacity-bar-fill.capacity-warn { background: var(--accent-amber); }
.capacity-bar-fill.capacity-over { background: var(--accent-rose); }

/* ── Workload: Status Distribution Bar ────────────────────────
   Stacked mini bar per row: To Do / In Progress / Overdue. */
.distribution-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-elevated);
}
.distribution-segment { height: 100%; transition: width var(--t-normal); }
.distribution-segment.seg-todo { background: var(--text-faint); }
.distribution-segment.seg-in-progress { background: var(--accent-cyan); }
.distribution-segment.seg-overdue { background: var(--accent-rose); }

/* ── Workload: Expandable Row ─────────────────────────────────── */
.workload-row { cursor: pointer; }
.workload-row:hover { background: var(--bg-hover); }
.workload-row.expanded { background: var(--bg-hover); }
.workload-expand-chevron {
  display: inline-block;
  transition: transform var(--t-fast);
  color: var(--text-muted);
}
.workload-row.expanded .workload-expand-chevron { transform: rotate(90deg); }
.workload-detail-row { display: none; }
.workload-detail-row.expanded { display: table-row; }
.workload-detail-panel {
  background: var(--bg-base, var(--bg-primary));
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.workload-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.workload-task-row:last-child { border-bottom: none; }

/* ── Template Gantt Chart ──────────────────────────────────────
   Custom-built (no charting library): CSS Grid rows for the label +
   timeline columns, absolutely-positioned bars sized by percentage of
   the template's total duration, and an SVG overlay for dependency
   connector lines drawn by JS after layout. */
.gantt-wrapper {
  position: relative;
  overflow-x: auto;
}
.gantt-inner { min-width: 720px; position: relative; }
.gantt-header, .gantt-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
}
.gantt-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
}
.gantt-header-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.gantt-header-timeline { position: relative; height: 20px; }
.gantt-day-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}
.gantt-body { position: relative; }
.gantt-row { height: 40px; }
.gantt-row:hover { background: var(--bg-hover); }
.gantt-row-label {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--space-3);
}
.gantt-row-track { position: relative; height: 100%; }
.gantt-row-track::before {
  /* faint vertical "today"/grid rhythm isn't tracked here — just a
     center guideline so bars don't float in a totally blank lane */
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--border-subtle);
  top: 50%;
}
.gantt-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  overflow: hidden;
  cursor: default;
  box-shadow: var(--shadow-sm);
  min-width: 8px;
}
.gantt-bar-label {
  font-size: 11px;
  font-weight: 600;
  color: #0A0A0C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-bar.gantt-priority-critical { background: var(--accent-rose); }
.gantt-bar.gantt-priority-high { background: var(--accent-orange); }
.gantt-bar.gantt-priority-medium { background: var(--accent-amber); }
.gantt-bar.gantt-priority-low { background: var(--accent-violet); }
.gantt-connectors { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gantt-connectors path {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* Intent badges */
.intent-informational { background: rgba(99, 102, 241, 0.15); color: #818CF8; }
.intent-navigational  { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.intent-commercial    { background: var(--accent-amber-dim); color: var(--accent-amber); }
.intent-transactional { background: var(--accent-emerald-dim); color: var(--accent-emerald); }

/* ── Spike Dashboard 2 Data Tables ──────────────────────────── */
.data-table-wrapper, .table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-2xl);
  border: 1px solid #DFE5EF;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
html.dark .data-table-wrapper, html.dark .table-responsive, .dark .data-table-wrapper, .dark .table-responsive {
  background: #111C2D;
  border-color: #1E2B45;
}

.data-table, .table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
}

.data-table thead th, .table thead th {
  background: transparent;
  padding: 14px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #7C8FAC;
  font-family: var(--font-body);
  border-bottom: 1px solid #EEF2F6;
  white-space: nowrap;
  user-select: none;
  transition: color 0.15s ease;
}
html.dark .data-table thead th, html.dark .table thead th, .dark .data-table thead th, .dark .table thead th {
  color: #8899A6;
  border-bottom-color: #1E2B45;
}

.data-table thead th:hover, .table thead th:hover {
  color: #111C2D;
}
html.dark .data-table thead th:hover, html.dark .table thead th:hover, .dark .data-table thead th:hover, .dark .table thead th:hover {
  color: #FFFFFF;
}

/* Sortable column headers — Universal Table Sorting */
th.sortable-th, .sortable-col {
  cursor: pointer !important;
  user-select: none;
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}

th.sortable-th:hover, .sortable-col:hover {
  color: #00A5FF !important;
  background-color: rgba(0, 165, 255, 0.04);
}

html.dark th.sortable-th:hover, html.dark .sortable-col:hover,
.dark th.sortable-th:hover, .dark .sortable-col:hover {
  color: #38BDF8 !important;
  background-color: rgba(56, 189, 248, 0.08);
}

th.sortable-th.sorted-asc, th.sortable-th.sorted-desc,
.sortable-col.sorted-asc, .sortable-col.sorted-desc {
  color: #00A5FF !important;
  font-weight: 700;
}

html.dark th.sortable-th.sorted-asc, html.dark th.sortable-th.sorted-desc,
html.dark .sortable-col.sorted-asc, html.dark .sortable-col.sorted-desc,
.dark th.sortable-th.sorted-asc, .dark th.sortable-th.sorted-desc,
.dark .sortable-col.sorted-asc, .dark .sortable-col.sorted-desc {
  color: #38BDF8 !important;
}

/* Universal Sort Indicator */
.sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

th.sortable-th:hover .sort-indicator,
.sortable-col:hover .sort-indicator {
  opacity: 0.75;
}

.sort-indicator svg {
  display: inline-block;
  vertical-align: middle;
}

.sort-indicator .sort-icon-asc,
.sort-indicator .sort-icon-desc {
  display: none;
}

.sort-indicator .sort-icon-neutral {
  display: inline-block;
}

/* Active Ascending State */
th.sortable-th.sorted-asc .sort-indicator,
.sortable-col.sorted-asc .sort-indicator {
  opacity: 1;
  color: #00A5FF;
}

th.sortable-th.sorted-asc .sort-indicator .sort-icon-asc,
.sortable-col.sorted-asc .sort-indicator .sort-icon-asc {
  display: inline-block;
}

th.sortable-th.sorted-asc .sort-indicator .sort-icon-neutral,
th.sortable-th.sorted-asc .sort-indicator .sort-icon-desc,
.sortable-col.sorted-asc .sort-indicator .sort-icon-neutral,
.sortable-col.sorted-asc .sort-indicator .sort-icon-desc {
  display: none;
}

/* Active Descending State */
th.sortable-th.sorted-desc .sort-indicator,
.sortable-col.sorted-desc .sort-indicator {
  opacity: 1;
  color: #00A5FF;
}

th.sortable-th.sorted-desc .sort-indicator .sort-icon-desc,
.sortable-col.sorted-desc .sort-indicator .sort-icon-desc {
  display: inline-block;
}

th.sortable-th.sorted-desc .sort-indicator .sort-icon-neutral,
th.sortable-th.sorted-desc .sort-indicator .sort-icon-asc,
.sortable-col.sorted-desc .sort-indicator .sort-icon-neutral,
.sortable-col.sorted-desc .sort-indicator .sort-icon-asc {
  display: none;
}

html.dark th.sortable-th.sorted-asc .sort-indicator,
html.dark th.sortable-th.sorted-desc .sort-indicator,
.dark th.sortable-th.sorted-asc .sort-indicator,
.dark th.sortable-th.sorted-desc .sort-indicator {
  color: #38BDF8;
}

.data-table tbody tr, .table tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background 0.15s ease;
}
html.dark .data-table tbody tr, html.dark .table tbody tr, .dark .data-table tbody tr, .dark .table tbody tr {
  border-bottom-color: #1E2B45;
}

.data-table tbody tr:last-child, .table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover, .table tbody tr:hover {
  background: #F8FAFC;
}
html.dark .data-table tbody tr:hover, html.dark .table tbody tr:hover, .dark .data-table tbody tr:hover, .dark .table tbody tr:hover {
  background: rgba(21, 36, 59, 0.6);
}

.data-table td, .table td {
  padding: 14px 18px;
  color: #111C2D;
  vertical-align: middle;
  font-size: 13.5px;
}
html.dark .data-table td, html.dark .table td, .dark .data-table td, .dark .table td {
  color: #FFFFFF;
}

.data-table td.mono, .table td.mono {
  font-family: var(--font-mono);
  color: #2A3547;
}
html.dark .data-table td.mono, html.dark .table td.mono, .dark .data-table td.mono, .dark .table td.mono {
  color: #E2E8F0;
}

/* Spike Table User/Profile & Entity Cells */
.table-profile-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.table-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.table-profile-name {
  font-size: 14px;
  font-weight: 700;
  color: #111C2D;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .table-profile-name, .dark .table-profile-name {
  color: #FFFFFF;
}
.table-profile-role {
  font-size: 12px;
  font-weight: 400;
  color: #7C8FAC;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .table-profile-role, .dark .table-profile-role {
  color: #8899A6;
}

.table-stat-value {
  font-size: 13.5px;
  font-weight: 600;
  color: #2A3547;
}
html.dark .table-stat-value, .dark .table-stat-value {
  color: #E2E8F0;
}

.sort-icon { opacity: 0.4; font-size: 10px; margin-left: 4px; }
.sort-icon.active { opacity: 1; color: #00A5FF; }

/* Position change indicators */
.pos-up   { color: #13DEB9; font-weight: 700; }
.pos-down { color: #FA896B; font-weight: 700; }
.pos-same { color: #7C8FAC; }

/* ── Inputs & Forms ────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-input:focus,
.form-select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-dim);
}

.form-input::placeholder { color: var(--text-muted); }

textarea.form-input { resize: vertical; min-height: 100px; }

select.form-input,
.form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 50%;
  background-size: 9px auto;
}

select.form-input:hover {
  border-color: var(--border-strong);
}

/* Best-effort theming for native <option> rows — this DOES work in some
   browser/OS combinations, but Chrome/Edge on Windows render the open
   <select> popup via the native OS listbox and ignore background-color/
   color on <option> entirely, even with !important. There is no pure-CSS
   fix for that combination. select.form-select is fully replaced with a
   themed custom dropdown instead (see .styled-select-* below and
   initStyledSelects() in app.js) — these rules remain as a fallback for
   any <select> that isn't .form-select, and for browsers where it does work. */
select option {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
select option:checked,
select option:hover,
select option:focus {
  background-color: var(--accent-cyan-dim) !important;
  color: var(--accent-cyan) !important;
}
select:invalid,
select option[value=""] {
  color: var(--text-muted) !important;
}

/* ── Styled <select> replacement (select.form-select) ─────────
   initStyledSelects() in app.js hides the real <select> (kept in the DOM,
   still submits normally) and renders this themed button + menu in its
   place, built from the same <option>s. */
.styled-select-wrapper {
  position: relative;
  width: 100%;
}

select.styled-select-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.styled-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  font: inherit;
}

.styled-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.styled-select-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  padding: 4px;
}

.styled-select-menu.is-open {
  display: block;
}

.styled-select-option {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.styled-select-option:hover {
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
}

.styled-select-option.is-selected {
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
  font-weight: 600;
}

.form-input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Search Bar ────────────────────────────────────────────── */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-muted);
  pointer-events: none;
}

.search-bar input {
  padding-left: calc(var(--space-3) + 18px + var(--space-2));
}

/* ── Filter Chips ──────────────────────────────────────────── */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.chip:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.chip.active {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
  color: #fff;
  font-weight: 600;
}

/* ── Sub-navigation Tabs (e.g. Backlinks module's per-page tab bar) ──── */
.subnav-item {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* sit flush on the .subnav's own border-bottom */
  transition: color var(--t-fast), border-color var(--t-fast);
}

.subnav-item:hover { color: var(--text-primary); }

.subnav-item.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
  font-weight: 600;
}

/* ── Page Header ───────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.page-header-left { flex: 1; }

/* Text here sits directly on the light page canvas (body::before),
   not inside a dark card — needs the dark --text-on-page-* tokens,
   not the light --text-* tokens used everywhere else on this site. */
.page-breadcrumb {
  font-size: 12.5px;
  color: var(--text-on-page-m);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.page-breadcrumb a { color: var(--text-on-page-m); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--accent-cyan); }
.page-breadcrumb span { margin: 0 var(--space-2); }

.page-title {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-on-page-h);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.page-subtitle { font-size: 14px; color: var(--text-on-page-p); margin-top: var(--space-1); }

/* ── Grid Layouts ──────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(320px, calc(33.333% - 12px)), 1fr));
  gap: var(--space-4);
}

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

/* ── Skeleton Loaders ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Messages / Alerts ─────────────────────────────────────── */
.message {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: var(--space-4);
}

.message-error   { background: var(--accent-rose-dim); color: var(--accent-rose); border: 1px solid rgba(244,63,94,0.2); }
.message-success { background: var(--accent-emerald-dim); color: var(--accent-emerald); border: 1px solid rgba(16,185,129,0.2); }
.message-info    { background: var(--accent-cyan-dim); color: var(--accent-cyan); border: 1px solid rgba(88, 86, 214,0.2); }
.message-warning { background: var(--accent-amber-dim); color: var(--accent-amber); border: 1px solid rgba(245,158,11,0.2); }

/* ── Modal ─────────────────────────────────────────────────── */
/* ── Page Transition Curtain ───────────────────────────────────
   Fully covers the viewport by default (before app.js runs) and gets
   wiped away/back via animated clip-path in app.js's initPageTransitions(). */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--page-bg-base);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}

/* Sheet modal (Motion "Sheet: modal" pattern,
   https://motion.dev/examples/react-sheet-modal) — anchored to the
   bottom edge with rounded top corners and a drag handle, rather than
   a centered dialog box. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6);
  padding-top: var(--space-3);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
}

.modal-drag-handle {
  width: 40px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* ── Circular Checkbox ─────────────────────────────────────────
   Fully custom (appearance:none + drawn checkmark) rather than just
   relying on accent-color, since accent-color still renders the OS's
   native square/rounded-square shape in most browsers — only a fully
   custom control guarantees the circular shape everywhere. */
/* ── Animated Checkbox (Motion "Base checkbox" pattern) ────────
   https://motion.dev/examples/react-base-checkbox — every checkbox on
   the site is enhanced at runtime (initAnimatedCheckboxes() in app.js)
   with this wrapper: the real <input> stays in the DOM (invisible, still
   fully functional for forms/JS) and an SVG circle + checkmark path
   renders on top, with the checkmark drawing in via animated
   stroke-dashoffset when checked. */
.anim-checkbox-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}
input.anim-checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.anim-checkbox-visual {
  width: 18px;
  height: 18px;
  overflow: visible;
  pointer-events: none;
}
.anim-checkbox-bg {
  fill: var(--bg-elevated);
  stroke: var(--border-strong);
  stroke-width: 1.5;
  transition: fill var(--t-fast), stroke var(--t-fast);
}
.anim-checkbox-wrap:hover .anim-checkbox-bg {
  stroke: var(--accent-cyan);
}
.anim-checkbox-visual.is-checked .anim-checkbox-bg {
  fill: var(--accent-cyan);
  stroke: var(--accent-cyan);
}
.anim-checkbox-check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.anim-checkbox-wrap:focus-within {
  box-shadow: 0 0 0 3px var(--accent-cyan-dim);
  border-radius: 50%;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s ease;
}

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0;
}

/* ── Empty State ───────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}

.empty-state-icon { font-size: 48px; margin-bottom: var(--space-4); opacity: 0.4; }
.empty-state-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state-desc { font-size: 14px; max-width: 360px; }

/* ── Sparkline ─────────────────────────────────────────────── */
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.sparkline-bar {
  width: 3px;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

/* ── SERP Feature Pills ────────────────────────────────────── */
.serp-pill {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ── Heatmap Grid ──────────────────────────────────────────── */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: transform var(--t-fast);
}

.heatmap-cell:hover { transform: scale(1.3); }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

/* ── KD Meter ──────────────────────────────────────────────── */
.kd-meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kd-bar {
  width: 60px;
  height: 4px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.kd-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .two-col, .three-col { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }
  .main-content { margin-left: 0; max-width: 100vw; padding: var(--space-4); }
  .sidebar { transform: translateX(-100%); }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Utility ───────────────────────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-mono { font-family: var(--font-mono); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4 { padding: var(--space-4); }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Page Entrance Animation Target ───────────────────────── */
[data-animate] { opacity: 1; }
[data-stagger] > * { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   COREUI ADDITIONS — New components matching CoreUI's admin
   dashboard visual language, applied project-wide
   ══════════════════════════════════════════════════════════════ */

/* ── Sticky App Topbar — CoreUI header pattern ────────────────
   A slim sticky header bar at the top of .main-content that
   holds the page breadcrumb + title + right-side actions.
   Each page template can opt in by placing .app-topbar at the
   top of the content block. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  height: var(--topbar-height);
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-8)) var(--space-6);
  width: calc(100% + var(--space-8) * 2);
  gap: var(--space-4);
}

.app-topbar-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.app-topbar-breadcrumb {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.app-topbar-breadcrumb a { color: var(--text-faint); text-decoration: none; transition: color var(--t-fast); }
.app-topbar-breadcrumb a:hover { color: var(--accent-cyan); }
.app-topbar-breadcrumb-sep { color: var(--text-disabled); }

.app-topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* When .app-topbar is present, the page-header can be hidden */
.app-topbar ~ .page-header { display: none; }

/* ── CoreUI Callout / Info Box ────────────────────────────────
   Bordered left-accent information block for contextual messages. */
.callout {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-cyan);
  background: var(--accent-cyan-dim);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-4);
}
.callout-warning { border-color: var(--accent-amber); background: var(--accent-amber-dim); }
.callout-danger  { border-color: var(--accent-rose);  background: var(--accent-rose-dim); }
.callout-success { border-color: var(--accent-emerald); background: var(--accent-emerald-dim); }
.callout-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.callout-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ── CoreUI-style List Group ──────────────────────────────────
   Flush bordered list with hover states for settings, filters. */
.list-group {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.list-group-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--card-border);
  transition: background var(--t-fast);
  text-decoration: none;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.list-group-item.active { color: var(--accent-cyan); background: var(--accent-cyan-dim); font-weight: 600; }

/* ── Divider with Label ────────────────────────────────────── */
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-6) 0 var(--space-4);
}
.divider-label::before, .divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--card-border);
}

/* ── CoreUI-style Avatar Group ─────────────────────────────── */
.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .sidebar-avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
  border: 2px solid var(--card-solid);
  margin-left: -6px;
}
.avatar-group .sidebar-avatar:first-child { margin-left: 0; }

/* ── Sidebar Enhancement — CoreUI nav-title style ─────────── */
.sidebar-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sidebar-text-faint);
  padding: var(--space-4) var(--space-4) var(--space-1);
  white-space: nowrap;
  border-top: 1px solid var(--sidebar-border);
  margin-top: var(--space-1);
  transition: color var(--t-fast);
}
.sidebar-section-label:hover,
.sidebar-section-toggle:hover {
  color: var(--sidebar-text) !important;
}
.sidebar-section-toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
/* First section label — no top border (already has logo border below) */
.sidebar-nav > .sidebar-section-label:first-child { border-top: none; margin-top: 0; }

/* Sidebar item count badge */
.sidebar-item-count {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--accent-rose-dim);
  color: var(--accent-rose);
  border-radius: var(--radius-full);
  padding: 1px 5px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
  flex-shrink: 0;
}

/* ── CoreUI-inspired kanban column header ─────────────────── */
.kanban-column-header-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Column color dot */
.kanban-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Pagination — CoreUI style ────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.page-item {
  display: inline-flex;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--space-2);
  background: var(--card-solid);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.page-link:hover { background: var(--bg-hover); color: var(--accent-cyan-strong); border-color: var(--border-strong); }
/* Solid indigo fill on the active page, matching CoreUI's real pagination
   (computed off the live smart-table demo) rather than a soft dim tint. */
.page-item.active .page-link { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); font-weight: 700; }
.page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Additional Utility Additions ──────────────────────────── */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success   { color: var(--accent-emerald) !important; }
.text-danger    { color: var(--accent-rose) !important; }
.text-warning   { color: var(--accent-amber) !important; }
.text-info      { color: var(--accent-cyan) !important; }
.fw-normal  { font-weight: 400; }
.fw-medium  { font-weight: 500; }
.fw-semi    { font-weight: 600; }
.fw-bold    { font-weight: 700; }
.fw-extrabold { font-weight: 800; }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.border     { border: 1px solid var(--card-border); }
.border-top { border-top: 1px solid var(--card-border); }
.border-bottom { border-bottom: 1px solid var(--card-border); }
.overflow-hidden { overflow: hidden; }
.cursor-pointer  { cursor: pointer; }

/* ── In-button usage/balance badge for monthly-capped AI actions ── */
.btn-quota {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.btn.btn-ghost .btn-quota, .btn.btn-secondary .btn-quota { background: rgba(124, 58, 237, 0.12); color: var(--text-primary); }
.btn-quota.is-empty { background: rgba(239, 68, 68, 0.9) !important; color: #fff !important; }

/* ── Universal Module-to-Tasks Linkage Buttons & Live Badges ── */
.btn-task-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px dashed #94A3B8;
  background: rgba(148, 163, 184, 0.08);
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-task-link:hover {
  background: rgba(0, 165, 255, 0.12);
  border-color: #00A5FF;
  color: #00A5FF;
  transform: translateY(-1px);
}
.btn-task-link-sm {
  padding: 2px 6px;
  font-size: 10.5px;
}
.btn-task-link-xs {
  padding: 1px 5px;
  font-size: 9.5px;
}

html.dark .btn-task-link, .dark .btn-task-link {
  border-color: #475569;
  background: rgba(30, 41, 59, 0.5);
  color: #94A3B8;
}
html.dark .btn-task-link:hover, .dark .btn-task-link:hover {
  border-color: #38BDF8;
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
}

.task-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.task-link-badge:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.task-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* ================================================================
   SEO Runway — Universal Searchable Dropdown Design Tokens
   ================================================================ */
.ss-wrapper {
  position: relative;
  display: block;
  width: 100%;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  box-sizing: border-box;
}
.ss-wrapper.ss-inline {
  display: inline-block;
  width: auto;
}
select.ss-native-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.ss-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--bg-surface, #ffffff);
  color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  outline: none;
}
.ss-trigger:hover {
  border-color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-trigger:focus,
.ss-wrapper.is-open .ss-trigger {
  border-color: var(--primary, var(--accent-primary, #00a5ff));
  box-shadow: 0 0 0 3px rgba(0, 165, 255, 0.15);
}
.ss-trigger.ss-compact {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 8px !important;
  font-size: 11.5px !important;
}
.ss-wrapper.is-disabled .ss-trigger {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-hover, #e8eef5);
}
.ss-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ss-label.is-placeholder {
  color: var(--text-muted, #94a3b8);
}
.ss-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
}
.ss-wrapper.is-open .ss-chevron {
  transform: rotate(180deg);
  color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 160px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 1060;
  flex-direction: column;
  overflow: hidden;
  animation: ssFadeIn 0.12s ease-out;
}
@keyframes ssFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ss-dropdown.is-upward {
  top: auto;
  bottom: calc(100% + 4px);
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.15), 0 -8px 10px -6px rgba(0, 0, 0, 0.1);
}
.ss-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-elevated, #f8fafc);
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.ss-search-icon {
  position: absolute;
  left: 16px;
  font-size: 12px;
  opacity: 0.6;
  pointer-events: none;
}
.ss-search-input {
  width: 100%;
  height: 32px;
  padding: 4px 28px 4px 28px;
  background: var(--bg-surface, #ffffff);
  color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.ss-search-input:focus {
  border-color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-search-clear {
  position: absolute;
  right: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.ss-search-clear:hover {
  color: var(--text-primary, #0f172a);
}
.ss-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  scroll-behavior: smooth;
}
.ss-options::-webkit-scrollbar {
  width: 5px;
}
.ss-options::-webkit-scrollbar-thumb {
  background: var(--border-default, #cbd5e1);
  border-radius: 4px;
}
.ss-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s ease;
}
.ss-option:hover,
.ss-option.is-highlighted {
  background: var(--bg-hover, rgba(0, 165, 255, 0.08));
  color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-option.is-selected {
  font-weight: 600;
  color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.ss-option-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-option-check {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, var(--accent-primary, #00a5ff));
}
.ss-optgroup-header {
  padding: 6px 10px 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ss-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

/* Dark mode theme overrides */
html.dark .ss-trigger,
.dark .ss-trigger {
  background: var(--bg-surface, #111C2D);
  color: var(--text-primary, #F8FAFC);
  border-color: var(--border-default, #1E2B45);
}
html.dark .ss-trigger:hover,
.dark .ss-trigger:hover,
html.dark .ss-trigger:focus,
.dark .ss-trigger:focus,
html.dark .ss-wrapper.is-open .ss-trigger,
.dark .ss-wrapper.is-open .ss-trigger {
  border-color: var(--primary, var(--accent-primary, #00A5FF));
}
html.dark .ss-dropdown,
.dark .ss-dropdown {
  background: var(--bg-surface, #111C2D);
  border-color: var(--border-default, #1E2B45);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.7);
}
html.dark .ss-search-wrap,
.dark .ss-search-wrap {
  background: var(--bg-elevated, #172338);
  border-color: var(--border-subtle, #1E2B45);
}
html.dark .ss-search-input,
.dark .ss-search-input {
  background: #0B132B;
  color: #F8FAFC;
  border-color: #1E2B45;
}
html.dark .ss-search-input:focus,
.dark .ss-search-input:focus {
  border-color: #00A5FF;
}
html.dark .ss-option,
.dark .ss-option {
  color: var(--text-primary, #F8FAFC);
}
html.dark .ss-option:hover,
html.dark .ss-option.is-highlighted,
.dark .ss-option:hover,
.dark .ss-option.is-highlighted {
  background: rgba(0, 165, 255, 0.12);
  color: #00A5FF;
}
html.dark .ss-option.is-selected,
.dark .ss-option.is-selected {
  color: #00A5FF;
}