/* ============================================================================
   hrm-theme.css — Design system của Smart HRM. NGUỒN SỰ THẬT DUY NHẤT cho màu,
   bo góc, đổ bóng và kích thước điều khiển.

   Nạp CUỐI CÙNG trong index.html: custom property được giải ở thời điểm dùng,
   nên khai báo sau vẫn áp cho var() viết ở các file nạp trước.

   Cấu trúc (đi theo tinh thần Tailwind: token → tiện ích → component,
   nhưng không kéo framework vào vì Bootstrap 5 đã có sẵn tầng utility):
     1. TOKEN        — bảng màu, thang bo góc/bóng/khoảng cách
     2. CẦU NỐI      — trỏ token cũ của dashboard.css / popup.css / Smart.Blazor
                       về token mới, để 3 hệ đang tồn tại nói cùng một ngôn ngữ
     3. COMPONENT    — .hrm-btn, .hrm-card, .hrm-badge, .hrm-toolbar...
     4. THƯ VIỆN     — chuẩn hoá Syncfusion / BootstrapBlazor / Smart.Blazor
                       về cùng một ngôn ngữ thị giác
   ========================================================================= */

/* ===========================================================================
   1. TOKEN
   ======================================================================== */
:root {
    /* --- Thương hiệu: lấy từ logo Smart HRM --- */
    /* Cả thang này do js/theme-settings.js ghi đè inline lên <html> khi người dùng
       đổi bảng màu. Giá trị dưới đây là bậc mặc định (xanh lá) cho lần chạy đầu.
       Thêm bậc nào ở đây thì PHẢI thêm cả trong theme-settings.js, không thì bậc đó
       đứng yên màu xanh trong khi các bậc khác đổi. */
    --hrm-primary: #14684A; /* xanh lá đậm — nền logo, màu chính */
    --hrm-primary-800: #0A3A28; /* nhấn sâu nhất */
    --hrm-primary-700: #0D452F; /* pressed */
    --hrm-primary-600: #10563D; /* hover / pressed */
    --hrm-primary-400: #2E9B72; /* viền, icon phụ */
    --hrm-primary-300: #7FC4A6; /* viền nhạt, trạng thái mờ */
    --hrm-primary-100: #D3E9DE; /* nền nhấn */
    --hrm-primary-50: #E8F3EE; /* nền hover, hàng đang chọn */
    --hrm-accent: #3FBF7F; /* xanh sáng — chữ "Hrm" trong logo */
    --hrm-orange: #F5931E; /* cam trong logo */

    /* --- Màu ngữ nghĩa --- */
    --hrm-success: #15803D;
    --hrm-success-bg: #DCFCE7;
    --hrm-warn: #B45309; /* chữ cảnh báo (đủ tương phản trên nền vàng) */
    --hrm-warn-bg: #FEF3C7;
    --hrm-danger: #B42318; /* CHỈ dùng cho xoá / lỗi */
    --hrm-danger-bg: #FEE4E2;
    --hrm-info: #1D4ED8;
    --hrm-info-bg: #DBEAFE;

    /* --- Trung tính (giữ thang xám Tailwind mà dashboard.css đã chọn) --- */
    --hrm-bg-body: #F3F4F6;
    --hrm-bg-white: #FFFFFF;
    --hrm-bg-hover: #F9FAFB;
    --hrm-surface: #FFFFFF;
    --hrm-surface-2: #F4F7F5; /* nền sidebar, vùng phụ */
    --hrm-text-light: #9CA3AF;
    --hrm-text-muted: #6B7280;
    --hrm-text-normal: #4B5563;
    --hrm-text-dark: #374151;
    --hrm-text-bold: #1F2937;
    --hrm-ink: #1F2937;
    --hrm-border-light: #F3F4F6;
    --hrm-border-normal: #E5E7EB;
    --hrm-border-dark: #D1D5DB;
    --hrm-rule: #E5E7EB;

    /* Lưới: 3 núm chỉnh độ "rõ" của bảng, sửa ở đây là đổi cho MỌI grid.
       Sọc phải đủ khác trắng để mắt lần được dòng, nhưng vẫn nhạt hơn hẳn
       --hrm-primary-50 (#E8F3EE) để không lẫn với hàng đang chọn. */
    --hrm-grid-stripe: #F4F6F5; /* nền hàng chẵn */
    --hrm-grid-line: var(--hrm-border-normal); /* đường kẻ giữa các hàng/cột */
    --hrm-grid-row-hover: #F0F7F3; /* hover — nhạt hơn hàng đang chọn 1 bậc */

    /* Dải nền của form phiếu (khối thông tin chung ở trên, khối tổng hợp ở dưới).
       Đi theo tuỳ chọn "Màu nền danh sách và chi tiết" — theme-settings.js ghi đè.
       Đậm hơn --hrm-grid-stripe một bậc: dải này nằm ngay trên lưới, bằng màu sọc
       hàng thì hai vùng dính vào nhau, không còn thấy đâu là vùng nhập liệu. */
    --hrm-form-band: #EFF1F2;

    /* --- Bo góc --- */
    --hrm-radius-sm: 4px;
    --hrm-radius-md: 6px;
    --hrm-radius-lg: 10px;
    --hrm-radius: var(--hrm-radius-md);

    /* --- Đổ bóng --- */
    --hrm-shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, .05);
    --hrm-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --hrm-shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, .12);

    /* --- Kích thước điều khiển: dày đặc, hợp phần mềm nghiệp vụ --- */
    --hrm-control-h: 32px;
    --hrm-control-h-sm: 26px;
    --hrm-row-h: 34px;
    --hrm-header-h: 34px;
    --hrm-font-size: 13px;
    --hrm-font-size-sm: 12px;

    /* --- Khoảng cách --- */
    --hrm-gap-1: 4px;
    --hrm-gap-2: 8px;
    --hrm-gap-3: 12px;
    --hrm-gap-4: 16px;
    --hrm-gap-5: 24px;
}

/* ===========================================================================
   2. CẦU NỐI — token cũ trỏ về token mới
   Nhờ khối này, dashboard.css, popup.css, smart.default.css và Smart.Blazor
   đổi màu theo brand mà KHÔNG phải sửa từng file.
   ======================================================================== */
:root {
    /* dashboard.css — vốn dùng xanh dương/đỏ Tailwind */
    --hrm-primary-blue: var(--hrm-primary);
    --hrm-danger-red: var(--hrm-danger);

    /* popup.css + smart.default.css — vốn dùng xanh #2ca01c */
    --primary-btn-background-color: var(--hrm-primary);
    --primary-btn--hover-background-color: var(--hrm-primary-600);
    --primary-btn--active-background-color: var(--hrm-primary-600);
    --primary-btn--focus-background-color: var(--hrm-primary);
    --primary-btn-background-color-opacity: rgba(var(--smart-primary-rgb), .2);
    --control-border-color--active: var(--hrm-primary);
    --dropdown__item--hover-text-color: var(--hrm-primary);
    --tab__item--active-text-color: var(--hrm-primary);
    --tab__border-color: var(--hrm-border-normal);
    --grid-body__line-hover-background-color: var(--hrm-primary-50);
    --main-background-color: var(--hrm-bg-body);
    --upload-border-color: var(--hrm-border-dark);

    /* smart-custom.css */
    --hover-grid: var(--hrm-primary-50);

    /* Smart.Blazor / Smart Web Components */
    --smart-primary: var(--hrm-primary);
    --smart-primary-rgb: 20, 104, 74;
    --smart-success: var(--hrm-success);
    --smart-ui-state-active: var(--hrm-primary);
    --smart-ui-state-border-active: var(--hrm-primary);
    --smart-ui-state-hover: var(--hrm-primary-50);
    --smart-ui-state-border-hover: var(--hrm-primary-100);
    --smart-editor-selection: var(--hrm-primary);

    /* Syncfusion — biến gốc của theme bootstrap5.3 (khai báo ở :root trong
       bundle CDN, nên khai báo lại ở đây thắng vì file này nạp sau).
       Đổi ở đây là ĐỔI TOÀN BỘ Syncfusion cùng lúc: nút, checkbox, radio, tab,
       ô nhập, phân trang, lịch, dòng đang chọn trong lưới...
       Cách này thay cho việc ghi đè từng rule — nhiều rule của Syncfusion có
       độ đặc hiệu cao hơn (vd .e-checkbox:focus+.e-frame.e-check = 0,4,0)
       nên ghi đè lẻ sẽ thua ở đúng trạng thái focus/hover.

       PHẢI trỏ qua thang --hrm-primary-*, KHÔNG ghi thẳng mã màu: theme-settings.js
       chỉ ghi đè thang --hrm-*, nên hex cứng ở đây sẽ đứng yên màu xanh dù người dùng
       đã đổi bảng màu — đúng triệu chứng "một số nút vẫn xanh, ô đang chọn vẫn xanh".
       Những control nào có rule riêng theo --hrm-* thì đổi màu, phần còn lại rơi về
       các biến này nên lệch tông. */
    --color-sf-primary: var(--hrm-primary);
    --color-sf-primary-bg-color-hover: var(--hrm-primary-600);
    --color-sf-primary-bg-color-pressed: var(--hrm-primary-700);
    --color-sf-primary-bg-color-disabled: rgba(var(--smart-primary-rgb), .65);
    --color-sf-primary-border-color-hover: var(--hrm-primary-600);
    --color-sf-primary-border-color-pressed: var(--hrm-primary-700);
    --color-sf-primary-shadow: var(--smart-primary-rgb);
    --color-sf-primary-dark: var(--hrm-primary-600);
    --color-sf-primary-darker: var(--hrm-primary-800);
    --color-sf-primary-light: var(--hrm-primary-300);
    --color-sf-primary-lighter: var(--hrm-primary-100);

    /* Màu MỤC ĐANG CHỌN. Đây là bộ biến RIÊNG, không dẫn xuất từ --color-sf-primary:
       theme để cứng #0d6efd (xanh bootstrap). Đó là lý do item đang chọn trong dropdown
       vẫn ra một dải xanh dương đặc dù bảng màu đã đổi.
       Dùng cặp nền nhạt + chữ đậm cho khớp hàng đang chọn của lưới
       (.e-rowcell.e-selectionbackground ở smart-custom.css), không dùng nền đặc.
       PHẢI đổi cả text-color đi kèm: mặc định là #fff, để nguyên thì chữ trắng nằm
       trên nền nhạt, mất hẳn chữ.
       Hai biến này được dùng 34 và 14 lần trong theme (dropdown, listview, lịch,
       menu...) nên sửa ở đây là đổi khá rộng — đó cũng chính là ý đồ. */
    --color-sf-content-bg-color-selected: var(--hrm-primary-50);
    --color-sf-content-text-color-selected: var(--hrm-primary-ink, var(--hrm-primary));
    --color-sf-flyout-bg-color-pressed: var(--hrm-primary-50);
    --color-sf-flyout-text-color-pressed: var(--hrm-primary-ink, var(--hrm-primary));

    /* BootstrapBlazor */
    --bb-color-smart: var(--hrm-primary);
    --bb-primary: var(--hrm-primary);

    /* Bootstrap 5 — để .text-primary, .border-primary, .link-primary theo brand */
    --bs-primary: var(--hrm-primary);
    /* Cùng lý do như khối Syncfusion: theme-settings.js ghi --smart-primary-rgb theo
       bảng màu, còn bộ ba số cứng ở đây thì không đổi. */
    --bs-primary-rgb: var(--smart-primary-rgb);
    --bs-link-color: var(--hrm-primary);
    --bs-link-hover-color: var(--hrm-primary-600);
    --bs-border-color: var(--hrm-border-normal);
}

/* ===========================================================================
   3. COMPONENT — dùng chung cho mọi màn hình
   ======================================================================== */

/* --- Nút --- */
.hrm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--hrm-gap-2);
    height: var(--hrm-control-h);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--hrm-radius);
    background: transparent;
    font-size: var(--hrm-font-size);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .hrm-btn:disabled,
    .hrm-btn[disabled] {
        opacity: .5;
        cursor: not-allowed;
    }

    .hrm-btn:focus-visible {
        outline: 2px solid var(--hrm-primary-400);
        outline-offset: 1px;
    }

/* Chính — mỗi màn hình chỉ nên có MỘT nút này */
.hrm-btn--primary {
    background: var(--hrm-primary);
    border-color: var(--hrm-primary);
    color: #fff;
}

    .hrm-btn--primary:hover {
        background: var(--hrm-primary-600);
        border-color: var(--hrm-primary-600);
        color: #fff;
    }

/* Phụ — viền, dùng cho phần lớn hành động trên toolbar */
.hrm-btn--outline {
    border-color: var(--hrm-border-dark);
    color: var(--hrm-text-dark);
}

    .hrm-btn--outline:hover {
        background: var(--hrm-primary-50);
        border-color: var(--hrm-primary-400);
        color: var(--hrm-primary);
    }

/* Chìm — hành động thứ yếu, không viền */
.hrm-btn--ghost {
    color: var(--hrm-text-normal);
}

    .hrm-btn--ghost:hover {
        background: var(--hrm-bg-hover);
        color: var(--hrm-primary);
    }

/* Phá huỷ — CHỈ cho xoá */
.hrm-btn--danger {
    border-color: var(--hrm-border-dark);
    color: var(--hrm-danger);
}

    .hrm-btn--danger:hover {
        background: var(--hrm-danger-bg);
        border-color: var(--hrm-danger);
    }

.hrm-btn--sm {
    height: var(--hrm-control-h-sm);
    padding: 0 8px;
    font-size: var(--hrm-font-size-sm);
}

.hrm-btn--icon {
    width: var(--hrm-control-h);
    padding: 0;
    justify-content: center;
}

/* --- Thẻ --- */
.hrm-card {
    background: var(--hrm-surface);
    border: 1px solid var(--hrm-border-normal);
    border-radius: var(--hrm-radius-lg);
    box-shadow: var(--hrm-shadow-sm);
}

.hrm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrm-gap-3);
    padding: var(--hrm-gap-3) var(--hrm-gap-4);
    border-bottom: 1px solid var(--hrm-border-light);
}

.hrm-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hrm-text-muted);
}

.hrm-card__body {
    padding: var(--hrm-gap-4);
}

/* --- Nhãn trạng thái --- */
.hrm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--hrm-font-size-sm);
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

    /* chấm tròn dẫn trước, giúp phân biệt khi in trắng đen */
    .hrm-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: none;
    }

.hrm-badge--success {
    background: var(--hrm-success-bg);
    color: var(--hrm-success);
}
/* đang làm việc, đã duyệt */
.hrm-badge--warn {
    background: var(--hrm-warn-bg);
    color: var(--hrm-warn);
}
/* chờ duyệt, tạm ngưng */
.hrm-badge--danger {
    background: var(--hrm-danger-bg);
    color: var(--hrm-danger);
}
/* nghỉ việc, từ chối */
.hrm-badge--info {
    background: var(--hrm-info-bg);
    color: var(--hrm-info);
}
/* nháp, đang xử lý */
.hrm-badge--muted {
    background: var(--hrm-border-light);
    color: var(--hrm-text-muted);
}

/* --- Thanh công cụ: một bố cục duy nhất cho mọi màn hình danh sách --- */
.hrm-toolbar {
    display: flex;
    align-items: center;
    gap: var(--hrm-gap-2);
    padding: var(--hrm-gap-2) 0;
    flex-wrap: wrap;
}

.hrm-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--hrm-gap-2);
}

.hrm-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--hrm-gap-1);
    margin-left: auto; /* hành động luôn dạt phải */
}

.hrm-toolbar__sep {
    width: 1px;
    height: 20px;
    background: var(--hrm-border-normal);
    margin: 0 var(--hrm-gap-1);
}

/* --- Tiêu đề trang --- */
.hrm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrm-gap-3);
    margin-bottom: var(--hrm-gap-3);
}

.hrm-page-header__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--hrm-text-bold);
}

.hrm-page-header__sub {
    margin: 2px 0 0;
    font-size: var(--hrm-font-size);
    color: var(--hrm-text-muted);
}

/* --- Ô số liệu (KPI) --- */
.hrm-stat {
    display: flex;
    align-items: flex-start;
    gap: var(--hrm-gap-3);
    padding: var(--hrm-gap-4);
}

.hrm-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--hrm-radius-md);
    background: var(--hrm-primary-50);
    color: var(--hrm-primary);
    font-size: 18px;
}

.hrm-stat__label {
    font-size: var(--hrm-font-size);
    color: var(--hrm-text-muted);
}

.hrm-stat__value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hrm-text-bold);
    font-variant-numeric: tabular-nums;
}

.hrm-stat__delta--up {
    color: var(--hrm-success);
}

.hrm-stat__delta--down {
    color: var(--hrm-danger);
}

/* --- Trạng thái rỗng --- */
.hrm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hrm-gap-2);
    padding: 48px 16px;
    color: var(--hrm-text-light);
    font-size: var(--hrm-font-size);
}

/* ===========================================================================
   4. CHUẨN HOÁ THƯ VIỆN
   Chỉ đụng tới màu / chữ / đường kẻ — KHÔNG đổi hình học (chiều cao, vị trí),
   vì các thư viện tự tính toán layout dựa trên đó.
   ======================================================================== */

/* --- Syncfusion: lưới --- */
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--hrm-bg-hover);
    border-color: var(--hrm-border-normal);
}

.e-grid .e-headertext {
    color: var(--hrm-text-dark);
    font-weight: 600;
}

/* --hrm-border-light (#F3F4F6) gần như vô hình trên nền trắng nên các hàng dính
   vào nhau. Dùng --hrm-grid-line (#E5E7EB) — cùng màu đường kẻ của header. */
.e-grid .e-rowcell {
    color: var(--hrm-text-dark);
    border-color: var(--hrm-grid-line);
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--hrm-grid-row-hover);
}

.e-grid .e-rowcell.e-selectionbackground,
.e-grid td.e-active {
    background-color: var(--hrm-primary-50);
    color: var(--hrm-primary-ink, var(--hrm-primary));
}

/* Hàng chẵn nhạt — mắt dễ lần theo dòng trên bảng nhiều cột */
.e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: var(--hrm-grid-stripe);
}

.e-grid .e-row:nth-child(even):hover .e-rowcell {
    background-color: var(--hrm-grid-row-hover);
}

/* --- Syncfusion: nút ---
   PHẢI khai đủ :hover / :focus / :active / .e-active. Bộ bootstrap5.3.css của
   Syncfusion (nạp từ CDN ở index.html) đã có sẵn rule cho trạng thái NHẤN với
   palette riêng của nó, nên nếu chỉ khai :hover thì vừa bấm chuột xuống là nút
   nhảy về xanh/đỏ mặc định của Syncfusion rồi mới trả lại màu theme khi thả ra.
   :not(:disabled) là để đủ điểm đặc hiệu trước các rule dạng
   `.e-btn.e-success:not(:disabled):active` của họ; hrm-theme.css lại nạp sau
   CDN nên khi hoà điểm vẫn thắng.
   box-shadow cũng phải đè: mặc định Syncfusion để quầng focus theo màu cũ. */

/* color: nền màu chủ đạo có thể sáng (bảng màu cam) nên chữ trắng mặc định của
   Syncfusion sẽ không đọc được — --hrm-on-primary tự đảo sang chữ tối khi cần. */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--hrm-primary);
    border-color: var(--hrm-primary);
    color: var(--hrm-on-primary, #fff);
}

    .e-btn.e-primary:not(:disabled):hover,
    .e-btn.e-primary:not(:disabled):focus,
    .e-btn.e-primary:not(:disabled):active,
    .e-btn.e-primary:not(:disabled).e-active {
        background-color: var(--hrm-primary-600);
        border-color: var(--hrm-primary-600);
        color: var(--hrm-on-primary, #fff);
    }

.e-btn.e-success,
.e-css.e-btn.e-success {
    background-color: var(--hrm-primary);
    border-color: var(--hrm-primary);
    color: var(--hrm-on-primary, #fff);
}

    .e-btn.e-success:not(:disabled):hover,
    .e-btn.e-success:not(:disabled):focus,
    .e-btn.e-success:not(:disabled):active,
    .e-btn.e-success:not(:disabled).e-active {
        background-color: var(--hrm-primary-600);
        border-color: var(--hrm-primary-600);
        color: var(--hrm-on-primary, #fff);
    }

/* --- Syncfusion: nút viền (e-outline) — kiểu chủ đạo của toolbar phiếu ---
   e-success = hành động chính (Thêm/Lọc/Ghi sổ), e-danger = phá huỷ (Xoá),
   e-info = phụ trợ (Sửa/Lưu tạm/Logs). Trước đây mỗi cái một màu tự do. */
.e-btn.e-success.e-outline,
.e-css.e-btn.e-success.e-outline {
    background-color: transparent;
    border-color: var(--hrm-primary);
    color: var(--hrm-primary-ink, var(--hrm-primary));
}

    .e-btn.e-success.e-outline:not(:disabled):hover,
    .e-btn.e-success.e-outline:not(:disabled):focus,
    .e-btn.e-success.e-outline:not(:disabled):active,
    .e-btn.e-success.e-outline:not(:disabled).e-active {
        background-color: var(--hrm-primary);
        border-color: var(--hrm-primary);
        color: var(--hrm-on-primary, #fff);
    }

/* e-primary.e-outline: dùng cho SfDropDownButton "Quản trị" ở ToolbarAssignCustom.
   Không khai thì rơi về màu outline mặc định của Syncfusion, lạc hẳn tông. */
.e-btn.e-primary.e-outline,
.e-css.e-btn.e-primary.e-outline {
    background-color: transparent;
    border-color: var(--hrm-primary);
    color: var(--hrm-primary-ink, var(--hrm-primary));
}

    .e-btn.e-primary.e-outline:not(:disabled):hover,
    .e-btn.e-primary.e-outline:not(:disabled):focus,
    .e-btn.e-primary.e-outline:not(:disabled):active,
    .e-btn.e-primary.e-outline:not(:disabled).e-active {
        background-color: var(--hrm-primary);
        border-color: var(--hrm-primary);
        color: var(--hrm-on-primary, #fff);
    }

.e-btn.e-info.e-outline,
.e-css.e-btn.e-info.e-outline {
    background-color: transparent;
    border-color: var(--hrm-border-dark);
    color: var(--hrm-text-dark);
}

    .e-btn.e-info.e-outline:not(:disabled):hover,
    .e-btn.e-info.e-outline:not(:disabled):focus {
        background-color: var(--hrm-primary-50);
        border-color: var(--hrm-primary-400);
        color: var(--hrm-primary-ink, var(--hrm-primary));
    }

    .e-btn.e-info.e-outline:not(:disabled):active,
    .e-btn.e-info.e-outline:not(:disabled).e-active {
        background-color: var(--hrm-primary-100);
        border-color: var(--hrm-primary-400);
        color: var(--hrm-primary-ink, var(--hrm-primary));
    }

.e-btn.e-danger.e-outline,
.e-css.e-btn.e-danger.e-outline {
    background-color: transparent;
    border-color: var(--hrm-danger);
    color: var(--hrm-danger);
}

    .e-btn.e-danger.e-outline:not(:disabled):hover,
    .e-btn.e-danger.e-outline:not(:disabled):focus,
    .e-btn.e-danger.e-outline:not(:disabled):active,
    .e-btn.e-danger.e-outline:not(:disabled).e-active {
        background-color: var(--hrm-danger);
        border-color: var(--hrm-danger);
        color: #fff;
    }

/* Quầng focus: --smart-primary-rgb do theme-settings.js đặt theo bảng màu đang
   chọn, nên vòng sáng đi theo theme thay vì xanh lá cố định của Syncfusion. */
.e-btn.e-primary:focus,
.e-btn.e-success:focus,
.e-btn.e-success.e-outline:focus,
.e-btn.e-info.e-outline:focus,
.e-split-btn:focus,
.e-dropdown-btn:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--smart-primary-rgb, 20, 104, 74), .25);
}

.e-btn.e-danger.e-outline:focus {
    box-shadow: 0 0 0 .2rem rgba(180, 35, 24, .25);
}

/* Nút chỉ có icon trên toolbar: trung tính, chỉ ăn màu brand khi hover.
   Chúng là công cụ phụ nên không được cạnh tranh thị giác với hành động chính. */
.e-btn.toolbar-icon-btn,
.e-css.e-btn.toolbar-icon-btn {
    color: var(--hrm-text-muted);
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0 8px;
}

    .e-btn.toolbar-icon-btn:hover,
    .e-btn.toolbar-icon-btn:focus {
        color: var(--hrm-primary);
        background-color: var(--hrm-primary-50);
        border-color: transparent;
        box-shadow: none;
    }

/* --- Syncfusion: ô nhập, tab, danh sách --- */
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--hrm-primary-400);
    box-shadow: 0 0 0 2px rgba(var(--smart-primary-rgb), .12);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--hrm-primary);
}

.e-tab .e-tab-header .e-indicator {
    background: var(--hrm-primary);
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-hover {
    background-color: var(--hrm-primary-50);
    color: var(--hrm-primary-ink, var(--hrm-primary));
}

/* Checkbox: KHÔNG ghi đè màu ở đây nữa. Sau khi --color-sf-primary đã trỏ về
   brand, rule gốc của Syncfusion tự cho nền xanh + dấu tích trắng ở mọi trạng
   thái (thường/hover/focus/disabled) — chuẩn hơn là ghi đè lẻ từng trạng thái.
   Chỉ giữ viền trung tính cho ô CHƯA tick. */
.e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop),
.e-css.e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
    border-color: var(--hrm-border-dark);
}

/* --- BootstrapBlazor: dropdown thông tin người dùng ---
   Thanh tiêu đề mặc định của component là xanh dương #0078D4, lạc khỏi brand. */
.dropdown-menu .dropdown-item.dropdown-user {
    background-color: var(--hrm-primary);
    color: #fff;
}

/* Icon trong dropdown: khung cố định 20px để nhãn thẳng cột,
   bất kể glyph rộng hẹp khác nhau. */
.dropdown-menu .dropdown-item > a > i,
.dropdown-logout .dropdown-menu a > i {
    display: inline-flex;
    justify-content: center;
    width: 20px;
    margin-right: var(--hrm-gap-2);
    color: var(--hrm-text-muted);
}

.dropdown-logout .dropdown-menu a:hover > i {
    color: var(--hrm-primary);
}

/* --- BootstrapBlazor: tab đang mở --- */
.tabs-item.active {
    color: var(--hrm-primary);
}

.tabs .tabs-item.active::after {
    background: var(--hrm-primary);
}

/* --- Smart.Blazor: lưới --- */
.smart-grid .smart-grid-column,
.smart-grid-column-header {
    background: var(--hrm-bg-hover);
    color: var(--hrm-text-dark);
}

.smart-grid .smart-grid-row:hover .smart-grid-cell {
    background: var(--hrm-primary-50);
}

/* --- Liên kết trong lưới: bỏ gạch chân xanh dương mặc định --- */
.e-grid a,
.smart-grid a {
    color: var(--hrm-primary);
    text-decoration: none;
}

    .e-grid a:hover,
    .smart-grid a:hover {
        text-decoration: underline;
    }