/* =====================================================================
   app.css — GỘP design-system.css + site.css thành 1 file.
   Phần 1: Design System (tokens, override Bootstrap, component .ds-*).
   Phần 2: site.css cũ (sidebar, topbar, layout). Thứ tự giữ nguyên như
   pipeline trước (design-system trước → site sau) để cascade không đổi.
   ===================================================================== */

/* ============ PHẦN 1: DESIGN SYSTEM ============ */
/* =====================================================================
   Design System — nâng cấp giao diện trên nền Bootstrap 5
   Áp cho toàn project bằng cách override class Bootstrap có sẵn.
   KHÔNG sửa markup view. Giữ brand cam đỏ #d64e2d (từ site.css).
   Load qua WebOptimizer (Program.cs) → tự minify + cache.
   ===================================================================== */

:root {
    /* Brand (đồng bộ site.css) */
    --ds-primary: #d64e2d;
    --ds-primary-hover: #c23d1c;
    --ds-primary-light: #fbeae6;
    --ds-primary-dark: #a83a1d;

    /* Neutrals lệch ấm nhẹ về phía cam — có chủ đích, không xám thuần */
    --ds-ink: #211b18;
    --ds-muted: #756a64;
    --ds-line: #ece6e2;
    --ds-surface: #ffffff;
    --ds-ground: #f7f4f2;

    /* Bo góc + đổ bóng nhất quán */
    --ds-radius: 12px;
    --ds-radius-sm: 8px;
    --ds-shadow-sm: 0 1px 2px rgba(33, 27, 24, .04), 0 1px 3px rgba(33, 27, 24, .06);
    --ds-shadow: 0 2px 8px rgba(33, 27, 24, .06), 0 8px 24px rgba(33, 27, 24, .05);

    /* Map vào biến Bootstrap để component Bootstrap tự dùng brand */
    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: 214, 78, 45;
    --bs-border-color: var(--ds-line);
    --bs-body-color: var(--ds-ink);

    /* Font Inter cho TOÀN PROJECT: override biến font của Bootstrap ở :root
       → mọi component Bootstrap (btn, input, table, modal, dropdown...) dùng
       var(--bs-font-sans-serif) sẽ tự nhận Inter, không cần set từng nơi. */
    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Be Vietnam Pro", system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Áp Inter cho mọi phần tử kế thừa + form controls (một số bị Bootstrap set riêng) */
body, .btn, .form-control, .form-select, .table, input, select, textarea, button, .dropdown-menu, .modal, .nav, .card {
    font-family: var(--bs-font-sans-serif);
}

/* ---------- Nút: gọn lại (chuẩn Shadcn/Primer ~34px) ---------- */
.btn {
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .85rem;
    --bs-btn-font-size: .875rem;   /* 14px */
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-sm {
    --bs-btn-padding-y: .28rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-font-size: .8rem;     /* ~12.8px */
    --bs-btn-border-radius: var(--ds-radius-sm);
}
.btn-lg {
    --bs-btn-padding-y: .6rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-font-size: 1rem;
}

/* Primary theo brand.
   LƯU Ý: Bootstrap phiên bản này set .btn-primary{background-color:#0d6efd} TRỰC TIẾP
   (không qua var --bs-btn-bg), nên phải override thẳng background-color + border-color,
   có !important để thắng rule cùng specificity load sau (site.css). Biến --bs-btn-* giữ
   để các trạng thái focus/disabled cũng đúng brand. */
.btn-primary {
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    --bs-btn-bg: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary-hover);
    --bs-btn-hover-border-color: var(--ds-primary-hover);
    --bs-btn-active-bg: var(--ds-primary-dark);
    --bs-btn-active-border-color: var(--ds-primary-dark);
    --bs-btn-disabled-bg: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--ds-primary-hover) !important;
    border-color: var(--ds-primary-hover) !important;
}
.btn-outline-primary {
    color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    background-color: transparent !important;
    box-shadow: none;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
}
/* Nút phụ (light/outline) không cần đổ bóng */
.btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-link { box-shadow: none; }

/* Nút phụ .btn-light (Xóa bộ lọc / Hủy) — nền xám ấm nhạt, viền nhạt, khớp demo */
.btn-light {
    background-color: var(--ds-ground) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}
.btn-light:hover, .btn-light:active, .btn-light:focus {
    background-color: var(--ds-line) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}

/* ---------- Card: bo mềm, viền ấm, bóng tinh tế ---------- */
.card {
    --bs-card-border-color: var(--ds-line);
    --bs-card-border-radius: var(--ds-radius);
    --bs-card-inner-border-radius: calc(var(--ds-radius) - 1px);
    border: 1px solid var(--ds-line);
    box-shadow: var(--ds-shadow-sm);
}
.card-header {
    background-color: var(--ds-surface);
    border-bottom: 1px solid var(--ds-line);
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .85rem 1.1rem;
}
/* Header đang tô nền brand (bg-primary) — giữ, chỉ đồng bộ màu brand */
.card-header.bg-primary { background-color: var(--ds-primary) !important; }
.card-body { padding: 1.1rem; }

/* ---------- Bảng: header nhã, hover row, số căn cột ---------- */
.table {
    --bs-table-border-color: var(--ds-line);
    margin-bottom: 0;
}
.table > thead > tr > th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--ds-muted);
    background-color: var(--ds-ground);
    border-bottom: 1px solid var(--ds-line);
    white-space: nowrap;
}
.table > tbody > tr > td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--ds-primary-light);
}
/* Số liệu căn cột đều */
.table td.num, .table th.num, .table .text-end { font-variant-numeric: tabular-nums; }

/* ---------- Form: input mềm, focus theo brand ---------- */
.form-control, .form-select {
    border-color: var(--ds-line);
    border-radius: var(--ds-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-light);
}
/* Label form — đồng bộ style demo: chữ nhỏ, in hoa nhẹ, màu muted ấm, giãn chữ */
.form-label {
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-muted);
    margin-bottom: .4rem;
}

/* ---------- Badge: pill mềm hơn (giữ bg-* của Bootstrap) ---------- */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .35em .7em;
    letter-spacing: .01em;
}

/* ---------- Dropdown (menu user topbar...): bo mềm, shadow, item hover cam ---------- */
.dropdown-menu {
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    padding: .35rem;
    margin-top: .4rem;
    min-width: 200px;
}
.dropdown-item {
    border-radius: var(--ds-radius-sm);
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--ds-ink);
    display: flex;
    align-items: center;
    gap: .25rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--ds-primary-light);
    color: var(--ds-primary-dark);
}
.dropdown-item i { width: 18px; text-align: center; color: var(--ds-muted); }
.dropdown-item:hover i, .dropdown-item:focus i { color: var(--ds-primary); }
.dropdown-divider { border-color: var(--ds-line); margin: .35rem .25rem; }

/* ---------- Alert: bo mềm đồng bộ ---------- */
.alert { border-radius: var(--ds-radius-sm); border-color: var(--ds-line); }

/* =====================================================================
   Component tái dùng cho trang Index (filter + table).
   Dùng chung cho mọi module, class có tiền tố .ds-* để không đụng Bootstrap.
   ===================================================================== */

/* Tokens semantic (cho badge trạng thái) */
:root {
    --ds-ok: #2e7d54;   --ds-ok-bg: #e7f3ec;
    --ds-warn: #b9750f; --ds-warn-bg: #fbf0dd;
    --ds-crit: #c23d1c; --ds-crit-bg: #fbe6e1;
    --ds-info: #1f6f8b; --ds-info-bg: #e2f0f4;
    --ds-muted-bg: #f0ebe7;
}

/* ---- Page header (tiêu đề + hành động) ---- */
.ds-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ds-phead h1 { font-size: 1.25rem; margin: 0 0 .2rem; letter-spacing: -.02em; font-weight: 700; }
.ds-phead .ds-sub { color: var(--ds-muted); font-size: .82rem; }
.ds-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Filter card (hiện sẵn, không giấu) ---- */
.ds-filter { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); padding: 1rem; margin-bottom: 1rem; }
.ds-filter-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.ds-filter-top:last-child { margin-bottom: 0; }

/* ---- Quick-filter chips ---- */
.ds-chips { display: flex; gap: .375rem; flex-wrap: wrap; }
.ds-chip {
    border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-muted);
    padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
    cursor: pointer; transition: all .12s ease; user-select: none;
}
.ds-chip:hover { background: var(--ds-ground); }
.ds-chip.active { background: var(--ds-primary-light); color: var(--ds-primary-dark); border-color: var(--ds-primary); }

/* ---- Search box với icon ---- */
.ds-search { position: relative; }
.ds-search input { padding: .5rem .75rem .5rem 2.1rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); font-size: .85rem; min-width: 240px; }
.ds-search input:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-light); }
.ds-search .ds-mag { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ds-muted); pointer-events: none; }
.ds-spacer { flex: 1; }

/* ---- Data table sạch (thay bảng badge cầu vồng) ---- */
.ds-tablecard { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); overflow: hidden; }
.ds-tablecard > .ds-thd { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--ds-line); }
.ds-tablecard > .ds-thd strong { font-size: .9rem; }
.ds-tablecard > .ds-thd .ds-cnt { font-size: .8rem; color: var(--ds-muted); }
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; margin: 0; }
.ds-table th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); padding: .65rem .85rem; background: var(--ds-ground); border-bottom: 1px solid var(--ds-line); white-space: nowrap; }
.ds-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--ds-line); vertical-align: middle; white-space: nowrap; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--ds-primary-light); }
.ds-table .ds-code { color: var(--ds-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.ds-table .ds-num, .ds-table .text-end { font-variant-numeric: tabular-nums; }
/* Checkbox size cố định (không co theo font-size nhỏ của th) — header và row đều nhau */
.ds-table .form-check-input { width: 16px; height: 16px; margin: 0; }
.ds-table th .form-check, .ds-table td .form-check { min-height: auto; margin: 0; padding: 0; display: flex; align-items: center; }
.ds-muted { color: var(--ds-muted); }

/* ---- Date-range box (form Request): mỗi mốc thời gian là 1 box riêng, dễ phân biệt ---- */
.dr-box {
    position: relative;
    background: var(--ds-ground);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    padding: 1rem 1rem .9rem;
    margin-bottom: .85rem;
}
.dr-box .dr-remove {
    position: absolute;
    top: .6rem;
    right: .6rem;
    padding: .25rem .5rem;
    z-index: 2;
}

/* ---- Badge trạng thái (pill nền nhạt + chấm màu) — nơi màu CÓ nghĩa ---- */
.ds-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.ds-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-badge.ok { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-badge.warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-badge.crit { background: var(--ds-crit-bg); color: var(--ds-crit); }
.ds-badge.info { background: var(--ds-info-bg); color: var(--ds-info); }
.ds-badge.neutral { background: var(--ds-muted-bg); color: var(--ds-muted); }
.ds-badge.no-dot::before { display: none; }

/* ---- Link hành động (thay nút màu đậm trong bảng) ---- */
.ds-link { color: var(--ds-primary); font-weight: 600; font-size: .8rem; text-decoration: none; cursor: pointer; }
.ds-link:hover { color: var(--ds-primary-hover); text-decoration: underline; }

/* ---- Empty state ---- */
.ds-empty { text-align: center; padding: 3rem 1rem; color: var(--ds-muted); }
.ds-empty .ds-empty-ic { font-size: 2rem; opacity: .4; margin-bottom: .5rem; }

/* Select fix: canh cao đều + mũi tên gọn (áp cho .form-select thường, KHÔNG đụng select2) */
.form-select:not(.select2-hidden-accessible) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756a64' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right .75rem center;
    background-size: 12px;
}

/* =====================================================================
   Đồng bộ layout với bản demo: nền content ấm, topbar, typography.
   Override site.css (design-system load trước site.css, nên dùng rule
   đủ mạnh cho những chỗ cần thắng).
   ===================================================================== */

/* Font toàn app: hệ font đẹp, khớp demo */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Be Vietnam Pro", system-ui, sans-serif;
    color: var(--ds-ink);
    -webkit-font-smoothing: antialiased;
}

/* Nền vùng nội dung: xám ấm về phía cam (khớp demo --ground), thay #EBEEF3 lạnh */
.page-content { background: var(--ds-ground) !important; }

/* Topbar: viền ấm nhạt (title đã bỏ, chỉ còn user info bên phải) */
.topbar { border-bottom: 1px solid var(--ds-line) !important; }

/* Ghi chú: dự án hiện chỉ có theme sáng (sidebar/topbar sáng cố định).
   Không bật dark mode ở đây để tránh giao diện lệch nửa sáng nửa tối.
   Khi nào làm dark mode toàn diện thì thêm token dark cùng lúc. */


/* ============ PHẦN 2: SITE (sidebar/topbar/layout) ============ */
:root {
    --primary-color: #d64e2d;
    --primary-hover: #c23d1c;
    --primary-light: #f8e6e3;
    --primary-dark: #a83a1d;
}

/* --- Base Reset --- */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* --- Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    background: #fff;
    border-right: 1px solid var(--ds-line);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

    .sidebar.collapsed {
        width: 80px;
    }

/* --- Sidebar Header --- */
.sidebar-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ds-line);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

    .sidebar-header img.logo {
        height: 44px;
        min-width: 0;
        object-fit: contain;
        transition: all 0.3s ease;
    }

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

/* Thu gọn: giấu logo, chỉ chừa nút mở lại cho đỡ chật trong 80px. */
.sidebar.collapsed .sidebar-header img.logo {
    display: none;
}

/* --- Navigation Container with Scroll --- */
.sidebar nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
    display: block;
}

    /* Custom Scrollbar for Sidebar */
    .sidebar nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar nav::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

        .sidebar nav::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

/* --- Navigation Links --- */
.nav-link {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    color: #333;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: 10px;
    margin: 3px 12px;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

    .nav-link i {
        font-size: 16px;
        transition: all 0.3s ease;
        width: 22px;
        text-align: center;
    }

    .nav-link span {
        margin-left: 10px;
        transition: all 0.3s ease;
    }

    .nav-link.active {
        background-color: var(--ds-primary);
        color: #fff;
    }

    .nav-link:hover {
        background-color: var(--ds-primary-hover);
        color: #fff;
    }

        .nav-link:hover i {
            transform: scale(1.1);
        }

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 10px;
    width: 48px;
    height: 48px;
    margin: 8px auto;
}

    .sidebar.collapsed .nav-link span {
        display: none;
    }

/* --- Nhóm menu thu gọn được (accordion) --- */
.nav-group-toggle {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    margin: 3px 12px;
    padding: 9px 18px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .nav-group-toggle:hover {
        background-color: var(--ds-ground);
        color: #333;
    }

    .nav-group-toggle > i:first-child {
        width: 22px;
        font-size: 13px;
        text-align: center;
        flex-shrink: 0;
    }

    .nav-group-toggle > span {
        margin-left: 10px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.nav-group-caret {
    font-size: 10px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.nav-group.open > .nav-group-toggle .nav-group-caret {
    transform: rotate(180deg);
}

/* Đóng/mở bằng grid-template-rows để animate được mà không cần biết chiều cao. */
/* Kỹ thuật 0fr -> 1fr chỉ đúng khi grid có ĐÚNG 1 hàng, nên các nav-link phải
   nằm trong 1 lớp bọc .nav-group-items; để trần thì mỗi link là 1 hàng riêng
   và chỉ hàng đầu bị thu lại. */
.nav-group-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

    .nav-group-body > .nav-group-items {
        overflow: hidden;
        min-height: 0;
    }

.nav-group.open > .nav-group-body {
    grid-template-rows: 1fr;
}

/* Thụt vào để thấy rõ quan hệ cha–con (chỉ khi sidebar mở rộng). */
.sidebar:not(.collapsed) .nav-group-body .nav-link {
    padding-left: 30px;
}

/* Thu gọn: ẩn nút nhóm, luôn mở phần thân -> còn lại danh sách icon phẳng. */
.sidebar.collapsed .nav-group-toggle {
    display: none;
}

.sidebar.collapsed .nav-group-body {
    grid-template-rows: 1fr;
}

/* Ranh giới giữa các nhóm khi thu gọn, thay cho tiêu đề đã ẩn. */
.sidebar.collapsed .nav-group {
    border-top: 1px solid var(--ds-line);
    margin-top: 8px;
    padding-top: 8px;
}

/* --- Ô tìm menu --- */
.sidebar-search {
    position: relative;
    padding: 10px 12px;
    flex-shrink: 0;
}

    .sidebar-search i {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #9ca3af;
        pointer-events: none;
    }

    .sidebar-search input {
        padding-left: 32px;
        font-size: 13px;
        height: 36px;
        border-radius: 8px;
    }

.sidebar.collapsed .sidebar-search {
    display: none;
}

/* Thông báo khi lọc không ra kết quả. */
.nav-empty {
    display: none;
    padding: 16px 18px;
    font-size: 12.5px;
    color: #9ca3af;
    text-align: center;
}

.sidebar.searching .nav-empty.show {
    display: block;
}

/* Khi đang lọc: bỏ thụt lề & luôn mở nhóm để kết quả hiện hết. */
.sidebar.searching .nav-group-body {
    grid-template-rows: 1fr;
}

.sidebar.searching .nav-group-toggle {
    display: none;
}

.sidebar.searching .nav-link.nav-hidden {
    display: none;
}

.sidebar.searching .nav-group.nav-hidden {
    display: none;
}

/* --- Nút thu gọn / đóng trên header sidebar --- */
.sidebar-toggle,
.sidebar-close {
    border: 0;
    background: transparent;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .sidebar-toggle:hover,
    .sidebar-close:hover {
        background-color: var(--ds-ground);
        color: #333;
    }

/* Nút đóng (X) chỉ dùng cho drawer mobile. */
.sidebar-close {
    display: none;
}

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* --- Nền mờ của drawer (chỉ mobile) --- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* --- Nút hamburger trên topbar (chỉ mobile) --- */
.topbar-burger {
    display: none;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
}

    .topbar-burger:hover {
        background-color: var(--ds-ground);
    }

.submenu {
    margin-left: 1.5rem !important;
    white-space: normal;
    word-break: break-word;
}

    .submenu a.nav-link {
        white-space: normal;
        word-break: break-word;
    }

/* --- Main Layout --- */
.page-container {
    margin-left: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
}

.sidebar.collapsed + .page-container {
    margin-left: 80px;
}

/* --- Top Bar --- */
.topbar {
    height: 60px;
    background: white;
    border-bottom: 1px solid var(--ds-line);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* --- Page Content --- */
.page-content {
    flex-grow: 1;
    overflow-y: auto;
    background: var(--ds-ground);
    padding: 20px;
}

/* ============ MOBILE: sidebar thành drawer trượt ============ */
@media (max-width: 768px) {
    /* Drawer ẩn ngoài mép trái, trượt vào khi có .open. */
    .sidebar,
    .sidebar.collapsed {
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }

        .sidebar.open {
            transform: translateX(0);
            box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
        }

    /* Trạng thái "thu gọn" của desktop không áp dụng cho mobile:
       trả mọi thứ về dạng đầy đủ để drawer luôn có nhãn chữ. */
    .sidebar.collapsed .sidebar-header {
        justify-content: space-between;
    }

    .sidebar.collapsed .sidebar-header img.logo {
        display: block;
        height: 40px;
    }

    .sidebar.collapsed .sidebar-search {
        display: block;
    }

    .sidebar.collapsed .nav-link {
        justify-content: flex-start;
        width: auto;
        height: auto;
        padding: 11px 18px;
        margin: 3px 12px;
    }

        .sidebar.collapsed .nav-link span {
            display: inline;
        }

    .sidebar.collapsed .nav-group-toggle {
        display: flex;
    }

    .sidebar.collapsed .nav-group {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .sidebar.collapsed .nav-group-body {
        grid-template-rows: 0fr;
    }

    .sidebar.collapsed .nav-group.open > .nav-group-body {
        grid-template-rows: 1fr;
    }

    .sidebar.collapsed .nav-group-body .nav-link {
        padding-left: 30px;
    }

    /* Nút thu gọn vô nghĩa trên mobile -> thay bằng nút đóng drawer. */
    .sidebar-toggle {
        display: none;
    }

    .sidebar-close {
        display: flex;
    }

    /* Nội dung chiếm toàn bộ chiều ngang, không chừa chỗ cho sidebar. */
    .page-container,
    .sidebar.collapsed + .page-container {
        margin-left: 0;
    }

    .topbar-burger {
        display: flex;
    }

    .sidebar-backdrop {
        display: block;
        pointer-events: none;
    }

        .sidebar-backdrop.show {
            opacity: 1;
            pointer-events: auto;
        }

    /* Drawer đang mở: chặn thao tác cuộn lọt xuống nội dung phía sau. */
    body.drawer-open .page-content {
        overflow: hidden;
    }

    /* Vùng chạm >= 44px cho ngón tay. */
    .nav-link,
    .nav-group-toggle {
        min-height: 44px;
    }

    .topbar {
        padding: 0 12px;
    }

    /* Tên + role chiếm nhiều chỗ trên màn nhỏ; đã có trong dropdown avatar. */
    .topbar-username,
    .topbar-role {
        display: none;
    }

    .page-content {
        padding: 12px;
    }
}

/* --- Avatar Circle --- */
.avatar {
    background: var(--ds-primary);
    color: #fff;
    font-size: 14px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Avatar with Primary Color --- */
.avatar-primary {
    background-color: var(--ds-primary);
    color: #fff;
    font-size: 14px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .avatar-primary:hover {
        background-color: var(--ds-primary-hover);
        transform: scale(1.05);
    }

.btn-check:focus + .btn-light,
.btn-light:focus {
    box-shadow: none !important;
}

/* CKEditor Styles */
.ck-editor__editable {
    min-height: 300px !important;
}

.ck-editor__editable_inline {
    padding: 0 1rem !important;
}

.ck.ck-editor {
    width: 100%;
}

.ck.ck-content {
    font-size: 14px;
    line-height: 1.6;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: none;
}

/* Button Color Override - Force white text for all colored buttons */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
    color: #fff !important;
}

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-danger:hover,
    .btn-warning:hover,
    .btn-info:hover,
    .btn-dark:hover {
        color: #fff !important;
    }

/* =====================================================================
   OVERRIDE CUỐI — quét sạch mọi màu xanh Bootstrap còn sót về brand cam.
   Đặt cuối file để thắng bootstrap + pagination.css (load trước app.css).
   ===================================================================== */

/* Pagination: trang active nền cam, số trang chữ cam */
.page-link {
    color: var(--ds-primary);
    border-color: var(--ds-line);
}
.page-link:hover {
    color: var(--ds-primary-hover);
    background-color: var(--ds-ground);
    border-color: var(--ds-line);
}
.page-item.active .page-link {
    color: #fff !important;
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
}
.page-link:focus {
    box-shadow: 0 0 0 .2rem var(--ds-primary-light);
    color: var(--ds-primary);
}

/* Link, text-primary, bg-primary theo brand */
a { color: var(--ds-primary); }
a:hover { color: var(--ds-primary-hover); }
.text-primary { color: var(--ds-primary) !important; }
.bg-primary { background-color: var(--ds-primary) !important; }
.link-primary { color: var(--ds-primary) !important; }

/* Ô chỉ đọc: Bootstrap chỉ tô nền cho :disabled, không tô cho [readonly] — nên các view
   trước đây phải ghi style="background-color:#f8f9fa" inline, và inline style thắng mọi
   selector nên dark mode không đè được (ô trắng lòi trên nền tối). Gom về đây để màu
   readonly bám token, tự đúng ở cả 2 theme. Không dùng cho input[type=time] khoá theo ca
   — chỗ đó đã có .bg-light riêng. */
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--ds-muted-bg);
    color: var(--ds-muted);
    cursor: default;
}

/* Form check (radio/switch) đã tick → cam thay xanh */
.form-check-input:checked {
    background-color: var(--ds-primary);
    border-color: var(--ds-primary);
}
.form-check-input:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 .25rem var(--ds-primary-light);
}

/* === Profile page === */
.pf-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.pf-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--ds-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.pf-hero-main { flex: 1 1 auto; min-width: 0; }
.pf-hero-main h1 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.02em; }
.pf-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--ds-muted); font-size: .82rem; }
.pf-hero-meta .pf-sep { color: var(--ds-line); }
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 991px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.pf-card-hd { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--ds-line); font-size: .82rem; font-weight: 600; color: var(--ds-ink); }
.pf-card-hd i { color: var(--ds-primary); }
.pf-card-bd { padding: 1rem; flex: 1 1 auto; }
.pf-dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; margin: 0; }
.pf-dl dt { color: var(--ds-muted); font-size: .8rem; font-weight: 500; margin: 0; }
.pf-dl dd { margin: 0; font-size: .85rem; color: var(--ds-ink); word-break: break-word; }
.pf-addr { margin: 0 0 .9rem; font-size: .9rem; color: var(--ds-ink); padding: .6rem .75rem; background: var(--ds-ground); border-radius: var(--ds-radius-sm); }

/* === PowerBI card grid === */
.pbi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.pbi-card { display: flex; flex-direction: column; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); padding: 1.25rem; transition: box-shadow .15s, border-color .15s; }
.pbi-card:hover { box-shadow: var(--ds-shadow); border-color: var(--ds-primary-light); }
.pbi-card-ic { width: 44px; height: 44px; border-radius: var(--ds-radius-sm); background: var(--ds-primary-light); color: var(--ds-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: .9rem; }
.pbi-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; letter-spacing: -.01em; }
.pbi-card-desc { font-size: .85rem; color: var(--ds-muted); margin: 0 0 1rem; flex: 1 1 auto; }
.pbi-card-roles { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }

/* === Dashboard (Home) === */
.dash-hi { display:flex; align-items:center; gap:1rem; background:var(--ds-surface); border:1px solid var(--ds-line);
  border-left:4px solid var(--ds-primary); border-radius:var(--ds-radius); box-shadow:var(--ds-shadow-sm);
  padding:1.15rem 1.4rem; margin-bottom:1rem; }
.dash-hi-ic { width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--ds-primary-light);
  color:var(--ds-primary); display:flex; align-items:center; justify-content:center; font-size:20px; }
.dash-hi h1 { font-size:1.2rem; font-weight:700; margin:0; letter-spacing:-.02em; }
.dash-hi-sub { color:var(--ds-muted); font-size:.85rem; margin-top:.15rem; }

.dash-card { background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-radius);
  box-shadow:var(--ds-shadow-sm); overflow:hidden; margin-bottom:1rem; }
.dash-card-hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--ds-line); }
.dash-card-hd h5 { font-size:.9rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.5rem; }
.dash-card-hd h5 i { color:var(--ds-primary); }
.dash-card-bd { padding:1.1rem; }

.dash-mgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:820px){ .dash-mgrid{ grid-template-columns:repeat(2,1fr); } }
.dash-metric { border:1px solid var(--ds-line); border-radius:var(--ds-radius-sm); padding:1rem;
  display:flex; flex-direction:column; gap:.6rem; transition:box-shadow .15s, transform .15s; }
.dash-metric:hover { box-shadow:var(--ds-shadow); transform:translateY(-2px); }
.dm-top { display:flex; justify-content:space-between; align-items:flex-start; }
.dm-lbl { color:var(--ds-muted); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.03em; }
.dm-val { font-size:1.5rem; font-weight:700; margin-top:.15rem; font-variant-numeric:tabular-nums; line-height:1.1; }
.dm-val small { font-size:.72rem; color:var(--ds-muted); font-weight:500; }
.dm-note { font-size:.75rem; color:var(--ds-muted); display:flex; align-items:center; gap:.35rem; margin-top:auto; }

.dash-bar { height:6px; border-radius:999px; background:var(--ds-line); overflow:hidden; }
.dash-bar > span { display:block; height:100%; border-radius:999px; background:var(--ds-muted); }
.dash-bar.ok > span, .dash-bar.bg-success > span { background:var(--ds-ok); }
.dash-bar.warn > span, .dash-bar.bg-warning > span { background:var(--ds-warn); }
.dash-bar.crit > span, .dash-bar.bg-danger > span { background:var(--ds-crit); }
.dash-bar.info > span, .dash-bar.bg-info > span { background:var(--ds-info); }

.dash-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; align-items:start; }
@media(max-width:900px){ .dash-row2{ grid-template-columns:1fr; } }
.dash-row2 > .dash-card { margin-bottom:0; }
.dash-stack { display:flex; flex-direction:column; gap:1rem; }
.dash-stack > .dash-card { margin-bottom:0; }

.dm-lgrow { display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.4rem; }
.dm-foot { margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--ds-line); font-size:.8rem; color:var(--ds-muted); }
.dm-foot strong { color:var(--ds-ink); }

.dash-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.dash-tile { background:var(--ds-ground); border-radius:var(--ds-radius-sm); padding:.8rem; text-align:center; }
.dash-tile b { font-size:1.35rem; font-weight:700; display:block; }
.dash-tile.ok b { color:var(--ds-ok); }
.dash-tile small { color:var(--ds-muted); font-size:.72rem; }

.dash-lst { display:flex; flex-direction:column; }
.dash-lst-item { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--ds-line); }
.dash-lst-item:last-child { border-bottom:0; }
.dli-main strong { font-size:.9rem; }
.dli-meta { color:var(--ds-muted); font-size:.76rem; margin-top:.2rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.dli-sep { color:var(--ds-line); }

/* map Bootstrap badge classes từ Model → ds-badge semantic (dashboard) */
.ds-badge.bg-success { background:var(--ds-ok-bg); color:var(--ds-ok); }
.ds-badge.bg-warning { background:var(--ds-warn-bg); color:var(--ds-warn); }
.ds-badge.bg-danger { background:var(--ds-crit-bg); color:var(--ds-crit); }
.ds-badge.bg-info { background:var(--ds-info-bg); color:var(--ds-info); }
.ds-badge.bg-secondary { background:var(--ds-muted-bg); color:var(--ds-muted); }

/* === Modal (design system) — áp chung cho mọi modal, không cần sửa từng view === */
.modal-content {
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
}
/* Header MỌI modal đồng bộ 1 kiểu: nền ground nhẹ, chữ ink, icon cam — dù có class bg-* hay không.
   !important để thắng các bg-primary/success/dark... đậm mà view cũ gắn trực tiếp. */
.modal-header {
    background: var(--ds-ground) !important;
    color: var(--ds-ink) !important;
    border-bottom: 1px solid var(--ds-line);
    padding: 1rem 1.25rem;
    align-items: center;
}
.modal-header .modal-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ds-ink);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.modal-header .modal-title i { color: var(--ds-primary); }
/* nút close: đổi từ btn-close-white (dành cho nền đậm) về mặc định để nổi trên nền sáng */
.modal-header .btn-close.btn-close-white {
    filter: none;
}
.modal-body { padding: 1.25rem; }
.modal-footer {
    border-top: 1px solid var(--ds-line);
    padding: .85rem 1.25rem;
    gap: .5rem;
}
.modal-footer > * { margin: 0; }
/* nút Hủy/Đóng trong footer: dùng tone nhẹ thay btn-secondary xám đậm */
.modal-footer .btn-secondary {
    background: var(--ds-surface) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}
.modal-footer .btn-secondary:hover {
    background: var(--ds-ground) !important;
    border-color: var(--ds-line) !important;
    color: var(--ds-ink) !important;
}
/* Nút hành động chính trong modal-footer: đồng bộ 1 màu cam (success/dark/info xanh-lá/đen → cam) */
.modal-footer .btn-success,
.modal-footer .btn-dark,
.modal-footer .btn-info {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: #fff !important;
}
.modal-footer .btn-success:hover,
.modal-footer .btn-dark:hover,
.modal-footer .btn-info:hover {
    background: var(--ds-primary-hover) !important;
    border-color: var(--ds-primary-hover) !important;
    color: #fff !important;
}
.modal-backdrop.show { opacity: .4; }

/* === Employee form (Detail/New) === */
/* card-header bg-light (form section) → nền ground nhẹ, icon cam đồng bộ design system */
.card-header.bg-light {
    background-color: var(--ds-ground) !important;
    border-bottom: 1px solid var(--ds-line);
    color: var(--ds-ink);
}
.card-header.bg-light i.text-primary { color: var(--ds-primary) !important; }
.card-header.bg-light h6 { font-size: .9rem; font-weight: 700; }

/* === Toast (showToast) — dùng tokens semantic design system thay màu Bootstrap chói === */
.toast { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden; }
.toast .toast-header { border-bottom: none; }
/* success → ok, error/danger → crit, info → info, warning → warn (đều warm) */
.toast.bg-success, .toast.bg-success .toast-header { background-color: var(--ds-ok) !important; }
.toast.bg-danger,  .toast.bg-danger .toast-header  { background-color: var(--ds-crit) !important; }
.toast.bg-info,    .toast.bg-info .toast-header    { background-color: var(--ds-info) !important; }
.toast.bg-warning, .toast.bg-warning .toast-header { background-color: var(--ds-warn) !important; }
.toast .toast-body { background: var(--ds-surface); color: var(--ds-ink); }