/* admin/admin.css — style slice Admin (Epic 3 rebuild, Story 3.1, AD-2/AD-5).
   Token màu (--bg/--panel/--text/--muted/--border/--ane-500/--danger,
   color-scheme dark) lấy từ shared/tokens.css (link trong admin.html TRƯỚC
   file này) — KHÔNG định nghĩa lại giá trị trùng tên (AD-5). Giá trị y hệt
   bản admin.css cũ (bản cũ COPY nguyên văn từ style.css thời AD-46, nay cả
   hai cùng trỏ về 1 nguồn canonical). Mã màu #3fb950 của .closeout-match cũ
   nay đọc qua token --success (giá trị token đã đổi 2026-08-23 sang #10b981
   khớp brand ANE, rồi 2026-08-27 sang success-700 #047857 cho nền sáng
   Epic 14 — .closeout-match tự động theo, không cần sửa file này).

   Bố cục "back-office v2" (UX-DR12) giữ nguyên từ bản cũ: khác hẳn index.html
   (màn thao tác nhanh trong lúc dịch trực tiếp, thao tác lớn/rõ cho ngón tay
   trên iPad) — admin.html là màn ĐỌC BÁO CÁO trên desktop: lề rộng 32px, mật
   độ thông tin cao (bảng nhiều cột), cỡ chữ/khoảng cách calmer (không có gì
   cần "đọc từ xa" hay "bấm nhanh khi đang dịch").

   IV19 (Ive 2026-09-07): admin từng là "phương ngữ thứ ba" — bo góc 6px, chữ
   gốc 15px, padding 9px, không phải app này cũng không phải màn chiếu. Nay
   bán kính/cỡ chữ/nhịp đọc qua token shared/tokens.css (--radius-*, --fs-*,
   --sp-*); mật độ bảng back-office GIỮ NGUYÊN, chỉ đổi đơn vị gốc. */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base); /* IV19/IV5 2026-09-07: 15px "phương ngữ thứ ba" → thang chung */
  line-height: 1.5;
  /* 32px lề desktop (UX-DR12 "Desktop Admin bố cục back-office v2") — calmer
     hơn hẳn padding hẹp/thao-tác-nhanh của index.html. */
  padding: 32px;
}

.hidden {
  display: none !important;
}

/* [ui-ux-pro-max audit 2026-09-13] admin.html KHÔNG link style.css (AD-2 cô
   lập asset) nên không kế thừa `:focus-visible` branded của style.css:73-75
   — Admin có nhiều control tương tác (select, checkbox, input, nút, link)
   nhưng chạy bằng viền focus mặc định trình duyệt, lệch hẳn với mọi màn
   khác của app. Duplicate có chủ đích (mirror kỷ luật AD-2 đã lặp ở
   admin/*.js — mỗi slice giữ bản riêng, không import chéo), không phải giá
   trị mới. */
:focus-visible {
  outline: 2px solid var(--ane-500);
  outline-offset: 2px;
}

.admin-header {
  margin-bottom: 24px;
}

.admin-header h1 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 4px 0;
}

#admin-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* [UX review Sally/Jobs 2026-09-11, finding #13] Email tài khoản đang đăng
   nhập — dòng phụ dưới tiêu đề, cùng sắc độ với #admin-status (thông tin
   NỀN, không tranh chú ý với dữ liệu bảng). */
.admin-account {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 2px;
}

/* [UX review Sally/Jobs 2026-09-11, finding #15] Ghi chú nối nghĩa "ước tính"
   ↔ "đã chốt" — cùng thang chữ/sắc độ với status, trần độ rộng để câu giải
   thích không kéo dài hết màn desktop thành khó đọc. */
.admin-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 72ch;
  margin: 0 0 8px;
}

/* [UX review Sally/Ive 2026-08-27, finding #2] Nút đăng nhập khi chưa xác
   thực — mirror quyết định contrast của .start-hero (owner/owner.css):
   var(--text) trên var(--ane-action-500) đo 5,38:1 (đạt AA), trắng chỉ
   2,92:1 (rớt sàn) — xem preflight/preflight.css cho phép đo đầy đủ. */
.admin-login-btn {
  display: inline-block;
  margin-top: 10px;
  padding: var(--sp-2) var(--sp-4); /* IV6 2026-09-07: 9 → 8 */
  border-radius: var(--radius-control);
  background: var(--ane-action-500);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* [Sally S10, hội đồng 2026-09-06] Card 403 có lối ra — mirror .admin-login-btn
   cho link chính (cùng cặp màu đã đo 5,38:1). */
.admin-denied {
  max-width: 480px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
  margin-bottom: 24px;
}

.admin-denied h2 {
  font-size: var(--fs-md);
  margin: 0 0 8px;
}

.admin-denied p {
  color: var(--muted);
  margin: 0 0 14px;
  font-size: var(--fs-base);
}

.admin-primary-link {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4); /* IV6 2026-09-07: 9 → 8 */
  border-radius: var(--radius-control);
  background: var(--ane-action-500);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* [Sally S10] Bọc MỌI <table> (admin.html): bảng 786px trên màn 390px làm CẢ
   TRANG tràn ngang (documentElement.scrollWidth 818 / innerWidth 390) — cuộn
   ngang phải nằm TRONG khung bảng, không phải trên body. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.admin-field select,
.admin-field input[type="date"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  min-width: 160px;
}

/* [M, 24/09] Dòng tổng của khoảng ngày đang lọc — số thật, đậm hơn status. */
.admin-trip-summary {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 8px 0;
}

.admin-pdf-link {
  margin-left: 8px;
  font-size: var(--fs-sm);
}

.admin-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Bảng nhiều cột, dày — mật độ thông tin cao thay vì thao tác lớn (khác hẳn
   .step-opts/.listen-channel của index.html, vốn tối ưu cho ngón tay chạm
   nhanh trong lúc buổi đang chạy). */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.admin-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  /* Epic 14 (Story 14.2): rgba sáng 3% được chọn để nổi trên nền TỐI cũ —
     trên --bg/--panel mới (gần trắng) gần như vô hình. Đảo sang tối 4%
     (dùng --text làm gốc) để hover vẫn thấy được trên nền sáng. */
  background: rgba(26, 33, 64, 0.04);
}

.archive-toggle-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 4px 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.archive-toggle-btn:hover {
  border-color: var(--ane-500);
  color: var(--text);
}

/* Fix 2026-08-28 (finding #12 review Sally+Jobs Owner/Admin) — nút "Ẩn"
   disable khi buổi đang open/closing (admin/render.js renderSessionRow);
   cursor + opacity nói RÕ trạng thái đó, không chỉ dựa vào `disabled`
   attribute im lặng (:hover ở trên không override — :disabled đứng SAU,
   thắng theo cascade khi cả 2 khớp cùng lúc dù chuột hover). */
.archive-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
}

.archive-toggle-btn.unarchive {
  /* Epic 14 (Story 14.2): --danger làm chữ trên --bg mới đo 3,57:1 — dưới
     sàn AA (border-color GIỮ NGUYÊN — đạt sàn non-text 3:1). Label chữ
     "Gỡ lưu trữ" đã tự nói hành động — đổi chữ sang --text. */
  border-color: var(--danger);
  color: var(--text);
}

/* [Quyết định Sếp 2026-08-17] Đối soát chốt sổ — section riêng dưới bảng
   buổi, tái dùng .admin-table cho khung bảng. Xanh (--success) = khớp, đỏ
   (--danger) = lệch cần xem lại. */
#closeout-section {
  margin-top: 32px;
}

.closeout-heading {
  font-size: var(--fs-base);
  margin: 0 0 4px;
}

#closeout-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.closeout-match {
  /* Epic 14 (Story 14.2): --success làm chữ trên --panel mới đo 2,28:1 —
     dưới sàn AA. Ô đã tự có glyph "✓ khớp" (render.js renderCloseoutRow) —
     đổi sang --text (14,2:1) không mất phân biệt với .closeout-mismatch. */
  color: var(--text);
}

.closeout-mismatch {
  /* Epic 14 (Story 14.2): --danger làm chữ trên --panel mới đo 3,39:1 —
     dưới sàn AA. Ô đã tự có glyph "⚠ lệch: ..." — đổi sang --text. */
  color: var(--text);
  font-weight: 600;
}

/* Story 3.4 (AMENDMENT 2026-08-19): section quota theo tài khoản — mirror bố
   cục closeout (heading nhỏ + status mờ + .admin-table). Cảnh báo chạm 100%
   quota dùng --danger (AC: cảnh báo, KHÔNG chặn). */
#quota-section {
  margin-top: 32px;
}

#quota-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.quota-warning {
  /* Epic 14 (Story 14.2): --danger làm chữ trên --panel mới đo 3,39:1 —
     dưới sàn AA. Ô đã tự có glyph "⚠ chạm quota" (quota.js) — đổi sang
     --text. */
  color: var(--text);
  font-weight: 600;
}

.quota-input {
  width: 110px;
  margin-right: 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 4px 8px;
  font: inherit;
}

/* NFR-6: section quản lý đoàn — mirror bố cục closeout/quota (heading nhỏ +
   status mờ + .admin-table). Nút "Lưu trữ"/"Gỡ" dùng --danger vì đều là thao
   tác THU HẸP quyền (thành viên mất quyền xem lại ngay lập tức), phải nhìn
   khác nút thường. */
#groups-section {
  margin-top: 32px;
}

#groups-status,
#group-members-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.groups-subheading {
  font-size: var(--fs-base);
  margin: 0 0 4px;
}

.groups-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.groups-input {
  min-width: 240px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--fs-sm);
}

.groups-btn,
.group-select-btn,
.group-archive-btn,
.member-remove-btn,
.quota-submit-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 4px 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.groups-btn {
  padding: 6px 14px;
  font-size: var(--fs-sm);
}

.groups-btn:hover,
.group-select-btn:hover {
  border-color: var(--ane-500);
  color: var(--text);
}

.group-select-btn {
  margin-right: 8px;
}

.group-archive-btn,
.member-remove-btn {
  /* Epic 14 (Story 14.2): --danger làm chữ trên --bg mới đo 3,57:1 — dưới
     sàn AA (border-color GIỮ NGUYÊN — đạt sàn non-text 3:1). */
  border-color: var(--danger);
  color: var(--text);
}

/* [UX review Sally/Jobs 2026-09-11, finding #7] Nhật ký thao tác — mirror bố
   cục closeout/quota/groups (heading nhỏ + status mờ + .admin-table). Không có
   nút hành động nào trong bảng: đọc-only theo đúng bản chất sổ ghi chép. */
#audit-section {
  margin-top: 32px;
}

#audit-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.groups-members-panel {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Story 11.5 (Epic 11 UX redesign, 2026-08-23) — badge trạng thái buổi trong
   bảng Admin. Cùng bảng tín hiệu với Listen picker (.listen-live-badge) và
   chỉ báo màn Owner (.owner-session-status): chấm + màu + CHỮ — màu không
   bao giờ là kênh duy nhất (UX-DR11). Token có sẵn, không hue mới (AD-5).
   Mật độ cao hơn 2 màn kia vì đây là bảng back-office đọc trên desktop
   (UX-DR12), không phải nút bấm bằng ngón tay trên iPad. */
.admin-session-badge {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
}

.admin-session-badge.is-live {
  /* Epic 14 (Story 14.2): --success làm chữ trên --panel mới đo 2,28:1 —
     dưới sàn AA. Badge tự có glyph "● Đang phát" (render.js) — đổi sang
     --text. */
  color: var(--text);
}

.admin-session-badge.is-warm {
  color: var(--muted);
}

.admin-session-badge.is-closing {
  color: var(--ane-300);
}

.admin-session-badge.is-closed,
.admin-session-badge.is-unknown {
  color: var(--muted);
}

/* [Sally S10, hội đồng 2026-09-06] Điện thoại: admin = Sếp, và trong chuyến EU
   cấp quota/đóng buổi từ điện thoại là kịch bản thật. measure.json đo 12 đích
   chạm 26–34px (.archive-toggle-btn 43×26, .group-archive-btn 70×26, checkbox
   13×13, select 34px) — nâng lên ≥44px (Apple HIG / WCAG 2.5.8) chỉ dưới
   768px để bố cục desktop "back-office v2" (UX-DR12) không đổi. Ô nhập/select
   16px để iOS Safari không tự phóng to trang khi chạm. Bảng giữ min-width để
   CUỘN trong .table-scroll thay vì bóp 7 cột vào 390px thành không đọc được. */
@media (max-width: 768px) {
  body {
    padding: 16px 12px;
  }

  .admin-filters {
    gap: 12px;
  }

  .admin-field select,
  .admin-field input[type="date"],
  .quota-input,
  .groups-input {
    min-height: 44px;
    font-size: 16px;
  }

  .admin-field-checkbox {
    min-height: 44px;
  }

  .admin-field-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  .archive-toggle-btn,
  .groups-btn,
  .group-select-btn,
  .group-archive-btn,
  .member-remove-btn,
  .quota-submit-btn,
  .admin-login-btn,
  .admin-primary-link {
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--fs-base);
  }

  .group-select-btn {
    margin-bottom: 6px;
  }

  .table-scroll > .admin-table {
    min-width: 640px;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
  }
}