/* Shared compact interface, approved for production on 2026-10-18. */
body.interface-refresh { background: #f3f5f8; color: #203449; }
.interface-refresh { --shadow: 0 2px 8px #18354c08; --line: #dce3eb; --muted: #63758a; --list-pad-y: 6px; --list-pad-x: 12px; --list-gap: 8px; --list-font-size: 13px; }
.interface-refresh .page { grid-template-columns: 224px minmax(0,1fr); }
.interface-refresh .sidebar { padding: 22px 14px; background: #fff; border-right: 1px solid var(--line); }
.interface-refresh .sidebar-brand-mark { width: 88px; height: 88px; margin: auto; }
.interface-refresh .sidebar-brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.interface-refresh .sidebar-brand-copy-card { border: 0; background: none; padding: 12px 8px; box-shadow: none; }
.interface-refresh .sidebar-brand-copy h2 { font-size: 17px; }
.interface-refresh .sidebar-brand-copy .eyebrow { display: none; }
.interface-refresh .sidebar-user-meta,.interface-refresh .sidebar-user-role { font-size: 12px; }
.interface-refresh .nav { gap: 4px; }
.interface-refresh .nav button { padding: 11px 12px; min-height: 40px; font-size: 14px; border-radius: 8px; }
.interface-refresh .nav button.active { background: #eaf2fc; color: #00559f; box-shadow: inset 3px 0 #00559f; }
.interface-refresh .content { min-width: 0; grid-template-columns: minmax(0,1fr); padding: 16px 24px 36px; gap: 16px; }
.interface-refresh .content > * { min-width: 0; }
.interface-refresh .content-topbar { height: auto; min-height: 38px; margin: 0; gap: 8px; }
.interface-refresh .content-topbar-glow { display: none; }
.interface-refresh .hero,.interface-refresh .panel { padding: 20px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: #fff; }
.interface-refresh .hero::before,.interface-refresh .panel::before { height: 2px; }
.interface-refresh h1 { font-size: 26px; line-height: 1.25; }
.interface-refresh h2 { font-size: 22px; }
.interface-refresh h3 { font-size: 17px; }
.interface-refresh .stack { gap: 14px; }
.interface-refresh .muted { line-height: 1.45; }
.interface-refresh button,.interface-refresh input,.interface-refresh select { min-height: 38px; border-radius: 8px; padding: 8px 11px; font-size: 14px; }
.interface-refresh button.secondary { background: #fff; border: 1px solid #d1dbe5; box-shadow: none; }
.interface-refresh button.primary { background: #075da6; box-shadow: none; }
.interface-refresh textarea { border-radius: 8px; padding: 8px 11px; font-size: 14px; }
.interface-refresh button.debt-quick-filter.active { background: #075da6; color: #fff; border-color: #075da6; }
.interface-refresh .payment-submit-top { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.interface-refresh .payment-selection-toolbar { justify-content: flex-start; }
.interface-refresh .payment-select-current-page { order: -1; min-height: 38px; background: #fff; }
.interface-refresh .payment-select-current-page input { min-height: 0; padding: 0; }
.interface-refresh .payment-choice { padding: var(--list-pad-y) var(--list-pad-x); margin-bottom: var(--list-gap); gap: var(--list-gap); font-size: var(--list-font-size); line-height: 1.3; box-shadow: none; }
.interface-refresh .payment-choice-main { gap: 10px; min-width: 0; }
.interface-refresh .payment-choice-body { gap: 4px; }
.interface-refresh .payment-choice-topline { gap: 4px 8px; }
.interface-refresh .payment-choice-topline strong { overflow-wrap: anywhere; }
.interface-refresh .payment-choice-meta { flex-direction: row; flex-wrap: wrap; gap: 3px 8px; }
.interface-refresh .payment-choice .pill { padding: 3px 7px; line-height: 1.3; }
.interface-refresh .payment-pick { padding: 0; flex: 0 0 16px; }
.interface-refresh .payment-pick input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; }
.interface-refresh .payment-amount-box { grid-template-columns: minmax(0,1fr) minmax(0,120px); gap: 8px; padding: 0; border: 0; background: transparent; min-width: 0; }
.interface-refresh .payment-amount-box > * { min-width: 0; }
.interface-refresh .payment-amount-box input { min-height: 38px; padding: 6px 9px; }
.interface-refresh label:has(> #otp-select-page,> #micb-select-page) { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 8px; font-size: 13px; line-height: 1.4; }
.interface-refresh #otp-select-page,.interface-refresh #micb-select-page,.interface-refresh .otp-pick > input[type=checkbox] { width: 16px; height: 16px; min-height: 0; flex: 0 0 16px; padding: 0; margin: 0; }
.interface-refresh .otp-pick:has(> input[data-otp-pick]),.interface-refresh .otp-pick:has(> input[data-micb-pick]) { width: 100%; max-width: none; padding: var(--list-pad-y) var(--list-pad-x); gap: 10px; font-size: var(--list-font-size); line-height: 1.3; background: #f6f8fb; border-color: var(--line); }
.interface-refresh .stack:has(> .otp-pick > input[data-otp-pick]),.interface-refresh .stack:has(> .otp-pick > input[data-micb-pick]) { gap: var(--list-gap); }
.interface-refresh .otp-pick > span { min-width: 0; overflow-wrap: anywhere; }
.interface-refresh .otp-pick .small,.interface-refresh .otp-pick .bank-invoice-timing { font-size: 12px; }
.interface-refresh .otp-pick .bank-invoice-timing { margin-top: 2px; gap: 3px 8px; line-height: 1.3; }
.interface-refresh .otp-pick .bank-due-badge { padding: 2px 7px; }
.interface-refresh :is(.dashboard-budget-card,.upcoming-payment-card,.budget-mobile-card,.request-mobile-card,.invoice-mobile-card,.payment-debt-card,.branch-need-card,.branch-summary-card,.email-draft) { background: #fff; border-color: var(--line); border-radius: 10px; box-shadow: none; }
.interface-refresh :is(.branch-need-item-summary,.payment-choice,.invoice-form-total-box,.meal-bracelet-registration,.meal-station-banner) { background: #f6f8fb; border-color: var(--line); border-radius: 10px; }
.interface-refresh .invoice-batch-row { background: #fff; border-radius: 8px; }
.interface-refresh .invoice-batch-row-error { background: #fff0f1; border-color: #e3a7af; }
.interface-refresh button:focus-visible,.interface-refresh summary:focus-visible { outline: 3px solid #82b4ea; outline-offset: 2px; }
.interface-refresh :is(.table,.table-scroll table,.table-wrap table,.comparison-scroll table,.review-table-scroll table) :is(th,td) { padding: var(--list-pad-y) var(--list-pad-x); font-size: var(--list-font-size); line-height: 1.3; }
.interface-refresh :is(.table,.table-scroll table,.comparison-scroll table) button { min-height: 34px; padding: 4px 8px; font-size: var(--list-font-size); }
.interface-refresh input:is([type=checkbox],[type=radio]) { min-height: 0; padding: 0; }
.interface-refresh .table th { background: #f6f8fb; color: #54667b; }
.interface-refresh .table tbody tr:hover { background: #f8fbff; }
.interface-refresh .pill { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
/* Shared list density: content can wrap; never impose a fixed row height. */
.interface-refresh :is(.invoice-list-table,.request-compact-table,.payment-debt-table-scroll .table) :is(th,td) { padding: var(--list-pad-y) var(--list-pad-x); font-size: var(--list-font-size); line-height: 1.3; }
.interface-refresh :is(.invoice-list-table,.request-compact-table,.payment-debt-table-scroll .table) th { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.interface-refresh .invoice-list-table .invoice-detail-btn,.interface-refresh .request-compact-table .request-detail-btn { min-height: 34px; padding: 4px 7px; font-size: var(--list-font-size); }
.interface-refresh .invoice-list-table .link-button { padding: 0; }
.interface-refresh :is(.invoice-list-table,.request-compact-table,.payment-debt-table-scroll,.invoice-mobile-card,.request-mobile-card,.payment-debt-card) .pill { padding: 3px 7px; line-height: 1.3; }
.interface-refresh :is(.invoice-mobile-list,.request-mobile-list,.payment-debt-mobile-list) { gap: var(--list-gap); }
.interface-refresh :is(.invoice-mobile-card,.request-mobile-card,.payment-debt-card) { padding: var(--list-pad-y) var(--list-pad-x); gap: var(--list-gap); font-size: var(--list-font-size); line-height: 1.3; width: 100%; min-width: 0; }
.interface-refresh :is(.invoice-mobile-card-head,.request-mobile-card-head,.payment-debt-card-head) { flex-direction: row; flex-wrap: wrap; align-items: start; gap: 6px 10px; }
.interface-refresh :is(.invoice-mobile-card-head,.request-mobile-card-head,.payment-debt-card-head) > div:first-child { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.interface-refresh :is(.invoice-mobile-card-head,.request-mobile-card-head,.payment-debt-card-head) p { margin: 2px 0 0; font-size: 12px; }
.interface-refresh :is(.invoice-mobile-meta,.request-mobile-meta,.payment-debt-meta) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px var(--list-gap); }
.interface-refresh :is(.invoice-mobile-meta,.request-mobile-meta,.payment-debt-meta) div { gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.interface-refresh .stat { border-radius: 10px; padding: 16px; box-shadow: none; background: #fff; min-width: 0; }
.interface-refresh .stat > strong { font-size: 26px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.interface-refresh .dashboard-stats-grid { align-items: start; gap: 12px; }
.interface-refresh .action-center-grid { gap: 10px; }
.interface-refresh .action-card { padding: 12px; border-radius: 8px; box-shadow: none; }
.interface-refresh .action-card-head strong { font-size: 24px; }
.interface-refresh .grid-2 { gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.interface-refresh .grid-2 > * { min-width: 0; }
.interface-refresh .form-grid { gap: 12px; align-items: end; }
.interface-refresh .form-grid > * { min-width: 0; }
.interface-refresh .catalog-tabs { gap: 6px; flex-wrap: wrap; }
.interface-refresh .catalog-tab-btn { padding: 9px 14px; border-radius: 8px; }
.interface-refresh .invoice-upload-box,.interface-refresh .import-tool-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f6f8fb; }
.interface-refresh .invoice-upload-box > *,.interface-refresh .import-tool-row > * { min-width: 0; }
.interface-refresh .invoice-upload-box strong,.interface-refresh .import-tool-row strong { display: block; font-size: 14px; margin-bottom: 5px; }
.interface-refresh .invoice-upload-box p,.interface-refresh .import-tool-row p { font-size: 13px; line-height: 1.5; margin: 3px 0 0; max-width: 85ch; }
.interface-refresh .invoice-upload-box .invoice-upload-actions,.interface-refresh .import-tool-row .actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 8px; justify-content: start; }
.interface-refresh .invoice-upload-trigger,.interface-refresh .file-upload-button { position: relative; min-width: 0; width: 100%; min-height: 40px; padding: 9px 12px; margin: 0; border: 1px solid #d1dbe5; border-radius: 8px; background: #fff; color: #203449; box-shadow: none; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.interface-refresh .invoice-upload-trigger:hover,.interface-refresh .file-upload-button:hover { background: #edf2f7; border-color: #9aafc4; }
.interface-refresh .invoice-upload-box .invoice-upload-trigger:first-child { background: #075da6; border-color: #075da6; color: #fff; }
.interface-refresh .invoice-upload-box .invoice-upload-trigger:first-child:hover { background: #064e8b; }
.interface-refresh .invoice-upload-trigger:focus-within,.interface-refresh .file-upload-button:focus-within { outline: 3px solid #82b4ea; outline-offset: 2px; }
.interface-refresh .file-upload-button.has-files { background: #edf5ff; border-color: #86acd3; color: #075da6; box-shadow: none; }
.interface-refresh .invoice-batch-panel,.interface-refresh .invoice-processing-box { border-radius: 10px; border-color: var(--line); background: #f6f8fb; }
.interface-refresh .invoice-batch-processing { background: #edf5ff; border-color: #86acd3; }
/* Remaining repeated lists and nested cards share the same spacing tokens. */
.interface-refresh :is(.dashboard-budget-list,.upcoming-payments-mobile-list,.budget-mobile-list,.branch-needs-list-table,.invoice-batch-history-list) { gap: var(--list-gap); }
.interface-refresh :is(.dashboard-budget-card,.upcoming-payment-card,.budget-mobile-card,.branch-need-list-card,.branch-need-card,.invoice-batch-history-row,.invoice-batch-row) { padding: var(--list-pad-y) var(--list-pad-x); gap: var(--list-gap); font-size: var(--list-font-size); line-height: 1.3; min-width: 0; }
.interface-refresh :is(.upcoming-payment-meta,.budget-mobile-meta) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px var(--list-gap); }
.interface-refresh :is(.upcoming-payment-meta,.budget-mobile-meta) div { gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.interface-refresh :is(.upcoming-payment-card-head,.budget-mobile-card-head) { flex-direction: row; flex-wrap: wrap; gap: 6px 10px; }
.interface-refresh :is(.upcoming-payment-card-head,.budget-mobile-card-head) > * { min-width: 0; overflow-wrap: anywhere; }
.interface-refresh :is(.bank-history-row,.otp-selected-row) { padding: var(--list-pad-y) 0; gap: var(--list-gap); font-size: var(--list-font-size); line-height: 1.3; }
.interface-refresh .bank-history-actions .bank-history-select { min-height: 38px; }
.interface-refresh :is(.detail-box,.branch-need-summary-grid > div,.branch-need-item-row,.asset-guide,.asset-entry-form,.asset-empty-action,.supplier-bank-account,.user-section-access) { padding: 12px; border-radius: 10px; }
.interface-refresh :is(.detail-box,.asset-guide,.asset-entry-form) { background: #f6f8fb; }
.interface-refresh :is(.branch-need-summary-grid,.asset-guide,.asset-guide-grid,.user-section-options) { gap: var(--list-gap); }
.interface-refresh .user-section-options { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.interface-refresh :is(.branch-need-item-summary,.request-item-summary) { padding: var(--list-pad-y) var(--list-pad-x); gap: var(--list-gap); }
.interface-refresh :is(.comparison-filter summary,#report-purpose-filter summary) { padding: 9px 12px; font-size: 13px; }
.interface-refresh :is(.comparison-options,.report-purpose-options) { padding: 8px 12px; gap: var(--list-gap); }
.interface-refresh .review-table-scroll :is(th,td) { padding: var(--list-pad-y) var(--list-pad-x); font-size: var(--list-font-size); }
.interface-refresh .comparison-purpose td:first-child { padding-left: 28px; }
/* Keep the native file controls keyboard-accessible without changing upload handlers. */
.interface-refresh .invoice-upload-trigger input,.interface-refresh .file-upload-button input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; margin: 0; opacity: 0; cursor: pointer; }
.review-banner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 18px; background: #fff5d8; color: #634d15; border-bottom: 1px solid #ead9a2; font-size: 13px; }
.review-banner button { background: #fff; border: 1px solid #dbc885; padding: 5px 10px; min-height: 32px; }
.review-banner strong { letter-spacing: .025em; }
.review-details { font-size: 13px; margin-top: 6px; }
.review-details summary { color: #075da6; cursor: pointer; padding: 8px 0; }
.review-details[open] > :not(summary) { margin-top: 8px; }
.review-filters { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; padding: 14px; background: #f6f8fb; border: 1px solid var(--line); border-radius: 10px; align-items: end; }
.review-filters > * { min-width: 0; }
.review-filters .budget-month-nav { grid-column: 1 / -1; flex-wrap: wrap; }
.review-filters .budget-month-nav > * { min-width: 0; }
.interface-refresh .review-invoice-head th { position: static; }
.interface-refresh .budget-filters-row.review-filters { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.review-filters label { font-size: 12px; display: grid; gap: 6px; }
.review-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0; }
.review-chips button { border: 1px solid #cddff2; background: #edf5ff; font-size: 12px; min-height: 30px; padding: 5px 9px; max-width: 100%; overflow-wrap: anywhere; }
.review-filter-label { font-size: 12px; color: var(--muted); }
.review-dialog { color: #203449; border: 1px solid #dce3eb; border-radius: 14px; padding: 24px; width: min(1080px,94vw); max-height: 90vh; background: #fff; }
.review-dialog::backdrop { background: #152d48a0; }
.review-dialog header { display: flex; gap: 15px; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.review-dialog h2 { margin-bottom: 6px; }
.review-dialog .review-kpis { margin: 16px 0; }
.review-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.review-supplier-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); }
.review-supplier-kpis .stat > strong { font-size: 22px; }
.review-kpis .stat { border: 1px solid var(--line); display: grid; gap: 8px; }
.review-table-scroll { overflow: auto; width: 100%; }
.review-table-scroll table { width: 100%; border-collapse: collapse; }
.review-table-scroll td,.review-table-scroll th { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }
.review-table-scroll th { font-size: 12px; color: var(--muted); background: #f6f8fb; }
.review-table-scroll td { font-size: 14px; }
.review-table-scroll td.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.review-link { border: 0 !important; color: #075da6; background: transparent; padding: 2px !important; text-align: left; text-decoration: underline; }
.review-meal-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.review-meal-tabs button[aria-pressed="true"] { background: #075da6; color: white; border-color: #075da6; }
.review-note { border-left: 3px solid #e2b64b; padding: 10px 14px; background: #fff9eb; font-size: 13px; line-height: 1.5; }
.review-serving { max-width: 1000px; margin: 0 auto; }
.review-scan-result { text-align: center; padding: 38px 20px; border: 2px solid #cbd7e3; border-radius: 16px; background: #f5f8fc; }
.review-scan-result h2 { font-size: clamp(26px,4vw,42px); margin-bottom: 12px; }
.review-scan-result p { font-size: 18px; }
.review-scan-result.accepted { background: #edf9f1; color: #146237; border-color: #54a477; }
.review-scan-result.denied { background: #fff0f1; color: #a51f35; border-color: #d56878; }
.review-scan-result.duplicate { background: #fff8e8; color: #865e12; border-color: #d5b359; }
.review-serving form { display: flex; gap: 10px; }
.review-serving form input { flex: 1; min-width: 0; font-size: 22px; padding: 16px; }
.review-serving form button { font-size: 17px; }
.review-settings { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.review-settings > label { display: grid; gap: 6px; flex: 1; min-width: 140px; }
.review-muted { color: #63758a; font-size: 13px; }
.review-history { max-height: 250px; overflow: auto; }
.review-checkbox { display: flex; align-items: center; gap: 8px; }
.review-checkbox input { width: auto; min-height: 20px; }
@media(max-width:1100px) { .review-kpis,.interface-refresh .dashboard-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:960px) { .interface-refresh .page { grid-template-columns: minmax(0,1fr); } .interface-refresh .content { padding: 14px; } }
@media(max-width:600px) {
  .interface-refresh .dashboard-stats-grid { grid-template-columns: minmax(0,1fr); }
  .interface-refresh .content-topbar { flex-wrap: wrap; }
  .interface-refresh .content-topbar-tools { width: auto; min-width: 0; max-width: 100%; margin-left: auto; }
  .interface-refresh .hero,.interface-refresh .panel { padding: 14px; }
  .review-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .review-kpis .stat > strong,.interface-refresh .stat > strong { font-size: 20px; }
  .review-dialog { padding: 15px; }
  .review-serving form { flex-direction: column; }
  .review-filters { grid-template-columns: minmax(0,1fr); }
  .review-banner { padding: 9px 12px; }
}