/* Treasury global stylesheet. Loaded once by each full-page entry point.
   AJAX fragments inherit it from the app shell. Keep page rules scoped to their
   component classes; authentication rules use zero-specificity :where() scopes.
   Static sizing utilities replace inline styles; runtime state stays in JavaScript. */

/* Self-hosted Manrope, including Latin Extended for the peso sign. */

/* cyrillic-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shared font and document defaults. */
:root {
    --rc-font-family: "Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --bs-font-sans-serif: var(--rc-font-family);
    --bs-body-font-family: var(--rc-font-family);
}
body {
    font-family: var(--rc-font-family);
}
button,input,select,textarea {
    font-family: var(--rc-font-family);
}

/* Treasury shell, shared components, monitoring, and report layouts. */
:root:where(.treasury-app) {
    --rc-primary: #6366f1;
    --rc-primary-dark: #4f46e5;
    --rc-primary-deep: #3730a3;
    --rc-primary-soft: #eef2ff;
    --rc-primary-soft-2: #f8f8ff;
    --rc-nav-top: #3b258a;
    --rc-nav-mid: #5b43d6;
    --rc-nav-bottom: #2563eb;
    --rc-bg: #f6f7fb;
    --rc-surface: #ffffff;
    --rc-border: #e4e7f0;
    --rc-text: #273142;
    --rc-muted: #70798a;
    --rc-topbar-height: 54px;
    --rc-radius: 12px;
    --rc-shadow: 0 6px 22px rgba(55,48,163,.06);
    --rc-success: #198754;
    --rc-warning: #d99a12;
    --rc-danger: #dc3545;
    --rc-info: #38bdf8;
}
:where(.treasury-app), :where(.treasury-app) * {
    box-sizing: border-box;
}
html:where(.treasury-app),:where(.treasury-app) body {
    height: 100%;
    min-height: 100%;
    background: var(--rc-bg);
    color: var(--rc-text);
    overflow: hidden;
}
:where(.treasury-app) body {
    margin: 0;
    font-family: var(--rc-font-family);
    font-size: .78rem;
}
:where(.treasury-app) body,:where(.treasury-app) button,:where(.treasury-app) input,:where(.treasury-app) select,:where(.treasury-app) textarea {
    font-size: max(.7rem,inherit);
}
:where(.treasury-app) button {
    font-family: var(--rc-font-family);
}

/* =========================================================
   GLOBAL / REUSABLE CLASSES FOR ALL TREASURY SUB-PAGES
   ========================================================= */
:where(.treasury-app) .rc-page, :where(.treasury-app) .rc-card-body {
    padding: 1rem;
}
:where(.treasury-app) .rc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
:where(.treasury-app) .rc-page-heading {
    min-width: 0;
}
:where(.treasury-app) .rc-page-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--rc-text);
}
:where(.treasury-app) .rc-page-subtitle {
    margin: .2rem 0 0;
    color: var(--rc-muted);
    font-size: .76rem;
}
:where(.treasury-app) .rc-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
:where(.treasury-app) .rc-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    box-shadow: var(--rc-shadow);
}
:where(.treasury-app) .rc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--rc-border);
}
:where(.treasury-app) .rc-card-title {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
}
:where(.treasury-app) .rc-card-subtitle {
    margin: .18rem 0 0;
    color: var(--rc-muted);
    font-size: .72rem;
}
:where(.treasury-app) .rc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .8rem;
}
:where(.treasury-app) .rc-kpi-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    box-shadow: var(--rc-shadow);
}
:where(.treasury-app) .rc-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--rc-primary-soft);
    color: var(--rc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 38px;
}
:where(.treasury-app) .rc-kpi-label {
    color: var(--rc-muted);
    font-size: .72rem;
    margin-bottom: .2rem;
}
:where(.treasury-app) .rc-kpi-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.15;
}
:where(.treasury-app) .rc-kpi-meta {
    margin-top: .25rem;
    color: var(--rc-muted);
    font-size: .7rem;
}
:where(.treasury-app) .rc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
:where(.treasury-app) .rc-toolbar-left,:where(.treasury-app) .rc-toolbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
:where(.treasury-app) .rc-control {
    min-height: 34px;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: #fff;
    padding: .38rem .65rem;
    color: var(--rc-text);
}
:where(.treasury-app) .rc-control:focus {
    outline: none;
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 .18rem rgba(99,102,241,.12);
}
:where(.treasury-app) .rc-btn-primary {
    background: var(--rc-primary);
    border-color: var(--rc-primary);
    color: #fff;
}
:where(.treasury-app) .rc-btn-primary:hover,:where(.treasury-app) .rc-btn-primary:focus {
    background: var(--rc-primary-dark);
    border-color: var(--rc-primary-dark);
    color: #fff;
}
:where(.treasury-app) .rc-btn-soft {
    background: var(--rc-primary-soft);
    border: 1px solid #d8dcff;
    color: var(--rc-primary-dark);
}
:where(.treasury-app) .rc-btn-soft:hover {
    background: #e3e6ff;
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .rc-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
}
:where(.treasury-app) .rc-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
:where(.treasury-app) .rc-table thead th {
    background: #f8fafc;
    color: #64717d;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: .62rem .7rem;
    border-bottom: 1px solid var(--rc-border);
}
:where(.treasury-app) .rc-table tbody td {
    padding: .62rem .7rem;
    border-bottom: 1px solid #edf1f4;
    vertical-align: middle;
    font-size: .74rem;
}
:where(.treasury-app) .rc-table tbody tr:last-child td {
    border-bottom: 0;
}
:where(.treasury-app) .rc-table tbody tr:hover {
    background: var(--rc-primary-soft-2);
}
:where(.treasury-app) .rc-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .24rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}
:where(.treasury-app) .rc-badge-primary {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-dark);
}
:where(.treasury-app) .rc-badge-success {
    background: #eaf7ef;
    color: var(--rc-success);
}
:where(.treasury-app) .rc-badge-warning {
    background: #fff7e5;
    color: #a86f00;
}
:where(.treasury-app) .rc-badge-danger {
    background: #fdecef;
    color: var(--rc-danger);
}
:where(.treasury-app) .rc-section-gap {
    margin-top: 1rem;
}
:where(.treasury-app) .rc-text-primary {
    color: var(--rc-primary) !important;
}
:where(.treasury-app) .rc-bg-primary-soft {
    background: var(--rc-primary-soft) !important;
}
:where(.treasury-app) .rc-border-primary {
    border-color: var(--rc-primary) !important;
}

/* =========================================================
   GLOBAL TREASURY SUB-PAGE COMPONENTS
   Shared by Settings and reusable by other Treasury pages.
   Page layouts and shared components are maintained in this global stylesheet.
   ========================================================= */
:where(.treasury-app) .ts-page, :where(.treasury-app) .tm-page {
    padding: .1rem;
}
:where(.treasury-app) .ts-toolbar, :where(.treasury-app) .tm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}
:where(.treasury-app) .ts-toolbar-group, :where(.treasury-app) .tm-toolbar-group {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
:where(.treasury-app) .ts-search {
    position: relative;
    min-width: 220px;
}
:where(.treasury-app) .ts-search i, :where(.treasury-app) .tm-search i {
    position: absolute;
    left: .68rem;
    top: 50%;
    transform: translateY(-50%);
    color: #98a1b2;
    font-size: .72rem;
}
:where(.treasury-app) .ts-search input, :where(.treasury-app) .tm-search input {
    padding-left: 1.9rem;
}
:where(.treasury-app) .ts-table-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 750;
}
:where(.treasury-app) .ts-table-title i {
    color: var(--rc-primary);
}
:where(.treasury-app) .ts-meta {
    font-size: .64rem;
    color: var(--rc-muted);
    margin-top: .08rem;
}
:where(.treasury-app) .ts-code {
    font-family: var(--rc-font-family);
    font-size: .67rem;
    font-weight: 700;
    color: var(--rc-primary-deep);
    background: var(--rc-primary-soft);
    padding: .18rem .36rem;
    border-radius: 6px;
    display: inline-flex;
}
:where(.treasury-app) .ts-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .2rem .42rem;
    border-radius: 999px;
    background: #f3f4f7;
    color: #596579;
    font-size: .63rem;
    font-weight: 700;
    white-space: nowrap;
}
:where(.treasury-app) .ts-chip-warning {
    background: #fff5df;
    color: #a86f00;
}
:where(.treasury-app) .ts-chip-muted {
    background: #eef1f5;
    color: #727d8c;
}
:where(.treasury-app) .ts-action-btn {
    width: 29px;
    height: 29px;
    border: 1px solid var(--rc-border);
    border-radius: 7px;
    background: #fff;
    color: #697586;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .18rem;
}
:where(.treasury-app) .ts-action-btn:hover, :where(.treasury-app) .tm-action-btn:hover {
    background: var(--rc-primary-soft);
    border-color: #d8dcff;
    color: var(--rc-primary);
}
:where(.treasury-app) .ts-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 750;
}
:where(.treasury-app) .ts-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #21a366;
}
:where(.treasury-app) .ts-status.inactive::before {
    background: #a8b0bb;
}
:where(.treasury-app) .ts-form-section, :where(.treasury-app) .tm-modal-section {
    padding: .72rem .8rem;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: #fafbfe;
    margin-bottom: .7rem;
}
:where(.treasury-app) .ts-form-section-title {
    font-size: .7rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .38rem;
}
:where(.treasury-app) .ts-form-section-title i {
    color: var(--rc-primary);
}
:where(.treasury-app) .ts-label {
    font-size: .64rem;
    font-weight: 750;
    color: #596579;
    margin-bottom: .28rem;
}
:where(.treasury-app) .ts-help {
    font-size: .59rem;
    color: #8b95a5;
    margin-top: .22rem;
    line-height: 1.35;
}
:where(.treasury-app) .ts-switch-row {
    min-height: 34px;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: #fff;
    padding: .38rem .55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}
:where(.treasury-app) .ts-note {
    border: 1px solid #dce1ff;
    background: #f6f7ff;
    border-radius: 9px;
    padding: .6rem .7rem;
    color: #555f79;
    font-size: .64rem;
    line-height: 1.45;
}
:where(.treasury-app) .ts-empty-cell {
    text-align: center;
    color: #9aa4b2;
    padding: 2rem !important;
}

/* =========================================================
   GLOBAL TREASURY MONITORING COMPONENTS
   Shared by all Monitoring pages. Pages should compose these
   classes differently instead of repeating local CSS.
   ========================================================= */
:where(.treasury-app) .tm-search {
    position: relative;
    min-width: 225px;
}
:where(.treasury-app) .tm-meta {
    font-size: .62rem;
    color: var(--rc-muted);
    margin-top: .08rem;
    line-height: 1.35;
}
:where(.treasury-app) .tm-code {
    font-family: var(--rc-font-family);
    font-size: .65rem;
    font-weight: 750;
    color: var(--rc-primary-deep);
    background: var(--rc-primary-soft);
    padding: .18rem .36rem;
    border-radius: 6px;
    display: inline-flex;
    white-space: nowrap;
}
:where(.treasury-app) .tm-chip {
    display: inline-flex;
    align-items: center;
    gap: .27rem;
    padding: .2rem .42rem;
    border-radius: 999px;
    background: #f3f4f7;
    color: #596579;
    font-size: .61rem;
    font-weight: 750;
    white-space: nowrap;
}
:where(.treasury-app) .ts-chip-primary, :where(.treasury-app) .tm-chip-primary {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .ts-chip-success, :where(.treasury-app) .tm-chip-success {
    background: #eaf7ef;
    color: #16824b;
}
:where(.treasury-app) .ts-chip-danger, :where(.treasury-app) .tm-chip-danger {
    background: #fdecef;
    color: #bf3340;
}
:where(.treasury-app) .tm-chip-warning {
    background: #fff5df;
    color: #9b6900;
}
:where(.treasury-app) .tm-chip-purple {
    background: #f2edff;
    color: #6d4bd1;
}
:where(.treasury-app) .tm-chip-blue {
    background: #eaf3ff;
    color: #2563eb;
}
:where(.treasury-app) .tm-action-btn {
    width: 29px;
    height: 29px;
    border: 1px solid var(--rc-border);
    border-radius: 7px;
    background: #fff;
    color: #697586;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .16rem;
}
:where(.treasury-app) .tm-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}
:where(.treasury-app) .tm-row-main {
    font-weight: 750;
    font-size: .7rem;
    color: #3e4857;
}
:where(.treasury-app) .tm-row-sub {
    font-size: .59rem;
    color: #8d97a5;
    margin-top: .08rem;
}
:where(.treasury-app) .tm-panel {
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    box-shadow: 0 4px 16px rgba(67,56,202,.04);
    padding: .78rem;
    min-width: 0;
}
:where(.treasury-app) .tm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}
:where(.treasury-app) .tm-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 800;
}
:where(.treasury-app) .tm-section-title i {
    color: var(--rc-primary);
}
:where(.treasury-app) .tm-grid-2 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .7rem;
    margin-bottom: .8rem;
}
:where(.treasury-app) .tm-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .7rem;
    margin-bottom: .8rem;
}
:where(.treasury-app) .tm-grid-wide-left {
    display: grid;
    grid-template-columns: 1.55fr .75fr;
    gap: .7rem;
    margin-bottom: .8rem;
}
:where(.treasury-app) .tm-grid-wide-right {
    display: grid;
    grid-template-columns: .78fr 1.42fr;
    gap: .7rem;
    margin-bottom: .8rem;
}
:where(.treasury-app) .tm-stat-strip {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(67,56,202,.04);
    overflow: hidden;
    margin-bottom: .8rem;
}
:where(.treasury-app) .tm-stat-item {
    padding: .68rem .78rem;
    border-right: 1px solid var(--rc-border);
    min-width: 0;
}
:where(.treasury-app) .tm-stat-item:last-child {
    border-right: 0;
}
:where(.treasury-app) .tm-stat-label {
    font-size: .59rem;
    color: var(--rc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(.treasury-app) .tm-stat-value {
    font-size: .9rem;
    font-weight: 800;
    margin-top: .1rem;
}
:where(.treasury-app) .tm-stat-note {
    font-size: .56rem;
    color: #8e98a7;
    margin-top: .08rem;
}
:where(.treasury-app) .tm-hero {
    min-height: 145px;
    border-radius: 12px;
    padding: 1rem;
    color: #fff;
    background: radial-gradient(circle at 80% 15%,rgba(191,219,254,.36),transparent 31%),linear-gradient(135deg,#4c1d95 0%,#6366f1 50%,#2563eb 100%);
    box-shadow: 0 10px 30px rgba(79,70,229,.18);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
:where(.treasury-app) .tm-hero-label {
    font-size: .65rem;
    color: rgba(255,255,255,.78);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
:where(.treasury-app) .tm-hero-value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
    margin: .25rem 0;
}
:where(.treasury-app) .tm-hero-meta {
    font-size: .61rem;
    color: rgba(255,255,255,.76);
}
:where(.treasury-app) .tm-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
}
:where(.treasury-app) .tm-hero-mini {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
:where(.treasury-app) .tm-hero-mini-item {
    min-width: 78px;
}
:where(.treasury-app) .tm-hero-mini-label {
    font-size: .55rem;
    color: rgba(255,255,255,.68);
}
:where(.treasury-app) .tm-hero-mini-value {
    font-size: .74rem;
    font-weight: 800;
    margin-top: .06rem;
}
:where(.treasury-app) .tm-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: .44rem;
    height: 92px;
    padding: .3rem .2rem .12rem;
    border-bottom: 1px solid #eef0f5;
}
:where(.treasury-app) .tm-mini-bar-wrap {
    flex: 1;
    min-width: 0;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
:where(.treasury-app) .tm-mini-bar {
    width: 100%;
    max-width: 32px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg,#8b5cf6,#2563eb);
    min-height: 5px;
    box-shadow: 0 4px 8px rgba(79,70,229,.08);
}
:where(.treasury-app) .tm-mini-bar.alt {
    background: linear-gradient(180deg,#38bdf8,#4f46e5);
}
:where(.treasury-app) .tm-mini-bar.good {
    background: linear-gradient(180deg,#34d399,#3b82f6);
}
:where(.treasury-app) .tm-mini-label {
    font-size: .54rem;
    color: #8b95a5;
    margin-top: .23rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
:where(.treasury-app) .tm-pair-bars {
    display: flex;
    align-items: flex-end;
    gap: .72rem;
    height: 105px;
    padding: .3rem .2rem .1rem;
    border-bottom: 1px solid #edf0f5;
}
:where(.treasury-app) .tm-pair-group {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}
:where(.treasury-app) .tm-pair-columns {
    height: 82px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
:where(.treasury-app) .tm-pair-bar {
    width: 13px;
    border-radius: 4px 4px 1px 1px;
    background: #c7d2fe;
    min-height: 5px;
}
:where(.treasury-app) .tm-pair-bar.received {
    background: linear-gradient(180deg,#8b5cf6,#2563eb);
}
:where(.treasury-app) .tm-pair-label {
    font-size: .53rem;
    color: #8791a1;
    margin-top: .25rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
}
:where(.treasury-app) .tm-list {
    display: flex;
    flex-direction: column;
    gap: .43rem;
}
:where(.treasury-app) .tm-list-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .55rem;
    align-items: center;
    padding: .45rem .52rem;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fbfcff;
}
:where(.treasury-app) .tm-list-title {
    font-size: .65rem;
    font-weight: 750;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(.treasury-app) .tm-list-meta {
    font-size: .56rem;
    color: #929cac;
    margin-top: .08rem;
}
:where(.treasury-app) .tm-list-value {
    font-size: .66rem;
    font-weight: 800;
    white-space: nowrap;
}
:where(.treasury-app) .tm-progress {
    height: 6px;
    border-radius: 99px;
    background: #edf0f5;
    overflow: hidden;
}
:where(.treasury-app) .tm-progress>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#7c3aed,#2563eb);
}
:where(.treasury-app) .tm-progress.success>span {
    background: linear-gradient(90deg,#22c55e,#0ea5e9);
}
:where(.treasury-app) .tm-progress.warning>span {
    background: linear-gradient(90deg,#f59e0b,#8b5cf6);
}
:where(.treasury-app) .tm-progress.danger>span {
    background: linear-gradient(90deg,#ef4444,#f59e0b);
}
:where(.treasury-app) .tm-donut-wrap {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 120px;
}
:where(.treasury-app) .tm-donut {
    --p: 70;
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border-radius: 50%;
    background: conic-gradient(#6366f1 calc(var(--p)*1%),#dbeafe 0 82%,#f1f3f8 0);
}
:where(.treasury-app) .tm-donut::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf0f5;
}
:where(.treasury-app) .tm-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: .56rem;
    color: var(--rc-muted);
}
:where(.treasury-app) .tm-donut-center b {
    font-size: .9rem;
    color: var(--rc-text);
}
:where(.treasury-app) .tm-legend {
    display: flex;
    flex-direction: column;
    gap: .42rem;
    flex: 1;
}
:where(.treasury-app) .tm-legend-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .4rem;
    align-items: center;
    font-size: .6rem;
    color: #596579;
}
:where(.treasury-app) .tm-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
}
:where(.treasury-app) .tm-legend-dot.blue {
    background: #3b82f6;
}
:where(.treasury-app) .tm-legend-dot.cyan {
    background: #38bdf8;
}
:where(.treasury-app) .tm-legend-dot.gray {
    background: #d7dce6;
}
:where(.treasury-app) .tm-legend-value {
    font-weight: 800;
    color: #434d5d;
}
:where(.treasury-app) .tm-aging-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .48rem;
}
:where(.treasury-app) .tm-aging-box {
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    padding: .6rem;
    background: #fff;
    position: relative;
    overflow: hidden;
}
:where(.treasury-app) .tm-aging-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #6366f1;
}
:where(.treasury-app) .tm-aging-box.warning::before {
    background: #f59e0b;
}
:where(.treasury-app) .tm-aging-box.danger::before {
    background: #ef4444;
}
:where(.treasury-app) .tm-aging-label {
    font-size: .56rem;
    color: var(--rc-muted);
}
:where(.treasury-app) .tm-aging-value {
    font-size: .8rem;
    font-weight: 800;
    margin-top: .08rem;
}
:where(.treasury-app) .tm-aging-note {
    font-size: .54rem;
    color: #929cac;
    margin-top: .08rem;
}
:where(.treasury-app) .tm-timeline {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}
:where(.treasury-app) .tm-timeline-row {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr) auto;
    gap: .48rem;
    padding: .42rem .15rem;
    align-items: flex-start;
}
:where(.treasury-app) .tm-timeline-mark {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6366f1;
    margin-top: .18rem;
    box-shadow: 0 0 0 3px #eef2ff;
}
:where(.treasury-app) .tm-timeline-title {
    font-size: .64rem;
    font-weight: 750;
    color: #465164;
}
:where(.treasury-app) .tm-timeline-sub {
    font-size: .55rem;
    color: #929cac;
    margin-top: .05rem;
}
:where(.treasury-app) .tm-timeline-value {
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}
:where(.treasury-app) .tm-source-bars {
    display: flex;
    flex-direction: column;
    gap: .48rem;
}
:where(.treasury-app) .tm-source-row {
    display: grid;
    grid-template-columns: 105px minmax(0,1fr) 72px;
    gap: .5rem;
    align-items: center;
}
:where(.treasury-app) .tm-source-name {
    font-size: .6rem;
    font-weight: 700;
    color: #596579;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(.treasury-app) .tm-source-track {
    height: 8px;
    border-radius: 99px;
    background: #eef0f5;
    overflow: hidden;
}
:where(.treasury-app) .tm-source-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#8b5cf6,#2563eb);
}
:where(.treasury-app) .tm-source-value {
    text-align: right;
    font-size: .61rem;
    font-weight: 800;
    white-space: nowrap;
}
:where(.treasury-app) .tm-file-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--rc-primary-soft);
    color: var(--rc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .45rem;
    vertical-align: middle;
}
:where(.treasury-app) .tm-note {
    border: 1px solid #ddd9ff;
    background: linear-gradient(135deg,#faf8ff,#f6f9ff);
    border-radius: 9px;
    padding: .6rem .7rem;
    color: #5f6880;
    font-size: .63rem;
    line-height: 1.45;
}
:where(.treasury-app) .tm-modal-title {
    font-size: .7rem;
    font-weight: 800;
    color: #4d5869;
    margin-bottom: .55rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
:where(.treasury-app) .tm-modal-title i {
    color: var(--rc-primary);
}
@media (max-width:1199.98px) {
    :where(.treasury-app) .tm-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    :where(.treasury-app) .tm-grid-wide-left,:where(.treasury-app) .tm-grid-wide-right {
        grid-template-columns: 1fr;
    }
    :where(.treasury-app) .tm-stat-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    :where(.treasury-app) .tm-stat-item:nth-child(2) {
        border-right: 0;
    }
    :where(.treasury-app) .tm-stat-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--rc-border);
    }
}
@media (max-width:767.98px) {
    :where(.treasury-app) .tm-grid-2,:where(.treasury-app) .tm-grid-3 {
        grid-template-columns: 1fr;
    }
    :where(.treasury-app) .tm-aging-grid {
        grid-template-columns: 1fr 1fr;
    }
    :where(.treasury-app) .tm-donut-wrap {
        align-items: flex-start;
    }
    :where(.treasury-app) .tm-source-row {
        grid-template-columns: 90px minmax(0,1fr) 66px;
    }
}
@media (max-width:575.98px) {
    :where(.treasury-app) .tm-search {
        min-width: 100%;
        width: 100%;
    }
    :where(.treasury-app) .tm-toolbar-group {
        width: 100%;
    }
    :where(.treasury-app) .tm-toolbar-group .rc-control {
        flex: 1 1 auto;
    }
    :where(.treasury-app) .tm-stat-strip {
        grid-template-columns: 1fr 1fr;
    }
    :where(.treasury-app) .tm-hero {
        min-height: 132px;
    }
    :where(.treasury-app) .tm-hero-value {
        font-size: 1.3rem;
    }
    :where(.treasury-app) .tm-aging-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Shared modal / form controls for dynamically loaded Treasury pages */
:where(.treasury-app) .modal-content {
    border: 0;
    border-radius: 13px;
    box-shadow: 0 24px 70px rgba(55,48,163,.18);
}
:where(.treasury-app) .modal-header {
    border-bottom: 1px solid var(--rc-border);
    padding: .78rem 1rem;
}
:where(.treasury-app) .modal-title {
    font-size: .84rem;
    font-weight: 800;
}
:where(.treasury-app) .modal-body {
    padding: .85rem 1rem;
}
:where(.treasury-app) .modal-footer {
    border-top: 1px solid var(--rc-border);
    padding: .65rem 1rem;
}
:where(.treasury-app) .form-control,:where(.treasury-app) .form-select {
    font-size: .7rem;
    min-height: 34px;
    border-color: var(--rc-border);
    border-radius: 8px;
}
:where(.treasury-app) .form-control:focus,:where(.treasury-app) .form-select:focus {
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 .18rem rgba(99,102,241,.1);
}
:where(.treasury-app) .form-check-input:checked {
    background-color: var(--rc-primary);
    border-color: var(--rc-primary);
}
@media (max-width:575.98px) {
    :where(.treasury-app) .ts-search {
        min-width: 100%;
        width: 100%;
    }
    :where(.treasury-app) .ts-toolbar-group {
        width: 100%;
    }
    :where(.treasury-app) .ts-toolbar-group .rc-control {
        flex: 1 1 auto;
    }
}

/* =========================================================
   GLOBAL TREASURY REPORT COMPONENTS
   Accounting-style paper report format shared by all reports.
   ========================================================= */
:where(.treasury-app) .tr-page {
    padding: .05rem;
}
:where(.treasury-app) .tr-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 252px;
    gap: 1rem;
    align-items: start;
}
:where(.treasury-app) .tr-main {
    min-width: 0;
    display: flex;
    justify-content: center;
}
:where(.treasury-app) .tr-paper {
    background: #fff;
    border: 1px solid #cfd5dc;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(30,41,59,.08);
    color: #111827;
    overflow: hidden;
}
:where(.treasury-app) .tr-paper.tr-portrait {
    width: min(100%,794px);
    min-height: 1050px;
    margin: 0 auto;
    page: portraitReport;
}
:where(.treasury-app) .tr-paper.tr-landscape {
    width: 100%;
    min-height: 720px;
    page: landscapeReport;
}
:where(.treasury-app) .tr-report-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .08rem;
    padding: 2.15rem 1rem 1rem;
    border: 0;
}
:where(.treasury-app) .tr-logo-wrap {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.treasury-app) .tr-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
:where(.treasury-app) .tr-logo-bagong {
    width: 56px;
    height: 56px;
}
:where(.treasury-app) .tr-header-copy {
    flex: 0 1 270px;
    max-width: 270px;
    text-align: center;
    line-height: 1.18;
    color: #111;
}
:where(.treasury-app) .tr-republic {
    font-size: .7rem;
    font-weight: 500;
}
:where(.treasury-app) .tr-province {
    font-size: .7rem;
    font-weight: 500;
    margin-top: .06rem;
}
:where(.treasury-app) .tr-municipality {
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: .05rem;
}
:where(.treasury-app) .tr-office {
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    margin-top: .08rem;
}
:where(.treasury-app) .tr-report-title {
    font-size: .86rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .015em;
    margin-top: .72rem;
}
:where(.treasury-app) .tr-report-period {
    font-size: .7rem;
    color: #222;
    margin-top: .22rem;
    font-weight: 500;
}
:where(.treasury-app) .tr-report-context {
    font-size: .7rem;
    color: #222;
    margin-top: .18rem;
    font-weight: 700;
}
:where(.treasury-app) .tr-report-body {
    padding: .1rem 3rem 1.35rem;
    display: flex;
    flex-direction: column;
}
:where(.treasury-app) .tr-paper.tr-portrait .tr-report-body {
    min-height: 860px;
}
:where(.treasury-app) .tr-paper.tr-landscape .tr-report-body {
    min-height: 565px;
    padding-left: 2rem;
    padding-right: 2rem;
}
:where(.treasury-app) .tr-table-wrap {
    width: 100%;
    overflow: auto;
    border: 0;
    margin-top: .72rem;
}
:where(.treasury-app) .tr-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: .7rem;
    color: #111;
}
:where(.treasury-app) .tr-table thead th {
    background: #fff;
    border: 0;
    border-top: 1.35px solid #252525;
    border-bottom: 1.35px solid #252525;
    padding: .33rem .26rem;
    text-align: left;
    vertical-align: middle;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
:where(.treasury-app) .tr-table thead th.text-center {
    text-align: center !important;
}
:where(.treasury-app) .tr-table thead th.text-end {
    text-align: right !important;
}
:where(.treasury-app) .tr-table tbody td {
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    padding: .32rem .26rem;
    vertical-align: middle;
    line-height: 1.18;
}
:where(.treasury-app) .tr-table tbody tr:last-child td {
    border-bottom: 0;
}
:where(.treasury-app) .tr-table-tight {
    font-size: .7rem;
}
:where(.treasury-app) .tr-table-tight thead th,:where(.treasury-app) .tr-table-tight tbody td {
    padding: .27rem .18rem;
}
:where(.treasury-app) .tr-table td.text-end {
    text-align: right !important;
}
:where(.treasury-app) .tr-table td.text-center {
    text-align: center !important;
}
:where(.treasury-app) .tr-table .tr-subtotal-row td {
    font-weight: 800;
    border-top: 1px solid #555;
    border-bottom: 1px solid #777;
    background: #fff;
}
:where(.treasury-app) .tr-table tbody tr.tr-total-row td {
    font-weight: 850;
    background: #fff;
    border-top: 2px solid #000 !important;
    border-bottom: 3px double #000 !important;
    padding-top: .46rem;
    padding-bottom: .46rem;
}
:where(.treasury-app) .tr-money {
    position: relative;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 1.4rem !important;
}
:where(.treasury-app) .tr-money::before {
    content: "₱";
    position: absolute;
    left: .26rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: inherit;
    color: inherit;
}
:where(.treasury-app) .tr-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
:where(.treasury-app) .tr-status {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}
:where(.treasury-app) .tr-status::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #198754;
}
:where(.treasury-app) .tr-status.pending::before {
    background: #d99a12;
}
:where(.treasury-app) .tr-status.danger::before {
    background: #dc3545;
}
:where(.treasury-app) .tr-status.muted::before {
    background: #929baa;
}
:where(.treasury-app) .tr-progress {
    height: 4px;
    background: #e6e9ee;
    border-radius: 999px;
    overflow: hidden;
    min-width: 58px;
}
:where(.treasury-app) .tr-progress>span {
    display: block;
    height: 100%;
    background: var(--rc-primary);
    border-radius: inherit;
}
:where(.treasury-app) .tr-percent {
    font-size: .7rem;
    font-weight: 750;
    color: #222;
    white-space: nowrap;
}
:where(.treasury-app) .tr-report-note {
    margin-top: .55rem;
    padding: .35rem 0;
    font-size: .7rem;
    color: #555;
    line-height: 1.35;
    border: 0;
    background: #fff;
}
:where(.treasury-app) .tr-prepared-by {
    width: 225px;
    margin: 2.2rem 0 .6rem;
    align-self: flex-start;
    text-align: center;
    font-size: .7rem;
    color: #222;
}
:where(.treasury-app) .tr-prepared-label {
    text-align: left;
    font-weight: 500;
    margin-bottom: 1.8rem;
}
:where(.treasury-app) .tr-prepared-line {
    border-top: 1px solid #333;
}
:where(.treasury-app) .tr-prepared-name {
    padding-top: .22rem;
    font-weight: 800;
    text-transform: uppercase;
}
:where(.treasury-app) .tr-document-footer {
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid #cfd2d6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .7rem;
    color: #737b86;
}
:where(.treasury-app) .tr-side {
    display: block;
    position: sticky;
    top: .15rem;
}
:where(.treasury-app) .tr-filter-card {
    background: #fff;
    border: 1px solid #d4dbe3;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(30,41,59,.05);
    overflow: hidden;
}
:where(.treasury-app) .tr-action-card {
    display: none !important;
}
:where(.treasury-app) .tr-side-header {
    padding: .62rem .72rem;
    border-bottom: 1px solid #d7dde4;
    display: flex;
    align-items: center;
    gap: .38rem;
    font-size: .72rem;
    font-weight: 800;
    color: #334155;
}
:where(.treasury-app) .tr-side-header i {
    color: #64748b;
    font-size: .7rem;
}
:where(.treasury-app) .tr-side-body {
    padding: .7rem;
}
:where(.treasury-app) .tr-filter-field {
    margin-bottom: .58rem;
}
:where(.treasury-app) .tr-filter-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: .24rem;
}
:where(.treasury-app) .tr-filter-card .form-control,:where(.treasury-app) .tr-filter-card .form-select {
    min-height: 32px;
    border-color: #bac5d2;
    border-radius: 4px;
    font-size: .7rem;
    padding: .30rem .48rem;
}
:where(.treasury-app) .tr-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .42rem;
}
:where(.treasury-app) .tr-side-actions {
    display: block;
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid #d7dde4;
}
:where(.treasury-app) .tr-run-report {
    width: 100%;
    height: 34px;
    background: #2f2d80;
    border: 1px solid #2f2d80;
    color: #fff;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 800;
}
:where(.treasury-app) .tr-run-report:hover {
    background: #252368;
    color: #fff;
}
:where(.treasury-app) .tr-download-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .38rem;
    margin-top: .55rem;
}
:where(.treasury-app) .tr-download-actions .btn {
    height: 33px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .34rem;
}
:where(.treasury-app) .tr-download-actions .btn:last-child {
    background: #2f2d80;
    border-color: #2f2d80;
    color: #fff;
}
@media (max-width:1199.98px) {
    :where(.treasury-app) .tr-layout {
        grid-template-columns: minmax(0,1fr) 235px;
        gap: .75rem;
    }
    :where(.treasury-app) .tr-report-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (max-width:991.98px) {
    :where(.treasury-app) .tr-layout {
        grid-template-columns: 1fr;
    }
    :where(.treasury-app) .tr-side {
        position: static;
    }
    :where(.treasury-app) .tr-paper.tr-portrait,:where(.treasury-app) .tr-paper.tr-landscape {
        width: 100%;
        min-height: 0;
    }
    :where(.treasury-app) .tr-report-body,:where(.treasury-app) .tr-paper.tr-portrait .tr-report-body,:where(.treasury-app) .tr-paper.tr-landscape .tr-report-body {
        min-height: 0;
    }
}
@media (max-width:575.98px) {
    :where(.treasury-app) .tr-report-header {
        gap: .05rem;
        padding: 1.1rem .25rem .7rem;
    }
    :where(.treasury-app) .tr-logo-wrap {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    :where(.treasury-app) .tr-logo {
        width: 39px;
        height: 39px;
    }
    :where(.treasury-app) .tr-logo-bagong {
        width: 42px;
        height: 42px;
    }
    :where(.treasury-app) .tr-header-copy {
        flex-basis: 225px;
        max-width: 225px;
    }
    :where(.treasury-app) .tr-report-body,:where(.treasury-app) .tr-paper.tr-landscape .tr-report-body {
        padding: .1rem .55rem .8rem;
    }
    :where(.treasury-app) .tr-filter-grid {
        grid-template-columns: 1fr;
    }
    :where(.treasury-app) .tr-prepared-by {
        width: 185px;
    }
    :where(.treasury-app) .tr-document-footer {
        font-size: .7rem;
    }
}
@page portraitReport {
    size: A4 portrait;
    margin: 9mm;
}
@page landscapeReport {
    size: A4 landscape;
    margin: 9mm;
}
@media print {
    html:where(.treasury-app),:where(.treasury-app) body {
        overflow: visible !important;
        background: #fff !important;
        height: auto !important;
    }
    :where(.treasury-app) .topnav,:where(.treasury-app) .mobile-menu-panel,:where(.treasury-app) .tr-side {
        display: none !important;
    }
    :where(.treasury-app) .app-shell,:where(.treasury-app) .main,:where(.treasury-app) .content,:where(.treasury-app) .content-frame {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    :where(.treasury-app) .tr-layout {
        display: block !important;
    }
    :where(.treasury-app) .tr-main {
        display: block !important;
    }
    :where(.treasury-app) .tr-paper,:where(.treasury-app) .tr-paper.tr-portrait,:where(.treasury-app) .tr-paper.tr-landscape {
        width: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    :where(.treasury-app) .tr-report-header {
        padding: .45cm .6cm .25cm;
    }
    :where(.treasury-app) .tr-report-body,:where(.treasury-app) .tr-paper.tr-landscape .tr-report-body {
        padding: .12cm .5cm .25cm;
        min-height: 0 !important;
    }
    :where(.treasury-app) .tr-table {
        font-size: 10.5px;
    }
    :where(.treasury-app) .tr-table thead th,:where(.treasury-app) .tr-table tbody td {
        padding: 2.5px 3px;
    }
}

/* =========================================================
   TOP NAVIGATION APP SHELL
   ========================================================= */
:where(.treasury-app) .app-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
:where(.treasury-app) .topnav {
    flex: 0 0 auto;
    min-height: var(--rc-topbar-height);
    position: relative;
    z-index: 1040;
    color: #fff;
    border-bottom: 1px solid rgba(55,48,163,.30);
    background: radial-gradient(circle at 10% 0%,rgba(196,181,253,.24) 0,rgba(196,181,253,0) 26%),radial-gradient(circle at 76% 0%,rgba(96,165,250,.18) 0,rgba(96,165,250,0) 24%),linear-gradient(90deg,var(--rc-nav-top) 0%,var(--rc-nav-mid) 52%,var(--rc-nav-bottom) 100%);
    box-shadow: 0 4px 18px rgba(55,48,163,.15);
}
:where(.treasury-app) .topnav-inner {
    min-height: var(--rc-topbar-height);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem 1rem;
}
:where(.treasury-app) .topnav-brand {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-width: 222px;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}
:where(.treasury-app) .topnav-brand:hover {
    color: #fff;
}
:where(.treasury-app) .brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 42px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.12));
}
:where(.treasury-app) .brand-copy {
    min-width: 0;
    line-height: 1.12;
}
:where(.treasury-app) .brand-title {
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
:where(.treasury-app) .brand-subtitle {
    font-size: .59rem;
    color: rgba(255,255,255,.72);
    margin-top: .18rem;
    white-space: nowrap;
}
:where(.treasury-app) .topnav-menu {
    display: flex;
    align-items: center;
    gap: .14rem;
    min-width: 0;
    flex: 1;
}
:where(.treasury-app) .nav-item-wrap, :where(.treasury-app) .nav-submenu-wrap, :where(.treasury-app) .notification-wrap, :where(.treasury-app) .topnav-user {
    position: relative;
}
:where(.treasury-app) .top-link {
    height: 38px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.84);
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: 9px;
    padding: .45rem .58rem;
    font-size: .69rem;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
    transition: background .16s ease,color .16s ease;
}
:where(.treasury-app) .top-link i {
    font-size: .79rem;
}
:where(.treasury-app) .top-link .caret {
    font-size: .58rem;
    margin-left: .08rem;
    opacity: .72;
    transition: transform .18s ease;
}
:where(.treasury-app) .top-link:hover,:where(.treasury-app) .nav-item-wrap:hover>.top-link {
    background: rgba(255,255,255,.1);
    color: #fff;
}
:where(.treasury-app) .top-link.active {
    background: #e3e6ff;
    color: var(--rc-primary-deep);
    box-shadow: 0 4px 12px rgba(3,55,82,.14),inset 0 0 0 1px rgba(255,255,255,.32);
}
:where(.treasury-app) .top-link.active i {
    color: var(--rc-primary);
}
:where(.treasury-app) .nav-item-wrap:hover>.top-link .caret {
    transform: rotate(180deg);
}
:where(.treasury-app) .nav-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    min-width: 250px;
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    padding: .4rem;
    box-shadow: 0 14px 35px rgba(55,48,163,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: opacity .16s ease,visibility .16s ease,transform .16s ease;
    pointer-events: none;
}
:where(.treasury-app) .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
:where(.treasury-app) .nav-item-wrap:hover>.nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
:where(.treasury-app) .nav-item-wrap.dropdown-closed>.nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(7px) !important;
    pointer-events: none !important;
}
:where(.treasury-app) .nav-submenu-parent .submenu-caret {
    margin-left: auto;
    font-size: .58rem;
    color: #8a99a6;
    transition: transform .16s ease;
}
:where(.treasury-app) .nav-submenu {
    position: absolute;
    left: calc(100% + 7px);
    top: -.4rem;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    padding: .4rem;
    box-shadow: 0 14px 35px rgba(55,48,163,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateX(7px);
    transition: opacity .16s ease,visibility .16s ease,transform .16s ease;
    pointer-events: none;
}
:where(.treasury-app) .nav-submenu::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
}
:where(.treasury-app) .nav-submenu-wrap:hover>.nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}
:where(.treasury-app) .nav-submenu-wrap:hover>.nav-submenu-parent .submenu-caret {
    transform: rotate(-90deg);
}
:where(.treasury-app) .mobile-subgroup-toggle {
    justify-content: space-between;
    padding-left: .62rem;
}
:where(.treasury-app) .mobile-subgroup-toggle .mobile-subgroup-label {
    display: flex;
    align-items: center;
    gap: .48rem;
}
:where(.treasury-app) .mobile-subgroup-toggle .bi-chevron-down {
    font-size: .58rem;
    transition: transform .16s ease;
}
:where(.treasury-app) .mobile-subgroup-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
:where(.treasury-app) .mobile-nested-submenu {
    padding: .08rem 0 .22rem .85rem;
    border-left: 1px solid #eef2f7;
    margin-left: .55rem;
}
:where(.treasury-app) .dropdown-menu-link {
    width: 100%;
    border: 0;
    background: #fff;
    color: #43515e;
    display: flex;
    align-items: center;
    gap: .56rem;
    border-radius: 8px;
    padding: .56rem .62rem;
    text-align: left;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.25;
    transition: background .14s ease,color .14s ease;
}
:where(.treasury-app) .dropdown-menu-link i {
    width: 18px;
    text-align: center;
    color: #8a99a6;
    font-size: .78rem;
}
:where(.treasury-app) .dropdown-menu-link:hover {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .dropdown-menu-link:hover i {
    color: var(--rc-primary);
}
:where(.treasury-app) .dropdown-menu-link.active {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .dropdown-menu-link.active i {
    color: var(--rc-primary);
}
:where(.treasury-app) .nav-dropdown.reports-dropdown {
    width: 540px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .08rem;
}
:where(.treasury-app) .topnav-right {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
}
:where(.treasury-app) .topnav-icon-btn {
    position: relative;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease,transform .16s ease;
}
:where(.treasury-app) .topnav-icon-btn:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
:where(.treasury-app) .icon-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    border: 2px solid var(--rc-nav-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .54rem;
    font-weight: 800;
    line-height: 1;
}
:where(.treasury-app) .menu-count-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: .15rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .56rem;
    font-weight: 800;
    line-height: 1;
}
:where(.treasury-app) .top-link.active .menu-count-badge {
    background: var(--rc-primary);
    color: #fff;
    border-color: var(--rc-primary);
}
:where(.treasury-app) .notification-menu {
    right: 0;
    left: auto;
    width: 340px;
    padding: .45rem;
}
:where(.treasury-app) .notification-item {
    width: 100%;
    border: 0;
    background: #fff;
    display: flex;
    align-items: flex-start;
    gap: .62rem;
    padding: .65rem;
    border-radius: 9px;
    text-align: left;
    color: var(--rc-text);
}
:where(.treasury-app) .notification-item:hover {
    background: var(--rc-primary-soft);
}
:where(.treasury-app) .notification-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--rc-primary-soft);
    color: var(--rc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}
:where(.treasury-app) .notification-title {
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.25;
}
:where(.treasury-app) .notification-meta {
    font-size: .6rem;
    color: var(--rc-muted);
    margin-top: .18rem;
    line-height: 1.35;
}
:where(.treasury-app) .notification-divider {
    height: 1px;
    background: #edf1f4;
    margin: .15rem .25rem;
}
:where(.treasury-app) .notification-bell i {
    transform-origin: 50% 0;
    animation: rcBellWiggle 3s ease-in-out infinite;
}
@keyframes rcBellWiggle {
    0%,78%,100% {
        transform: rotate(0);
    }
    82% {
        transform: rotate(14deg);
    }
    86% {
        transform: rotate(-12deg);
    }
    90% {
        transform: rotate(9deg);
    }
    94% {
        transform: rotate(-6deg);
    }
    97% {
        transform: rotate(3deg);
    }
}
:where(.treasury-app) .user-trigger {
    height: 38px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .48rem;
    padding: .3rem .5rem .3rem .38rem;
}
:where(.treasury-app) .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .63rem;
    font-weight: 800;
}
:where(.treasury-app) .user-copy {
    line-height: 1.06;
    text-align: left;
}
:where(.treasury-app) .user-name {
    font-size: .64rem;
    font-weight: 800;
}
:where(.treasury-app) .user-role {
    font-size: .56rem;
    color: rgba(255,255,255,.67);
    margin-top: .12rem;
}
:where(.treasury-app) .user-menu {
    right: 0;
    left: auto;
    min-width: 205px;
}
:where(.treasury-app) .mobile-nav-btn {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: #fff;
    align-items: center;
    justify-content: center;
}
:where(.treasury-app) .mobile-menu-panel {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--rc-border);
    box-shadow: 0 8px 18px rgba(55,48,163,.09);
    max-height: calc(100vh - var(--rc-topbar-height));
    overflow: auto;
}
:where(.treasury-app) .mobile-menu-panel.show {
    display: block;
}
:where(.treasury-app) .mobile-menu-inner {
    padding: .65rem;
}
:where(.treasury-app) .mobile-direct-link,:where(.treasury-app) .mobile-group-toggle,:where(.treasury-app) .mobile-sub-link {
    width: 100%;
    border: 0;
    background: #fff;
    color: #43515e;
    display: flex;
    align-items: center;
    gap: .58rem;
    border-radius: 8px;
    padding: .62rem .68rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 650;
}
:where(.treasury-app) .mobile-direct-link:hover,:where(.treasury-app) .mobile-group-toggle:hover,:where(.treasury-app) .mobile-sub-link:hover {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .mobile-direct-link.active,:where(.treasury-app) .mobile-sub-link.active {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
:where(.treasury-app) .mobile-group-toggle {
    justify-content: space-between;
    margin-top: .15rem;
}
:where(.treasury-app) .mobile-group-toggle .label-wrap {
    display: flex;
    align-items: center;
    gap: .58rem;
}
:where(.treasury-app) .mobile-group-toggle .bi-chevron-down {
    transition: transform .18s ease;
    font-size: .64rem;
}
:where(.treasury-app) .mobile-group-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
:where(.treasury-app) .mobile-submenu {
    padding: .12rem 0 .3rem 1.15rem;
}
:where(.treasury-app) .mobile-sub-link {
    font-size: .68rem;
    font-weight: 580;
    padding: .5rem .62rem;
}
:where(.treasury-app) .main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
:where(.treasury-app) .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    overflow: hidden;
}
:where(.treasury-app) .content-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Each partial owns its vertical scroll; the index shell never scrolls. */
@media screen {
    :where(.treasury-app) .content-frame > .rc-page-scroll {
        flex: 1 1 0%;
        width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    /* Keep long/wide data inside its card, including AJAX-loaded tables. */
    :where(.treasury-app) :is(.rc-card, .tm-panel, .td-card, .inner-card, .tr-paper) {
        min-width: 0;
        max-width: 100%;
    }
    :where(.treasury-app) :is(.rc-card-scroll, .rc-table-wrap, .tr-table-wrap, .table-responsive, .tr-ug-table-wrap, .rcd-document-scroll) {
        min-width: 0;
        max-width: 100%;
        max-height: min(60vh, 36rem);
        max-height: min(60dvh, 36rem);
        overflow: auto;
        overscroll-behavior-x: contain;
    }
    :where(.treasury-app) .td-card-body {
        overflow: auto;
    }
    :where(.treasury-app) .td-card-body.centered {
        align-items: safe center;
        justify-content: safe center;
    }
}
@media print {
    :where(.treasury-app) .rc-page-scroll {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    :where(.treasury-app) :is(.rc-card-scroll, .rc-table-wrap, .tr-table-wrap, .table-responsive, .tr-ug-table-wrap, .rcd-document-scroll, .ts-cashier-list, .bplo-billing-scroll, .td-card-body) {
        max-height: none !important;
        overflow: visible !important;
    }
}
:where(.treasury-app) .loading-state,:where(.treasury-app) .error-state {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--rc-muted);
    border: 1px dashed var(--rc-border);
    border-radius: var(--rc-radius);
    background: #fff;
    padding: 2rem;
}
:where(.treasury-app) .spinner-border {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--rc-primary);
}
:where(.treasury-app) .error-state i {
    font-size: 1.7rem;
    color: var(--rc-warning);
    margin-bottom: .45rem;
}
@media (max-width:1299.98px) {
    :where(.treasury-app) .topnav-brand {
        min-width: 205px;
    }
    :where(.treasury-app) .top-link {
        padding: .45rem .46rem;
        font-size: .64rem;
        gap: .3rem;
    }
    :where(.treasury-app) .top-link i {
        font-size: .72rem;
    }
    :where(.treasury-app) .user-copy {
        display: none;
    }
}
@media (max-width:1099.98px) {
    :where(.treasury-app) .topnav-menu {
        display: none;
    }
    :where(.treasury-app) .mobile-nav-btn {
        display: flex;
    }
    :where(.treasury-app) .topnav-inner {
        justify-content: space-between;
    }
    :where(.treasury-app) .topnav-brand {
        min-width: 0;
    }
    :where(.treasury-app) .topnav-right {
        margin-left: auto;
    }
}
@media (max-width:1199.98px) {
    :where(.treasury-app) .rc-kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width:575.98px) {
    :where(.treasury-app) body {
        font-size: .76rem;
    }
    :where(.treasury-app) .topnav-inner {
        padding: .25rem .65rem;
        gap: .5rem;
    }
    :where(.treasury-app) .brand-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
    :where(.treasury-app) .brand-title {
        font-size: .74rem;
    }
    :where(.treasury-app) .topnav-icon-btn {
        width: 32px;
        height: 32px;
    }
    :where(.treasury-app) .notification-menu {
        position: fixed;
        left: .7rem;
        right: .7rem;
        top: 58px;
        width: auto;
    }
    :where(.treasury-app) .content {
        padding: .7rem;
    }
    :where(.treasury-app) .rc-page {
        padding: .75rem;
    }
    :where(.treasury-app) .rc-page-header {
        align-items: flex-start;
        flex-direction: column;
    }
    :where(.treasury-app) .rc-page-actions {
        width: 100%;
    }
    :where(.treasury-app) .rc-page-actions .btn,:where(.treasury-app) .rc-page-actions .rc-control {
        flex: 1 1 auto;
    }
    :where(.treasury-app) .rc-kpi-grid {
        grid-template-columns: 1fr;
    }
    :where(.treasury-app) .rc-card-header,:where(.treasury-app) .rc-card-body {
        padding: .8rem;
    }
}

/* Dashboard charts and layout. */

/* Treasury Dashboard - compact visual command center */
.td-dashboard {
    --td-purple: #7c3aed;
    --td-indigo: #6366f1;
    --td-blue: #2563eb;
    --td-cyan: #38bdf8;
    --td-soft: #eef2ff;
    --td-soft-2: #f5f3ff;
    --td-grid: #edf0f7;
    padding: .15rem;
}
.td-dashboard * {
    box-sizing: border-box;
}
.td-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}
.td-head-left {
    min-width: 0;
}
.td-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--rc-text);
}
.td-subtitle {
    margin: .12rem 0 0;
    font-size: .64rem;
    color: var(--rc-muted);
}
.td-head-right {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.td-asof {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .3rem .5rem;
    border-radius: 999px;
    background: var(--rc-primary-soft);
    color: var(--rc-primary-dark);
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Filter */
.td-filter {
    position: relative;
}
.td-filter>summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    height: 32px;
    padding: .3rem .62rem;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--rc-text);
    font-weight: 750;
    font-size: .64rem;
}
.td-filter>summary::-webkit-details-marker {
    display: none;
}
.td-filter[open]>summary {
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 .16rem rgba(99,102,241,.11);
}
.td-filter-menu {
    position: absolute;
    right: 0;
    top: 38px;
    width: 320px;
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    box-shadow: 0 16px 36px rgba(49,46,129,.16);
    padding: .72rem;
    z-index: 30;
}
.td-filter-title {
    font-size: .64rem;
    font-weight: 800;
    color: var(--rc-text);
    margin-bottom: .45rem;
}
.td-filter-field label {
    display: block;
    font-size: .58rem;
    font-weight: 750;
    color: var(--rc-muted);
    margin-bottom: .18rem;
}
.td-filter-field select,.td-filter-field input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--rc-border);
    border-radius: 7px;
    background: #fff;
    padding: .25rem .45rem;
    color: var(--rc-text);
    font-size: .64rem;
}
.td-filter-field select:focus,.td-filter-field input:focus {
    outline: none;
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 .14rem rgba(99,102,241,.1);
}
.td-custom-range {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .48rem;
    padding-top: .48rem;
    border-top: 1px solid #eef0f4;
}
.td-custom-range.show {
    display: grid;
}
.td-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px solid #eef0f4;
}
.td-filter-actions .btn {
    font-size: .62rem;
    padding: .3rem .58rem;
}

/* KPI strip */
.td-kpis {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: .48rem;
    margin-bottom: .55rem;
}
.td-kpi {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    padding: .55rem .62rem;
    box-shadow: 0 4px 14px rgba(49,46,129,.045);
    min-width: 0;
}
.td-kpi:after {
    content: "";
    position: absolute;
    width: 58px;
    height: 58px;
    right: -22px;
    top: -24px;
    border-radius: 50%;
    background: linear-gradient(135deg,rgba(124,58,237,.10),rgba(37,99,235,.04));
}
.td-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    position: relative;
    z-index: 1;
}
.td-kpi-label {
    color: var(--rc-muted);
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-kpi-icon {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: linear-gradient(135deg,var(--rc-primary-soft),#e0e7ff);
    color: var(--rc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    flex: 0 0 25px;
}
.td-kpi-value {
    font-size: .86rem;
    font-weight: 850;
    line-height: 1.05;
    margin-top: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}
.td-kpi-meta {
    display: flex;
    align-items: center;
    gap: .24rem;
    margin-top: .2rem;
    font-size: .52rem;
    color: var(--rc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}
.td-up {
    color: var(--rc-success);
    font-weight: 800;
}
.td-watch {
    color: #b7791f;
    font-weight: 800;
}
.td-down {
    color: var(--rc-danger);
    font-weight: 800;
}

/* Cards / layout */
.td-row {
    display: grid;
    gap: .55rem;
    min-height: 0;
}
.td-row-one {
    grid-template-columns: minmax(0,1.65fr) minmax(230px,.8fr) minmax(0,1.1fr);
    margin-bottom: .55rem;
}
.td-row-two {
    grid-template-columns: minmax(180px,.78fr) minmax(180px,.78fr) minmax(0,1.2fr) minmax(0,1.05fr);
}
.td-card {
    background: #fff;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(49,46,129,.045);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.td-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
    padding: .52rem .65rem;
    border-bottom: 1px solid #eef0f5;
    flex: 0 0 auto;
}
.td-card-title {
    font-size: .66rem;
    font-weight: 800;
    color: var(--rc-text);
    margin: 0;
}
.td-card-subtitle {
    font-size: .52rem;
    color: var(--rc-muted);
    margin-top: .08rem;
    line-height: 1.25;
}
.td-card-meta {
    font-size: .52rem;
    color: var(--rc-muted);
    white-space: nowrap;
}
.td-card-body {
    padding: .52rem .62rem;
    min-height: 0;
    flex: 1;
}
.td-card-body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Common chart labels */
.td-chart-label {
    font-size: 9px;
    fill: #7d8793;
    font-family: var(--rc-font-family);
}
.td-chart-value {
    font-size: 9px;
    fill: #4b5563;
    font-weight: 700;
    font-family: var(--rc-font-family);
}
.td-gridline {
    stroke: var(--td-grid);
    stroke-width: 1;
}
.td-axisline {
    stroke: #dfe4ed;
    stroke-width: 1;
}

/* Monthly vertical chart */
.td-monthly {
    width: 100%;
    height: 100%;
    min-height: 150px;
}
.td-monthly .bar-local {
    fill: url(#barLocalGrad);
}
.td-monthly .bar-other {
    fill: url(#barOtherGrad);
}
.td-monthly .trend {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.td-monthly .trend-point {
    fill: #fff;
    stroke: #7c3aed;
    stroke-width: 2;
}
.td-legend {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    font-size: .5rem;
    color: var(--rc-muted);
    margin-top: .28rem;
}
.td-legend-item {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.td-legend-box {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg,#7c3aed,#6366f1);
}
.td-legend-box.blue {
    background: linear-gradient(135deg,#2563eb,#38bdf8);
}
.td-legend-line {
    width: 13px;
    height: 2px;
    background: #7c3aed;
    border-radius: 99px;
}

/* Donut / pie */
.td-donut-wrap {
    height: 100%;
    min-height: 150px;
    display: grid;
    grid-template-columns: minmax(112px,.82fr) minmax(120px,1fr);
    align-items: center;
    gap: .5rem;
}
.td-donut-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.td-donut {
    width: min(132px,100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#7c3aed 0 47%,#6366f1 47% 70%,#2563eb 70% 86%,#38bdf8 86% 100%);
    position: relative;
    box-shadow: 0 0 0 1px rgba(99,102,241,.08);
}
.td-donut:after {
    content: "";
    position: absolute;
    inset: 25%;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #eef0f5;
}
.td-donut-center {
    position: absolute;
    z-index: 2;
    text-align: center;
    line-height: 1.05;
}
.td-donut-center strong {
    display: block;
    font-size: .78rem;
}
.td-donut-center span {
    font-size: .48rem;
    color: var(--rc-muted);
}
.td-source-list {
    display: flex;
    flex-direction: column;
    gap: .42rem;
}
.td-source-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    font-size: .53rem;
    color: var(--rc-muted);
}
.td-source-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}
.td-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
    background: #7c3aed;
}
.td-dot.d2 {
    background: #6366f1;
}
.td-dot.d3 {
    background: #2563eb;
}
.td-dot.d4 {
    background: #38bdf8;
}
.td-source-value {
    font-weight: 800;
    color: var(--rc-text);
}

/* Vertical system bars */
.td-vbars {
    height: 100%;
    min-height: 150px;
    display: flex;
    align-items: stretch;
    gap: .42rem;
    padding: .15rem .15rem 0;
}
.td-vbar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.td-vbar-value {
    font-size: .5rem;
    font-weight: 800;
    color: var(--rc-text);
    margin-bottom: .18rem;
}
.td-vbar-track {
    width: min(34px,68%);
    height: calc(100% - 34px);
    min-height: 82px;
    background: #f0f2f8;
    border-radius: 7px 7px 3px 3px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
}
.td-vbar-fill {
    width: 100%;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg,#7c3aed 0%,#6366f1 48%,#2563eb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.td-vbar-fill.alt {
    background: linear-gradient(180deg,#6366f1,#38bdf8);
}
.td-vbar-label {
    font-size: .46rem;
    color: var(--rc-muted);
    margin-top: .24rem;
    text-align: center;
    line-height: 1.15;
    max-width: 58px;
    white-space: normal;
}

/* Small ring metrics */
.td-ring-panel {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 130px;
}
.td-ring {
    --pct: 84.6;
    --ring-color: #7c3aed;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--pct)*1%),#eceff6 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 96px;
}
.td-ring:before {
    content: "";
    position: absolute;
    inset: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #eef0f5;
}
.td-ring-text {
    position: relative;
    z-index: 1;
    text-align: center;
}
.td-ring-text strong {
    font-size: .86rem;
    display: block;
    line-height: 1;
}
.td-ring-text span {
    font-size: .46rem;
    color: var(--rc-muted);
}
.td-ring-stats {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .36rem;
}
.td-ring-stat {
    font-size: .5rem;
    color: var(--rc-muted);
}
.td-ring-stat strong {
    display: block;
    color: var(--rc-text);
    font-size: .61rem;
    margin-top: .06rem;
}

/* National fund grouped bars */
.td-fund-chart {
    height: 100%;
    min-height: 130px;
    display: flex;
    align-items: flex-end;
    gap: .7rem;
    padding: .2rem .15rem 0;
}
.td-fund-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    height: 100%;
    justify-content: flex-end;
}
.td-fund-bars {
    height: calc(100% - 30px);
    min-height: 84px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    justify-content: center;
    width: 100%;
}
.td-fund-bar {
    width: min(18px,26%);
    border-radius: 5px 5px 2px 2px;
    background: #ddd6fe;
}
.td-fund-bar.received {
    background: linear-gradient(180deg,#6366f1,#2563eb);
}
.td-fund-label {
    font-size: .45rem;
    color: var(--rc-muted);
    text-align: center;
    line-height: 1.1;
    margin-top: .22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}
.td-fund-pct {
    font-size: .48rem;
    font-weight: 800;
    color: var(--rc-primary-dark);
    margin-bottom: .12rem;
}

/* Receivables */
.td-rec-grid {
    height: 100%;
    min-height: 130px;
    display: grid;
    grid-template-columns: 108px 1fr;
    align-items: center;
    gap: .55rem;
}
.td-mini-pie {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: conic-gradient(#7c3aed 0 42%,#6366f1 42% 70%,#2563eb 70% 88%,#38bdf8 88% 100%);
    position: relative;
    margin: auto;
}
.td-mini-pie:after {
    content: "";
    position: absolute;
    inset: 33%;
    background: #fff;
    border-radius: 50%;
}
.td-rec-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.td-rec-item {
    display: grid;
    grid-template-columns: 1fr 45px;
    gap: .35rem;
    align-items: center;
    font-size: .49rem;
    color: var(--rc-muted);
}
.td-rec-item strong {
    text-align: right;
    color: var(--rc-text);
    font-size: .52rem;
}
.td-rec-name {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}
.td-rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c3aed;
    flex: 0 0 6px;
}
.td-rec-dot.r2 {
    background: #6366f1;
}
.td-rec-dot.r3 {
    background: #2563eb;
}
.td-rec-dot.r4 {
    background: #38bdf8;
}
.td-rec-total {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eef0f5;
    padding-top: .35rem;
    font-size: .5rem;
    color: var(--rc-muted);
}
.td-rec-total strong {
    font-size: .65rem;
    color: var(--rc-text);
}

/* Desktop: fit everything in one screen */
@media (min-width:992px) {
    .td-dashboard {
        height: calc(100vh - 96px);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto auto minmax(0,1.08fr) minmax(0,.92fr);
        gap: .55rem;
    }
    .td-head,.td-kpis,.td-row-one {
        margin-bottom: 0;
    }
    .td-row,.td-card,.td-card-body {
        min-height: 0;
    }
    .td-monthly,.td-donut-wrap,.td-vbars,.td-ring-panel,.td-fund-chart,.td-rec-grid {
        height: 100%;
    }
}
@media (min-width:1200px) and (max-height:780px) {
    .td-dashboard {
        gap: .42rem;
        grid-template-rows: auto auto minmax(0,1fr) minmax(0,.86fr);
    }
    .td-head {
        margin-bottom: 0;
    }
    .td-kpis {
        gap: .38rem;
    }
    .td-kpi {
        padding: .42rem .52rem;
    }
    .td-kpi-value {
        font-size: .78rem;
    }
    .td-kpi-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        font-size: .6rem;
    }
    .td-card-head {
        padding: .4rem .55rem;
    }
    .td-card-body {
        padding: .4rem .52rem;
    }
    .td-card-title {
        font-size: .61rem;
    }
    .td-card-subtitle {
        font-size: .48rem;
    }
    .td-donut {
        width: 108px;
    }
    .td-ring {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }
    .td-ring:before {
        inset: 10px;
    }
    .td-ring-text strong {
        font-size: .72rem;
    }
}
@media (max-width:1199.98px) {
    .td-kpis {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .td-row-one {
        grid-template-columns: 1.5fr .9fr;
    }
    .td-row-one .td-card:last-child {
        grid-column: 1/-1;
    }
    .td-row-two {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:991.98px) {
    .td-dashboard {
        height: auto;
        overflow: visible;
        display: block;
    }
    .td-row-one,.td-row-two {
        grid-template-columns: 1fr 1fr;
        margin-bottom: .55rem;
    }
    .td-row-one .td-card:first-child {
        grid-column: 1/-1;
    }
    .td-card {
        min-height: 230px;
    }
}
@media (max-width:767.98px) {
    .td-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .td-row-one,.td-row-two {
        grid-template-columns: 1fr;
    }
    .td-row-one .td-card:first-child,.td-row-one .td-card:last-child {
        grid-column: auto;
    }
    .td-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .td-head-right {
        width: 100%;
        justify-content: space-between;
    }
    .td-filter-menu {
        position: fixed;
        left: .7rem;
        right: .7rem;
        top: 72px;
        width: auto;
    }
    .td-card {
        min-height: 250px;
    }
}
@media (max-width:479.98px) {
    .td-kpis {
        grid-template-columns: 1fr;
    }
    .td-donut-wrap {
        grid-template-columns: 1fr;
    }
    .td-source-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .td-rec-grid {
        grid-template-columns: 1fr;
    }
    .td-rec-total {
        grid-column: auto;
    }
}

/* Collection screens, shared by the live page and reference mockups. */

/* Collection page-specific styling only. Major responsive layouts use Bootstrap row/col classes. */
.collect-page {
    padding: .1rem;
    color: var(--rc-text);
}
.collect-page .collect-top-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.collect-page .collect-today {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    padding: .38rem .62rem;
    border: 1px solid #cfe9da;
    border-radius: 8px;
    background: #f5fcf8;
    color: #446154;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.collect-page .collect-today i {
    color: var(--rc-success);
}
.collect-page .collect-today strong {
    color: #147a42;
}
.collect-page .office-strip {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    overflow-x: auto;
    padding: .2rem .05rem .7rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.collect-page .office-strip::-webkit-scrollbar {
    height: 5px;
}
.collect-page .office-strip::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.collect-page .office-btn {
    min-width: max-content;
    border: 2px solid transparent;
    border-radius: 9px;
    padding: .55rem .72rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 800;
    opacity: .82;
    box-shadow: 0 3px 10px rgba(34,57,72,.08);
    transition: .15s ease;
}
.collect-page .office-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    color: #fff;
}
.collect-page .office-btn.active {
    opacity: 1;
    border-color: #ff2020;
    box-shadow: 0 7px 18px rgba(30,41,59,.22);
    transform: none;
}
.collect-page .office-btn .count {
    min-width: 18px;
    height: 18px;
    padding: 0 .32rem;
    border-radius: 999px;
    background: #fff;
    color: #273142;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 900;
}
.collect-page .office-civil {
    background: #7c3aed;
}
.collect-page .office-bplo {
    background: #2563eb;
}
.collect-page .office-menro {
    background: #228b5b;
}
.collect-page .office-agri {
    background: #16a34a;
}
.collect-page .office-meedo {
    background: #a66a22;
}
.collect-page .office-rpt {
    background: #5c708f;
}
.collect-page .office-logs {
    background: #48515b;
}
.collect-page .source-panel {
    display: none;
}
.collect-page .source-panel.active {
    display: block;
}
.collect-page .source-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
}
.collect-page .request-list {
    display: flex;
    flex-direction: column;
    gap: .42rem;
}
.collect-page .request-item {
    width: 100%;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: #fff;
    padding: .62rem .68rem;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .65rem;
    align-items: center;
    transition: .15s ease;
}
.collect-page .request-item:hover {
    border-color: #c7cdfc;
    background: var(--rc-primary-soft-2);
}
.collect-page .request-item.active {
    border-color: var(--rc-primary);
    background: var(--rc-primary-soft);
    box-shadow: inset 3px 0 0 var(--rc-primary);
}
.collect-page .request-top {
    display: flex;
    align-items: center;
    gap: .38rem;
    flex-wrap: wrap;
}
.collect-page .request-name {
    font-size: .73rem;
    font-weight: 800;
}
.collect-page .request-service {
    font-size: .7rem;
    font-weight: 700;
    color: #3f4a5b;
    margin-top: .18rem;
}
.collect-page .request-meta {
    font-size: .66rem;
    color: var(--rc-muted);
    margin-top: .16rem;
}
.collect-page .request-amount {
    text-align: right;
    font-size: .77rem;
    font-weight: 800;
    white-space: nowrap;
}
.collect-page .request-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .22rem;
}
.collect-page .inner-card {
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.collect-page .inner-card-head {
    padding: .62rem .7rem;
    border-bottom: 1px solid var(--rc-border);
    background: #fbfcff;
}
.collect-page .inner-card-title {
    font-size: .72rem;
    font-weight: 800;
}
.collect-page .inner-card-sub {
    font-size: .63rem;
    color: var(--rc-muted);
    margin-top: .1rem;
}
.collect-page .inner-card-body {
    padding: .65rem;
}
.collect-page .business-row,.collect-page .account-row,.collect-page .rpt-row {
    width: 100%;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: #fff;
    padding: .55rem .6rem;
    text-align: left;
    margin-bottom: .4rem;
    transition: .15s ease;
}
.collect-page .business-row:last-child,.collect-page .account-row:last-child,.collect-page .rpt-row:last-child {
    margin-bottom: 0;
}
.collect-page .business-row:hover,.collect-page .account-row:hover,.collect-page .rpt-row:hover {
    background: var(--rc-primary-soft-2);
    border-color: #c9cdfd;
}
.collect-page .business-row.active,.collect-page .account-row.active,.collect-page .rpt-row.active {
    background: var(--rc-primary-soft);
    border-color: var(--rc-primary);
    box-shadow: inset 3px 0 0 var(--rc-primary);
}
.collect-page .business-main,.collect-page .account-main,.collect-page .rpt-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.collect-page .business-name,.collect-page .account-name,.collect-page .rpt-name {
    font-size: .7rem;
    font-weight: 800;
}
.collect-page .business-meta,.collect-page .account-meta,.collect-page .rpt-meta {
    font-size: .62rem;
    color: var(--rc-muted);
    margin-top: .12rem;
    line-height: 1.4;
}
.collect-page .accountable-form {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .24rem .48rem;
    border: 1px solid #cdd4ff;
    border-radius: 999px;
    background: #f6f7ff;
    color: var(--rc-primary-dark);
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}
.collect-page .bplo-period-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .55rem .6rem;
    margin-bottom: .55rem;
    border: 1px solid #dfe3ff;
    border-radius: 8px;
    background: #fafaff;
}
.collect-page .bplo-period-options {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.collect-page .bplo-period-option {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .66rem;
    font-weight: 700;
    color: #475569;
}
.collect-page .bplo-period-option input {
    margin: 0;
}
.collect-page .bplo-period-total {
    font-size: .67rem;
    font-weight: 800;
    color: var(--rc-primary-dark);
    white-space: nowrap;
}
.collect-page .payable-set {
    display: none;
}
.collect-page .payable-set.active {
    display: block;
}
.collect-page .payable-item {
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    margin-bottom: .42rem;
    overflow: hidden;
    background: #fff;
}
.collect-page .payable-item:last-child {
    margin-bottom: 0;
}
.collect-page .payable-row {
    width: 100%;
    border: 0;
    background: #fff;
    padding: .55rem .6rem;
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) 95px 90px;
    gap: .45rem;
    align-items: center;
    text-align: left;
}
.collect-page .payable-row:hover {
    background: var(--rc-primary-soft-2);
}
.collect-page .payable-row.active {
    background: var(--rc-primary-soft);
    box-shadow: inset 3px 0 0 var(--rc-primary);
}
.collect-page .payable-chevron {
    color: var(--rc-primary);
    font-size: .7rem;
    transition: transform .15s ease;
}
.collect-page .payable-item.open .payable-chevron {
    transform: rotate(90deg);
}
.collect-page .payable-period {
    font-size: .7rem;
    font-weight: 800;
}
.collect-page .payable-due {
    font-size: .62rem;
    color: var(--rc-muted);
    margin-top: .08rem;
}
.collect-page .payable-amount {
    text-align: right;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.collect-page .payable-status {
    text-align: right;
}
.collect-page .payable-details {
    display: none;
    border-top: 1px solid var(--rc-border);
    padding: .55rem .75rem .6rem;
    background: #fbfcff;
}
.collect-page .payable-item.open .payable-details {
    display: block;
}
.collect-page .payable-detail-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 110px;
    gap: .5rem;
    padding: .24rem 0;
    font-size: .64rem;
    border-bottom: 1px dashed #e6e9f0;
}
.collect-page .payable-detail-row:last-child {
    border-bottom: 0;
}
.collect-page .payable-detail-row span:last-child {
    text-align: right;
    font-weight: 700;
}
.collect-page .bplo-business-years {
    display: none;
}
.collect-page .bplo-business-years.active {
    display: block;
}
.collect-page .bplo-year-card {
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: #fff;
    margin-bottom: .5rem;
    overflow: hidden;
}
.collect-page .bplo-year-card:last-child {
    margin-bottom: 0;
}
.collect-page .bplo-year-card[open] {
    border-color: #d7dcff;
    box-shadow: 0 3px 10px rgba(79,70,229,.05);
}
.collect-page .bplo-year-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .62rem .68rem;
    background: #fbfcff;
}
.collect-page .bplo-year-summary::-webkit-details-marker {
    display: none;
}
.collect-page .bplo-year-summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #64748b;
    transition: transform .18s ease;
}
.collect-page .bplo-year-card[open]>.bplo-year-summary::before {
    transform: rotate(90deg);
}
.collect-page .bplo-year-summary>div:first-of-type {
    flex: 1;
    min-width: 0;
}
.collect-page .bplo-year-title {
    font-size: .74rem;
    font-weight: 900;
}
.collect-page .bplo-year-meta {
    font-size: .62rem;
    color: var(--rc-muted);
    margin-top: .08rem;
}
.collect-page .bplo-year-statuses {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.collect-page .bplo-year-total {
    display: inline-flex;
    align-items: center;
    padding: .2rem .42rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .61rem;
    font-weight: 850;
    white-space: nowrap;
}
.collect-page .bplo-year-summary .bplo-return-btn {
    min-height: 27px;
    padding: .25rem .52rem;
    font-size: .62rem;
    line-height: 1.1;
    white-space: nowrap;
}
.collect-page .bplo-payable-details-wrap .rc-table th {
    padding: .28rem .36rem;
    font-size: .52rem;
    line-height: 1.15;
}
.collect-page .bplo-payable-details-wrap .rc-table td {
    padding: .27rem .36rem;
    font-size: .57rem;
    line-height: 1.2;
}
.collect-page .bplo-payable-details-wrap .rc-table td .fw-semibold {
    font-size: .57rem;
}
.collect-page .bplo-payable-details-wrap .rc-table .ts-meta {
    font-size: .51rem;
    line-height: 1.15;
    margin-top: .04rem;
}
.collect-page .bplo-payable-details-wrap .rc-table th,.collect-page .bplo-payable-details-wrap .rc-table td {
    white-space: nowrap;
}
.collect-page .bplo-payable-details-wrap .rc-table th:first-child,.collect-page .bplo-payable-details-wrap .rc-table td:first-child {
    white-space: normal;
}
.collect-page .bplo-payable-details-wrap .bplo-settings-due {
    background: #f8fafc !important;
    color: #64748b;
}
.collect-page .bplo-payable-details-wrap tfoot td {
    font-weight: 850;
    border-top: 1px solid #cbd5e1;
    background: #fff;
}
.collect-page .bplo-year-body .form-check-input {
    width: 1.08rem;
    height: 1.08rem;
    margin: 0;
    border: 2px solid #64748b;
    box-shadow: 0 0 0 2px rgba(100,116,139,.08);
    cursor: pointer;
}
.collect-page .bplo-year-body .form-check-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.collect-page .bplo-billing-scroll {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .45rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.collect-page .bplo-billing-scroll::-webkit-scrollbar {
    width: 6px;
}
.collect-page .bplo-billing-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.collect-page .bplo-period-card>.bplo-period-head {
    cursor: pointer;
    user-select: none;
}
.collect-page .bplo-period-card>.bplo-period-head:hover {
    background: #f3f6fb !important;
}
.collect-page .bplo-period-card>.bplo-period-content {
    display: block;
}
.collect-page .bplo-period-card.is-collapsed>.bplo-period-content {
    display: none;
}
.collect-page .bplo-period-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: .7rem;
}
.collect-page .bplo-period-toggle i {
    transition: transform .18s ease;
}
.collect-page .bplo-period-card:not(.is-collapsed) .bplo-period-toggle i {
    transform: rotate(180deg);
}
.collect-page .bplo-period-card.is-paid>.bplo-period-head {
    background: #fbfcfd !important;
}
.collect-page .bplo-billed-table-note {
    margin-bottom: .5rem;
    font-size: .64rem;
    color: var(--rc-muted);
    line-height: 1.5;
}
.collect-page .bplo-year-body {
    padding: .65rem;
    border-top: 1px solid var(--rc-border);
}
.collect-page .billing-table .active td,.collect-page .rc-table tbody tr.collect-selectable.active td {
    background: var(--rc-primary-soft);
}
.collect-page .rc-table tbody tr.collect-selectable {
    cursor: pointer;
}
.collect-page .rc-table tbody tr.collect-selectable.active {
    box-shadow: inset 3px 0 0 var(--rc-primary);
}
.collect-page .summary-box {
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    padding: .5rem .58rem;
    background: #fff;
}
.collect-page .summary-label {
    font-size: .61rem;
    color: var(--rc-muted);
}
.collect-page .summary-value {
    font-size: .79rem;
    font-weight: 800;
    margin-top: .08rem;
}
.collect-page .summary-box.applied .summary-value {
    color: var(--rc-success);
}
.collect-page .summary-box.remaining .summary-value {
    color: var(--rc-primary-dark);
}
.collect-page .shared-selected {
    border: 1px solid #dce1ff;
    border-radius: 9px;
    background: #f8f8ff;
    padding: .65rem;
    margin-bottom: .65rem;
}
.collect-page .shared-selected-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
}
.collect-page .shared-selected-name {
    font-size: .74rem;
    font-weight: 800;
}
.collect-page .shared-selected-service {
    font-size: .66rem;
    color: var(--rc-muted);
    margin-top: .12rem;
}
.collect-page .shared-selected-amount {
    font-size: .86rem;
    font-weight: 800;
    color: var(--rc-primary-deep);
    white-space: nowrap;
}
.collect-page .shared-meta {
    border-top: 1px solid #e4e7f0;
    padding-top: .38rem;
}
.collect-page .shared-meta-label {
    font-size: .6rem;
    color: #8b95a5;
}
.collect-page .shared-meta-value {
    font-size: .66rem;
    font-weight: 700;
    margin-top: .06rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collect-page .payment-section {
    border-top: 1px solid var(--rc-border);
    padding-top: .68rem;
    margin-top: .68rem;
}
.collect-page .amount-input {
    position: relative;
}
.collect-page .amount-input .peso {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .7rem;
    font-weight: 800;
    color: #55626d;
    z-index: 2;
}
.collect-page .amount-input input {
    padding-left: 1.35rem;
}
.collect-page .icon-delete {
    height: 34px;
    border: 1px solid #f1cbd1;
    background: #fff5f6;
    color: #dc3545;
    border-radius: 8px;
}
.collect-page .btn-add-payment {
    height: 32px;
    border: 1px solid #9fd6bd;
    background: #f7fffb;
    color: #198754;
    border-radius: 8px;
    padding: 0 .55rem;
    font-size: .7rem;
    font-weight: 700;
}
.collect-page .btn-clear {
    border: 1px solid var(--rc-border);
    background: #fff;
    color: #55616c;
    border-radius: 8px;
    padding: .46rem .68rem;
    font-size: .7rem;
    font-weight: 700;
}
.collect-page .btn-post {
    border: 1px solid var(--rc-primary);
    background: var(--rc-primary);
    color: #fff;
    border-radius: 8px;
    padding: .46rem .74rem;
    font-size: .7rem;
    font-weight: 800;
}
.collect-page .actions-row {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
    padding-top: .62rem;
    margin-top: .62rem;
    border-top: 1px solid var(--rc-border);
}
@media (max-width:1199.98px) {
}
@media (max-width:767.98px) {
}
@media (max-width:575.98px) {
    .collect-page .office-btn {
        padding: .52rem .62rem;
    }
    .collect-page .request-item {
        grid-template-columns: 1fr;
    }
    .collect-page .request-side {
        align-items: flex-start;
    }
    .collect-page .request-amount {
        text-align: left;
    }
    .collect-page .payable-row {
        grid-template-columns: 22px minmax(0,1fr);
    }
    .collect-page .payable-amount,.collect-page .payable-status {
        text-align: left;
        grid-column: 2;
    }
}

/* Dynamic module additions (collect-script.js) */
.collect-page .col-payment-row + .col-payment-row {
    margin-top: .35rem;
}
.collect-page .col-payment-row + .col-payment-row .col-payment-label {
    display: none;
}
.collect-page .col-meedo-site {
    border: 0;
    cursor: pointer;
}
.collect-page .col-placeholder {
    color: var(--rc-muted);
    font-size: .72rem;
    padding: .75rem;
}

/* Shared settings master/detail layout and tabs. */

/* Page-specific: cashier master/detail layout */
.ts-grid-2 {
    display: grid;
    grid-template-columns: minmax(265px,31%) minmax(0,1fr);
    gap: .8rem;
    align-items: start;
}
.ts-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .76rem .85rem;
    border-bottom: 1px solid var(--rc-border);
}
.ts-card-title {
    font-size: .78rem;
    font-weight: 800;
    margin: 0;
}
.ts-list-search {
    padding: .65rem .7rem;
    border-bottom: 1px solid var(--rc-border);
}
.ts-cashier-list {
    padding: .3rem;
    max-height: calc(100vh - var(--ts-cashier-list-offset, 235px));
    overflow: auto;
}
.ts-cashier {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: .68rem .62rem;
    display: flex;
    align-items: center;
    gap: .58rem;
    text-align: left;
    color: var(--rc-text);
    margin-bottom: .14rem;
}
.ts-cashier:hover {
    background: #f7f8ff;
}
.ts-cashier.active {
    background: var(--rc-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.16);
}
.ts-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg,#6d5dfc,#2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .67rem;
    font-weight: 800;
    flex: 0 0 34px;
}
.ts-cashier-name {
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.15;
}
.ts-cashier-meta {
    font-size: .61rem;
    color: var(--rc-muted);
    margin-top: .15rem;
}
.ts-count {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #eef0ff;
    color: var(--rc-primary-deep);
    font-size: .61rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.ts-page) .nav-pills .nav-link {
    font-size: .66rem;
    font-weight: 750;
    color: #687386;
    border-radius: 7px;
}
:where(.ts-page) .nav-pills .nav-link.active {
    background: var(--rc-primary-soft);
    color: var(--rc-primary-deep);
}
@media (max-width:991.98px) {
    .ts-grid-2 {
        grid-template-columns: 1fr;
    }
    .ts-cashier-list {
        max-height: 250px;
    }
}

/* OR stub registry details. */
.afr-sources {
    display: flex;
    align-items: center;
    gap: .28rem;
    flex-wrap: wrap;
}
.afr-source {
    display: inline-flex;
    align-items: center;
    padding: .18rem .4rem;
    border-radius: 999px;
    background: #f4f6fb;
    color: #596579;
    font-size: .58rem;
    font-weight: 750;
    border: 1px solid #e7eaf1;
}
.afr-tabs-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: .8rem;
}
.afr-source-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    min-height: 38px;
    padding: .48rem .58rem;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin: 0;
}
.afr-source-check:hover {
    background: #fafbff;
    border-color: #d8dcff;
}
.afr-source-check .form-check-input {
    position: static;
    float: none;
    margin: 0 !important;
    flex: 0 0 auto;
}
.afr-source-check .form-check-label {
    font-size: .66rem;
    font-weight: 700;
    color: var(--rc-text);
    margin: 0;
}
.ts-cashier-list-stubs {
    --ts-cashier-list-offset: 285px;
}

/* settings/fee-settings/business-permit-licensing-fee/business-permit-licensing-fee-main.php */
.bplf-transaction-tabs {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.bplf-transaction-tab {
    border: 1px solid var(--rc-border);
    background: #fff;
    color: #667085;
    border-radius: 8px;
    padding: .46rem .7rem;
    font-size: .7rem;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
}
.bplf-transaction-tab:hover {
    background: var(--rc-primary-soft);
    border-color: #d8dcff;
    color: var(--rc-primary-deep);
}
.bplf-transaction-tab.active {
    background: var(--rc-primary);
    border-color: var(--rc-primary);
    color: #fff;
}
.bplf-type {
    display: inline-flex;
    align-items: center;
    padding: .2rem .42rem;
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 750;
    white-space: nowrap;
    background: #f3f4f7;
    color: #5f6b7a;
}
.bplf-type.regulatory {
    background: #eaf3ff;
    color: #2563eb;
}
.bplf-type.tax {
    background: #eeeaff;
    color: #5b3fc1;
}
.bplf-type.service {
    background: #eaf8f1;
    color: #16824b;
}
.bplf-type.other {
    background: #fff5df;
    color: #9b6900;
}
.bplf-money {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
    text-align: right;
}
.bplf-amount-type {
    display: inline-flex;
    align-items: center;
    padding: .2rem .42rem;
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 750;
    white-space: nowrap;
}
.bplf-amount-type.fixed {
    background: #eef2ff;
    color: #4338ca;
}
.bplf-amount-type.assessment {
    background: #fff5df;
    color: #9b6900;
}
.bplf-penalty {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bplf-penalty-value {
    font-size: .69rem;
    font-weight: 750;
    color: #394150;
}
@media (max-width:991.98px) {
    .bplf-filter-row {
        align-items: stretch !important;
    }
    .bplf-filter-row>.d-flex {
        width: 100%;
    }
    .bplf-filter-row .ts-toolbar-group {
        justify-content: flex-start !important;
        width: 100%;
    }
}
@media (max-width:767.98px) {
    .bplf-transaction-tabs {
        align-items: stretch;
    }
    .bplf-transaction-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
    .bplf-filter-row .ts-search {
        min-width: 100%;
    }
    .bplf-filter-row .form-select {
        flex: 1 1 140px;
    }
}

/* remittance/remittance-main.php */
.rcd-paper {
    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--rc-font-family);
    font-size: .7rem;
    line-height: 1.15;
}
.rcd-paper * {
    box-sizing: border-box;
}
.rcd-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .22rem;
}
.rcd-meta {
    display: grid;
    grid-template-columns: 1fr .42fr;
}
.rcd-meta-row {
    display: flex;
    gap: .55rem;
    align-items: center;
    min-height: 1.35rem;
}
.rcd-label,.rcd-value {
    font-weight: 800;
}
.rcd-label {
    white-space: nowrap;
}
.rcd-section-title,.rcd-subtitle {
    font-weight: 800;
}
.rcd-paper table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}
.rcd-paper th,.rcd-paper td {
    padding: .18rem .25rem;
    vertical-align: middle;
}
.rcd-paper th {
    font-weight: 700;
    text-align: center;
}
.rcd-total-label {
    text-align: center;
    font-weight: 800;
}
.rcd-amount {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}
.rcd-empty-row td {
    height: 1.2rem;
}
.rcd-accountability th,.rcd-accountability td {
    font-size: .64rem;
    padding: .13rem .16rem;
    text-align: center;
}
.rcd-accountability td:first-child {
    text-align: left;
    font-weight: 700;
}
.rcd-summary {
    display: grid;
    grid-template-columns: 1.28fr .9fr;
}
.rcd-summary-left {
    padding: .3rem .35rem .42rem;
}
.rcd-summary-right {
    padding: .25rem .28rem .35rem;
}
.rcd-summary-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: .5rem;
    align-items: end;
    min-height: 1.18rem;
}
.rcd-line {
    text-align: right;
    font-weight: 700;
    padding: 0 .12rem .08rem;
}
.rcd-indent {
    padding-left: 2.3rem;
}
.rcd-summary-total {
    font-weight: 800;
}
.rcd-cert-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.25rem;
}
.rcd-cert {
    min-height: 145px;
    padding: .55rem .55rem .35rem;
    text-align: center;
}
.rcd-cert-title {
    text-align: left;
    font-weight: 400;
    margin-bottom: .2rem;
}
.rcd-cert-text {
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.45;
}
.rcd-signature {
    margin-top: 2.3rem;
}
.rcd-signature-name {
    font-weight: 800;
    padding-bottom: .08rem;
}
.rcd-signature-role {
    font-weight: 800;
    font-size: .68rem;
    padding-top: .08rem;
}
.rcd-ack-line {
    display: inline-block;
    min-width: 135px;
    text-align: right;
    padding: 0 .25rem .08rem;
}
@media (max-width:767.98px) {
    .rcd-paper {
        min-width: 900px;
    }
    .rcd-document-scroll {
        overflow-x: auto;
    }
    .rcd-title {
        font-size: .9rem;
    }
}

/* user-guide/user-guide-main.php */
.tr-ug-page {
    --ug-primary: #4f46e5;
    --ug-blue: #2563eb;
    --ug-primary-dark: #3730a3;
    --ug-text: #1f2937;
    --ug-muted: #64748b;
    --ug-border: #e5e7eb;
    --ug-soft: #f8fafc;
    --ug-soft-blue: #eef2ff;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4px 4px 42px;
    font-size: .78rem;
    color: var(--ug-text);
}
.tr-ug-page * {
    box-sizing: border-box;
    font-size: max(.7rem,inherit);
}
.tr-ug-header {
    display: flex;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ug-border);
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.tr-ug-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.25;
}
.tr-ug-subtitle {
    max-width: 900px;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--ug-muted);
    line-height: 1.7;
}
.tr-ug-version {
    padding: 5px 9px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--ug-primary);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}
.tr-ug-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    gap: 44px;
    align-items: start;
}
.tr-ug-content {
    min-width: 0;
    padding: 24px 26px;
    background: #fff;
    border-radius: 11px;
}
.tr-ug-section {
    scroll-margin-top: 78px;
}
.tr-ug-card {
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.tr-ug-card+.tr-ug-card {
    margin-top: 66px;
}
.tr-ug-card-header {
    display: block;
    padding: 0 0 12px;
    background: transparent;
    border: 0;
}
.tr-ug-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.35;
    color: #172033;
}
.tr-ug-card-body {
    padding: 0;
}
.tr-ug-lead {
    margin: 0;
    color: #475569;
    font-size: .78rem;
    line-height: 1.82;
}
.tr-ug-subhead {
    margin: 22px 0 9px;
    font-size: .84rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-small {
    font-size: .7rem;
    color: var(--ug-muted);
    line-height: 1.6;
}
.tr-ug-note {
    padding: 0 0 0 12px;
    margin: 16px 0;
    color: #475569;
    background: transparent;
    border: 0;
    border-left: 3px solid #a5b4fc;
    border-radius: 0;
    font-size: .75rem;
    line-height: 1.72;
}
.tr-ug-note strong {
    color: #334155;
}
.tr-ug-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 12px;
}
.tr-ug-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 12px;
}
.tr-ug-module {
    padding: 13px 14px;
    border: 1px solid var(--ug-border);
    border-radius: 9px;
    background: #fff;
}
.tr-ug-module-title {
    font-size: .78rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-module-text {
    margin-top: 4px;
    font-size: .74rem;
    color: var(--ug-muted);
    line-height: 1.62;
}
.tr-ug-module-meta {
    margin-top: 8px;
    font-size: .7rem;
    font-weight: 800;
    color: var(--ug-primary);
}
.tr-ug-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid var(--ug-border);
    border-radius: 8px;
}
.tr-ug-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: collapse;
    font-size: .71rem;
}
.tr-ug-table th {
    padding: 9px 10px;
    background: #f8fafc;
    color: #334155;
    font-size: .7rem;
    font-weight: 900;
    text-align: left;
    border-bottom: 1px solid var(--ug-border);
}
.tr-ug-table td {
    padding: 9px 10px;
    color: #52606d;
    vertical-align: top;
    border-bottom: 1px solid #eef2f7;
    line-height: 1.55;
}
.tr-ug-table tr:last-child td {
    border-bottom: 0;
}
.tr-ug-list {
    margin: 8px 0 0;
    padding-left: 19px;
    color: #52606d;
    font-size: .75rem;
    line-height: 1.72;
}
.tr-ug-list li+li {
    margin-top: 4px;
}
.tr-ug-steps {
    counter-reset: trugstep;
    display: block;
}
.tr-ug-step {
    position: relative;
    padding: 0 0 15px 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.tr-ug-step:last-child {
    padding-bottom: 0;
}
.tr-ug-step::before {
    counter-increment: trugstep;
    content: counter(trugstep);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    background: linear-gradient(135deg,var(--ug-primary),var(--ug-blue));
    border-radius: 50%;
    line-height: 1;
}
.tr-ug-step-title {
    font-weight: 900;
    font-size: .76rem;
    line-height: 1.45;
}
.tr-ug-step-text {
    margin-top: 4px;
    color: var(--ug-muted);
    font-size: .74rem;
    line-height: 1.65;
}
.tr-ug-flow {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin-top: 13px;
    padding: 13px;
    border: 1px solid var(--ug-border);
    border-radius: 9px;
    background: #fafbff;
    overflow-x: auto;
}
.tr-ug-flow-box {
    min-width: 132px;
    flex: 1 1 132px;
    padding: 10px 9px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-align: center;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.4;
}
.tr-ug-flow-box.system {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
}
.tr-ug-flow-box.action {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.tr-ug-flow-arrow {
    display: grid;
    place-items: center;
    min-width: 22px;
    color: #64748b;
    font-size: .9rem;
    font-weight: 900;
}
.tr-ug-screen-map {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
    padding: 11px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #fcfdff;
}
.tr-ug-screen-cell {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
}
.tr-ug-screen-label {
    font-size: .7rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-screen-text {
    margin-top: 3px;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.45;
}
.tr-ug-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 9px;
}
.tr-ug-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: .7rem;
    font-weight: 800;
}
.tr-ug-image-card {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--ug-border);
    border-radius: 10px;
    background: #fbfcff;
}
.tr-ug-image-title {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-image-wrap {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.tr-ug-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.tr-ug-image-caption {
    margin-top: 8px;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.55;
}
.tr-ug-topic-panel {
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 86px);
    padding-left: 18px;
    background: transparent;
    border-left: 1px solid var(--ug-border);
    overflow: visible;
}
.tr-ug-topic-header {
    padding: 0 0 10px;
}
.tr-ug-topic-title {
    font-size: .75rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-topic-sub {
    margin-top: 2px;
    color: var(--ug-muted);
    font-size: .7rem;
}
.tr-ug-topic-body {
    max-height: calc(100vh - 135px);
    padding: 0;
    overflow: auto;
}
.tr-ug-topic-link {
    display: block;
    width: 100%;
    padding: 4px 0;
    color: #64748b;
    font-size: .71rem;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
}
.tr-ug-topic-link:hover {
    color: var(--ug-primary);
}
.tr-ug-topic-group {
    margin: 6px 0;
}
.tr-ug-topic-group summary {
    display: block;
    padding: 4px 0;
    color: #334155;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}
.tr-ug-topic-group summary::-webkit-details-marker {
    display: none;
}
.tr-ug-topic-group summary:hover {
    color: var(--ug-primary);
}
.tr-ug-topic-children {
    padding-left: 12px;
    border-left: 1px solid #eef2f7;
}
.tr-ug-topic-divider {
    height: 1px;
    margin: 9px 0;
    background: #eef2f7;
}
.tr-ug-topic-link.active {
    color: var(--ug-primary);
    font-weight: 900;
}
.tr-ug-page:not(:has(.tr-ug-section:target)) .tr-ug-topic-link[href="#tr-ug-overview"] {
    color: var(--ug-primary);
    font-weight: 900;
}
@media (max-width:991.98px) {
    .tr-ug-page {
        max-width: 940px;
    }
    .tr-ug-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tr-ug-topic-panel {
        position: relative;
        top: auto;
        max-height: none;
        padding: 0 0 12px;
        border-left: 0;
        border-bottom: 1px solid var(--ug-border);
        order: -1;
    }
    .tr-ug-topic-body {
        max-height: 300px;
    }
    .tr-ug-screen-map,.tr-ug-grid-3 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width:767.98px) {
    .tr-ug-grid,.tr-ug-grid-3,.tr-ug-screen-map {
        grid-template-columns: 1fr;
    }
    .tr-ug-flow {
        align-items: stretch;
        flex-direction: column;
    }
    .tr-ug-flow-arrow {
        transform: rotate(90deg);
    }
}
@media (max-width:575.98px) {
    .tr-ug-page {
        padding-left: 2px;
        padding-right: 2px;
    }
    .tr-ug-header {
        flex-direction: column;
    }
    .tr-ug-content {
        padding: 17px 14px;
    }
    .tr-ug-card+.tr-ug-card {
        margin-top: 46px;
    }
}
.tr-ug-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 12px;
}
.tr-ug-detail-box {
    padding: 13px 14px;
    border: 1px solid var(--ug-border);
    border-radius: 9px;
    background: #fcfdff;
}
.tr-ug-detail-label {
    font-size: .72rem;
    font-weight: 900;
    color: var(--ug-primary-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tr-ug-detail-text {
    margin-top: 5px;
    color: #52606d;
    font-size: .75rem;
    line-height: 1.65;
}
.tr-ug-role-row {
    display: grid;
    grid-template-columns: 170px minmax(0,1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}
.tr-ug-role-row:last-child {
    border-bottom: 0;
}
.tr-ug-role-name {
    font-size: .74rem;
    font-weight: 900;
    color: #334155;
}
.tr-ug-role-text {
    font-size: .74rem;
    color: #64748b;
    line-height: 1.6;
}
.tr-ug-flow-caption {
    margin-top: 7px;
    color: #64748b;
    font-size: .72rem;
    line-height: 1.6;
}
@media (max-width:767.98px) {
    .tr-ug-detail-grid {
        grid-template-columns: 1fr;
    }
    .tr-ug-role-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Login screen. */
:root:where(.treasury-login) {
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eef5ff;
    --text: #172033;
    --border: #dce6f3;
    --field: #f8faff;
    --dark-green: #0f3319;
    --light-green: #a2e048;
}
:where(.treasury-login), :where(.treasury-login) * {
    box-sizing: border-box;
}
:where(.treasury-login) body {
    background: linear-gradient(135deg, #f7faeb 0%, #e2f0d9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: var(--rc-font-family);
}

/* =========================
           LOGIN CARD
        ========================= */
:where(.treasury-login) .login-card {
    background-color: var(--dark-green);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(15, 51, 25, 0.15);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}

/* =========================
           LOGIN HEADER
        ========================= */
:where(.treasury-login) .login-header {
    padding: 40px 30px 10px;
    text-align: center;
}
:where(.treasury-login) .login-header h2 {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    color: #ffffff;
}
:where(.treasury-login) .login-header p {
    color: #8da995;
    font-size: 0.85rem;
    margin-bottom: 0;
    font-weight: 500;
}
:where(.treasury-login) .login-header h3 {
    color: #ffffff;
}

/* =========================
           RECYCLE ICON
        ========================= */
:where(.treasury-login) .icon-container {
    background-color: var(--light-green);
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
:where(.treasury-login) .icon-container svg {
    width: 32px;
    height: 32px;
    fill: var(--dark-green);
}

/* =========================
           LOGIN BODY
        ========================= */
:where(.treasury-login) .login-body {
    padding: 20px 30px 30px;
}

/* =========================
           FORM GROUP
        ========================= */
:where(.treasury-login) .form-group {
    margin-bottom: 15px;
}

/* =========================
           FORM LABEL
        ========================= */
:where(.treasury-login) .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff !important;
}

/* =========================
           FIELD WRAPPER
        ========================= */
:where(.treasury-login) .field-wrap {
    position: relative;
}

/* =========================
           LEFT INPUT ICON
        ========================= */
:where(.treasury-login) .field-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #8a98af;
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* =========================
           LOGIN INPUT
        ========================= */
:where(.treasury-login) .login-input {
    width: 100%;
    height: 45px;
    padding: 9px 42px 9px 38px;
    font-size: 12px;
    font-family: var(--rc-font-family);
    color: #172033 !important;
    background: #f8faff;
    border: 1px solid #dce6f3;
    border-radius: 11px;
    outline: none;
    transition: border-color 0.16s ease,
                box-shadow 0.16s ease,
                background 0.16s ease;
}
:where(.treasury-login) .login-input::placeholder {
    color: #9ba7b9 !important;
    opacity: 1;
}
:where(.treasury-login) .login-input:focus {
    color: #172033 !important;
    background: #ffffff;
    border-color: #7da8f7;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

/* =========================
           PASSWORD TOGGLE
        ========================= */
:where(.treasury-login) .password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #69778e;
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 0.16s ease,
                background 0.16s ease;
}
:where(.treasury-login) .password-toggle:hover {
    color: var(--blue);
    background: var(--blue-soft);
}
:where(.treasury-login) .password-toggle:focus {
    outline: none;
}
:where(.treasury-login) .password-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
}
:where(.treasury-login) .password-toggle i {
    font-size: 14px;
    line-height: 1;
}

/* =========================
           LOGIN OPTIONS
        ========================= */
:where(.treasury-login) .login-options {
    display: flex;
    margin: 3px 0 19px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* =========================
           REMEMBER ME
        ========================= */
:where(.treasury-login) .form-check {
    display: flex;
    min-height: 0;
    margin: 0;
    align-items: center;
    gap: 7px;
}
:where(.treasury-login) .form-check-input {
    width: 15px;
    height: 15px;
    margin: 0;
    border-color: #b9c5d8;
    box-shadow: none !important;
}
:where(.treasury-login) .form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
:where(.treasury-login) .form-check-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
:where(.treasury-login) .form-check-label {
    font-size: 10px;
    color: #ffffff !important;
    cursor: pointer;
}

/* =========================
           FORGOT PASSWORD
        ========================= */
:where(.treasury-login) .forgot-link {
    font-size: 10px;
    font-weight: 700;
    color: var(--blue) !important;
    text-decoration: none;
}
:where(.treasury-login) .forgot-link:hover {
    color: var(--blue-dark) !important;
    text-decoration: underline;
}

/* =========================
           LOGIN BUTTON
        ========================= */
:where(.treasury-login) .login-btn {
    display: flex;
    width: 100%;
    height: 45px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--rc-font-family);
    color: #ffffff !important;
    background: linear-gradient(
                135deg,
                var(--blue),
                #347cf0
            );
    border: 1px solid var(--blue);
    border-radius: 11px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
    cursor: pointer;
    transition: transform 0.16s ease,
                box-shadow 0.16s ease,
                filter 0.16s ease;
}
:where(.treasury-login) .login-btn:hover {
    color: #ffffff !important;
    box-shadow: 0 13px 27px rgba(37, 99, 235, 0.3);
    filter: brightness(0.98);
    transform: translateY(-1px);
}
:where(.treasury-login) .login-btn:focus {
    color: #ffffff !important;
}
:where(.treasury-login) .login-btn:active {
    color: #ffffff !important;
    transform: translateY(0);
}
:where(.treasury-login) .login-btn i {
    font-size: 14px;
}

/* =========================
           POWERED BY
        ========================= */
:where(.treasury-login) .powered-by {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 500;
    color: #6c8c76;
    margin-top: 25px;
    letter-spacing: 0.5px;
}

/* =========================
           MOBILE
        ========================= */
@media (max-width: 575.98px) {
    :where(.treasury-login) .login-card {
        max-width: 100%;
    }
    :where(.treasury-login) .login-header {
        padding: 30px 20px 10px;
    }
    :where(.treasury-login) .login-body {
        padding: 20px;
    }
    :where(.treasury-login) .login-input {
        font-size: 16px;
    }
    :where(.treasury-login) .login-options {
        gap: 8px;
    }
    :where(.treasury-login) .form-check-label,
            :where(.treasury-login) .forgot-link {
        font-size: 10px;
    }
}

/* Password recovery. */
:where(.treasury-forgot), :where(.treasury-forgot) *, :where(.treasury-reset-invalid), :where(.treasury-reset-invalid) *, :where(.treasury-reset), :where(.treasury-reset) * {
    box-sizing: border-box;
    font-family: var(--rc-font-family);
}
:where(.treasury-forgot) body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#1e3c72,#2a5298);
}
:where(.treasury-forgot) .forgot-box {
    width: 400px;
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
}
:where(.treasury-forgot) h2, :where(.treasury-reset) h2 {
    text-align: center;
    color: #1e3c72;
    margin-bottom: 10px;
}
:where(.treasury-forgot) p {
    text-align: center;
    color: #777;
    font-size: 14px;
    margin-bottom: 25px;
}
:where(.treasury-forgot) .form-group {
    margin-bottom: 20px;
}
:where(.treasury-forgot) .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #444;
}
:where(.treasury-forgot) .form-group input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    outline: none;
}
:where(.treasury-forgot) .form-group input:focus, :where(.treasury-reset) .form-group input:focus {
    border-color: #2a5298;
}
:where(.treasury-forgot) button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #2a5298;
    color: white;
    font-size: 15px;
    cursor: pointer;
}
:where(.treasury-forgot) button:hover, :where(.treasury-reset) button:hover {
    background: #1e3c72;
}
:where(.treasury-forgot) button:disabled {
    cursor: not-allowed;
    opacity: .7;
}
:where(.treasury-forgot) .back-login {
    text-align: center;
    margin-top: 20px;
}
:where(.treasury-forgot) .back-login a {
    color: #2a5298;
    text-decoration: none;
    font-size: 14px;
}
:where(.treasury-forgot) .alert {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
}
:where(.treasury-forgot) .alert-error {
    background: #ffe5e5;
    color: #d32f2f;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
}
:where(.treasury-forgot) .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
:where(.treasury-forgot) .gmail-btn {
    display: block;
    text-align: center;
    padding: 12px;
    background: #1a73e8;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* Invalid reset link. */
:where(.treasury-reset-invalid) body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#1e3c72,#2a5298);
}
:where(.treasury-reset-invalid) .message-box {
    width: 400px;
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
    text-align: center;
}
:where(.treasury-reset-invalid) .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #ffe5e5;
    color: #d32f2f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
:where(.treasury-reset-invalid) h2 {
    color: #1e3c72;
    margin-bottom: 15px;
}
:where(.treasury-reset-invalid) p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}
:where(.treasury-reset-invalid) .btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #2a5298;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: .3s;
}
:where(.treasury-reset-invalid) .btn:hover {
    background: #1e3c72;
}

/* Password reset form. */
:where(.treasury-reset) body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#1e3c72,#2a5298);
}
:where(.treasury-reset) .reset-box {
    width: 400px;
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
}
:where(.treasury-reset) p {
    text-align: center;
    color: #777;
    font-size: 14px;
    margin-bottom: 25px;
}
:where(.treasury-reset) .form-group {
    margin-bottom: 18px;
}
:where(.treasury-reset) .form-group label {
    display: block;
    margin-bottom: 6px;
    color: #444;
    font-size: 14px;
}
:where(.treasury-reset) .form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-size: 15px;
}
:where(.treasury-reset) button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #2a5298;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
:where(.treasury-reset) .back-login {
    text-align: center;
    margin-top: 20px;
}
:where(.treasury-reset) .back-login a {
    text-decoration: none;
    color: #2a5298;
}
:where(.treasury-reset) .alert-error {
    background: #ffe5e5;
    color: #d32f2f;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
}
:where(.treasury-reset) .password-wrapper {
    position: relative;
}
:where(.treasury-reset) .password-wrapper input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-size: 15px;
}
:where(.treasury-reset) .toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #777;
    user-select: none;
}
:where(.treasury-reset) .toggle-password:hover {
    color: #2a5298;
}

/* includes/ui/loader.php */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    user-select: none;
    pointer-events: all;
}

/* Optional animation */
#loadingOverlay .spinner-border {
    animation-duration: .8s;
}

/* Prevent scrolling habang loading */
body.loading-active {
    overflow: hidden;
}

/* includes/ui/loader.php */
.loading-wrapper {
    text-align: center;
    padding: 20px;
}
.rc-loading-spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #ddd;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: rcLoadingSpin .8s linear infinite;
}
@keyframes rcLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

/* includes/ui/toast.php */
.hd-feedback-page,
  .hd-feedback-modal,
  .hd-feedback-toast {
    --hd-primary: #6366f1;
    --hd-primary-dark: #4f46e5;
    --hd-primary-soft: #eef2ff;
    --hd-surface: #ffffff;
    --hd-surface-soft: #f8fafc;
    --hd-text: #172033;
    --hd-muted: #64748b;
    --hd-border: #e5e7eb;
    --hd-shadow: 0 12px 30px rgba(15,23,42,.10);
}
.hd-feedback-page {
    color: var(--hd-text);
}
.hd-feedback-page .text-secondary {
    color: var(--hd-muted) !important;
}
.hd-feedback-page .text-body-secondary {
    color: var(--hd-muted) !important;
}
.hd-feedback-page .doc-card {
    padding: .85rem .9rem 1rem;
    margin-bottom: 1rem;
    background: var(--hd-surface);
    border: 1px solid var(--hd-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
.hd-feedback-page .doc-card h5 {
    display: flex;
    margin-bottom: .4rem;
    color: var(--hd-text);
    font-size: .82rem;
    font-weight: 800;
    align-items: center;
    gap: .4rem;
}
.hd-feedback-page .code-hint {
    padding: .45rem .65rem;
    color: #475569;
    font-family: var(--rc-font-family);
    font-size: .7rem;
    line-height: 1.4;
    background: var(--hd-surface-soft);
    border: 1px solid var(--hd-border);
    border-radius: 8px;
    word-break: break-word;
}
.hd-feedback-page .doc-btn-row .btn {
    min-width: 180px;
    font-size: .7rem;
}
.hd-feedback-toast.toast-pos-top-end {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
}
.hd-feedback-toast.toast-pos-center {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    transform: translate(-50%,-50%);
}
.hd-feedback-toast.toast {
    min-width: 300px;
    max-width: 380px;
    color: var(--hd-text) !important;
    background: var(--hd-surface) !important;
    border: 1px solid var(--hd-border) !important;
    border-left: 4px solid var(--hd-primary) !important;
    border-radius: 11px !important;
    box-shadow: var(--hd-shadow) !important;
    overflow: hidden;
}
.hd-feedback-toast.toast .toast-body {
    padding: .65rem .7rem;
    color: var(--hd-text) !important;
    font-size: .7rem;
}
.hd-feedback-toast.toast .toast-body>i {
    font-size: .95rem !important;
}
.hd-feedback-toast.toast .btn-close {
    filter: none !important;
    opacity: .55;
}
.hd-feedback-toast.toast .btn-close:hover {
    opacity: .8;
}
.hd-feedback-toast.toast #toastTopRightTitle,
  .hd-feedback-toast.toast #toastCenterTitle {
    color: var(--hd-text);
    font-size: .72rem;
    font-weight: 800;
}
.hd-feedback-toast.toast #toastTopRightMsg,
  .hd-feedback-toast.toast #toastCenterMsg {
    margin-top: 1px;
    color: var(--hd-muted);
    font-size: .68rem !important;
}
.hd-feedback-toast.text-bg-success {
    background: var(--hd-surface) !important;
    border-left-color: #10b981 !important;
}
.hd-feedback-toast.text-bg-success .toast-body>i {
    color: #059669 !important;
}
.hd-feedback-toast.text-bg-danger {
    background: var(--hd-surface) !important;
    border-left-color: #ef4444 !important;
}
.hd-feedback-toast.text-bg-danger .toast-body>i {
    color: #dc2626 !important;
}
.hd-feedback-toast.text-bg-primary {
    background: var(--hd-surface) !important;
    border-left-color: var(--hd-primary) !important;
}
.hd-feedback-toast.text-bg-primary .toast-body>i {
    color: var(--hd-primary) !important;
}
.hd-feedback-toast.text-bg-warning {
    color: var(--hd-text) !important;
    background: var(--hd-surface) !important;
    border-left-color: #f59e0b !important;
}
.hd-feedback-toast.text-bg-warning .toast-body>i {
    color: #d97706 !important;
}
.hd-feedback-toast.text-bg-info {
    color: var(--hd-text) !important;
    background: var(--hd-surface) !important;
    border-left-color: #0ea5e9 !important;
}
.hd-feedback-toast.text-bg-info .toast-body>i {
    color: #0284c7 !important;
}
.hd-feedback-modal .modal-dialog {
    font-size: .7rem;
}
.hd-feedback-modal .modal-content {
    color: var(--hd-text) !important;
    background: var(--hd-surface) !important;
    border: 1px solid var(--hd-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.14) !important;
}
.hd-feedback-modal .modal-header {
    padding: .7rem .8rem .35rem;
    background: transparent !important;
    border-bottom: 0 !important;
}
.hd-feedback-modal .modal-body {
    padding: .55rem .8rem .7rem;
}
.hd-feedback-modal .modal-footer {
    padding: .35rem .8rem .75rem;
    background: transparent !important;
    border-top: 0 !important;
}
.hd-feedback-modal .modal-title {
    color: var(--hd-text) !important;
    font-size: .78rem !important;
}
.hd-feedback-modal .modal-title i {
    font-size: .9rem !important;
}
.hd-feedback-modal .text-secondary {
    color: var(--hd-muted) !important;
}
.hd-feedback-modal .btn-close {
    filter: none !important;
    opacity: .55;
}
.hd-feedback-modal .btn-close:hover {
    opacity: .8;
}
.hd-feedback-modal .btn {
    font-size: .68rem;
    padding: .33rem .58rem;
    border-radius: 7px;
}
.hd-feedback-modal .alert {
    padding: .5rem .6rem !important;
    color: #475569 !important;
    font-size: .68rem !important;
    line-height: 1.4;
    background: var(--hd-surface-soft) !important;
    border: 1px solid var(--hd-border) !important;
    border-radius: 8px;
}
.hd-feedback-modal .alert-warning {
    color: #854d0e !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}
.hd-feedback-modal .alert-danger {
    color: #991b1b !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}
.hd-feedback-page .btn.btn-secondary,
  .hd-feedback-modal .btn.btn-secondary {
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #dbe2ea !important;
}
.hd-feedback-page .btn.btn-secondary:hover,
  .hd-feedback-modal .btn.btn-secondary:hover {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
.hd-feedback-page .btn.btn-outline-secondary,
  .hd-feedback-modal .btn.btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: #cbd5e1 !important;
}
.hd-feedback-page .btn.btn-outline-secondary:hover,
  .hd-feedback-modal .btn.btn-outline-secondary:hover {
    color: #334155 !important;
    background: #f8fafc !important;
}
.hd-feedback-modal .btn.btn-primary {
    color: #fff !important;
    background: var(--hd-primary) !important;
    border-color: var(--hd-primary) !important;
}
.hd-feedback-modal .btn.btn-primary:hover {
    background: var(--hd-primary-dark) !important;
    border-color: var(--hd-primary-dark) !important;
}
body:has(.hd-feedback-modal.show) .modal-backdrop.show {
    background: #64748b !important;
    opacity: .20 !important;
}

/* Reusable presentation utilities (replacing static inline styles). */
.rc-fs-56rem {
    font-size: .56rem !important;
}
.rc-opacity-7 {
    opacity: .7 !important;
}
.sso-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7faeb;
    color: #0f3319;
    font-family: var(--rc-font-family);
}
.sso-overlay-message {
    font-size: 24px;
    font-weight: 700;
}
.sso-message {
    text-align: center;
    max-width: 420px;
    padding: 30px;
}
.sso-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 18px;
    background: #a2e048;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(15, 51, 25, 0.12);
}
.rc-fs-40px {
    font-size: 40px !important;
}
.rc-text-0f3319 {
    color: #0f3319 !important;
}
.sso-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}
.sso-description {
    font-size: 14px;
    font-weight: 500;
    color: #6c8c76;
    margin-bottom: 24px;
}
.sso-return-link {
    background: #0f3319;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.rc-w-120px {
    width: 120px !important;
}
.rc-w-220px {
    width: 220px !important;
}
.rc-w-95px {
    width: 95px !important;
}
.rc-w-85px {
    width: 85px !important;
}
.rc-w-165px {
    width: 165px !important;
}
.rc-w-145px {
    width: 145px !important;
}
.rc-w-60px {
    width: 60px !important;
}
.rc-w-155px {
    width: 155px !important;
}
.rc-w-130px {
    width: 130px !important;
}
.rc-w-110px {
    width: 110px !important;
}
.rc-w-105px {
    width: 105px !important;
}
.rc-w-225px {
    width: 225px !important;
}
.rc-w-82px {
    width: 82px !important;
}
.rc-w-100px {
    width: 100px !important;
}
.rc-w-71-5pct {
    width: 71.5% !important;
}
.rc-w-77-3pct {
    width: 77.3% !important;
}
.rc-w-73-5pct {
    width: 73.5% !important;
}
.rc-w-74-7pct {
    width: 74.7% !important;
}
.rc-w-73-8pct {
    width: 73.8% !important;
}
.rc-w-70-7pct {
    width: 70.7% !important;
}
.rc-w-13pct {
    width: 13% !important;
}
.rc-w-22pct {
    width: 22% !important;
}
.rc-w-18pct {
    width: 18% !important;
}
.rc-remittance-panel {
    width: min(980px,96vw) !important;
}
.rc-w-92pct {
    width: 92% !important;
}
.rc-w-63pct {
    width: 63% !important;
}
.rc-w-37pct {
    width: 37% !important;
}
.rc-donut-64 {
    --p: 64;
}
.rc-w-85-8pct {
    width: 85.8% !important;
}
.rc-h-100pct {
    height: 100% !important;
}
.rc-h-86pct {
    height: 86% !important;
}
.rc-h-54pct {
    height: 54% !important;
}
.rc-h-70pct {
    height: 70% !important;
}
.rc-h-34pct {
    height: 34% !important;
}
.rc-w-100pct {
    width: 100% !important;
}
.rc-w-90pct {
    width: 90% !important;
}
.rc-w-62-4pct {
    width: 62.4% !important;
}
.rc-w-65pct {
    width: 65% !important;
}
.rc-w-48-7pct {
    width: 48.7% !important;
}
.rc-w-48pct {
    width: 48% !important;
}
.rc-h-56pct {
    height: 56% !important;
}
.rc-h-41pct {
    height: 41% !important;
}
.rc-h-24pct {
    height: 24% !important;
}
.rc-h-92pct {
    height: 92% !important;
}
.rc-h-19pct {
    height: 19% !important;
}
.rc-h-11pct {
    height: 11% !important;
}
.rc-donut-91 {
    --p: 91;
}
.rc-w-88pct {
    width: 88% !important;
}
.rc-w-61pct {
    width: 61% !important;
}
.rc-w-42pct {
    width: 42% !important;
}
.rc-w-31pct {
    width: 31% !important;
}
.sso-error-message {
    text-align: center;
    padding: 30px;
}
.sso-error-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.sso-error-description {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.8;
}
.sso-return-button {
    border: none;
    background: #0f3319;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--rc-font-family);
    font-weight: 700;
    cursor: pointer;
}
.rc-fs-9rem {
    font-size: .9rem !important;
}
.rc-fs-2rem {
    font-size: 2rem !important;
}
.rc-max-w-420px {
    max-width: 420px !important;
}
.rc-text-black {
    color: black !important;
}
.rc-text-red {
    color: red !important;
}
.rc-h-67pct {
    height: 67% !important;
}
.rc-h-38pct {
    height: 38% !important;
}
.rc-h-27pct {
    height: 27% !important;
}
.rc-h-16pct {
    height: 16% !important;
}
.rc-donut-96-4 {
    --p: 96.4;
}
.rc-h-78pct {
    height: 78% !important;
}
.rc-h-42pct {
    height: 42% !important;
}
.rc-h-12pct {
    height: 12% !important;
}
.rc-h-7pct {
    height: 7% !important;
}
.rc-ring-value-84-6 {
    --pct: 84.6;
}
.rc-ring-color-7c3aed {
    --ring-color: #7c3aed;
}
.rc-ring-value-98 {
    --pct: 98;
}
.rc-ring-color-2563eb {
    --ring-color: #2563eb;
}
.rc-h-57pct {
    height: 57% !important;
}
.rc-h-72pct {
    height: 72% !important;
}
.rc-h-63pct {
    height: 63% !important;
}
.rc-h-60pct {
    height: 60% !important;
}
.rc-h-32pct {
    height: 32% !important;
}
.rc-h-44pct {
    height: 44% !important;
}
.rc-bg-ddd6fe {
    background: #ddd6fe !important;
}
.rc-min-w-0 {
    min-width: 0 !important;
}
.rc-approval-empty {
    background: var(--rc-primary-soft);
    color: var(--rc-text);
    border-color: var(--rc-border);
}

/* Shared UI state, file badges, and printing. */
.rc-hidden {
    display: none;
}
.rc-visible {
    display: block;
}
.rc-file-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    padding: 0 8px;
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
}
.rc-bg-orange {
    background: #fd7e14;
}
.rc-bg-purple {
    background: #6f42c1;
}
.rc-print-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 0;
}
.rc-print-expanded {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
@media print {
    .rc-print-preview * {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    .rc-print-preview [print-page] {
        page-break-before: always !important;
    }
}

/* Compact Other Receipts entry; only the modal body scrolls when needed. */
#addOtherReceiptModal .modal-dialog{width:calc(100% - 32px);max-width:1380px;height:calc(100% - 32px);margin:16px auto;}
#otherReceiptForm .modal-body{padding:12px 16px;}
#otherReceiptForm .other-receipt-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr);gap:10px;}
#otherReceiptForm .other-receipt-primary,#otherReceiptForm .other-receipt-secondary{display:flex;flex-direction:column;gap:10px;min-width:0;}
#otherReceiptForm .ts-form-section{padding:10px 12px;margin:0;}
#otherReceiptForm .ts-form-section-title{margin-bottom:8px;}
#otherReceiptForm .ts-label{font-size:11px;margin-bottom:4px;}
#otherReceiptForm .other-receipt-support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:12px;grid-column:1/-1;}
#otherReceiptForm textarea{resize:vertical;}
#otherReceiptDirectBankFields{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:8px;}
#otherReceiptDirectBankFields>div{min-width:0;margin:0!important;}
#otherReceiptDirectBankFields>div:first-child{grid-column:1/-1;}
#otherReceiptGrantFields,#otherReceiptMatches{min-width:0;}
#otherReceiptForm .other-receipt-match{display:grid;grid-template-columns:minmax(0,1fr) 150px 30px;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid var(--rc-border);}
#otherReceiptForm .other-receipt-match>div{min-width:0;}
#otherReceiptForm .receipt-match-remove{margin-top:22px;min-height:34px;padding:4px 7px;}
#otherReceiptForm .receipt-match-name{font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;margin-top:4px;color:#475569;}
#otherReceiptForm .receipt-match-meta{font-size:11px;line-height:1.4;margin-top:4px;color:#64748b;}
#otherReceiptForm .modal-footer{gap:6px;}
@media(max-width:991.98px){#otherReceiptForm .other-receipt-layout{grid-template-columns:minmax(0,1fr);}#otherReceiptForm .other-receipt-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}#otherReceiptDirectBankFields{grid-template-columns:minmax(0,1fr);}}
@media(max-width:575.98px){#addOtherReceiptModal .modal-dialog{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px auto;}#otherReceiptForm .other-receipt-secondary,#otherReceiptForm .other-receipt-support{grid-template-columns:minmax(0,1fr);}#otherReceiptForm .other-receipt-match{grid-template-columns:minmax(0,1fr) 115px 28px;gap:6px;}#otherReceiptForm .modal-footer small{flex-basis:100%;}}