/* CargoApex Enterprise Logistics Design System Enhancements */
:root {
  --bg-canvas: #080c14;
  --bg-surface: #0f172a;
  --bg-sidebar: #0d1322;
  --bg-elevated: #1e293b;
  --border-subtle: #1e293b;
  --border-card: rgba(255, 255, 255, 0.08);
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --brand-emerald: #10b981;
  --brand-emerald-glow: rgba(16, 185, 129, 0.25);
  --accent-cyan: #06b6d4;
  --accent-indigo: #6366f1;
  --warning-amber: #f59e0b;
  --danger-rose: #f43f5e;
}

/* MILKY-ISH WHITE THEME PALETTE */
[data-theme="milky"], .theme-milky {
  --bg-canvas: #f6f5f0;
  --bg-surface: #ffffff;
  --bg-sidebar: #fcfbfa;
  --bg-elevated: #f1f0ea;
  --border-subtle: #e4e2d8;
  --border-card: #e4e2d8;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --brand-emerald: #059669;
  --brand-emerald-glow: rgba(5, 150, 105, 0.15);
  --accent-cyan: #0891b2;
  --accent-indigo: #4f46e5;
  --warning-amber: #d97706;
  --danger-rose: #e11d48;
}

body {
  background-color: var(--bg-canvas) !important;
  color: var(--text-main) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* Smooth theme transition disabled on body to eliminate flashlight reload blink */
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="milky"] .glass-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e4e2d8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.glass-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="milky"] .glass-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf9f5 100%);
  border: 1px solid #e4e2d8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.glass-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5), 0 0 15px -3px rgba(16, 185, 129, 0.1);
}

[data-theme="milky"] .glass-card:hover {
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.07), 0 0 12px -2px rgba(5, 150, 105, 0.15);
}

/* Glowing Accent Highlights */
.glow-emerald {
  box-shadow: 0 0 20px -3px rgba(16, 185, 129, 0.2);
}

.glow-amber {
  box-shadow: 0 0 20px -3px rgba(245, 158, 11, 0.2);
}

.glow-rose {
  box-shadow: 0 0 20px -3px rgba(244, 63, 94, 0.2);
}

/* Badges & Pulsing Radar Dots */
.badge-radar-safe {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  background-color: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="milky"] .badge-radar-safe {
  background-color: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.badge-radar-warning {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="milky"] .badge-radar-warning {
  background-color: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.badge-radar-danger {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  background-color: rgba(244, 63, 94, 0.2);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

[data-theme="milky"] .badge-radar-danger {
  background-color: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Table Enhancements */
table {
  border-collapse: separate;
  border-spacing: 0;
}
th {
  letter-spacing: 0.05em;
}
tr:hover td {
  background-color: rgba(30, 41, 59, 0.35);
}

[data-theme="milky"] tr:hover td {
  background-color: #f4f3ed !important;
}

/* ========================================================
   COMPREHENSIVE MILKY-WHITE THEME OVERRIDES
   Transforms Tailwind Dark/Navy/Grey (Kijivu) to Milky-White Palette
   ======================================================== */
[data-theme="milky"] html,
html[data-theme="milky"],
[data-theme="milky"] body,
body[data-theme="milky"],
.theme-milky {
  background-color: #f6f5f0 !important;
  color: #0f172a !important;
}

[data-theme="milky"] main {
  background-color: #f6f5f0 !important;
}

[data-theme="milky"] .bg-slate-950,
[data-theme="milky"] .bg-slate-950\/40,
[data-theme="milky"] .bg-slate-950\/50,
[data-theme="milky"] .bg-slate-950\/60,
[data-theme="milky"] .bg-slate-950\/80,
[data-theme="milky"] .bg-slate-950\/90 {
  background-color: #f6f5f0 !important;
}

[data-theme="milky"] aside,
[data-theme="milky"] .bg-slate-900,
[data-theme="milky"] .bg-slate-900\/40,
[data-theme="milky"] .bg-slate-900\/50,
[data-theme="milky"] .bg-slate-900\/60,
[data-theme="milky"] .bg-slate-900\/80,
[data-theme="milky"] .bg-slate-900\/90 {
  background-color: #ffffff !important;
}

[data-theme="milky"] header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e4e2d8 !important;
}

[data-theme="milky"] .bg-slate-800,
[data-theme="milky"] .bg-slate-800\/60,
[data-theme="milky"] .bg-slate-800\/50,
[data-theme="milky"] .bg-slate-800\/40,
[data-theme="milky"] .bg-slate-800\/30,
[data-theme="milky"] .bg-slate-800\/20,
[data-theme="milky"] .bg-slate-700,
[data-theme="milky"] .bg-slate-700\/50 {
  background-color: #edebe2 !important;
}

[data-theme="milky"] .border-slate-800,
[data-theme="milky"] .border-slate-800\/80,
[data-theme="milky"] .border-slate-800\/60,
[data-theme="milky"] .border-slate-700,
[data-theme="milky"] .border-slate-700\/80,
[data-theme="milky"] .border-slate-600 {
  border-color: #e4e2d8 !important;
}

[data-theme="milky"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
[data-theme="milky"] .divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: #edebe2 !important;
}

/* Text Colors */
[data-theme="milky"] .text-white,
[data-theme="milky"] .text-slate-100 {
  color: #0f172a !important;
}

[data-theme="milky"] .text-slate-200,
[data-theme="milky"] .text-slate-300 {
  color: #334155 !important;
}

[data-theme="milky"] .text-slate-400 {
  color: #64748b !important;
}

/* Card surfaces & panels */
[data-theme="milky"] .rounded-xl,
[data-theme="milky"] .rounded-2xl {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

[data-theme="milky"] input[type="text"],
[data-theme="milky"] input[type="search"],
[data-theme="milky"] input[type="email"],
[data-theme="milky"] input[type="password"],
[data-theme="milky"] input[type="number"],
[data-theme="milky"] input[type="date"],
[data-theme="milky"] textarea,
[data-theme="milky"] select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="milky"] input::placeholder,
[data-theme="milky"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* Tables */
[data-theme="milky"] thead tr {
  background-color: #f1f0ea !important;
  color: #475569 !important;
}

[data-theme="milky"] tbody tr {
  background-color: #ffffff !important;
}

[data-theme="milky"] tbody tr:hover td {
  background-color: #f6f5f0 !important;
}

[data-theme="milky"] td {
  color: #0f172a !important;
  border-color: #edebe2 !important;
}

[data-theme="milky"] .hover\:bg-slate-800\/60:hover,
[data-theme="milky"] .hover\:bg-slate-800:hover,
[data-theme="milky"] .hover\:bg-slate-700:hover {
  background-color: #e6e4da !important;
}

/* ========================================================
   HIGH CONTRAST & READABILITY ENHANCEMENTS FOR MILKY WHITE
   Eliminates eye-straining yellow/light-amber on white,
   mapping to deep readable warm amber/bronze (WCAG AAA > 7:1)
   ======================================================== */
[data-theme="milky"] .text-amber-400,
[data-theme="milky"] .text-amber-300,
[data-theme="milky"] .text-amber-200,
[data-theme="milky"] .text-yellow-400,
[data-theme="milky"] .text-yellow-300,
[data-theme="milky"] .text-yellow-500 {
  color: #92400e !important;
  font-weight: 600 !important;
}

[data-theme="milky"] .bg-amber-500\/10,
[data-theme="milky"] .bg-amber-500\/15,
[data-theme="milky"] .bg-amber-500\/20,
[data-theme="milky"] .bg-amber-500\/30,
[data-theme="milky"] .bg-amber-400\/10,
[data-theme="milky"] .bg-amber-400\/20 {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

[data-theme="milky"] .text-emerald-400,
[data-theme="milky"] .text-emerald-300 {
  color: #047857 !important;
  font-weight: 600 !important;
}

[data-theme="milky"] .bg-emerald-500\/10,
[data-theme="milky"] .bg-emerald-500\/15,
[data-theme="milky"] .bg-emerald-500\/20,
[data-theme="milky"] .bg-emerald-500\/30 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

[data-theme="milky"] .text-sky-400,
[data-theme="milky"] .text-sky-300,
[data-theme="milky"] .text-cyan-400 {
  color: #0369a1 !important;
  font-weight: 600 !important;
}

[data-theme="milky"] .bg-sky-500\/10,
[data-theme="milky"] .bg-sky-500\/15,
[data-theme="milky"] .bg-sky-500\/20,
[data-theme="milky"] .bg-sky-500\/30 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

[data-theme="milky"] .text-rose-400,
[data-theme="milky"] .text-rose-300,
[data-theme="milky"] .text-red-400 {
  color: #be123c !important;
  font-weight: 600 !important;
}

[data-theme="milky"] .bg-rose-500\/10,
[data-theme="milky"] .bg-rose-500\/15,
[data-theme="milky"] .bg-rose-500\/20,
[data-theme="milky"] .bg-rose-500\/30 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

[data-theme="milky"] .text-purple-400,
[data-theme="milky"] .text-indigo-400 {
  color: #4338ca !important;
  font-weight: 600 !important;
}

[data-theme="milky"] .bg-purple-500\/10,
[data-theme="milky"] .bg-indigo-500\/10 {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

/* Modals & Dialogs in Milky White */
[data-theme="milky"] .modal-container,
[data-theme="milky"] .modal-content,
[data-theme="milky"] [role="dialog"],
[data-theme="milky"] .fixed.inset-0 .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e4e2d8 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}