/* ==========================================================================
   DeliTMS THEME TOKENS
   ========================================================================== */

/* Token dùng chung, không phụ thuộc mode */
:root {
  --deli-signature: #ff6868;
  --deli-signature-12: rgba(255,104,104,.12);
  --deli-signature-24: rgba(255,104,104,.24);
  --deli-signature-42: rgba(255,104,104,.42);
  --deli-signature-shadow: rgba(255,104,104,.14);

  --green: #1bd678;
  --yellow: #efb456;
  --orange: #ff9d2e;
  --red: #ff6868;
  --cyan: #00d1d1;
  --info: #38bdf8;
  --gray: #64748b;

  --ok: var(--green);
  --warn: var(--yellow);
  --err: var(--red);

  --bs-dropdown-zindex: 9999;
  --navH: 64px;
  --pagePad: 24px;

  --deli-navbar-active-bg: linear-gradient(135deg, var(--deli-signature-24), var(--deli-signature-42));
  --deli-navbar-active-border: var(--deli-signature-42);
  --deli-navbar-active-shadow: var(--deli-signature-shadow);
}

/* =========================
   LIGHT MODE
   ========================= */

html[data-theme-resolved="light"] {
  color-scheme: light;

  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 100, 116, 139;

  --bg: #f5f9fb;
  --card: #ffffff;
  --border: #d8e0ec;
  --muted: #64748b;
  --text-muted: #64748b;

  --text-main: #0f172a;
  --text-soft: #334155;
  --text-contrast: #ffffff;

  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --surface-4: rgba(15, 23, 42, 0.04);
  --surface-5: rgba(15, 23, 42, 0.06);
  --surface-6: rgba(15, 23, 42, 0.08);

  --overlay-bg: rgba(255, 255, 255, 0.82);
  --overlay-track: #e2e8f0;
  --overlay-thumb: #94a3b8;

  --deli-dropdown-bg: rgba(255, 255, 255, 0.99);
  --deli-dropdown-border: rgba(100, 116, 139, 0.28);

  --deli-offcanvas-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(241,245,249,0.995));
  --deli-offcanvas-border: rgba(100, 116, 139, 0.22);

  --deli-mobile-nav-color: #0f172a;
  --deli-mobile-nav-bg: rgba(15, 23, 42, 0.03);
  --deli-mobile-nav-bg-hover: rgba(15, 23, 42, 0.07);

  --deli-mobile-user-card-bg: rgba(15, 23, 42, 0.04);
  --deli-mobile-user-card-border: rgba(100, 116, 139, 0.16);

  --navbar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --navbar-text: #1e293b;

  --navbar-link: #334155;
  --navbar-link-hover: #0f172a;
  --navbar-link-active: #0f172a;
  --navbar-shadow: 0 1px 0 rgba(148, 163, 184, 0.20);

  --dropdown-item-text: #334155;
  --dropdown-item-hover-bg: #eef4fb;
  --dropdown-item-hover-text: #0f172a;

  --submenu-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

  --auth-wrap-glow-1: rgba(59, 130, 246, 0.08);
  --auth-wrap-glow-2: rgba(16, 185, 129, 0.06);

  --auth-card-bg: linear-gradient(145deg, #ffffff, #f8fafc);
  --auth-card-border: rgba(148, 163, 184, 0.24);
  --auth-card-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);

  --auth-title: #0f172a;
  --auth-subtle: #64748b;
  --auth-meta: #64748b;

  --panel-bg: rgba(255,255,255,0.88);
  --panel-border: rgba(148, 163, 184, 0.24);

  --control-bg: #ffffff;
  --control-border: rgba(148, 163, 184, 0.45);
  --control-text: #0f172a;
  --control-placeholder: #64748b;

  --item-bg: #ffffff;
  --item-bg-hover: #e8eef6;
  --item-bg-active: rgba(56, 189, 248, 0.12);
  --item-border: rgba(148, 163, 184, 0.24);
  --item-border-active: rgba(56, 189, 248, 0.35);

  --editor-toolbar-bg: rgba(15, 23, 42, 0.03);
  --editor-dropdown-bg: #ffffff;
  --editor-icon: #334155;

  --avatar-bg: #e2e8f0;
  --avatar-border: rgba(15, 23, 42, 0.10);
  --avatar-text: #0f172a;
  --focus-ring: rgba(15, 23, 42, 0.14);
  --btn-outline-adaptive-color: #0f172a;
  --btn-outline-adaptive-border: rgba(15, 23, 42, 0.18);
  --btn-outline-adaptive-hover-bg: rgba(15, 23, 42, 0.06);
  --link-soft: #2563eb;
  --link-soft-hover: #1d4ed8;
  --footer-bg: #e8eef6;
  --footer-border: rgba(100, 116, 139, 0.28);
  --footer-text: #475569;
  --danger-soft-bg: rgba(239, 68, 68, 0.08);
  --danger-soft-border: rgba(239, 68, 68, 0.22);
  --danger-soft-text: #b91c1c;
  --kpi-card-glow: rgba(59, 130, 246, 0.12);
  --health-good-bg: rgba(34, 197, 94, 0.12);
  --health-good-text: #15803d;

  --health-watch-bg: rgba(234, 179, 8, 0.14);
  --health-watch-text: #a16207;

  --health-bad-bg: rgba(248, 113, 113, 0.14);
  --health-bad-text: #b91c1c;


  --sev-1-bg: rgba(250, 204, 21, 0.16);
  --sev-1-text: #a16207;
  --sev-1-border: rgba(202, 138, 4, 0.45);
  --sev-1-accent: #ca8a04;

  --sev-2-bg: rgba(249, 115, 22, 0.14);
  --sev-2-text: #c2410c;
  --sev-2-border: rgba(249, 115, 22, 0.45);
  --sev-2-accent: #ea580c;

  --sev-3-bg: rgba(220, 38, 38, 0.14);
  --sev-3-text: #b91c1c;
  --sev-3-border: rgba(185, 28, 28, 0.45);
  --sev-3-accent: #b91c1c;

  --monitor-summary-glow: rgba(56, 189, 248, 0.08);
  --summary-on-mission: #ea580c;
  --summary-no_mission: #16a34a;
  --summary-general: #0284c7;

  --alert-pill-bg: var(--surface-2);
  --alert-pill-border: var(--item-border);
  --alert-pill-text: var(--text-soft);

  --alert-stop-bg: rgba(245, 158, 11, 0.14);
  --alert-stop-border: #d97706;
  --alert-stop-text: #9a3412;

  --alert-offroute-bg: rgba(249, 115, 22, 0.14);
  --alert-offroute-border: #ea580c;
  --alert-offroute-text: #9a3412;

  --alert-forbidden-bg: rgba(239, 68, 68, 0.14);
  --alert-forbidden-border: #dc2626;
  --alert-forbidden-text: #b91c1c;

  --alert-door-bg: rgba(251, 146, 60, 0.14);
  --alert-door-border: #f97316;
  --alert-door-text: #9a3412;

  --alert-nomission-bg: rgba(34, 197, 94, 0.14);
  --alert-nomission-border: #16a34a;
  --alert-nomission-text: #166534;

  --alert-gps-bg: rgba(56, 189, 248, 0.14);
  --alert-gps-border: #0284c7;
  --alert-gps-text: #075985;

  --alert-gprs-bg: rgba(59, 130, 246, 0.14);
  --alert-gprs-border: #2563eb;
  --alert-gprs-text: #1d4ed8;

  --status-open: #0284c7;
  --status-acked: #ca8a04;
  --status-processing: #ea580c;
  --status-closed: #16a34a;

  --toast-stop-bg: rgba(245, 158, 11, 0.95);
  --toast-stop-text: #fff7ed;
  --toast-offroute-bg: rgba(249, 115, 22, 0.95);
  --toast-offroute-text: #fff7ed;
  --toast-forbidden-bg: rgba(220, 38, 38, 0.95);
  --toast-forbidden-text: #fef2f2;
  --toast-door-bg: rgba(251, 146, 60, 0.95);
  --toast-door-text: #fff7ed;
  --toast-nomission-bg: rgba(22, 163, 74, 0.95);
  --toast-nomission-text: #f0fdf4;
  --toast-gps-bg: rgba(2, 132, 199, 0.95);
  --toast-gps-text: #f0f9ff;
  --toast-gprs-bg: rgba(37, 99, 235, 0.95);
  --toast-gprs-text: #eff6ff;
  --toast-default-bg: rgba(15, 23, 42, 0.92);
  --toast-default-text: #e5e7eb;

  --dash-col-head-bg: rgba(255, 255, 255, 0.92);
  --dash-col-head-border: rgba(148, 163, 184, 0.18);

}

/* =========================
   DARK MODE
   ========================= */
html[data-theme-resolved="dark"] {
  color-scheme: dark;

  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 148, 163, 184;

  --bg: #0e1420;
  --card: #151a26;
  --border: #223047;
  --muted: #94a3b8;
  --text-muted: #94a3b8;

  --text-main: #e2e8f0;
  --text-soft: #cbd5e1;
  --text-contrast: #ffffff;

  --surface-1: #0f1626;
  --surface-2: #111827;
  --surface-3: #141a28;
  --surface-4: rgba(255, 255, 255, 0.04);
  --surface-5: rgba(255, 255, 255, 0.06);
  --surface-6: rgba(255, 255, 255, 0.08);

  --overlay-bg: rgba(21, 26, 38, 0.7);
  --overlay-track: #151a26;
  --overlay-thumb: #333333;

  --deli-dropdown-bg: rgba(7, 20, 44, 0.98);
  --deli-dropdown-border: rgba(56, 189, 248, 0.18);

  --deli-offcanvas-bg: linear-gradient(180deg, rgba(7, 18, 40, 0.98), rgba(5, 14, 32, 0.995));
  --deli-offcanvas-border: rgba(56, 189, 248, 0.18);

  --deli-mobile-nav-color: rgba(226, 232, 240, 0.92);
  --deli-mobile-nav-bg: rgba(255, 255, 255, 0.03);
  --deli-mobile-nav-bg-hover: rgba(255, 255, 255, 0.06);

  --deli-mobile-user-card-bg: rgba(255, 255, 255, 0.04);
  --deli-mobile-user-card-border: rgba(148, 163, 184, 0.15);

  --navbar-bg: linear-gradient(180deg, #0f1627 0%, #0c1220 100%);
  --navbar-text: #ffffff;
  --navbar-link: #e2e8f0;
  --navbar-link-hover: #ffffff;
  --navbar-link-active: #ffffff;
  --navbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);

  --dropdown-item-text: #e2e8f0;
  --dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);
  --dropdown-item-hover-text: #ffffff;

  --submenu-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  --auth-wrap-glow-1: rgba(96, 165, 250, 0.08);
  --auth-wrap-glow-2: rgba(27, 214, 120, 0.06);

  --auth-card-bg: linear-gradient(145deg, #111827, #0f172a);
  --auth-card-border: rgba(96, 165, 250, 0.35);
  --auth-card-shadow: 0 0 25px rgba(96, 165, 250, 0.15);

  --auth-title: #ffffff;
  --auth-subtle: #9fb0c8;
  --auth-meta: #9fb0c8;

  --panel-bg: rgba(30, 41, 59, 0.5);
  --panel-border: rgba(148, 163, 184, 0.2);

  --control-bg: rgba(255,255,255,.02);
  --control-border: rgba(255,255,255,.14);
  --control-text: #e2e8f0;
  --control-placeholder: #94a3b8;

  --item-bg: #0f1626;
  --item-bg-hover: rgba(255,255,255,.08);
  --item-bg-active: rgba(56, 189, 248, 0.12);
  --item-border: rgba(255,255,255,.08);
  --item-border-active: rgba(56, 189, 248, 0.35);

  --editor-toolbar-bg: rgba(255, 255, 255, 0.05);
  --editor-dropdown-bg: #1a2234;
  --editor-icon: #e2e8f0;

  --avatar-bg: #1e293b;
  --avatar-border: rgba(255,255,255,.10);
  --avatar-text: #e2e8f0;

  --focus-ring: rgba(255, 255, 255, 0.14);
  --btn-outline-adaptive-color: #ffffff;
  --btn-outline-adaptive-border: rgba(255, 255, 255, 0.18);
  --btn-outline-adaptive-hover-bg: rgba(255, 255, 255, 0.06);
  --link-soft: #9ad1ff;
  --link-soft-hover: #c2e4ff;
  --footer-bg: rgba(255, 255, 255, 0.02);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-text: #94a3b8;
  --danger-soft-bg: rgba(255, 104, 104, 0.08);
  --danger-soft-border: rgba(255, 104, 104, 0.28);
  --danger-soft-text: #ffd1d1;
  --kpi-card-glow: rgba(56, 189, 248, 0.12);
  --health-good-bg: rgba(34, 197, 94, 0.10);
  --health-good-text: #4ade80;

  --health-watch-bg: rgba(234, 179, 8, 0.08);
  --health-watch-text: #facc15;

  --health-bad-bg: rgba(248, 113, 113, 0.10);
  --health-bad-text: #fca5a5;


  --sev-1-bg: rgba(250, 204, 21, 0.12);
  --sev-1-text: #facc15;
  --sev-1-border: rgba(250, 204, 21, 0.44);
  --sev-1-accent: #facc15;

  --sev-2-bg: rgba(249, 115, 22, 0.11);
  --sev-2-text: #fdba74;
  --sev-2-border: rgba(249, 115, 22, 0.70);
  --sev-2-accent: #f97316;

  --sev-3-bg: rgba(185, 28, 28, 0.12);
  --sev-3-text: #fecaca;
  --sev-3-border: rgba(185, 28, 28, 0.80);
  --sev-3-accent: #b91c1c;

  --monitor-summary-glow: rgba(56, 189, 248, 0.08);
  --summary-on-mission: #f97316;
  --summary-no_mission: #22c55e;
  --summary-general: #38bdf8;

  --alert-pill-bg: rgba(15, 23, 42, 0.9);
  --alert-pill-border: rgba(148, 163, 184, 0.4);
  --alert-pill-text: #e5e7eb;

  --alert-stop-bg: rgba(245, 158, 11, 0.12);
  --alert-stop-border: #f59e0b;
  --alert-stop-text: #fed7aa;

  --alert-offroute-bg: rgba(248, 113, 113, 0.12);
  --alert-offroute-border: #f97316;
  --alert-offroute-text: #fed7aa;

  --alert-forbidden-bg: rgba(239, 68, 68, 0.12);
  --alert-forbidden-border: #ef4444;
  --alert-forbidden-text: #fecaca;

  --alert-door-bg: rgba(251, 146, 60, 0.12);
  --alert-door-border: #fb923c;
  --alert-door-text: #fed7aa;

  --alert-nomission-bg: rgba(22, 163, 74, 0.12);
  --alert-nomission-border: #22c55e;
  --alert-nomission-text: #bbf7d0;

  --alert-gps-bg: rgba(56, 189, 248, 0.12);
  --alert-gps-border: #38bdf8;
  --alert-gps-text: #bae6fd;

  --alert-gprs-bg: rgba(59, 130, 246, 0.12);
  --alert-gprs-border: #2563eb;
  --alert-gprs-text: #bfdbfe;

  --status-open: #38bdf8;
  --status-acked: #eab308;
  --status-processing: #f97316;
  --status-closed: #22c55e;

  --toast-stop-bg: rgba(245, 158, 11, 0.92);
  --toast-stop-text: var(--surface-2);
  --toast-offroute-bg: rgba(248, 113, 113, 0.95);
  --toast-offroute-text: var(--surface-2);
  --toast-forbidden-bg: rgba(239, 68, 68, 0.95);
  --toast-forbidden-text: #fef2f2;
  --toast-door-bg: rgba(251, 146, 60, 0.95);
  --toast-door-text: var(--surface-2);
  --toast-nomission-bg: rgba(22, 163, 74, 0.95);
  --toast-nomission-text: #ffffff;
  --toast-gps-bg: rgba(56, 189, 248, 0.95);
  --toast-gps-text: #0b1120;
  --toast-gprs-bg: rgba(59, 130, 246, 0.95);
  --toast-gprs-text: #ffffff;
  --toast-default-bg: rgba(15, 23, 42, 0.95);
  --toast-default-text: #e5e7eb;

  --dash-col-head-bg: rgba(15, 23, 42, 0.92);
  --dash-col-head-border: rgba(148, 163, 184, 0.12);
}

/* base */
body {
  background: var(--bg);
  color: var(--text-main);
}