@charset "UTF-8";

:root {
    --erp-header-height: 48px;
    --app-bg: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --border: #dbe2ea;
    --text: #172033;
    --muted: #687385;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #12805c;
    --danger: #c2410c;
    --warning: #a16207;
    --sidebar: #111827;
    --sidebar-muted: #9ca3af;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--app-bg);
    color: var(--text);
    font-size: 14px;
}

a {
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    background: var(--app-bg);
}

.app-sidebar {
    width: 264px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    background: var(--sidebar);
    color: #fff;
    transition: width .18s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 72px;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand-text,
.sidebar-link-text,
.sidebar-toggle-text,
.sidebar-user-role {
    transition: opacity .12s ease;
}

.brand-mark {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    color: var(--sidebar);
    font-weight: 800;
}

.auth-shell .brand-mark {
    background: var(--sidebar);
    color: #fff;
}

.brand-title {
    display: block;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 700;
}

.brand-subtitle {
    display: block;
    margin-top: .15rem;
    color: var(--sidebar-muted);
    font-size: .78rem;
}

.sidebar-nav {
    padding: .75rem;
    overflow-y: auto;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 38px;
    margin: .7rem .75rem 0;
    padding: .45rem .75rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    color: #e5e7eb;
    font-weight: 700;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.sidebar-toggle-icon {
    width: 18px;
    height: 18px;
    position: relative;
    flex: 0 0 18px;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.sidebar-toggle-icon::before {
    top: 5px;
}

.sidebar-toggle-icon::after {
    top: 11px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 40px;
    padding: .6rem .75rem;
    color: #d1d5db;
    border-radius: 7px;
    font-weight: 600;
}

.sidebar-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sidebar-link.active {
    background: #fff;
    color: #111827;
}

.nav-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255,255,255,.1);
    color: currentColor;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.sidebar-user {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user-name {
    font-weight: 700;
}

.sidebar-user-role {
    color: var(--sidebar-muted);
    font-size: .8rem;
}

.app-sidebar.is-collapsed {
    width: 72px;
}

.app-sidebar.is-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
}

.app-sidebar.is-collapsed .sidebar-brand-text,
.app-sidebar.is-collapsed .sidebar-link-text,
.app-sidebar.is-collapsed .sidebar-toggle-text,
.app-sidebar.is-collapsed .sidebar-user-role {
    display: none;
}

.app-sidebar.is-collapsed .sidebar-toggle {
    justify-content: center;
    margin: .7rem .6rem 0;
    padding: .45rem;
}

.app-sidebar.is-collapsed .sidebar-nav {
    padding: .7rem .55rem;
}

.app-sidebar.is-collapsed .sidebar-link {
    justify-content: center;
    padding: .5rem;
}

.app-sidebar.is-collapsed .sidebar-user {
    padding: .75rem .45rem;
    text-align: center;
}

.app-sidebar.is-collapsed .sidebar-user-name {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.app-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}

.topbar-leading {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.topbar-heading {
    min-width: 0;
}

.topbar-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    flex: 0 0 36px;
}

.topbar-nav-toggle:hover,
.topbar-nav-toggle:focus {
    border-color: #b9c7d8;
    background: #eef2f7;
    color: var(--text);
}

.topbar-nav-toggle-icon {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    position: relative;
    transition: background-color .18s ease;
}

.topbar-nav-toggle-icon::before,
.topbar-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform .18s ease, top .18s ease;
}

.topbar-nav-toggle-icon::before {
    top: -5px;
}

.topbar-nav-toggle-icon::after {
    top: 5px;
}

.app-shell.is-mobile-nav-open .topbar-nav-toggle-icon {
    background: transparent;
}

.app-shell.is-mobile-nav-open .topbar-nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.app-shell.is-mobile-nav-open .topbar-nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.mobile-nav-backdrop {
    display: none;
}

.topbar-preferences {
    min-width: 220px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.topbar-user-identity {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    max-width: 220px;
    padding-left: .75rem;
    padding-top: .35rem;
    padding-right: .35rem;
    padding-bottom: .35rem;
    border-left: 1px solid var(--border);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    line-height: 1.2;
    text-align: right;
    cursor: pointer;
}

.topbar-user-identity:hover,
.topbar-user-identity:focus-visible,
.topbar-user-menu.show .topbar-user-identity {
    border-radius: 6px;
    background: var(--surface-muted);
}

.topbar-user-text {
    display: block;
    min-width: 0;
}

.topbar-user-name {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: .875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-role {
    display: block;
    margin-top: .15rem;
    color: var(--text-muted);
    font-size: .75rem;
}

.topbar-user-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 5px solid #64748b;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform .15s ease;
}

.topbar-user-menu.show .topbar-user-caret {
    transform: rotate(180deg);
}

.topbar-user-dropdown {
    width: min(280px, calc(100vw - 1rem));
    padding: .45rem 0;
}

.topbar-user-dropdown .topbar-preferences {
    width: 100%;
    min-width: 0;
}

.topbar-user-dropdown-header {
    display: grid;
    gap: .15rem;
    padding: .4rem 1rem;
}

.topbar-user-dropdown-header span {
    color: var(--text-muted);
    font-size: .78rem;
}

.topbar-user-logout {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #b91c1c;
    font-weight: 700;
}

.topbar-alert-button {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #64748b;
}

.topbar-alert-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-alert-button.has-alerts {
    border-color: #f59e0b;
    background: #fff7ed;
    color: #c2410c;
    animation: topbar-alert-pulse 2.2s ease-in-out infinite;
}

.topbar-alert-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.topbar-alert-menu {
    width: min(390px, calc(100vw - 16px));
    max-height: min(520px, calc(100vh - 70px));
    overflow-y: auto;
    padding: 0;
}

.topbar-alert-heading {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.topbar-alert-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #172033;
}

.topbar-alert-item:hover {
    background: #fff7ed;
    color: #172033;
}

.topbar-alert-item span {
    color: #64748b;
    font-size: .78rem;
}

@keyframes topbar-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .16); }
}

.page-kicker {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.page-title {
    margin: .1rem 0 0;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: 0;
}

.project-title-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .1rem;
}

.project-title-back {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .25rem .6rem;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: var(--surface-muted);
    color: #374151;
    font-size: .84rem;
    font-weight: 750;
}

.project-title-back:hover,
.project-title-back:focus {
    border-color: #9bbcfb;
    background: #eef4ff;
    color: var(--primary);
}

.project-title-separator {
    color: var(--muted);
    font-weight: 750;
}

.content-wrap {
    width: 100%;
    max-width: none;
    flex: 1;
    padding: .2rem .6rem .5rem;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        linear-gradient(120deg, rgba(37, 99, 235, .08), rgba(18, 128, 92, .06)),
        var(--app-bg);
}

.login-card {
    width: min(100%, 440px);
}

.card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.card-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 8px 8px 0 0 !important;
}

.card-header h5,
.card-title {
    font-weight: 750;
    letter-spacing: 0;
}

.project-general-card .card-header {
    min-height: 34px;
    padding: .28rem .55rem;
}

.project-general-card .card-body {
    padding: .2rem .55rem .4rem;
}

.project-general-card .row {
    --bs-gutter-y: .35rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 1rem;
}

.stat-card {
    height: 100%;
}

.stat-label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.stat-value {
    margin-top: .35rem;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
}

.stat-note {
    margin-top: .65rem;
    color: var(--muted);
}

.table {
    margin-bottom: 0;
    color: var(--text);
}

.table thead th {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    color: #4b5563;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td {
    padding: .78rem 1rem;
    border-color: #edf1f5;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: #f8fafc;
}

.form-label {
    color: #374151;
    font-size: .82rem;
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 40px;
    border-radius: 7px;
    border: 1px solid #cfd8e3;
    color: var(--text);
    font-size: .92rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .14);
}

.btn {
    border-radius: 7px;
    font-weight: 700;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: #9bbcfb;
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.alert {
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: none;
}

.app-toast-container {
    position: fixed;
    top: .85rem;
    right: .85rem;
    z-index: 1090;
    display: grid;
    gap: .5rem;
    width: min(360px, calc(100vw - 1.5rem));
    pointer-events: none;
}

.app-toast {
    margin: 0;
    padding-right: 3rem;
    pointer-events: auto;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.app-toast.alert-dismissible .btn-close {
    top: 50%;
    right: .35rem;
    padding: .75rem;
    transform: translateY(-50%);
}

.badge,
.status-badge {
    border-radius: 999px;
    padding: .38rem .65rem;
    font-weight: 750;
}

.bg-soft-primary {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
}

.bg-soft-success {
    background: #eaf8f2 !important;
    color: var(--success) !important;
}

.bg-soft-danger {
    background: #fff1ea !important;
    color: var(--danger) !important;
}

.bg-soft-warning {
    background: #fff8e5 !important;
    color: var(--warning) !important;
}

.quick-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    font-weight: 700;
}

.quick-action:hover {
    border-color: #b9c7d8;
    background: var(--surface-muted);
    color: var(--text);
}

.progress {
    height: .45rem;
    background: #e8eef5;
}

.progress-bar {
    background: var(--primary);
}

@media (max-width: 991.98px) {
    .app-shell {
        display: block;
    }

    .topbar-nav-toggle {
        display: inline-flex;
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(15, 23, 42, .42);
    }

    .app-shell.is-mobile-nav-open .mobile-nav-backdrop {
        display: block;
    }

    .app-sidebar {
        position: fixed;
        top: calc(var(--erp-topbar-height, 48px) + 6px);
        left: .5rem;
        right: .5rem;
        width: auto;
        min-height: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: max-height .22s ease, opacity .18s ease, transform .18s ease, visibility .18s ease;
        z-index: 1045;
        border-radius: 12px;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .28);
    }

    .app-shell.is-mobile-nav-open .app-sidebar {
        max-height: min(72vh, 560px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .app-sidebar.is-collapsed {
        width: auto;
    }

    .sidebar-brand,
    .sidebar-toggle {
        display: none;
    }

    .app-sidebar.is-collapsed .sidebar-brand-text,
    .app-sidebar.is-collapsed .sidebar-link-text,
    .app-sidebar.is-collapsed .sidebar-user-role {
        display: block;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: min(58vh, 460px);
        padding: .5rem;
    }

    .sidebar-link {
        flex: none;
        width: 100%;
    }

    .sidebar-user {
        display: block;
        padding: .65rem .75rem;
    }

    .topbar {
        min-height: 56px;
        padding: 0 .6rem;
    }

    .topbar-actions {
        gap: .4rem;
    }

    .topbar-user-identity {
        max-width: 130px;
        padding-left: .5rem;
    }

    .topbar-user-role {
        display: none;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }

    .content-wrap {
        padding: .2rem .5rem .5rem;
    }
}

.finance-mobile-scanner {
    padding: .75rem;
    border: 1px dashed #93c5fd;
    border-radius: .6rem;
    background: #f8fbff;
}

.finance-scan-pages {
    display: grid;
    gap: .4rem;
}

.finance-mobile-scanner[hidden],
.finance-scan-pages[hidden],
.finance-mobile-scanner [hidden] {
    display: none !important;
}

.finance-scan-page {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border: 1px solid #dbeafe;
    border-radius: .45rem;
    background: #fff;
}

.finance-scan-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .75rem;
    font-weight: 700;
}

.finance-scan-page-name {
    overflow: hidden;
    color: #475569;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .topbar-user-identity {
        max-width: 150px;
    }

    .topbar-preferences {
        min-width: 0;
        width: 100%;
    }

    .finance-mobile-scanner .btn:not(.btn-link) {
        flex: 1 1 10rem;
        min-height: 2.6rem;
    }
}
.table tbody tr[data-target-form] {
    cursor: pointer;
    position: relative;
}

.table tbody tr[data-row-highlight-ready] > td:first-child,
.table tbody tr[data-row-highlight-ready] > th:first-child {
    position: relative;
    padding-left: 1.65rem;
}

.app-row-marker {
    position: absolute;
    left: .38rem;
    top: 50%;
    width: .72rem;
    height: .72rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    opacity: .38;
    cursor: pointer;
}

.app-row-marker:hover,
.app-row-marker:focus {
    opacity: 1;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.table tbody tr.app-row-highlight > * {
    background-color: var(--app-row-highlight-color, #fff7ed);
}

.table-hover tbody tr.app-row-highlight:hover > * {
    background-color: var(--app-row-highlight-color, #fff7ed);
    filter: brightness(.98);
}

.table tbody tr.app-row-highlight > td:first-child::before,
.table tbody tr.app-row-highlight > th:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--app-row-marker-color, #dc2626);
}

.table tbody tr.app-row-highlight .app-row-marker {
    opacity: 1;
    border-color: var(--app-row-marker-color, #dc2626);
    background: var(--app-row-marker-color, #dc2626);
}

.table tbody tr.table-active > * {
    background-color: #fff7ed;
    box-shadow: inset 0 1px 0 #fed7aa, inset 0 -1px 0 #fed7aa;
}

.table tbody tr.table-active > td:first-child,
.table tbody tr.table-active > th:first-child {
    position: relative;
    padding-left: 1.25rem;
}

.table tbody tr.table-active > td:first-child::before,
.table tbody tr.table-active > th:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #dc2626;
}

.table-hover tbody tr.table-active:hover > * {
    background-color: #ffedd5;
}

.project-document-picker {
    max-height: 220px;
    overflow: auto;
}

.document-entry-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.document-entry-form .form-label {
    margin-bottom: .2rem;
}

.document-field {
    flex: 0 1 auto;
    min-width: 0;
}

.document-field-title {
    flex-basis: 7cm;
    min-width: 5cm;
    max-width: 10cm;
}

.document-field-category {
    flex-basis: 4.5cm;
    min-width: 3cm;
    max-width: 6cm;
}

.document-field-date {
    flex-basis: 3cm;
    min-width: 3cm;
    max-width: 3.5cm;
}

.document-field-project {
    flex-basis: 7cm;
    min-width: 5cm;
    max-width: 10cm;
}

.document-field-attachment {
    flex: 1 1 6cm;
    min-width: 5cm;
}

.document-field-description {
    flex: 1 1 8cm;
    min-width: 5cm;
}

.document-field-description textarea {
    min-height: 38px;
    height: 38px;
    resize: vertical;
}

.document-field-actions {
    flex: 0 0 auto;
}

.document-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: .75rem;
}

.document-table-search {
    flex: 1 1 8cm;
    min-width: 6cm;
    max-width: 12cm;
}

.document-table-date {
    flex: 0 0 3.5cm;
}

.document-table-category {
    flex: 0 0 4cm;
    min-width: 3.5cm;
}

.document-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 750;
}

.document-sort-btn:hover,
.document-sort-btn:focus {
    color: var(--primary);
    text-decoration: underline;
}

.document-filter-btn {
    width: 22px;
    height: 22px;
    margin-left: .25rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    vertical-align: middle;
}

.document-filter-btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 7px auto 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #475569;
}

.document-filter-btn:hover,
.document-filter-btn:focus,
.document-filter-btn.is-filtered {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.document-filter-menu {
    position: fixed;
    z-index: 1060;
    width: 280px;
    max-width: calc(100vw - 24px);
    padding: .55rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.document-filter-actions {
    display: flex;
    gap: .4rem;
    margin-top: .45rem;
}

.document-filter-values {
    max-height: 230px;
    overflow: auto;
    margin-top: .45rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: .25rem;
}

.document-filter-value {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .25rem;
    border-radius: 4px;
    cursor: pointer;
}

.document-filter-value:hover {
    background: #f1f5f9;
}

.document-existing-file-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
}

.document-file-remove {
    line-height: 1;
    font-size: 1.15rem;
    text-decoration: none;
}

.custom-suggest-picker {
    position: relative;
}

.custom-suggest-results {
    position: fixed;
    z-index: 2147483000;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d6dde8;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.custom-suggest-results .list-group-item {
    border-left: 0;
    border-right: 0;
    padding: .4rem .55rem;
    text-align: left;
}

.custom-suggest-results .list-group-item.active,
.custom-suggest-results .list-group-item.active:hover,
.custom-suggest-results .list-group-item.active:focus {
    background: #0d6efd;
    color: #fff;
}

.document-project-modal .modal-body {
    background: #f8fafc;
    overflow: auto;
    overscroll-behavior: contain;
}

.document-project-popup-body,
.document-project-popup-body form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .document-project-modal .modal-body {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .document-project-modal .document-project-popup-body form {
        padding: 1rem !important;
    }

    .document-project-modal .form-control,
    .document-project-modal .btn {
        width: 100%;
        max-width: 100%;
    }
}

.finance-entry-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.finance-entry-form .form-label {
    margin-bottom: .2rem;
}

.app-scroll-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.65rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.app-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.app-scroll-top:hover,
.app-scroll-top:focus-visible {
    background: var(--primary-dark);
    color: #fff;
}

@media (max-width: 767.98px) {
    .scoped-mobile-card-table-wrap {
        overflow: visible !important;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .scoped-mobile-card-table,
    .scoped-mobile-card-table tbody,
    .scoped-mobile-card-table tbody tr,
    .scoped-mobile-card-table tbody td {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .scoped-mobile-card-table {
        table-layout: auto !important;
        border: 0 !important;
    }

    .scoped-mobile-card-table colgroup,
    .scoped-mobile-card-table .erp-column-resize-handle,
    .scoped-mobile-card-table thead {
        display: none !important;
    }

    .scoped-mobile-card-table tbody {
        padding: .65rem;
        background: #f1f5f9;
    }

    .scoped-mobile-card-table tbody tr {
        margin: 0 0 .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed !important;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .scoped-mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .scoped-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .38rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .scoped-mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .scoped-mobile-card-table tbody td[colspan] {
        display: block !important;
        padding: .7rem 0 !important;
        text-align: left !important;
    }

    .scoped-mobile-card-table tbody td[colspan]::before {
        content: none !important;
    }

    .scoped-mobile-card-table tbody td form,
    .scoped-mobile-card-table tbody td input,
    .scoped-mobile-card-table tbody td select,
    .scoped-mobile-card-table tbody td textarea,
    .scoped-mobile-card-table tbody td .form-control,
    .scoped-mobile-card-table tbody td .form-select,
    .scoped-mobile-card-table tbody td .input-group {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .scoped-mobile-card-table tfoot,
    .scoped-mobile-card-table tfoot tr,
    .scoped-mobile-card-table tfoot td {
        box-sizing: border-box;
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-scroll-top {
        right: max(.85rem, env(safe-area-inset-right));
        bottom: max(.85rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    .project-mobile-card-table-wrap,
    .project-material-page-table,
    .project-material-table-wrap {
        overflow: visible !important;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .project-mobile-card-table,
    .project-mobile-card-table tbody,
    .project-mobile-card-table tbody tr,
    .project-mobile-card-table tbody td {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .project-mobile-card-table {
        table-layout: auto !important;
        border: 0 !important;
    }

    .project-mobile-card-table colgroup,
    .project-mobile-card-table .erp-column-resize-handle,
    .project-mobile-card-table thead,
    .project-material-column-toolbar {
        display: none !important;
    }

    .project-mobile-card-table tbody {
        padding: .65rem;
        background: #f1f5f9;
    }

    .project-mobile-card-table tbody tr {
        margin: 0 0 .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed !important;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .project-mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .project-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .38rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .project-mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .project-mobile-card-table tbody td:empty {
        display: none !important;
    }

    .project-mobile-card-table tbody td[colspan] {
        display: block !important;
        padding: .5rem 0 !important;
        text-align: left !important;
    }

    .project-mobile-card-table tbody td[colspan]::before {
        content: none !important;
    }

    .project-mobile-card-table tbody td form,
    .project-mobile-card-table tbody td input,
    .project-mobile-card-table tbody td select,
    .project-mobile-card-table tbody td .form-control,
    .project-mobile-card-table tbody td .form-select {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .project-mobile-card-table tbody td[data-mobile-label="Thao tác"] > *,
    .project-mobile-card-table tbody td[data-mobile-label="Action"] > * {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .payroll-mobile-card-table-wrap {
        overflow: visible;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payroll-mobile-card-table,
    .payroll-mobile-card-table tbody,
    .payroll-mobile-card-table tbody tr,
    .payroll-mobile-card-table tbody td {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payroll-mobile-card-table {
        table-layout: auto !important;
        border: 0 !important;
    }

    .payroll-mobile-card-table colgroup,
    .payroll-mobile-card-table .erp-column-resize-handle,
    .payroll-mobile-card-table thead {
        display: none !important;
    }

    .payroll-mobile-card-table tbody {
        padding: .65rem;
        background: #f1f5f9;
    }

    .payroll-mobile-card-table tbody tr {
        margin: 0 0 .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed !important;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .payroll-mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .payroll-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .38rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .payroll-mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .payroll-mobile-card-table tbody td[colspan] {
        display: block;
        padding: 1rem .5rem !important;
        text-align: center !important;
    }

    .payroll-mobile-card-table tbody td[colspan]::before,
    .payroll-mobile-card-table .payroll-mobile-empty-row::before {
        content: none !important;
    }

    .payroll-mobile-card-table tfoot,
    .payroll-mobile-card-table tfoot tr,
    .payroll-mobile-card-table tfoot td {
        box-sizing: border-box;
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .payroll-mobile-card-table tfoot tr {
        padding: .7rem .8rem;
        border-top: 1px solid #dbe3ed;
        background: #e2e8f0;
    }

    .payroll-mobile-card-table tfoot td[colspan] {
        display: none;
    }

    .payroll-mobile-card-table tfoot td[data-mobile-label] {
        display: grid;
        grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
        gap: .65rem;
        text-align: left !important;
    }

    .payroll-mobile-card-table tfoot td[data-mobile-label]::before {
        content: attr(data-mobile-label);
        color: #475569;
        font-weight: 700;
    }
}

@media (max-width: 767.98px) {
    .attendance-mobile-card-table-wrap {
        overflow: visible;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .attendance-mobile-card-table,
    .attendance-mobile-card-table tbody,
    .attendance-mobile-card-table tbody tr,
    .attendance-mobile-card-table tbody td {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .attendance-mobile-card-table {
        table-layout: auto !important;
        border: 0 !important;
    }

    .attendance-mobile-card-table colgroup,
    .attendance-mobile-card-table .erp-column-resize-handle,
    .attendance-mobile-card-table thead {
        display: none !important;
    }

    .attendance-mobile-card-table tbody {
        padding: .65rem;
        background: #f1f5f9;
    }

    .attendance-mobile-card-table tbody tr {
        margin: 0 0 .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed !important;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .attendance-mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .attendance-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(118px, 42%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .38rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .attendance-mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .attendance-mobile-card-table tbody td > *,
    .attendance-mobile-card-table tbody td form,
    .attendance-mobile-card-table tbody td input,
    .attendance-mobile-card-table tbody td select,
    .attendance-mobile-card-table tbody td .form-control,
    .attendance-mobile-card-table tbody td .form-select {
        box-sizing: border-box;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .attendance-mobile-card-table tbody td[data-mobile-label="Thao tác"] > * {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .users-mobile-card-table-wrap {
        overflow: visible;
        width: 100% !important;
        max-width: 100% !important;
    }

    .users-mobile-card-table,
    .users-mobile-card-table tbody,
    .users-mobile-card-table tbody tr:not(.users-mobile-edit-row),
    .users-mobile-card-table tbody td {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .users-mobile-card-table {
        table-layout: auto !important;
        border: 0;
    }

    .users-mobile-card-table colgroup,
    .users-mobile-card-table .erp-column-resize-handle,
    .users-mobile-card-table thead {
        display: none !important;
    }

    .users-mobile-card-table tbody {
        padding: .65rem;
        background: #f1f5f9;
    }

    .users-mobile-card-table tbody tr:not(.users-mobile-edit-row) {
        margin: 0 0 .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .users-mobile-card-table tbody tr:not(.users-mobile-edit-row) > td {
        display: grid;
        grid-template-columns: minmax(105px, 36%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .38rem 0;
        border: 0;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .users-mobile-card-table tbody tr:not(.users-mobile-edit-row) > td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .users-mobile-card-table tbody tr:not(.users-mobile-edit-row) > td[data-mobile-label="Thao tác"] > * {
        justify-self: start;
    }

    .users-mobile-card-table .users-mobile-edit-row.show {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        margin: -.35rem 0 .85rem;
        padding: .8rem;
        border: 1px solid #bfdbfe;
        border-radius: .75rem;
        background: #eff6ff;
    }

    .users-mobile-card-table .users-mobile-edit-row > td {
        padding: 0;
        border: 0;
    }

    .users-mobile-card-table .users-mobile-edit-row input,
    .users-mobile-card-table .users-mobile-edit-row select,
    .users-mobile-card-table .users-mobile-edit-row .form-control,
    .users-mobile-card-table .users-mobile-edit-row .form-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .users-mobile-card-table .users-mobile-empty-row::before {
        content: none !important;
    }
}

.finance-form-section {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    background: var(--surface, #fff);
}

.finance-form-section-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 0;
    border-bottom: 1px solid #d8e2ef;
    background: #eef5ff;
    color: #315f9b;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.finance-form-section-header:hover,
.finance-form-section-header:focus-visible {
    background: #e3efff;
}

.finance-form-section-chevron {
    width: .6rem;
    height: .6rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.finance-form-section.is-collapsed .finance-form-section-header {
    border-bottom-color: transparent;
}

.finance-form-section.is-collapsed .finance-form-section-chevron {
    transform: rotate(-45deg);
}

.finance-form-section-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    padding: .75rem;
}

.finance-form-section-body[hidden] {
    display: none !important;
}

.finance-form-section-documents .finance-form-section-header {
    background: #fff3f3;
    color: #b44d63;
}

.finance-form-section-documents .finance-form-section-header:hover,
.finance-form-section-documents .finance-form-section-header:focus-visible {
    background: #ffe8eb;
}

.finance-form-section-accounting .finance-form-section-header {
    background: #f3f0ff;
    color: #6652a3;
}

.finance-form-section-allocation .finance-form-section-header {
    background: #eefaf5;
    color: #28775d;
}

.finance-entry-split {
    display: flex;
    align-items: stretch;
    min-height: 420px;
    overflow: hidden;
}

.finance-entry-input-pane,
.finance-entry-list-pane {
    min-width: 0;
}

.finance-entry-floating-layer {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(5rem, env(safe-area-inset-top)) 1.25rem 1.25rem;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.finance-entry-floating-layer[hidden] {
    display: none !important;
}

[data-finance-floating-actions][hidden],
[data-finance-receivable-floating-actions][hidden] {
    display: none !important;
}

.finance-entry-floating-host {
    width: min(1120px, 100%);
    max-height: calc(100vh - 6.25rem);
    overflow: auto;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.finance-entry-floating-host > .card {
    margin: 0;
    border-radius: 18px;
}

[data-finance-floating-layer] {
    overflow: hidden;
}

[data-finance-floating-host] {
    max-height: 100%;
    min-height: 0;
    overscroll-behavior: contain;
}

[data-finance-floating-host] > .card > .card-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.finance-entry-split.is-floating-layout > .finance-entry-input-pane,
.finance-entry-split.is-floating-layout > .resizable-divider {
    display: none;
}

.finance-entry-split.is-floating-layout > .finance-entry-list-pane {
    flex: 1 1 100%;
    width: 100%;
}

.finance-entry-split .finance-entry-input-pane {
    flex: 0 0 25%;
    max-width: 70%;
}

.finance-entry-split .finance-entry-list-pane {
    flex: 1 1 0;
}

.finance-entry-split .finance-entry-input-pane,
.finance-entry-split .finance-entry-list-pane {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.finance-entry-input-pane > .card,
.finance-entry-list-pane {
    margin-top: 0 !important;
}

.finance-entry-list-pane [data-finance-open-entry-form][hidden],
.finance-entry-list-pane [data-finance-open-receivable-form][hidden] {
    display: none !important;
}

.finance-entry-input-pane .finance-entry-form .finance-field {
    flex: 1 1 calc(50% - .6rem);
    min-width: 180px;
    max-width: none;
}

.finance-entry-input-pane .finance-entry-form .finance-field-documents,
.finance-entry-input-pane .finance-entry-form .finance-field-allocations,
.finance-entry-input-pane .finance-entry-form .finance-field-description,
.finance-entry-input-pane .finance-entry-form .finance-field-actions {
    flex-basis: 100%;
}

.finance-entry-input-pane .finance-field-actions {
    margin-left: 0;
}

.finance-entry-list-pane .finance-entry-table {
    min-width: 960px;
}

.finance-receivable-money-column {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.topbar-finance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    padding: .65rem;
    border-bottom: 1px solid var(--border);
}

.topbar-finance-summary-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .4rem;
    padding: .5rem;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff7f7;
    color: inherit;
    text-decoration: none;
}

.topbar-finance-summary-item.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.topbar-finance-summary-item span {
    font-size: .72rem;
    line-height: 1.25;
}

.topbar-finance-summary-item strong {
    grid-row: span 2;
    align-self: center;
    font-size: 1.15rem;
    color: #b91c1c;
}

.topbar-finance-summary-item small {
    color: var(--muted);
    white-space: nowrap;
}

.finance-overview-alert-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.finance-overview-alert-card:hover,
.finance-overview-alert-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .12) !important;
}

@media (max-width: 991.98px) {
    .finance-entry-floating-layer {
        display: flex;
        padding: max(4rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom));
    }

    .finance-entry-floating-layer[hidden] {
        display: none !important;
    }

    .finance-entry-floating-host {
        width: 100%;
        max-height: calc(100vh - 4.5rem);
        border-radius: 12px;
    }

    .finance-entry-floating-host > .card {
        border-radius: 12px;
    }

    [data-finance-floating-host] {
        max-height: 100%;
    }

    .finance-entry-split {
        display: block;
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .finance-entry-split .finance-entry-input-pane,
    .finance-entry-split .finance-entry-list-pane {
        max-width: none;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .finance-entry-split .resizable-divider {
        display: none;
    }

    .finance-entry-split .finance-entry-list-pane {
        margin-top: 1rem !important;
    }
}

.finance-field {
    flex: 0 1 auto;
    min-width: 0;
}

.finance-field-type {
    flex-basis: 3.5cm;
    min-width: 3cm;
    max-width: 4cm;
}

.finance-field-recipient {
    flex-basis: 7cm;
    min-width: 5cm;
    max-width: 10cm;
}

.finance-field-reason {
    flex: 1 1 10cm;
    min-width: 5cm;
    max-width: 20cm;
}

.finance-field-account,
.finance-field-amount {
    flex-basis: 6cm;
    min-width: 4cm;
    max-width: 8cm;
}

.finance-field-date {
    flex-basis: 3.5cm;
    min-width: 3cm;
    max-width: 5cm;
}

.finance-field-description {
    flex: 1 1 12cm;
    min-width: 8cm;
    max-width: 20cm;
}

.finance-field-description textarea {
    min-height: 38px;
    height: 38px;
    resize: vertical;
}

.finance-field-documents {
    flex: 1 1 10cm;
    min-width: 8cm;
    max-width: 15cm;
}

.finance-field-documents,
.finance-field-documents .custom-suggest-picker,
.finance-field-documents [data-finance-document-selected],
.finance-document-links,
.finance-document-link-group {
    min-width: 0;
    max-width: 100%;
}

.finance-field-documents .badge[data-finance-document-id] {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
}

.finance-field-documents .badge[data-finance-document-id] > span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.finance-document-title,
.finance-document-file-link {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.finance-entry-table .finance-entry-allocations,
.finance-entry-table .finance-entry-documents {
    max-width: 260px;
}

.finance-allocation-view-switch {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 40px;
    padding: .35rem .55rem .35rem .9rem;
    border: 1px solid #b8c8e2;
    border-radius: 999px;
    background: #eef4ff;
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
}

.finance-allocation-view-switch .form-check-input {
    width: 2.65rem;
    height: 1.45rem;
    margin-top: 0;
    cursor: pointer;
}

.finance-allocation-view-switch > span {
    color: #7b8494;
    transition: color .15s ease;
}

.finance-allocation-view-switch > span.is-active {
    color: #1e3a5f;
    font-weight: 800;
}

.finance-entry-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 52px;
    padding: .45rem .65rem;
    overflow: visible;
}

.finance-entry-list-header > h5 {
    flex: 0 0 auto;
}

.finance-entry-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    min-width: 0;
    margin-left: auto;
}

.finance-entry-list-actions .btn,
.finance-entry-list-actions .finance-allocation-view-switch {
    min-height: 40px;
}

.finance-mobile-filter-bar {
    display: none;
}

.finance-field-allocations {
    flex: 1 0 100%;
    max-width: 100%;
}

[data-finance-accounting] {
    border-color: #c9dcf5 !important;
    background: #eef6ff;
}

[data-finance-allocation-section] {
    padding: 1rem;
    border: 1px solid #ddd4f5;
    border-radius: 1rem;
    background: linear-gradient(145deg, #fbf9ff 0%, #f3edff 100%);
    box-shadow: 0 10px 28px rgba(91, 33, 182, .10), 0 2px 7px rgba(15, 23, 42, .06);
}

[data-finance-allocation-label] {
    color: #312e81;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

[data-finance-accounting] .form-control,
[data-finance-accounting] .form-select,
[data-finance-allocation-section] .form-control,
[data-finance-allocation-section] .form-select {
    background-color: #fff;
}

.finance-field-allocations .table-responsive {
    width: 100%;
}

.finance-field-allocations table {
    min-width: 26cm;
}

.finance-field-allocations th,
.finance-field-allocations td {
    vertical-align: top;
}

.finance-field-allocations th:nth-child(1),
.finance-field-allocations td:nth-child(1) {
    min-width: 4.5cm;
}

.finance-field-allocations th:nth-child(2),
.finance-field-allocations td:nth-child(2) {
    min-width: 6cm;
}

.finance-field-allocations th:nth-child(3),
.finance-field-allocations td:nth-child(3) {
    min-width: 7cm;
}

.finance-field-allocations th:nth-child(4),
.finance-field-allocations td:nth-child(4) {
    min-width: 6cm;
}

.finance-field-allocations th:nth-child(5),
.finance-field-allocations td:nth-child(5) {
    width: 55px;
    min-width: 55px;
}

.finance-field-actions {
    flex: 0 0 5cm;
    margin-left: auto;
}

/* Trong chế độ chia đôi desktop, bảng nhập liệu hẹp được chuyển thành từng thẻ dọc. */
@media (min-width: 992px) {
    .finance-entry-input-pane .finance-field-allocations > .d-flex {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .finance-entry-input-pane .finance-field-allocations > .d-flex > .d-flex {
        width: 100%;
        flex-wrap: wrap;
    }

    .finance-entry-input-pane .finance-field-allocations > .d-flex .btn {
        flex: 1 1 auto;
    }

    .finance-entry-input-pane .finance-field-allocations .table-responsive {
        overflow: visible;
    }

    .finance-entry-input-pane .finance-field-allocations table,
    .finance-entry-input-pane .finance-field-allocations tbody,
    .finance-entry-input-pane .finance-field-allocations tr,
    .finance-entry-input-pane .finance-field-allocations td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .finance-entry-input-pane .finance-field-allocations table {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .finance-entry-input-pane .finance-field-allocations thead {
        display: none;
    }

    .finance-entry-input-pane .finance-field-allocations tbody tr {
        margin-bottom: .75rem;
        padding: .75rem;
        border: 1px solid #dbe3ed;
        border-radius: .7rem;
        background: #f8fafc;
    }

    .finance-entry-input-pane .finance-field-allocations tbody td {
        padding: 0 0 .65rem;
        border: 0;
    }

    .finance-entry-input-pane .finance-field-allocations tbody td::before {
        display: block;
        margin-bottom: .25rem;
        color: #64748b;
        font-size: .75rem;
        font-weight: 700;
    }

    .finance-entry-input-pane [data-finance-accounting] tbody td:nth-child(1)::before { content: "Tài khoản"; }
    .finance-entry-input-pane [data-finance-accounting] tbody td:nth-child(2)::before { content: "Nợ"; }
    .finance-entry-input-pane [data-finance-accounting] tbody td:nth-child(3)::before { content: "Có"; }
    .finance-entry-input-pane [data-finance-accounting] tbody td:nth-child(4)::before { content: "Nội dung"; }
    .finance-entry-input-pane [data-finance-allocation-table] tbody td:nth-child(1)::before { content: "Số tiền"; }
    .finance-entry-input-pane [data-finance-allocation-table] tbody td:nth-child(2)::before { content: "Phân bổ cho"; }
    .finance-entry-input-pane [data-finance-allocation-table] tbody td:nth-child(3)::before { content: "Phân loại"; }
    .finance-entry-input-pane [data-finance-allocation-table] tbody td:nth-child(4)::before { content: "Nội dung"; }
    .finance-entry-input-pane [data-finance-allocation-table] tbody td:nth-child(5)::before { content: "Ghi chú"; }

    .finance-entry-input-pane .finance-field-allocations tbody td:last-child {
        padding-bottom: 0;
        text-align: right;
    }

    .finance-entry-input-pane .finance-field-allocations .form-control,
    .finance-entry-input-pane .finance-field-allocations .form-select {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 767.98px) {
    .finance-entry-form {
        align-items: stretch;
    }

    .finance-entry-form .finance-field {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .finance-field-actions {
        margin-left: 0;
    }

    /* Các bảng nhập liệu trở thành từng thẻ dọc để ô nhập đủ lớn khi thao tác bằng tay. */
    .finance-field-allocations > .d-flex {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .finance-field-allocations > .d-flex > .d-flex {
        width: 100%;
        flex-wrap: wrap;
    }

    .finance-field-allocations > .d-flex .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }

    [data-finance-accounting] .form-switch {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-left: 3.35rem;
        cursor: pointer;
    }

    [data-finance-accounting] .form-switch .form-check-input {
        width: 2.75rem;
        height: 1.5rem;
        margin-left: -3.35rem;
        margin-right: .6rem;
        cursor: pointer;
    }

    [data-finance-accounting] .form-switch .form-check-label {
        font-size: .9rem;
        font-weight: 600;
        cursor: pointer;
    }

    .finance-field-allocations .table-responsive {
        overflow: visible;
    }

    .finance-field-allocations table,
    .finance-field-allocations tbody,
    .finance-field-allocations tr,
    .finance-field-allocations td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .finance-field-allocations table {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .finance-field-allocations thead {
        display: none;
    }

    .finance-field-allocations tbody tr {
        margin-bottom: .75rem;
        padding: .75rem;
        border: 1px solid #dbe3ed;
        border-radius: .65rem;
        background: #f8fafc;
    }

    .finance-field-allocations tbody td {
        padding: 0 0 .65rem;
        border: 0;
    }

    .finance-field-allocations tbody td::before {
        display: block;
        margin-bottom: .25rem;
        color: #64748b;
        font-size: .75rem;
        font-weight: 600;
    }

    [data-finance-accounting] tbody td:nth-child(1)::before { content: "Tài khoản"; }
    [data-finance-accounting] tbody td:nth-child(2)::before { content: "Nợ"; }
    [data-finance-accounting] tbody td:nth-child(3)::before { content: "Có"; }
    [data-finance-accounting] tbody td:nth-child(4)::before { content: "Nội dung"; }
    [data-finance-allocation-table] tbody td:nth-child(1)::before { content: "Số tiền"; }
    [data-finance-allocation-table] tbody td:nth-child(2)::before { content: "Phân bổ cho"; }
    [data-finance-allocation-table] tbody td:nth-child(3)::before { content: "Phân loại"; }
    [data-finance-allocation-table] tbody td:nth-child(4)::before { content: "Nội dung"; }
    [data-finance-allocation-table] tbody td:nth-child(5)::before { content: "Ghi chú"; }

    .finance-field-allocations tbody td:last-child {
        padding-bottom: 0;
        text-align: right;
    }

    .finance-field-allocations .form-control,
    .finance-field-allocations .form-select {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px;
        font-size: 16px;
    }

    /* Danh sách phiếu thu/chi hiển thị như thẻ thông tin, không thu nhỏ 11 cột. */
    .finance-entry-list-pane .table-responsive {
        overflow: visible;
        padding: .75rem;
        background: #f1f5f9;
    }

    [data-finance-allocation-view] {
        flex-wrap: wrap;
    }

    [data-finance-allocation-view] .btn {
        flex: 1 1 10rem;
        min-height: 40px;
    }

    .finance-mobile-filter-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
        padding: .7rem .75rem;
        border-bottom: 1px solid #dbe3ed;
        background: #fff;
    }

    .finance-mobile-filter-title {
        flex: 1 1 100%;
        color: #64748b;
        font-size: .78rem;
        font-weight: 700;
    }

    .finance-mobile-filter-button {
        flex: 1 1 calc(33.333% - .5rem);
        min-width: 6.25rem;
    }

    .finance-mobile-filter-button.is-filtered::after {
        content: " •";
        color: #fff;
        font-size: 1rem;
        line-height: 0;
    }

    .finance-entry-table,
    .finance-entry-table tbody,
    .finance-entry-table tr,
    .finance-entry-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .finance-entry-table {
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0;
    }

    .finance-entry-table thead {
        display: none;
    }

    .finance-entry-table tbody tr {
        margin-bottom: .75rem;
        padding: .8rem;
        border: 1px solid #dbe3ed;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }

    .finance-entry-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        max-width: none !important;
        padding: .32rem 0;
        border: 0;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: left !important;
    }

    .finance-entry-table tbody td::before {
        color: #64748b;
        font-size: .75rem;
        font-weight: 600;
    }

    .finance-entry-table tbody td:nth-child(1)::before { content: "STT"; }
    .finance-entry-table tbody td:nth-child(2)::before { content: "Ngày"; }
    .finance-entry-table tbody td:nth-child(3)::before { content: "Lý do"; }
    .finance-entry-table tbody td:nth-child(4)::before { content: "Người/Công ty"; }
    .finance-entry-table tbody td:nth-child(5)::before { content: "Tài khoản"; }
    .finance-entry-table tbody td:nth-child(6)::before { content: "Tổng tiền"; }
    .finance-entry-table tbody td:nth-child(7)::before { content: "Đã phân bổ"; }
    .finance-entry-table tbody td:nth-child(8)::before { content: "Phân bổ"; }
    .finance-entry-table tbody td:nth-child(9)::before { content: "Phân loại"; }
    .finance-entry-table tbody td:nth-child(10)::before { content: "Tài liệu"; }
    .finance-entry-table tbody td:nth-child(11)::before { content: "Người tạo"; }

    .finance-entry-table tbody tr:only-child td[colspan] {
        display: block;
        text-align: center !important;
    }

    .finance-entry-table tbody tr:only-child td[colspan]::before {
        content: none;
    }

    .finance-entry-table tbody td:nth-child(3),
    .finance-entry-table tbody td:nth-child(6) {
        font-weight: 600;
    }

    .finance-entry-table .finance-allocation-links,
    .finance-entry-table .finance-document-links,
    .finance-entry-table .finance-entry-documents-content {
        min-width: 0;
        white-space: normal;
    }

    .finance-entry-table .finance-entry-documents-content {
        grid-column: 2;
        width: 100%;
    }

    .finance-entry-table tfoot {
        display: block;
        margin-top: .25rem;
    }

    .finance-entry-table tfoot tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .35rem .75rem;
        padding: .75rem;
        border-radius: .65rem;
    }

    .finance-entry-table tfoot td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: right !important;
    }

    .finance-entry-table tfoot td:first-child {
        grid-column: 1 / -1;
    }

    .finance-entry-table tfoot td:nth-child(2)::before {
        content: "Tổng tiền: ";
        color: #64748b;
        font-weight: 500;
    }

    .finance-entry-table tfoot td:nth-child(3)::before {
        content: "Đã phân bổ: ";
        color: #64748b;
        font-weight: 500;
    }

    .finance-entry-table tfoot td:last-child:empty {
        display: none;
    }
}

.resizable-split {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.resizable-pane {
    min-width: 0;
}

.resizable-pane-start {
    flex: 0 0 34%;
    max-width: 70%;
}

.resizable-pane-end {
    flex: 1 1 0;
}

.resizable-divider {
    flex: 0 0 18px;
    cursor: col-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resizable-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 2px;
    background: #cfd8e3;
    border-radius: 999px;
}

.resizable-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    width: 8px;
    height: 34px;
    border-left: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
    transform: translateY(-50%);
    opacity: .75;
}

.resizable-divider:hover::before,
.resizable-split.is-resizing .resizable-divider::before {
    background: var(--primary);
}

.resizable-split.is-resizing {
    user-select: none;
}

.system-entry-split {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    min-height: 420px;
    overflow: hidden;
    background: var(--surface);
}

.system-entry-split > .system-entry-start {
    flex: 0 0 25%;
    width: 25%;
    max-width: 70%;
    min-width: 0;
}

.system-entry-split > .system-entry-end {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

.system-entry-split > .system-entry-start,
.system-entry-split > .system-entry-end {
    height: 100%;
    padding-right: 0;
    padding-left: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--surface);
}

.system-entry-split > .resizable-divider,
.finance-entry-split > .resizable-divider,
.inventory-entry-split > .resizable-divider,
.invoice-split > .resizable-divider,
.project-material-layout > .resizable-divider {
    align-self: stretch;
    min-height: 100%;
    z-index: 2;
    background: var(--surface);
}

.finance-entry-split,
.inventory-entry-split,
.invoice-split,
.project-material-layout {
    background: var(--surface);
}

.finance-entry-split > .resizable-pane,
.inventory-entry-split > .resizable-pane,
.invoice-split > .resizable-pane,
.project-material-layout > .resizable-pane {
    background: var(--surface);
}

.system-entry-split > .system-entry-start > .card,
.finance-entry-split > .finance-entry-input-pane > .card,
.inventory-entry-split > .inventory-entry-pane > .card,
.invoice-split > .invoice-entry-pane > .card,
.project-material-layout > .project-material-entry > .card {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.system-entry-split > .system-entry-end > .card,
.finance-entry-split > .finance-entry-list-pane > .card,
.inventory-entry-split > .inventory-list-pane > .card,
.invoice-split > .invoice-list-pane > .card,
.project-material-layout > .resizable-pane-end > .card {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.system-entry-split > .resizable-divider::before,
.finance-entry-split > .resizable-divider::before,
.inventory-entry-split > .resizable-divider::before,
.invoice-split > .resizable-divider::before,
.project-material-layout > .resizable-divider::before {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #aebccc;
}

.system-entry-split > .resizable-divider::after,
.finance-entry-split > .resizable-divider::after,
.inventory-entry-split > .resizable-divider::after,
.invoice-split > .resizable-divider::after,
.project-material-layout > .resizable-divider::after {
    top: 50%;
    height: 40px;
    border-color: #64748b;
    background: rgba(255, 255, 255, .9);
}

.system-entry-start > .card,
.system-entry-end > .card {
    height: 100%;
}

.system-entry-start form.row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.system-entry-end > .table-responsive {
    overflow: auto;
}

.payroll-entry-layout.system-entry-split {
    align-items: stretch;
    flex-wrap: nowrap;
    height: auto !important;
    min-height: 0;
    overflow: visible;
}

.payroll-entry-layout.system-entry-split > .system-entry-start,
.payroll-entry-layout.system-entry-split > .system-entry-end {
    height: auto;
    overflow: visible;
    padding-bottom: 1rem;
}

.payroll-entry-layout.system-entry-split > .system-entry-start > .card,
.payroll-entry-layout.system-entry-split > .system-entry-end > .card {
    height: auto;
}

.payroll-entry-layout.system-entry-split > .resizable-divider {
    align-self: stretch;
    min-height: 100%;
    z-index: 2;
}

.payroll-entry-layout.system-entry-split > .resizable-divider::before {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #aebccc;
}

.payroll-entry-layout.system-entry-split > .resizable-divider::after {
    top: 50%;
    height: 40px;
    border-color: #64748b;
    background: rgba(255, 255, 255, .9);
}

@media (max-width: 991.98px) {
    .system-entry-split {
        display: block;
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .system-entry-split > .system-entry-start,
    .system-entry-split > .system-entry-end {
        width: 100%;
        max-width: none;
        height: auto;
        overflow: visible;
    }

    .system-entry-split > .resizable-divider {
        display: none;
    }

    .system-entry-split > .system-entry-end {
        margin-top: 1rem;
    }

    .payroll-entry-layout.system-entry-split {
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .payroll-entry-layout.system-entry-split > .system-entry-start,
    .payroll-entry-layout.system-entry-split > .system-entry-end {
        height: auto;
        overflow: visible;
    }
}

.project-material-form-toggle {
    position: fixed;
    top: 50vh;
    z-index: 1;
    min-width: 28px;
    min-height: 96px;
    padding: .45rem .25rem;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: var(--surface);
    color: #374151;
    font-size: .78rem;
    font-weight: 750;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
}

.project-material-form-toggle:hover,
.project-material-form-toggle:focus {
    border-color: #9bbcfb;
    color: var(--primary);
}

.project-material-layout.is-form-collapsed .project-material-entry {
    display: none;
}

.project-material-layout.is-form-floating .project-material-entry,
.project-material-layout.is-form-floating .resizable-divider {
    display: none;
}

.project-material-layout.is-form-floating .resizable-pane-end {
    flex-basis: 100%;
}

.project-material-entry > .card {
    position: sticky;
    top: .5rem;
    max-height: calc(100vh - 1rem);
    overflow: auto;
}

.project-material-floating-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
}

.project-material-floating-card .card-header {
    border-radius: 0 !important;
}

.project-material-winbox .wb-body {
    background: var(--surface);
    overflow: auto;
}

.project-material-layout.is-form-collapsed .resizable-divider {
    flex-basis: 34px;
    cursor: default;
}

.project-material-layout.is-form-collapsed .resizable-divider::before,
.project-material-layout.is-form-collapsed .resizable-divider::after {
    display: none;
}

.project-material-import-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 28px;
}

.project-material-list .project-material-table-wrap {
    max-width: 100%;
    overflow: visible;
}

.project-material-list .project-material-table-wrap > .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.project-material-list .project-material-table-wrap > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-muted);
    background-clip: padding-box;
    box-shadow: inset 0 -1px 0 var(--border);
}

.project-material-list .project-material-table-wrap [data-material-row] {
    scroll-margin-top: 2.75rem;
    scroll-margin-bottom: 1.5rem;
}

.project-material-list .table {
    width: 100%;
    min-width: 100%;
}

.project-material-list .table td,
.project-material-list .table th {
    white-space: nowrap;
}

.project-material-th-content {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
}

.project-material-filter-btn {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: var(--surface);
    color: #4b5563;
    position: relative;
}

.project-material-filter-btn::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
}

.project-material-filter-btn::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 2px;
    height: 5px;
    background: currentColor;
}

.project-material-filter-btn:hover,
.project-material-filter-btn:focus,
.project-material-filter-btn.is-filtered {
    border-color: var(--primary);
    color: var(--primary);
    background: #eef4ff;
}

.project-material-list .table th[data-column-key="specifications"],
.project-material-list .table td[data-column-key="specifications"],
.project-material-list .table th[data-column-key="notes"],
.project-material-list .table td[data-column-key="notes"] {
    width: 5cm;
    max-width: 5cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="item"],
.project-material-list .table td[data-column-key="item"] {
    width: auto;
    min-width: 4cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="model"],
.project-material-list .table td[data-column-key="model"],
.project-material-list .table th[data-column-key="brand"],
.project-material-list .table td[data-column-key="brand"] {
    width: 3cm;
    max-width: 3cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="unit"],
.project-material-list .table td[data-column-key="unit"],
.project-material-list .table th[data-column-key="contract_quantity"],
.project-material-list .table td[data-column-key="contract_quantity"],
.project-material-list .table th[data-column-key="unit_price"],
.project-material-list .table td[data-column-key="unit_price"],
.project-material-list .table th[data-column-key="amount"],
.project-material-list .table td[data-column-key="amount"],
.project-material-list .table th[data-column-key="tax_rate"],
.project-material-list .table td[data-column-key="tax_rate"],
.project-material-list .table th[data-column-key="tax_amount"],
.project-material-list .table td[data-column-key="tax_amount"],
.project-material-list .table th[data-column-key="total_with_tax"],
.project-material-list .table td[data-column-key="total_with_tax"],
.project-material-list .table th[data-column-key="purchased_quantity"],
.project-material-list .table td[data-column-key="purchased_quantity"],
.project-material-list .table th[data-column-key="not_purchased_quantity"],
.project-material-list .table td[data-column-key="not_purchased_quantity"],
.project-material-list .table th[data-column-key="installed_quantity"],
.project-material-list .table td[data-column-key="installed_quantity"],
.project-material-list .table th[data-column-key="not_installed_quantity"],
.project-material-list .table td[data-column-key="not_installed_quantity"] {
    width: 2cm;
    max-width: 2cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="transferred_quantity"],
.project-material-list .table td[data-column-key="transferred_quantity"],
.project-material-list .table th[data-column-key="not_transferred_quantity"],
.project-material-list .table td[data-column-key="not_transferred_quantity"] {
    width: 2.5cm;
    max-width: 2.5cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-fixed],
.project-material-list .table td[data-column-fixed] {
    width: 1cm;
    max-width: 1cm;
    min-width: 1cm;
    text-align: center;
    white-space: nowrap;
}

.project-material-list .table th[data-column-key="unit_price"],
.project-material-list .table td[data-column-key="unit_price"],
.project-material-list .table th[data-column-key="amount"],
.project-material-list .table td[data-column-key="amount"] {
    width: 3cm;
    max-width: 3cm;
    min-width: 3cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="tax_amount"],
.project-material-list .table td[data-column-key="tax_amount"] {
    width: 3cm;
    max-width: 3cm;
    min-width: 3cm;
}

.project-material-list .table th[data-column-key="total_with_tax"],
.project-material-list .table td[data-column-key="total_with_tax"] {
    width: 4cm;
    max-width: 4cm;
    min-width: 4cm;
}

.project-material-list .table th[data-column-key="amount"],
.project-material-list .table td[data-column-key="amount"] {
    width: 4cm;
    max-width: 4cm;
    min-width: 4cm;
}

.project-material-list .table th[data-column-key="contract_quantity"],
.project-material-list .table td[data-column-key="contract_quantity"],
.project-material-list .table th[data-column-key="unit_price"],
.project-material-list .table td[data-column-key="unit_price"],
.project-material-list .table th[data-column-key="amount"],
.project-material-list .table td[data-column-key="amount"],
.project-material-list .table th[data-column-key="tax_rate"],
.project-material-list .table td[data-column-key="tax_rate"],
.project-material-list .table th[data-column-key="tax_amount"],
.project-material-list .table td[data-column-key="tax_amount"],
.project-material-list .table th[data-column-key="total_with_tax"],
.project-material-list .table td[data-column-key="total_with_tax"],
.project-material-list .table th[data-column-key="purchased_quantity"],
.project-material-list .table td[data-column-key="purchased_quantity"],
.project-material-list .table th[data-column-key="not_purchased_quantity"],
.project-material-list .table td[data-column-key="not_purchased_quantity"],
.project-material-list .table th[data-column-key="transferred_quantity"],
.project-material-list .table td[data-column-key="transferred_quantity"],
.project-material-list .table th[data-column-key="not_transferred_quantity"],
.project-material-list .table td[data-column-key="not_transferred_quantity"],
.project-material-list .table th[data-column-key="installed_quantity"],
.project-material-list .table td[data-column-key="installed_quantity"],
.project-material-list .table th[data-column-key="not_installed_quantity"],
.project-material-list .table td[data-column-key="not_installed_quantity"] {
    text-align: right;
}

.project-material-list .table th[data-column-key="origin"],
.project-material-list .table td[data-column-key="origin"] {
    width: 3cm;
    max-width: 3cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-key="purchase_plan"],
.project-material-list .table td[data-column-key="purchase_plan"] {
    width: 4cm;
    max-width: 4cm;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-material-list .table th[data-column-action],
.project-material-list .table td[data-column-action] {
    width: 2cm;
    max-width: 2cm;
    white-space: normal;
}

.project-material-column-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .45rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.project-material-search {
    flex: 0 0 260px;
    max-width: 100%;
}

.project-material-column-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    min-width: 0;
}

.project-material-column-btn {
    min-height: 26px;
    padding: .22rem .5rem;
    border: 1px solid #9bbcfb;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 750;
    cursor: grab;
}

.project-material-column-btn:hover,
.project-material-column-btn:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.project-material-column-btn.is-hidden-column {
    background: var(--surface);
    border-color: #d1d5db;
    color: #6b7280;
}

.project-material-column-btn.is-dragging {
    opacity: .55;
}

.system-column-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 42px;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.system-list-filters {
    display: flex;
    align-items: flex-end;
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}

.system-list-search {
    flex: 1 1 220px;
    max-width: 420px;
}

.system-list-date-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
}

.system-list-quick-filters {
    flex: 1 1 100%;
    margin-top: .1rem;
}

.system-list-date-field {
    display: grid;
    gap: .15rem;
    margin: 0;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.system-list-date-field .form-control {
    width: 145px;
}

.system-list-filter-hidden {
    display: none !important;
}

.system-column-settings {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.system-column-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1rem;
}

.system-column-settings-panel {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .35rem);
    right: 0;
    width: min(520px, calc(100vw - 2rem));
    max-height: min(460px, calc(100vh - 7rem));
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

@media (max-width: 767.98px) {
    .system-column-toolbar {
        align-items: flex-end;
        flex-wrap: nowrap;
    }

    .system-column-toolbar .system-list-filters {
        flex: 1 1 auto;
        min-width: 0;
    }

    .system-column-toolbar .system-list-search,
    .invoice-list-card > .system-column-toolbar .system-list-search {
        flex: 1 1 8rem;
        width: auto;
        min-width: 0;
        max-width: 12rem;
    }

    .system-column-toolbar .system-list-search .form-control,
    .system-column-toolbar > input[type="search"] {
        width: 100%;
        min-width: 0;
    }

    .system-column-toolbar .system-column-settings {
        flex: 0 0 40px;
        width: 40px;
        margin-left: 0;
    }

    .system-column-toolbar .system-column-settings-toggle {
        width: 40px;
        height: 40px;
    }
}

.system-column-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .65rem;
}

.system-column-btn {
    min-height: 30px;
    padding: .28rem .6rem;
    border: 1px solid #9bbcfb;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 750;
    cursor: grab;
}

.system-column-btn:hover,
.system-column-btn:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.system-column-btn.is-hidden-column {
    border-color: #d1d5db;
    background: var(--surface);
    color: #6b7280;
    text-decoration: line-through;
}

.system-column-btn.is-dragging {
    opacity: .45;
}

.project-material-workspace-tabs > .tab-content {
    padding-top: .5rem;
}

.project-material-detail-pages .tab-content {
    padding-top: .4rem;
}

.project-material-filter-menu {
    position: fixed;
    z-index: 1080;
    width: 290px;
    max-width: calc(100vw - 24px);
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

.project-material-filter-values {
    max-height: 220px;
    overflow: auto;
    margin: .65rem 0;
    border: 1px solid #edf1f5;
    border-radius: 7px;
}

.project-material-filter-value {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    padding: .35rem .5rem;
    margin: 0;
    cursor: pointer;
}

.project-material-filter-value + .project-material-filter-value {
    border-top: 1px solid #edf1f5;
}

.project-material-filter-actions {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

.project-material-page-grid {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.35fr);
    gap: 1rem;
    align-items: start;
}

.project-material-page-table {
    max-height: 520px;
    overflow: auto;
}

.project-material-page-table .table {
    min-width: 760px;
}

.project-material-page-table tr[draggable="true"] {
    cursor: grab;
}

.project-material-drop-row > * {
    background: #f8fafc;
    border-top: 2px solid #dbeafe;
}

.project-material-drop-row.is-drop-target > * {
    background: #eef4ff;
    box-shadow: inset 0 0 0 2px var(--primary);
}

.project-material-list .table tbody tr.project-material-row-highlight > * {
    background-color: var(--project-material-highlight-color);
}

.project-material-list .table-hover tbody tr.project-material-row-highlight:hover > * {
    background-color: var(--project-material-highlight-color);
    filter: brightness(.98);
}

.collapse-caret-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: var(--surface);
    color: #374151;
}

@media (max-width: 991.98px) {
    .resizable-split {
        display: block;
    }

    .resizable-pane-start,
    .resizable-pane-end {
        max-width: none;
        width: 100%;
    }

    .resizable-divider {
        display: flex;
        min-height: 42px;
        cursor: default;
    }

    .resizable-pane-end {
        margin-top: 1rem;
    }

    .project-material-form-toggle {
        position: static;
        min-width: 96px;
        min-height: 32px;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .project-material-layout.is-form-collapsed .resizable-pane-end {
        margin-top: 0;
    }

    .project-material-page-grid {
        grid-template-columns: 1fr;
    }

}

.collapse-caret-btn:hover,
.collapse-caret-btn:focus {
    border-color: #9bbcfb;
    color: var(--primary);
}

.inventory-document-link {
    color: #1d4ed8;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color .15s ease, text-shadow .15s ease;
}

.inventory-document-link:hover,
.inventory-document-link:focus {
    color: #0f3a8a;
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(29, 78, 216, .28);
}

.inventory-floating-form {
    position: sticky;
    top: 16px;
    z-index: 20;
    margin-bottom: 1rem;
    border-color: #d8e2ef;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .11);
}

.inventory-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 .75rem;
}

.inventory-voucher-list {
    margin-bottom: 1.5rem;
}

.erp-numeric-column {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.erp-quantity-column {
    min-width: 110px;
}

.erp-money-column {
    min-width: 145px;
}

.erp-numeric-column input,
.erp-numeric-column select {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.erp-resizable-column-header {
    position: relative;
    border-right: 1px solid #b8c4d3 !important;
    overflow: visible;
}

/* Resized text columns follow the user-defined width instead of forcing overflow. */
table.table[data-column-resize-ready="1"] th,
table.table[data-column-resize-ready="1"] td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

table.table[data-column-resize-ready="1"] .erp-numeric-column,
table.table[data-column-resize-ready="1"] .inventory-number-value,
table.table[data-column-resize-ready="1"] .inventory-money-value {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.erp-column-resize-handle {
    position: absolute;
    /* Keep the drag target above the header content without escaping over
       floating previews and dialogs. */
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 12px;
    min-height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.erp-column-resize-handle::after {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    right: 0;
    width: 2px;
    background: #b8c4d3;
    transition: background-color .15s ease, width .15s ease;
}

.erp-resizable-column-header:hover > .erp-column-resize-handle::after,
.is-column-resizing .erp-column-resize-handle::after {
    width: 3px;
    background: #2563eb;
}

table.is-column-resizing,
table.is-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.inventory-voucher-list th[data-column-key="line_count"],
.inventory-voucher-list td[data-column-key="line_count"],
.inventory-voucher-list .inventory-number-value {
    min-width: 90px;
    white-space: nowrap;
}

.inventory-voucher-list th[data-column-key="total_amount"],
.inventory-voucher-list td[data-column-key="total_amount"],
.inventory-voucher-list .inventory-money-value {
    min-width: 145px;
    white-space: nowrap;
}

/* Phiếu thu/chi có thể chuyển chủ động giữa bảng ngang và thẻ ở mọi kích thước màn hình. */
.finance-entry-list-pane .table-responsive.is-card-view {
    overflow: visible !important;
    padding: .75rem;
    background: #f1f5f9;
}

.finance-entry-table.is-card-view,
.finance-entry-table.is-card-view tbody,
.finance-entry-table.is-card-view tr,
.finance-entry-table.is-card-view td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.finance-entry-table.is-card-view {
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0;
}

.finance-entry-table.is-card-view thead {
    display: none;
}

.finance-entry-table.is-card-view tbody tr {
    margin-bottom: .75rem;
    padding: .8rem;
    border: 1px solid #dbe3ed;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.finance-entry-table.is-card-view tbody td {
    display: grid;
    grid-template-columns: minmax(110px, 28%) minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .32rem 0;
    border: 0;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left !important;
}

.finance-entry-table.is-card-view tbody td > *,
.finance-entry-table.is-card-view .finance-allocation-links,
.finance-entry-table.is-card-view .finance-document-links,
.finance-entry-table.is-card-view .finance-entry-documents-content {
    min-width: 0;
    max-width: none;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 767.98px) {
    /* Tiêu đề danh sách thu/chi chiếm một hàng riêng phía trên các nút. */
    [data-finance-entry-pane="income"] .finance-entry-list-header,
    [data-finance-entry-pane="expense"] .finance-entry-list-header {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
    }

    [data-finance-entry-pane="income"] .finance-entry-list-header > h5,
    [data-finance-entry-pane="expense"] .finance-entry-list-header > h5 {
        display: block;
        inline-size: 100%;
        width: 100%;
        margin: 0 !important;
    }

    [data-finance-entry-pane="income"] .finance-entry-list-actions,
    [data-finance-entry-pane="expense"] .finance-entry-list-actions {
        position: static !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        inline-size: 100%;
        width: 100%;
        margin: 0 !important;
        transform: none !important;
    }
}

.finance-entry-table.is-card-view .finance-entry-documents-content {
    grid-column: 2;
    width: 100%;
}

.finance-entry-table.is-card-view tbody td::before {
    content: attr(data-column-label);
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
}

.finance-entry-table.is-card-view tbody td[colspan] {
    display: block;
    text-align: center !important;
}

.finance-entry-table.is-card-view tbody td[colspan]::before {
    content: none;
}

.finance-entry-table.is-card-view tfoot {
    display: block;
    margin-top: .25rem;
}

.finance-entry-table.is-card-view tfoot tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    padding: .75rem;
    border-radius: .65rem;
}

.finance-entry-table.is-card-view tfoot td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0;
    border: 0;
    text-align: right !important;
}

.finance-entry-table.is-card-view tfoot td:first-child {
    grid-column: 1 / -1;
}

.finance-entry-table.is-card-view tfoot td:last-child:empty {
    display: none;
}

.finance-summary-card-table.is-card-view,
.finance-summary-card-table.is-card-view tbody,
.finance-summary-card-table.is-card-view tr,
.finance-summary-card-table.is-card-view td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.finance-summary-card-table.is-card-view {
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0;
}

.finance-summary-card-table.is-card-view thead {
    display: none;
}

.finance-summary-card-table.is-card-view tbody tr {
    margin-bottom: .75rem;
    padding: .8rem;
    border: 1px solid #f0c36a;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.finance-summary-card-table.is-card-view tbody td {
    display: grid;
    grid-template-columns: minmax(110px, 32%) minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .35rem 0;
    border: 0;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left !important;
}

.finance-summary-card-table.is-card-view tbody td::before {
    content: attr(data-column-label);
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
}

.finance-summary-card-table.is-card-view tbody td[colspan] {
    display: block;
    text-align: center !important;
}

.finance-summary-card-table.is-card-view tbody td[colspan]::before {
    content: none;
}

#finance-missing-invoices .table-responsive.is-card-view,
#finance-accounting-tab .table-responsive.is-card-view,
.finance-data-grid-pane .table-responsive.is-card-view {
    max-height: none !important;
    overflow: visible !important;
    padding: .75rem;
    background: #fff8e8;
}

@media (max-width: 767.98px) {
    .finance-entry-list-pane .table-responsive.is-table-view {
        overflow: auto !important;
        padding: 0;
        background: #fff;
    }

    .finance-entry-table.is-table-view {
        display: table !important;
        border-collapse: collapse;
    }

    .finance-entry-table.is-table-view thead {
        display: table-header-group !important;
    }

    .finance-entry-table.is-table-view tbody {
        display: table-row-group !important;
    }

    .finance-entry-table.is-table-view tfoot {
        display: table-footer-group !important;
    }

    .finance-entry-table.is-table-view tr,
    .finance-entry-table.is-table-view tbody tr,
    .finance-entry-table.is-table-view tfoot tr {
        display: table-row !important;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .finance-entry-table.is-table-view th,
    .finance-entry-table.is-table-view td,
    .finance-entry-table.is-table-view tbody td,
    .finance-entry-table.is-table-view tfoot td {
        display: table-cell !important;
        width: auto;
        padding: .5rem;
        border-bottom: 1px solid var(--border);
        text-align: inherit !important;
    }

    .finance-entry-table.is-table-view td::before {
        content: none !important;
    }
}

.system-table-view-settings {
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.system-column-settings-heading {
    margin-bottom: .4rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
}

.system-table-view-settings .btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

@media (max-width: 767.98px) {
    .inventory-voucher-list .table-responsive,
    #stock-on-hand .table-responsive,
    #issue-project-summary .table-responsive {
        overflow: visible;
    }

    .inventory-mobile-card-table,
    .inventory-mobile-card-table tbody,
    .inventory-mobile-card-table tr,
    .inventory-mobile-card-table td {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .inventory-mobile-card-table {
        border: 0;
    }

    .inventory-mobile-card-table thead {
        display: none;
    }

    .inventory-mobile-card-table tbody {
        padding: .6rem;
        background: #f1f5f9;
    }

    .inventory-mobile-card-table tbody tr {
        margin-bottom: .7rem;
        padding: .75rem;
        border: 1px solid #dbe3ed;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    .inventory-mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .inventory-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: .65rem;
        align-items: start;
        padding: .34rem 0;
        border: 0;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .inventory-mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        color: #64748b;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .inventory-mobile-card-table tbody td[data-mobile-label="Chọn"] {
        align-items: center;
    }

    .inventory-mobile-card-table tbody td .form-control,
    .inventory-mobile-card-table tbody td .form-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .inventory-mobile-card-table tbody td[colspan] {
        display: block;
        padding: 1rem .5rem;
        text-align: center !important;
    }

    .inventory-mobile-card-table tbody td[colspan]::before {
        content: none;
    }

    .inventory-mobile-card-table tfoot,
    .inventory-mobile-card-table tfoot tr,
    .inventory-mobile-card-table tfoot td {
        display: block;
        width: 100% !important;
    }

    .inventory-mobile-card-table tfoot tr {
        padding: .7rem .8rem;
    }

    .inventory-mobile-card-table tfoot td {
        border: 0;
        text-align: right !important;
    }

    .inventory-mobile-card-table tfoot td:empty {
        display: none;
    }
}

.inventory-entry-split {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: calc(100dvh - 190px);
    min-height: 420px;
    overflow: hidden;
}

.inventory-entry-split > .resizable-divider {
    align-self: stretch;
    min-height: 100%;
}

.inventory-entry-split > .resizable-divider::before {
    top: 0;
    bottom: 0;
    background: #b8c4d3;
}

.inventory-entry-split > .resizable-divider::after {
    top: 50%;
}

.inventory-entry-split > .inventory-entry-pane {
    flex: 0 0 25%;
    max-width: 70%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-entry-split > .inventory-list-pane {
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-entry-split.is-floating-layout > .inventory-entry-pane,
.inventory-entry-split.is-floating-layout > .resizable-divider {
    display: none;
}

.inventory-entry-split.is-floating-layout > .inventory-list-pane {
    width: 100%;
    flex: 1 1 100%;
}

.inventory-entry-floating-layer[hidden],
.inventory-voucher-form [data-inventory-floating-actions][hidden],
.inventory-list-pane button[hidden] {
    display: none !important;
}

.inventory-entry-pane .inventory-floating-form {
    margin-bottom: 0;
    width: 100%;
    max-width: none;
}

.inventory-entry-pane .inventory-voucher-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.inventory-entry-pane .inventory-voucher-column,
.inventory-entry-pane .inventory-voucher-column-small,
.inventory-entry-pane .inventory-voucher-column-large,
.inventory-entry-pane .inventory-voucher-column-docs {
    display: contents;
}

.inventory-entry-pane .inventory-field,
.inventory-entry-pane .inventory-field-small,
.inventory-entry-pane .inventory-field-large,
.inventory-entry-pane .inventory-field-docs {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.inventory-entry-pane [data-document-picker],
.inventory-entry-pane [data-document-selected],
.inventory-entry-pane [data-document-results] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.inventory-entry-pane [data-document-selected] {
    align-items: flex-start;
}

.inventory-entry-pane [data-document-selected] > .badge {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
}

.inventory-entry-pane [data-document-selected] > .badge > span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.inventory-entry-pane [data-document-selected] > .badge > button {
    flex: 0 0 auto;
}

.inventory-entry-pane .inventory-document-input-group {
    min-width: 0;
}

.inventory-entry-pane .inventory-document-input-group > .form-control {
    min-width: 0;
}

.inventory-entry-pane .inventory-voucher-form input[name="voucher_date"],
.inventory-entry-pane .inventory-voucher-form input[name="voucher_number"],
.inventory-entry-pane .inventory-voucher-form input[name="receiver_name"] {
    max-width: none;
}

.inventory-voucher-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: .5rem;
    width: 100%;
}

.inventory-voucher-meta-row .inventory-field-voucher-meta {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex-basis: auto;
}

.inventory-voucher-meta-row .inventory-field-voucher-meta input {
    width: 100%;
    max-width: none;
}

form[data-inventory-voucher-form] .inventory-lines-table {
    min-width: 0;
}

form[data-inventory-voucher-form] .inventory-lines-table,
form[data-inventory-voucher-form] .inventory-lines-table tbody,
form[data-inventory-voucher-form] .inventory-lines-table tr,
form[data-inventory-voucher-form] .inventory-lines-table td {
    display: block;
    width: 100%;
}

form[data-inventory-voucher-form] .inventory-lines-table thead {
    display: none;
}

form[data-inventory-voucher-form] .inventory-lines-table tbody tr {
    margin-bottom: .65rem;
    padding: .45rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
}

form[data-inventory-voucher-form] .inventory-lines-table tbody td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    padding: .25rem 0;
    border: 0;
    text-align: left !important;
}

form[data-inventory-voucher-form] .inventory-lines-table tbody td::before {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 600;
}

form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(1)::before { content: "Tên hàng"; }
form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(2)::before { content: "ĐVT"; }
form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(3)::before { content: "Số lượng"; }
form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(4)::before { content: "Đơn giá"; }
form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(5)::before { content: "Thành tiền"; }
form[data-inventory-voucher-form] .inventory-receipt-lines-table tbody td:nth-of-type(6)::before { content: "Thao tác"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(1)::before { content: "Hàng hóa"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(2)::before { content: "ĐVT"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(3)::before { content: "Tồn hiện tại"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(4)::before { content: "SL xuất"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(5)::before { content: "Đơn giá"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(6)::before { content: "Thành tiền"; }
form[data-inventory-voucher-form] .inventory-issue-lines-table tbody td:nth-of-type(7)::before { content: "Thao tác"; }

form[data-inventory-voucher-form] .inventory-lines-table .form-control,
form[data-inventory-voucher-form] .inventory-lines-table .form-select {
    width: 100%;
    min-width: 0;
}

.inventory-entry-pane .inventory-form-section-body > .d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}

.inventory-list-pane .inventory-list-header {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    [data-inventory-layout-toggle] {
        display: none !important;
    }

    .inventory-floating-form {
        position: static;
    }

    .inventory-entry-split {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .inventory-entry-split > .inventory-entry-pane,
    .inventory-entry-split > .inventory-list-pane {
        width: 100%;
        max-width: none;
        overflow: visible;
    }

    .inventory-entry-split > .resizable-divider {
        display: none;
    }

    .inventory-entry-split > .inventory-list-pane {
        margin-top: 1rem;
    }
}

.collapse-caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.collapse-caret-btn.is-open .collapse-caret {
    transform: rotate(225deg);
}

/* Compact ERP density */
body {
    font-size: 14px;
    line-height: 1.28;
}

.app-sidebar {
    width: 204px;
}

.sidebar-brand {
    height: var(--erp-header-height);
    min-height: var(--erp-header-height);
    flex: 0 0 var(--erp-header-height);
    gap: .45rem;
    padding: 0 .75rem;
}

.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: .8rem;
}

.brand-title {
    font-size: .95rem;
}

.brand-subtitle {
    font-size: .74rem;
}

.sidebar-nav {
    padding: .35rem .45rem;
}

.sidebar-toggle {
    min-height: 30px;
    margin: .4rem .45rem 0;
    padding: .25rem .45rem;
    font-size: .88rem;
}

.sidebar-link {
    min-height: 30px;
    gap: .45rem;
    padding: .36rem .5rem;
    border-radius: 5px;
    font-size: .92rem;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border-radius: 5px;
    font-size: .66rem;
}

.sidebar-user {
    padding: .55rem .65rem;
}

.sidebar-user-name {
    font-size: .92rem;
}

.sidebar-user-role {
    font-size: .78rem;
}

.app-sidebar.is-collapsed {
    width: 56px;
}

.topbar {
    height: var(--erp-header-height);
    min-height: var(--erp-header-height);
    flex: 0 0 var(--erp-header-height);
    padding: 0 .55rem;
}

.topbar-leading,
.topbar-heading {
    min-height: 0;
}

.topbar-heading {
    display: grid;
    align-content: center;
}

.page-kicker {
    font-size: .76rem;
    line-height: 1.05;
}

.page-title {
    margin: .12rem 0 0;
    font-size: 1.18rem;
    line-height: 1.08;
}

@media (max-width: 991.98px) {
    .topbar {
        height: 56px;
        min-height: 56px;
        flex-basis: 56px;
    }
}

.app-content,
.content-wrap {
    width: 100%;
    max-width: none;
    flex: 1;
    padding: .25rem .45rem .45rem;
}

.card {
    border-radius: 6px;
}

.card-header {
    min-height: 30px;
    gap: .35rem;
    padding: .32rem .5rem;
    border-radius: 6px 6px 0 0 !important;
}

.card-header h5,
.card-title {
    font-size: 1rem;
    line-height: 1.15;
}

[data-finance-entry-pane="expense"] .finance-entry-list-pane > .finance-entry-list-header {
    height: auto;
    min-height: 60px;
    overflow: visible;
}

[data-finance-entry-pane="expense"] .finance-entry-list-header .finance-entry-list-actions {
    position: static;
    align-self: center;
    margin: 10px 0 10px auto !important;
    transform: none;
}

.card-body {
    padding: .55rem;
}

.permission-groups-layout > [class*="col-"] {
    align-self: flex-start;
}

.permission-groups-sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.permission-groups-sidebar > .card,
.permission-groups-matrix > .card {
    height: auto !important;
    min-height: 0;
    flex: 0 0 auto;
}

.permission-groups-sidebar .card-body,
.permission-groups-sidebar .table-responsive {
    min-height: 0;
}

.permission-group-matrix-select {
    width: 18rem;
    max-width: min(18rem, 55vw);
}

.row {
    --bs-gutter-x: .55rem;
    --bs-gutter-y: .45rem;
}

.mb-4 {
    margin-bottom: .75rem !important;
}

.mt-4 {
    margin-top: .75rem !important;
}

.mt-3 {
    margin-top: .55rem !important;
}

.mb-3 {
    margin-bottom: .45rem !important;
}

.nav-tabs {
    margin-bottom: .45rem !important;
}

.nav-tabs .nav-link {
    padding: .28rem .55rem;
    font-size: .9rem;
    font-weight: 700;
}

.form-label {
    margin-bottom: .16rem;
    font-size: .82rem;
    line-height: 1.15;
}

.form-control,
.form-select {
    min-height: 28px;
    padding: .24rem .42rem;
    border-radius: 5px;
    font-size: .9rem;
    line-height: 1.2;
}

textarea.form-control {
    min-height: 48px;
}

.form-control-sm,
.form-select-sm {
    min-height: 24px;
    padding: .16rem .35rem;
    font-size: .84rem;
}

/* Một chiều cao điều khiển thống nhất trên toàn hệ thống.
   Không áp dụng cho textarea, select nhiều dòng, checkbox hoặc radio. */
input.form-control,
select.form-select:not([multiple]):not([size]) {
    height: 38px !important;
    min-height: 38px !important;
}

.form-text {
    margin-top: .16rem;
    font-size: .78rem;
}

.btn {
    min-height: 28px;
    padding: .25rem .55rem;
    border-radius: 5px;
    font-size: .9rem;
    line-height: 1.2;
}

.btn-sm {
    min-height: 24px;
    padding: .16rem .4rem;
    font-size: .82rem;
}

.table {
    font-size: .9rem;
}

.table thead th {
    padding: .34rem .5rem;
    font-size: .76rem;
}

.table tbody td {
    padding: .36rem .5rem;
}

.table-sm > :not(caption) > * > * {
    padding: .22rem .38rem;
}

.badge {
    padding: .22rem .38rem;
    font-size: .78rem;
}

.alert {
    padding: .45rem .65rem;
    margin-bottom: .5rem;
    font-size: .92rem;
}

.stat-value {
    font-size: 1.35rem;
}

.stat-note {
    margin-top: .3rem;
}

.inventory-floating-form {
    top: 8px;
    margin-bottom: .55rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
}

.inventory-voucher-card-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.inventory-form-section {
    width: 100%;
}

.inventory-form-section-body > .inventory-voucher-fields,
.inventory-form-section-body > .inventory-voucher-column-docs,
.inventory-form-section-body > .table-responsive,
.inventory-form-section-body > .d-flex {
    width: 100%;
}

.inventory-form-section-body > .table-responsive {
    margin-top: 0 !important;
}

.inventory-form-section.finance-form-section-allocation .inventory-form-section-body {
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.inventory-form-section.finance-form-section-allocation .inventory-form-section-body > .table-responsive {
    box-sizing: border-box;
    flex: 0 0 100%;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0;
    min-width: 0;
    max-inline-size: 100%;
    max-width: 100%;
}

.inventory-lines-actions {
    display: grid;
    gap: .55rem;
    width: 100%;
    min-width: 0;
}

.inventory-lines-total {
    width: 100%;
}

.inventory-lines-secondary-actions {
    display: flex;
    gap: .5rem;
    width: 100%;
    min-width: 0;
}

.inventory-lines-secondary-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

.inventory-lines-save {
    display: block;
    width: 100%;
}

.inventory-form-section-body > .inventory-voucher-column-docs {
    display: contents;
}

.inventory-voucher-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .42rem .6rem;
}

.inventory-voucher-column {
    display: contents;
}

.inventory-voucher-column-small {
    display: contents;
}

.inventory-voucher-column-large {
    display: contents;
}

.inventory-voucher-column-docs {
    display: contents;
}

.inventory-field {
    min-width: 0;
    flex: 0 1 auto;
}

.inventory-field-small {
    flex-basis: 4.2cm;
    max-width: 4.2cm;
}

.inventory-field-large {
    flex: 1 1 8cm;
    max-width: 10cm;
}

.inventory-field-docs {
    flex: 1 1 9cm;
    min-width: 7cm;
}

.inventory-voucher-form input[name="voucher_date"] {
    max-width: 3cm;
}

.inventory-voucher-form input[name="voucher_number"],
.inventory-voucher-form input[name="receiver_name"] {
    max-width: 4cm;
}

/* Phiếu nhập kho ở chế độ cửa sổ nổi: các trường chạy tuần tự theo flex. */
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-voucher-fields {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-meta-row {
    display: contents;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-number-field {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-date-field {
    flex: 0 1 3cm;
    width: 3cm;
    max-width: 3cm;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-contract-field,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-invoice-field {
    flex: 1 1 calc(50% - .3rem);
    width: calc(50% - .3rem);
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-project-field {
    flex: 1 0 calc(100% - 150px - 3cm - 1.2rem);
    width: auto;
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-receiver-field {
    flex: 0 0 4cm;
    width: 4cm;
    max-width: 4cm;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-supplier-field,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-reason-field {
    flex: 1 1 0;
    width: auto;
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-field > .form-control,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-field > .form-select,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-partner-picker,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-partner-picker > .form-control {
    width: 100%;
    max-width: none;
}

/* Phiếu xuất kho dùng cùng nhịp bố cục với phiếu nhập kho. */
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-voucher-fields {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-meta-row {
    display: contents;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-number-field {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-date-field {
    flex: 0 1 3cm;
    width: 3cm;
    max-width: 3cm;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-project-field {
    flex: 1 0 calc(100% - 150px - 3cm - 1.2rem);
    width: auto;
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-contract-field,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-invoice-field {
    flex: 1 1 calc(50% - .3rem);
    width: calc(50% - .3rem);
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-receiver-field {
    flex: 0 0 4cm;
    width: 4cm;
    max-width: 4cm;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-customer-field,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-purpose-field {
    flex: 1 1 0;
    width: auto;
    max-width: none;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-field > .form-control,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-field > .form-select,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-partner-picker,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-partner-picker > .form-control {
    width: 100%;
    max-width: none;
}

@media (max-width: 767.98px) {
    [data-inventory-voucher-kind="receipt"] .inventory-voucher-fields,
    [data-inventory-voucher-kind="issue"] .inventory-voucher-fields {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
    }

    [data-inventory-voucher-kind="receipt"] .inventory-receipt-meta-row,
    [data-inventory-voucher-kind="issue"] .inventory-issue-meta-row {
        display: contents;
    }

    [data-inventory-voucher-kind="receipt"] .inventory-field,
    [data-inventory-voucher-kind="receipt"] .inventory-field-small,
    [data-inventory-voucher-kind="receipt"] .inventory-field-large,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-number-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-date-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-project-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-contract-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-invoice-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-receiver-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-supplier-field,
    [data-inventory-voucher-kind="receipt"] .inventory-receipt-reason-field,
    [data-inventory-voucher-kind="issue"] .inventory-field,
    [data-inventory-voucher-kind="issue"] .inventory-field-small,
    [data-inventory-voucher-kind="issue"] .inventory-field-large,
    [data-inventory-voucher-kind="issue"] .inventory-issue-number-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-date-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-project-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-contract-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-invoice-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-receiver-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-customer-field,
    [data-inventory-voucher-kind="issue"] .inventory-issue-purpose-field {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    [data-inventory-voucher-kind="receipt"] .inventory-field > .form-control,
    [data-inventory-voucher-kind="receipt"] .inventory-field > .form-select,
    [data-inventory-voucher-kind="receipt"] .inventory-partner-picker,
    [data-inventory-voucher-kind="receipt"] .inventory-partner-picker > .form-control,
    [data-inventory-voucher-kind="issue"] .inventory-field > .form-control,
    [data-inventory-voucher-kind="issue"] .inventory-field > .form-select,
    [data-inventory-voucher-kind="issue"] .inventory-partner-picker,
    [data-inventory-voucher-kind="issue"] .inventory-partner-picker > .form-control {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

.inventory-partner-picker {
    position: relative;
}

.inventory-partner-results {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.inventory-partner-results .list-group-item {
    padding: .28rem .45rem;
    font-size: .84rem;
}

.inventory-partner-results .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.inventory-document-input-group .btn {
    display: inline-flex;
    align-items: center;
}

/* Bảng hàng hóa dạng dọc phải phủ hết bề ngang của khung nhập liệu. */
form[data-inventory-voucher-form] .inventory-lines-table,
form[data-inventory-voucher-form] .inventory-lines-table tbody,
form[data-inventory-voucher-form] .inventory-lines-table tbody tr {
    box-sizing: border-box;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
}

form[data-inventory-voucher-form] .inventory-lines-table tbody td {
    display: block;
    box-sizing: border-box;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
}

form[data-inventory-voucher-form] .inventory-lines-table tbody td::before {
    display: block;
    margin-bottom: .25rem;
}

form[data-inventory-voucher-form] .inventory-lines-table tbody td > .form-control,
form[data-inventory-voucher-form] .inventory-lines-table tbody td > .form-select,
form[data-inventory-voucher-form] .inventory-lines-table tbody td > input:not([type="hidden"]),
form[data-inventory-voucher-form] .inventory-lines-table tbody td > select {
    box-sizing: border-box;
    display: block;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
}

/* Popup phiếu nhập: tên hàng một hàng, bốn trường số liệu cùng hàng kế tiếp. */
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-lines-table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem .55rem;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-lines-table tbody td {
    align-self: end;
    padding: 0;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-lines-table tbody td:first-child,
.inventory-entry-floating-host [data-inventory-voucher-kind="receipt"] .inventory-receipt-lines-table tbody td:last-child {
    grid-column: 1 / -1;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-lines-table tbody tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .4rem .55rem;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-lines-table tbody td {
    align-self: end;
    padding: 0;
}

.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-lines-table tbody td:first-child,
.inventory-entry-floating-host [data-inventory-voucher-kind="issue"] .inventory-issue-lines-table tbody td:last-child {
    grid-column: 1 / -1;
}

form[data-inventory-voucher-form] [data-delete-voucher] {
    border: 2px solid var(--bs-danger, #dc3545) !important;
    color: var(--bs-danger, #dc3545) !important;
    background: #fff !important;
}

form[data-inventory-voucher-form] [data-delete-voucher]:hover,
form[data-inventory-voucher-form] [data-delete-voucher]:focus {
    color: #fff !important;
    background: var(--bs-danger, #dc3545) !important;
}

.inventory-list-header {
    margin: .55rem 0 .35rem;
}

.inventory-quick-filter-hidden {
    display: none !important;
}

.inventory-voucher-filter-bar .form-control {
    min-width: 145px;
}

.sales-stage-icon {
    display: block;
    width: 1.65rem;
    height: 1.65rem;
    transition: transform .22s ease, opacity .22s ease, filter .22s ease, color .22s ease;
}

.sales-pipeline-steps-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    align-items: flex-end;
    justify-content: space-between;
}

.sales-pipeline-step {
    flex: 1 1 4.5rem;
    min-width: 4.2rem;
    max-width: 6.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .45rem .35rem .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: #f8fafc;
    color: #64748b;
    text-decoration: none;
    text-align: center;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .22s ease;
}

.sales-pipeline-step:hover {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
    text-decoration: none;
}

.sales-pipeline-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sales-pipeline-step .sales-stage-icon {
    opacity: .42;
}

.sales-pipeline-step-count {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    color: #475569;
}

.sales-pipeline-step-label {
    font-size: .68rem;
    line-height: 1.15;
    color: #64748b;
}

.sales-pipeline-step.is-active {
    border-color: var(--stage-color, #2563eb);
    background: color-mix(in srgb, var(--stage-color, #2563eb) 10%, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color, #2563eb) 22%, transparent),
        0 8px 22px color-mix(in srgb, var(--stage-color, #2563eb) 28%, transparent);
    transform: translateY(-2px) scale(1.06);
    z-index: 1;
}

.sales-pipeline-step.is-active .sales-stage-icon {
    width: 2.35rem;
    height: 2.35rem;
    opacity: 1;
    color: var(--stage-color, #2563eb);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--stage-color, #2563eb) 55%, transparent));
}

.sales-pipeline-step.is-active .sales-pipeline-step-count,
.sales-pipeline-step.is-active .sales-pipeline-step-label {
    color: var(--stage-color, #2563eb);
    font-weight: 600;
}

.sales-pipeline-step.stage-all.is-active {
    --stage-color: #2563eb;
}

.sales-pipeline-step.stage-all { --stage-color: #64748b; }
.sales-pipeline-step.stage-lead { --stage-color: #6366f1; }
.sales-pipeline-step.stage-qualification { --stage-color: #8b5cf6; }
.sales-pipeline-step.stage-quotation { --stage-color: #0ea5e9; }
.sales-pipeline-step.stage-follow_up { --stage-color: #f59e0b; }
.sales-pipeline-step.stage-negotiation { --stage-color: #ec4899; }
.sales-pipeline-step.stage-contract_signing { --stage-color: #14b8a6; }
.sales-pipeline-step.stage-execution { --stage-color: #10b981; }
.sales-pipeline-step.stage-completed { --stage-color: #22c55e; }
.sales-pipeline-step.stage-lost { --stage-color: #ef4444; }
.sales-pipeline-step.stage-on_hold { --stage-color: #94a3b8; }

.sales-journey-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.sales-journey-strip-step {
    flex: 1 1 5.5rem;
    min-width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    background: #f8fafc;
    text-align: center;
}

.sales-journey-strip-step .sales-stage-icon {
    opacity: .35;
}

.sales-journey-strip-step.is-visited .sales-stage-icon {
    opacity: .65;
    color: var(--stage-color, #64748b);
}

.sales-journey-strip-step.is-current {
    border-color: var(--stage-color, #2563eb);
    background: color-mix(in srgb, var(--stage-color, #2563eb) 10%, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color, #2563eb) 20%, transparent),
        0 8px 20px color-mix(in srgb, var(--stage-color, #2563eb) 25%, transparent);
    transform: scale(1.06);
}

.sales-journey-strip-step.is-current .sales-stage-icon {
    width: 2.2rem;
    height: 2.2rem;
    opacity: 1;
    color: var(--stage-color, #2563eb);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--stage-color, #2563eb) 50%, transparent));
}

.sales-journey-strip-step.stage-lead { --stage-color: #6366f1; }
.sales-journey-strip-step.stage-qualification { --stage-color: #8b5cf6; }
.sales-journey-strip-step.stage-quotation { --stage-color: #0ea5e9; }
.sales-journey-strip-step.stage-follow_up { --stage-color: #f59e0b; }
.sales-journey-strip-step.stage-negotiation { --stage-color: #ec4899; }
.sales-journey-strip-step.stage-contract_signing { --stage-color: #14b8a6; }
.sales-journey-strip-step.stage-execution { --stage-color: #10b981; }
.sales-journey-strip-step.stage-completed { --stage-color: #22c55e; }

.sales-journey-strip-label {
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
}

.sales-journey-strip-date {
    font-size: .65rem;
    color: #94a3b8;
}

.sales-stage-panel-icon {
    display: inline-flex;
    align-items: center;
    color: var(--stage-color, #2563eb);
}

.sales-stage-panel-icon .sales-stage-icon {
    width: 1.35rem;
    height: 1.35rem;
    opacity: 1;
}

.sales-stage-panel.stage-lead { --stage-color: #6366f1; }
.sales-stage-panel.stage-qualification { --stage-color: #8b5cf6; }
.sales-stage-panel.stage-quotation { --stage-color: #0ea5e9; }
.sales-stage-panel.stage-follow_up { --stage-color: #f59e0b; }
.sales-stage-panel.stage-negotiation { --stage-color: #ec4899; }
.sales-stage-panel.stage-contract_signing { --stage-color: #14b8a6; }
.sales-stage-panel.stage-execution { --stage-color: #10b981; }
.sales-stage-panel.stage-completed { --stage-color: #22c55e; }
.sales-stage-panel.stage-lost { --stage-color: #ef4444; }
.sales-stage-panel.stage-on_hold { --stage-color: #94a3b8; }

.sales-pipeline-workspace.is-split {
    display: grid;
    grid-template-columns: minmax(240px, 28%) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col {
    order: -1;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .sales-stage-panel {
    position: sticky;
    top: .75rem;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .card-header {
    padding: .45rem .65rem;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .card-header h5 {
    font-size: .95rem;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .card-body {
    padding: .55rem .65rem;
}

.sales-pipeline-workspace.is-split .sales-pipeline-list-col .table-responsive {
    max-height: calc(100vh - 11rem);
    overflow: auto;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .form-label,
.sales-opportunity-form.is-compact .form-label {
    font-size: .72rem;
    margin-bottom: .12rem;
    line-height: 1.2;
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .form-control,
.sales-pipeline-workspace.is-split .sales-pipeline-form-col .form-select,
.sales-opportunity-form.is-compact .form-control,
.sales-opportunity-form.is-compact .form-select {
    font-size: .78rem;
    padding: .18rem .4rem;
    min-height: calc(1.35em + .36rem + 2px);
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col textarea.form-control,
.sales-opportunity-form.is-compact textarea.form-control {
    min-height: calc(1.35em + .36rem + 2px);
}

.sales-pipeline-workspace.is-split .sales-pipeline-form-col .btn,
.sales-opportunity-form.is-compact .btn {
    font-size: .78rem;
    padding: .22rem .5rem;
}

.sales-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .45rem;
    align-items: flex-end;
}

.sales-opportunity-form:not(.is-compact) .sales-form-fields {
    margin-bottom: .75rem;
}

.sales-form-field {
    flex: 1 1 calc(50% - .45rem);
    min-width: 10rem;
}

.sales-form-field-span-2 {
    flex: 1 1 100%;
    min-width: 100%;
}

.sales-form-field-span-full {
    flex: 1 1 100%;
    min-width: 100%;
}

.sales-form-field-narrow {
    flex: 0 1 5.5rem;
    min-width: 5.5rem;
}

.sales-customer-type-switch {
    min-height: 2.375rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .55rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: #fff;
}

.sales-customer-type-switch > span {
    color: var(--muted);
    font-weight: 600;
    line-height: 1;
}

.sales-customer-type-switch > span.is-active {
    color: var(--text);
}

.sales-customer-type-switch .form-check-input {
    width: 2.65rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.sales-pipeline-workspace.is-split .sales-form-field,
.sales-opportunity-form.is-compact .sales-form-field {
    flex: 1 1 calc(33.333% - .45rem);
    min-width: 5.5rem;
}

.sales-pipeline-workspace.is-split .sales-form-field-span-2,
.sales-opportunity-form.is-compact .sales-form-field-span-2 {
    flex: 1 1 calc(66.666% - .45rem);
    min-width: 8rem;
}

.sales-pipeline-workspace.is-split .sales-form-field-narrow,
.sales-opportunity-form.is-compact .sales-form-field-narrow {
    flex: 0 1 4.5rem;
    min-width: 4.5rem;
}

.sales-pipeline-workspace.is-split .sales-task-list .list-group-item,
.sales-opportunity-form.is-compact .sales-task-list .list-group-item {
    padding: .28rem .35rem;
    font-size: .78rem;
}

.sales-pipeline-workspace.is-split .sales-activity-item,
.sales-opportunity-form.is-compact .sales-activity-item {
    font-size: .78rem;
    margin-bottom: .35rem;
}

.sales-pipeline-workspace.is-split .sales-stage-panel hr,
.sales-opportunity-form.is-compact hr {
    margin: .45rem 0;
}

.sales-pipeline-workspace.is-split .sales-stage-panel h6,
.sales-opportunity-form.is-compact h6 {
    font-size: .82rem;
}

@media (max-width: 991.98px) {
    .sales-pipeline-workspace.is-split {
        grid-template-columns: 1fr;
    }

    .sales-pipeline-workspace.is-split .sales-pipeline-form-col {
        order: 0;
    }

    .sales-pipeline-workspace.is-split .sales-pipeline-form-col .sales-stage-panel {
        position: static;
        max-height: none;
    }

    .sales-pipeline-workspace.is-split .sales-pipeline-list-col .table-responsive {
        max-height: none;
    }

    .sales-opportunity-form.is-compact .sales-form-field {
        flex: 1 1 calc(50% - .45rem);
    }
}

/* Attendance calendar */
.attendance-page {
    --attendance-sat-bg: #eff6ff;
    --attendance-sun-bg: #fef2f2;
    --attendance-holiday-bg: #fff7ed;
    --attendance-today-ring: #2563eb;
    --attendance-outside: #94a3b8;
    --attendance-selected: #1d4ed8;
    --attendance-grid-gap: 4px;
}

.attendance-toolbar .attendance-toolbar-field {
    min-width: 10rem;
}

.attendance-toolbar .attendance-toolbar-user {
    min-width: 14rem;
    flex: 1 1 14rem;
}

.attendance-calendar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-bottom: .75rem;
    font-size: .78rem;
    color: var(--muted);
}

.attendance-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.attendance-legend-swatch,
.attendance-legend-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, .12);
}

.attendance-legend-dot {
    border-radius: 50%;
}

.attendance-legend-swatch.is-today-sample {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--attendance-today-ring);
}

.attendance-legend-swatch.is-saturday-sample {
    background: var(--attendance-sat-bg);
}

.attendance-legend-swatch.is-sunday-sample {
    background: var(--attendance-sun-bg);
}

.attendance-legend-swatch.is-holiday-sample {
    background: var(--attendance-holiday-bg);
    border-color: #fdba74;
}

.attendance-calendar {
    display: flex;
    flex-direction: column;
    gap: var(--attendance-grid-gap);
    user-select: none;
}

.attendance-calendar.is-dragging {
    cursor: crosshair;
}

.attendance-calendar-weekdays,
.attendance-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--attendance-grid-gap);
}

.attendance-weekday {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    padding: .25rem 0;
}

.attendance-weekday.is-saturday {
    color: #1d4ed8;
}

.attendance-weekday.is-sunday {
    color: #b91c1c;
}

.attendance-day {
    min-height: 4.75rem;
    padding: .35rem .4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

.attendance-day[role="button"] {
    cursor: pointer;
}

.attendance-day[role="button"]:hover {
    border-color: #93c5fd;
    box-shadow: 0 1px 4px rgba(37, 99, 235, .12);
}

.attendance-day.is-outside {
    opacity: .45;
    background: var(--surface-muted);
}

.attendance-day.is-outside .attendance-day-num {
    color: var(--attendance-outside);
}

.attendance-day.is-saturday {
    background: var(--attendance-sat-bg);
}

.attendance-day.is-sunday {
    background: var(--attendance-sun-bg);
}

.attendance-day.is-weekly-off {
    border-color: #fca5a5;
}

.attendance-day.is-saturday-morning {
    background: linear-gradient(135deg, #ffffff 50%, var(--attendance-sat-bg) 50%);
}

.attendance-day-pill.is-weekly-off-label {
    color: #b91c1c;
    font-weight: 600;
}

.attendance-day.is-holiday-date {
    background: var(--attendance-holiday-bg);
    border-color: #fdba74;
}

.attendance-day.is-saturday.is-holiday-date,
.attendance-day.is-sunday.is-holiday-date {
    background: linear-gradient(135deg, var(--attendance-holiday-bg) 55%, var(--attendance-sat-bg) 100%);
}

.attendance-day.is-sunday.is-holiday-date {
    background: linear-gradient(135deg, var(--attendance-holiday-bg) 55%, var(--attendance-sun-bg) 100%);
}

.attendance-day.is-today {
    box-shadow: inset 0 0 0 2px var(--attendance-today-ring);
}

.attendance-day.is-selected {
    border-color: var(--attendance-selected);
    box-shadow: inset 0 0 0 2px var(--attendance-selected), 0 2px 8px rgba(29, 78, 216, .18);
    z-index: 1;
}

.attendance-day-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem;
}

.attendance-day-num {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
}

.attendance-day-badge {
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
    padding: .15rem .3rem;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}

.attendance-day-body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-height: 0;
    flex: 1;
}

.attendance-day-pill,
.attendance-day-note,
.attendance-day-ot {
    font-size: .68rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.attendance-day-pill.is-holiday-label {
    color: #c2410c;
    font-weight: 600;
}

.attendance-day-ot {
    color: #7c3aed;
    font-weight: 600;
}

.attendance-day.has-status {
    border-width: 1px;
}

/* Status colors */
.status-office,
.attendance-legend-dot.status-office {
    background: #16a34a;
}

.status-present,
.attendance-legend-dot.status-present {
    background: #16a34a;
}

.status-remote,
.attendance-legend-dot.status-remote {
    background: #0891b2;
}

.status-business_trip,
.attendance-legend-dot.status-business_trip {
    background: #7c3aed;
}

.status-work_day_off,
.attendance-legend-dot.status-work_day_off {
    background: #db2777;
}

.status-work_holiday,
.attendance-legend-dot.status-work_holiday {
    background: #ea580c;
}

.status-compensatory_work,
.attendance-legend-dot.status-compensatory_work {
    background: #0d9488;
}

.status-paid_leave,
.attendance-legend-dot.status-paid_leave {
    background: #2563eb;
}

.status-unpaid_leave,
.attendance-legend-dot.status-unpaid_leave {
    background: #64748b;
}

.status-compensatory_leave,
.attendance-legend-dot.status-compensatory_leave {
    background: #7c3aed;
}

.status-half_day,
.attendance-legend-dot.status-half_day {
    background: #ca8a04;
}

.status-ot_day_off,
.attendance-legend-dot.status-ot_day_off {
    background: #db2777;
}

.status-ot_holiday,
.attendance-legend-dot.status-ot_holiday {
    background: #ea580c;
}

.status-annual_leave,
.attendance-legend-dot.status-annual_leave {
    background: #2563eb;
}

.status-absent,
.attendance-legend-dot.status-absent {
    background: #dc2626;
}

.status-public_holiday,
.attendance-legend-dot.status-public_holiday {
    background: #f97316;
}

.attendance-day.status-office,
.attendance-day.status-present { background-color: #f0fdf4; }
.attendance-day.status-remote { background-color: #ecfeff; }
.attendance-day.status-business_trip { background-color: #f5f3ff; }
.attendance-day.status-work_day_off { background-color: #fdf2f8; }
.attendance-day.status-work_holiday { background-color: #fff7ed; }
.attendance-day.status-compensatory_work { background-color: #f0fdfa; }
.attendance-day.status-paid_leave { background-color: #eff6ff; }
.attendance-day.status-unpaid_leave { background-color: #f8fafc; }
.attendance-day.status-compensatory_leave { background-color: #f5f3ff; }
.attendance-day.status-half_day { background-color: #fefce8; }
.attendance-day.status-ot_day_off { background-color: #fdf2f8; }
.attendance-day.status-ot_holiday { background-color: #fff7ed; }
.attendance-day.status-annual_leave { background-color: #eff6ff; }
.attendance-day.status-absent { background-color: #fef2f2; }
.attendance-day.status-public_holiday { background-color: #fff7ed; }

.attendance-day.is-saturday.status-present,
.attendance-day.is-sunday.status-present,
.attendance-day.is-holiday-date.status-present {
    background: linear-gradient(160deg, #f0fdf4 70%, var(--attendance-sat-bg) 100%);
}

.attendance-day.is-sunday.status-present {
    background: linear-gradient(160deg, #f0fdf4 70%, var(--attendance-sun-bg) 100%);
}

.attendance-summary-table th {
    font-size: .78rem;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .attendance-day {
        min-height: 3.5rem;
        padding: .25rem;
    }

    .attendance-day-pill,
    .attendance-day-note,
    .attendance-day-ot {
        -webkit-line-clamp: 1;
    }

    .attendance-legend {
        font-size: .72rem;
    }
}

.invoice-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
    min-height: 560px;
    border-top: 1px solid var(--bs-border-color);
}

.invoice-review-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
    overflow: auto;
}

.invoice-learn-panel {
    padding: .75rem .9rem 0;
    background: #f8fafc;
}

.invoice-learn-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
}

.invoice-learn-chips-wrap {
    margin-bottom: .75rem;
}

.invoice-learn-chips-label {
    font-size: .78rem;
    color: #64748b;
    margin-bottom: .35rem;
}

.invoice-learn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.invoice-learn-chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .78rem;
    cursor: grab;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-learn-chip.is-learned {
    border-color: #86efac;
    background: #f0fdf4;
}

.invoice-learn-chip.is-picked {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .25);
}

.invoice-learn-chip:active {
    cursor: grabbing;
}

.invoice-learn-chip-inline {
    display: inline-block;
    max-width: 100%;
    cursor: grab;
}

.invoice-learn-pick-hint {
    min-height: 1.1rem;
}

.invoice-learn-header-targets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}

.invoice-learn-drop {
    position: relative;
    border: 1px dashed #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    min-height: 3.4rem;
    padding: .45rem .55rem;
}

.invoice-learn-drop-sm {
    min-height: 2.8rem;
    padding: .35rem .45rem;
}

.invoice-learn-drop.is-drag-over {
    border-color: #3b82f6;
    background: #eff6ff;
}

.invoice-learn-drop.has-value {
    border-style: solid;
    border-color: #86efac;
    background: #f0fdf4;
}

.invoice-learn-drop-label {
    font-size: .72rem;
    color: #64748b;
    margin-bottom: .15rem;
}

.invoice-learn-drop-value {
    font-size: .82rem;
    font-weight: 600;
    word-break: break-word;
}

.invoice-learn-drop-clear {
    position: absolute;
    top: .2rem;
    right: .25rem;
    border: 0;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
}

.invoice-review-segments {
    min-width: 0;
}

.invoice-review-preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--bs-border-color);
    background: #f8fafc;
}

.invoice-review-preview-head {
    padding: .65rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
    background: #fff;
}

.invoice-review-preview-body {
    flex: 1 1 auto;
    min-height: 0;
}

.invoice-review-preview iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    background: #fff;
}

@media (max-width: 991.98px) {
    .invoice-review-layout {
        grid-template-columns: 1fr;
    }

    .invoice-review-preview {
        border-left: 0;
        border-top: 1px solid var(--bs-border-color);
    }

    .invoice-review-segments {
        max-height: none;
    }

    .invoice-review-main {
        max-height: none;
    }
}
.invoice-preview-window {
    position: fixed;
    z-index: 1095;
    top: 88px;
    right: 18px;
    width: min(48vw, 760px);
    height: calc(100vh - 112px);
    min-width: 420px;
    min-height: 360px;
    overflow: hidden;
    resize: both;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 12px;
    background: #fff;
}

.invoice-preview-header {
    min-height: 48px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    background: #1e293b;
    cursor: move;
    touch-action: none;
    user-select: none;
}

.invoice-preview-header,
.invoice-preview-header * {
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.invoice-preview-header button:focus,
.invoice-preview-header button:focus-visible {
    outline: none;
    box-shadow: none;
}

.invoice-preview-window.is-dragging {
    opacity: 0.94;
}

.invoice-preview-file-name {
    min-height: 35px;
    padding: 7px 12px;
    overflow: hidden;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-preview-body {
    height: calc(100% - 83px);
    overflow: auto;
    background: #f1f5f9;
}

.invoice-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.invoice-preview-text {
    min-height: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    color: #0f172a;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.invoice-preview-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .invoice-preview-window {
        inset: 64px 6px 6px;
        width: auto;
        height: auto;
        min-width: 0;
    }
}
.form-label.is-required-field::after,
label.is-required-field::after {
    content: " *";
    color: #dc2626;
    font-weight: 800;
}

.is-company-party [data-invoice-party-fields] {
    display: none;
}

.is-company-party.is-company-party-expanded [data-invoice-party-fields] {
    display: block;
}

.is-company-party {
    min-height: 58px;
    height: auto !important;
    background: #f8fafc;
}

.invoice-company-party-column {
    flex: 0 0 auto;
    width: auto;
    min-width: 235px;
}

.invoice-counterparty-column {
    flex: 1 1 560px;
    width: auto;
}

.invoice-company-party-column.is-company-party-column-expanded {
    flex: 1 1 480px;
    width: auto;
}

.invoice-company-party-column .is-company-party {
    padding: 10px 12px !important;
}

.invoice-company-party-column .is-company-party h6 {
    white-space: nowrap;
}

.company-party-summary {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-partner-autocomplete {
    position: relative;
}

.invoice-partner-suggestion-list {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.invoice-partner-suggestion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: #172033;
    text-align: left;
}

.invoice-partner-suggestion:last-child {
    border-bottom: 0;
}

.invoice-partner-suggestion:hover,
.invoice-partner-suggestion:focus {
    background: #eff6ff;
}

.invoice-partner-suggestion span {
    color: #64748b;
    font-size: .8rem;
}

.invoice-scan-folder-label {
    max-width: min(52vw, 620px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-scan-suggestions {
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
}

.invoice-scan-suggestions > summary {
    padding: 7px 10px;
    color: #1d4ed8;
    cursor: pointer;
    font-weight: 700;
}

.invoice-scan-suggestion-list {
    max-height: 180px;
    overflow-y: auto;
    border-top: 1px solid #bfdbfe;
    background: #fff;
}

.invoice-scan-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.invoice-scan-suggestion-item > div {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .invoice-company-party-column,
    .invoice-counterparty-column {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }
}
.invoice-split {
    height: max(620px, calc(100vh - 250px));
    min-height: 620px;
}

@media (min-width: 992px) {
    .app-content--invoices {
        height: calc(100dvh - 40px);
        min-height: 0;
        display: flex;
        flex: 0 0 calc(100dvh - 40px);
        flex-direction: column;
        overflow: hidden;
    }

    .app-content--invoices .invoice-page-toolbar {
        flex: 0 0 auto;
    }

    .app-content--invoices .invoice-split {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
    }
}

.invoice-entry-pane,
.invoice-list-pane {
    height: 100%;
}

.invoice-list-document-cell {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.invoice-list-document-cell:hover,
.invoice-list-document-cell:focus {
    outline: none;
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .2);
}

.invoice-list-type-tabs {
    flex: 0 0 auto;
    background: var(--surface);
}

.invoice-list-type-hidden {
    display: none !important;
}

.invoice-list-card > .system-column-toolbar {
    z-index: 3;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    min-height: auto;
    padding: .55rem .65rem;
    border-bottom: 1px solid #cfd8e3;
}

.invoice-list-card > .system-column-toolbar .system-list-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.invoice-list-card > .system-column-toolbar .system-list-search {
    flex: 1 0 190px;
    width: 190px;
    max-width: 320px;
}

.invoice-list-card > .system-column-toolbar .system-list-quick-filters {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border-top: 0;
    flex-wrap: nowrap !important;
}

.invoice-list-card > .system-column-toolbar .system-list-date-filters {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.invoice-list-card > .table-responsive {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .invoice-list-card > .system-column-toolbar .system-list-filters {
        display: flex;
        flex-wrap: nowrap;
    }

    .invoice-list-card > .system-column-toolbar .system-list-date-filters {
        flex-wrap: nowrap;
    }

    .invoice-list-card > .system-column-toolbar .system-list-search {
        flex: 1 1 8rem;
        width: auto;
        min-width: 0;
        max-width: 12rem;
    }
}

.invoice-split > .invoice-entry-pane {
    flex-basis: 25%;
    max-width: 75%;
}

.project-material-layout > .project-material-entry {
    flex-basis: 25%;
}

.invoice-entry-card,
.invoice-list-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.invoice-entry-card .card-body {
    overflow: auto;
}

.invoice-list-card {
    display: flex;
    flex-direction: column;
}

.invoice-list-card > .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.invoice-entry-pane #invoice-form > .col-md-2,
.invoice-entry-pane #invoice-form > .col-md-3,
.invoice-entry-pane #invoice-form > .col-md-4 {
    flex: 0 0 50%;
    width: 50%;
}

.invoice-entry-pane #invoice-form > .col-md-6,
.invoice-entry-pane #invoice-form > .col-md-8,
.invoice-entry-pane #invoice-form > .col-12 {
    flex: 0 0 100%;
    width: 100%;
}

.invoice-list-card table {
    min-width: 1100px;
}

.invoice-list-card .erp-money-column {
    min-width: 145px;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.invoice-entry-card input[name="subtotal"],
.invoice-entry-card input[name="tax_amount"],
.invoice-entry-card input[name="total_amount"] {
    min-width: 145px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.invoice-list-card .invoice-purpose-project-column {
    width: 190px;
    max-width: 220px;
}

.invoice-list-card .invoice-purpose-project-tag {
    max-width: 100%;
    margin-bottom: .25rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    text-align: left;
    vertical-align: top;
}

@media (max-width: 991.98px) {
    .invoice-split {
        display: block;
        height: auto;
        min-height: 0;
    }

    .invoice-split .resizable-divider {
        display: none;
    }

    .invoice-entry-pane,
    .invoice-list-pane {
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        width: 100%;
        max-width: 100% !important;
        height: auto;
    }

    .invoice-entry-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
        overflow: visible;
    }

    .invoice-entry-card .card-body {
        overflow: visible;
    }

    .invoice-list-card {
        height: auto;
        min-height: 480px;
    }
}

@media (max-width: 767.98px) {
    form.row > [class*="col-"],
    .invoice-entry-pane #invoice-form > .col-md-2,
    .invoice-entry-pane #invoice-form > .col-md-3,
    .invoice-entry-pane #invoice-form > .col-md-4,
    .invoice-entry-pane #invoice-form > .col-md-6,
    .invoice-entry-pane #invoice-form > .col-md-8,
    .invoice-entry-pane #invoice-form > .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    form .form-control,
    form .form-select,
    form .input-group {
        width: 100%;
        max-width: 100%;
    }

    .invoice-entry-pane #invoice-form > .invoice-compact-field {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}
.ifp-list {
    min-height: 320px;
    max-height: 52vh;
    overflow: auto;
}

.ifp-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    text-align: left;
}

.ifp-item:hover:not(:disabled) {
    background: #f8f9fa;
}

.ifp-item.is-selected {
    background: #e7f1ff;
}

.ifp-item.is-disabled {
    opacity: .45;
}

.ifp-item-name {
    flex: 1 1 auto;
}

.ifp-item-meta {
    color: #64748b;
    font-size: .8rem;
}
.finance-data-grid-pane .table-responsive {
    max-height: min(68vh, 720px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}

.finance-data-grid-pane .table-responsive::after {
    display: block;
    width: 100%;
    height: 1.5rem;
    content: "";
}

.finance-data-grid-pane .table-responsive > table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.finance-data-grid-pane .table-responsive > table > thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.finance-data-grid-pane .table-responsive > table > thead > tr > th {
    min-width: 10rem;
    padding: .7rem .8rem;
    white-space: normal;
    overflow-wrap: anywhere;
    background: #f8fafc;
    box-shadow: inset 0 -1px 0 #dbe3ed;
}

.finance-data-grid-pane .table-responsive > table > tbody > tr > td {
    min-width: 10rem;
    max-width: 28rem;
    padding: .65rem .8rem;
    line-height: 1.35;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.finance-data-grid-pane .table-responsive > table > thead > tr > th:first-child,
.finance-data-grid-pane .table-responsive > table > tbody > tr > td:first-child {
    min-width: 7.5rem;
}

.finance-data-grid-pane .table-responsive > table > thead > tr > th.text-end,
.finance-data-grid-pane .table-responsive > table > tbody > tr > td.text-end,
.finance-data-grid-pane .finance-receivable-money-column {
    min-width: 11rem;
}

.finance-data-grid-pane .table-responsive > table > thead > tr > th:last-child,
.finance-data-grid-pane .table-responsive > table > tbody > tr > td:last-child {
    min-width: 8.5rem;
}

.finance-data-grid-pane .table-responsive > table > tbody > tr > td > div,
.finance-data-grid-pane .table-responsive > table > tbody > tr > td > a,
.finance-data-grid-pane .table-responsive > table > tbody > tr > td > button {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .finance-data-grid-pane .table-responsive,
    .finance-data-grid-pane .finance-entry-list-pane .table-responsive {
        max-height: 70vh;
        overflow: auto;
        padding: 0;
        background: #fff;
    }

    .finance-data-grid-pane .table-responsive > table > thead > tr > th,
    .finance-data-grid-pane .table-responsive > table > tbody > tr > td {
        min-width: 9rem;
    }
}
@media (max-width: 767.98px) {
    .payment-request-card-table-wrap {
        overflow: visible;
        width: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-card-table,
    .payment-request-card-table tbody,
    .payment-request-card-table tbody tr,
    .payment-request-card-table tbody td {
        display: block;
        box-sizing: border-box;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-card-table {
        table-layout: auto !important;
        border: 0;
    }

    .payment-request-card-table colgroup,
    .payment-request-card-table .erp-column-resize-handle {
        display: none !important;
    }

    #payment-request-form,
    #payment-request-form > .table-responsive,
    #payment-request-form [data-payment-request-lines] {
        box-sizing: border-box;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-card-table thead {
        display: none;
    }

    .payment-request-card-table tbody tr {
        margin: 0 0 1rem;
        padding: .9rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        background: var(--bs-body-bg);
        box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .06);
    }

    .payment-request-card-table tbody td {
        padding: .45rem 0;
        border: 0;
        text-align: left !important;
        white-space: normal;
    }

    .payment-request-card-table tbody td::before {
        display: block;
        margin-bottom: .3rem;
        color: var(--bs-secondary-color);
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .payment-request-detail-table td:nth-child(1)::before { content: "Khoản"; }
    .payment-request-detail-table td:nth-child(2)::before { content: "Nội dung"; }
    .payment-request-detail-table td:nth-child(3)::before { content: "Phân bổ cho"; }
    .payment-request-detail-table td:nth-child(4)::before { content: "Đề nghị"; }
    .payment-request-detail-table td:nth-child(5)::before { content: "Đã duyệt"; }
    .payment-request-detail-table td:nth-child(6)::before { content: "Đã trả"; }
    .payment-request-detail-table td:nth-child(7)::before { content: "Xử lý lần này"; }

    .payment-request-entry-table td:nth-child(1)::before { content: "Ngày chi"; }
    .payment-request-entry-table td:nth-child(2)::before { content: "Nội dung"; }
    .payment-request-entry-table td:nth-child(3)::before { content: "Số tiền"; }
    .payment-request-entry-table td:nth-child(4)::before { content: "Loại chi phí"; }
    .payment-request-entry-table td:nth-child(5)::before { content: "Dự án"; }
    .payment-request-entry-table td:nth-child(6)::before { content: "Trung tâm CP"; }
    .payment-request-entry-table td:nth-child(7)::before { content: "Phân loại"; }
    .payment-request-entry-table td:nth-child(8)::before { content: "Tài liệu"; }
    .payment-request-entry-table td:nth-child(9)::before { content: "Thao tác"; }

    .payment-request-list-table td:nth-child(1)::before { content: "Mã"; }
    .payment-request-list-table td:nth-child(2)::before { content: "Ngày"; }
    .payment-request-list-table td:nth-child(3)::before { content: "Người nhận"; }
    .payment-request-list-table td:nth-child(4)::before { content: "Người đề nghị"; }
    .payment-request-list-table td:nth-child(5)::before { content: "Đề nghị"; }
    .payment-request-list-table td:nth-child(6)::before { content: "Đã trả"; }
    .payment-request-list-table td:nth-child(7)::before { content: "Trạng thái"; }

    .payment-request-card-table input,
    .payment-request-card-table select,
    .payment-request-card-table .form-control,
    .payment-request-card-table .form-select {
        box-sizing: border-box;
        display: block;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-entry-table tbody td,
    .payment-request-entry-table tbody td > * {
        box-sizing: border-box;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-card-table .finance-scan-pages,
    .payment-request-card-table [data-mobile-pdf-scanner] {
        box-sizing: border-box;
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .payment-request-card-table tr > td[colspan] {
        display: block;
        text-align: center !important;
    }

    .payment-request-card-table tr > td[colspan]::before {
        content: none;
    }
}

.project-detail-form .project-main-fields {
    margin-bottom: 1rem;
}

.project-detail-form .form-control,
.project-detail-form .form-select {
    max-width: 100%;
}

.project-detail-form input[name="budget"],
.project-detail-form input[name="start_date"],
.project-detail-form input[name="end_date"] {
    max-width: 100%;
}

.project-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.project-inline-field {
    flex: 1 1 13.5rem;
    min-width: min(100%, 13.5rem);
}

.project-inline-field .form-control,
.project-inline-field .form-select {
    width: 100%;
}

.project-member-select {
    position: relative;
}

.project-member-summary {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + .75rem + 2px);
    padding-right: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.project-member-summary::-webkit-details-marker {
    display: none;
}

.project-member-summary::after {
    position: absolute;
    right: .8rem;
    color: var(--bs-secondary-color);
    content: "▾";
}

.project-member-picker {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 18rem;
    padding: .6rem;
    overflow: auto;
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 1.5rem rgba(15, 23, 42, .14);
}

.project-member-options {
    display: grid;
    gap: .15rem;
}

.project-member-options .form-check-label {
    overflow-wrap: anywhere;
}

.project-document-picker {
    max-height: 320px;
    overflow: auto;
}

.project-document-linker {
    min-height: 12.5rem;
}

.project-attachment-list {
    display: grid;
    gap: .35rem;
}

.project-attachment-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
}

.project-attachment-link {
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-attachment-delete {
    flex: 0 0 auto;
    text-decoration: none;
}

.project-linked-documents {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: 2rem;
}

.project-linked-document-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-light);
    line-height: 1.3;
}

.project-linked-document-chip span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-linked-document-link {
    min-width: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.project-linked-document-link:hover {
    text-decoration: underline;
}

.project-linked-document-chip button {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.project-linked-document-chip button:hover {
    background: rgba(220, 53, 69, .12);
    color: var(--bs-danger);
}

.project-document-results {
    max-height: 11.5rem;
    overflow: auto;
}

.project-document-result {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .45rem .55rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
}

.project-document-result:last-child {
    border-bottom: 0;
}

.project-document-result:hover,
.project-document-result.is-selected {
    background: #f8fafc;
}

.project-document-result-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-document-result-meta {
    flex: 0 0 auto;
    max-width: 35%;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.project-summary-card .nav-tabs {
    row-gap: .35rem;
}

.project-summary-content {
    min-height: 11rem;
    background: #fff;
}

.project-summary-content .table-responsive {
    max-height: min(64vh, 620px);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.project-summary-content table {
    min-width: 760px;
}

.project-summary-content th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
}

@media (max-width: 767.98px) {
    .project-detail-form input[name="budget"],
    .project-detail-form input[name="start_date"],
    .project-detail-form input[name="end_date"] {
        max-width: 100%;
    }

    .project-inline-field {
        max-width: 100%;
    }

    .project-summary-content {
        padding: .75rem !important;
    }
}