/* ============================================================
   FlightDeck — CSS Custom Properties (Design Tokens v2.0)
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --fd-bg-mesh: linear-gradient(160deg, #F0F4FB 0%, #F8F5FF 30%, #F0FAFF 60%, #F5F7FA 100%);
  --fd-bg-login: linear-gradient(135deg, #0B1D32 0%, #122A48 40%, #0F2B46 100%);

  /* --- Surfaces --- */
  --fd-surface-glass-bg: rgba(255, 255, 255, 0.65);
  --fd-surface-glass-border: rgba(255, 255, 255, 0.6);
  --fd-surface-glass-shadow: 0 4px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);

  --fd-surface-dark-bg: rgba(255, 255, 255, 0.07);
  --fd-surface-dark-border: rgba(255, 255, 255, 0.12);
  --fd-surface-dark-shadow: 0 32px 64px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);

  --fd-surface-header-bg: rgba(255, 255, 255, 0.75);
  --fd-surface-header-border: rgba(0, 0, 0, 0.04);

  --fd-surface-modal-bg: rgba(255, 255, 255, 0.92);

  /* --- Sidebar --- */
  --fd-sidebar-bg: #0B1D32;
  --fd-sidebar-width: 260px;
  --fd-sidebar-collapsed-width: 64px;
  --fd-sidebar-hover: rgba(255, 255, 255, 0.04);
  --fd-sidebar-active: rgba(41, 128, 185, 0.15);
  --fd-sidebar-active-border: #5DADE2;
  --fd-sidebar-text: rgba(255, 255, 255, 0.5);
  --fd-sidebar-text-hover: rgba(255, 255, 255, 0.85);
  --fd-sidebar-text-active: #FFFFFF;
  --fd-sidebar-group-label: rgba(255, 255, 255, 0.3);
  --fd-sidebar-divider: rgba(255, 255, 255, 0.05);

  /* --- Primary Blues --- */
  --fd-blue-600: #2980B9;
  --fd-blue-500: #3498DB;
  --fd-blue-400: #5DADE2;
  --fd-blue-100: #EBF5FB;
  --fd-blue-gradient: linear-gradient(135deg, #2980B9, #3498DB, #5DADE2);
  --fd-blue-glow: 0 8px 32px rgba(41, 128, 185, 0.35);

  /* --- Navy --- */
  --fd-navy-900: #0F2B46;
  --fd-navy-800: #1B3A5C;
  --fd-navy-700: #1E4D78;

  /* --- Semantic Colors --- */
  --fd-green-600: #27AE60;
  --fd-green-500: #2ECC71;
  --fd-green-100: rgba(39, 174, 96, 0.1);
  --fd-green-gradient: linear-gradient(135deg, #27AE60, #2ECC71);

  --fd-amber-500: #F39C12;
  --fd-amber-400: #F1C40F;
  --fd-amber-100: rgba(243, 156, 18, 0.1);
  --fd-amber-gradient: linear-gradient(135deg, #F39C12, #F1C40F);

  --fd-red-600: #E74C3C;
  --fd-red-500: #EC7063;
  --fd-red-100: rgba(231, 76, 60, 0.1);
  --fd-red-gradient: linear-gradient(135deg, #E74C3C, #EC7063);

  --fd-purple-500: #8E44AD;
  --fd-purple-400: #AF7AC5;
  --fd-purple-100: rgba(142, 68, 173, 0.1);
  --fd-purple-gradient: linear-gradient(135deg, #8E44AD, #AF7AC5);

  --fd-emerald-500: #10B981;
  --fd-emerald-400: #34D399;
  --fd-emerald-gradient: linear-gradient(135deg, #10B981, #34D399);

  --fd-teal-500: #17A2B8;
  --fd-teal-100: rgba(23, 162, 184, 0.1);
  --fd-teal-gradient: linear-gradient(135deg, #17A2B8, #4DD0E1);

  /* --- Neutrals --- */
  --fd-grey-900: #1A1A2E;
  --fd-grey-700: #4A4A68;
  --fd-grey-500: #7F8C9B;
  --fd-grey-300: #BDC3C7;
  --fd-grey-200: #D5D8DC;
  --fd-grey-100: #ECF0F1;
  --fd-grey-50: #F8F9FA;
  --fd-white: #FFFFFF;
  --fd-grey-border: rgba(0, 0, 0, 0.06);
  --fd-grey-divider: rgba(0, 0, 0, 0.04);
  --fd-grey-hover: rgba(41, 128, 185, 0.04);

  /* --- Border Radius --- */
  --fd-radius-xs: 4px;
  --fd-radius-sm: 8px;
  --fd-radius-md: 12px;
  --fd-radius-lg: 16px;
  --fd-radius-xl: 20px;
  --fd-radius-2xl: 28px;
  --fd-radius-full: 9999px;

  /* --- Shadows --- */
  --fd-shadow-glass: 0 4px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  --fd-shadow-glass-dark: 0 32px 64px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  --fd-shadow-hover: 0 8px 32px rgba(0,0,0,0.08);
  --fd-shadow-modal: 0 24px 64px rgba(0,0,0,0.15);
  --fd-shadow-btn-glow: 0 8px 32px rgba(41,128,185,0.35);
  --fd-shadow-focus: 0 0 0 4px rgba(41,128,185,0.1);
  --fd-shadow-focus-dark: 0 0 0 4px rgba(41,128,185,0.15);
  --fd-shadow-btn-danger-glow: 0 8px 24px rgba(231,76,60,0.25);

  /* --- Spacing --- */
  --fd-space-1: 4px;
  --fd-space-2: 8px;
  --fd-space-3: 12px;
  --fd-space-4: 16px;
  --fd-space-5: 20px;
  --fd-space-6: 24px;
  --fd-space-7: 28px;
  --fd-space-8: 32px;
  --fd-space-9: 36px;
  --fd-space-12: 48px;

  /* --- Layout --- */
  --fd-header-height: 68px;
  --fd-content-padding-v: 28px;
  --fd-content-padding-h: 36px;
}

/* ============================================================
   Dark Theme Token Overrides
   ============================================================ */
[data-theme="dark"] {
  /* Backgrounds */
  --fd-bg-mesh: linear-gradient(160deg, #0D1728 0%, #0F1E35 30%, #0B1A2E 60%, #0D1728 100%);

  /* Surfaces */
  --fd-surface-glass-bg:      rgba(255,255,255,0.04);
  --fd-surface-glass-border:  rgba(255,255,255,0.08);
  --fd-surface-glass-shadow:  0 4px 24px rgba(0,0,0,0.25);

  --fd-surface-header-bg:     rgba(10, 22, 40, 0.88);
  --fd-surface-header-border: rgba(255,255,255,0.06);
  --fd-surface-modal-bg:      #132030;

  /* Sidebar */
  --fd-sidebar-bg:    #07111C;
  --fd-sidebar-hover: rgba(255,255,255,0.05);

  /* Neutrals — inverted */
  --fd-grey-900: #E2E8F0;
  --fd-grey-800: #CBD5E1;
  --fd-grey-700: #94A3B8;
  --fd-grey-600: #64748B;
  --fd-grey-500: #475569;
  --fd-grey-400: #334155;
  --fd-grey-300: #2D3F53;
  --fd-grey-200: #1E2D3D;
  --fd-grey-100: #162030;
  --fd-grey-50:  #0E1B2B;

  --fd-grey-border:  rgba(255,255,255,0.07);
  --fd-grey-divider: rgba(255,255,255,0.04);
  --fd-grey-hover:   rgba(41,128,185,0.08);
}

/* ── Glass panels ── */
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .glass-card {
  background:   rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow:   0 4px 24px rgba(0,0,0,0.3);
}

/* ── Metric cards ── */
[data-theme="dark"] .fd-metric-card,
[data-theme="dark"] .glass-metric-card {
  background:   rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* ── Tables ── */
[data-theme="dark"] .fd-table thead th {
  background:          rgba(255,255,255,0.03);
  border-bottom-color: rgba(255,255,255,0.06);
  color: #64748B;
}
[data-theme="dark"] .fd-table tbody td {
  border-bottom-color: rgba(255,255,255,0.04);
  color: #94A3B8;
}
[data-theme="dark"] .fd-table tbody tr:hover td { background: rgba(255,255,255,0.03); }

/* ── Form inputs ── */
[data-theme="dark"] .fd-input,
[data-theme="dark"] .fd-select,
[data-theme="dark"] .fd-textarea {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #E2E8F0;
}
[data-theme="dark"] .fd-input:focus,
[data-theme="dark"] .fd-select:focus,
[data-theme="dark"] .fd-textarea:focus {
  background:   rgba(255,255,255,0.09);
  border-color: rgba(41,128,185,0.55);
}
[data-theme="dark"] .fd-input::placeholder,
[data-theme="dark"] .fd-textarea::placeholder { color: #334155; }

/* ── Header search ── */
[data-theme="dark"] .fd-header-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .fd-header-search input { color: #E2E8F0; }
[data-theme="dark"] .fd-header-search input::placeholder { color: #475569; }
[data-theme="dark"] .fd-header-search svg { stroke: #64748B; }

/* ── Buttons ── */
[data-theme="dark"] .btn-secondary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #CBD5E1; }
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .btn-ghost { color: #94A3B8; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .btn-icon { color: #94A3B8; }
[data-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,0.08); }

/* ── Modals ── */
[data-theme="dark"] .fd-modal { background: #132030; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .fd-modal-header { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .fd-modal-footer { border-top-color: rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); }

/* ── Filter bar ── */
[data-theme="dark"] .fd-filter-bar { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }

/* ── Kanban ── */
[data-theme="dark"] .fd-kanban-col  { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .fd-kanban-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }

/* ── Drawer ── */
[data-theme="dark"] .fd-drawer { background: #132030; border-color: rgba(255,255,255,0.08); }

/* ── Dropdown ── */
[data-theme="dark"] .fd-dropdown-menu     { background: #132030; border-color: rgba(255,255,255,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.45); }
[data-theme="dark"] .fd-dropdown-item     { color: #CBD5E1; }
[data-theme="dark"] .fd-dropdown-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .fd-dropdown-divider  { background: rgba(255,255,255,0.06); }

/* ── Pagination ── */
[data-theme="dark"] .fd-page-btn        { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #64748B; }
[data-theme="dark"] .fd-page-btn:hover  { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .fd-page-btn.active { background: #2980B9; color: white; border-color: #2980B9; }

/* ── Toasts ── */
[data-theme="dark"] .fd-toast { background: #1E3048; border-color: rgba(255,255,255,0.1); color: #E2E8F0; }

/* ── Alert cards (dashboard) ── */
[data-theme="dark"] .fd-alert-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }

/* ── Theme toggle button ── */
.fd-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(0,0,0,0.09);
  cursor: pointer; color: var(--fd-grey-500,#7F8C9B);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fd-theme-toggle:hover { background: rgba(0,0,0,0.05); }
.fd-theme-toggle svg   { width: 17px; height: 17px; display: block; }

[data-theme="dark"] .fd-theme-toggle { border-color: rgba(255,255,255,0.1); color: #94A3B8; }
[data-theme="dark"] .fd-theme-toggle:hover { background: rgba(255,255,255,0.08); }