/* Áp bộ thiết kế ERP lên phần "chrome" do BootstrapBlazor Layout tự render
   (topbar, tabstrip) và lên các control Syncfusion đặt trong topbar.

   Vì sao phải là CSS global chứ không phải .razor.css: những phần tử này do thư viện
   sinh ra nên không mang attribute scope của MainLayout — CSS cô lập không với tới.

   Port từ SmartAccCloud.WebWasm/wwwroot/css/erp-chrome.css.
   Nạp SAU hrm-theme.css / theme-variants.css trong index.html.
   ============================================================================= */

/* ============ CẦU NỐI TOKEN ============
   Bên SmartAccCloud các biến này khai ở erp-tokens.css với giá trị hex cứng.
   Ở đây KHÔNG port file đó: repo này đã có hệ token --hrm-* cùng bộ "Thiết lập màu
   sắc" (5 bảng màu, đổi lúc chạy). Trỏ thẳng sang --hrm-* thì topbar / tabstrip /
   mega menu đổi màu theo bảng màu người dùng chọn, thay vì đứng yên một màu.

   --brand trỏ --hrm-primary-ink chứ không phải --hrm-primary: nó vừa dùng làm màu
   CHỮ trên nền sáng vừa làm nền. Với bảng màu cam (#EA8B1F) thì primary quá sáng để
   làm chữ; primary-ink là bản đã tối đủ đọc, và 4 bảng màu còn lại thì hai giá trị
   này bằng nhau nên không đổi gì. */
:root {
    --surface: var(--hrm-surface, #FFFFFF);
    --surface-alt: var(--hrm-bg-hover, #F9FAFB);
    --canvas: var(--hrm-bg-body, #F3F4F6);

    --border: var(--hrm-border-normal, #E5E7EB);
    --border-strong: var(--hrm-border-dark, #D1D5DB);

    --ink: var(--hrm-text-bold, #1F2937);
    --ink-2: var(--hrm-text-normal, #4B5563);
    --ink-3: var(--hrm-text-muted, #6B7280);

    --brand: var(--hrm-primary-ink, var(--hrm-primary, #14684A));
    --brand-hover: var(--hrm-primary-600, #10563D);
    --brand-soft: var(--hrm-primary-50, #E8F3EE);
    --brand-line: var(--hrm-primary-100, #D3E9DE);
    --accent: var(--hrm-orange, #F5931E);

    --radius-sm: var(--hrm-radius-sm, 4px);
    --shadow-pop: var(--hrm-shadow-lg, 0 12px 24px -4px rgba(16, 24, 40, .12));

    --fs-11: 11px;
    --fs-13: var(--hrm-font-size, 13px);
}

/* ============ TOPBAR ============ */

.layout {
    /* ErpSidebar tính chiều cao theo biến này và mega menu bám top theo nó,
       nên đổi ở đây là cả hai theo cùng. */
    --bb-layout-header-height: 50px;
}

/* Nền PHẢI đi qua --bb-header-bg: đó là biến mà theme-settings.js ghi vào khi
   người dùng chọn "Thanh tiêu đề: Màu đang chọn". Đặt thẳng var(--surface) ở đây
   là khoá cứng thanh tiêu đề màu trắng, tuỳ chọn đó mất tác dụng.
   app.css luôn khai --bb-header-bg (mặc định #FFFFFF) nên nhánh dự phòng
   var(--surface) chỉ để phòng khi app.css không được nạp. */
.layout .layout-header {
    background: var(--bb-header-bg, var(--surface));
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-size: var(--fs-13);
}

.layout .layout-side .layout-banner {
    /* Kẻ dưới logo phải liền mạch với kẻ dưới topbar bên phải. */
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* Kẻ dọc của sidebar phải bắt đầu TỪ DƯỚI topbar, không chạy lên tận đỉnh: dải trên
   cùng phải là một mảng trắng liền, còn .layout-side viền suốt chiều cao thì cắt đôi
   topbar thành ô logo + phần còn lại. ErpSidebar (.sb) đã tự vẽ viền phải của mình,
   nằm đúng dưới banner, nên bỏ viền của .layout-side đi là khớp.
   Riêng lúc thu gọn, .sb chuyển sang position:absolute nên trả viền lại cho .layout-side. */
.layout .layout-side {
    border-right: none;
}

.layout.is-collapsed .layout-side {
    border-right: 1px solid var(--border);
}

/* — select đơn vị (Syncfusion) — */
.layout-header .e-input-group.e-control-wrapper,
.layout-header .e-ddl.e-input-group.e-control-wrapper {
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--fs-13);
}

    .layout-header .e-input-group.e-control-wrapper .e-input,
    .layout-header .e-ddl.e-input-group.e-control-wrapper .e-input {
        color: var(--ink);
        font-size: var(--fs-13);
    }

    .layout-header .e-input-group.e-control-wrapper:not(.e-disabled):hover {
        border-color: var(--border-strong);
    }

    .layout-header .e-input-group.e-control-wrapper.e-input-focus {
        border-color: var(--brand);
        outline: 2px solid var(--brand-line);
        outline-offset: 0;
    }

    /* Syncfusion vẽ gạch chân "ripple" bằng ::before/::after của input-group — thừa với
       kiểu viền bao của thiết kế này. */
    .layout-header .e-input-group.e-control-wrapper::before,
    .layout-header .e-input-group.e-control-wrapper::after {
        display: none;
    }

.layout-header .e-input-group .e-input-group-icon {
    color: var(--ink-2);
    border: none;
}

/* — ô chọn đơn vị —
   Trình bày như "chip ngữ cảnh", không phải ô nhập liệu: topbar không có form nào,
   một ô viền đậm 360px nằm giữa đó đọc như chỗ bắt buộc phải điền, lại chừa một
   khoảng trống lớn giữa tên đơn vị và mũi tên.
   Viền chỉ hiện khi rê chuột / đang mở, tức chỉ khi thực sự thao tác được.
   Chuỗi chọn phải kèm .unit-select mới đủ nặng để đè khối .layout-header
   .e-input-group.e-control-wrapper ở trên. */
.layout-header .unit-select.e-input-group.e-control-wrapper {
    border-color: transparent;
    background: transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

    .layout-header .unit-select.e-input-group.e-control-wrapper:not(.e-disabled):hover {
        border-color: var(--border);
        background: var(--surface-alt);
    }

    /* Đang mở danh sách: giữ viền để thấy rõ ô nào đang mở. */
    .layout-header .unit-select.e-input-group.e-control-wrapper.e-input-focus {
        border-color: var(--brand);
        background: var(--surface);
    }

.layout-header .unit-info__icon {
    flex: 0 0 auto;
    color: var(--ink-3);
    font-size: 14px;
}

/* Phần lớn người dùng KHÔNG được đổi đơn vị (chỉ Admin), nên trạng thái này mới là
   trạng thái thường gặp. Một ô nhập bị khoá, xám mờ, kèm mũi tên bấm không ăn là
   thứ tệ nhất có thể đặt ở đây — bỏ hết dấu hiệu điều khiển, để lại đúng dòng chữ. */
.layout-header .unit-select.e-input-group.e-control-wrapper.e-disabled {
    opacity: 1;
    border-color: transparent;
    background: transparent;
}

    .layout-header .unit-select.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon,
    .layout-header .unit-select.e-input-group.e-control-wrapper.e-disabled .e-ddl-icon {
        display: none;
    }

    .layout-header .unit-select.e-input-group.e-control-wrapper.e-disabled .e-input {
        color: var(--ink);
        -webkit-text-fill-color: var(--ink); /* Syncfusion làm mờ chữ ô khoá bằng thuộc tính này */
        cursor: default;
    }

/* Vạch ngăn giữa cụm đơn vị và avatar. Không có nó thì hai khối dính vào nhau,
   trông như avatar thuộc về ô chọn đơn vị. */
.layout-header .topbar-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--border);
}

/* — cụm đăng xuất — */
.layout-header .logout-avatar,
.layout-header .dropdown-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* .layout .layout-header thay vì .layout-header: CSS isolation của MainLayout
   (.custom-logout[b-xxx]) cùng specificity mà lại được nạp sau trong index.html. */
.layout .layout-header .custom-logout {
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand);
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1;
}

    .layout .layout-header .custom-logout:hover {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
    }

/* Header của popup đăng xuất: bundle BootstrapBlazor tô nền #0078D4 — xanh này không
   có trong bộ token. Đổi sang brand. */
.layout .layout-header .dropdown-menu .dropdown-user {
    background: var(--brand);
    color: #fff;
}

    .layout .layout-header .dropdown-menu .dropdown-user:hover,
    .layout .layout-header .dropdown-menu .dropdown-user:focus {
        background: var(--brand-hover);
        color: #fff;
    }

/* Hover các mục trong popup: nền mặc định của bundle quá nhạt, gần như không thấy con
   trỏ đang ở dòng nào.
   Nhắm vào TỪNG thẻ <a> chứ không phải .dropdown-item: LinkTemplate dồn cả nhóm link
   vào MỘT .dropdown-item duy nhất, tô nền ở mức đó là cả danh sách cùng sáng lên. */
.layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a {
    border-radius: var(--radius-sm);
    margin: 0 -6px;
    padding: 5px 6px;
}

    .layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a:hover,
    .layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a:focus {
        background: var(--brand-soft);
        color: var(--brand);
    }

.layout .layout-header .logout-dn {
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.3;
}

.layout .layout-header .logout-code {
    font-size: var(--fs-11);
    line-height: 1.3;
    opacity: .75;
}

/* ============ TABSTRIP ============ */

/* Chiều cao tab đi qua biến của thư viện: thư viện dùng biến này cho cả .tabs-nav-wrap
   lẫn .tabs-item, đặt height cứng cho riêng .tabs-item không ăn. */
.tabs {
    --bb-tabs-item-height: 30px;
}

    .tabs > .tabs-header {
        background: var(--surface);
        border: none;
        border-bottom: 1px solid var(--border);
    }

        .tabs > .tabs-header .tabs-nav-wrap::after {
            /* Thư viện vẽ sẵn một dải 2px xám dưới thanh tab — thiết kế chỉ có viền 1px. */
            display: none;
        }

        /* Kẻ dọc giữa các tab: thư viện đặt border-right ở một rule sâu hơn nên phải nhắm
           qua .tabs-nav mới thắng. */
        .tabs > .tabs-header .tabs-nav .tabs-item {
            padding: 0 10px;
            justify-content: center;
            text-align: center;
            border: none;
            background: transparent;
            color: var(--ink-2);
            font-size: var(--fs-13);
            font-weight: 600;
        }

            .tabs > .tabs-header .tabs-nav .tabs-item:hover {
                color: var(--ink);
            }

        /* Lớp .active nằm ở .tabs-item-wrap chứ không ở .tabs-item. */
        .tabs > .tabs-header .tabs-nav .tabs-item-wrap.active .tabs-item {
            color: var(--brand);
            background: transparent;
            box-shadow: inset 0 -2px 0 0 var(--brand);
        }

        /* Nút đóng chỉ chiếm chỗ khi rê chuột vào tab.
           Thư viện ẩn nút bằng `visibility: hidden` nhưng giữ nguyên ô 21px trong flex, nên
           chữ luôn lệch trái ~10px so với tâm tab kể cả lúc không hover. Co bề ngang về 0 để
           chữ căn giữa thật, hover thì nở lại.
           KHÔNG đụng tới `visibility`: thư viện dùng nó để biết tab nào được phép đóng. */
        .tabs > .tabs-header .tabs-nav .tabs-item .tabs-item-close {
            width: 0;
            opacity: 0;
            overflow: hidden;
            font-weight: 400;
            transition: width .15s ease, opacity .15s ease;
        }

        .tabs > .tabs-header .tabs-nav .tabs-item.is-closeable:hover .tabs-item-close {
            width: 21px;
            opacity: .45;
        }

            /* Rê thẳng vào nút thì đậm hẳn. Phải lồng trong `:hover` của tab để thắng rule nở
               ở trên (0,4,0) — để riêng `.tabs-item-close:hover` là 0,3,0, thua. */
            .tabs > .tabs-header .tabs-nav .tabs-item.is-closeable:hover .tabs-item-close:hover {
                opacity: 1;
                background: var(--surface-alt);
                border-radius: 4px;
            }

        /* Thanh trượt mặc định chạy dưới tab đang chọn: thiết kế dùng viền 2px của chính tab
           (rule .active ở trên) nên tắt hẳn thanh này. */
        .tabs > .tabs-header .tabs-active-bar {
            display: none;
        }

        /* Các ô của thanh tab tự vẽ viền riêng, chồng lên viền 1px của cả tabstrip. */
        .tabs > .tabs-header .tabs-nav .tabs-item-fix,
        .tabs > .tabs-header .tabs-nav-wrap .tabs-nav-toolbar,
        .tabs > .tabs-header .tabs-nav-wrap .nav-link-bar {
            border-width: 0;
        }

        /* Cụm nút ‹ › ⟳ ⛶ ⌄ */
        .tabs > .tabs-header .nav-link-bar-button,
        .tabs > .tabs-header .tabs-nav-toolbar-button {
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: var(--radius-sm);
            color: var(--ink-2);
        }

            .tabs > .tabs-header .nav-link-bar-button:hover,
            .tabs > .tabs-header .tabs-nav-toolbar-button:hover {
                background: var(--surface-alt);
                color: var(--ink);
            }

/* ============ Điều hướng bàn phím ============ */

.layout-header :focus-visible,
.tabs-header :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}