/* Takei Fleet Console - design tokens (light mặc định, dark qua prefers-color-scheme hoặc data-theme).
   Nguồn: ui-ux-pro-max (Data-Dense Dashboard, density 8, motion 3) + màu thương hiệu hiện có của app WPF (#1976D2).
   Quy tắc: component chỉ dùng token semantic (--surface-*, --text-*, --status-*), không dùng hex trực tiếp.
   Bản WPF (theme sáng) của bộ token này nằm ở UiTokens.cs; đổi màu ở đây thì đổi luôn ở đó. */

:root {
  /* ---- Primitive: brand (xanh Takei, trùng PrimaryBrush trong WpfMainWindow.cs) ---- */
  --blue-50: #ecf5ff;
  --blue-100: #d6e9ff;
  --blue-200: #aed2fb;
  --blue-400: #5b9cf0;
  --blue-500: #2f86e6;
  --blue-600: #1976d2;
  --blue-700: #145fb0;
  --blue-800: #114c8c;

  /* ---- Primitive: neutral (xám ngả xanh, khớp sidebar navy của iKuai) ---- */
  --slate-0: #ffffff;
  --slate-25: #f7f9fc;
  --slate-50: #f1f4f9;
  --slate-100: #e4e9f1;
  --slate-200: #cbd5e3;
  --slate-400: #8392a8;
  --slate-500: #637381;
  --slate-600: #4a5768;
  --slate-700: #334155;
  --slate-800: #1f2937;
  --slate-850: #182131;
  --slate-900: #111827;
  --slate-950: #0b1220;

  /* ---- Semantic: bề mặt và chữ ---- */
  --surface-page: var(--slate-50);
  --surface-card: var(--slate-0);
  --surface-raised: var(--slate-25);
  --surface-sunken: var(--slate-100);
  --surface-hover: #e3efff;
  --surface-selected: var(--blue-50);
  --surface-nav: #0f1a2e;          /* sidebar luôn tối ở cả hai theme */
  --surface-nav-active: #1c2b45;
  --text-on-nav: #dbe4f0;
  --text-on-nav-muted: #8fa1ba;

  --text-primary: var(--slate-800);
  --text-secondary: #5d6b7a;         /* 5.5:1 trên trắng, 4.9:1 trên nền trang */
  --text-disabled: var(--slate-400);
  --text-on-brand: #ffffff;
  --text-link: var(--blue-700);

  --border-subtle: var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong: var(--slate-400);
  --focus-ring: var(--blue-500);

  --brand: var(--blue-600);          /* nút chính, header, tab đang chọn; trắng trên nền này 4.6:1 */
  --brand-hover: var(--blue-700);
  --brand-soft: var(--blue-50);
  --brand-soft-text: var(--blue-700);

  /* ---- Semantic: trạng thái thiết bị/WAN (luôn đi kèm icon + chữ, không chỉ màu) ---- */
  --status-online: #15803d;         --status-online-bg: #dcfce7;   /* Online / Tốt */
  --status-slow: #b45309;           --status-slow-bg: #fef3c7;     /* Chậm nhịp / Chú ý */
  --status-offline: #c81e1e;        --status-offline-bg: #fde2e2;  /* Mất kết nối */
  --status-offline-solid: #c81e1e;  /* nền badge đếm cảnh báo, chữ trắng */
  --status-wan-down: #c2410c;       --status-wan-down-bg: #ffedd5; /* WAN lỗi (router vẫn online) */
  --status-outdated: #6d28d9;       --status-outdated-bg: #ede9fe; /* Bản agent/firmware cũ */
  --status-maintenance: var(--slate-600); --status-maintenance-bg: var(--slate-100); /* Bảo trì / tắt giám sát */
  --status-info: #0369a1;           --status-info-bg: #e0f2fe;

  /* ---- Data viz ---- */
  --chart-download: var(--blue-600);   /* Tải xuống (như iKuai) */
  --chart-upload: #d9731a;             /* Tải lên */
  --chart-grid: var(--slate-100);
  --chart-axis: var(--slate-500);
  --chart-wan-1: #1976d2;
  --chart-wan-2: #0f8a7e;
  --chart-wan-3: #8b3fd9;
  --chart-wan-4: #d9731a;
  --chart-wan-5: #c0347a;
  --chart-wan-6: #5f8a12;
  --chart-threshold: var(--status-offline);

  /* ---- Typography ---- */
  --font-ui: "Be Vietnam Pro", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font-data: "Fira Code", "Cascadia Mono", Consolas, monospace; /* IP, MAC, số liệu cột */
  --text-xs: 0.75rem;    /* 12px: nhãn phụ, chú thích trục */
  --text-sm: 0.8125rem;  /* 13px: ô bảng dày */
  --text-md: 0.875rem;   /* 14px: chữ thân dashboard */
  --text-lg: 1rem;       /* 16px: tiêu đề thẻ */
  --text-xl: 1.25rem;    /* 20px: tiêu đề trang */
  --text-kpi: 1.75rem;   /* 28px: số KPI */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-label: 0.04em; /* nhãn viết hoa: TẢI XUỐNG, THIẾT BỊ */

  /* ---- Spacing (dashboard dày, bước 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Kích thước bố cục ---- */
  --sidebar-width: 232px;
  --sidebar-collapsed: 64px;
  --header-height: 56px;
  --kpi-min-width: 168px;
  --table-row-dense: 36px;
  --table-row-comfortable: 44px;
  --touch-target: 44px;
  --content-max: 1600px;

  /* ---- Bo góc, viền, đổ bóng ---- */
  --radius-xs: 4px;    /* ô nhỏ trong chart */
  --radius-sm: 6px;    /* input, nút */
  --radius-md: 10px;   /* thẻ */
  --radius-pill: 999px;/* pill trạng thái, filter chip */
  --border-width: 1px;
  --shadow-card: 0 1px 2px rgb(15 26 46 / 0.06), 0 1px 3px rgb(15 26 46 / 0.04);
  --shadow-popover: 0 8px 24px rgb(15 26 46 / 0.16);

  /* ---- Motion (tiết chế: dashboard cập nhật liên tục) ---- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Lớp chồng ---- */
  --z-sticky: 10;
  --z-nav: 20;
  --z-popover: 40;
  --z-toast: 50;

  /* ---- Breakpoint (tham chiếu cho JS; CSS dùng số trực tiếp trong @media) ---- */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: var(--slate-950);
    --surface-card: #121b2c;
    --surface-raised: var(--slate-850);
    --surface-sunken: #0e1626;
    --surface-hover: #1a2840;
    --surface-selected: #16294a;
    --surface-nav: #080e1a;
    --surface-nav-active: #172440;
    --text-primary: #e6edf6;
    --text-secondary: #9aabc2;
    --text-disabled: #64748b;
    --text-link: var(--blue-400);
    --border-subtle: #1c2638;
    --border-default: #2a3850;
    --border-strong: #46566e;
    --focus-ring: var(--blue-400);
    --brand: #2a6fc9;                  /* chữ trắng 5.0:1 */
    --brand-hover: #3b80dc;
    --brand-soft: #142a4a;
    --brand-soft-text: #9cc6fa;
    --status-online: #4ade80;   --status-online-bg: rgb(74 222 128 / 0.14);
    --status-slow: #fbbf24;     --status-slow-bg: rgb(251 191 36 / 0.14);
    --status-offline: #f87171;  --status-offline-bg: rgb(248 113 113 / 0.15); --status-offline-solid: #dc2626;
    --status-wan-down: #fb923c; --status-wan-down-bg: rgb(251 146 60 / 0.15);
    --status-outdated: #c4b5fd; --status-outdated-bg: rgb(196 181 253 / 0.14);
    --status-maintenance: #a3b1c4; --status-maintenance-bg: rgb(163 177 196 / 0.12);
    --status-info: #7dd3fc;     --status-info-bg: rgb(125 211 252 / 0.13);
    --chart-download: #4f9cf2;
    --chart-upload: #f59e4b;
    --chart-grid: #1c2638;
    --chart-axis: #8696ad;
    --chart-wan-1: #4f9cf2;
    --chart-wan-2: #2dd4bf;
    --chart-wan-3: #b48cf5;
    --chart-wan-4: #f59e4b;
    --chart-wan-5: #f472b6;
    --chart-wan-6: #a3d14a;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-page: var(--slate-950);
  --surface-card: #121b2c;
  --surface-raised: var(--slate-850);
  --surface-sunken: #0e1626;
  --surface-hover: #1a2840;
  --surface-selected: #16294a;
  --surface-nav: #080e1a;
  --surface-nav-active: #172440;
  --text-primary: #e6edf6;
  --text-secondary: #9aabc2;
  --text-disabled: #64748b;
  --text-link: var(--blue-400);
  --border-subtle: #1c2638;
  --border-default: #2a3850;
  --border-strong: #46566e;
  --focus-ring: var(--blue-400);
  --brand: #2a6fc9;                  /* chữ trắng 5.0:1 */
  --brand-hover: #3b80dc;
  --brand-soft: #142a4a;
  --brand-soft-text: #9cc6fa;
  --status-online: #4ade80;   --status-online-bg: rgb(74 222 128 / 0.14);
  --status-slow: #fbbf24;     --status-slow-bg: rgb(251 191 36 / 0.14);
  --status-offline: #f87171;  --status-offline-bg: rgb(248 113 113 / 0.15); --status-offline-solid: #dc2626;
  --status-wan-down: #fb923c; --status-wan-down-bg: rgb(251 146 60 / 0.15);
  --status-outdated: #c4b5fd; --status-outdated-bg: rgb(196 181 253 / 0.14);
  --status-maintenance: #a3b1c4; --status-maintenance-bg: rgb(163 177 196 / 0.12);
  --status-info: #7dd3fc;     --status-info-bg: rgb(125 211 252 / 0.13);
  --chart-download: #4f9cf2;
  --chart-upload: #f59e4b;
  --chart-grid: #1c2638;
  --chart-axis: #8696ad;
  --chart-wan-1: #4f9cf2;
  --chart-wan-2: #2dd4bf;
  --chart-wan-3: #b48cf5;
  --chart-wan-4: #f59e4b;
  --chart-wan-5: #f472b6;
  --chart-wan-6: #a3d14a;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}