:root { --et-primary: #167d6b; --et-primary-dark: #106354; --et-ink: #17212b; --et-muted: #64748b; --et-border: #e2e8f0; }
html, body { min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--et-ink); background: #f4f7fb; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a, .btn-link { color: var(--et-primary); }
a:hover { color: var(--et-primary-dark); }
h1, h2, h3, h4, h5, h6 { color: #15232f; font-weight: 700; letter-spacing: -.025em; }
h1:focus { outline: none; }
.btn { border-radius: .6rem; font-weight: 600; box-shadow: none; }
.btn-primary { color: #fff; background-color: var(--et-primary); border-color: var(--et-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--et-primary-dark); border-color: var(--et-primary-dark); }
.btn-outline-primary { color: var(--et-primary); border-color: #9bc9c0; }
.btn-outline-primary:hover { background-color: var(--et-primary); border-color: var(--et-primary); }
.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #5ab7a5; box-shadow: 0 0 0 .22rem rgba(22,125,107,.16); }
.card { border: 1px solid var(--et-border); border-radius: .9rem; box-shadow: 0 3px 14px rgba(15,23,42,.045); }
.card-body { padding: 1.25rem; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem .75rem; border-bottom-color: #edf1f5; }
.table thead th { color: var(--et-muted); font-size: .72rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.form-control, .form-select { min-height: 42px; border-color: #d5dde7; border-radius: .6rem; }
.alert { border: 0; border-radius: .75rem; }
.badge { border-radius: .45rem; font-weight: 650; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #dc2626; }
.validation-message { color: #b91c1c; }
.blazor-error-boundary { padding: 1rem; color: white; background: #b42318; border-radius: .75rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
@media (max-width: 768px) { h3 { font-size: 1.35rem; } h4 { font-size: 1.15rem; } .card-body { padding: 1rem; } .btn { min-height: 42px; } .table { font-size: .875rem; } .table th, .table td { white-space: nowrap; vertical-align: middle; } input, select, textarea { font-size: 16px !important; } .mobile-full-width { width: 100%; } .mobile-action-group { display: flex; flex-direction: column; gap: .5rem; } .mobile-action-group .btn, .mobile-action-group a { width: 100%; } }

/* Company users */
.company-users-page { width: 100%; }
.company-users-header { margin-bottom: 1.5rem; }
.company-users-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.company-users-header p, .company-users-card-heading p { margin: 0; color: var(--et-muted); }
.company-users-header p { font-size: .92rem; }
.company-users-card { overflow: hidden; background: #fff; }
.company-users-card > .card-body:not(.p-0) { padding: 1.35rem; }
.company-users-card-heading { margin-bottom: 1.2rem; }
.company-users-card-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.company-users-card-heading p { font-size: .78rem; }
.company-member-add-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(140px, .35fr) auto; align-items: end; gap: .75rem; }
.company-member-add-form .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.company-users-message { margin: 1rem 0 0; padding: .75rem 1rem; font-size: .8rem; }
.company-users-list-heading { margin: 0; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.company-users-table th:first-child, .company-users-table td:first-child { padding-left: 1.35rem; }
.company-users-table th:last-child, .company-users-table td:last-child { padding-right: 1.35rem; }
.company-users-table td { color: #586777; font-size: .82rem; }
.company-member-identity { display: grid; min-width: 190px; }
.company-member-identity strong { color: #23313d; }
.company-member-identity span { color: var(--et-muted); font-size: .72rem; }
.company-role-select { min-width: 120px; }
.company-member-status { display: inline-flex; padding: .3rem .6rem; font-size: .7rem; font-weight: 700; border-radius: 999px; }
.company-member-status.is-active { color: #08705d; background: #e5f5f1; }
.company-member-status.is-inactive { color: #667085; background: #eef1f4; }
.company-member-actions { white-space: nowrap; }
.company-member-actions .btn + .btn { margin-left: .35rem; }
.company-users-empty { padding: 2.5rem 1.25rem; text-align: center; }
.company-users-empty h3 { margin: 0; font-size: .95rem; }

@media (max-width: 767.98px) {
    .company-member-add-form { grid-template-columns: 1fr; }
    .company-member-add-form .btn { width: 100%; }
    .company-users-table-wrap { overflow: visible; }
    .company-users-table thead { display: none; }
    .company-users-table, .company-users-table tbody, .company-users-table tr, .company-users-table td { display: block; width: 100%; }
    .company-users-table tbody { padding: .35rem 1rem; }
    .company-users-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--et-border); }
    .company-users-table td, .company-users-table th:first-child, .company-users-table td:first-child, .company-users-table th:last-child, .company-users-table td:last-child { padding: 0; border: 0; white-space: normal; }
    .company-users-table td::before { display: block; margin-bottom: .2rem; color: var(--et-muted); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .company-users-table .company-member-identity, .company-users-table .company-member-actions { grid-column: 1 / -1; }
    .company-member-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .company-member-actions .btn { min-height: 42px; margin: 0 !important; }
}

/* Workspaces */
.workspaces-page { width: 100%; }
.workspaces-header { margin-bottom: 1.5rem; }
.workspaces-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.workspaces-header p, .workspaces-card-heading p, .workspaces-empty p { margin: 0; color: var(--et-muted); }
.workspaces-header p { font-size: .92rem; }
.workspaces-card { overflow: hidden; background: #fff; }
.workspaces-card > .card-body:not(.p-0) { padding: 1.35rem; }
.workspaces-card-heading { margin-bottom: 1.2rem; }
.workspaces-card-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.workspaces-card-heading p { font-size: .78rem; }
.workspace-create-form { display: grid; grid-template-columns: minmax(240px, 520px) auto; align-items: end; gap: .75rem; }
.workspace-create-form .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.workspaces-message { margin: 1rem 0 0; padding: .75rem 1rem; font-size: .8rem; }
.workspaces-list-heading { margin: 0; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.workspaces-table th:first-child, .workspaces-table td:first-child { padding-left: 1.35rem; }
.workspaces-table th:last-child, .workspaces-table td:last-child { padding-right: 1.35rem; }
.workspaces-table td { color: #586777; font-size: .84rem; }
.workspaces-table tbody tr:hover { background: #f8fbfa; }
.workspace-name { color: #23313d !important; font-weight: 650; }
.workspace-status { display: inline-flex; padding: .3rem .6rem; font-size: .7rem; font-weight: 700; border-radius: 999px; }
.workspace-status.is-active { color: #08705d; background: #e5f5f1; }
.workspace-status.is-inactive { color: #667085; background: #eef1f4; }
.workspaces-empty { padding: 2.5rem 1.25rem; text-align: center; }
.workspaces-empty h3 { margin: 0 0 .35rem; font-size: .95rem; }
.workspaces-empty p { font-size: .8rem; }

@media (max-width: 767.98px) {
    .workspace-create-form { grid-template-columns: 1fr; }
    .workspace-create-form .btn { width: 100%; }
    .workspaces-table-wrap { overflow: visible; }
    .workspaces-table thead { display: none; }
    .workspaces-table, .workspaces-table tbody, .workspaces-table tr, .workspaces-table td { display: block; width: 100%; }
    .workspaces-table tbody { padding: .35rem 1rem; }
    .workspaces-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--et-border); }
    .workspaces-table td, .workspaces-table th:first-child, .workspaces-table td:first-child, .workspaces-table th:last-child, .workspaces-table td:last-child { padding: 0; border: 0; white-space: normal; }
    .workspaces-table td::before { display: block; margin-bottom: .2rem; color: var(--et-muted); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .workspaces-table .workspace-name { grid-column: 1 / -1; }
}

/* Accounts */
.accounts-page { width: 100%; }
.accounts-header { margin-bottom: 1.5rem; }
.accounts-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.accounts-header p, .accounts-card-heading p, .accounts-empty-state p { margin: 0; color: var(--et-muted); }
.accounts-header p { font-size: .92rem; }
.accounts-card { overflow: hidden; background: #fff; }
.accounts-card > .card-body:not(.p-0) { padding: 1.35rem; }
.accounts-card-heading { margin-bottom: 1.2rem; }
.accounts-card-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.accounts-card-heading p { font-size: .78rem; }
.accounts-card .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.accounts-card .input-group-text { color: var(--et-primary-dark); background: #f1f8f6; border-color: #d5dde7; font-weight: 700; }
.accounts-form-actions { margin-top: 1.15rem; }
.accounts-message { margin: 1rem 0 0; padding: .75rem 1rem; color: #155e52; background: #e8f6f3; font-size: .8rem; }
.accounts-list-heading { margin: 0; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.accounts-table tbody tr:last-child td { border-bottom: 0; }
.accounts-table tbody tr:hover { background: #f8fbfa; }
.accounts-table th:first-child, .accounts-table td:first-child { padding-left: 1.35rem; }
.accounts-table th:last-child, .accounts-table td:last-child { padding-right: 1.35rem; }
.accounts-table td { color: #586777; font-size: .84rem; }
.accounts-table .accounts-name, .accounts-table .accounts-balance { color: #23313d; font-weight: 650; }
.accounts-status { display: inline-flex; align-items: center; padding: .3rem .6rem; font-size: .7rem; font-weight: 700; border-radius: 999px; }
.accounts-status.is-active { color: #08705d; background: #e5f5f1; }
.accounts-status.is-inactive { color: #667085; background: #eef1f4; }
.accounts-empty-state { padding: 2.5rem 1.25rem; text-align: center; }
.accounts-empty-state h3 { margin: 0 0 .35rem; font-size: .95rem; }
.accounts-empty-state p { font-size: .8rem; }

@media (max-width: 767.98px) {
    .accounts-header { margin-bottom: 1.15rem; }
    .accounts-form-actions .btn { width: 100%; }
    .accounts-table th:first-child, .accounts-table td:first-child { padding-left: 1rem; }
    .accounts-table th:last-child, .accounts-table td:last-child { padding-right: 1rem; }
}

/* Transactions */
.transactions-page { width: 100%; }
.transactions-header { margin-bottom: 1.5rem; }
.transactions-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.transactions-header p, .transaction-card-heading p, .transactions-empty p { margin: 0; color: var(--et-muted); }
.transactions-header p { font-size: .92rem; }
.transaction-account-card, .transaction-entry-card, .transaction-history-card { overflow: hidden; background: #fff; }
.transaction-account-card .card-body { display: grid; grid-template-columns: minmax(220px, 1.4fr) 1fr 1fr; align-items: end; gap: 1.5rem; padding: 1.15rem 1.35rem; }
.transaction-account-card .form-label, .transaction-form .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.transaction-balance-stat { padding-left: 1.5rem; border-left: 1px solid var(--et-border); }
.transaction-balance-stat span { display: block; margin-bottom: .25rem; color: var(--et-muted); font-size: .72rem; font-weight: 600; }
.transaction-balance-stat strong { color: #293844; font-size: 1.05rem; }
.transaction-balance-stat.current strong { color: var(--et-primary-dark); font-size: 1.2rem; }
.transaction-entry-card > .card-body { padding: 1.35rem; }
.transaction-card-heading { margin-bottom: 1.2rem; }
.transaction-card-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.transaction-card-heading p { font-size: .78rem; }
.money-field .input-group-text { border-color: #d5dde7; font-weight: 700; }
.withdraw-label { color: #9c443b !important; }
.deposit-label { color: #08705d !important; }
.withdraw-field .input-group-text { color: #9c443b; background: #fff7f5; }
.deposit-field .input-group-text { color: #08705d; background: #f0faf7; }
.withdraw-field .form-control:focus { border-color: #d89b94; box-shadow: 0 0 0 .22rem rgba(156,68,59,.1); }
.deposit-field .form-control:focus { border-color: #5ab7a5; }
.transaction-form-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.transaction-message { margin: 1rem 0 0; padding: .75rem 1rem; color: #155e52; background: #e8f6f3; font-size: .8rem; }
.history-heading { margin: 0; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.transaction-table th:first-child, .transaction-table td:first-child { padding-left: 1.35rem; }
.transaction-table th:last-child, .transaction-table td:last-child { padding-right: 1.35rem; }
.transaction-table td { color: #586777; font-size: .82rem; }
.transaction-table tbody tr:hover { background: #f8fbfa; }
.transaction-table tbody tr:last-child td { border-bottom: 0; }
.transaction-date { white-space: nowrap; font-weight: 600; }
.transaction-particulars { min-width: 180px; color: #2d3c48 !important; }
.transaction-withdraw, .transaction-deposit, .transaction-running-balance { white-space: nowrap; font-variant-numeric: tabular-nums; }
.transaction-withdraw span { color: #a34a42; font-weight: 650; }
.transaction-deposit span { color: #08705d; font-weight: 650; }
.transaction-running-balance { color: #23313d !important; font-weight: 750; }
.transaction-actions { white-space: nowrap; }
.transaction-actions .btn + .btn { margin-left: .35rem; }
.transaction-document-cell { min-width: 220px; }
.document-summary { display: flex; flex-direction: column; max-width: 260px; margin-bottom: .45rem; }
.document-summary .document-name { overflow: hidden; color: #2d3c48; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.document-summary small { color: var(--et-muted); }
.document-row-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.document-upload-panel { padding: 1.2rem 1.35rem; background: #f8fbfa; border-top: 1px solid var(--et-border); }
.document-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.document-panel-heading h3 { margin: 0 0 .25rem; font-size: 1rem; }
.document-panel-heading p { margin: 0; color: var(--et-muted); font-size: .8rem; }
.document-input-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.document-file-button { position: relative; min-height: 44px; overflow: hidden; }
.document-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.document-help { margin: .6rem 0 0; color: var(--et-muted); font-size: .75rem; }
.document-page-list { display: grid; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.document-page-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; background: #fff; border: 1px solid var(--et-border); border-radius: .65rem; }
.document-page-list li > div:first-child { display: grid; min-width: 0; grid-template-columns: auto minmax(80px, 1fr) auto; gap: .65rem; align-items: center; }
.document-page-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-page-list small { color: var(--et-muted); white-space: nowrap; }
.document-page-actions { display: flex; gap: .35rem; }
.document-status { margin: .8rem 0; padding: .7rem .85rem; font-size: .8rem; }
.document-global-status { margin: 0; padding: .75rem 1.35rem; border-radius: 0; font-size: .8rem; }
.document-upload-button { min-height: 44px; }
.transaction-delete-confirmation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; color: #7f1d1d; background: #fff7f5; border-top: 1px solid #fecaca; }
.transaction-delete-confirmation p { margin: .2rem 0 0; color: #9f4b43; font-size: .8rem; }
.transaction-delete-actions { display: flex; gap: .5rem; white-space: nowrap; }
.transactions-empty { padding: 2.5rem 1.25rem; text-align: center; }
.transactions-empty h3 { margin: 0 0 .35rem; font-size: .95rem; }
.transactions-empty p { font-size: .8rem; }

@media (max-width: 767.98px) {
    .transactions-header { margin-bottom: 1.15rem; }
    .transaction-account-card .card-body { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .transaction-account-picker { grid-column: 1 / -1; }
    .transaction-balance-stat { padding: .8rem 0 0; border-top: 1px solid var(--et-border); border-left: 0; }
    .transaction-balance-stat.current { padding-left: 1rem; border-left: 1px solid var(--et-border); }
    .transaction-form-actions { display: grid; grid-template-columns: 1fr; }
    .transaction-table-wrap { overflow: visible; }
    .transaction-table thead { display: none; }
    .transaction-table, .transaction-table tbody, .transaction-table tr, .transaction-table td { display: block; width: 100%; }
    .transaction-table tbody { padding: .35rem 1rem; }
    .transaction-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--et-border); }
    .transaction-table tbody tr:last-child { border-bottom: 0; }
    .transaction-table td, .transaction-table th:first-child, .transaction-table td:first-child, .transaction-table th:last-child, .transaction-table td:last-child { padding: 0; border: 0; text-align: left !important; white-space: normal; }
    .transaction-table td::before { display: block; margin-bottom: .2rem; color: var(--et-muted); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .transaction-table .transaction-particulars { grid-column: 1 / -1; grid-row: 1; min-width: 0; font-size: .9rem; }
    .transaction-table .transaction-particulars::before { display: none; }
    .transaction-table .transaction-actions { grid-column: 1 / -1; display: flex; gap: .5rem; }
    .transaction-table .transaction-actions::before { display: none; }
    .transaction-table .transaction-actions .btn { flex: 1; min-height: 40px; margin: 0; }
    .transaction-table .transaction-document-cell { grid-column: 1 / -1; min-width: 0; padding-top: .75rem; border-top: 1px dashed var(--et-border); }
    .document-summary { max-width: 100%; }
    .document-row-actions .btn, .document-add-button { min-height: 42px; }
    .document-panel-heading, .document-page-list li { align-items: stretch; flex-direction: column; }
    .document-panel-heading .btn, .document-input-actions, .document-file-button, .document-upload-button { width: 100%; }
    .document-input-actions { flex-direction: column; }
    .document-page-list li > div:first-child { grid-template-columns: auto minmax(0, 1fr); }
    .document-page-list li > div:first-child small { grid-column: 2; }
    .document-page-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
    .document-page-actions .btn { min-height: 42px; }
    .transaction-delete-confirmation { align-items: stretch; flex-direction: column; }
    .transaction-delete-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .transaction-account-card .card-body { grid-template-columns: 1fr; }
    .transaction-account-picker { grid-column: auto; }
    .transaction-balance-stat.current { padding-left: 0; border-left: 0; }
}

/* Reports */
.reports-page { width: 100%; }
.reports-header { margin-bottom: 1.5rem; }
.reports-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.reports-header p, .report-card-heading p, .report-table-heading p, .report-empty p { margin: 0; color: var(--et-muted); }
.reports-header p { font-size: .92rem; }
.reports-alert { margin-bottom: 0; }
.report-filter-card, .report-transactions-card { overflow: hidden; background: #fff; }
.report-filter-card > .card-body { padding: 1.35rem; }
.report-card-heading { margin-bottom: 1.2rem; }
.report-card-heading h2, .report-table-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.report-card-heading p, .report-table-heading p { font-size: .78rem; }
.report-filter-card .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.report-filter-actions { margin-top: 1.2rem; }
.report-message { margin: 1rem 0 0; padding: .75rem 1rem; color: #155e52; background: #e8f6f3; font-size: .8rem; }
.report-result-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin: 1.75rem 0 1rem; }
.report-eyebrow { display: block; margin-bottom: .3rem; color: var(--et-primary); font-size: .68rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.report-result-heading h2 { margin: 0 0 .55rem; font-size: 1.35rem; }
.report-period { display: flex; align-items: center; gap: .7rem; color: #344054; font-size: .82rem; font-weight: 650; }
.report-period span:not(.report-period-divider) { display: flex; align-items: baseline; gap: .35rem; }
.report-period small { color: var(--et-muted); font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.report-period-divider { color: #a8b2bd; }
.report-download { flex: 0 0 auto; }
.report-summary { margin-bottom: 1.5rem; }
.report-summary-card { position: relative; height: 100%; overflow: hidden; padding: 1.05rem 1.15rem; background: #fff; border: 1px solid var(--et-border); border-radius: .8rem; box-shadow: 0 3px 12px rgba(15,23,42,.035); }
.report-summary-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: #94a3b8; }
.report-summary-card span { display: block; margin-bottom: .4rem; color: var(--et-muted); font-size: .7rem; font-weight: 650; }
.report-summary-card strong { display: block; color: #23313d; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-summary-card.deposit::before, .report-summary-card.closing::before { background: var(--et-primary); }
.report-summary-card.deposit strong, .report-summary-card.closing strong { color: #08705d; }
.report-summary-card.withdraw::before { background: #c96b61; }
.report-summary-card.withdraw strong { color: #9c443b; }
.report-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.report-row-count { padding: .3rem .6rem; color: #397467; background: #edf7f4; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.report-table th:first-child, .report-table td:first-child { padding-left: 1.35rem; }
.report-table th:last-child, .report-table td:last-child { padding-right: 1.35rem; }
.report-table td { color: #586777; font-size: .82rem; }
.report-table tbody tr:hover { background: #f8fbfa; }
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-date { white-space: nowrap; font-weight: 600; }
.report-particulars { min-width: 200px; color: #2d3c48 !important; }
.report-withdraw, .report-deposit, .report-balance { white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-withdraw span { color: #a34a42; font-weight: 650; }
.report-deposit span { color: #08705d; font-weight: 650; }
.report-balance { color: #23313d !important; font-weight: 750; }
.report-empty { padding: 2.75rem 1.25rem; text-align: center; }
.report-empty h3 { margin: 0 0 .35rem; font-size: .95rem; }
.report-empty p { font-size: .8rem; }

@media (max-width: 767.98px) {
    .reports-header { margin-bottom: 1.15rem; }
    .report-filter-actions .btn, .report-download { width: 100%; }
    .report-result-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
    .report-period { flex-wrap: wrap; }
    .report-summary-card { padding: .9rem; }
    .report-summary-card strong { font-size: .92rem; }
    .report-table-wrap { overflow: visible; }
    .report-table thead { display: none; }
    .report-table, .report-table tbody, .report-table tr, .report-table td { display: block; width: 100%; }
    .report-table tbody { padding: .35rem 1rem; }
    .report-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--et-border); }
    .report-table tbody tr:last-child { border-bottom: 0; }
    .report-table td, .report-table th:first-child, .report-table td:first-child, .report-table th:last-child, .report-table td:last-child { padding: 0; border: 0; text-align: left !important; white-space: normal; }
    .report-table td::before { display: block; margin-bottom: .2rem; color: var(--et-muted); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .report-table .report-particulars { grid-column: 1 / -1; grid-row: 1; min-width: 0; font-size: .9rem; }
    .report-table .report-particulars::before { display: none; }
}

@media (max-width: 420px) {
    .report-period { display: grid; grid-template-columns: 1fr 1fr; }
    .report-period-divider { display: none; }
    .report-period span:not(.report-period-divider) { align-items: flex-start; flex-direction: column; gap: .1rem; }
}

/* Budgets */
.budgets-page, .budget-details-page { width: 100%; }
.budgets-header, .budget-details-header { margin-bottom: 1.5rem; }
.budgets-header h1, .budget-details-header h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.budgets-header p, .budget-section-heading p, .budget-list-heading p, .budget-empty p, .budget-items-heading p, .budget-items-empty p { margin: 0; color: var(--et-muted); }
.budgets-header p { font-size: .92rem; }
.budget-create-card, .budget-overview-card, .add-fund-card, .budget-item-form-card, .budget-items-card { overflow: hidden; background: #fff; }
.budget-create-card > .card-body, .add-fund-card > .card-body, .budget-item-form-card > .card-body { padding: 1.35rem; }
.budget-section-heading { margin-bottom: 1.2rem; }
.budget-section-heading h2, .budget-list-heading h2, .budget-items-heading h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.01em; }
.budget-section-heading p, .budget-list-heading p, .budget-items-heading p { font-size: .78rem; }
.budget-create-card .form-label, .add-fund-card .form-label, .budget-item-form-card .form-label, .purchase-panel .form-label { margin-bottom: .4rem; color: #344054; font-size: .78rem; font-weight: 650; }
.budget-money-field .input-group-text { color: var(--et-primary-dark); background: #f1f8f6; border-color: #d5dde7; font-weight: 700; }
.budget-form-actions, .budget-panel-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.budget-message { margin: 1rem 0 0; padding: .75rem 1rem; color: #155e52; background: #e8f6f3; font-size: .8rem; }
.budget-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 1rem; }
.budget-list-heading > span, .budget-items-heading > span { padding: .3rem .6rem; color: #397467; background: #edf7f4; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.budget-empty, .budget-items-empty { padding: 2.75rem 1.25rem; text-align: center; }
.budget-empty h3, .budget-items-empty h3 { margin: 0 0 .35rem; font-size: .95rem; }
.budget-empty p, .budget-items-empty p { font-size: .8rem; }
.budget-overview-card .card-body { display: flex; flex-direction: column; padding: 1.25rem; }
.budget-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.budget-card-header h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.budget-card-header div > span { color: var(--et-muted); font-size: .72rem; }
.budget-status { padding: .28rem .58rem; border-radius: 999px; font-size: .65rem; font-weight: 750; }
.budget-status.active { color: #08705d; background: #e5f5f1; }
.budget-status.inactive { color: #667085; background: #eef1f4; }
.budget-card-notes { margin: .8rem 0 0; color: #667585; font-size: .78rem; }
.budget-card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1.1rem; }
.budget-card-metrics > div { min-width: 0; padding: .75rem; background: #f7f9fb; border-radius: .6rem; }
.budget-card-metrics span { display: block; margin-bottom: .25rem; color: var(--et-muted); font-size: .64rem; font-weight: 650; }
.budget-card-metrics strong { display: block; overflow: hidden; color: #2d3c48; font-size: .84rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.budget-card-metrics .remaining { background: #edf8f5; }
.budget-card-metrics .remaining span, .budget-card-metrics .remaining strong { color: #08705d; }
.budget-progress-meta { display: flex; justify-content: space-between; margin: 1rem 0 .4rem; color: var(--et-muted); font-size: .66rem; font-weight: 650; }
.budget-progress { height: 6px; overflow: hidden; background: #e7edf1; border-radius: 999px; }
.budget-progress span { display: block; height: 100%; background: var(--et-primary); border-radius: inherit; }
.budget-card-actions { display: flex; gap: .6rem; margin-top: 1.15rem; }

/* Budget details */
.budget-loading { padding: 3rem 1rem; color: var(--et-muted); text-align: center; }
.budget-back-link { display: inline-block; margin-bottom: 1rem; color: #526474; font-size: .78rem; font-weight: 650; text-decoration: none; }
.budget-back-link:hover { color: var(--et-primary); }
.budget-details-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.budget-eyebrow { display: block; margin-bottom: .3rem; color: var(--et-primary); font-size: .68rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.budget-date-range { display: flex; flex-wrap: wrap; gap: .45rem 1rem; color: var(--et-muted); font-size: .76rem; font-weight: 600; }
.budget-details-notes { max-width: 760px; margin: .8rem 0 0; color: #5f6f7e; font-size: .84rem; }
.budget-detail-summary { margin-bottom: 1.5rem; }
.budget-summary-card { position: relative; height: 100%; overflow: hidden; padding: 1rem; background: #fff; border: 1px solid var(--et-border); border-radius: .8rem; box-shadow: 0 3px 12px rgba(15,23,42,.035); }
.budget-summary-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: #94a3b8; }
.budget-summary-card span { display: block; margin-bottom: .4rem; color: var(--et-muted); font-size: .68rem; font-weight: 650; }
.budget-summary-card strong { display: block; color: #23313d; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-summary-card.fund::before, .budget-summary-card.available::before, .budget-summary-card.remaining::before { background: var(--et-primary); }
.budget-summary-card.available strong, .budget-summary-card.remaining strong { color: #08705d; }
.budget-summary-card.remaining { background: #f5fbf9; border-color: #b8ddd5; }
.budget-summary-card.spent::before { background: #c96b61; }
.budget-summary-card.spent strong { color: #9c443b; }
.budget-purchased-check { display: flex; align-items: center; min-height: 42px; }
.budget-purchased-check .form-check { margin: 0; }
.budget-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--et-border); }
.budget-items-table td { color: #586777; font-size: .8rem; }
.budget-items-table th:first-child, .budget-items-table td:first-child { padding-left: 1.35rem; }
.budget-items-table th:last-child, .budget-items-table td:last-child { padding-right: 1.35rem; }
.budget-items-table tbody tr:last-child td { border-bottom: 0; }
.budget-items-table tr.is-purchased { background: #f8fbfa; }
.budget-items-table tr.is-pending:hover, .budget-items-table tr.is-purchased:hover { background: #f4f9f7; }
.budget-item-name { min-width: 180px; color: #2d3c48 !important; }
.budget-item-name strong, .budget-item-name small { display: block; }
.budget-item-name small { max-width: 280px; margin-top: .25rem; color: var(--et-muted); font-size: .68rem; font-weight: 400; }
.budget-item-amount, .budget-item-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget-item-amount.actual { color: #23313d; font-weight: 700; }
.budget-item-status { display: inline-block; padding: .28rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 750; }
.budget-item-status.purchased { color: #08705d; background: #e5f5f1; }
.budget-item-status.pending { color: #6b5b24; background: #f8f3df; }
.budget-item-actions { white-space: nowrap; }
.budget-item-actions .btn + .btn { margin-left: .3rem; }
.purchase-panel { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(190px, .6fr) auto; align-items: end; gap: 1.25rem; padding: 1.2rem 1.35rem; background: #edf8f5; border-top: 1px solid #b8ddd5; }
.purchase-panel-copy > span { color: var(--et-primary); font-size: .65rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.purchase-panel-copy h3 { margin: .2rem 0; font-size: 1rem; }
.purchase-panel-copy p, .budget-delete-panel p { margin: 0; color: var(--et-muted); font-size: .75rem; }
.purchase-actions { display: flex; gap: .5rem; }
.budget-delete-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; color: #7f1d1d; background: #fff7f5; border-top: 1px solid #fecaca; }
.budget-delete-panel > div:last-child { display: flex; gap: .5rem; }

@media (max-width: 767.98px) {
    .budgets-header, .budget-details-header { margin-bottom: 1.15rem; }
    .budget-form-actions .btn, .budget-panel-actions .btn, .add-fund-toggle { width: 100%; }
    .budget-card-metrics { grid-template-columns: 1fr 1fr; }
    .budget-card-actions { display: grid; grid-template-columns: 1fr; }
    .budget-details-title { align-items: stretch; flex-direction: column; gap: 1rem; }
    .budget-summary-card { padding: .9rem; }
    .budget-summary-card strong { font-size: .87rem; }
    .budget-panel-actions { display: grid; grid-template-columns: 1fr; }
    .budget-items-table-wrap { overflow: visible; }
    .budget-items-table thead { display: none; }
    .budget-items-table, .budget-items-table tbody, .budget-items-table tr, .budget-items-table td { display: block; width: 100%; }
    .budget-items-table tbody { padding: .35rem 1rem; }
    .budget-items-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--et-border); }
    .budget-items-table tbody tr:last-child { border-bottom: 0; }
    .budget-items-table td, .budget-items-table th:first-child, .budget-items-table td:first-child, .budget-items-table th:last-child, .budget-items-table td:last-child { padding: 0; border: 0; text-align: left !important; white-space: normal; }
    .budget-items-table td::before { display: block; margin-bottom: .2rem; color: var(--et-muted); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .budget-items-table .budget-item-name { grid-column: 1 / -1; min-width: 0; font-size: .92rem; }
    .budget-items-table .budget-item-name::before { display: none; }
    .budget-items-table .budget-item-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .budget-items-table .budget-item-actions::before { display: none; }
    .budget-item-actions .btn, .budget-item-actions .btn + .btn { min-height: 42px; margin: 0; }
    .purchase-panel { grid-template-columns: 1fr; align-items: stretch; }
    .purchase-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .purchase-actions .btn { min-height: 44px; }
    .budget-delete-panel { align-items: stretch; flex-direction: column; }
    .budget-delete-panel > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .budget-card-metrics { grid-template-columns: 1fr 1fr; }
    .budget-item-actions .btn { padding-right: .45rem; padding-left: .45rem; }
}
:root { --connectivity-navy: #102a2e; --connectivity-mint: #5ee0bd; }
.connectivity-offline-overlay[hidden] { display: none; }
.connectivity-offline-overlay { position: fixed; inset: 0; z-index: 3000; display: grid; padding: 1rem; place-items: center; background: rgba(10, 31, 35, .76); backdrop-filter: blur(4px); }
.connectivity-offline-card { display: flex; gap: .9rem; width: min(100%, 470px); padding: 1.25rem; color: #17313a; background: #fff; border: 1px solid rgba(94, 224, 189, .45); border-radius: 14px; box-shadow: 0 20px 55px rgba(5, 20, 23, .28); }
.connectivity-status-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: var(--connectivity-navy); font-weight: 850; background: var(--connectivity-mint); border-radius: 11px; }
.connectivity-offline-card h2 { margin: 0 0 .35rem; color: var(--connectivity-navy); font-size: 1.1rem; font-weight: 750; }
.connectivity-offline-card p { margin: 0; color: #5d7079; font-size: .84rem; line-height: 1.55; }
@media (max-width: 480px) { .connectivity-offline-card { align-items: flex-start; padding: 1rem; } }