/* =============================================================================
 * fixed.css — Custom overrides & extensions for Velzon backend template
 * =============================================================================
 *
 * REGIONS:
 *   1. SYSTEM FIXES     — Sửa lỗi nội tại của template/thư viện. KHÔNG sửa.
 *   2. LAYOUT           — Cấu hình layout tổng thể (header, sidebar, padding…)
 *   3. COMPONENTS       — Select2, Bootstrap-Select, Toast, Back-to-top…
 *   4. TABLE TOOLBAR    — Toolbar phân trang, filter, action buttons
 *   5. PAGINATION       — Component phân trang tuỳ chỉnh (pagination-equal)
 *
 * ============================================================================= */

/* --- GLOBAL FONT OVERRIDE --- */
:root {
    --vz-font-sans-serif: 'Inter', "Public Sans", sans-serif;
}

body, html, input, button, select, optgroup, textarea {
    font-family: 'Inter', "Public Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =============================================================================
 * REGION 1 — SYSTEM FIXES (minified)
 * Các rule sửa lỗi codepoint/font-family của app.css & app.min.css do template
 * compile with Boxicons version cũ. KHÔNG chỉnh sửa vùng này.
 * ============================================================================= */

/* breadcrumb separator */
.breadcrumb-item+.breadcrumb-item::before{font-family:'boxicons'!important;content:"\f2ea";font-size:15px;line-height:20px}
/* dropdown caret */
.dropdown-toggle::after{font-family:'boxicons'!important;content:"\f2e4";font-size:15px;line-height:15px;border:none!important;margin-left:.255em;vertical-align:middle}
/* theme settings — card-radio check mark (replaces remixicon \eb80) */
.card-radio .form-check-input:checked+.form-check-label:before{font-family:'boxicons'!important;content:"\f2d2";position:absolute;top:2px;right:6px;font-size:16px;color:var(--vz-primary)}
/* theme settings — img-switch check mark (replaces remixicon \eb80) */
.img-switch .card-radio .form-check-input:checked+.form-check-label::after{font-family:'boxicons'!important;content:"\f2d2"}
/* dark-mode toggle: bx-moon → bx-sun khi ở chế độ dark (codepoint cũ \ec34 → mới \f77d) */
[data-bs-theme=dark] .light-dark-mode .bx-moon::before{font-family:'boxicons'!important;content:"\f77d"}
/* fullscreen toggle: bx-fullscreen exit (codepoint cũ \eacb → mới \f457) */
.fullscreen-enable [data-toggle=fullscreen] .bx-fullscreen::before{font-family:'boxicons'!important;content:"\f457"}

/* navbar-menu chevron: mdi \f0142 → bx-chevron-right \f2ea */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    font-family: 'boxicons' !important;
    content: "\f2ea" !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    transition: transform .2s !important;
}

/* Ghim chevron vào mép phải — chỉ với sidebar dọc. Layout ngang để template tự
   canh (mũi tên nằm inline cạnh chữ, không absolute). */
html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    position: absolute !important;
    right: 18px !important;
}

html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    transform: rotate(90deg) !important;
    color: var(--vz-vertical-menu-item-active-color) !important;
}

/* Sub-menu (nav-sm) overrides: Ẩn dấu gạch ngang, dùng icon thay thế */
.navbar-menu .navbar-nav .nav-sm {
    padding-left: 0 !important;
}

/* Chỉ thụt lề menu con khi Sidebar ĐANG MỞ (không ở trạng thái thu nhỏ sm) */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 0.625rem 2.25rem !important;
}

/* Khi Sidebar thu nhỏ (sm), reset padding để icon và chữ trong popup trông gọn gàng */
html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 0.625rem 1.5rem !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-item {
    padding-left: 0 !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link::before {
    display: none !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link i {
    display: inline-block !important;
    min-width: 1.75rem !important; /* Độ rộng chuẩn của sidebar icon trong Velzon */
    font-size: 1.15rem !important;
    opacity: 0.7;
    text-align: left !important;
    vertical-align: middle !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link.active i {
    opacity: 1;
    color: var(--vz-vertical-menu-item-active-color);
}


/* =============================================================================
 * REGION 2 — LAYOUT
 * Điều chỉnh layout tổng thể: chiều cao header, padding nội dung, sidebar,
 * vị trí các nút floating (back-to-top, customizer).
 * ============================================================================= */

.navbar-header, .navbar-header {
    height: 56px;
    display: flex !important;
    align-items: center !important;
}

/* Các khối con chính của navbar-header */
.navbar-header > .d-flex {
    height: 56px !important;
    align-items: center !important;
}

/* Fix nút Hamburger bị lệch lên trên */
.topnav-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 15px !important;
}

.hamburger-icon {
    margin-top: 0 !important;
}

/* Fix Profile bị lệch hoặc phồng */
.topbar-user {
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

.page-content {
    padding: calc(56px + 1.5rem) calc(1.5rem * .5) 85px calc(1.5rem * .5);
    min-height: 100vh;
}

/* Layout ngang: theme neo menu ngang + page-content theo topbar 70px của Velzon,
   nhưng topbar ở đây đã bóp còn 56px (57px tính cả border-bottom) → hở khe 13px
   giữa topbar và menu, nội dung cuộn lộ qua khe rồi chui dưới menu. Neo lại 57px. */
[data-layout="horizontal"] .navbar-menu {
    margin-top: 57px;
}

@media (min-width: 1024.1px) {
    [data-layout="horizontal"] .page-content {
        margin-top: 57px;
        /* min-height 100vh ở trên cộng margin-top sẽ dư đúng 57px cuộn chết */
        min-height: calc(100vh - 57px);
    }
}

#back-to-top {
    bottom: 103px;
    right: 18px;
}

/* Nút customizer (bánh răng theme) — mobile: góc dưới; desktop: giữa cạnh phải */
.customizer-setting {
    bottom: 60px;
    right: 18px;
}

@media (min-width: 992px) {
    .customizer-setting {
        top: 50%;
        right: 0;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 1035;
    }

    .customizer-setting .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding-right: 0.9rem !important;
        padding-left: 0.75rem !important;
    }
}

@media (max-width: 991.98px) {
    .customizer-setting {
        top: auto;
        bottom: 60px;
        transform: none;
    }
}

/* Fixed Action Bar (thanh action cố định dưới cùng) */
.fixed-action-bar {
    transition: left 0.3s ease;
}

[data-sidebar-size="sm"] .fixed-action-bar {
    left: 70px !important;
}

@media (max-width: 767.98px) {
    .fixed-action-bar {
        left: 0 !important;
    }
}

/* Fix sidebar min-height conflict khi thu nhỏ */
@media (min-width: 768px) {
    :is([data-layout="vertical"],[data-layout="semibox"])[data-sidebar-size="sm"]{min-height:auto}
    :is([data-layout="vertical"],[data-layout="semibox"])[data-layout-style="detached"][data-sidebar-size="sm"] #layout-wrapper,
    :is([data-layout="vertical"],[data-layout="semibox"])[data-layout-style="detached"][data-sidebar-size="sm"] .main-content,
    [data-layout-width="boxed"][data-sidebar-size="sm"][data-layout="vertical"] #layout-wrapper{min-height:auto}

    /* Fix sidebar drift (floating) on collapse (sm size).
       CHỈ áp dụng cho layout có sidebar dọc — layout "horizontal" dùng chung
       .navbar-menu làm thanh menu ngang, nếu ép height:100vh nó sẽ phủ trắng
       toàn bộ content. */
    html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu {
        position: fixed !important;
        height: 100vh !important;
        z-index: 1001;
    }

    /* Khi sidebar rút gọn được fixed, main vẫn phải chừa đúng bề rộng sidebar.
       Nếu không, bảng ngang nhìn như bị menu đè lên thay vì cuộn trong vùng nội dung. */
    html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .main-content {
        margin-left: var(--vz-vertical-menu-width-sm) !important;
        min-width: 0;
    }

    /*
     * Collapsed-menu flyouts must be able to escape the narrow sidebar.
     * The wheel handler in fixed.js scrolls the menu without turning this
     * wrapper into an overflow container (which would clip those flyouts).
     */
    html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu .simplebar-mask,
    html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu .simplebar-content-wrapper {
        height: 100% !important;
        overflow: visible !important;
    }
}

/* Toast */
.toast-container {
    z-index: 9999 !important;
}

.toast-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    color: white;
    opacity: 1;
}

/* Custom Overrides for Toastr (High Contrast between themes) */
html:not([data-bs-theme="dark"]) #toast-container {
  z-index: 999999;
}
html:not([data-bs-theme="dark"]) #toast-container .toast-close-button {
  font-weight: 300;
  color: #a1b0cb !important;
}
html:not([data-bs-theme="dark"]) #toast-container > div {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25) !important;
  border-radius: 0.3125rem;
}
html:not([data-bs-theme="dark"]) #toast-container > .toast-success,
html:not([data-bs-theme="dark"]) #toast-container > .toast-error,
html:not([data-bs-theme="dark"]) #toast-container > .toast-info,
html:not([data-bs-theme="dark"]) #toast-container > .toast-warning {
  background-color: #283144 !important;
  color: #ffffff !important;
}
html:not([data-bs-theme="dark"]) #toast-container > .toast-success a,
html:not([data-bs-theme="dark"]) #toast-container > .toast-success label,
html:not([data-bs-theme="dark"]) #toast-container > .toast-error a,
html:not([data-bs-theme="dark"]) #toast-container > .toast-error label,
html:not([data-bs-theme="dark"]) #toast-container > .toast-info a,
html:not([data-bs-theme="dark"]) #toast-container > .toast-info label,
html:not([data-bs-theme="dark"]) #toast-container > .toast-warning a,
html:not([data-bs-theme="dark"]) #toast-container > .toast-warning label {
  color: #a1b0cb !important;
}

[data-bs-theme="dark"] #toast-container {
  z-index: 999999;
}
[data-bs-theme="dark"] #toast-container .toast-close-button {
  font-weight: 300;
  color: #a8b1bb !important;
}
[data-bs-theme="dark"] #toast-container > div {
  box-shadow: 0 0.25rem 1rem rgba(147, 158, 170, 0.45) !important;
  border-radius: 0.3125rem;
}
[data-bs-theme="dark"] #toast-container > .toast-success,
[data-bs-theme="dark"] #toast-container > .toast-error,
[data-bs-theme="dark"] #toast-container > .toast-info,
[data-bs-theme="dark"] #toast-container > .toast-warning {
  background-color: #fff !important;
  color: #212529 !important;
}
[data-bs-theme="dark"] #toast-container > .toast-success a,
[data-bs-theme="dark"] #toast-container > .toast-success label,
[data-bs-theme="dark"] #toast-container > .toast-error a,
[data-bs-theme="dark"] #toast-container > .toast-error label,
[data-bs-theme="dark"] #toast-container > .toast-info a,
[data-bs-theme="dark"] #toast-container > .toast-info label,
[data-bs-theme="dark"] #toast-container > .toast-warning a,
[data-bs-theme="dark"] #toast-container > .toast-warning label {
  color: #677788 !important;
}

/* `showToast()` của master.blade.php dùng Bootstrap toast `.my-toast`, không
 * dùng Toastr `#toast-container`. Đồng bộ cùng quy tắc tương phản theme. */
html:not([data-bs-theme="dark"]) .my-toast.toast,
html:not([data-bs-theme="dark"]) .my-toast.toast .toast-header {
  background-color: #283144 !important;
  color: #ffffff !important;
}
html:not([data-bs-theme="dark"]) .my-toast.toast .toast-header {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
html:not([data-bs-theme="dark"]) .my-toast.toast .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .my-toast.toast,
[data-bs-theme="dark"] .my-toast.toast .toast-header,
[data-layout-mode="dark"] .my-toast.toast,
[data-layout-mode="dark"] .my-toast.toast .toast-header {
  background-color: #ffffff !important;
  color: #212529 !important;
}
[data-bs-theme="dark"] .my-toast.toast .toast-header,
[data-layout-mode="dark"] .my-toast.toast .toast-header {
  border-bottom-color: rgba(33, 37, 41, 0.14) !important;
}
[data-bs-theme="dark"] .my-toast.toast .btn-close,
[data-layout-mode="dark"] .my-toast.toast .btn-close {
  filter: none;
}

/* 2026-06-22 — Toast theo TYPE (success/danger/warning/info): viền trái + màu icon.
 * Giữ nền tương phản theo theme (đã set ở trên), thêm dấu hiệu loại bằng border + icon
 * → phân biệt rõ loại ở CẢ light lẫn dark. Màu theo palette Velzon. */
:root {
  --toast-success: #0ab39c;
  --toast-danger: #f06548;
  --toast-warning: #f7b84b;
  --toast-info: #299cdb;
}
.my-toast.toast {
  border-left: 4px solid transparent;
}
.my-toast.toast .toast-type-icon {
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
}
.my-toast.toast.toast-type-success { border-left-color: var(--toast-success) !important; }
.my-toast.toast.toast-type-success .toast-type-icon { color: var(--toast-success) !important; }
.my-toast.toast.toast-type-danger { border-left-color: var(--toast-danger) !important; }
.my-toast.toast.toast-type-danger .toast-type-icon { color: var(--toast-danger) !important; }
.my-toast.toast.toast-type-warning { border-left-color: var(--toast-warning) !important; }
.my-toast.toast.toast-type-warning .toast-type-icon { color: var(--toast-warning) !important; }
.my-toast.toast.toast-type-info { border-left-color: var(--toast-info) !important; }
.my-toast.toast.toast-type-info .toast-type-icon { color: var(--toast-info) !important; }

/* Toastr (#toast-container): giữ icon + nền tương phản sẵn có, thêm viền trái theo loại. */
#toast-container > div.toast-success { border-left: 4px solid var(--toast-success) !important; }
#toast-container > div.toast-error { border-left: 4px solid var(--toast-danger) !important; }
#toast-container > div.toast-warning { border-left: 4px solid var(--toast-warning) !important; }
#toast-container > div.toast-info { border-left: 4px solid var(--toast-info) !important; }


/* =============================================================================
 * REGION 3 — COMPONENTS
 * Select2, Bootstrap-Select, bảng scroll ngang, các utility class nhỏ.
 * ============================================================================= */

/* --- Tối ưu căn giữa Icon trong Button (An toàn cho Velzon) --- */
/* 2026-09-19: loại .label-icon — rule này (0,2,1) đè position:absolute của Velzon `.btn-label .label-icon`
   (0,2,0) ⇒ icon thành khối riêng, nút .btn-label vỡ 2 dòng (templates/actions/_submit, certs, incidents, roles…). */
.btn i.bx:not(.label-icon),
.btn i[class^="bx-"]:not(.label-icon) {
    vertical-align: middle;
    line-height: inherit;
    position: relative;
    top: -1px; /* Fix cảm giác icon bị bay lên cao hơn so với text */
}

/* Tự động thêm khoảng cách nếu icon đi kèm text */
.btn i:first-child:not(:only-child) {
    margin-right: 0.35rem;
}
.btn i:last-child:not(:only-child) {
    margin-left: 0.35rem;
}

/* --- Bootstrap-Select --- */
.bootstrap-select {
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    height: calc(1.5em + 1rem + calc(var(--vz-border-width) * 2));
    background-color: var(--vz-input-bg-custom);
    outline: 0;
    border-radius: 3px;
}

.bootstrap-select .popover-header {
    padding: 4px 8px;
    background: #f3f6f9;
}

.bootstrap-select .popover-header .close {
    float: right;
    border: none;
    background: none;
}

/* --- Select2 --- */
.select2-results__option--highlighted {
    background-color: var(--vz-secondary) !important;
    color: white !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--vz-primary) !important;
    color: white !important;
}

.select2-results__group {
    font-weight: bold !important;
    color: var(--vz-secondary) !important;
}

.select2-left-group .select2-container--default .select2-selection--single,
.select2-left-group .select2-container--default .select2-selection--multiple {
    border-radius: 4px 0 0 4px !important;
}

.select2-right-group .select2-container--default .select2-selection--single,
.select2-right-group .select2-container--default .select2-selection--multiple {
    border-radius: 0 4px 4px 0 !important;
}

/* Velzon (app.min.css) nới mũi tên lên 34px nhưng vùng chữ vẫn chừa 20px như select2 gốc ⇒ nút ×
   (allowClear, float phải trong vùng chữ) nằm DƯỚI mũi tên: bấm × chỉ mở/đóng dropdown, không xoá.
   Chừa đủ chỗ cho mũi tên để × lộ ra bên trái nó. Luật 34px của Velzon áp cho MỌI theme select2
   nên ở đây cũng vậy. Màn nào ẩn mũi tên (dashboard) tự trả padding về như cũ. */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 38px;
}

.input-group > .select2-container {
    width: auto !important;
    flex: 1 1 auto;
}

.link-select2 {
    color: var(--vz-primary) !important;
}

.select2-selection__choice .link-select2,
.select2-results__option[aria-selected="true"] .link-select2,
.select2-results__option--highlighted .link-select2 {
    color: white !important;
}

.select2-results__option[aria-selected="true"] .link-select2:hover,
.select2-results__option--highlighted .link-select2:hover,
.select2-selection__choice .link-select2:hover {
    text-decoration: underline;
}

/* --- Sticky columns (dark mode support) --- */
.fixed-table-column,
.fixed-table-header-columns,
.fixed-table-body-columns {
    background-color: #ffffff !important;
    z-index: 10 !important;
}

[data-bs-theme="dark"] .fixed-columns,
[data-bs-theme="dark"] .fixed-columns-right {
    background-color: var(--vz-card-bg, var(--bs-body-bg));
}

/* --- Dual listbox (non-selected / selected) --- */
.non-selected-wrapper .header,
.non-selected-wrapper a {
    color: var(--vz-secondary-text-emphasis) !important;
}

.selected-wrapper .header,
.selected-wrapper a {
    color: var(--vz-warning-text-emphasis) !important;
}

.non-selected-wrapper,
.selected-wrapper {
    min-height: 400px !important;
}

/* --- Utilities --- */
.bx-custom-size {
    font-size: 1.2rem !important;
}

.border_dash_thin {
    border: dashed 1px #c2c2c2 !important;
}

.disabled-bg {
    background: #f3f3f8 !important;
}

.hover-temp {
    background-color: rgba(var(--vz-tertiary-bg-rgb), 0.5) !important;
}


/* =============================================================================
 * REGION 4 — TABLE TOOLBAR
 * Toolbar trên đầu bảng: tổng số bản ghi, phân trang, nút filter/setting.
 * Responsive: desktop giữ nguyên; mobile gộp lại 1 hàng gọn.
 * ============================================================================= */

.table-toolbar-controls {
    --vz-toolbar-summary-font-size: var(--vz-font-15);
    --vz-toolbar-action-size: calc(var(--vz-font-16) * 2.35);
    --vz-toolbar-action-gap: calc(var(--vz-border-width) * 4);
    min-width: 0;
}

.table-toolbar-row {
    min-width: 0;
}

.table-toolbar-summary {
    font-size: var(--vz-toolbar-summary-font-size);
    line-height: var(--vz-line-height-base, 1.5);
}

.table-toolbar-pagination {
    min-width: 0;
}

.table-toolbar-pagination nav {
    max-width: 100%;
}

.table-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--vz-toolbar-action-gap);
}

@media (max-width: 767.98px) {
    .table-toolbar-controls {
        --vz-toolbar-summary-font-size: var(--vz-font-16);
        width: 100%;
    }

    .table-toolbar-row {
        width: 100%;
        flex-wrap: wrap;
        align-items: center !important;
        column-gap: calc(var(--vz-border-width) * 4) !important;
        row-gap: calc(var(--vz-border-width) * 6) !important;
    }

    .table-toolbar-summary {
        width: 100%;
        color: var(--vz-body-color) !important;
    }

    .table-toolbar-pagination {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: var(--vz-border-width);
        scrollbar-width: thin;
    }

    .table-toolbar-pagination::-webkit-scrollbar {
        height: calc(var(--vz-border-width) * 4);
    }

    .table-toolbar-pagination .pagination {
        flex-wrap: nowrap;
        width: max-content;
        margin-bottom: 0;
    }

    .pagination-equal {
        --vz-pagination-gap: calc(var(--vz-border-width) * 3);
        --vz-pagination-min-size: var(--vz-toolbar-action-size);
        --vz-pagination-padding-y: calc(var(--vz-border-width) * 3);
        --vz-pagination-padding-x: calc(var(--vz-border-width) * 3);
        --vz-pagination-radius: var(--vz-border-radius-sm);
    }

    .table-toolbar-actions {
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* Nút filter / setting: dùng padding thay vì fixed size để đồng đều với Add/Export */
    .table-toolbar-actions .show-setting,
    .table-toolbar-actions .show-filter,
    .table-toolbar-actions .show-header-filter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .table-toolbar-actions .show-setting i,
    .table-toolbar-actions .show-filter i,
    .table-toolbar-actions .show-header-filter i {
        font-size: 1.15rem !important;
        line-height: 1;
    }
}


/* =============================================================================
 * REGION 5 — PAGINATION (pagination-equal)
 * Component phân trang tuỳ chỉnh hỗ trợ dark mode.
 * Điều chỉnh các CSS variable --vz-pagination-* để thay đổi giao diện.
 * ============================================================================= */

.pagination-equal {
    --vz-pagination-gap:                   calc(var(--vz-border-width) * 2);
    --vz-pagination-font-size:             var(--vz-font-base);
    --vz-pagination-font-weight:           var(--vz-font-weight-bold);
    --vz-pagination-line-height:           var(--vz-line-height-base, 1.5);
    --vz-pagination-padding-y:             calc(var(--vz-border-width) * 4);
    --vz-pagination-padding-x:             calc(var(--vz-border-width) * 7);
    --vz-pagination-min-size:              calc(var(--vz-pagination-font-size) * 2.75);
    --vz-pagination-radius:                var(--vz-border-radius);
    --vz-pagination-bg:                    var(--vz-secondary-bg);
    --vz-pagination-color:                 var(--vz-body-color);
    --vz-pagination-border-color:          var(--vz-border-color);
    --vz-pagination-hover-bg:              var(--vz-primary-bg-subtle);
    --vz-pagination-hover-color:           var(--vz-primary);
    --vz-pagination-hover-border-color:    var(--vz-primary-border-subtle);
    --vz-pagination-active-bg:             var(--vz-primary);
    --vz-pagination-active-color:          var(--vz-white);
    --vz-pagination-active-border-color:   var(--vz-primary);
    --vz-pagination-disabled-bg:           var(--vz-light);
    --vz-pagination-disabled-color:        var(--vz-secondary-color);
    --vz-pagination-disabled-border-color: var(--vz-border-color);
    --vz-pagination-shadow:                var(--vz-box-shadow-sm, var(--vz-card-shadow));
    --vz-pagination-shadow-hover:          var(--vz-box-shadow, var(--vz-card-shadow));
    gap: var(--vz-pagination-gap);
}

.pagination-equal .page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.pagination-equal .page-link {
    min-width: var(--vz-pagination-min-size);
    width: var(--vz-pagination-min-size);
    padding: calc(var(--vz-pagination-padding-y) + 3px) calc(var(--vz-pagination-padding-x) + 3px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vz-pagination-font-size);
    line-height: var(--vz-pagination-line-height);
    border-radius: var(--vz-pagination-radius);
    font-weight: var(--vz-pagination-font-weight);
    flex-shrink: 0;
    border: var(--vz-border-width) solid var(--vz-pagination-border-color);
    color: var(--vz-pagination-color);
    background-color: var(--vz-pagination-bg);
    box-shadow: var(--vz-pagination-shadow);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease;
}

.pagination-equal .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination-equal .page-item:not(.active):not(.disabled) .page-link:focus-visible {
    color: var(--vz-pagination-hover-color);
    background-color: var(--vz-pagination-hover-bg);
    border-color: var(--vz-pagination-hover-border-color);
    box-shadow: var(--vz-pagination-shadow-hover);
}

.pagination-equal .page-item.active .page-link {
    color: var(--vz-pagination-active-color);
    background-color: var(--vz-pagination-active-bg);
    border-color: var(--vz-pagination-active-border-color);
    box-shadow: var(--vz-pagination-shadow-hover);
    z-index: 1;
}

.pagination-equal .page-item.disabled .page-link {
    color: var(--vz-pagination-disabled-color);
    background-color: var(--vz-pagination-disabled-bg);
    border-color: var(--vz-pagination-disabled-border-color);
    pointer-events: none;
    box-shadow: none;
}

.pagination-equal.pagination-sm {
    --vz-pagination-font-size:   var(--vz-font-12);
    --vz-pagination-padding-y:   calc(var(--vz-border-width) * 2);
    --vz-pagination-padding-x:   calc(var(--vz-border-width) * 4);
    --vz-pagination-min-size:    calc(var(--vz-pagination-font-size) * 2.5);
    --vz-pagination-radius:      var(--vz-border-radius-sm);
}


/* =============================================================================
 * REGION 6 — CORPORATE SIDEBAR OVERRIDE
 * Theme Corporate sidebar dark quá tối. Override dynamic theo --vz-primary.
 * Chỉ áp dụng light mode — dark mode giữ mặc định Velzon.
 * ============================================================================= */

[data-theme=corporate]:not([data-bs-theme=dark])[data-sidebar=dark] {
    --vz-vertical-menu-bg: color-mix(in srgb, var(--vz-primary) 75%, black);
    --vz-vertical-menu-border: color-mix(in srgb, var(--vz-primary) 75%, black);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, 0.7);
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.12);
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, 0.6);
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: rgba(255, 255, 255, 0.45);
    --vz-twocolumn-menu-iconview-bg: color-mix(in srgb, var(--vz-primary) 65%, black);
    --vz-vertical-menu-box-shadow: 0 2px 4px rgba(var(--vz-primary-rgb), 0.15);
    --vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(var(--vz-primary-rgb), 0.15);
    --vz-sidebar-user-bg: rgba(255, 255, 255, 0.1);
    --vz-sidebar-user-name-text: #fff;
    --vz-sidebar-user-name-sub-text: rgba(255, 255, 255, 0.65);
}


/* =============================================================================
 * REGION 7 — FLOATING ACTION BAR
 * Thanh công cụ nổi (sticky/floating) dùng cho trang Edit hoặc Bulk Actions.
 * Thiết kế theo phong cách Glassmorphism & Soft Shadow.
 * ============================================================================= */

.fixed-edit-action-bar,
.fixed-bottom-action-bar {
    position: fixed !important;
    bottom: 0;
    margin-bottom: 1.5rem !important; /* Khoảng cách nổi lên phía trên */
    z-index: 1040;
    left: var(--vz-vertical-menu-width, 250px);
    right: 0;
    transition: all 0.3s ease;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.fixed-edit-action-bar .container-fluid,
.fixed-bottom-action-bar .container-fluid {
    display: flex !important;
    justify-content: center !important;
}

/* Khối pill chứa nội dung chính — Phiên bản Elite Deep Navy */
.floating-bar-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(28, 39, 60, 0.95) !important; /* Xanh đen sang trọng/Navy charcoal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(18, 24, 39, 0.45) !important;
    border-radius: 50rem !important; /* Dạng viên thuốc */
}

.floating-bar-pill .link-light {
    color: #D1D5DB !important; /* Xám nhạt cho nút Hủy, không bị gạch gắt */
}

/* Responsive cho Sidebar */
[data-sidebar-size="sm"] .fixed-edit-action-bar,
[data-sidebar-size="sm"] .fixed-bottom-action-bar {
    left: var(--vz-vertical-menu-width-sm, 70px) !important;
}

/* Layout ngang không có sidebar dọc → thanh action trải hết chiều rộng */
html[data-layout="horizontal"] .fixed-edit-action-bar,
html[data-layout="horizontal"] .fixed-bottom-action-bar,
html[data-layout="horizontal"] .fixed-action-bar {
    left: 0 !important;
}

@media (max-width: 991.98px) {
    .fixed-edit-action-bar,
    .fixed-bottom-action-bar {
        left: 0 !important;
    }
}

.alert-dismissible .btn-close::after {
    background: transparent !important;
    content: "\f859" !important;
    font-family: "boxicons" !important;
    font-size: 18px;
    line-height: 15px;
}

[data-layout-mode="dark"] .filepond--panel-root,
[data-bs-theme="dark"] .filepond--panel-root {
    background-color: var(--vz-input-bg) !important;
    border-color: var(--vz-border-color) !important;
}

[data-layout-mode="dark"] .filepond--drop-label,
[data-bs-theme="dark"] .filepond--drop-label {
    color: var(--vz-body-color) !important;
    background-color: transparent !important;
}

[data-layout-mode="dark"] .filepond--label-action,
[data-bs-theme="dark"] .filepond--label-action {
    color: var(--vz-primary) !important;
    text-decoration-color: var(--vz-primary) !important;
}

[data-layout-mode="dark"] .filepond--file,
[data-bs-theme="dark"] .filepond--file {
    color: #fff !important;
}

[data-layout-mode="dark"] .filepond--file-action-button,
[data-bs-theme="dark"] .filepond--file-action-button {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.filepond--root.is-invalid,
.filepond--root.is-invalid .filepond--panel-root,
.filepond--root.is-invalid .filepond--drop-label {
    border-color: var(--vz-form-invalid-border-color, #f06548) !important;
}

.filepond--root.is-valid,
.filepond--root.is-valid .filepond--panel-root,
.filepond--root.is-valid .filepond--drop-label {
    border-color: var(--vz-form-valid-border-color, #0ab39c) !important;
}

.select2-container.is-invalid .select2-selection {
    border-color: var(--vz-form-invalid-border-color, #f06548) !important;
}

.select2-container.is-valid .select2-selection {
    border-color: var(--vz-form-valid-border-color, #0ab39c) !important;
}

.custom-accordionwithicon-plus .accordion-button::after {
    background-color: currentColor !important;
    background-image: none !important;
    content: "" !important;
    font-size: 1.1rem;
    height: 1.1rem;
    line-height: .8;
    mask: url("../fonts/boxicons/svg/basic/bx-plus.svg") center / contain no-repeat;
    -webkit-mask: url("../fonts/boxicons/svg/basic/bx-plus.svg") center / contain no-repeat;
    transform: none !important;
    vertical-align: middle;
    width: 1.1rem;
}

.custom-accordionwithicon-plus .accordion-button:not(.collapsed)::after {
    background-image: none !important;
    content: "" !important;
    margin-right: -3px;
    mask-image: url("../fonts/boxicons/svg/basic/bx-minus.svg");
    -webkit-mask-image: url("../fonts/boxicons/svg/basic/bx-minus.svg");
    transform: none !important;
}

/* 2026-08-19 — Accordion mũi tên (.custom-accordionwithicon): app.css của theme vẽ ::after
   bằng glyph font "Material Design Icons" (\f0142 / \f0140) nhưng dự án chỉ nạp
   boxicons (icons.css + font MDI không tồn tại) ⇒ ra ô vuông tofu. Thay bằng mask
   SVG boxicons, cùng cách đã xử lý cho -plus ở trên. */
.custom-accordionwithicon .accordion-button::after {
    background-color: currentColor !important;
    background-image: none !important;
    content: "" !important;
    font-size: 1.1rem;
    height: 1.1rem;
    line-height: .8;
    mask: url("../fonts/boxicons/svg/basic/bx-chevron-right.svg") center / contain no-repeat;
    -webkit-mask: url("../fonts/boxicons/svg/basic/bx-chevron-right.svg") center / contain no-repeat;
    transform: none !important;
    vertical-align: middle;
    width: 1.1rem;
}

.custom-accordionwithicon .accordion-button:not(.collapsed)::after {
    background-image: none !important;
    content: "" !important;
    margin-right: -3px;
    mask-image: url("../fonts/boxicons/svg/basic/bx-chevron-down.svg");
    -webkit-mask-image: url("../fonts/boxicons/svg/basic/bx-chevron-down.svg");
    transform: none !important;
}

/* =====================================================================
   2026-07-18 — Flowbox: nhãn HTTT trong ô số tiền + 2 cột ẩn mặc định
   (Nhà cung cấp, Số & ngày hoá đơn). CSS custom nằm ở fixed.css theo
   CLAUDE.md #2 (không đụng flow.css build sẵn của theme).
   ===================================================================== */

/* Nhãn hình thức thanh toán (CK/TM) dưới số tiền — dùng biến Velzon để hợp Dark/Light */
.amount-col .flow-pay-badge {
    margin-top: -1px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    line-height: 1.1;
    white-space: nowrap;
}
.amount-col .flow-pay-badge i {
    font-size: 0.85em;
    opacity: 0.85;
}

/* Cột ẩn: Nhà cung cấp */
.supplier-col {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
    font-size: 0.75rem;
    color: var(--vz-body-color);
    padding-right: 8px;
}

/* Cột ẩn: Số & ngày hoá đơn (mỗi HĐ 1 dòng) */
.invoices-col {
    flex: 0 0 170px;
    width: 170px;
    max-width: 170px;
    font-size: 0.72rem;
    color: var(--vz-body-color);
    padding-right: 8px;
    overflow: hidden;
}
.invoices-col .inv-line {
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invoices-col .inv-line .inv-date {
    color: var(--vz-text-muted, #878a99);
}
.invoices-col .inv-empty,
.supplier-col .sup-empty {
    color: var(--vz-text-muted, #878a99);
}

/* Mặc định ẩn 2 cột — chỉ hiện khi user bật switch (cookie inbox_show_*) */
body.hide-supplier .supplier-col { display: none !important; }
body.hide-invoices .invoices-col { display: none !important; }

/* 2026-07-22 — TT_REJECTED_MOVE_INBOX: dòng flowbox bị TỪ CHỐI (merge vào nav
   inbox/rejected của NGƯỜI TRÌNH) — nền đỏ nhạt, hỗ trợ cả Light & Dark mode.
   rgba trên nền trắng = hồng nhạt, trên nền tối = đỏ trầm (đỏ Velzon #f06548). */
.email-row.flow-row-rejected-draft,
.email-row.flow-row-rejected-draft.unread,
.email-row.flow-row-rejected-draft.read {
    background: rgba(240, 101, 72, 0.12) !important;
}
.email-row.flow-row-rejected-draft:hover {
    background: rgba(240, 101, 72, 0.18) !important;
}
[data-layout-mode="dark"] .email-row.flow-row-rejected-draft,
[data-bs-theme="dark"] .email-row.flow-row-rejected-draft {
    background: rgba(240, 101, 72, 0.16) !important;
}
[data-layout-mode="dark"] .email-row.flow-row-rejected-draft:hover,
[data-bs-theme="dark"] .email-row.flow-row-rejected-draft:hover {
    background: rgba(240, 101, 72, 0.24) !important;
}
/* Badge "Từ chối" cạnh tiêu đề dòng bị từ chối */
.flow-rejected-badge {
    font-size: 10px;
    flex-shrink: 0;
}

/* ---- "Xem với tư cách" trên navbar (App\Support\ViewAs, fixed.js §7) ---- */
.nav-view-as-wrapper { min-width: 220px; max-width: 320px; }
.nav-view-as-wrapper .select2-container { width: 100% !important; }
/* Đang nhìn bằng mắt người khác: viền đỏ ô chọn + avatar để admin không quên mình đang giả lập */
.nav-view-as-wrapper.is-impersonating .select2-container--default .select2-selection--single {
    border-color: var(--vz-danger);
    box-shadow: 0 0 0 1px var(--vz-danger);
}
.topbar-user.view-as-active .header-profile-user { box-shadow: 0 0 0 2px var(--vz-danger); }


/* =============================================================================
 * REGION 8 — SIDEBAR ACTIVE/HOVER (khối màu cả item, kiểu MISA)
 * -----------------------------------------------------------------------------
 * Velzon mặc định chỉ đổi CHỮ từ xám nhạt sang trắng khi active → gần như không
 * nhận ra mình đang ở đâu. Ở đây tô nguyên khối item:
 *   • active : nền trắng, chữ + icon = --vz-primary
 *   • hover  : nền gần trắng, chữ gần primary
 * Chỉ áp dụng cho sidebar DỌC (layout ngang menu nằm trên topbar, để template lo).
 * Hình khối được bo góc và thụt vào 2 bên; margin đặt cho MỌI trạng thái nên
 * chữ không nhảy khi hover (chỉ màu đổi).
 * ============================================================================= */

html:not([data-layout="horizontal"]) .navbar-menu {
    --jt-menu-block-radius: .5rem;
    --jt-menu-block-inset: .75rem;
    --jt-menu-active-bg: #fff;
    --jt-menu-active-fg: var(--vz-primary);
    --jt-menu-hover-bg: color-mix(in srgb, #fff 92%, var(--vz-primary));
    --jt-menu-hover-fg: color-mix(in srgb, var(--vz-primary) 88%, black);
}

/* Hình khối: bo góc + thụt vào, bù lại padding ngang để chữ/icon đứng yên chỗ cũ.
   position:relative để chevron (:after, right:18px) neo theo khối chứ không theo
   mép sidebar. Không áp dụng khi sidebar thu nhỏ (sm) — lúc đó template biến
   menu-link thành header của popup bay ra, đụng vào là vỡ. */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link {
    position: relative;
    margin-inline: var(--jt-menu-block-inset);
    padding-inline: calc(1.5rem - var(--jt-menu-block-inset));
    border-radius: var(--jt-menu-block-radius);
    transition: background-color .15s ease, color .15s ease;
}

html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-sm .nav-link {
    padding-inline: calc(2.25rem - var(--jt-menu-block-inset)) calc(1.5rem - var(--jt-menu-block-inset)) !important;
}

/* --- HOVER: nền gần trắng, chữ gần primary --- */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link:hover,
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-sm .nav-link:hover {
    background-color: var(--jt-menu-hover-bg);
    color: var(--jt-menu-hover-fg);
}

/* --- ACTIVE: nền trắng, chữ primary ---
   Nhóm xổ (data-bs-toggle=collapse) KHÔNG tô: cha chỉ "active" ăn theo con đang
   mở, tô cả hai thành hai khối trắng chồng nhau. Cha giữ nguyên kiểu chữ sáng. */
html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-link.active:not([data-bs-toggle="collapse"]),
html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-sm .nav-link.active {
    background-color: var(--jt-menu-active-bg);
    color: var(--jt-menu-active-fg);
    font-weight: 600;
}

/* --- NHÓM ĐANG MỞ TRANG CON ---
   Cha "active" chỉ vì con đang được chọn. Nếu tô cha như một mục (chữ sáng/đậm) thì khi con đứng
   ngay dưới cha, hai dòng sáng liền nhau trông như chọn cả hai. Thay vào đó: cả nhóm (dòng cha +
   các con) nằm chung một nền mờ; khối trắng chỉ dành cho con. Nền pha từ màu chữ active của theme
   sidebar → sidebar tối ra trắng mờ, sidebar sáng ra primary nhạt. */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .nav-item.jt-menu-group-active {
    margin-inline: var(--jt-menu-block-inset);
    padding-bottom: .375rem;
    border-radius: var(--jt-menu-block-radius);
    background-color: color-mix(in srgb, var(--vz-vertical-menu-item-active-color) 9%, transparent);
}
/* Bên trong nền nhóm: bỏ phần thụt của từng khối (nhóm đã thụt rồi), con thụt nhẹ để khối trắng
   không chạm mép nền nhóm. Chữ/icon giữ đúng cột cũ nhờ bù padding. */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .nav-item.jt-menu-group-active > .nav-link {
    margin-inline: 0;
}
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .nav-item.jt-menu-group-active .nav-sm .nav-link {
    margin-inline: .375rem;
    padding-inline: calc(2.25rem - var(--jt-menu-block-inset) - .375rem) calc(1.5rem - var(--jt-menu-block-inset) - .375rem) !important;
}
/* Dòng cha trong nhóm: không hover-khối (nền nhóm đã đủ), chỉ sáng chữ. */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .nav-item.jt-menu-group-active > .nav-link:hover {
    background-color: transparent;
    color: var(--vz-vertical-menu-item-active-color);
}

/* Icon + chevron trong khối đã tô phải ăn theo màu chữ, nếu không app.css/REGION 1
   ép về --vz-vertical-menu-item-active-color (#fff) = trắng trên trắng. */
html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-link.active:not([data-bs-toggle="collapse"]) i,
html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-sm .nav-link.active i,
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link:hover i,
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link:hover:after,
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link:hover svg {
    color: inherit !important;
    opacity: 1;
}

html:not([data-layout="horizontal"]) .navbar-menu .navbar-nav .nav-link.active:not([data-bs-toggle="collapse"]) svg {
    color: inherit;
}

/* Chevron của nhóm ĐANG XỔ bị REGION 1 ép cứng về màu trắng (!important). Khi
   hover nền đã gần trắng → mũi tên tàng hình. Kéo nó về màu chữ của khối. */
html:not([data-layout="horizontal"]):not([data-sidebar-size="sm"]) .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:hover:after {
    color: inherit !important;
}

/* Sidebar thu nhỏ (sm): rê chuột vào mục đang active thì template kéo menu-link
   thành thanh tiêu đề của popup bay ra, nền tối trở lại → chữ primary chìm nghỉm.
   Trả màu chữ về mặc định trong đúng trường hợp này. */
html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > .nav-link.active {
    color: var(--vz-vertical-menu-item-active-color);
}
html:not([data-layout="horizontal"])[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > .nav-link.active i {
    color: inherit !important;
}

/* 2026-10-06 — Tooltip không được bắt chuột (đồng bộ với IZY.ERP-Core). Icon ở cột thao tác cao hơn
   khung chữ của thẻ <a> bọc nó, nên tooltip (neo theo khung <a>) phủ lên mép trên icon. Rê chuột vào
   đúng mép đó là con trỏ nằm trên tooltip → <a> mất hover → tooltip ẩn → <a> hover lại → hiện lại:
   nháy liên tục. */
.tooltip {
    pointer-events: none;
}