/* eDMS shared UI. Loaded once by _Layout, including workspace frames.
   Use dms-* components on migrated pages. Business data/state stays in the page JS.
   Existing navigation/search/workspace styles remain in their dedicated files. */
:root {
    --dms-title-color: #024a70;
    --dms-accent-color: #0d6efd;
    --dms-border-color: #e4e8ec;
    --dms-focused-bg: #dceeff;
    --dms-edited-bg: #fff8db;
    --dms-card-radius: 7px;
    --dms-action-size: 38px;
}
.dms-title { color: var(--dms-title-color); font-size: 24px; letter-spacing: .5px; }
.dms-title-nowrap { white-space: nowrap; }
.dms-card { border: 1px solid var(--dms-border-color); border-radius: var(--dms-card-radius); background: #fff; padding: 8px; min-width: 0; }
.dms-card-fill { height: 100%; }
.dms-report-card { padding: 10px; }
.dms-section-title { color: var(--dms-accent-color); font-weight: 600; padding: 6px 6px 9px; }
.dms-toolbar-title { display: flex; align-items: center; height: 100%; margin: 0; padding: 0 6px; white-space: nowrap; }
.dms-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; justify-content: flex-end; }
.dms-grid-button { width: var(--dms-action-size); height: var(--dms-action-size); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #444; border-color: #d5d9df; }
.dms-grid-button:hover { background: #f2f5f8; color: var(--dms-title-color); border-color: #b8c3ce; }
.dms-pivot-wrap { max-width: 100%; overflow-x: auto; }
.dms-date { width: 145px; }
.dms-hint { background: #eef7ff; border-left: 4px solid var(--dms-accent-color); border-radius: 5px; color: #345; font-size: 13px; padding: 8px 12px; }
.dms-report-status { color: #6c757d; font-size: 13px; min-height: 20px; padding: 8px 2px 0; }
.dms-status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid currentColor; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dms-card .dx-data-row td, .dms-card .dx-header-row td,
.dms-pivot .dx-pivotgrid-area td, .dms-pivot .dx-pivotgrid-horizontal-headers td,
.dms-pivot .dx-pivotgrid-vertical-headers td { vertical-align: middle; }
.dms-card .dx-header-row td, .dms-pivot .dx-pivotgrid-horizontal-headers td,
.dms-pivot .dx-pivotgrid-vertical-headers td { color: var(--dms-title-color); font-weight: 600; }
.dms-card .dx-row-modified > td, .dms-card .dx-row-inserted > td { background-color: var(--dms-edited-bg) !important; }
.dms-pivot { min-height: 580px; }
.dms-pivot .dx-pivotgrid-area-data td { white-space: nowrap; }
@media (max-width: 767.98px) {
    .dms-title { font-size: 20px; }
    .dms-date { width: 135px; }
    .dms-pivot { min-height: 500px; }
}
/* Accounting-specific rules. Scope also covers dropdowns rendered outside grids. */
.dms-ui-accounting .dms-accounting-filter-card { min-height: 218px; }
.dms-ui-accounting #gridTrangThai .dms-state-row > td { background: var(--dms-state-bg); }
.dms-ui-accounting #gridLoaiChungTu .dx-row-focused > td,
.dms-ui-accounting #gridTrangThai .dx-row-focused > td,
.dms-ui-accounting #gridHinhThucThanhToan .dx-row-focused > td { background-color: var(--dms-focused-bg) !important; color: #123 !important; }
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell,
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell .dx-texteditor-input,
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell input,
.dms-ui-accounting .dx-dropdownlist-popup-wrapper .dx-list-item-content { color: #212529 !important; -webkit-text-fill-color: #212529 !important; }
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell,
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell .dx-texteditor-input,
.dms-ui-accounting #gridDinhKhoan .cot-dinh-khoan-cell input { opacity: 1 !important; }
@media (max-width: 1199.98px) {
    .dms-ui-accounting .dms-accounting-filter-card { min-height: auto; }
}
/* Shell rules moved verbatim from _Layout, before app-navigation.css as before. */
body {
font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
}

.dropdown-item {
display: flex;
align-items: center;
padding: 8px 16px;
}

.menu-icon {
width: 20px;
height: 20px;
margin-right: 8px;
}

.navbar .btn {
margin-left: 10px;
}

.navbar img {
vertical-align: middle;
}

.hidden-column {
display: none;
}

#searchTitle {
flex: 1;
margin-right: 10px;
}

#filterChuDe {
flex: 1;
}

.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
z-index: 1000;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 24px;
}

.back-to-top:hover {
opacity: 0.8;
}

.app-footer {
    position: static;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 8px 0;
    line-height: normal;
}
.app-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.workspace-host-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin-bottom: 0;
}
.workspace-host-page > .workspace-panes {
    flex: 1 0 auto;
    min-height: 0;
}
.share-buttons {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
    margin: 0;
    background-color: transparent;
}

.btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
padding: 0;
overflow: hidden;
border: none;
background-color: transparent;
}

.icon-image {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Ép toàn bộ thanh navbar và menu thả xuống phải nằm trên cùng */
/* Ép toàn bộ thanh navbar và menu thả xuống phải nằm trên cùng */
.navbar {
position: relative; /* Đảm bảo có position để nhận z-index */
z-index: 999999 !important;
}

.dropdown-menu {
z-index: 999999 !important;
}

.nav-item.dropdown {
position: relative; /* PHẢI CÓ CÁI NÀY thì z-index dòng dưới mới có tác dụng nha ní */
z-index: 999999 !important;
}

/* Hạ bớt lớp cha của bản đồ xuống tầng dưới cùng */
#map, .leaflet-container {
z-index: 1 !important;
}

/* Trấn áp triệt để các lớp (pane) và control của thư viện bản đồ */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
z-index: 10 !important;
}

/* Đảm bảo toàn bộ Header luôn là vị trí tối cao trên DOM */
header, .navbar {
position: relative;
z-index: 999999 !important;
}

/* Xuất bán: specific layout/state palette, shared file loaded by _Layout. */

    .xb-page {
        padding: 4px 2px 24px;
    }

    .xb-title {
        color: #075985;
        font-size: 20px;
        line-height: 1.05;
        font-weight: 800;
        margin: 0;
    }

    .xb-subtitle {
        color: #64748b;
        font-size: 14px;
        line-height: 1.1;
        margin-top: -1px;
    }

    .xb-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; border-bottom: 1px solid #dbe3ec; margin-bottom: 12px; }
    .xb-tabs { border: 0; margin: 0 0 0 auto; flex-shrink: 0; }

        .xb-tabs .nav-link {
            color: #475569;
            font-weight: 700;
            border: 0;
            border-bottom: 3px solid transparent;
        }

            .xb-tabs .nav-link.active {
                color: #0d6efd;
                border-bottom-color: #0d6efd;
                background: transparent;
            }

    .xb-card {
        border: 1px solid #dbe3ec;
        border-radius: 10px;
        padding: 10px;
        background: #fff;
        margin-top: 12px;
    }

    .xb-toolbar {
        display: flex;
        align-items: end;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

        .xb-toolbar .date-box {
            width: 155px;
        }

        .xb-toolbar .form-label {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .xb-toolbar .btn {
            white-space: nowrap;
        }

    .xb-grid-title {
        color: #075985;
        font-weight: 800;
        margin: 4px 0 8px;
    }

    .xb-detail-wrap {
        border-top: 1px solid #e5e7eb;
        margin-top: 12px;
        padding-top: 8px;
    }

    .xb-grid-toolbar-title {
        margin: 0;
        line-height: 1;
    }

    .xb-delete-row-button .dx-icon {
        color: #dc3545 !important;
        font-size: 17px;
    }

    .xb-delete-row-button:hover .dx-icon {
        color: #a71d2a !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-new > td {
        background-color: #eff6ff !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-approved > td {
        background-color: #fffbeb !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-exported > td {
        background-color: #f5f3ff !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-delivered > td {
        background-color: #ecfeff !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-posted > td {
        background-color: #ecfdf5 !important;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-cancelled > td {
        background-color: #fef2f2 !important;
        color: #991b1b;
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-row:hover > td {
        filter: brightness(0.975);
    }

    .xb-page .dx-datagrid-rowsview .dx-row.xb-status-row.dx-row-focused > td {
        box-shadow: inset 0 2px #2563eb, inset 0 -2px #2563eb;
    }

    .xb-page .dx-datagrid-rowsview td.xb-promotion-cell {
        white-space: normal !important;
        vertical-align: top;
    }

    .xb-promotion-lines {
        min-width: 0;
        flex: 1;
    }

    .xb-promotion-line {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

        .xb-promotion-line + .xb-promotion-line {
            margin-top: 3px;
        }

    .xb-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 2px 9px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

        .xb-status-badge::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }

        .xb-status-badge.xb-status-new {
            color: #1d4ed8;
            background: #dbeafe;
            border-color: #bfdbfe;
        }

        .xb-status-badge.xb-status-approved {
            color: #a16207;
            background: #fef3c7;
            border-color: #fde68a;
        }

        .xb-status-badge.xb-status-exported {
            color: #6d28d9;
            background: #ede9fe;
            border-color: #ddd6fe;
        }

        .xb-status-badge.xb-status-delivered {
            color: #0e7490;
            background: #cffafe;
            border-color: #a5f3fc;
        }

        .xb-status-badge.xb-status-posted {
            color: #047857;
            background: #d1fae5;
            border-color: #a7f3d0;
        }

        .xb-status-badge.xb-status-cancelled {
            color: #b91c1c;
            background: #fee2e2;
            border-color: #fecaca;
        }

    .xb-editor {
        border: 1px solid #93c5fd;
        background: #f8fbff;
        border-radius: 10px;
        padding: 12px;
        margin: 10px 0;
    }

    .xb-editor-title {
        color: #075985;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .xb-editor .form-label {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .xb-required::after {
        content: " *";
        color: #dc2626;
    }

    .xb-lookup-button {
        border-color: #ced4da;
    }

    .xb-lookup-hint {
        color: #64748b;
        font-size: 11px;
        margin-top: 2px;
    }

    .xb-page .dx-datagrid-rowsview .dx-row > td {
        vertical-align: middle;
    }

    .xb-page .dx-datagrid-total-footer .dx-datagrid-summary-item {
        font-weight: 700;
        color: #075985;
    }

    @media (max-width: 768px) {
        .xb-toolbar .date-box {
            width: 100%;
        }

        .xb-toolbar .btn {
            flex: 1 1 auto;
        }
    }

    /* Compact header controls on the title row, shared by both tabs. */
    .xb-header-grid .date-box {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

        .xb-header-grid .date-box .form-label {
            margin: 0;
            font-size: 13px;
        }

        .xb-header-grid .date-box .form-control {
            width: 132px;
            padding: 4px 6px;
            font-size: 13px;
            min-height: 32px;
        }

    .xb-header-grid .dx-toolbar .btn {
        padding: 5px 9px;
        font-size: 13px;
        white-space: nowrap;
        min-height: 32px;
    }

    .xb-header-grid .xb-grid-toolbar-title {
        white-space: nowrap;
        font-size: 14px;
    }

.xb-order-popup .dx-popup-content { overflow-y: auto; }
.xb-order-popup .xb-editor { border: 0; background: #fff; border-radius: 0; padding: 4px; margin: 0; }
.xb-order-popup .xb-editor-title { display: none; }
.xb-page .xb-header-grid .dx-toolbar .dms-grid-button { width: 38px; height: 38px; padding: 0; }