/* =====================================================================
   dark.css — Chế độ tối cho toàn project.

   CÁCH HOẠT ĐỘNG
   Không sửa màu ở từng trang. Toàn bộ giao diện đã dựng trên token --ds-*
   (app.css), nên chỉ cần ĐỊNH NGHĨA LẠI token trong ngữ cảnh tối là mọi
   component .ds-* tự đổi theo. Phần còn lại của file chỉ để vá những chỗ
   ghi màu cứng (#fff…) hoặc component Bootstrap 5.1 chưa hỗ trợ theme.

   CHỌN THEME
   - html[data-theme="dark"]  → user chủ động chọn Tối
   - html[data-theme="light"] → user chủ động chọn Sáng (chặn cả khi máy đang tối)
   - không có data-theme      → theo cài đặt hệ điều hành (prefers-color-scheme)

   LƯU Ý Bootstrap 5.1: bản này CHƯA có data-bs-theme (chỉ từ 5.3), nên
   modal/dropdown/table/form phải override tay ở cuối file.

   File này load SAU app.css trong bundle (Program.cs) để thắng cascade.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKEN — trái tim của dark mode.
   Đặt trong @media để máy đang để chế độ tối thì tự tối, và loại trừ
   trường hợp user đã chủ động chọn Sáng.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Brand sáng hơn một bậc: cam #d64e2d trên nền tối bị chìm và ngả nâu,
           nên đẩy sáng để giữ độ tương phản chữ trắng trên nút. */
        --ds-primary: #f2643f;
        --ds-primary-hover: #ff7854;
        --ds-primary-light: #33201a;
        --ds-primary-dark: #d64e2d;

        /* Neutrals: xám TRUNG TÍNH gần đen. Bản trước lệch nâu để "ấm" theo cam
           nhưng trên màn hình lớn thành ra xỉn/bẩn; xám trung tính làm cam nổi hơn.
           Không dùng đen thuần (#000) — nền quá sâu làm chữ bị chói và mỏi mắt. */
        --ds-ink: #ececee;
        --ds-muted: #9a9aa2;
        --ds-line: #2f2f34;
        --ds-surface: #1b1b1e;
        --ds-ground: #121214;

        /* Bóng đổ trên nền tối gần như vô hình → tăng độ đậm để còn tách lớp. */
        --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);
        --ds-shadow: 0 2px 8px rgba(0, 0, 0, .36), 0 8px 24px rgba(0, 0, 0, .3);

        /* Đồng bộ biến Bootstrap để component gốc ăn theo */
        --bs-primary: var(--ds-primary);
        --bs-primary-rgb: 242, 100, 63;
        --bs-border-color: var(--ds-line);
        --bs-body-color: var(--ds-ink);
        --bs-body-bg: var(--ds-ground);

        /* Token semantic: chữ sáng lên, nền pastel đổi thành nền tối cùng tông.
           Giữ nguyên ý nghĩa màu (xanh=ok, vàng=cảnh báo, đỏ=lỗi). */
        --ds-ok: #5cc98e;   --ds-ok-bg: #163325;
        --ds-warn: #e0a33c; --ds-warn-bg: #38290f;
        --ds-crit: #ff7a5c; --ds-crit-bg: #3a1d17;
        --ds-info: #59b6d4; --ds-info-bg: #12303a;
        --ds-muted-bg: #26262b;

        /* Token của PHẦN 2 (site) — sidebar/topbar dùng bộ biến riêng */
        --primary-color: #f2643f;
        --primary-hover: #ff7854;
        --primary-light: #33201a;
        --primary-dark: #d64e2d;
    }
}

/* Bản chọn tay: lặp lại y hệt khối trên.
   Không gộp selector với @media được — trình duyệt bỏ CẢ khối nếu một
   selector nằm ngoài ngữ cảnh media, nên buộc phải viết hai lần. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ds-primary: #f2643f;
    --ds-primary-hover: #ff7854;
    --ds-primary-light: #33201a;
    --ds-primary-dark: #d64e2d;

    --ds-ink: #ececee;
    --ds-muted: #9a9aa2;
    --ds-line: #2f2f34;
    --ds-surface: #1b1b1e;
    --ds-ground: #121214;

    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);
    --ds-shadow: 0 2px 8px rgba(0, 0, 0, .36), 0 8px 24px rgba(0, 0, 0, .3);

    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: 242, 100, 63;
    --bs-border-color: var(--ds-line);
    --bs-body-color: var(--ds-ink);
    --bs-body-bg: var(--ds-ground);

    --ds-ok: #5cc98e;   --ds-ok-bg: #163325;
    --ds-warn: #e0a33c; --ds-warn-bg: #38290f;
    --ds-crit: #ff7a5c; --ds-crit-bg: #3a1d17;
    --ds-info: #59b6d4; --ds-info-bg: #12303a;
    --ds-muted-bg: #26262b;

    --primary-color: #f2643f;
    --primary-hover: #ff7854;
    --primary-light: #33201a;
    --primary-dark: #d64e2d;
}

/* ---------------------------------------------------------------------
   2. VÁ MÀU CỨNG + COMPONENT BOOTSTRAP
   Gom vào 1 khối dùng chung cho cả 2 cách kích hoạt theme.
   Quy ước selector: .theme-dark được JS gắn lên <html> ở mọi trường hợp
   đang-tối (kể cả khi theo hệ điều hành) → chỉ cần viết rule MỘT lần.
   --------------------------------------------------------------------- */

/* --- Khung trang --- */
.theme-dark body { background: var(--ds-ground); color: var(--ds-ink); }

/* Sidebar + các panel ghi background:#fff / white cứng trong app.css */
.theme-dark .sidebar,
.theme-dark .topbar { background: var(--ds-surface); }

/* Menu sidebar: app.css ghi cứng color:#333 — trên nền tối gần như tàng hình.
   Mục active/hover đã có nền cam nên giữ chữ trắng, chỉ cứu mục thường. */
.theme-dark .nav-link { color: var(--ds-ink); }
.theme-dark .nav-link i { color: var(--ds-muted); }
.theme-dark .nav-link:hover,
.theme-dark .nav-link.active { color: #fff; }
.theme-dark .nav-link:hover i,
.theme-dark .nav-link.active i { color: #fff; }

/* Nhóm menu + ô tìm menu + nhãn phân nhóm */
.theme-dark .nav-group-toggle { color: var(--ds-ink); }
.theme-dark .sidebar-search input {
    background: var(--ds-ground);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}
.theme-dark .sidebar-search input::placeholder { color: var(--ds-muted); }
.theme-dark .sidebar-search i { color: var(--ds-muted); }
.theme-dark .sidebar-header { border-color: var(--ds-line); }

/* --- Bootstrap: bề mặt --- */
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .list-group-item,
.theme-dark .accordion-item,
.theme-dark .offcanvas,
.theme-dark .toast,
.theme-dark .popover {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}
.theme-dark .card-header,
.theme-dark .card-footer,
.theme-dark .modal-header,
.theme-dark .modal-footer,
.theme-dark .offcanvas-header {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

/* Utility nền sáng: 37 chỗ trong view dùng bg-white/bg-light.
   Sửa ở đây thay vì sửa 37 file — markup giữ nguyên. */
.theme-dark .bg-white,
.theme-dark .bg-light { background-color: var(--ds-surface) !important; }
.theme-dark .text-dark { color: var(--ds-ink) !important; }
.theme-dark .text-muted { color: var(--ds-muted) !important; }
.theme-dark .border,
.theme-dark .border-top,
.theme-dark .border-bottom,
.theme-dark .border-start,
.theme-dark .border-end { border-color: var(--ds-line) !important; }

/* --- Bootstrap: bảng --- */
.theme-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-ink);
    --bs-table-border-color: var(--ds-line);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-striped-color: var(--ds-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
    --bs-table-hover-color: var(--ds-ink);
    color: var(--ds-ink);
}
.theme-dark .table > :not(caption) > * > * { background-color: transparent; color: var(--ds-ink); }
.theme-dark .table-light > :not(caption) > * > *,
.theme-dark .table thead th {
    background-color: var(--ds-muted-bg);
    color: var(--ds-ink);
    border-color: var(--ds-line);
}

/* --- Bootstrap: form --- */
.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .input-group-text {
    background-color: var(--ds-ground);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}
.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: var(--ds-ground);
    border-color: var(--ds-primary);
    color: var(--ds-ink);
    box-shadow: 0 0 0 .2rem rgba(242, 100, 63, .25);
}
.theme-dark .form-control::placeholder { color: var(--ds-muted); }
.theme-dark .form-control:disabled,
.theme-dark .form-select:disabled { background-color: var(--ds-muted-bg); color: var(--ds-muted); }
.theme-dark .form-check-input { background-color: var(--ds-ground); border-color: var(--ds-line); }
.theme-dark .form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }

/* Ô do trình duyệt tự điền (username/password đã lưu): Chrome/Safari ép nền xanh xám
   bằng style nội bộ, background-color thường không đè được. Mẹo duy nhất ăn là phủ
   box-shadow inset dày bằng màu nền, kèm -webkit-text-fill-color cho chữ.
   transition dài để nền tự-điền không nháy màu sáng lúc mới load. */
.theme-dark .form-control:-webkit-autofill,
.theme-dark .form-control:-webkit-autofill:hover,
.theme-dark .form-control:-webkit-autofill:focus,
.theme-dark .form-control:-webkit-autofill:active,
.theme-dark .form-select:-webkit-autofill,
/* Chrome đánh dấu riêng ô vừa được chọn từ dropdown gợi ý bằng pseudo-class nội bộ này;
   thiếu nó thì ô đó vẫn trắng dù các ô autofill khác đã được phủ. */
.theme-dark .form-control:-internal-autofill-selected,
.theme-dark .form-select:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px var(--ds-ground) inset;
    box-shadow: 0 0 0 1000px var(--ds-ground) inset;
    -webkit-text-fill-color: var(--ds-ink);
    caret-color: var(--ds-ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* Ô chỉ đọc bị autofill: box-shadow ở trên phủ nền --ds-ground (nền trang), nhưng ô
   readonly phải xám hơn để nhìn là biết không sửa được. Đặt sau để thắng về thứ tự. */
.theme-dark .form-control[readonly]:-webkit-autofill,
.theme-dark .form-control[readonly]:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px var(--ds-muted-bg) inset;
    box-shadow: 0 0 0 1000px var(--ds-muted-bg) inset;
    -webkit-text-fill-color: var(--ds-muted);
}
/* Icon mũi tên của form-select là ảnh SVG màu đen nhúng sẵn → nền tối không thấy.
   Thay bằng bản SVG màu sáng (data URI, không cần file ngoài). */
.theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239a9aa2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* --- Bootstrap: dropdown item --- */
.theme-dark .dropdown-item { color: var(--ds-ink); }
.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus { background-color: var(--ds-muted-bg); color: var(--ds-ink); }
.theme-dark .dropdown-divider { border-color: var(--ds-line); }
.theme-dark .dropdown-header { color: var(--ds-muted); }

/* --- Bootstrap: nút phụ --- */
.theme-dark .btn-light {
    background-color: var(--ds-muted-bg) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}
.theme-dark .btn-light:hover,
.theme-dark .btn-light:focus,
.theme-dark .btn-light:active { background-color: var(--ds-line) !important; }
.theme-dark .btn-secondary { --bs-btn-bg: #4a423d; --bs-btn-border-color: #4a423d; --bs-btn-hover-bg: #574e48; }
.theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- Bootstrap: alert (nền pastel sáng → nền tối cùng tông) --- */
.theme-dark .alert-success { background-color: var(--ds-ok-bg);   border-color: var(--ds-ok);   color: var(--ds-ok); }
.theme-dark .alert-warning { background-color: var(--ds-warn-bg); border-color: var(--ds-warn); color: var(--ds-warn); }
.theme-dark .alert-danger  { background-color: var(--ds-crit-bg); border-color: var(--ds-crit); color: var(--ds-crit); }
.theme-dark .alert-info    { background-color: var(--ds-info-bg); border-color: var(--ds-info); color: var(--ds-info); }
.theme-dark .alert-secondary { background-color: var(--ds-muted-bg); border-color: var(--ds-line); color: var(--ds-ink); }

/* --- select2 (thư viện ngoài, không dùng token) --- */
.theme-dark .select2-container--bootstrap-5 .select2-selection,
.theme-dark .select2-dropdown,
.theme-dark .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--ds-ground);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}
.theme-dark .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.theme-dark .select2-results__option { color: var(--ds-ink); }
.theme-dark .select2-results__option--highlighted,
.theme-dark .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--ds-primary) !important;
    color: #fff !important;
}
.theme-dark .select2-search__field {
    background-color: var(--ds-ground) !important;
    color: var(--ds-ink) !important;
}
.theme-dark .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ds-muted-bg);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}

/* --- Vá màu cứng ở các module (recruitment/onboarding/pagination/misc) --- */
.theme-dark .rc-pending-card,
.theme-dark .ob-card,
.theme-dark .wf .body,
.theme-dark .stat,
.theme-dark .src-tab,
.theme-dark .timeline .ti::before { background: var(--ds-surface); }
.theme-dark .wf .node.pending .num { background: var(--ds-surface); color: var(--ds-muted); }
.theme-dark .page-link {
    background-color: var(--ds-surface);
    border-color: var(--ds-line);
    color: var(--ds-ink);
}
.theme-dark .page-link:hover { background-color: var(--ds-muted-bg); color: var(--ds-ink); }
.theme-dark .page-item.active .page-link { background-color: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.theme-dark .page-item.disabled .page-link { background-color: var(--ds-ground); color: var(--ds-muted); }

/* --- Overlay loading: nền mờ đen trên nền vốn đã tối → tăng độ đục để còn thấy --- */
.theme-dark .loading-overlay { background: rgba(0, 0, 0, .68); }
.theme-dark .loading-spinner { border-color: var(--ds-line); border-top-color: var(--ds-primary); }

/* --- Ảnh/biểu đồ nền trắng: giảm chói nhẹ, không đảo màu (đảo sẽ sai màu thương hiệu) --- */
.theme-dark img[src*=".png"],
.theme-dark .chart-container canvas { filter: brightness(.92); }

/* --- Nút chuyển theme trên topbar --- */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--ds-line);
    color: var(--ds-muted);
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--ds-muted-bg); color: var(--ds-ink); }
/* Hiện đúng 1 icon theo theme hiện tại: sáng→trăng (bấm để tối), tối→mặt trời. */
.theme-toggle .icon-dark { display: none; }
.theme-dark .theme-toggle .icon-dark { display: inline; }
.theme-dark .theme-toggle .icon-light { display: none; }

/* --- Trang đăng nhập (Layout=null, chỉ link app.css/misc-pages.css/dark.css) ---
   misc-pages.css đã chuyển sang dùng token nên nền/chữ tự tối theo.
   Phần dưới chỉ xử lý những thứ token không với tới được. */

/* Nền tối làm box-shadow đen của thẻ vô hình → thẻ dính liền nền.
   Thêm viền 1px để còn thấy ranh giới thẻ. */
.theme-dark .login-card {
    border: 1px solid var(--ds-line);
    box-shadow: var(--ds-shadow);
}

/* Logo là PNG nền sáng; rule img[src*=".png"] ở trên hạ sáng cả logo login
   làm nó xỉn hẳn. Trả lại độ sáng gốc vì logo là màu thương hiệu. */
.theme-dark .login-logo { filter: none; }

/* Điểm nhấn cam: gạch dưới tiêu đề thay cho mảng màu lớn (nền tối mà tô cam
   diện rộng sẽ chói). */
.theme-dark .login-header h2 { color: var(--ds-ink); }
.theme-dark .login-card .form-check-label { color: var(--ds-muted); }