/* AnomAlert custom styles */

:root {
  --critical: #ef4444;
  --high: #f97316;
  --medium: #eab308;
  --low: #60a5fa;
  --bg-card: rgba(39, 39, 42, 0.95);

  /* Primary accent color — updated dynamically via applyPrimaryColor() */
  --primary-600: #4f46e5;
  --primary-500: #6366f1;
  --primary-400: #818cf8;
  --primary-text: #ffffff;
  --primary-alpha-05: rgba(99, 102, 241, 0.05);
  --primary-alpha-10: rgba(99, 102, 241, 0.10);
  --primary-alpha-20: rgba(99, 102, 241, 0.20);
  --primary-alpha-40: rgba(99, 102, 241, 0.40);
  --primary-alpha-50: rgba(99, 102, 241, 0.50);
  --primary-alpha-80: rgba(99, 102, 241, 0.80);
}

/* Priority border accents */
.priority-critical { border-left: 4px solid var(--critical); }
.priority-high     { border-left: 4px solid var(--high); }
.priority-medium   { border-left: 4px solid var(--medium); }
.priority-low      { border-left: 4px solid var(--low); }

/* Badge colors */
.badge-critical { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.badge-high     { background: rgba(249,115,22,0.2); color: #fdba74; border: 1px solid rgba(249,115,22,0.4); }
.badge-medium   { background: rgba(234,179,8,0.2);  color: #fde047; border: 1px solid rgba(234,179,8,0.4); }
.badge-low      { background: rgba(96,165,250,0.2); color: #93c5fd; border: 1px solid rgba(96,165,250,0.4); }

/* Card hover */
.anomaly-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.anomaly-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Countdown bar animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px var(--primary-alpha-40); }
  50%       { box-shadow: 0 0 12px var(--primary-alpha-80); }
}
.countdown-bar { animation: pulse-glow 2s infinite; }

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Smooth collapse */
.collapse-enter { max-height: 0; overflow: hidden; }
.collapse-enter-active { transition: max-height 0.3s ease; }

/* Chart container */
.chart-container { position: relative; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #52525b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #71717a; }

/* Nav active state */
.nav-link.active {
  background: var(--primary-alpha-20);
  color: var(--primary-400);
  border-left: 3px solid var(--primary-500);
}

/* Status badge for archive */
.status-resolved  { background: rgba(34,197,94,0.15); color: #86efac; }
.status-ignored   { background: rgba(107,114,128,0.2); color: #9ca3af; }
.status-incorrect { background: rgba(239,68,68,0.15); color: #fca5a5; }

/* Login page */
.login-card {
  background: linear-gradient(135deg, rgba(39,39,42,0.98) 0%, rgba(24,24,27,0.98) 100%);
  box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

/* Glass effect for stat cards */
.stat-card {
  background: linear-gradient(135deg, rgba(39,39,42,0.9) 0%, rgba(24,24,27,0.9) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(82,82,91,0.4);
  transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--primary-alpha-50); }

/* Table */
.data-table th { background: rgba(24,24,27,0.8); }
.data-table tr:hover td { background: var(--primary-alpha-05); }

/* Toast notification */
.toast {
  animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100%); }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
html.light { color-scheme: light; }
html.light body { background-color: #f1f5f9 !important; color: #1e293b !important; }
html.light aside { background-color: #ffffff !important; border-right-color: #e2e8f0 !important; }
html.light header { background-color: rgba(255,255,255,0.95) !important; border-bottom-color: #e2e8f0 !important; }

/* Zinc background overrides */
html.light .bg-zinc-950     { background-color: #f1f5f9 !important; }
html.light .bg-zinc-900     { background-color: #ffffff !important; }
html.light .bg-zinc-800     { background-color: #f3f4f6 !important; }
html.light .bg-zinc-700     { background-color: #e5e7eb !important; }

/* Opacity/alpha variants */
html.light .bg-zinc-900\/95 { background-color: rgba(255,255,255,0.95) !important; }
html.light .bg-zinc-900\/30 { background-color: rgba(241,245,249,0.5) !important; }
html.light .bg-zinc-800\/50 { background-color: rgba(243,244,246,0.6) !important; }
html.light .bg-zinc-800\/60 { background-color: rgba(241,245,249,0.9) !important; }  /* recommendation box */
html.light .bg-black\/50    { background-color: rgba(0,0,0,0.25) !important; }

/* Detector tooltip panel (bg-indigo-950/40 + border-indigo-800/40) */
html.light .bg-indigo-950\/40    { background-color: rgba(238,242,255,0.85) !important; }
html.light .border-indigo-800\/40 { border-color: rgba(165,180,252,0.5) !important; }

/* Indigo tints */
html.light .bg-indigo-900\/90 { background-color: rgba(238,242,255,0.95) !important; }
html.light .bg-indigo-900\/30 { background-color: rgba(238,242,255,0.5) !important; }
html.light .bg-indigo-600\/20 { background-color: rgba(99,102,241,0.08) !important; }

/* Red tints (error states & Incorrect button) */
html.light .bg-red-900\/30   { background-color: rgba(254,242,242,0.8) !important; }
html.light .border-red-700   { border-color: #fca5a5 !important; }
html.light .border-red-800   { border-color: #fca5a5 !important; }
html.light .text-red-300     { color: #dc2626 !important; }
html.light .text-red-400     { color: #b91c1c !important; }  /* red-700 */

/* Amber — darken for white-bg readability */
html.light .text-amber-400   { color: #92400e !important; }  /* amber-800 */

/* Emerald — darken light variants for white-bg readability */
html.light .text-emerald-200   { color: #059669 !important; }
html.light .text-emerald-300   { color: #065f46 !important; }  /* emerald-800 */
html.light .text-emerald-400   { color: #047857 !important; }  /* emerald-700 */
html.light .bg-emerald-900\/40 { background-color: rgba(209,250,229,0.7) !important; }
html.light .bg-emerald-900\/90 { background-color: rgba(240,253,244,0.95) !important; }
html.light .border-emerald-700 { border-color: #a7f3d0 !important; }
html.light .border-emerald-800 { border-color: #6ee7b7 !important; }

/* Indigo text — must be dark enough to read on white */
html.light .text-indigo-400 { color: var(--primary-600) !important; }

/* Indigo info toasts */
html.light .border-indigo-700  { border-color: var(--primary-400) !important; }
html.light .text-indigo-200    { color: var(--primary-600) !important; }

/* Border overrides */
html.light .border-zinc-800 { border-color: #e2e8f0 !important; }
html.light .border-zinc-700 { border-color: #d1d5db !important; }

/* Text overrides */
html.light .text-zinc-100 { color: #1e293b !important; }
html.light .text-zinc-200 { color: #1f2937 !important; }
html.light .text-zinc-300 { color: #374151 !important; }
html.light .text-zinc-400 { color: #6b7280 !important; }
html.light .text-zinc-500 { color: #9ca3af !important; }
html.light .text-white    { color: #0f172a !important; }

/* Input placeholder */
html.light input::placeholder,
html.light textarea::placeholder { color: #9ca3af !important; }

/* Nav links */
html.light .nav-link       { color: #4b5563 !important; }
html.light .nav-link:hover { background-color: #f1f5f9 !important; color: #111827 !important; }
html.light .nav-link.active {
  background: var(--primary-alpha-10) !important;
  color: var(--primary-600) !important;
  border-left-color: var(--primary-500);
}

/* Stat cards */
html.light .stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%) !important;
  border-color: rgba(226,232,240,0.8) !important;
}

/* Priority badges */
html.light .badge-critical { background: rgba(239,68,68,0.1) !important;   color: #dc2626 !important; border-color: rgba(239,68,68,0.3) !important; }
html.light .badge-high     { background: rgba(249,115,22,0.1) !important;  color: #ea580c !important; border-color: rgba(249,115,22,0.3) !important; }
html.light .badge-medium   { background: rgba(234,179,8,0.1) !important;   color: #b45309 !important; border-color: rgba(234,179,8,0.3) !important; }
html.light .badge-low      { background: rgba(96,165,250,0.1) !important;  color: #2563eb !important; border-color: rgba(96,165,250,0.3) !important; }

/* Archive status badges */
html.light .status-resolved  { background: rgba(34,197,94,0.1) !important;   color: #15803d !important; }
html.light .status-ignored   { background: rgba(107,114,128,0.1) !important; color: #6b7280 !important; }
html.light .status-incorrect { background: rgba(239,68,68,0.1) !important;   color: #dc2626 !important; }

/* Scrollbar */
html.light ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }

/* Data table */
html.light .data-table th { background: rgba(248,250,252,0.9) !important; }
html.light .data-table tr:hover td { background: var(--primary-alpha-05) !important; }