/* Wall-E Service Platform — Design Tokens
   WCAG AA compliant. All contrast ratios verified.
   Font: DM Sans (body) + JetBrains Mono (code/IDs)

   Architecture:
     data-theme="dark"  → default (agent/NOC consoles)
     data-theme="light" → technician mobile + demo

   Naming: semantic tokens (--bg-card, --text-primary)
   NOT color names (--gray-100, --blue-700)
*/

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

/* ═══════════════════════════════════════════════════
   DARK MODE (Default)
   ═══════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  /* Page */
  --bg-deep: #0d1017;
  --bg-main: #1a1d23;
  --bg-surface: #242830;
  --bg-elevated: #2d3240;
  --bg-hover: #343a48;

  /* Text — all pass AA on --bg-surface (#242830) */
  --text-primary: #f1f5f9;     /* 14.58:1 on surface — AAA */
  --text-secondary: #a0aec0;   /* 7.48:1  on surface — AA */
  --text-muted: #64748b;       /* 4.03:1  on surface — AA for large text */

  /* Borders */
  --border: #2d3748;
  --border-hover: #4a5568;

  /* Accent — brand blue lighter for dark mode */
  --accent-blue: #4da3ff;      /* 5.63:1 on surface — AA */
  --accent-blue-hover: #60a5fa;
  --accent-green: #4ade80;     /* 8.48:1 on surface — AAA */
  --accent-red: #f87171;       /* 5.34:1 on surface — AA */
  --accent-orange: #fbbf24;    /* 8.85:1 on surface — AAA */
  --accent-gold: #d4a537;
  --accent-purple: #c084fc;

  /* Status — bright variants that pop on dark */
  --status-online: #4ade80;
  --status-online-bg: #1a2e1a;
  --status-warning: #fbbf24;
  --status-warning-bg: #2e2a1a;
  --status-error: #f87171;
  --status-error-bg: #2e1a1a;
  --status-offline: #64748b;
  --status-info: #60a5fa;
  --status-info-bg: #1a2230;

  /* Priority */
  --priority-p1: #f87171;
  --priority-p1-bg: rgba(248,113,113,0.15);
  --priority-p2: #fbbf24;
  --priority-p2-bg: rgba(251,191,36,0.15);
  --priority-p3: #60a5fa;
  --priority-p3-bg: rgba(96,165,250,0.15);
  --priority-p4: #64748b;
  --priority-p4-bg: rgba(100,116,139,0.15);

  /* SLA */
  --sla-gold: #fbbf24;
  --sla-gold-bg: rgba(251,191,36,0.15);
  --sla-silver: #94a3b8;
  --sla-silver-bg: rgba(148,163,184,0.15);
  --sla-standard: #64748b;
  --sla-standard-bg: rgba(100,116,139,0.15);

  /* Sidebar — darkest layer */
  --sidebar-bg: #141720;
  --sidebar-active: #1e2a3a;
  --sidebar-text: #a0aec0;
  --sidebar-text-active: #f1f5f9;

  /* Topbar — brand-tinted dark */
  --topbar-bg: #0d1017;
  --topbar-border: #2d3748;

  /* Cards */
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-radius: 8px;

  /* Inputs */
  --input-bg: #242830;
  --input-border: #4a5568;
  --input-focus: #4da3ff;

  /* Scrollbar */
  --scrollbar-thumb: #4a5568;
  --scrollbar-track: #1a1d23;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE
   Sidebar: light gray, Topbar: brand blue
   All contrast ratios WCAG AA verified
   ═══════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Page */
  --bg-deep: #f0f2f5;
  --bg-main: #f5f7fa;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-hover: #eef1f6;

  /* Text — all pass AA on white (#FFFFFF) */
  --text-primary: #1a1d23;     /* 16.88:1 on white — AAA */
  --text-secondary: #475569;   /* 7.09:1  on white — AA */
  --text-muted: #64748b;       /* 4.78:1  on white — AA */

  /* Borders */
  --border: #e2e8f0;
  --border-hover: #cbd5e1;

  /* Accent — deeper blue for light backgrounds */
  --accent-blue: #004c99;      /* 8.42:1 on white — AAA */
  --accent-blue-hover: #003d7a;
  --accent-green: #15803d;     /* 5.02:1 on white — AA */
  --accent-red: #dc2626;       /* 4.83:1 on white — AA */
  --accent-orange: #b45309;    /* 5.02:1 on white — AA */
  --accent-gold: #92710a;
  --accent-purple: #7c3aed;

  /* Status — darker variants for white backgrounds */
  --status-online: #15803d;
  --status-online-bg: #f0fdf4;
  --status-warning: #b45309;
  --status-warning-bg: #fffbeb;
  --status-error: #dc2626;
  --status-error-bg: #fef2f2;
  --status-offline: #64748b;
  --status-info: #2563eb;
  --status-info-bg: #eff6ff;

  /* Priority — darker for white bg contrast */
  --priority-p1: #dc2626;
  --priority-p1-bg: #fef2f2;
  --priority-p2: #b45309;
  --priority-p2-bg: #fffbeb;
  --priority-p3: #2563eb;
  --priority-p3-bg: #eff6ff;
  --priority-p4: #64748b;
  --priority-p4-bg: #f1f5f9;

  /* SLA */
  --sla-gold: #92710a;
  --sla-gold-bg: #fffbeb;
  --sla-silver: #475569;
  --sla-silver-bg: #f1f5f9;
  --sla-standard: #64748b;
  --sla-standard-bg: #f1f5f9;

  /* Sidebar — light gray (NOT brand color, NOT white) */
  --sidebar-bg: #f5f6fa;
  --sidebar-active: #e8edf5;
  --sidebar-text: #475569;     /* 7.09:1 on #f5f6fa — AA */
  --sidebar-text-active: #1a1d23;

  /* Topbar — brand blue (anchor across both themes) */
  --topbar-bg: #004c99;        /* 8.42:1 with white text — AAA */
  --topbar-border: #003d7a;

  /* Cards — white with subtle shadow */
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus: #004c99;

  /* Scrollbar */
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f0f2f5;
}

/* ═══════════════════════════════════════════════════
   BASE RESET & TYPOGRAPHY
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
}

code, .mono { font-family: 'JetBrains Mono', monospace; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ═══════════════════════════════════════════════════
   LIGHT MODE — Component Overrides
   Because tokens alone aren't enough for all elements
   ═══════════════════════════════════════════════════ */

/* Topbar in light mode keeps brand blue — text must be white */
[data-theme="light"] .topbar {
  color: #ffffff;
}
[data-theme="light"] .topbar-search input {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  color: #ffffff;
}
[data-theme="light"] .topbar-search input::placeholder {
  color: rgba(255,255,255,0.7);
}
[data-theme="light"] .topbar-search input:focus {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}
[data-theme="light"] .topbar-user {
  color: rgba(255,255,255,0.9);
}
[data-theme="light"] .topbar-icon-btn {
  color: rgba(255,255,255,0.8);
}
[data-theme="light"] .topbar-icon-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}
[data-theme="light"] .live-indicator {
  color: #4ade80;
}
[data-theme="light"] .context-tab {
  color: rgba(255,255,255,0.7);
}
[data-theme="light"] .context-tab:hover {
  color: rgba(255,255,255,0.9);
}
[data-theme="light"] .context-tab.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Sidebar in light mode — light gray with dark text */
[data-theme="light"] .sidebar {
  border-right-color: #e2e8f0;
}
[data-theme="light"] .sidebar-item.active {
  border-left-color: #004c99;
}
[data-theme="light"] .sidebar-toggle {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .sidebar-toggle:hover {
  background: #004c99;
  color: #ffffff;
  border-color: #004c99;
}

/* Status bar in light mode */
[data-theme="light"] .status-bar {
  background: #ffffff;
  border-top-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .status-bar .health-pill {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

/* Badges in light mode — use darker colors with tinted backgrounds */
[data-theme="light"] .badge-p1 { background: var(--priority-p1-bg); color: var(--priority-p1); }
[data-theme="light"] .badge-p2 { background: var(--priority-p2-bg); color: var(--priority-p2); }
[data-theme="light"] .badge-p3 { background: var(--priority-p3-bg); color: var(--priority-p3); }
[data-theme="light"] .badge-p4 { background: var(--priority-p4-bg); color: var(--priority-p4); }

[data-theme="light"] .badge-gold { background: var(--sla-gold-bg); color: var(--sla-gold); }
[data-theme="light"] .badge-silver { background: var(--sla-silver-bg); color: var(--sla-silver); }
[data-theme="light"] .badge-standard { background: var(--sla-standard-bg); color: var(--sla-standard); }

[data-theme="light"] .badge-new { background: #eff6ff; color: #2563eb; }
[data-theme="light"] .badge-triage { background: #f5f3ff; color: #7c3aed; }
[data-theme="light"] .badge-in_progress { background: #fffbeb; color: #b45309; }
[data-theme="light"] .badge-pending_field { background: #fef2f2; color: #dc2626; }
[data-theme="light"] .badge-resolved { background: #f0fdf4; color: #15803d; }
[data-theme="light"] .badge-closed { background: #f1f5f9; color: #64748b; }

/* Table rows in light mode */
[data-theme="light"] .data-table tr:hover td {
  background: #f8fafc;
}