@tailwind base;
@tailwind components;
@tailwind utilities;

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #f97316;
  --sidebar-bg: #0a1128;
  --sidebar-text: #94a3b8;
  --sidebar-active: #ffffff;

  --bg-elevated: rgb(255 255 255 / 0.82);
  --border-accent: rgb(231 229 228 / 0.8);
  --glass-bg: rgb(255 255 255 / 0.72);
  --shadow-card: 0 30px 80px rgba(28, 25, 23, 0.08);
  --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.15);
}

html.dark {
  --bg-elevated: rgb(11 25 55 / 0.78);
  --border-accent: rgb(30 60 140 / 0.40);
  --glass-bg: rgb(11 25 55 / 0.65);
  --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.25);
}

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
    background-image:
      linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}

@layer components {
  .fleet-dashboard-shell {
    --fleet-bg-primary: #f5f8ff;
    --fleet-bg-elevated: #ffffff;
    --fleet-glass-bg: rgb(255 255 255 / 0.82);
    --fleet-card-bg: rgb(255 255 255 / 0.72);
    --fleet-border-subtle: rgb(37 99 235 / 0.14);
    --fleet-border-accent: rgb(249 115 22 / 0.30);
    --fleet-text-primary: #172554;
    --fleet-text-secondary: #64748b;
    --fleet-accent-blue: #2563eb;
    --fleet-accent-blue-light: #2563eb;
    --fleet-accent-orange: #f97316;
    --fleet-accent-orange-light: #ea580c;
    --fleet-success: #059669;
    --fleet-danger: #dc2626;
    background:
      radial-gradient(ellipse at 20% 20%, rgb(37 99 235 / 0.10) 0%, transparent 56%),
      radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 54%),
      linear-gradient(180deg, #ffffff 0%, #f5f8ff 35%, #edf4ff 100%);
    color: var(--fleet-text-primary);
  }

  html.dark .fleet-dashboard-shell {
    --fleet-bg-primary: #0a0f1a;
    --fleet-bg-elevated: #111827;
    --fleet-glass-bg: rgb(15 25 45 / 0.66);
    --fleet-card-bg: rgb(30 58 95 / 0.28);
    --fleet-border-subtle: rgb(59 130 246 / 0.14);
    --fleet-text-primary: #e8edf5;
    --fleet-text-secondary: #8899b4;
    --fleet-accent-blue: #3b82f6;
    --fleet-accent-blue-light: #60a5fa;
    --fleet-accent-orange-light: #fb923c;
    --fleet-success: #10b981;
    --fleet-danger: #ef4444;
    background:
      radial-gradient(ellipse at 20% 20%, rgb(59 130 246 / 0.09) 0%, transparent 58%),
      radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 56%),
      linear-gradient(180deg, #0a0f1a 0%, #0d1728 46%, #08111f 100%);
  }

  .fleet-dashboard-shell * {
    scrollbar-width: thin;
    scrollbar-color: rgb(59 130 246 / 0.22) transparent;
  }

  .fleet-dashboard-shell *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .fleet-dashboard-shell *::-webkit-scrollbar-track {
    background: transparent;
  }

  .fleet-dashboard-shell *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(59 130 246 / 0.22);
  }

  .fleet-dashboard-shell .card,
  .fleet-dashboard-shell .glass-card {
    border-color: var(--fleet-border-subtle);
    background: var(--fleet-glass-bg);
    box-shadow: 0 18px 60px rgb(15 23 42 / 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    @apply rounded-xl border transition-colors;
  }

  .fleet-dashboard-shell .card:hover,
  .fleet-dashboard-shell .glass-card:hover {
    border-color: rgb(59 130 246 / 0.24);
    box-shadow: 0 18px 60px rgb(15 23 42 / 0.10), 0 0 20px rgb(59 130 246 / 0.10);
  }

  html.dark .fleet-dashboard-shell .card,
  html.dark .fleet-dashboard-shell .glass-card {
    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26);
  }

  html.dark .fleet-dashboard-shell .card:hover,
  html.dark .fleet-dashboard-shell .glass-card:hover {
    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26), 0 0 20px rgb(59 130 246 / 0.12);
  }

  .fleet-dashboard-shell .btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgb(59 130 246 / 0.30);
    @apply rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white hover:from-blue-400 hover:to-blue-600;
  }

  .fleet-dashboard-shell .btn-secondary {
    border-color: rgb(59 130 246 / 0.18);
    background: rgb(59 130 246 / 0.08);
    color: var(--fleet-text-primary);
    @apply rounded-lg hover:border-blue-400/40 hover:bg-blue-500/15 hover:text-white;
  }

  .fleet-dashboard-shell .input-field {
    border-color: rgb(59 130 246 / 0.14);
    background: rgb(59 130 246 / 0.07);
    color: var(--fleet-text-primary);
    @apply rounded-lg placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/20;
  }

  .fleet-dashboard-shell .progress-bar {
    height: 6px;
    background: rgb(59 130 246 / 0.12);
    @apply rounded-full;
  }

  .fleet-dashboard-shell .progress-fill.blue {
    @apply bg-gradient-to-r from-blue-500 to-blue-400;
  }

  .fleet-dashboard-shell .progress-fill.orange {
    @apply bg-gradient-to-r from-orange-500 to-orange-600;
  }

  .fleet-dashboard-shell .badge-blue {
    border: 1px solid rgb(59 130 246 / 0.30);
    background: rgb(59 130 246 / 0.15);
    color: var(--fleet-accent-blue-light);
  }

  .fleet-dashboard-shell .badge-amber {
    border: 1px solid rgb(249 115 22 / 0.30);
    background: rgb(249 115 22 / 0.15);
    color: var(--fleet-accent-orange-light);
  }

  .fleet-dashboard-shell .badge-green {
    border: 1px solid rgb(16 185 129 / 0.28);
    background: rgb(16 185 129 / 0.13);
    color: #047857;
  }

  .fleet-dashboard-shell .badge-red {
    border: 1px solid rgb(239 68 68 / 0.30);
    background: rgb(239 68 68 / 0.13);
    color: #dc2626;
  }

  .fleet-dashboard-shell .badge-gray {
    border: 1px solid rgb(148 163 184 / 0.20);
    background: rgb(148 163 184 / 0.10);
    color: #475569;
  }

  html.dark .fleet-dashboard-shell .badge-green {
    color: #6ee7b7;
  }

  html.dark .fleet-dashboard-shell .badge-red {
    color: #fca5a5;
  }

  html.dark .fleet-dashboard-shell .badge-gray {
    color: #cbd5e1;
  }

  .glass-card {
    border-color: var(--border-accent);
    background-color: var(--glass-bg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    @apply rounded-[1.75rem] border transition-colors;
  }

  html.dark .glass-card {
    border-color: rgb(30 60 140 / 0.40);
    background-color: rgb(11 25 55 / 0.65);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
  }

  .progress-bar {
    @apply h-2 w-full overflow-hidden rounded-full;
    background-color: rgb(231 229 228 / 0.5);
  }

  html.dark .progress-bar {
    background-color: rgb(30 60 140 / 0.3);
  }

  .progress-fill {
    @apply h-full rounded-full transition-all duration-500;
  }

  .progress-fill.blue {
    @apply bg-gradient-to-r from-blue-500 to-blue-400;
  }

  .progress-fill.orange {
    @apply bg-gradient-to-r from-orange-500 to-orange-400;
  }

  html.dark .progress-fill.blue {
    @apply bg-gradient-to-r from-blue-400 to-blue-300;
  }

  html.dark .progress-fill.orange {
    @apply bg-gradient-to-r from-orange-400 to-orange-300;
  }

  /* Pulse glow animation for live indicators */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 0 12px rgba(249, 115, 22, 0.6); }
  }

  .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .pulse-glow,
    .progress-fill {
      animation: none !important;
      transition: none !important;
    }
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-full bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-orange-500 dark:hover:bg-orange-400;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-full border border-stone-300 bg-white/85 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/20 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 rounded-full bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50;
  }

  .input-field {
    @apply w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-900 dark:bg-blue-950/50 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-orange-400;
  }

  .card {
    @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
    border-color: rgb(231 229 228 / 0.8);
    background-color: rgb(255 255 255 / 0.82);
  }

  html.dark .card {
    border-color: rgb(30 60 140 / 0.40);
    background-color: rgb(11 25 55 / 0.72);
  }

  .badge-green {
    @apply inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300;
  }

  .badge-blue {
    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950/40 dark:text-blue-300;
  }

  .badge-amber {
    @apply inline-flex items-center rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300;
  }

  .badge-red {
    @apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-950/40 dark:text-red-300;
  }

  .badge-gray {
    @apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-blue-950/40 dark:text-slate-300;
  }

  .badge-purple {
    @apply inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300;
  }

  .badge-indigo {
    @apply inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@layer utilities {
  .dark .bg-slate-50 {
    background-color: rgb(7 16 46);
  }

  .dark .bg-white {
    background-color: rgb(11 25 55);
  }

  .dark .bg-white\/90 {
    background-color: rgb(11 25 55 / 0.9);
  }

  .dark .border-slate-200,
  .dark .border-stone-200 {
    border-color: rgb(30 60 140 / 0.50);
  }

  .dark .text-slate-900 {
    color: rgb(241 245 249);
  }

  .dark .text-slate-700 {
    color: rgb(203 213 225);
  }

  .dark .text-slate-600,
  .dark .text-stone-500 {
    color: rgb(148 163 184);
  }

  .dark .text-slate-500,
  .dark .text-slate-400,
  .dark .text-stone-400 {
    color: rgb(100 116 139);
  }

  .dark .hover\:bg-slate-100:hover {
    background-color: rgb(20 42 90);
  }

  .dark .hover\:text-slate-900:hover {
    color: rgb(241 245 249);
  }
}