/*
 * Light theme (opt-in via html[data-theme="light"], toggled from the topbar).
 * Dark theme remains the default — :root tokens in tokens.css are untouched.
 */

html[data-theme="light"] {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #0891b2; /* darker teal for contrast on light surfaces */
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #0e7490;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --input-background: #ffffff;
  --switch-background: #cbd5e1;
  --ring: #0891b2;
  --sidebar: #ffffff;
  --sidebar-foreground: #0f172a;
  --sidebar-primary: #0891b2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f1f5f9;
  --sidebar-accent-foreground: #0f172a;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #0891b2;
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-elevated: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f1f5f9;
  --scrollbar-thumb: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}

/* Layout chrome hardcoded to dark hexes in admin.css */
html[data-theme="light"] .admin-main-wrap {
  background: var(--background);
}

html[data-theme="light"] .admin-topbar {
  background: #ffffff;
  border-bottom-color: var(--border);
}

html[data-theme="light"] .admin-topbar .btn {
  background: #ffffff;
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="light"] .admin-topbar .btn.ghost {
  background: #ffffff;
}

html[data-theme="light"] .admin-topbar-btn,
html[data-theme="light"] .admin-topbar-user {
  background: #ffffff;
  border-color: var(--border);
}

html[data-theme="light"] .admin-topbar-divider {
  background: var(--border);
}

/* Cards */
html[data-theme="light"] .card {
  background: var(--card);
  border-color: var(--border);
}

html[data-theme="light"] .card-h {
  border-bottom-color: var(--border);
}

/* Tables: white-on-white highlights become black-tinted */
html[data-theme="light"] .data-table th {
  background: var(--surface-hover);
}

html[data-theme="light"] .data-table tr:hover td {
  background: var(--surface-hover);
}

/* Dashboard ghost buttons hardcoded to dark hexes */
html[data-theme="light"] .admin-dashboard .btn.ghost {
  background: #ffffff;
  color: var(--foreground);
  border: 1px solid var(--border);
}

/* SLA dashboard branded header: dark slate gradient -> light surface with teal accent */
html[data-theme="light"] .sla-brand-header {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, rgba(63, 141, 149, 0.16) 100%);
  border-color: rgba(63, 141, 149, 0.35);
}

html[data-theme="light"] .sla-brand-kpis .card {
  background: linear-gradient(160deg, #ffffff 0%, rgba(63, 141, 149, 0.08) 100%);
  border-color: rgba(63, 141, 149, 0.28);
}

/*
 * Badges: dark-theme text uses pale pastel shades (red-300, green-300, ...)
 * that are unreadable on light surfaces. Keep the hue + tinted background,
 * darken the text to the 700-range of the same color.
 */
html[data-theme="light"] .badge {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Generic color variants */
html[data-theme="light"] .badge.red { color: #b91c1c; }
html[data-theme="light"] .badge.orange { color: #c2410c; }
html[data-theme="light"] .badge.yellow { color: #a16207; }
html[data-theme="light"] .badge.blue { color: #0369a1; }
html[data-theme="light"] .badge.cyan { color: #0e7490; }
html[data-theme="light"] .badge.purple { color: #7c3aed; }
html[data-theme="light"] .badge.green { color: #15803d; }
html[data-theme="light"] .badge.muted { color: #64748b; }

/* Status chips */
html[data-theme="light"] .badge.new { color: #0e7490; }
html[data-theme="light"] .badge.needs-triage { color: #a16207; }
html[data-theme="light"] .badge.in-remediation { color: #7c3aed; }
html[data-theme="light"] .badge.validated,
html[data-theme="light"] .badge.paid { color: #15803d; }
html[data-theme="light"] .badge.rejected { color: #b91c1c; }

/* Severity chips */
html[data-theme="light"] .badge.critical { color: #b91c1c; }
html[data-theme="light"] .badge.high { color: #b45309; }
html[data-theme="light"] .badge.medium { color: #a16207; }
html[data-theme="light"] .badge.low { color: #0e7490; }

/* Semantic badge-* variants (data tables, researcher pages, JS-rendered chips) */
html[data-theme="light"] .badge.badge-success { color: #15803d; }
html[data-theme="light"] .badge.badge-warning { color: #b45309; }
html[data-theme="light"] .badge.badge-danger { color: #b91c1c; }
html[data-theme="light"] .badge.badge-info { color: #1d4ed8; }
html[data-theme="light"] .badge.badge-red,
html[data-theme="light"] .badge-red { color: #b91c1c; }
html[data-theme="light"] .badge.badge-orange,
html[data-theme="light"] .badge-orange { color: #b45309; }
html[data-theme="light"] .badge.badge-yellow,
html[data-theme="light"] .badge-yellow { color: #a16207; }
html[data-theme="light"] .badge.badge-purple,
html[data-theme="light"] .badge-purple { color: #7c3aed; }
html[data-theme="light"] .badge.badge-primary,
html[data-theme="light"] .badge-primary { color: #0e7490; }

/* DAST scans badges use solid saturated borders; darken both text and border */
html[data-theme="light"] .dast-scans .badge.yellow { color: #a16207; border-color: #a16207; }
html[data-theme="light"] .dast-scans .badge.green { color: #15803d; border-color: #15803d; }
html[data-theme="light"] .dast-scans .badge.red { color: #b91c1c; border-color: #b91c1c; }
html[data-theme="light"] .dast-scans .badge.blue { color: #1d4ed8; border-color: #1d4ed8; }
html[data-theme="light"] .dast-scans .badge.orange { color: #c2410c; border-color: #c2410c; }

/* Vulnerability severity + lifecycle badges (css/shared/vulnerability.css) */
html[data-theme="light"] .vuln-badge--critical { color: #b91c1c; }
html[data-theme="light"] .vuln-badge--high { color: #c2410c; }
html[data-theme="light"] .vuln-badge--medium { color: #a16207; }
html[data-theme="light"] .vuln-badge--low { color: #1d4ed8; }
html[data-theme="light"] .vuln-badge--info { color: #64748b; }
html[data-theme="light"] .vuln-badge--lifecycle-open { color: #a16207; }
html[data-theme="light"] .vuln-badge--lifecycle-pending { color: #b45309; }
html[data-theme="light"] .vuln-badge--lifecycle-remediation { color: #0369a1; }
html[data-theme="light"] .vuln-badge--lifecycle-resolved { color: #047857; }
html[data-theme="light"] .vuln-badge--lifecycle-fp { color: #64748b; }
html[data-theme="light"] .vuln-badge--lifecycle-risk { color: #c2410c; }
html[data-theme="light"] .vuln-badge--lifecycle-default {
  color: #475569;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Date/time picker indicators: undo the dark-theme invert filter */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none !important;
}

/* Sidebar: admin.css hardcodes the dark palette, wire it to the sidebar tokens */
html[data-theme="light"] .admin-sidebar {
  background: var(--sidebar);
  border-right-color: var(--sidebar-border);
}

html[data-theme="light"] .admin-brand {
  border-bottom-color: var(--sidebar-border);
}

html[data-theme="light"] .admin-nav .sec-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-foreground);
}

html[data-theme="light"] .admin-nav .sec-link.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-primary);
  border-left-color: var(--sidebar-primary);
}

html[data-theme="light"] .admin-side-footer {
  border-top-color: var(--sidebar-border);
}

html[data-theme="light"] .admin-side-footer .avatar {
  background: var(--sidebar-accent);
  color: var(--sidebar-primary);
}

/* Sidebar logo: dark logo on light sidebar */
html[data-theme="light"] .admin-sidebar .logo img {
  content: url('/assets/brand/logo.svg');
}