:root {
    --app-bg: #f4f7f4;
    --surface: #ffffff;
    --surface-muted: #f8faf7;
    --ink: #14251f;
    --muted: #65746e;
    --border: #dce5de;
    --accent: #0d6b53;
    --accent-strong: #084536;
    --accent-soft: #e5f4ed;
    --navy: #102a3a;
    --warning: #b7791f;
    --danger: #b42318;
    --success: #16794c;
    --sidebar-bg: linear-gradient(180deg, #0b2c35 0%, #09251f 55%, #051816 100%);
    --radius: 8px;
    --shadow-soft: 0 16px 42px rgba(18, 38, 32, 0.08);
    --shadow-card: 0 24px 60px rgba(18, 38, 32, 0.12);
    /* Text that sits ON an accent fill - white here, near-black where the accent is bright. */
    --accent-on: #ffffff;
}


/* Radzen's own palette, aligned to this app's accent.

   Radzen themes ship their own primary (purple in the dark theme), which reads as a second brand
   sitting next to the green one. Only the accent is realigned: the rest of Radzen's surface, input
   and border colours are left to the theme that defines them, so its components stay internally
   consistent instead of half-overridden. */
:root {
    --rz-primary: var(--accent);
    --rz-primary-dark: var(--accent-strong);
    --rz-primary-light: var(--accent-soft);
}


/* Dark theme.

   The tokens are redefined; nothing else is. Every rule that already reads a token follows
   automatically, which is why the token block exists at all.

   Two states, as everywhere: an explicit choice stamps data-theme on <html>, and the default
   "system" setting stamps nothing, so prefers-color-scheme has to carry it - guarded so an explicit
   light choice still wins on a dark OS. */
:root[data-theme="dark"] {
    --app-bg: #0f1613;
    --surface: #161f1b;
    --surface-muted: #1b2622;
    --ink: #e6ede9;
    --muted: #9aa8a2;
    --border: #2a3833;
    --accent: #3fbd90;
    --accent-strong: #63d3aa;
    --accent-soft: #14312a;
    --navy: #7fb2cc;
    --warning: #e0a33c;
    --danger: #f08b7f;
    --success: #4cc38a;
    --sidebar-bg: linear-gradient(180deg, #0a1f26 0%, #071a16 55%, #04110f 100%);
    --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.55);
    --accent-on: #06231b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --app-bg: #0f1613;
        --surface: #161f1b;
        --surface-muted: #1b2622;
        --ink: #e6ede9;
        --muted: #9aa8a2;
        --border: #2a3833;
        --accent: #3fbd90;
        --accent-strong: #63d3aa;
        --accent-soft: #14312a;
        --navy: #7fb2cc;
        --warning: #e0a33c;
        --danger: #f08b7f;
        --success: #4cc38a;
        --sidebar-bg: linear-gradient(180deg, #0a1f26 0%, #071a16 55%, #04110f 100%);
        --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.45);
        --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.55);
    --accent-on: #06231b;
    }
}

html, body {
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--app-bg);
    color: var(--ink);
}

a, .btn-link {
    color: var(--accent);
}

.btn-primary {
    color: var(--accent-on, #fff);
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.6rem;
    padding-bottom: 2.5rem;
    max-width: 1460px;
}

.top-row form {
    display: inline;
}

.login-shell {
    min-height: calc(100vh - 8rem);
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.login-panel {
    width: min(520px, 100%);
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f9fcfa) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-card);
}

.request-form {
    max-width: 820px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.requester-banner {
    background: var(--accent-soft);
    border: 1px solid #bfe4d2;
    border-radius: var(--radius);
    color: var(--accent-strong);
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
}

.requester-banner strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.requester-onbehalf {
    color: var(--muted);
    font-size: 0.8rem;
}

.add-employees-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--accent-strong);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.35rem 0;
}

.add-employees-toggle:hover {
    text-decoration: underline;
}

.user-edit-card {
    background: var(--surface, var(--surface, #fff));
    border: 1px solid var(--border, #d9e0e6);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    display: grid;
    gap: 1rem;
}

.user-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-edit-password {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    border-top: 1px dashed var(--border, #d9e0e6);
    padding-top: 0.85rem;
}

.split-coding {
    margin: 0.75rem 0 0.25rem;
}

.split-coding-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}

.split-coding-lines {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.5rem;
}

.split-coding-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.split-coding-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.split-coding-total.ok {
    color: var(--accent-strong);
    font-weight: 700;
}

.split-coding-total.off {
    color: #b45309;
    font-weight: 700;
}

.liquidation-form {
    max-width: 1180px;
    overflow: hidden;
}

.correction-feedback {
    background: #fff8eb;
    border: 1px solid #efd095;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.correction-feedback-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.correction-feedback-heading strong {
    display: block;
    font-size: 1.05rem;
    margin-top: 0.15rem;
}

.correction-feedback-message {
    background: var(--surface);
    border: 1px solid #efdcb8;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.correction-feedback-message span,
.correction-feedback-guidance {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.correction-feedback-message p,
.correction-feedback-guidance {
    margin: 0.3rem 0 0;
}

.correction-feedback-message p {
    color: var(--ink);
    font-weight: 700;
}

.liquidation-feedback-cell {
    display: block;
    max-width: 24rem;
    white-space: normal;
}

.liquidation-reconciliation {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.liquidation-total {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.liquidation-total span {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.liquidation-total strong {
    display: block;
    font-size: 1.2rem;
    margin-top: 0.3rem;
}

.liquidation-total-over {
    background: #fff4f2;
    border-color: #efb8b2;
    border-top-color: var(--danger);
    color: var(--danger);
}

.monitor-search {
    margin-left: auto;
}

/* Responsive search: fills the available width on narrow screens instead of a fixed 320px. */
.monitor-search .rz-textbox {
    width: 320px;
    max-width: 100%;
}

@media (max-width: 720px) {
    .monitor-search {
        margin-left: 0;
        width: 100%;
    }

    .monitor-search .rz-textbox {
        width: 100%;
    }
}

/* Monitoring: table on wide desktop, cards on laptop/tablet/mobile. */
.monitor-cards {
    display: none;
}

@media (max-width: 1200px) {
    .monitor-table-desktop {
        display: none;
    }

    .monitor-cards {
        display: grid;
        gap: 1rem;
    }
}

/* Visually-hidden label text that screen readers still announce. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.replenishment-float-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.liq-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.liq-detail-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px dotted var(--border, #e2e8f0);
    padding-bottom: 0.25rem;
}

.liq-detail-grid > div > span {
    color: var(--muted);
    font-size: 0.82rem;
}

.liq-detail-feedback {
    grid-column: 1 / -1;
}

.liq-detail-subhead {
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

.liq-detail-lines .liq-detail-amount {
    text-align: right;
    white-space: nowrap;
}

.liq-detail-lines .liq-detail-total td {
    font-weight: 800;
    border-top: 2px solid #333;
}

.liq-encode-note {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.liq-encode-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.status-validated {
    background: #fff8e6;
    border-color: #f5d78a;
    color: #92610a;
}

.status-posted {
    background: #e4f6ed;
    border-color: #b8e6ce;
    color: var(--success);
}

.monitor-outstanding {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #fff4e5;
    border: 1px solid #f5c98a;
    color: #b45309;
    white-space: nowrap;
}

.monitor-outstanding--refund {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.monitor-outstanding-clear {
    color: var(--muted);
    font-size: 0.8rem;
}

.monitor-grid-clickable .rz-data-row {
    cursor: pointer;
}

.monitor-grid-clickable .rz-data-row:hover {
    background: var(--accent-soft, #eef6f1);
}

.liquidation-settlement {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--accent-soft, #eef6f1);
    border: 1px dashed #bfe4d2;
    border-radius: var(--radius);
}

.liquidation-settlement-note {
    align-self: center;
    font-size: 0.9rem;
}

.liquidation-settlement-hint {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 0.8rem;
}

.liquidation-lines-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.liquidation-lines-header {
    align-items: center;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
}

.liquidation-lines-header h2 {
    font-size: 1rem;
    margin: 0;
}

.liquidation-lines-header p {
    color: var(--muted);
    margin: 0.2rem 0 0;
}

.liquidation-lines-desktop {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.liquidation-lines-grid {
    min-width: 860px;
}

.liquidation-lines-grid .rz-cell-data {
    overflow: visible;
}

.liquidation-lines-grid .rz-dropdown,
.liquidation-lines-grid .rz-datepicker,
.liquidation-lines-grid .rz-spinner,
.liquidation-lines-grid .rz-textbox {
    min-width: 0;
}

.liquidation-lines-cards {
    display: none;
}

.liquidation-lines-footer {
    border-top: 1px solid var(--border);
    padding: 0.8rem 1rem;
}

.liquidation-line-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(18, 38, 32, 0.07);
    padding: 0.9rem;
}

.liquidation-line-card-header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
}

.liquidation-line-card-fields {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.liquidation-line-card-fields label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.liquidation-line-card-fields label > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.liquidation-line-card-fields .liquidation-line-description {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .liquidation-lines-desktop {
        display: none;
    }

    .liquidation-lines-cards {
        display: grid;
        gap: 0.85rem;
        padding: 0.9rem;
    }
}

@media (max-width: 640px) {
    .liquidation-reconciliation,
    .liquidation-line-card-fields {
        grid-template-columns: 1fr;
    }

    .liquidation-line-card-fields .liquidation-line-description {
        grid-column: auto;
    }

    .liquidation-lines-header,
    .correction-feedback-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

.cashier-queue-grid {
    min-width: 1130px;
    font-size: 0.78rem;
}

/* Compact rows to reduce height and horizontal footprint */
.cashier-queue-grid .rz-data-grid-data td,
.cashier-queue-grid .rz-grid-table td {
    padding: 0.28rem 0.45rem;
}

.cashier-queue-grid .rz-data-grid-data th,
.cashier-queue-grid .rz-grid-table th {
    padding: 0.32rem 0.45rem;
    font-size: 0.7rem;
}

.cashier-queue-grid .request-type-chip {
    font-size: 0.64rem;
    padding: 0.12rem 0.4rem;
}

.cashier-queue-grid .status-chip {
    font-size: 0.64rem;
    padding: 0.12rem 0.4rem;
}

.cashier-queue-cards {
    display: none;
}

.cashier-queue-table {
    max-width: 100%;
    overflow-x: auto;
}

.request-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.request-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.request-card-header div {
    display: grid;
    gap: 0.25rem;
}

.request-card-header span:not(.status-chip) {
    color: var(--muted);
}

.request-card-body {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.request-card-body div {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.6rem 0.7rem;
}

.request-card-body span {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.request-card-body strong {
    display: block;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.cashier-queue-grid .rz-cell-data {
    overflow: visible;
}

.grid-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    min-width: max-content;
}

.cashier-detail-panel {
    margin-bottom: 1rem;
}

.cashier-detail-actions {
    box-shadow: none;
    margin-top: 1rem;
}

/* Cashier queue: show cards on laptop/tablet, table only on wide desktop */
@media (max-width: 1200px) {
    .cashier-queue-table {
        display: none;
    }

    .cashier-queue-cards {
        display: grid;
        gap: 1rem;
    }

    .cashier-detail-actions {
        align-items: stretch !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cashier-detail-actions .rz-form-field,
    .cashier-detail-actions .rz-dropdown,
    .cashier-detail-actions .rz-textbox {
        width: 100% !important;
    }
}

@media (max-width: 1100px) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 640px) {
    .request-card-body,
    .print-grid {
        grid-template-columns: 1fr;
    }

    .cashier-detail-actions {
        grid-template-columns: 1fr;
    }
}

.print-toolbar {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.print-document {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    color: var(--ink, #111827);
    margin: 0 auto 2rem;
    max-width: 1100px;
    padding: 2rem;
}

.print-document h1 {
    font-size: 1.65rem;
    margin-bottom: 0.25rem;
}

.print-document h2 {
    border-bottom: 1px solid var(--border, #d1d5db);
    font-size: 1rem;
    margin: 1.4rem 0 0.75rem;
    padding-bottom: 0.4rem;
}

.print-meta {
    color: var(--muted, #4b5563);
    font-size: 0.9rem;
}

.print-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.print-field {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
}

.print-label {
    color: var(--muted, #6b7280);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.print-value {
    display: block;
    font-weight: 800;
    margin-top: 0.2rem;
}

.print-table {
    border-collapse: collapse;
    font-size: 0.68rem;
    width: 100%;
}

.print-table th,
.print-table td {
    border: 1px solid var(--border, #d1d5db);
    padding: 0.22rem 0.35rem;
    vertical-align: top;
}

.print-table th {
    background: var(--surface-muted, #f3f4f6);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

/* Cash release slip: per-employee breakdown with signature column */
.voucher-employees {
    border-collapse: collapse;
    font-size: 0.72rem;
    margin: 0.5rem 0;
    width: 100%;
}

.voucher-employees th,
.voucher-employees td {
    border: 1px solid var(--border, #d1d5db);
    padding: 0.22rem 0.35rem;
}

.voucher-employees th {
    background: var(--surface-muted, #f3f4f6);
    font-weight: 850;
    text-transform: uppercase;
}

.voucher-codings-total td {
    font-weight: 850;
}

.voucher-employee-amount {
    text-align: right;
    white-space: nowrap;
}

.voucher-employee-sign {
    min-width: 130px;
}

/* Cashier detail: employees & amounts breakdown */
.request-employees-view {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 0.5rem;
    overflow: hidden;
}

.request-employees-view-head {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    padding: 0.5rem 0.75rem;
}

.request-employees-table {
    border-collapse: collapse;
    width: 100%;
}

.request-employees-table th,
.request-employees-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.75rem;
    text-align: left;
}

.request-employees-table th {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.request-employees-amount {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
    white-space: nowrap;
}

.request-employees-total td {
    border-top: 2px solid var(--ink);
    font-weight: 800;
}

.request-employees-map-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.6rem 0.75rem;
}

/* New request: multi-employee payee rows */
.request-employees {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
}

.request-employees-head {
    display: grid;
    gap: 0.15rem;
}

.request-employees-head span {
    color: var(--muted);
    font-size: 0.78rem;
}

.request-employee-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2fr 1fr;
}

.request-total-row {
    align-items: center;
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: space-between;
    padding-top: 0.55rem;
}

.request-total-row strong {
    font-size: 1.15rem;
}

.request-purpose-input {
    width: 100%;
}

@media (max-width: 640px) {
    .request-employee-row {
        grid-template-columns: 1fr;
    }
}

/* Print report grand total bar (renders once, at the end / last page) */
.print-grand-total-bar {
    align-items: center;
    border-top: 3px solid #111827;
    display: flex;
    font-size: 1.1rem;
    font-weight: 850;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 0.6rem;
}

.print-table tfoot .print-table-total td {
    background: var(--surface-muted, #f3f4f6);
    border-top: 2px solid #111827;
    font-weight: 850;
    text-align: right;
}

.print-table tfoot .print-table-total td:first-child {
    text-align: left;
}

.signature-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2.5rem;
}

.signature-line {
    border-top: 1px solid #111827;
    padding-top: 0.45rem;
    text-align: center;
}

.signature-block {
    display: grid;
    gap: 0.35rem;
    text-align: center;
}

.signature-block .signature-line {
    margin-top: 1.5rem;
}

.text-end {
    text-align: right;
}

@media print {
    body {
        background: #fff !important;
    }

    .sidebar,
    .top-row,
    .print-toolbar,
    #blazor-error-ui {
        display: none !important;
    }

    .page,
    main,
    article.content {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .print-document {
        border: 0;
        box-shadow: none;
        margin: 0;
        max-width: none;
        padding: 0.25in;
    }
}

.master-form {
    flex-wrap: wrap;
}

.rz-card h3 {
    margin: 0;
}

h1:focus {
    outline: none;
}

h1, h2, h3 {
    color: var(--ink);
    font-weight: 850;
    letter-spacing: 0;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    margin: 0;
}

.page-header p {
    color: var(--muted);
    margin: 0.35rem 0 0;
    max-width: 680px;
}

.page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* Info/summary cards inside an action row break onto their own full-width line
   so they read as a panel above the buttons, not as an inline chip beside them. */
.page-actions > .slip-convert-summary {
    flex: 1 0 100%;
    max-width: 460px;
    margin: 0;
}

.metric-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

/* 2-column metric grid on mid-range screens */
@media (max-width: 1100px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem;
    position: relative;
}

.metric-card::before {
    background: var(--accent);
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 1.1rem;
    position: absolute;
    right: 1.1rem;
    top: 0;
}

.metric-label {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-value {
    color: var(--ink);
    display: block;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 0.45rem;
}

.metric-note {
    color: var(--muted);
    display: block;
    font-size: 0.84rem;
    margin-top: 0.45rem;
}

.data-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem;
}

.panel-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.panel-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.panel-header p {
    color: var(--muted);
    margin: 0.2rem 0 0;
}

/* Split coding under accounting review: one row per line, amount fixed, accounts correctable. */
.split-coding-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.split-coding-line {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
}

.split-coding-no {
    color: var(--muted);
    font-size: 0.75rem;
    min-width: 4rem;
}

.split-coding-line-changed { border-color: #b45309; }

.split-coding-changed {
    color: #b45309;
    font-size: 0.75rem;
}

.split-total-ok { color: var(--muted); }
.split-total-bad { color: #b45309; font-weight: 600; }

.split-coding-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 6rem;
    text-align: right;
}

.split-coding-account { color: var(--muted); }

.split-coding-hint { color: var(--muted); display: block; font-size: 0.78rem; margin-top: 6px; }

/* Multi-line Notes field: the textarea plus a running count of what is left. The limit state is
   coloured so the user learns why typing stopped, rather than the field just going inert. */
.note-field {
    display: grid;
    gap: 8px;
    width: 100%;
}

.note-textarea {
    min-height: 5.5rem;
    resize: vertical;
    width: 100%;
}

.note-status {
    color: var(--muted);
    display: flex;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    gap: 1rem;
    justify-content: space-between;
}

.note-status-limit {
    color: #b45309;
    font-weight: 500;
}

/* Notes are entered across several lines, so wherever they are shown the breaks must survive.
   Without this the browser collapses them and a three-line note reads as one run-on sentence. */
.note-multiline {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Live-refresh controls in a panel header: a manual Refresh, and an honest statement of how current
   the data is. The stale variant matters most - a grid that failed to refresh must not look current. */
.panel-header-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
}

.refresh-stamp {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.refresh-stale {
    background: rgba(180, 83, 9, 0.12);
    border-radius: 3px;
    color: #b45309;
    cursor: help;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.action-strip {
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

/* Grouped workflow "task cards" for the cashier detail actions (schedule, voucher, release). */
.task-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
    overflow: hidden;
}

.task-card-head {
    align-items: center;
    background: var(--surface-muted, rgba(0, 0, 0, 0.02));
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
}

.task-card-head .rz-icon,
.task-card-head .notranslate {
    color: var(--primary, #2e7d5b);
    font-size: 1.4rem;
}

.task-card-head h4 {
    font-size: 0.98rem;
    margin: 0;
}

.task-card-head p {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.15rem 0 0;
}

.task-card-body {
    display: grid;
    gap: 0.85rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 1.1rem;
}

.task-card-body .rz-form-field {
    width: 100%;
}

.task-card-note {
    padding: 0.85rem 1.1rem 0;
}

.task-card-foot {
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
    padding: 0.85rem 1.1rem;
}

@media (max-width: 640px) {
    .task-card-body {
        grid-template-columns: 1fr;
    }

    .task-card-foot {
        justify-content: stretch;
    }

    .task-card-foot .rz-button {
        flex: 1 1 auto;
    }
}

.finance-alert {
    background: #fff8eb;
    border: 1px solid #f3d49b;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    color: #6b470b;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

/* Classification intake ------------------------------------------------------------------ */
.classification-badge {
    background: var(--accent, #157a55);
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    vertical-align: middle;
}

.classification-options {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 1rem 0;
}

.classification-option {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    display: grid;
    gap: 0.35rem;
    font: inherit;
    color: inherit;
    padding: 0.95rem 1.05rem;
    text-align: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.classification-option:hover {
    border-color: var(--accent, #157a55);
    transform: translateY(-2px);
}

.classification-option:focus-visible {
    outline: 3px solid var(--accent, #157a55);
    outline-offset: 2px;
}

.classification-option--active {
    border-color: var(--accent, #157a55);
    box-shadow: inset 0 0 0 2px var(--accent, #157a55);
}

.classification-option-name {
    font-size: 1rem;
    font-weight: 800;
}

.classification-option-when {
    color: var(--ink);
    font-size: 0.84rem;
}

.classification-option-money {
    color: var(--muted);
    font-size: 0.78rem;
}

.awaiting-classification,
.liquidation-obligation {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}

.liquidation-obligation {
    color: #8a5300;
    font-weight: 700;
}

.request-type-chip--unclassified {
    background: #fff4e5;
    border: 1px solid #f0c48a;
    color: #8a5300;
}

.finance-alert-info {
    background: #eef4fb;
    border-color: #bcd4ee;
    border-left-color: #2563eb;
    color: #1e3a5f;
    font-weight: 600;
}

.finance-alert-ok {
    background: #edf9f0;
    border-color: #b7e3c4;
    border-left-color: var(--success, #2e9e5b);
    color: #1c5e34;
}

/* CA liquidation: per-line validation status + settlement confirmation panel */
.liq-line-status {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.55rem;
    white-space: nowrap;
}
.liq-line-status-pending { background: #fff3d6; color: #6b470b; }
.liq-line-status-validated { background: #e2f5e9; color: #1c5e34; }
.liq-line-status-returned { background: #fde5e5; color: #8a2020; }
.liq-line-note { color: #8a2020; font-size: 0.78rem; margin-top: 0.2rem; }
.liq-line-comment-edit { align-items: center; display: flex; gap: 0.35rem; }
.liq-encode-settlement { margin: 0.75rem 0; }
.liq-encode-settlement-fields {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.status-chip {
    align-items: center;
    background: #eef4f0;
    border: 1px solid #d8e4dc;
    border-radius: 999px;
    color: #365046;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1;
    min-height: 1.65rem;
    padding: 0.35rem 0.7rem;
    text-transform: capitalize;
}

.status-submitted,
.status-held,
.status-pending {
    background: #fff7e6;
    border-color: #f3d59a;
    color: #7a4f08;
}

.status-approved,
.status-released,
.status-replenished,
.status-completed {
    background: #e4f6ed;
    border-color: #b8e6ce;
    color: var(--success);
}

.status-vouched {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.status-waiting-for-employee {
    background: #e8f3ff;
    border-color: #b7d6f2;
    color: #174a72;
}

.status-settlement-confirmation {
    background: #f3efff;
    border-color: #d8c8ff;
    color: #5b21b6;
}

.status-ready-to-settle {
    background: #e8f7ee;
    border-color: #b7e3c8;
    color: #166534;
}

.status-ready-full-return {
    background: #e6f7f5;
    border-color: #a7ddd7;
    color: #115e59;
}

.status-cash-released {
    background: #e8f3ff;
    border-color: #b7d6f2;
    color: #174a72;
}

.status-liquidated,
.status-fully-returned,
.status-voided {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.vouch-info {
    font-size: 0.85rem;
    color: var(--muted);
    align-self: center;
}

.status-rejected,
.status-returned,
.status-returned-for-correction {
    background: #fff0ee;
    border-color: #f5c5bf;
    color: var(--danger);
}


/* Accounting liquidation review */
.accounting-review-workspace {
    border-left: 3px solid var(--navy);
    overflow: visible;
}

.accounting-review-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
}

.accounting-review-details,
.accounting-review-totals {
    display: grid;
    gap: 0.75rem;
}

.accounting-review-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accounting-review-details > div,
.accounting-review-totals > div {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 0;
    padding: 0.8rem 0.9rem;
}

.accounting-review-details span,
.accounting-review-totals span,
.accounting-decision-record > span {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.accounting-review-details strong,
.accounting-review-totals strong {
    display: block;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.accounting-review-totals > div {
    border-left: 3px solid var(--accent);
}

.accounting-review-totals .review-total-alert {
    background: #fff4f2;
    border-color: #efb8b2;
    border-left-color: var(--danger);
    color: var(--danger);
}

.accounting-review-lines {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 1rem;
    overflow: hidden;
}

.accounting-request-context {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-top: 1rem;
    overflow: hidden;
}

.accounting-request-context-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accounting-request-context-grid > div {
    border-right: 1px solid var(--border);
    min-width: 0;
    padding: 0.85rem 1rem;
}

.accounting-request-context-grid > div:nth-child(3) {
    border-right: 0;
}

.accounting-request-context-grid span {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.accounting-request-context-grid strong {
    display: block;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.accounting-request-context-grid .accounting-request-purpose {
    border-right: 0;
    border-top: 1px solid var(--border);
    grid-column: 1 / -1;
}

.accounting-review-section-heading {
    align-items: center;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1rem;
}

.accounting-review-section-heading h3 {
    font-size: 0.95rem;
    margin: 0;
}

.accounting-review-section-heading span {
    color: var(--muted);
    font-size: 0.8rem;
}

.accounting-review-lines-table {
    overflow-x: auto;
}

.accounting-review-lines table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.accounting-review-lines th,
.accounting-review-lines td {
    border-bottom: 1px solid var(--border);
    padding: 0.7rem 0.8rem;
    text-align: left;
}

.accounting-review-lines th {
    background: #fbfcfb;
    font-size: 0.76rem;
}

.accounting-review-lines tbody tr:last-child td {
    border-bottom: 0;
}

.accounting-review-decision {
    align-items: end;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, 1fr) auto;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.accounting-feedback-field {
    width: 100%;
}

.review-feedback-note {
    color: var(--muted);
    font-size: 0.78rem;
    margin: 0.35rem 0 0;
}

.accounting-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.accounting-decision-record {
    background: var(--surface-muted);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}

.accounting-decision-record strong {
    display: block;
    margin-top: 0.4rem;
}

.accounting-docs-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.25rem;
}

.accounting-docs-section-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .accounting-review-summary,
    .accounting-review-decision {
        grid-template-columns: 1fr;
    }

    .accounting-review-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounting-request-context-grid {
        grid-template-columns: 1fr;
    }

    .accounting-request-context-grid > div,
    .accounting-request-context-grid > div:nth-child(3) {
        border-bottom: 1px solid var(--border);
        border-right: 0;
    }

    .accounting-request-context-grid .accounting-request-purpose {
        border-bottom: 0;
        border-top: 0;
        grid-column: auto;
    }

    .accounting-review-actions {
        justify-content: flex-start;
    }

    .accounting-docs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .accounting-review-details {
        grid-template-columns: 1fr;
    }

    .accounting-review-lines-table {
        overflow: visible;
    }

    .accounting-review-lines table,
    .accounting-review-lines tbody,
    .accounting-review-lines tr,
    .accounting-review-lines td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .accounting-review-lines thead {
        display: none;
    }

    .accounting-review-lines tr {
        border-bottom: 1px solid var(--border);
        padding: 0.55rem 0;
    }

    .accounting-review-lines tbody tr:last-child {
        border-bottom: 0;
    }

    .accounting-review-lines td {
        border: 0;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: 7rem minmax(0, 1fr);
        padding: 0.4rem 0.8rem;
        text-align: left;
    }

    .accounting-review-lines td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .accounting-review-lines td.text-end {
        text-align: left !important;
    }

    .accounting-review-actions .rz-button {
        flex: 1 1 100%;
    }
}

/* Proof attachments panel */
.proof-section {
    border-left: 3px solid var(--accent);
}

.proof-panel {
    margin-top: 1.25rem;
}

.proof-panel-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.proof-panel-title {
    align-items: center;
    color: var(--ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 800;
    gap: 0.4rem;
}

.proof-count {
    color: var(--muted);
    font-size: 0.78rem;
}

.proof-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.proof-thumb {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 0.3rem;
    overflow: hidden;
    padding: 0.5rem;
    text-align: center;
    width: 140px;
}

.proof-thumb-img {
    border-radius: 5px;
    height: 80px;
    object-fit: cover;
    transition: opacity 0.15s;
    width: 100%;
}

.proof-thumb-img:hover {
    opacity: 0.85;
}

.proof-thumb-doc {
    align-items: center;
    background: var(--surface-muted, #f3f4f6);
    border-radius: 5px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    font-weight: 800;
    gap: 0.3rem;
    height: 80px;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.15s;
}

.proof-thumb-doc:hover {
    background: #e5e7eb;
    color: var(--ink);
}

.proof-thumb-name {
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proof-thumb-size {
    color: var(--muted);
    font-size: 0.65rem;
}

.proof-thumb-actions {
    display: grid;
    gap: 0.35rem;
}

.proof-thumb-actions a {
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
}

.proof-action-view {
    background: var(--accent);
    color: var(--accent-on, #fff);
}

.proof-action-view:hover {
    background: var(--accent-strong);
    color: var(--accent-on, #fff);
}

.proof-action-download {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    color: var(--muted);
}

.proof-action-download:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.proof-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: border-color 0.15s, background 0.15s;
}

.proof-upload-area:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.proof-upload-actions {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof-upload-option {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.6rem;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.proof-upload-option:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.proof-upload-option.is-disabled {
    cursor: wait;
    opacity: 0.65;
}

.proof-camera-option {
    /* Deliberately the inverse of the page: an ink fill with the page's own ground as its text.
       Pinning the text to white worked only while ink was dark - on a dark theme ink IS the light
       colour, and the button became white on near-white. */
    background: var(--ink);
    border-color: var(--ink);
    color: var(--app-bg);
}

.proof-camera-option:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on, #fff);
}

.camera-capture-backdrop {
    align-items: center;
    background: rgba(17, 24, 39, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1100;
}

.camera-capture-dialog {
    background: var(--surface, #fff);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    width: min(680px, 100%);
}

.camera-capture-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1rem 0.85rem;
}

.camera-capture-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.camera-capture-header p {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

.camera-icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.camera-preview {
    aspect-ratio: 4 / 3;
    background: #111827;
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.camera-preview video {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.camera-error {
    background: rgba(127, 29, 29, 0.92);
    color: #fff;
    font-size: 0.85rem;
    inset: auto 1rem 1rem;
    padding: 0.75rem;
    position: absolute;
    text-align: center;
}

.camera-capture-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.85rem 1rem 1rem;
}

.camera-primary-button,
.camera-secondary-button {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
}

.camera-primary-button {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--accent-on, #fff);
}

.camera-primary-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.camera-secondary-button {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    color: var(--ink);
}

.proof-upload-hint {
    color: var(--muted);
    font-size: 0.74rem;
    margin: 0.6rem 0 0;
    text-align: center;
}

.proof-hint {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0.75rem 0 0;
}

.slip-convert-summary {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted, rgba(0, 0, 0, 0.02));
    padding: 0.75rem 1rem;
    margin: 0 0 0.75rem;
    max-width: 380px;
}

.slip-convert-summary h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.slip-convert-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.86rem;
    padding: 0.2rem 0;
}

.slip-convert-row span {
    color: var(--muted);
}

.slip-convert-row--total {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    font-weight: 600;
}

.slip-convert-note {
    color: var(--muted);
    font-size: 0.78rem;
    margin: 0.5rem 0 0;
}

.slip-convert-blocker {
    color: var(--danger, #b91c1c);
    font-size: 0.8rem;
    margin: 0.4rem 0 0;
}

.slip-convert-blocker-inline {
    color: var(--danger, #b91c1c);
    font-weight: 600;
}

.slip-convert-ok {
    color: var(--success, #15803d);
    font-weight: 600;
}

@media (max-width: 520px) {
    .proof-upload-actions {
        grid-template-columns: 1fr;
    }

    .camera-capture-backdrop {
        padding: 0;
    }

    .camera-capture-dialog {
        border-radius: 0;
        height: 100vh;
        max-height: none;
        width: 100%;
    }

    .camera-preview {
        aspect-ratio: auto;
        height: calc(100vh - 154px);
    }

    .camera-capture-actions > button {
        flex: 1 1 0;
    }
}

@media (max-width: 640px) {
    .proof-gallery {
        gap: 0.5rem;
    }

    .proof-thumb {
        width: 90px;
    }

    .proof-thumb-img {
        height: 64px;
    }
}

.empty-state {
    background: var(--surface-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    padding: 1rem;
    text-align: center;
}

.home-hero {
    background: linear-gradient(135deg, var(--surface, #fff) 0%, var(--accent-soft, #ecf7f1) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.home-hero h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin: 0;
}

.home-hero p {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: 680px;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.rz-card,
.rz-datatable,
.rz-tabs {
    border-radius: var(--radius) !important;
}

.rz-data-grid,
.rz-datatable {
    border: 1px solid var(--border) !important;
}

.rz-grid-table thead th,
/* Radzen wraps the header label in its own span and colours it from ITS theme, so setting the
   colour on the th alone left light theme text sitting on this light header. */
.rz-grid-table thead th .rz-column-title-content {
    background: var(--surface-muted) !important;
    color: var(--ink) !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    text-transform: uppercase;
}

.rz-grid-table thead th .rz-column-title-content {
    background: transparent !important;
}

.rz-button.rz-primary {
    background-color: var(--accent) !important;
}

.rz-button {
    border-radius: 7px !important;
    font-weight: 750 !important;
}

@media (max-width: 900px) {
    /* page header wraps instead of blocks, keeps actions inline */
    .page-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .page-header h1 {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .content {
        padding-top: 1.1rem;
        padding-bottom: 1.5rem;
    }

    .page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .action-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .data-panel {
        padding: 0.75rem;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.replenishment-selection-table { overflow-x: auto; }
.replenishment-selection-cards { display: none; }
.replenishment-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}
.replenishment-review-list { display: grid; gap: 14px; }
.replenishment-review-card {
    border: 1px solid var(--border, #d8e0dc);
    border-radius: 6px;
    background: var(--surface, #fff);
    overflow: hidden;
}
.replenishment-review-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    background: #f5f8f6;
    cursor: pointer;
}
.replenishment-review-card > summary div { display: grid; gap: 3px; }
.replenishment-review-card > h3,
.replenishment-review-card > .finance-alert { margin: 18px; }
.replenishment-particulars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}
.replenishment-particular { display: grid; gap: 4px; min-width: 0; }
.replenishment-particular span {
    color: #65736d;
    font-size: .78rem;
    text-transform: uppercase;
}
.replenishment-particular strong { overflow-wrap: anywhere; }
.review-span-2 { grid-column: span 2; }
.replenishment-review-card .accounting-docs-grid { padding: 0 18px 18px; }
.replenishment-reviewed-control {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 18px 18px;
    font-weight: 700;
}
.replenishment-review-actions {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 20px;
    margin-top: 20px;
}
.replenishment-transaction-card {
    border: 1px solid var(--border, #d8e0dc);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 8px;
}
.replenishment-transaction-card > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
@media (max-width: 900px) {
    .replenishment-selection-table { display: none; }
    .replenishment-selection-cards { display: grid; gap: 12px; }
    .replenishment-review-grid { grid-template-columns: 1fr; }
    .replenishment-particulars-grid { grid-template-columns: 1fr; }
    .review-span-2 { grid-column: auto; }
    .replenishment-review-actions { grid-template-columns: 1fr; }
    .replenishment-review-card > summary { align-items: flex-start; }
}

/* History filter bar (View History) */
.history-bar {
    margin-bottom: 0.85rem;
}

.history-bar-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.history-range-chip {
    background: var(--accent-soft, #e7f4ee);
    border-radius: 999px;
    color: var(--accent, var(--accent, #157a55));
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.8rem;
}

.history-total {
    color: var(--muted, var(--muted, #64748b));
    font-size: 0.8rem;
    font-weight: 600;
}

.history-filter-panel {
    background: var(--surface-muted, #f6f8f7);
    border: 1px solid var(--border, var(--border, #e2e8f0));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.7rem;
    padding: 0.9rem 1rem;
}

.history-filter-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.history-search-box {
    flex: 1;
    min-width: 220px;
}

@media (max-width: 640px) {
    .history-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Request status timeline */
.request-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0.75rem 0 1rem;
}

.timeline-step {
    align-items: flex-start;
    display: flex;
    flex: 1;
    gap: 0.55rem;
    min-width: 150px;
    padding-right: 0.75rem;
    position: relative;
}

.timeline-step:not(:last-child)::after {
    background: var(--border, #e2e8f0);
    content: "";
    height: 2px;
    left: 1.6rem;
    position: absolute;
    right: 0.4rem;
    top: 0.65rem;
}

.timeline-step--done:not(:last-child)::after {
    background: var(--accent, #157a55);
}

.timeline-marker {
    align-items: center;
    background: var(--surface, #fff);
    border: 2px solid var(--border, var(--border, #e2e8f0));
    border-radius: 999px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    height: 1.4rem;
    justify-content: center;
    position: relative;
    width: 1.4rem;
    z-index: 1;
}

.timeline-step--done .timeline-marker {
    background: var(--accent, #157a55);
    border-color: var(--accent, #157a55);
}

.timeline-step--current .timeline-marker {
    border-color: var(--accent, #157a55);
    box-shadow: 0 0 0 4px rgba(21, 122, 85, 0.15);
}

.timeline-step--stopped .timeline-marker {
    background: #dc2626;
    border-color: #dc2626;
}

.timeline-step-body {
    display: grid;
    gap: 0.1rem;
    padding-top: 0.05rem;
}

.timeline-step-body strong {
    font-size: 0.82rem;
}

.timeline-step--pending .timeline-step-body strong {
    color: var(--muted, var(--muted, #64748b));
    font-weight: 600;
}

.timeline-step--current .timeline-step-body strong {
    color: var(--accent, var(--accent, #157a55));
}

.timeline-step--stopped .timeline-step-body strong {
    color: var(--danger, #dc2626);
}

.timeline-step-body span {
    color: var(--muted, var(--muted, #64748b));
    font-size: 0.72rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .request-timeline {
        flex-direction: column;
        gap: 0.65rem;
    }

    .timeline-step:not(:last-child)::after {
        display: none;
    }
}

/* Clickable metric cards (dashboard drill-down) */
.metric-card--clickable {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.metric-card--clickable:hover {
    border-color: var(--accent, #157a55);
    box-shadow: 0 10px 28px rgba(13, 49, 38, 0.12);
    transform: translateY(-2px);
}

.metric-card--active {
    border-color: var(--accent, #157a55);
    box-shadow: inset 0 0 0 1px var(--accent, #157a55);
}

.metric-card--active .metric-label {
    color: var(--accent, var(--accent, #157a55));
}

/* The clickable stage filters are real <button>s: strip the UA button chrome so they match the
   card look, and give them a clear keyboard focus ring. */
button.metric-card {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    display: block;
}

.metric-card--clickable:focus-visible {
    outline: 3px solid var(--accent, #157a55);
    outline-offset: 2px;
}

/* Liquidation monitoring dashboard */
/* Fluid metric grid: fits the number of cards (e.g. 4) instead of forcing a 3-column row,
   which would leave a lone card stranded on a second row. */
.monitor-metric-grid,
.metric-grid--fluid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.monitor-card-overdue .metric-value {
    color: var(--danger, #dc2626);
}

.monitor-days {
    font-weight: 700;
}

.monitor-days--overdue {
    background: #fee2e2;
    border-radius: 999px;
    color: var(--danger, #dc2626);
    font-weight: 900;
    padding: 0.2rem 0.6rem;
}

.monitor-stage {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

.monitor-stage--awaitingliquidation {
    background: #e0f2fe;
    color: #0369a1;
}

.monitor-stage--overdue {
    background: #fee2e2;
    color: var(--danger, #dc2626);
}

.monitor-stage--underreview {
    background: #fef9c3;
    color: #a16207;
}

.monitor-stage--needscorrection {
    background: #ffedd5;
    color: #c2410c;
}

.monitor-stage--cleared {
    background: #dcfce7;
    color: #15803d;
}

.monitor-stage--rejected {
    background: var(--surface-muted, #f3f4f6);
    color: var(--muted, #4b5563);
}

/* Request type (Petty Cash vs Cash Advance) */
.request-type-label {
    display: block;
    color: var(--muted, var(--muted, #64748b));
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.request-type-hint {
    color: var(--muted, var(--muted, #64748b));
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}

.request-type-chip {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.request-type-chip--petty_cash {
    background: #f1f5f9;
    color: #475569;
}

.request-type-chip--cash_advance {
    background: #ede9fe;
    color: #6d28d9;
}

.request-type-override-note {
    color: #c2410c;
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

/* Returned-for-correction request status chip */
.status-returned_for_correction {
    background: #ffedd5;
    border-color: #fdba74;
    color: #c2410c;
}

/* Draft request status chip */
.status-draft {
    background: #eef1f4;
    border-color: #cbd5e1;
    color: #475569;
}

/* Highlighted metric card (e.g. outstanding CA liquidation) */
.metric-card--accent {
    background: #fff8eb;
    border-color: #efd095;
}

.metric-card--accent .metric-value {
    color: var(--warning);
}

/* History filter: include replenished toggle */
.history-include-replenished {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.5rem;
}

/* Cashier queue filtered total */
.queue-total {
    background: var(--accent-soft);
    border: 1px solid #bfe4d2;
    border-radius: var(--radius);
    display: grid;
    gap: 0.1rem;
    justify-items: end;
    min-width: 180px;
    padding: 0.6rem 0.95rem;
    text-align: right;
}

.queue-total-label {
    color: var(--accent-strong);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.queue-total-value {
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.queue-total-note {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Replenishment period summary report */
.period-summary-controls {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.period-summary-table .period-summary-amount {
    text-align: right;
    white-space: nowrap;
}

.period-summary-table .period-summary-subtotal td {
    background: var(--surface-muted, #f8faf7);
    font-weight: 800;
}

.period-summary-table .period-summary-expenses td {
    border-top: 2px solid #111827;
    font-weight: 850;
}

.period-summary-table .period-summary-grand td {
    font-weight: 850;
}

@media print {
    .period-summary-controls,
    .print-toolbar,
    .payroll-cutoff-warning {
        display: none;
    }
}

/* PCF Summary for Payroll */
.payroll-summary-head {
    margin-bottom: 1.25rem;
}

.payroll-summary-head h1 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    text-align: center;
}

.payroll-summary-head p {
    margin: 0.1rem 0;
    font-size: 0.9rem;
}

.payroll-summary-table th,
.payroll-summary-table td {
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
}

.payroll-summary-table .payroll-amount {
    text-align: right;
    white-space: nowrap;
}

.payroll-summary-table .payroll-voucher-start td {
    border-top: 1px solid var(--border, #cbd3da);
}

.payroll-summary-table .payroll-category td {
    font-weight: 800;
    background: #eef2f5;
    border-top: 1px solid #333;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.payroll-summary-table .payroll-subtotal td {
    font-weight: 700;
    border-top: 1px solid var(--border, #cbd3da);
}

.payroll-summary-table .payroll-grand td {
    font-weight: 850;
    border-top: 2px solid #333;
}

.payroll-summary-meta {
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.8rem;
}

/* The cutoff is the later of date needed and date released, so a release can sit outside the week
   reporting it. Say which in words on the row — payroll deducts from this document, and a symbol is
   too easy to miss. Prints in black and white, so the categories differ by weight and border too. */
.payroll-summary-table .payroll-timing {
    font-size: 0.78rem;
    white-space: nowrap;
}

.payroll-summary-table .payroll-timing-releasedearly,
.payroll-summary-table .payroll-timing-releasedlate {
    font-weight: 700;
    border: 1px solid #333;
    border-radius: 0.2rem;
    padding: 0 0.25rem;
}

.payroll-summary-table .payroll-timing-withincutoff {
    color: var(--muted);
}

.payroll-summary-meta .payroll-outside-note {
    font-weight: 600;
}

.payroll-cutoff-warning {
    border-left: 4px solid #b8860b;
    margin-bottom: 0.9rem;
}

.payroll-basis {
    font-weight: 400;
    font-size: 0.85em;
}

/* Temporary cash has no account coding until it converts; the placeholder reads as absent
   information rather than as a value. */
.coding-pending {
    color: var(--muted);
    font-style: italic;
    font-weight: 500;
}

/* Converted slips drop out of the cashier's active list; this says where they went. */
.slip-archive-note {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* Replenishment account summary report */
.account-summary-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.account-summary-head h1 {
    font-size: 1.15rem;
    margin: 0;
}

.account-summary-head h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.2rem 0;
}

.account-summary-head p {
    color: var(--muted);
    margin: 0.1rem 0 0;
}

.account-summary-subref {
    font-size: 0.82rem;
}

.account-summary-table {
    border-collapse: collapse;
    margin: 0 auto;
    width: min(560px, 100%);
}

.account-summary-table td {
    padding: 0.3rem 0.5rem;
    vertical-align: bottom;
}

.account-summary-amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.account-summary-name {
    padding-left: 1.75rem;
}

.account-summary-section td {
    font-weight: 800;
}

.account-summary-total td {
    border-top: 1px solid var(--ink);
    font-weight: 800;
}

.account-summary-grand td {
    font-weight: 850;
    padding-top: 0.5rem;
}

.account-summary-boxed {
    border: 1.5px solid var(--ink);
    padding: 0.3rem 0.6rem;
}

.account-summary-meta {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 1rem auto 0;
    text-align: center;
}

.account-summary-signatures {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3rem;
    text-align: center;
}

.account-summary-sign-line {
    border-bottom: 1px solid var(--ink);
    margin-bottom: 0.3rem;
    min-height: 1.4rem;
    font-weight: 700;
}

.account-summary-signatures span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

/* Cashier replenishment additional funds */
.replenishment-additional-funds {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.replenishment-additional-hint {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.replenishment-additional-hint strong {
    color: var(--ink);
}

/* Accounting review: transaction search */
.replenishment-review-search {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.replenishment-review-search-input {
    max-width: 440px;
    width: 100%;
}

.replenishment-review-search-count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Accounting review: adjustable additional funds */
.replenishment-additional-review {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

/* Accounting replenishment review progress */
.replenishment-review-progress {
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

/* Voided request status chip */
.status-voided {
    background: var(--surface-muted, #f3f4f6);
    border-color: var(--border, #d1d5db);
    color: var(--muted, #6b7280);
    text-decoration: line-through;
}

/* Temporary cash returned in full with nothing spent. A settled, correct outcome - not an error -
   so it reads as closed rather than struck through like a void. */
.status-fully_returned {
    background: #eef2f7;
    border-color: #c7d4e3;
    color: #41618a;
}

/* Compact cash release voucher (half-page slip) */
.voucher-compact {
    font-size: 9.5px;
    max-width: 520px;
    padding: 0.5rem 0.65rem;
}

.voucher-head {
    align-items: center;
    border-bottom: 2px solid #111827;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    margin-bottom: 0.28rem;
    padding-bottom: 0.2rem;
}

.voucher-compact h1 {
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
}

.voucher-no-block {
    text-align: right;
}

.voucher-no-block span {
    color: var(--muted, #4b5563);
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voucher-no-block strong {
    font-size: 1.15rem;
    font-weight: 800;
}

.voucher-amount {
    align-items: center;
    border: 2px solid #111827;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    padding: 0.22rem 0.5rem;
}

.voucher-amount span {
    color: var(--ink, #111827);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voucher-amount strong {
    font-size: 1rem;
    font-weight: 850;
}

.voucher-grid {
    column-gap: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
}

.vrow {
    align-items: baseline;
    border-bottom: 1px dotted var(--border, #d1d5db);
    display: flex;
    gap: 0.4rem;
    padding: 0.07rem 0;
}

.vrow span {
    color: var(--muted, #4b5563);
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: 95px;
}

.vrow strong {
    font-size: 0.8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.voucher-purpose {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
    font-size: 0.68rem;
    margin-top: 0.25rem;
    padding: 0.18rem 0.4rem;
}

.voucher-notes {
    margin-top: 0.3rem;
}

.voucher-purpose span {
    color: var(--muted, #4b5563);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.voucher-signatures {
    gap: 0.8rem;
    margin-top: 0.75rem;
}

.voucher-signatures .signature-line {
    font-size: 0.64rem;
    padding-top: 0.22rem;
}

/* Temporary cash slip.

   A distinct document, not a restyled one. It reserves money that has to come back, while a petty
   cash voucher pays an expense that is already gone - and the cashier holding both was reading the
   same title, the same size and the same black rule on each. It is deliberately narrower and
   smaller so the two are told apart across a desk, before either is read. */
.voucher-temporary {
    border-left: 5px solid #b45309;
    font-size: 10px;
    max-width: 420px;
    padding: 0.55rem 0.7rem;
}

.voucher-temporary .voucher-head {
    border-bottom-color: #b45309;
}

/* One column, not two. Halving the width while keeping the two-column grid wrapped a payee name
   over three lines and made the "smaller" document the TALLER one on the page. A single column at
   this width fits each value on its own line and the slip ends up genuinely shorter. */
.voucher-temporary .voucher-grid {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr);
}

.voucher-temporary .vrow span {
    min-width: 6.5rem;
}

/* Detail rows and the released-amount block, both stepped down on the slip only.

   The amount stays clearly the largest thing on the document - it is what the person signing for
   the money checks first - but at 1.35rem against 10px body text it was shouting, and the row
   labels were set larger than the slip needed. Both shrink; the gap between them is kept. */
.voucher-temporary .vrow span,
.voucher-temporary .vrow strong {
    font-size: 0.66rem;
}

.voucher-temporary .voucher-purpose {
    font-size: 0.66rem;
}

.voucher-temporary .voucher-amount {
    padding: 0.25rem 0.55rem;
}

.voucher-temporary .voucher-amount span {
    font-size: 0.7rem;
}

.voucher-temporary .voucher-amount strong {
    font-size: 1rem;
}

/* Tighter spacing on the slip only.

   With the type stepped down, the padding and margins inherited from the full-size voucher were
   leaving more air between rows than the rows themselves occupy. Everything closes up: row padding,
   the gaps around the banner, purpose and notes boxes, and the run-up to the signatures - which was
   1.25rem of empty page on a document this short. */
.voucher-temporary {
    padding: 0.45rem 0.6rem;
}

.voucher-temporary .voucher-head {
    margin-bottom: 0.3rem;
    padding-bottom: 0.22rem;
}

.voucher-temporary .voucher-grid {
    row-gap: 0;
}

.voucher-temporary .vrow {
    padding: 0.08rem 0;
}

.voucher-temporary .voucher-purpose {
    margin-top: 0.25rem;
    padding: 0.18rem 0.4rem;
}

.voucher-temporary .voucher-amount {
    margin-top: 0.3rem;
    padding: 0.22rem 0.5rem;
}

.voucher-temporary .voucher-signatures {
    gap: 0.7rem;
    margin-top: 0.7rem;
}

.voucher-temporary .voucher-signatures .signature-line {
    font-size: 0.66rem;
    padding-top: 0.22rem;
}

.voucher-temporary h1 {
    color: #b45309;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

/* The header is a space-between flex row, so with no gap the title and the voucher number met in
   the middle and touched once the slip narrowed. */
.voucher-temporary .voucher-head {
    gap: 0.6rem;
}

@media print {
    .voucher-compact {
        font-size: 9.5px;
        max-width: 5.6in;
        padding: 0.12in;
    }

    /* Fills the quarter sheet the @page rule selects, edge to edge. The page margin is the only
       margin - anything here would be a second one inside it, which is what left the slip sitting
       away from the left edge with the rest of the sheet blank. */
    /* A FIXED quarter-sheet width, not 100%.

       The @page size rule below is a request the print path is free to ignore, and when it is
       ignored the page is Letter - so width:100% filled a full 8.5in sheet. A fixed width lands the
       slip in the top-left quarter of an ordinary sheet, ready to be cut, and still fills the page
       exactly when the smaller paper IS honoured. Correct either way, dependent on neither. */
    .voucher-temporary {
        border-left-width: 3px;
        /* Padding and the left rule sit outside the box without this, pushing it past the width. */
        box-sizing: border-box;
        font-size: 8px;
        margin: 0;
        max-width: 3.93in;
        padding: 0 0 0 0.06in;
        width: 3.93in;
    }

    /* 4.25in less the page margins leaves about 3.9in, so the label column has to give. */
    .voucher-temporary .vrow span {
        min-width: 4.6rem;
    }

    .voucher-temporary .voucher-signatures {
        gap: 0.12in;
        margin-top: 0.22in;
    }

    .voucher-signatures {
        margin-top: 0.45in;
    }
}

/* Attachment remove button + full filename */
.proof-action-remove {
    background: none;
    border: none;
    color: var(--danger, #dc2626);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0;
}

.proof-action-remove:hover {
    text-decoration: underline;
}

.proof-action-remove:disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}

.proof-thumb-name--full {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Pending file list on request/liquidation forms (before upload) */
.pending-files {
    border: 1px solid var(--border, var(--border, #dce5de));
    border-radius: var(--radius, 8px);
    overflow: hidden;
}

.pending-files-head {
    align-items: center;
    background: var(--surface-muted, var(--surface-muted, #f8faf7));
    border-bottom: 1px solid var(--border, var(--border, #dce5de));
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.pending-files-head span {
    color: var(--muted, var(--muted, #65746e));
    font-size: 0.78rem;
    font-weight: 800;
}

.pending-clear {
    background: none;
    border: none;
    color: #b42318;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0;
}

.pending-clear:hover {
    text-decoration: underline;
}

.pending-file {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
}

.pending-file:not(:last-child) {
    border-bottom: 1px dotted var(--border, var(--border, #dce5de));
}

.pending-file-name {
    flex: 1;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.pending-file-size {
    color: var(--muted, var(--muted, #65746e));
    font-size: 0.74rem;
    white-space: nowrap;
}

.pending-file-remove {
    background: none;
    border: none;
    color: #b42318;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
}

.pending-file-remove:hover {
    text-decoration: underline;
}

/* HRIS employee import row (Admin > Master Data) */
.hris-import {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hris-import-hint {
    font-size: 0.78rem;
    max-width: 560px;
}

/* Replenishment select-all (cards view) */
.replenishment-select-all {
    align-items: center;
    border-bottom: 1px solid var(--border, var(--border, #dce5de));
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
}

/* Monitoring is open to more roles than the review screens are. Rather than a button that leads to
   "You are not authorized", the row says which desk owns the review. */
.monitor-open-blocked {
    color: var(--muted, #6b7280);
    font-size: 0.78rem;
    font-style: italic;
}

/* The obligation is somebody else's. Same shape as the actionable chip so the row still reads at a
   glance, but muted, because there is nothing here for this person to do. */
.liquidation-obligation--other {
    background: none;
    color: var(--muted, #6b7280);
    font-weight: 500;
}

/* Radzen's responsive data grid.

   With Responsive="true" Radzen adds .rz-datatable-reflow and, below 768px, rebuilds each row as a
   stacked card of label/value pairs - which is the only way these ten-column grids are readable on
   a phone.

   What it does NOT do is forget the column widths. A Width set for the desktop table stays on the
   cell, so the widest column - Actions, at 330px - is a fixed 330px box inside a card about 327px
   wide, and its buttons are clipped where nobody can tap them. In a stacked card a pixel column
   width describes nothing, so it is dropped and the buttons are allowed to wrap. */
@media (max-width: 768px) {
    .rz-datatable-reflow td,
    .rz-datatable-reflow th {
        max-width: none !important;
        width: auto !important;
    }

    /* Dropping the width alone was not enough, and neither was unwrapping the cell. Radzen puts the
       value in its OWN span - .rz-cell-data.rz-text-truncate - which carries the nowrap and the
       ellipsis, so the buttons stayed on one line inside a cell that was now free to wrap around
       them. Measured on a 375px screen, the Print button's left edge sat at x=356 and its right at
       439: entirely off the phone, and no amount of scrolling reached it because the page itself
       does not scroll sideways. The span is where the rule has to land. */
    .rz-datatable-reflow td,
    .rz-datatable-reflow td .rz-cell-data {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .rz-datatable-reflow td .rz-button {
        margin: 2px 4px 2px 0;
    }
}

/* ---------------------------------------------------------------------------
   Printed documents are paper, in every theme.

   The theme works by redefining tokens, so anything reading a token follows the
   theme automatically - which is exactly wrong for a voucher or a liquidation
   report. Those are printed on white paper with black ink, and a dark voucher
   would either waste toner or print as an unreadable pale-on-pale sheet.

   So the document roots pin the tokens back to the light palette for their whole
   subtree, on screen AND on paper. The screen around them may be dark; the sheet
   is not. The literal colours below are deliberate duplicates of the light :root
   values - a var() here would resolve to the dark palette on a dark theme, which
   is the bug this block exists to prevent.
   --------------------------------------------------------------------------- */
.print-document,
.liq-report,
.voucher-compact {
    --app-bg: #f4f7f4;
    --surface: #ffffff;
    --surface-muted: #f7faf7;
    --ink: #14251f;
    --muted: #5c6b65;
    --border: #dce5de;
    --accent: #0d6b53;
    --accent-strong: #0a5442;
    --accent-soft: #e6f2ee;
    --navy: #1f3b57;
    --shadow-soft: none;
    --shadow-card: none;
    background: #ffffff;
    color: #14251f;
    color-scheme: light;
}

@media print {
    /* The sheet, and the ground the browser paints behind it. */
    html,
    body {
        background: #ffffff !important;
        color: #14251f !important;
        color-scheme: light !important;
    }

    .print-document,
    .liq-report,
    .voucher-compact {
        background: #ffffff !important;
        color: #14251f !important;
    }
}

/* Theme switch in the top row. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media print {
    .theme-toggle {
        display: none !important;
    }
}

/* Whether a request's release slip has been printed. Tokens only, so it reads in both themes. */
.print-badge {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 8px;
    white-space: nowrap;
}

.print-badge--printed {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.print-badge--pending {
    background: var(--surface-muted);
    border-color: var(--warning);
    color: var(--warning);
}

.request-card-badges {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Accounting: the cashier fund's recorded balance, for counting the drawer against. */
.fund-position {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
}

.fund-position-header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}

.fund-position-header h3 { font-size: 1rem; margin: 0; }
.fund-position-header span { color: var(--muted); font-size: 0.85rem; }

.fund-position-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.fund-position-figure {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 2px;
    padding: 10px 12px;
}

.fund-position-figure span { color: var(--muted); font-size: 0.78rem; }
.fund-position-figure strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.fund-position-figure small { color: var(--muted); font-size: 0.72rem; }
.fund-position-figure--key { border-color: var(--accent); }

.fund-count {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.fund-variance {
    border-radius: 999px;
    font-weight: 700;
    padding: 4px 12px;
}

.fund-variance--ok { background: var(--accent-soft); color: var(--accent); }
.fund-variance--off { background: var(--surface); border: 1px solid var(--danger); color: var(--danger); }
.fund-count-note { color: var(--muted); flex-basis: 100%; font-size: 0.78rem; }

.fund-count-table td:last-child { min-width: 2.5in; }

/* The content region takes focus after a navigation so the keyboard and screen readers follow the
   page change. It is not a control, so it gets no focus ring when focused programmatically - but a
   keyboard user who tabs to it still does. */
#main-content:focus {
    outline: none;
}

#main-content:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Search above a master-data list. */
.master-search {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 10px;
}

.master-search .rz-textbox {
    min-width: 18rem;
}

.master-search-count {
    color: var(--muted);
    font-size: 0.8rem;
}