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

/* Custom Theme */
@theme {
  /* Brand Colors */
  --color-primary: #0f172a;
  --color-secondary: #1e293b;
  --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: #020617;
  --color-primary-light: #334155;
  --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;
}

/* 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: #0f172a;        /* slate-900 */
  --sidebar-hover: #1e293b;     /* slate-800 */
  --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 */
  --page-bg: #0f172a;           /* slate-900 */
  --card-bg: #1e293b;           /* slate-800 */
  --card-border: #334155;       /* slate-700 */
  --sidebar-bg: #020617;        /* slate-950 */
  --sidebar-hover: #0f172a;     /* slate-900 */
  --text-primary: #f1f5f9;      /* slate-100 */
  --text-secondary: #94a3b8;    /* slate-400 */
  --text-muted: #64748b;        /* slate-500 */
  --input-bg: #1e293b;
  --input-border: #475569;      /* slate-600 */
  --table-header: #0f172a;      /* slate-900 */
  --table-row-hover: #334155;   /* slate-700 */
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* 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(30, 41, 59, 0.95) !important; }
  html.dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
  html.dark .bg-white\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
  html.dark .bg-slate-50 { background-color: var(--table-header) !important; }
  html.dark .bg-slate-50\/50 { background-color: rgba(15, 23, 42, 0.5) !important; }
  html.dark .bg-slate-50\/80 { background-color: rgba(15, 23, 42, 0.8) !important; }
  html.dark .bg-slate-100 { background-color: var(--page-bg) !important; }
  html.dark .bg-slate-200 { background-color: #334155 !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: #334155 !important; }

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

  /* Keep sidebar text visible in dark mode (sidebar is always dark) */
  html.dark aside.bg-secondary .text-slate-400 { color: #94a3b8 !important; }

  html.dark .border-slate-100 { border-color: #334155 !important; }
  html.dark .border-slate-200 { border-color: var(--card-border) !important; }
  html.dark .border-slate-300 { border-color: #475569 !important; }

  html.dark .divide-slate-100 > * + * { border-color: #334155 !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 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:hover { background-color: var(--table-row-hover); }

  /* Shadows in dark mode */
  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;
  }

  /* Modal headers - make blue gradients more vibrant in dark mode */
  html.dark .from-blue-600 { --tw-gradient-from: #3b82f6 !important; } /* brighter blue */
  html.dark .from-blue-700 { --tw-gradient-from: #2563eb !important; }
  html.dark .from-cyan-500 { --tw-gradient-from: #22d3ee !important; } /* brighter cyan */
  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: #334155 !important; }
  html.dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; }
  html.dark .hover\:bg-white:hover { background-color: #334155 !important; }

  /* ═══ GRADIENT BACKGROUNDS - Dark Mode Fixes ═══ */
  /* Light gradient backgrounds need darker variants */
  html.dark .from-slate-50 { --tw-gradient-from: #1e293b !important; }
  html.dark .from-blue-50 { --tw-gradient-from: #1e3a5f !important; }
  html.dark .from-green-50 { --tw-gradient-from: #14532d !important; }
  html.dark .from-amber-50 { --tw-gradient-from: #451a03 !important; }
  html.dark .from-red-50 { --tw-gradient-from: #450a0a !important; }
  html.dark .from-purple-50 { --tw-gradient-from: #3b0764 !important; }
  html.dark .from-cyan-50 { --tw-gradient-from: #164e63 !important; }
  html.dark .from-orange-50 { --tw-gradient-from: #431407 !important; }

  html.dark .to-slate-100 { --tw-gradient-to: #334155 !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: #1e293b !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: #334155 !important; }
  html.dark .ring-slate-200 { --tw-ring-color: #475569 !important; }

  /* ═══ STAT CARDS / INFO BOXES ═══ */
  html.dark .bg-blue-50 { background-color: #1e3a5f !important; }
  html.dark .bg-green-50 { background-color: #14532d !important; }
  html.dark .bg-amber-50 { background-color: #451a03 !important; }
  html.dark .bg-red-50 { background-color: #450a0a !important; }
  html.dark .bg-purple-50 { background-color: #3b0764 !important; }
  html.dark .bg-cyan-50 { background-color: #164e63 !important; }
  html.dark .bg-orange-50 { background-color: #431407 !important; }
  html.dark .bg-yellow-50 { background-color: #422006 !important; }
  html.dark .bg-indigo-50 { background-color: #312e81 !important; }
  html.dark .bg-pink-50 { background-color: #500724 !important; }
  html.dark .bg-teal-50 { background-color: #134e4a !important; }
  html.dark .bg-gray-50 { background-color: #1f2937 !important; }
  html.dark .bg-gray-100 { background-color: #374151 !important; }

  /* Light backgrounds with colored text need adjustment */
  html.dark .bg-blue-100 { background-color: #1e40af !important; }
  html.dark .bg-green-100 { background-color: #166534 !important; }
  html.dark .bg-amber-100 { background-color: #78350f !important; }
  html.dark .bg-red-100 { background-color: #7f1d1d !important; }
  html.dark .bg-purple-100 { background-color: #581c87 !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; }

  /* ═══ BORDER COLORS ═══ */
  html.dark .border-gray-100 { border-color: #374151 !important; }
  html.dark .border-gray-200 { border-color: #4b5563 !important; }
  html.dark .border-gray-300 { border-color: #6b7280 !important; }
}

/* 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;
  }
}