/* Financial surfaces share controls, spacing and readable source breakdowns. */
html #app #page .finance-row-menu-trigger,
html #app #page .expense-details-toggle{display:flex;align-items:center;justify-content:center;gap:0;min-width:40px;width:40px;height:40px;min-height:40px;padding:0;line-height:1;border:1px solid var(--line);border-radius:11px;background:var(--theme-panel,#fff);color:var(--muted);flex:none}
html #app #page .finance-row-menu-trigger .icon,
html #app #page .expense-details-toggle .icon{width:20px;height:20px}
html #app #page .finance-row-menu:has(:popover-open)>.finance-row-menu-trigger,
html #app #page :is(.finance-row-menu-trigger,.expense-details-toggle):hover{color:var(--teal);border-color:var(--teal);background:var(--surface-soft,#f6f8f9)}
html #app #page :is(.finance-row-menu-trigger,.expense-details-toggle):focus-visible{outline:2px solid var(--teal);outline-offset:3px}
html #app #page .finance-row-menu-items[popover]{position:fixed;inset:auto 16px 16px auto;margin:0;gap:6px;padding:8px;width:220px;min-width:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--theme-panel,#fff);color:var(--ink);box-shadow:0 12px 32px #0003}
html #app #page .finance-row-menu-items[popover]:not(:popover-open){display:none!important}
html #app #page .finance-row-menu-items[popover]:popover-open{display:grid}
@supports(anchor-scope:--financial-actions){
 html #app #page .finance-row-menu{anchor-scope:--financial-actions}
 html #app #page .finance-row-menu-trigger{anchor-name:--financial-actions}
 html #app #page .finance-row-menu-items[popover]{position-anchor:--financial-actions;inset:auto;top:anchor(bottom);right:anchor(right);margin-top:6px;position-try-fallbacks:flip-block,flip-inline}
}
html #app #page .expense-record-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}
html #app #page .expense-lines td.expense-line-controls{width:108px}
html #app #page .expense-details-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
html #app #page .expense-detail-row[hidden]{display:none!important}
html #app #page .expense-lines .expense-detail-row>td{padding:0;border:0;border-radius:12px}
html #app #page .expense-record-details{padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft,#f6f8f9)}
.expense-record-details dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin:0}
.expense-record-details dt{color:var(--muted);font-size:11px;margin-bottom:5px}
.expense-record-details dd{margin:0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.expense-record-proofs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.expense-record-proofs h3{margin:0 0 10px;font-size:12px}
html #app #page .expense-primary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html #app #page .expense-primary-actions>button,
html #app #page .expense-select-pay{min-height:44px;border-radius:12px;gap:9px;padding:10px 15px;font-weight:700;font-size:13px}
html #app #page .expense-primary-actions>.expense-create-button{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--teal) 16%,transparent)}
html #app #page .expense-create-button .icon{width:20px;height:20px}
html #app #page .expense-select-pay{background:color-mix(in srgb,var(--teal) 9%,var(--theme-panel,#fff));color:var(--teal);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
html #app #page .expense-payment-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-block:1px solid var(--line)}
html #app #page .expense-lines{border-collapse:separate;border-spacing:0 7px}
html #app #page .expense-lines-wrap{padding:0 10px 10px}
html #app #page .expense-lines td{background:var(--surface-soft,#f6f8f9);border-block:1px solid var(--line)}
html #app #page .expense-lines td:first-child{border-left:1px solid var(--line);border-radius:11px 0 0 11px}
html #app #page .expense-lines td:last-child{border-right:1px solid var(--line);border-radius:0 11px 11px 0;width:66px}
html #app #page .expense-lines th{background:transparent;border:0;padding-block:10px}
html #app #page .commission-row{border:1px solid var(--line);border-radius:12px;background:var(--theme-panel,#fff)}
html #app #page .commissions-lines{display:grid;gap:8px;padding:0 12px 12px}
html #app #page .commission-row+.commission-row{border-top:1px solid var(--line)}
html #app #page .commissions-filter-fields{align-items:end}
html #app #page .commissions-filter-fields>[data-period-picker]{align-self:end}

/* File inputs remain native. The focusable paste target receives normal paste
   events, so neither clipboard permissions nor extra network calls are needed. */
html dialog .financial-upload{padding:15px;border-radius:14px;background:var(--surface-soft,#f6f8f9);border:1px solid var(--line);margin:16px 0}
.financial-upload-heading{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--ink)}
.financial-upload-heading>strong{display:flex;align-items:center;gap:9px;font-size:14px}
.financial-upload-heading small{font-size:11px;color:var(--muted);font-weight:500}
.financial-paste-target{display:flex;align-items:center;gap:12px;padding:15px;border:1px dashed color-mix(in srgb,var(--teal) 40%,var(--line));border-radius:11px;background:var(--theme-panel,#fff);color:var(--teal);margin-bottom:12px;cursor:text}
.financial-paste-target>span{display:grid;gap:5px;min-width:0}
.financial-paste-target strong{font-size:13px}
.financial-paste-target small{font-size:12px;line-height:1.5;color:var(--muted)}
.financial-paste-target:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
html dialog .financial-file-label{font-size:12px;gap:7px}
html dialog .financial-upload input[type=file]{max-width:100%;border:1px solid var(--line);border-radius:9px;background:var(--theme-panel,#fff);padding:7px}
html dialog .financial-upload input[type=file]::file-selector-button{border:0;border-radius:6px;background:var(--surface-soft,#f6f8f9);color:var(--teal);font-weight:700;padding:7px 10px;margin-right:9px;cursor:pointer}
html dialog .financial-upload [data-financial-upload-status]{padding-top:7px;color:var(--ink)}

/* A row is a whole expense. Its remove control belongs to its heading. */
html dialog.expense-bulk-modal{width:min(760px,calc(100vw - 32px));max-width:760px;max-height:calc(100dvh - 32px);height:fit-content;margin:auto;padding:0;border-radius:18px;overflow:auto}
html dialog.expense-bulk-modal .modal-header{padding:18px 22px}
html dialog.expense-bulk-modal .modal-content{padding:18px 22px}
html dialog.expense-bulk-modal .expense-bulk-row{margin:10px 0 16px;padding:14px 16px 16px;border-radius:14px;background:var(--theme-panel,#fff)}
html dialog.expense-bulk-modal .expense-bulk-row legend{font-size:12px;color:var(--muted);padding:0 7px}
.expense-bulk-row-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.expense-bulk-row-heading>span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
html dialog .expense-bulk-row-heading>button{flex:none;min-height:38px;padding:8px 10px;gap:7px;border:1px solid var(--line);border-radius:10px;font-size:12px}
html dialog .expense-bulk-row-heading>button .icon{width:17px;height:17px}
html dialog.expense-bulk-modal .variable-bulk-required,
html dialog.expense-bulk-modal .variable-bulk-optional{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
html dialog.expense-bulk-modal .variable-bulk-required>.field{margin:0;min-width:0}
html dialog.expense-bulk-modal .variable-bulk-required>.expense-classification{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html dialog.expense-bulk-modal .expense-classification>.field{min-width:0;margin:0}
html dialog.expense-bulk-modal .bulk-extra{padding-top:11px;border-top:1px solid var(--line);margin-top:14px}
html dialog.expense-bulk-modal .bulk-extra[open] .variable-bulk-optional{padding-top:12px}
html dialog.expense-bulk-modal .bulk-footer{align-items:center;gap:10px;margin-top:12px}
html dialog.expense-bulk-modal .serial-pages{margin-block:10px}
html dialog.expense-bulk-modal .modal-content>.actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* Closing values remain the original snapshot. Each tile exposes its origin. */
.closing-card-shell{position:relative;min-width:0;border-radius:14px}
html #app #page .closing-card-shell>.metric{height:100%;min-height:152px;padding-bottom:42px}
html #app #page .closing-dashboard{grid-template-columns:repeat(3,minmax(0,1fr))}
html #app #page .closing-card-open{position:absolute;min-height:24px;gap:6px;font-size:11px;font-weight:650;color:var(--teal);background:transparent;border:0}
/* The tile itself is the hit target through a stretched native button. */
html #app #page .closing-card-open{inset:0;align-items:flex-end;justify-content:flex-start;padding:0 18px 12px;border-radius:14px}
html #app #page .closing-card-open::after{content:none}
html #app #page .closing-card-open:hover{box-shadow:inset 0 0 0 1px var(--teal);background:transparent}
html #app #page .closing-card-open:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.closing-card-open .icon{width:14px;height:14px}
.closing-card-shell:has(.metric.featured) .closing-card-open{color:inherit}
.closing-origin-detail{display:grid;gap:18px}
.closing-origin-context{color:var(--muted);font-size:13px}
.closing-origin-total{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--theme-panel,#fff)}
.closing-origin-total>span{font-weight:650;min-width:0}
.closing-origin-total small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:5px;line-height:1.5}
.closing-origin-total>strong{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.closing-origin-equation{display:grid;gap:8px}
.closing-origin-equation>.closing-origin-total:last-child{border-color:color-mix(in srgb,var(--teal) 50%,var(--line));color:var(--teal)}
.closing-origin-panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--theme-panel,#fff);min-width:0}
.closing-origin-panel h2{font-size:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.closing-origin-table{min-width:480px}
.closing-origin-table :is(th,td){padding:12px 16px;vertical-align:top}
.closing-origin-table th.num{text-align:right}
.closing-origin-table td{font-size:13px}
.closing-origin-table td:first-child{max-width:320px;white-space:normal;min-width:160px}
.closing-origin-table td small{font-size:11px;line-height:1.5}
.closing-source-unavailable{padding:15px 18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px;background:var(--surface-soft,#f6f8f9)}

/* Shared alignment and individual record boundaries in the financial report. */
html #app #page .financial-report-section{margin:22px 18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--theme-panel,#fff)}
html #app #page .financial-report-section>.panel-header{padding:16px 18px;background:var(--surface-soft,#f6f8f9)}
html #app #page .financial-report-section h2{font-size:16px;line-height:1.4}
html #app #page .financial-report-section .table-wrap{padding:0 10px 10px}
html #app #page .financial-report-section table{border-collapse:separate;border-spacing:0 8px}
html #app #page .financial-report-section :is(th,td){padding:13px 14px;vertical-align:middle;text-align:left;font-size:12px}
html #app #page .financial-report-section :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums}
html #app #page .financial-report-section th{font-size:10px;white-space:normal;background:transparent;border:0}
html #app #page .financial-report-section td{background:var(--surface-soft,#f6f8f9);border-block:1px solid var(--line)}
html #app #page .financial-report-section td:first-child{border-left:1px solid var(--line);border-radius:9px 0 0 9px}
html #app #page .financial-report-section td:last-child{border-right:1px solid var(--line);border-radius:0 9px 9px 0}
html #app #page .financial-report-section td small{margin-top:5px;line-height:1.5;font-size:11px}
html #app #page .closing-month-picker{padding:0;border:0;background:transparent}
@media(max-width:700px){
 html #app #page :is(.finance-row-menu-trigger,.expense-details-toggle){width:44px;min-width:44px;height:44px;min-height:44px}
 html #app #page .expense-primary-actions{gap:7px;flex-wrap:wrap}
 html #app #page .expense-primary-actions>button{min-height:44px;padding:9px 12px}
 html #app #page .expense-payment-toolbar{padding:10px;gap:7px}
 html #app #page .expense-lines td{border:0;background:transparent}
 html #app #page .expense-lines tbody tr{background:var(--theme-panel,#fff);border:1px solid var(--line);border-radius:12px}
 html #app #page .expense-lines td:first-child,html #app #page .expense-lines td:last-child{border:0;border-radius:0;width:auto}
 html #app #page .expense-lines .expense-detail-row>td::before{display:none}
 html #app #page .expense-lines .expense-detail-row>td{width:100%;padding:0}
 html #app #page .expense-lines .expense-detail-row{padding:0;border:0}
 html #app #page .expense-record-details{padding:13px}
 html dialog.expense-bulk-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:15px}
 html dialog.expense-bulk-modal .modal-header,html dialog.expense-bulk-modal .modal-content{padding:14px}
 html dialog.expense-bulk-modal .expense-bulk-row{padding:12px;margin:8px 0 12px}
 html dialog .expense-bulk-row-heading>button{font-size:11px;gap:5px;padding:7px;min-height:40px}
 .expense-bulk-row-heading{gap:8px;align-items:flex-start}
 .expense-bulk-row-heading>span{font-size:12px}
 html #app #page .closing-card-shell>.metric{min-height:124px;padding-bottom:38px}
 html #app #page .closing-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
 html #app #page .closing-card-open{padding-inline:12px;font-size:10px}
 .closing-origin-total{gap:12px;padding:13px}
 .closing-origin-total>strong{font-size:17px}
 html #app #page .financial-report-section{margin:16px 10px}
 html #app #page .financial-report-section>.panel-header{padding:13px}
 html #app #page .financial-report-section tbody tr{border:1px solid var(--line);border-radius:10px;background:var(--surface-soft,#f6f8f9)}
 html #app #page .financial-report-section td{border:0;background:transparent}
 html #app #page .financial-report-section td:first-child,html #app #page .financial-report-section td:last-child{border:0;border-radius:0}
}
@media(max-width:410px){
 html dialog.expense-bulk-modal .variable-bulk-required>.expense-classification{grid-template-columns:1fr}
 .financial-paste-target{padding:12px;gap:9px}
}
@media print{
 .closing-card-open{display:none!important}
 html #app #page .financial-report-section{break-inside:auto;margin:12px 0}
 html #app #page .financial-report-section tr{break-inside:avoid}
}