/* Á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.

   Link SAU app.css trong index.html: file này cố ý ghi đè vài khối cũ ở app.css
   (tab active #FF6363, viền header #FF6363). Các khối đó được giữ nguyên tại chỗ. */

/* ============ TOPBAR (02-layout.md §1) ============ */

.layout {
    /* 50px theo yêu cầu (mẫu vẽ 52px) — cũng đúng mặc định của BootstrapBlazor.
       SmartSidebar tính chiều cao bằng calc(100% - var(--bb-layout-header-height)) và
       mega menu bám top theo biến này, nên đổi ở đây là cả hai theo cùng. */
    --bb-layout-header-height: 50px;
}

.layout .layout-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-family: Inter, Arial, system-ui, -apple-system;
    font-size: var(--fs-13);
}

/* app.css:1123 tô viền dưới header và banner màu #FF6363 — bộ thiết kế chỉ dùng đỏ cho
   trạng thái, không cho viền trang trí. */
/* Ba mức (.layout .layout-side .layout-banner) chứ không phải hai: có một rule khác cùng
   specificity 0,2,0 được nạp SAU file này làm mất viền dưới của banner — đo trên DOM thật,
   không grep ra trong wwwroot/css nên nhiều khả năng đến từ bundle của thư viện. */
.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: trong mẫu dải
   trên cùng là một mảng trắng liền, còn ở đây .layout-side viền suốt chiều cao nên cắt đôi
   topbar thành ô logo + phần còn lại. SmartSidebar (.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 mẫu.
   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ị / năm (Syncfusion), bo 6px. Spec ghi 34px; để 26px theo yêu cầu. — */
.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;
}

/* — cụm đăng xuất — */
/* Mẫu dùng avatar tròn chữ cái đầu thay cho tên; người dùng chọn giữ tên, bỏ avatar. */
.layout-header .logout-avatar,
.layout-header .dropdown-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* app.css/MainLayout.razor.css để chữ tên người dùng màu #FF6363 — đỏ chỉ dành cho trạng
   thái, tên người dùng là chữ thường. */
/* .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 {
    color: var(--ink);
    font-size: var(--fs-13);
    font-weight: 500;
}

.layout .layout-header .custom-logout:hover {
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}

/* ============ TABSTRIP (02-layout.md §4) ============ */

/* Chiều cao tab đi qua biến của thư viện (app.css:226 đang để 33px): 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);
    font-family: Inter, Arial, system-ui, -apple-system;
}

.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 của header. */
    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 — thiết kế không có kẻ dọc giữa tab. */
.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 (kiểm bằng DOM thật). */
.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);
}

.tabs > .tabs-header .tabs-nav .tabs-item .tabs-item-close {
    opacity: .45;
    font-weight: 400;
}

.tabs > .tabs-header .tabs-nav .tabs-item .tabs-item-close:hover {
    opacity: 1;
    background: var(--surface-alt);
    border-radius: 4px;
}

/* Thanh trượt màu xanh 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 (dưới + dọc), chồng lên viền 1px của cả tabstrip.
   Phải nhắm qua cả .tabs-nav / .tabs-nav-wrap: rule của thư viện ở mức 0,3,0 và nạp sau
   file này, nên selector 3 mức không thắng (đo trên DOM thật). */
.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 ‹ › ⟳ ⛶ ⌄: icon-button 30x30 (03-components.md §2). */
.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 (03-components.md §9) ============ */

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