/* Compact monthly ledger, using the approved Harbor theme. */
:root { --pf-unpaid-bg: #fff2b3; --pf-unpaid-ink: #684700; --pf-auto-bg: #eee8fa; --pf-auto-ink: #59328a; --pf-budget-bg: #ffead5; --pf-budget-ink: #8a3e10; --pf-income-bg: #e9edc9; --pf-income-ink: #4b551d; }
[data-bs-theme="dark"] { --pf-unpaid-bg: #493d14; --pf-unpaid-ink: #ffe49a; --pf-auto-bg: #322548; --pf-auto-ink: #dbc5fa; --pf-budget-bg: #4a2e1c; --pf-budget-ink: #ffd0a3; --pf-income-bg: #343b20; --pf-income-ink: #dce6a5; }
.pf-app .pf-shell { max-width: 1600px; }
.dashboard-toolbar { max-width: 780px; }
.grid-legend { align-items: center; }
.legend-unpaid { background: var(--pf-unpaid-bg); color: var(--pf-unpaid-ink); padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.legend-auto { background: var(--pf-auto-bg); color: var(--pf-auto-ink); padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.legend-budget { background: var(--pf-budget-bg); color: var(--pf-budget-ink); padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.legend-income { background: var(--pf-income-bg); color: var(--pf-income-ink); padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.monthly-section { overflow: hidden; }
.monthly-grid-wrap { padding: 0 16px 16px; }
.monthly-grid { --bs-table-bg: var(--pf-surface); --bs-table-color: var(--pf-text); font-size: .875rem; }
.monthly-grid > :not(caption) > * > * { padding: 4px 8px; border-color: var(--pf-line); }
.monthly-grid thead th { height: 32px; background: var(--pf-canvas); color: var(--pf-muted); font-size: .75rem; font-weight: 600; }
.monthly-grid .grid-item { height: 52px; }
.monthly-grid .btn { font-size: .8125rem; white-space: nowrap; }
.monthly-grid .name-cell { min-width: 190px; font-weight: 500; position: sticky; left: 0; z-index: 1; background: var(--pf-surface); }
.monthly-grid .name-cell > span { position: absolute; bottom: 5px; left: 8px; right: 8px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monthly-grid .grid-name { display: block; width: 100%; text-align: left; min-height: 44px; padding-bottom: 16px !important; font-size: .875rem; color: var(--pf-text); text-decoration: none; white-space: normal; }
.monthly-grid .grid-name:hover { text-decoration: underline; }
.monthly-grid .is-unpaid { background: var(--pf-unpaid-bg); }
.monthly-grid .unpaid-label { color: var(--pf-unpaid-ink); }
.monthly-grid .is-auto-deducted { background: var(--pf-auto-bg); }
.monthly-grid .auto-label { color: var(--pf-auto-ink); }
/* Use the existing row kind as well as the name-cell class, including after a dashboard refresh. */
.monthly-grid [data-kind="Budget"] .name-cell, .monthly-grid .name-cell.is-budget {
    --bs-table-bg: var(--pf-budget-bg);
    background-color: var(--pf-budget-bg);
    box-shadow: none;
}
.monthly-grid [data-kind="Budget"] .grid-name, .monthly-grid .is-budget .grid-name, .monthly-grid .budget-label { color: var(--pf-budget-ink); }
.monthly-grid [data-kind="Income"] .name-cell {
    --bs-table-bg: var(--pf-income-bg);
    background-color: var(--pf-income-bg);
    box-shadow: none;
}
.monthly-grid [data-kind="Income"] .grid-name { color: var(--pf-income-ink); }
.monthly-grid .is-cleared > * { background: var(--pf-canvas); color: var(--pf-muted); }
.monthly-grid .date-cell { min-width: 76px; white-space: nowrap; }
.monthly-grid .amount-cell { min-width: 110px; }
.monthly-grid .route-cell { min-width: 110px; max-width: 180px; }
.monthly-grid .route-cell .btn { max-width: 180px; white-space: normal; overflow-wrap: anywhere; }
.monthly-grid .paid-cell, .monthly-grid .clear-cell { white-space: nowrap; }
.monthly-grid .paid-cell > .btn, .monthly-grid .clear-cell > .btn { min-width: 72px; }
.monthly-grid .grid-state { white-space: nowrap; font-size: .8125rem; }
.monthly-grid .account-cell { min-width: 125px; border-left: 1px solid var(--pf-line); }
.monthly-grid .account-affected { background: var(--pf-tint); box-shadow: inset 2px 0 var(--pf-primary); font-weight: 600; }
.monthly-grid .total-cell { min-width: 125px; background: var(--pf-canvas); font-weight: 700; border-left: 1px solid var(--pf-line); }
.monthly-grid .grid-opening { height: 72px; }
.monthly-grid .grid-opening > * { background: var(--pf-canvas); }
.monthly-grid tfoot > tr > * { background: var(--pf-tint); height: 44px; font-weight: 600; }
.monthly-grid .more-cell .btn { min-width: 44px; padding: 4px; }
.monthly-grid .small { font-size: .75rem; line-height: 1.4; }
.grid-amount-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 160px; padding-block: 4px; }
.grid-amount-editor input { grid-column: 1 / -1; }
.monthly-grid [hidden] { display: none !important; }
.monthly-grid .pf-negative { color: var(--pf-danger); }
@media (max-width: 991.98px) {
    .monthly-section { background: transparent; border: 0; }
    .monthly-grid-wrap { overflow: visible; padding: 0; }
    .monthly-grid, .monthly-grid tbody, .monthly-grid tfoot { display: block; }
    .monthly-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .monthly-grid tr { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; border: 1px solid var(--pf-line); border-radius: 12px; overflow: hidden; background: var(--pf-surface); }
    .monthly-grid .grid-item, .monthly-grid .grid-opening { height: auto; }
    .monthly-grid > :not(caption) > * > * { display: block; padding: 8px 12px; min-width: 0; max-width: none; border: 0; }
    .monthly-grid .name-cell { grid-column: 1 / -1; grid-row: 1; min-width: 0; position: relative; }
    .monthly-grid .name-cell > span { left: 12px; bottom: 8px; }
    .monthly-grid .paid-cell, .monthly-grid .clear-cell { grid-row: 2; display: flex; align-items: center; gap: 6px; white-space: normal; flex-wrap: wrap; }
    .monthly-grid .clear-cell { justify-content: flex-end; }
    .monthly-grid .date-cell { text-align: left; }
    .monthly-grid .amount-cell { text-align: right; }
    .monthly-grid .route-cell { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    .monthly-grid .route-cell::before { content: "Account"; color: var(--pf-muted); }
    .monthly-grid .account-cell, .monthly-grid .total-cell { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--pf-line); min-height: 40px; }
    .monthly-grid [data-label].account-cell::before, .monthly-grid [data-label].total-cell::before { content: attr(data-label); color: var(--pf-muted); font-weight: 500; white-space: normal; text-align: left; }
    .monthly-grid .more-cell { grid-column: 1 / -1; text-align: right; padding-block: 0; }
    .monthly-grid .grid-opening th, .monthly-grid tfoot th { grid-column: 1 / -1; }
    .monthly-grid .grid-spacer { display: none; }
    .dashboard-toolbar .btn { flex: 1 1 auto; }
}
.account-activity-button, .account-header-button { padding: .25rem; min-width: 32px; min-height: 32px; vertical-align: middle; }
@media (pointer: coarse) { .account-activity-button, .account-header-button { min-width: 44px; min-height: 44px; } }

/* Keep assignment actions together in the wider activity dialog. */
@media (min-width: 576px) {
    #account-activity-modal .modal-dialog { --bs-modal-width: 1200px; width: calc(100% - 2rem); }
}
/* Target the stable form attribute too, so previously rendered activity uses the same layout. */
[data-budget-assignment] { display: flex; flex-wrap: nowrap !important; align-items: center; gap: .25rem; min-width: 230px; }
.pf-app [data-budget-assignment] .form-select {
    flex: 1 1 175px; width: auto; min-width: 0;
    height: 28px; min-height: 28px; font-size: .75rem;
    padding: .125rem 1.5rem .125rem .375rem; border-radius: .25rem;
    background-position: right .375rem center; background-size: 12px 9px;
}
.pf-app [data-budget-assignment] .btn {
    flex: 0 0 auto; white-space: nowrap; height: 28px; min-height: 28px;
    padding: .125rem .5rem; font-size: .75rem; border-radius: .25rem;
}
@media (pointer: coarse) {
    .pf-app [data-budget-assignment] .form-select, .pf-app [data-budget-assignment] .btn { height: 44px; min-height: 44px; }
}

/* Two stacked date links must share the compact row, not each inherit a 44px button. */
.monthly-grid .date-cell { padding-block: 2px; }
.monthly-grid .date-cell [data-edit-date] { min-height: 24px; line-height: 1.25; }
@media (pointer: coarse) {
    .monthly-grid .date-cell [data-edit-date] { min-height: 44px; }
}
.monthly-grid .grid-planned-date { font-size: .95rem; font-weight: 600; }
.monthly-grid .grid-due-date { font-size: .75rem; }
.grid-date-editor { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; }
.grid-date-editor input { max-width: 10rem; }

/* Keep the independent card-reconciliation action readable without making rows taller. */
.monthly-grid .name-cell.has-card-reconciliation { padding-block: 2px; min-width: 210px; }
.monthly-grid .has-card-reconciliation .grid-name { min-height: 24px; padding-bottom: 0 !important; }
.monthly-grid .grid-card-reconciliation { display: block; min-height: 24px; font-size: .75rem; line-height: 1.4; text-align: left; }
@media (pointer: coarse) {
    .monthly-grid .has-card-reconciliation .grid-name, .monthly-grid .grid-card-reconciliation { min-height: 44px; }
}