/* =============================================================================
   ArgusBoard Design System — themes.css
   Dark Theme Variable Overrides
   Light canvas is the DEFAULT (see main.css). Dark is the alternate theme.
   Aesthetic source of truth: argusboard.com / docs/design-reference.md
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Dark Theme — override CSS custom properties via html.dark
   All component styles stay the same; only the tokens change.
   Radii + shadows are inherited from :root (sharp corners, no shadows).
   --------------------------------------------------------------------------- */
html.dark {
  /* Canvas + surfaces */
  --color-bg-primary:    #0f1115;
  --color-bg-secondary:  #1a1d24;
  --color-bg-tertiary:   #252a33;
  --color-bg-elevated:   #2d3341;

  /* Accent — teal in both themes */
  --color-accent:        #1fb8a6;
  --color-accent-hover:  #2ecdb9;
  --color-accent-dim:    rgba(31, 184, 166, 0.16);
  --color-accent-alt:    #14b8a6;
  --color-accent-ink:    #2ecdb9;

  /* Legacy alias (see main.css) */
  --color-primary:       var(--color-accent);
  --color-primary-bg:    var(--color-accent-dim);

  /* Button fills — on dark surfaces the bright teal works with a DARK label
     (#0f1115 on #1fb8a6 = 7.62:1). Status fills likewise flip to dark labels. */
  --color-btn-primary-bg:   #1fb8a6;
  --color-btn-primary-hover:#2ecdb9;
  --color-on-accent:        #0f1115;

  /* On dark surfaces the bright fills need a DARK label to reach AA
     (#0f1115 on each status fill clears 4.5:1; white does not). */
  --color-on-fill:          #0f1115;

  /* Status inks for pill text on dark — the bright --color-* values already
     clear 4.5:1 on their tint over the dark canvas. */
  --color-success-ink:    #22c55e;
  --color-warning-ink:    #f59e0b;
  --color-danger-ink:     #f87171;
  --color-critical-ink:   #f87171;
  --color-info-ink:       #60a5fa;
  --color-violet-ink:     #b39dfb;
  --color-neutral-ink:    #9ca3af;

  /* Text */
  --color-text-primary:   #f0f2f5;
  --color-text-secondary: #b8c0cc;
  --color-text-muted:     #9ca3af;
  --color-text-link:      #5eead4;

  /* Status — success */
  --color-success:        #22c55e;
  --color-success-bg:     rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.30);
  /* Status — warning */
  --color-warning:        #f59e0b;
  --color-warning-bg:     rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.30);

  /* Status — danger */
  --color-danger:         #ef4444;
  --color-danger-bg:      rgba(239, 68, 68, 0.12);
  --color-danger-border:  rgba(239, 68, 68, 0.30);

  /* Status — critical */
  --color-critical:       #dc2626;
  --color-critical-bg:    rgba(220, 38, 38, 0.14);
  --color-critical-border:rgba(220, 38, 38, 0.32);

  /* Status — info */
  --color-info:           #3b82f6;
  --color-info-bg:        rgba(59, 130, 246, 0.12);
  --color-info-border:    rgba(59, 130, 246, 0.30);

  /* Status — neutral/gray */
  --color-neutral:        #9ca3af;
  --color-neutral-bg:     rgba(255, 255, 255, 0.06);
  --color-neutral-border: rgba(255, 255, 255, 0.20);

  /* Status — violet (analysis / VPP accents)
     #9d75f7 keeps 5.7:1 with a dark label as a filled button */
  --color-violet:        #9d75f7;
  --color-violet-bg:     rgba(157, 117, 247, 0.14);
  --color-violet-border: rgba(157, 117, 247, 0.32);
  --color-violet-hover:  #b39dfb;

  /* Borders — hairline rules */
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-border-light:   rgba(255, 255, 255, 0.06);

  /* Report row status (dark) */
  --color-report-green-bg:      #1b4332;
  --color-report-green-border:  #22c55e;
  --color-report-yellow-bg:     #4a3a0a;
  --color-report-yellow-border: #f59e0b;
  --color-report-red-bg:        #4a1010;
  --color-report-red-border:    #ef4444;
  --color-report-unknown-bg:    #2a2a2a;
  --color-report-unknown-border:#6b7280;
}

/* ---------------------------------------------------------------------------
   Default (Light Canvas) Component Adjustments
   Light is the default now, so these are plain rules, not .light-scoped.
   --------------------------------------------------------------------------- */

/* Stale device rows */
.device-row.is-stale {
  background-color: rgba(220, 38, 38, 0.06);
}

.device-row.is-stale:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* Data tables — odd rows (subtle stripe over the canvas) */
.data-table tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-tertiary);
}

/* Customer section header */
.customer-header {
  background-color: var(--color-bg-tertiary);
}

/* Pill weight */
.pill {
  font-weight: var(--font-weight-semibold);
}

/* Form controls + floating surfaces must be readable over the canvas */
.filter-select {
  background-color: var(--color-bg-elevated);
}

.email-dropdown-panel {
  background-color: var(--color-bg-elevated);
}

.toast {
  background-color: var(--color-bg-elevated);
}

/* Stat card dot indicator */
.device-status-dot {
  box-shadow: 0 0 4px currentColor;
}

/* ---------------------------------------------------------------------------
   Dark Theme Component Overrides
   --------------------------------------------------------------------------- */

html.dark .device-row.is-stale {
  background-color: rgba(239, 68, 68, 0.10);
}

html.dark .device-row.is-stale:hover {
  background-color: rgba(239, 68, 68, 0.14);
}

html.dark .data-table tbody tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.03);
}

html.dark .customer-header {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Dark theme: the navbar is the same near-black as the canvas, so it needs a
   stronger edge to stay distinguishable from the page below it. */
html.dark .navbar {
  background-color: rgba(24, 24, 26, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Ghost button border needs light-on-dark in the dark theme
   (the base rule uses a dark hairline for the light canvas) */
html.dark .btn-ghost {
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------------
   Scrollbars
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}