/* Design tokens — Fun Agency Booking CRM
 *
 * Sinh từ ui-ux-pro-max: style "Data-Dense Dashboard", bảng màu
 * #2563EB primary · #F97316 CTA · #F8FAFC nền · #1E293B chữ.
 *
 * VÌ SAO CÓ FILE NÀY: audit đếm được 642 lần gõ cứng mã màu trên 137 mã riêng
 * biệt. Đó đúng anti-pattern "raw hex in components" — đổi một màu phải sửa
 * hàng chục chỗ, và không ai biết #64748b với #667085 khác nhau có chủ đích hay
 * do gõ nhầm. Một bộ token, một chỗ sửa.
 *
 * App có HAI NỀN: vỏ sáng (trang Jinja cũ) và bảng tối (trang mới). Nên token
 * chia hai lớp: --c-* dùng chung, --d-* riêng cho vùng tối.
 */

:root {
  /* ---- thương hiệu ---- */
  --c-primary:      #1d4ed8;
  --c-primary-weak: #eff6ff;
  --c-primary-2:    #3b82f6;
  --c-cta:          #f97316;   /* cam: chỉ dùng cho hành động chính, đừng rải */

  /* ---- ngữ nghĩa: KHÔNG dùng màu suông, luôn kèm chữ/biểu tượng ---- */
  --c-ok:    #157c3b;  --c-ok-bg:   #ecfdf5;
  --c-warn:  #b45309;  --c-warn-bg: #fffbeb;
  --c-bad:   #dc2626;  --c-bad-bg:  #fef2f2;
  --c-info:  #0ea5e9;

  /* ---- vỏ sáng ---- */
  --c-bg:       #f8fafc;
  --c-surface:  #ffffff;
  --c-surface2: #f1f5f9;
  --c-border:   #e2e8f0;
  --c-text:     #1e293b;   /* 4.5:1 trên nền trắng */
  --c-muted:    #475569;   /* nâng từ #667085 cho đủ 4.5:1 */
  --c-faint:    #64748b;   /* chỉ cho chữ >=14px hoặc nhãn phụ */

  /* ---- vùng tối (bảng dữ liệu) ---- */
  --d-bg:       #0f1115;
  --d-surface:  #161a24;
  --d-surface2: #1a1f2b;
  --d-row:      #141824;
  --d-border:   #232838;
  --d-line:     #1e2331;
  --d-text:     #e6e9ef;   /* 12.6:1 trên #0f1115 */
  --d-muted:    #a3adc2;   /* nâng từ #8b93a7 cho đủ 4.5:1 */
  --d-faint:    #7c8598;   /* chỉ nhãn phụ, không dùng cho chữ chính */

  /* ---- nhấn trên nền tối ---- */
  --d-ok:   #4ade80;
  --d-warn: #fbbf24;
  --d-bad:  #f87171;
  --d-info: #7dd3fc;
  --d-alt:  #c4b5fd;

  /* ---- nhịp 4/8 ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- bo góc, đổ bóng: một thang, không random ---- */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-2: 0 4px 12px rgba(16,24,40,.10);
  --sh-3: 0 18px 50px rgba(15,23,42,.30);

  /* ---- chuyển động: 150-300ms theo checklist ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease-out: cubic-bezier(.2,.8,.3,1);

  /* ---- lớp z: một thang, không tự chế ---- */
  --z-nav: 100; --z-sticky: 200; --z-widget: 800; --z-modal: 900;

  /* ---- chữ ---- */

  /* ---- token bổ sung khi gộp 137 mã màu rời ---- */
  --c-bad-2: #ef4444;
  --c-bad-bg-dk: #7f1d1d;
  --c-bad-dk: #b91c1c;
  --c-bad-dk2: #c0392b;
  --c-ok-2: #22c55e;
  --c-ok-bg-dk: #14532d;
  --c-ok-dk: #047857;
  --c-primary-bd: #bfdbfe;
  --c-primary-dk: #1d4ed8;
  --c-primary-dk2: #1e40af;
  --c-warn-2: #f59e0b;
  --d-bad2: #fca5a5;
  --d-bad3: #fecaca;
  --d-faint2: #94a3b8;
  --d-info2: #93c5fd;
  --d-input: #11151f;
  --d-input-border: #2b3346;
  --d-line2: #334155;
  --d-ok2: #86efac;
  --d-ok3: #bbf7d0;
  --d-text2: #cbd5e1;
  --w-bg: #2a1a12;
  --w-border: #7c4a24;
  --w-text: #fcd9b6;

  --f-sans: "Fira Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --f-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================================================================
 * A11Y — ba thứ audit báo thiếu: focus, reduced-motion, contrast
 * =================================================================== */

/* Focus THẤY ĐƯỢC. Trước đó chỉ 2/29 file có :focus — người dùng bàn phím
   không biết mình đang ở đâu. :focus-visible để chuột bấm không hiện vòng. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* vùng tối cần vòng sáng hơn mới thấy */
:where(.dark, [data-dark]) :where(a, button, input, select, textarea, summary):focus-visible,
body[data-dark] :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--d-info);
}

/* Tôn trọng người tắt hiệu ứng. Audit: 0/29 file có — vi phạm mức High. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mọi thứ bấm được phải ra con trỏ tay. Audit: channel.html có 4 onclick, 0 cursor. */
:where(button, summary, [onclick], [role="button"], th[data-sort], .nav-i) {
  cursor: pointer;
}

/* Hover có chuyển tiếp thay vì nhảy phịch. Audit: 36 :hover / 6 transition. */
:where(a, button, .nav-i, tr, .row, .k, .chip) {
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

/* ===================================================================
 * BẢNG DỮ LIỆU — đây là sản phẩm chính của app
 * =================================================================== */

/* Số phải thẳng cột. Không có cái này thì mắt phải căn lại mỗi dòng. */
:where(td, th).n, :where(td, th)[data-num], .num, .tabular,
.val, .dbig, .dm, .k .v, .k .n, .kpi .val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Đầu cột sắp xếp: hiện mũi tên theo aria-sort, không phải chỉ đổi màu.
   WCAG yêu cầu aria-sort; audit đếm được 0 trên 18 cột sắp xếp được. */
th[aria-sort] { position: relative; padding-right: 18px; }
th[aria-sort]::after {
  content: "↕"; position: absolute; right: 6px; opacity: .35; font-size: 10px;
}
th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }
th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* Icon SVG: một cỡ, một độ dày nét. Checklist cấm emoji làm icon. */
.ico {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 15px; height: 15px; }

/* Trạng thái không được chỉ dựa vào màu — luôn kèm chữ hoặc dấu. */
.tt { display: inline-flex; align-items: center; gap: 5px; }
.tt::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
              background: currentColor; flex: none; }

/* Bảng rộng cuộn riêng, không kéo rộng viewport của cả trang. */
.main,.main>*{min-width:0}
.row>*{min-width:0;max-width:100%}
.row :is(input,select,textarea){max-width:100%}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto}
/* Header sticky phải bám hộp cuộn cả hai chiều, không phải hộp chỉ cuộn ngang. */
.table-scroll-sticky{max-height:75dvh;overflow:auto}
.table-scroll:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
table.channel-first>*>tr>:nth-child(1),
table.channel-second>*>tr>:nth-child(2),
table.channel-third>*>tr>:nth-child(3),
table .sticky-channel{
  position:sticky;left:0;z-index:2;
  background:var(--c-surface);box-shadow:1px 0 var(--c-border);
}
body.toi table.channel-first>*>tr>:nth-child(1),
body.toi table.channel-second>*>tr>:nth-child(2),
body.toi table.channel-third>*>tr>:nth-child(3),
body.toi table .sticky-channel{
  background:var(--d-surface);box-shadow:1px 0 var(--d-border);
}
table.channel-first>thead>tr>:nth-child(1),
table.channel-second>thead>tr>:nth-child(2),
table.channel-third>thead>tr>:nth-child(3),
table>thead>tr>.sticky-channel{z-index:3}
.cach-doc>summary{cursor:pointer;font-weight:700}
.cach-doc[open]>summary{margin-bottom:12px}
:where(button,[role="button"],.btn,.chip):active{filter:brightness(.94)}
button:disabled{cursor:not-allowed;opacity:.6}
@media(max-width:760px){
  /* Cả trang chuỗi lẫn Jinja có cỡ chữ riêng; đây là sàn đọc được trên iPhone. */
  body :is(input,select,textarea){font-size:16px!important}
  body :is(button,.btn,select,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),summary){
    min-height:44px;min-width:44px;box-sizing:border-box;
  }
  body :is(a.chip,label.chip,.bar a,.filters a,.tabs a){
    display:inline-flex;align-items:center;min-height:44px;min-width:44px;box-sizing:border-box;
  }
  .chip:has(input[type=radio]),.chip:has(input[type=checkbox]){gap:8px}
  .table-scroll{width:100%}
  .main{max-width:100%}
}