:root {
        --sb-bg: #151515;
        --sb-bg-soft: #1e1e1e;
        --sb-border: #2e2e2e;
        --sb-text: #b0b0b0;
        --sb-text-dim: #808080;
        --sb-accent: #f5a623;
        --sb-accent-soft: rgba(245, 166, 35, 0.14);
        --app-bg: #f2f4f8;
        --app-card-border: #e5e9f2;
        --ink: #14213d;
      }

      body {
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
        background: var(--app-bg);
      }

      h1, h5, .fw-bold, label { color: var(--ink); }

      /* ---------- Page gate (màn chờ xác thực trước khi hiện nội dung) ----------
         BUG CŨ: 2 class .page-gate-loading / .page-gate-content không có CSS nào
         cả, nên trong lúc chờ requireLeaderAuth() cả spinner lẫn nội dung trang
         (page-gate-content) đều nằm trong flow bình thường -> hiện chồng lên
         nhau / tràn ra ngoài màn hình cho tới khi JS gỡ class page-gate-pending.
         Fix: spinner phủ toàn màn hình (fixed), ẩn hẳn nội dung + khoá scroll
         trong lúc còn "pending". */
      .page-gate-loading {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        background: var(--app-bg);
      }
      body.page-gate-pending .page-gate-loading {
        display: flex;
      }
      body.page-gate-pending .page-gate-content {
        display: none;
      }
      body.page-gate-pending {
        overflow: hidden;
        height: 100vh;
      }

      /* ---------- App shell ---------- */
      /* SUA: min-height -> height + overflow: hidden. Truoc day dung
         min-height:100vh nen .app-sidebar va .app-main cu cao tu nhien theo
         noi dung roi day CA TRANG (body) cuon chung 1 thanh scroll duy nhat -
         .sb-nav du da co san overflow-y:auto nhung khong bao gio kich hoat vi
         cha (.app-sidebar) khong bi gioi han chieu cao. Gio khoa shell dung
         bang 1 man hinh, moi cot ben trong (.sb-nav ben sidebar, .app-content
         ben main) tu cuon rieng - xem 2 khai bao "overflow: hidden" moi o
         .app-sidebar/.app-main va "overflow-y: auto" moi o .app-content ben
         duoi. */
      .app-shell {
        display: flex;
        height: 100vh;
        align-items: stretch;
        overflow: hidden;
      }

      /* ---------- Sidebar ---------- */
      .app-sidebar {
        width: 296px;
        flex: 0 0 296px;
        background: var(--sb-bg);
        color: var(--sb-text);
        display: flex;
        flex-direction: column;
        padding: 22px 18px 18px;
        /* MOI: gioi han chieu cao sidebar dung bang khung shell, de CHI
           .sb-nav (danh sach loai don) cuon rieng - the user-card, xuong-box
           o tren va sb-footer o duoi luon dung yen, khong bi troi theo. */
        overflow: hidden;
      }

      .sb-section-label {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--sb-text-dim);
        margin: 4px 2px 8px;
      }

      /* ---------- User info card (sidebar) - THAY THẾ tiêu đề "TẠO ĐƠN
         TRÌNH KÝ NỘI BỘ" cũ (.sb-brand) bằng thông tin tổ trưởng đang đăng
         nhập, kèm menu điều hướng nhanh sang tiến độ/lịch sử đơn. ---------- */
      .sb-user-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 6px 20px;
        border-bottom: 1px solid var(--sb-border);
        margin-bottom: 18px;
      }
      .sb-user-avatar {
        overflow: hidden;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 10px;
        background: linear-gradient(145deg, var(--sb-accent), #c97f14);
        color: #3a2405;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 16px;
      }
      .sb-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }
      .sb-user-text {
        min-width: 0;
        line-height: 1.2;
      }
      .sb-user-text strong {
        display: block;
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sb-user-dept {
        font-size: 11.5px;
        color: var(--sb-text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Đổi xưởng/phòng ban đang quản lý - chỉ hiện khi tổ trưởng quản lý
         nhiều hơn 1 xưởng/phòng ban (xem renderScopeSwitcher() trong index.html) */
      .sb-scope-switcher {
        margin: -10px 0 16px;
      }
      .sb-scope-switcher select.form-select {
        background-color: var(--sb-bg-soft);
        border: 1px solid var(--sb-border);
        color: #fff;
        font-weight: 600;
        font-size: 12.5px;
      }
      .sb-scope-switcher select.form-select:focus {
        border-color: var(--sb-accent);
        box-shadow: 0 0 0 0.2rem var(--sb-accent-soft);
      }

      .sb-user-nav-toggle {
        background: var(--sb-bg-soft);
        border: 1px solid var(--sb-border);
        color: var(--sb-text);
        border-radius: 8px;
        padding: 7px 10px;
        font-size: 12.5px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .sb-user-nav-toggle:hover,
      .sb-user-nav-toggle:focus {
        background: var(--sb-bg-soft);
        border-color: var(--sb-accent);
        color: #fff;
      }
      .sb-user-nav-toggle i.bi-chevron-down {
        font-size: 11px;
        transition: transform 0.15s ease;
      }
      .sb-user-nav-toggle[aria-expanded="true"] i.bi-chevron-down {
        transform: rotate(180deg);
      }
      .sb-user-nav-menu {
        background: var(--sb-bg-soft);
        border: 1px solid var(--sb-border);
        border-radius: 10px;
        padding: 6px;
        margin-top: 6px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      }
      .sb-user-nav-menu .dropdown-item {
        color: var(--sb-text);
        border-radius: 7px;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
      }
      .sb-user-nav-menu .dropdown-item:hover,
      .sb-user-nav-menu .dropdown-item:focus {
        background: var(--sb-accent-soft);
        color: #fff;
      }
      .sb-user-nav-menu .dropdown-item i {
        color: var(--sb-accent);
        font-size: 14px;
      }

      .sb-xuong-box {
        margin-bottom: 22px;
      }
      .sb-xuong-box select.form-select {
        background-color: var(--sb-bg-soft);
        border: 1px solid var(--sb-border);
        color: #fff;
        font-weight: 600;
      }
      .sb-xuong-box select.form-select:focus {
        border-color: var(--sb-accent);
        box-shadow: 0 0 0 0.2rem var(--sb-accent-soft);
      }
      .sb-xuong-box select.form-select:disabled {
        opacity: 0.75;
      }

      .sb-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        padding-right: 2px;
      }

      /* MOI: thanh scroll mong, mau hoa hop voi nen toi cua sidebar - thay
         cho thanh scroll xam/trang mac dinh cua he dieu hanh se rat lac long
         tren nen --sb-bg. Chi ap dung cho .sb-nav (vung thuc su cuon rieng). */
      .sb-nav {
        scrollbar-width: thin;
        scrollbar-color: var(--sb-border) transparent;
      }
      .sb-nav::-webkit-scrollbar {
        width: 6px;
      }
      .sb-nav::-webkit-scrollbar-track {
        background: transparent;
      }
      .sb-nav::-webkit-scrollbar-thumb {
        background-color: var(--sb-border);
        border-radius: 6px;
      }
      .sb-nav::-webkit-scrollbar-thumb:hover {
        background-color: var(--sb-text-dim);
      }

      .sb-category {
        margin-bottom: 18px;
      }
      .sb-category-head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--sb-text-dim);
        margin: 0 2px 6px;
      }
      .sb-category-head i {
        font-size: 13px;
        color: var(--sb-accent);
      }

      .order-nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        text-align: left;
        background: transparent;
        border: none;
        border-radius: 10px;
        padding: 9px 10px 9px 12px;
        color: var(--sb-text);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 2px;
        transition: background-color 0.12s ease, color 0.12s ease;
        border-left: 3px solid transparent;
      }
      .order-nav-link i {
        font-size: 15px;
        color: var(--sb-text-dim);
        flex-shrink: 0;
        transition: color 0.12s ease;
      }
      .order-nav-link:hover {
        background: var(--sb-bg-soft);
        color: #fff;
      }
      .order-nav-link.active {
        background: var(--sb-accent-soft);
        color: #fff;
        border-left-color: var(--sb-accent);
        font-weight: 600;
      }
      .order-nav-link.active i {
        color: var(--sb-accent);
      }
      .order-nav-link:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .sb-footer {
        border-top: 1px solid var(--sb-border);
        padding-top: 14px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .sb-footer .btn {
        font-size: 12.5px;
      }

      /* ---------- Topbar + content ---------- */
      .app-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        /* MOI: gioi han chieu cao theo shell (100vh ke thua qua flex), de
           CHI .app-content cuon rieng - .app-topbar luon dung yen tren dinh
           thay vi troi theo khi cuon form dai. */
        overflow: hidden;
      }
      .app-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 24px;
        background: #fff;
        border-bottom: 1px solid var(--app-card-border);
        /* MOI: topbar khong bi co lai khi noi dung ben duoi cuon/day. */
        flex-shrink: 0;
      }
      .app-topbar h1 {
        font-size: 17px;
        font-weight: 700;
        margin: 0;
      }
      .sidebar-toggle-btn {
        display: none;
      }

      .app-content {
        padding: 26px 24px 60px;
        flex: 1 1 auto;
        /* MOI: day la vung thuc su cuon cua cot ben phai (form/noi dung) -
           doc lap hoan toan voi .sb-nav ben sidebar. */
        overflow-y: auto;
      }

      .welcome-hero {
        max-width: 640px;
        margin: 40px auto 0;
        text-align: center;
        padding: 40px 24px;
        background: #fff;
        border: 1px dashed var(--app-card-border);
        border-radius: 16px;
      }
      .welcome-hero .bi {
        font-size: 34px;
        color: var(--sb-accent);
        margin-bottom: 14px;
      }
      .welcome-hero h2 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .welcome-hero p {
        color: #808080;
        font-size: 14px;
        margin-bottom: 0;
      }

      #form-display-container:empty {
        display: none;
      }
      .app-content:has(#form-display-container:not(:empty)) .welcome-hero {
        display: none;
      }

      /* ---------- Mobile ---------- */
      @media (max-width: 991.98px) {
        .app-sidebar {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          z-index: 1045;
          transform: translateX(-100%);
          transition: transform 0.2s ease;
          width: 300px;
        }
        .app-sidebar.is-open {
          transform: translateX(0);
          box-shadow: 20px 0 60px rgba(0, 0, 0, 0.3);
        }
        .sidebar-backdrop {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(15, 20, 35, 0.5);
          z-index: 1040;
        }
        .sidebar-backdrop.is-open {
          display: block;
        }
        .sidebar-toggle-btn {
          display: inline-flex;
        }
        .app-content {
          padding: 18px 14px 48px;
        }
      }

      .btn-spinner {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border-width: 0.15em;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Hiện spinner khi JavaScript thêm class .btn-loading */
.btn-loading .btn-spinner {
  display: inline-block;
}

/* Làm mờ chữ và ngăn click nhiều lần khi đang loading */
.btn-loading {
  pointer-events: none;
  cursor: not-allowed;
}
.btn-loading .btn-label-text {
  opacity: 0.7;
}
/* ---------- Dark mode overrides (đồng bộ tông màu với leader-style.css) ---------- */
[data-bs-theme="dark"] {
  --app-bg: #151515;
  --app-card-border: #2e2e2e;
  --ink: #eaeaea;
}
[data-bs-theme="dark"] .app-topbar {
  background: #181818;
  border-bottom-color: #2e2e2e;
}
[data-bs-theme="dark"] .welcome-hero {
  background: #1c1c1c;
  border-color: #2e2e2e;
}
[data-bs-theme="dark"] .welcome-hero p {
  color: var(--sb-text-dim);
}

/* ---------- MỚI: Dark mode cho ô đã khoá (readonly/autofill) + header bảng
   "table-light" trong các form (vd ô "Tổ trưởng phòng ban" bị
   assets/app/leader-autofill.js tự điền + khoá, và bảng "Danh sách người
   đăng ký tăng ca" trong forms/xinTangCa.html) ----------
   2 lỗi được báo:
   1) Ô input readonly/disabled (autofill tên tổ trưởng...) vẫn giữ nền
      TRẮNG cứng + chữ xám nhạt (thiết kế cho theme sáng, có thể do JS gán
      trực tiếp) -> qua dark mode thành chữ xám nhạt trên nền trắng, sai
      hẳn tông với phần còn lại của form đã tối => rất khó đọc.
   2) <thead class="table-light"> (Bootstrap) không map đúng theo bảng màu
      tối đang dùng trong toàn app (--sb-bg/--sb-bg-soft...) mà tự ra 1 tông
      xanh navy đậm riêng của Bootstrap - lệch tông.
   Dùng !important vì cả 2 trường hợp trên đều có thể bị ghi đè bằng inline
   style/class từ JS, có độ ưu tiên cao hơn CSS thường. */
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
  background-color: #232323 !important;
  color: #eaeaea !important;
  border-color: #333333 !important;
  opacity: 1 !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] table thead.table-light th {
  --bs-table-bg: #1e1e1e !important;
  --bs-table-color: #eaeaea !important;
  background-color: #1e1e1e !important;
  color: #eaeaea !important;
  border-color: #333333 !important;
}

/* ---------- MỚI: Dark mode cho lịch chọn ngày/giờ (thư viện flatpickr, xem
   thẻ <link .../flatpickr.min.css> + <script .../flatpickr> ở đầu file) ----------
   flatpickr chỉ có 1 theme mặc định (nền trắng/chữ đen, load qua CDN, không
   có biến CSS liên kết với [data-bs-theme] của app) nên popup lịch luôn hiện
   sáng kể cả khi ô input phía trên đã đổi tối - lạc tông rõ rệt. Việt hoá lại
   theo đúng bảng màu tối đang dùng trong app (nền #1c1c1c, viền #333333, chữ
   #eaeaea, điểm nhấn cam --sb-accent) thay vì theme tối có sẵn của flatpickr
   để khỏi phải tải thêm 1 file CSS CDN khác. */
[data-bs-theme="dark"] .flatpickr-calendar {
  background: #1c1c1c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border: 1px solid #333333;
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::after {
  border-bottom-color: #1c1c1c;
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::after {
  border-top-color: #1c1c1c;
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month {
  color: #eaeaea;
  fill: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-current-month {
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year {
  background: transparent;
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #1c1c1c;
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-next-month {
  fill: #999999;
  color: #999999;
}
[data-bs-theme="dark"] .flatpickr-prev-month:hover svg,
[data-bs-theme="dark"] .flatpickr-next-month:hover svg {
  fill: var(--sb-accent);
}
[data-bs-theme="dark"] .flatpickr-weekdays {
  background: transparent;
}
[data-bs-theme="dark"] span.flatpickr-weekday {
  background: transparent;
  color: #999999;
}
[data-bs-theme="dark"] .flatpickr-day {
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay {
  color: #555555;
}
[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day:focus {
  background: #2e2e2e;
  border-color: #2e2e2e;
}
[data-bs-theme="dark"] .flatpickr-day.today {
  border-color: var(--sb-accent);
}
[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.selected:hover,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-day.inRange {
  background: var(--sb-accent);
  border-color: var(--sb-accent);
  color: #1c1c1c;
}
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
  color: #4a4a4a;
}
[data-bs-theme="dark"] .flatpickr-time {
  border-top: 1px solid #333333;
}
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  background: #1c1c1c;
  color: #eaeaea;
}
[data-bs-theme="dark"] .flatpickr-time input:hover,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
  background: #2e2e2e;
}
[data-bs-theme="dark"] .numInputWrapper span.arrowUp:after {
  border-bottom-color: #999999;
}
[data-bs-theme="dark"] .numInputWrapper span.arrowDown:after {
  border-top-color: #999999;
}
[data-bs-theme="dark"] .numInputWrapper:hover {
  background: transparent;
}

/* ---------- Icon mặt trời/mặt trăng theo theme ---------- */
.theme-toggle-btn .bi-moon-stars-fill {
  display: none;
}
[data-bs-theme="dark"] .theme-toggle-btn .bi-sun-fill {
  display: none;
}
[data-bs-theme="dark"] .theme-toggle-btn .bi-moon-stars-fill {
  display: inline-block;
}