/* ISP OS - Custom Theme & Utilities */
/* Note: tailwind.css is loaded separately, this file contains custom styles only */

/* Custom Theme — @theme for Tailwind utility generation */
@theme {
  /* Brand Colors */
  --color-primary: #0f1219;
  --color-secondary: #171d2e;
  --color-accent: #3b82f6;
  --color-brand: #0ea5e9;         /* cyan-500 - primary brand color */
  --color-brand-dark: #0284c7;    /* cyan-600 */
  --color-brand-light: #38bdf8;   /* cyan-400 */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Extended Colors */
  --color-primary-dark: #080a12;
  --color-primary-light: #1e2338;
  --color-accent-dark: #2563eb;
  --color-accent-light: #60a5fa;

  /* Font Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Force override tailwind.css theme layer — :root beats @layer */
:root {
  --color-primary: #0f1219 !important;
  --color-secondary: #171d2e !important;
  --color-primary-dark: #080a12 !important;
  --color-primary-light: #1e2338 !important;
}

/* Direct sidebar override — bypasses Tailwind variable chain */
aside.bg-secondary { background-color: #171d2e !important; }
.bg-primary { background-color: #0f1219 !important; }
.bg-primary-dark { background-color: #080a12 !important; }

/* Inter Variable Font */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   Uses CSS custom properties for seamless light/dark switching
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Light Mode (Default) */
  --page-bg: #f1f5f9;           /* slate-100 */
  --card-bg: #ffffff;           /* white */
  --card-border: #e2e8f0;       /* slate-200 */
  --sidebar-bg: #131520;        /* navy (always dark) */
  --sidebar-hover: #1e2231;     /* navy hover */
  --text-primary: #1e293b;      /* slate-800 */
  --text-secondary: #64748b;    /* slate-500 */
  --text-muted: #94a3b8;        /* slate-400 */
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --table-header: #f8fafc;      /* slate-50 */
  --table-row-hover: #f1f5f9;   /* slate-100 */
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --shadow-color: rgba(0, 0, 0, 0.1);
}

html.dark {
  /* Dark Mode — Navy/Indigo palette (premium ISP feel) */
  --page-bg: #0f1117;           /* dark navy-black */
  --card-bg: #171923;           /* dark navy card */
  --card-border: #1f2340;       /* indigo-tinted border */
  --sidebar-bg: #080a12;        /* deep navy sidebar */
  --sidebar-hover: #0f1117;     /* navy hover */
  --text-primary: #f1f5f9;      /* slate-100 */
  --text-secondary: #94a3b8;    /* slate-400 */
  --text-muted: #64748b;        /* slate-500 */
  --input-bg: #1e2231;          /* navy input */
  --input-border: #2a2f4a;      /* indigo-tinted input border */
  --table-header: #111320;      /* navy table header */
  --table-row-hover: #1e2231;   /* navy row hover */
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --shadow-color: rgba(0, 0, 0, 0.4);
  --surface-hover: #262b3d;     /* control/button surface */
}

/* Base Styles */
@layer base {
  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code, pre, .font-mono {
    font-family: var(--font-mono);
  }

  /* Dark Mode Base Overrides */
  html.dark body {
    background-color: var(--page-bg);
    color: var(--text-primary);
  }

  /* Dark mode for common Tailwind classes */
  html.dark .bg-white { background-color: var(--card-bg) !important; }
  html.dark .bg-white\/95 { background-color: rgba(23, 25, 35, 0.95) !important; }
  html.dark .bg-white\/90 { background-color: rgba(23, 25, 35, 0.9) !important; }
  html.dark .bg-white\/80 { background-color: rgba(23, 25, 35, 0.8) !important; }
  html.dark .bg-slate-50 { background-color: var(--table-header) !important; }
  html.dark .bg-slate-50\/50 { background-color: rgba(17, 19, 32, 0.5) !important; }
  html.dark .bg-slate-50\/80 { background-color: rgba(17, 19, 32, 0.8) !important; }
  html.dark .bg-slate-100 { background-color: var(--page-bg) !important; }
  html.dark .bg-slate-200 { background-color: #1e2338 !important; }

  /* Cards and containers in dark mode */
  html.dark [class*="bg-white"][class*="rounded"] { background-color: var(--card-bg) !important; }
  html.dark [class*="border-slate-200"] { border-color: var(--card-border) !important; }
  html.dark [class*="border-slate-100"] { border-color: #1a1e30 !important; }

  html.dark .text-slate-800 { color: var(--text-primary) !important; }
  html.dark .text-slate-700 { color: #e2e8f0 !important; }
  html.dark .text-slate-600 { color: #cbd5e1 !important; }
  html.dark .text-slate-500 { color: var(--text-secondary) !important; }
  html.dark .text-slate-400 { color: var(--text-muted) !important; }

  /* ============================================================
     SIDEBAR ISOLATION — sidebar is ALWAYS dark, immune to toggle
     These counter-rules undo any html.dark overrides inside aside
     ============================================================ */
  html.dark aside.bg-secondary .text-slate-400,
  aside.bg-secondary .text-slate-400 { color: #94a3b8 !important; }

  html.dark aside.bg-secondary .text-slate-500,
  aside.bg-secondary .text-slate-500 { color: #64748b !important; }

  html.dark aside.bg-secondary .text-white,
  aside.bg-secondary .text-white { color: #ffffff !important; }

  html.dark aside.bg-secondary .hover\:text-white:hover,
  aside.bg-secondary .hover\:text-white:hover { color: #ffffff !important; }

  /* Undo bg-white wildcard match — sidebar uses bg-white/10 etc for subtle highlights */
  html.dark aside.bg-secondary [class*="bg-white"][class*="rounded"] { background-color: transparent !important; }
  html.dark aside.bg-secondary .bg-white\/10 { background-color: rgba(255,255,255,0.1) !important; }
  html.dark aside.bg-secondary .bg-white\/\[0\.07\] { background-color: rgba(255,255,255,0.07) !important; }
  html.dark aside.bg-secondary .bg-white\/\[0\.06\] { background-color: rgba(255,255,255,0.06) !important; }
  html.dark aside.bg-secondary .bg-white\/\[0\.03\] { background-color: rgba(255,255,255,0.03) !important; }
  html.dark aside.bg-secondary .hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1) !important; }
  html.dark aside.bg-secondary .hover\:bg-white\/\[0\.12\]:hover { background-color: rgba(255,255,255,0.12) !important; }

  /* Sidebar borders stay as-is */
  html.dark aside.bg-secondary [class*="border-white"] { border-color: rgba(255,255,255,0.06) !important; }
  html.dark aside.bg-secondary .border-accent { border-color: var(--color-accent) !important; }

  html.dark .border-slate-100 { border-color: #1a1e30 !important; }
  html.dark .border-slate-200 { border-color: var(--card-border) !important; }
  html.dark .border-slate-300 { border-color: #2a2f4a !important; }

  html.dark .divide-slate-100 > * + * { border-color: #1a1e30 !important; }
  html.dark .divide-slate-200 > * + * { border-color: var(--card-border) !important; }

  /* Form inputs */
  html.dark input, html.dark select, html.dark textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
  }
  html.dark select option {
    background-color: var(--card-bg);
    color: var(--text-primary);
  }
  html.dark input::placeholder, html.dark textarea::placeholder {
    color: var(--text-muted) !important;
  }

  /* Tables */
  html.dark table { background-color: var(--card-bg); }
  html.dark thead { background-color: var(--table-header); }
  html.dark tbody tr { border-color: rgba(99,102,241,0.08) !important; }
  html.dark tbody tr:hover { background-color: var(--table-row-hover); }
  html.dark thead th { border-color: rgba(99,102,241,0.12) !important; }

  /* Shadows in dark mode — subtle indigo glow */
  html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg {
    --tw-shadow-color: var(--shadow-color);
  }

  /* Modals and overlays */
  html.dark .bg-black\/50, html.dark .bg-slate-900\/50, html.dark .bg-slate-900\/60 {
    background-color: var(--modal-overlay) !important;
  }
  html.dark .modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
  }

  /* Modal headers - make blue gradients more vibrant in dark mode */
  html.dark .from-blue-600 { --tw-gradient-from: #3b82f6 !important; }
  html.dark .from-blue-700 { --tw-gradient-from: #2563eb !important; }
  html.dark .from-cyan-500 { --tw-gradient-from: #22d3ee !important; }
  html.dark .from-cyan-600 { --tw-gradient-from: #06b6d4 !important; }
  html.dark .to-blue-700 { --tw-gradient-to: #1d4ed8 !important; }
  html.dark .to-blue-800 { --tw-gradient-to: #1e40af !important; }
  html.dark .to-cyan-600 { --tw-gradient-to: #0891b2 !important; }
  html.dark .to-cyan-700 { --tw-gradient-to: #0e7490 !important; }

  /* Hover states */
  html.dark .hover\:bg-slate-50:hover { background-color: #1e2231 !important; }
  html.dark .hover\:bg-slate-100:hover { background-color: var(--card-bg) !important; }
  html.dark .hover\:bg-white:hover { background-color: var(--surface-hover) !important; }

  /* ═══ GRADIENT BACKGROUNDS - Dark Mode Fixes ═══ */
  html.dark .from-slate-50 { --tw-gradient-from: var(--card-bg) !important; }
  html.dark .from-blue-50 { --tw-gradient-from: #111a3a !important; }
  html.dark .from-green-50 { --tw-gradient-from: #0a2918 !important; }
  html.dark .from-amber-50 { --tw-gradient-from: #291400 !important; }
  html.dark .from-red-50 { --tw-gradient-from: #290808 !important; }
  html.dark .from-purple-50 { --tw-gradient-from: #1a0538 !important; }
  html.dark .from-cyan-50 { --tw-gradient-from: #0a2833 !important; }
  html.dark .from-orange-50 { --tw-gradient-from: #260d02 !important; }

  html.dark .to-slate-100 { --tw-gradient-to: #1e2338 !important; }
  html.dark .to-blue-100 { --tw-gradient-to: #1e40af !important; }
  html.dark .to-green-100 { --tw-gradient-to: #166534 !important; }
  html.dark .to-amber-100 { --tw-gradient-to: #78350f !important; }
  html.dark .to-red-100 { --tw-gradient-to: #7f1d1d !important; }
  html.dark .to-purple-100 { --tw-gradient-to: #581c87 !important; }
  html.dark .to-white { --tw-gradient-to: var(--card-bg) !important; }
  html.dark .to-emerald-50 { --tw-gradient-to: #064e3b !important; }
  html.dark .to-emerald-100 { --tw-gradient-to: #065f46 !important; }
  html.dark .to-orange-50 { --tw-gradient-to: #431407 !important; }
  html.dark .to-orange-100 { --tw-gradient-to: #7c2d12 !important; }

  /* Hover gradient overrides */
  html.dark .hover\:to-emerald-100:hover { --tw-gradient-to: #065f46 !important; }
  html.dark .hover\:to-orange-100:hover { --tw-gradient-to: #7c2d12 !important; }

  /* ═══ ADDITIONAL TEXT COLORS ═══ */
  html.dark .text-black { color: #f1f5f9 !important; }
  html.dark .text-gray-900 { color: #f1f5f9 !important; }
  html.dark .text-gray-800 { color: #e2e8f0 !important; }
  html.dark .text-gray-700 { color: #cbd5e1 !important; }
  html.dark .text-gray-600 { color: #94a3b8 !important; }
  html.dark .text-gray-500 { color: #64748b !important; }
  html.dark .text-slate-900 { color: #f1f5f9 !important; }

  /* ═══ RING/OUTLINE COLORS ═══ */
  html.dark .ring-slate-100 { --tw-ring-color: #1a1e30 !important; }
  html.dark .ring-slate-200 { --tw-ring-color: #2a2f4a !important; }

  /* ═══ STAT CARDS / INFO BOXES ═══ */
  /* Semi-transparent tinted backgrounds — vibrant but not overwhelming */
  html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.08) !important; }
  html.dark .bg-green-50 { background-color: rgba(34,197,94,0.08) !important; }
  html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.08) !important; }
  html.dark .bg-red-50 { background-color: rgba(239,68,68,0.08) !important; }
  html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.08) !important; }
  html.dark .bg-cyan-50 { background-color: rgba(6,182,212,0.08) !important; }
  html.dark .bg-orange-50 { background-color: rgba(249,115,22,0.08) !important; }
  html.dark .bg-yellow-50 { background-color: rgba(234,179,8,0.08) !important; }
  html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.08) !important; }
  html.dark .bg-pink-50 { background-color: rgba(236,72,153,0.08) !important; }
  html.dark .bg-teal-50 { background-color: rgba(20,184,166,0.08) !important; }
  html.dark .bg-gray-50 { background-color: #131520 !important; }
  html.dark .bg-gray-100 { background-color: #1a1e30 !important; }

  /* Light backgrounds with colored text → semi-transparent */
  html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; }
  html.dark .bg-green-100 { background-color: rgba(34,197,94,0.15) !important; }
  html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.15) !important; }
  html.dark .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; }
  html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.15) !important; }
  html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; }
  html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.15) !important; }

  /* Text on colored backgrounds - ensure readability */
  html.dark .text-blue-600 { color: #93c5fd !important; }
  html.dark .text-blue-700 { color: #93c5fd !important; }
  html.dark .text-green-600 { color: #86efac !important; }
  html.dark .text-green-700 { color: #86efac !important; }
  html.dark .text-amber-600 { color: #fcd34d !important; }
  html.dark .text-amber-700 { color: #fcd34d !important; }
  html.dark .text-red-600 { color: #fca5a5 !important; }
  html.dark .text-red-700 { color: #fca5a5 !important; }
  html.dark .text-purple-600 { color: #d8b4fe !important; }
  html.dark .text-purple-700 { color: #d8b4fe !important; }
  html.dark .text-orange-600 { color: #fdba74 !important; }
  html.dark .text-orange-700 { color: #fdba74 !important; }
  html.dark .text-cyan-600 { color: #67e8f9 !important; }
  html.dark .text-cyan-700 { color: #67e8f9 !important; }
  html.dark .text-indigo-600 { color: #a5b4fc !important; }
  html.dark .text-indigo-700 { color: #a5b4fc !important; }

  /* ═══ BORDER COLORS ═══ */
  html.dark .border-gray-100 { border-color: #1a1e30 !important; }
  html.dark .border-gray-200 { border-color: #252a3e !important; }
  html.dark .border-gray-300 { border-color: #2a2f4a !important; }

  /* Colored borders → subtle tinted */
  html.dark .border-green-200 { border-color: rgba(34,197,94,0.2) !important; }
  html.dark .border-blue-200 { border-color: rgba(59,130,246,0.2) !important; }
  html.dark .border-amber-200 { border-color: rgba(245,158,11,0.2) !important; }
  html.dark .border-red-200 { border-color: rgba(239,68,68,0.2) !important; }
  html.dark .border-purple-200 { border-color: rgba(168,85,247,0.2) !important; }
  html.dark .border-indigo-200 { border-color: rgba(99,102,241,0.2) !important; }
  html.dark .border-orange-200 { border-color: rgba(249,115,22,0.2) !important; }
  html.dark .border-cyan-200 { border-color: rgba(6,182,212,0.2) !important; }

  /* ═══ SCROLLBARS ═══ */
  html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
  html.dark ::-webkit-scrollbar-track { background: var(--page-bg); }
  html.dark ::-webkit-scrollbar-thumb { background: #2a2f4a; border-radius: 4px; }
  html.dark ::-webkit-scrollbar-thumb:hover { background: #3a4060; }

  /* ═══ PROGRESS BARS ═══ */
  html.dark .bg-slate-100.rounded-full { background-color: var(--surface-hover) !important; }

  /* ═══ BRAND BUTTONS / TEXT IN DARK MODE ═══ */
  /* bg-primary (#0f1219) is near-black — invisible on dark backgrounds */
  /* In dark mode, switch to accent blue for contrast */
  html.dark .bg-primary:not(aside):not(aside *) { background-color: #3b82f6 !important; }
  html.dark .bg-primary-dark:not(aside):not(aside *) { background-color: #2563eb !important; }
  html.dark .hover\:bg-primary:hover:not(aside):not(aside *) { background-color: #2563eb !important; }

  /* text-primary (#0f1219) — invisible on dark card bg */
  html.dark .text-primary:not(aside *) { color: #93c5fd !important; }

  /* Ensure bg-primary buttons have white text in dark mode */
  html.dark .bg-primary:not(aside):not(aside *) .text-white,
  html.dark .bg-primary.text-white:not(aside):not(aside *) { color: #ffffff !important; }

  /* ═══ GLOW EFFECTS (enhanced for dark) ═══ */
  html.dark .glow-green { box-shadow: 0 0 15px rgba(34,197,94,0.2); }
  html.dark .glow-red { box-shadow: 0 0 15px rgba(239,68,68,0.2); }
  html.dark .glow-blue { box-shadow: 0 0 15px rgba(59,130,246,0.2); }
  html.dark .glow-purple { box-shadow: 0 0 15px rgba(168,85,247,0.2); }
}

/* Custom Utilities */
@layer utilities {
  /* ═══════════════════════════════════════════════════════════════
     BRAND COLOR UTILITIES
     Brand color is cyan-500 (#0ea5e9) - used throughout the UI
     ═══════════════════════════════════════════════════════════════ */
  .bg-brand {
    background-color: #0ea5e9;
  }
  .bg-brand\/90, .hover\:bg-brand\/90:hover {
    background-color: rgba(14, 165, 233, 0.9);
  }
  .bg-brand\/20, .hover\:bg-brand\/20:hover {
    background-color: rgba(14, 165, 233, 0.2);
  }
  .text-brand {
    color: #0ea5e9;
  }
  .border-brand {
    border-color: #0ea5e9;
  }
  .from-brand {
    --tw-gradient-from: #0ea5e9;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14, 165, 233, 0));
  }
  .to-brand {
    --tw-gradient-to: #0ea5e9;
  }
  .shadow-brand\/20 {
    --tw-shadow-color: rgba(14, 165, 233, 0.2);
    --tw-shadow: var(--tw-shadow-colored);
  }
  .ring-brand {
    --tw-ring-color: #0ea5e9;
  }

  /* Dark mode brand adjustments */
  html.dark .bg-brand {
    background-color: #0284c7; /* cyan-600 - slightly darker in dark mode */
  }
  html.dark .from-brand {
    --tw-gradient-from: #0284c7;
  }
  html.dark .to-brand {
    --tw-gradient-to: #0284c7;
  }

  /* Glass Effect */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Smooth Scrolling */
  .smooth-scroll {
    scroll-behavior: smooth;
  }

  /* Hide Scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}