/* theme-variants.css — phần "Thiết lập màu sắc" KHÔNG diễn đạt được bằng biến.
 *
 * js/theme-settings.js gắn data-attribute lên <html>; file này chứa rule tương ứng.
 * Nạp SAU hrm-theme.css để thắng khai báo mặc định.
 * Riêng thang màu (--hrm-primary*) do JS ghi thẳng inline lên <html> nên không có ở đây.
 */

/* ===========================================================================
   Thanh tiêu đề = màu đang chọn

   Mọi màu chữ/lớp phủ ở đây đều đi qua --hrm-on-primary* do JS tính theo độ
   sáng của màu chủ đạo, KHÔNG hard-code trắng: với bảng màu cam (#EA8B1F) thì
   chữ trắng chỉ đạt tương phản 2.6:1, phải đảo sang chữ tối. Cùng lý do đó,
   lớp phủ hover cũng phải đổi giữa trắng-mờ và đen-mờ.
   ======================================================================== */
/* Nền do --bb-header-bg mang (theme-settings.js ghi vào), xem erp-chrome.css.
   Ở đây chỉ lo phần chữ/viền không diễn đạt được bằng biến đó.
   Thêm .layout vào chuỗi chọn để thắng ".layout .layout-header { color: var(--ink) }"
   của erp-chrome.css — nếu không thì chữ vẫn đen trên nền tô màu. */
:root[data-hrm-header="brand"] .layout .layout-header {
    border-bottom-color: var(--hrm-on-primary-rule, rgba(255, 255, 255, .22));
    color: var(--hrm-on-primary, #FFFFFF);
}

/* Thanh tiêu đề tô màu + menu phân hệ TỐI MÀU: khu logo nằm trong dải trên cùng lại
   lấy màu của sidebar, nên nếu topbar giữ màu chủ đạo thì đỉnh màn hình bị cắt thành
   hai mảng khác màu. Trường hợp này cho topbar mượn luôn màu sidebar để cả dải liền một khối.

   Chỉ khai lại các biến --hrm-on-primary* trong phạm vi .layout-header: mọi rule con
   bên dưới (nút menu, avatar, ô đơn vị...) đều đã trỏ vào bộ biến này, đổi ở một chỗ
   là cả cụm đi theo — không phải viết lại từng cái.
   Bắt buộc phải đổi, không được để nguyên: --hrm-on-primary tính theo màu CHỦ ĐẠO,
   với bảng màu cam nó ra chữ TỐI — đặt lên nền sidebar tối thì mất chữ. */
:root[data-hrm-header="brand"][data-hrm-sidebar="dark"] .layout .layout-header {
    --hrm-on-primary: var(--hrm-sidebar-active-ink, #FFFFFF);
    --hrm-on-primary-soft: var(--hrm-sidebar-ink-88, rgba(255, 255, 255, .88));
    --hrm-on-primary-overlay: var(--hrm-sidebar-hover, rgba(255, 255, 255, .10));
    --hrm-on-primary-rule: var(--hrm-sidebar-rule, rgba(255, 255, 255, .14));

    /* Nhạt hơn sidebar một chút cho dải trên tách khỏi cột trái, vẫn cùng tông.
       Chỉnh độ nhạt bằng đúng con số dưới đây.
       Hai dòng background là CHỦ Ý: dòng đầu là bản dự phòng cho trình duyệt không
       hiểu color-mix — gặp dòng sau không hợp lệ nó bỏ qua và giữ nguyên màu sidebar. */
    --hrm-header-lighten: 10%;
    background: var(--hrm-sidebar-bg);
    background: color-mix(in srgb, #FFFFFF var(--hrm-header-lighten), var(--hrm-sidebar-bg));
    border-bottom-color: var(--hrm-sidebar-rule, rgba(255, 255, 255, .14));
    color: var(--hrm-sidebar-ink-88, rgba(255, 255, 255, .88));
}

/* Menu chính (SmartNavbar).
   Trước đây khối này là <nav class="navbar"> với .nav-link; SmartNavbar tự vẽ nên
   tên lớp đổi hẳn sang .snav-btn — rule cũ theo .nav-link không còn khớp gì.
   .snav-btn nằm trong CSS cô lập (.snav-btn[b-xxx], độ ưu tiên 0-2-0) nên chuỗi
   chọn ở đây phải kèm .layout-header mới đủ nặng để đè. */
:root[data-hrm-header="brand"] .layout-header .snav-btn {
    color: var(--hrm-on-primary-soft, rgba(255, 255, 255, .78));
}

    :root[data-hrm-header="brand"] .layout-header .snav-btn:hover {
        /* --surface-alt là xám rất nhạt, đắp lên nền đậm thành mảng loang.
           Dùng lớp phủ trong suốt để chỉ sáng/tối hơn nền một chút. */
        background: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
        color: var(--hrm-on-primary, #FFFFFF);
    }

    :root[data-hrm-header="brand"] .layout-header .snav-btn.is-active,
    :root[data-hrm-header="brand"] .layout-header .snav-btn.is-open {
        background: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
        color: var(--hrm-on-primary, #FFFFFF);
    }

    :root[data-hrm-header="brand"] .layout-header .snav-btn:focus-visible {
        outline-color: var(--hrm-on-primary, #FFFFFF);
    }

/* Menu Syncfusion (nếu màn hình nào còn dùng) */
:root[data-hrm-header="brand"] .layout-header .e-menu-container .e-menu {
    color: var(--hrm-on-primary-soft, rgba(255, 255, 255, .78));
}

/* Khối user góc phải.
   app.css cho .dropdown-logout:hover nền --hrm-primary-50 (màu chủ đạo pha rất
   nhạt) và chữ --bb-header-color. Trên thanh tiêu đề TRẮNG thì đúng, nhưng khi
   thanh tiêu đề tô màu thì thành mảng nhạt đắp lên nền đậm + chữ sáng -> chìm
   hẳn. Đổi sang lớp phủ trong suốt để chỉ sáng/tối hơn nền một chút. */
:root[data-hrm-header="brand"] .dropdown-logout {
    --bb-logout-text-color: var(--hrm-on-primary, #FFFFFF);
    color: var(--hrm-on-primary, #FFFFFF);
}

    :root[data-hrm-header="brand"] .dropdown-logout:hover {
        background-color: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
    }

/* Avatar chữ cái. erp-chrome cho nó nền --brand-soft + chữ --brand: hợp trên thanh
   tiêu đề trắng, nhưng trên nền tô màu thì thành đốm nhạt và chữ gần như biến mất.
   Đổi cả nền lẫn viền sang lớp phủ trong suốt, không chỉ đổi màu chữ. */
:root[data-hrm-header="brand"] .layout .layout-header .custom-logout {
    background: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
    border-color: var(--hrm-on-primary-rule, rgba(255, 255, 255, .22));
    color: var(--hrm-on-primary, #FFFFFF);
}

    :root[data-hrm-header="brand"] .layout .layout-header .custom-logout:hover {
        background: var(--hrm-on-primary, #FFFFFF);
        border-color: var(--hrm-on-primary, #FFFFFF);
        color: var(--hrm-primary-ink, var(--hrm-primary));
    }

:root[data-hrm-header="brand"] .layout-header .logout-dn {
    color: var(--hrm-on-primary, #FFFFFF);
}

/* Ô chọn đơn vị.
   erp-chrome.css tô chữ/icon của cụm này bằng --ink / --ink-2 / --ink-3 (đều là màu
   tối, dành cho thanh tiêu đề trắng). Trên nền tô màu phải kéo hết sang --hrm-on-primary*,
   nếu không chỉ riêng tên đơn vị bị chìm trong khi mọi thứ quanh nó đã sáng. */
:root[data-hrm-header="brand"] .layout-header .unit-info,
:root[data-hrm-header="brand"] .layout-header .unit-select .e-input,
:root[data-hrm-header="brand"] .layout-header .unit-select.e-disabled .e-input {
    color: var(--hrm-on-primary, #FFFFFF);
    -webkit-text-fill-color: var(--hrm-on-primary, #FFFFFF);
}

:root[data-hrm-header="brand"] .layout-header .unit-info__icon,
:root[data-hrm-header="brand"] .layout-header .unit-select .e-input-group-icon {
    color: var(--hrm-on-primary-soft, rgba(255, 255, 255, .78));
}

/* Viền/nền lúc rê chuột: dùng lớp phủ trong suốt, không dùng --surface-alt (xám rất
   nhạt) vì đắp lên nền đậm sẽ thành mảng loang. */
:root[data-hrm-header="brand"] .layout-header .unit-select.e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: var(--hrm-on-primary-rule, rgba(255, 255, 255, .22));
    background: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
}

:root[data-hrm-header="brand"] .layout-header .unit-select.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--hrm-on-primary, #FFFFFF);
    background: var(--hrm-on-primary-overlay, rgba(255, 255, 255, .16));
}

:root[data-hrm-header="brand"] .layout-header .topbar-divider {
    background: var(--hrm-on-primary-rule, rgba(255, 255, 255, .22));
}

/* Nút thu gọn sidebar + các icon trong header */
:root[data-hrm-header="brand"] .layout-header .layout-header-bar,
:root[data-hrm-header="brand"] .layout-header .fa-bars {
    color: var(--hrm-on-primary, #FFFFFF);
}

/* Popup của khối user luôn nằm trên nền trắng -> trả chữ về màu thường,
   nếu không sẽ thừa hưởng màu chữ dành cho nền tô màu. */
:root[data-hrm-header="brand"] .layout .layout-header .dropdown-logout .dropdown-menu,
:root[data-hrm-header="brand"] .layout .layout-header .dropdown-logout .dropdown-menu .custom-logout,
:root[data-hrm-header="brand"] .layout .layout-header .dropdown-logout .dropdown-menu .logout-dn {
    color: var(--hrm-text-dark, #374151);
}

    /* Avatar nếu được vẽ lại trong popup thì trả về nền nhạt như thanh tiêu đề trắng,
       không dùng lớp phủ trong suốt (popup nền trắng, phủ trắng lên trắng là mất hình). */
    :root[data-hrm-header="brand"] .layout .layout-header .dropdown-logout .dropdown-menu .custom-logout {
        background: var(--hrm-primary-50, #E8F3EE);
        border-color: var(--hrm-primary-100, #D3E9DE);
    }

/* ===========================================================================
   Menu phân hệ tối màu
   Màu chữ/nền do JS đặt qua --hrm-sidebar-*; ở đây chỉ chỉnh những thứ nằm
   ngoài ErpSidebar.
   ======================================================================== */
:root[data-hrm-sidebar="dark"] .layout-side {
    border-right-color: rgba(255, 255, 255, .12);
}

/* Khu logo giữ nền trắng: logo vnc.png là ảnh nền sáng, đặt lên nền tối sẽ lộ viền. */
:root[data-hrm-sidebar="dark"] .layout-banner {
    border-bottom-color: rgba(255, 255, 255, .12);
}