/* The expense page, "ค่าใช้จ่าย" (lean-rollout ticket 260). Every colour, size, radius, weight and
   duration below is a token from finance_app/static/tokens.css; this sheet defines none of its own
   and holds no literal but the 1px hairline the rest of the app uses.

   Everything is scoped to #expenses-panel or to an `ex-` class this page owns, so nothing here lands
   on another page of the shell. The four dialogs borrow the shell's `.app-modal` family and override
   only what this page needs. The day close's expense block (page-account-days.js) is `ex-day-`.

   One thing leads: the period's total at the display step. The list changes shape by the width of
   its own region, not of the window, because the sidebar still takes width at 1024. */

#expenses-panel{display:block}

/* --- heading, freshness and the company ------------------------------------------------- */
.ex-heading{margin-block-end:var(--space-16)}
.page-heading>.ex-heading-side{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-8)}
.ex-new{display:inline-flex;align-items:center;gap:var(--space-8)}
.ex-freshness{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
#expenses-panel[data-expenses-state=ready] .ex-freshness .status-dot{background:var(--color-feedback-success-text)}
#expenses-panel:is([data-expenses-state=stale],[data-expenses-state=error]) .ex-freshness{color:var(--color-feedback-error-text)}
#expenses-panel:is([data-expenses-state=stale],[data-expenses-state=error]) .ex-freshness .status-dot{background:var(--color-feedback-error-text)}
.ex-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
.ex-company{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-12);max-inline-size:none;
  margin:0 0 var(--space-20);padding:var(--space-12) var(--space-16);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-action-primary);
  border-radius:var(--radius-card)}
.ex-company-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.ex-company-name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.ex-company-note{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* --- the notice: what just happened ------------------------------------------------------- */
.ex-notice{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin:0 0 var(--space-20);
  padding:var(--space-12) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card);
  background:var(--color-surface-sunken);color:var(--color-text-primary)}
.ex-notice p{flex:1 1 var(--size-280);margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.ex-notice[data-tone=success]{background:var(--color-feedback-success-bg);border-color:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.ex-notice[data-tone=error]{background:var(--color-feedback-error-bg);border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.ex-notice button{min-height:var(--size-36);font-size:var(--text-sm)}
.ex-notice-close{color:var(--color-text-primary);background:var(--color-surface-card)}

/* --- the toolbar: the period, the category, the kind, the categories ------------------------ */
.ex-body{container:ex-body / inline-size}
.ex-toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-20);margin:0 0 var(--space-8)}
.ex-segments{display:inline-flex;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface-sunken);
  border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.ex-segment{min-height:var(--size-40);padding:var(--space-6) var(--space-14);background:transparent;border-color:transparent;
  color:var(--color-text-primary);font-weight:var(--weight-medium);font-size:var(--text-sm)}
.ex-segment:hover{background:var(--color-surface-card);border-color:var(--color-border-default)}
.ex-segment:active{background:var(--color-surface-card);border-color:var(--color-border-strong)}
.ex-segment[aria-pressed=true]{background:var(--color-surface-card);border-color:var(--color-action-primary);color:var(--color-action-primary);font-weight:var(--weight-semibold)}
.ex-segment[aria-pressed=true]:hover{background:var(--color-surface-selected)}
.ex-period{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.ex-custom{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.ex-custom label{flex:0 0 auto;font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-custom input{font-size:var(--text-sm)}
.ex-custom .ex-field-error{flex:1 1 100%}
.ex-select{flex:0 1 calc(var(--size-280) - var(--size-40));font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-select select{font-size:var(--text-sm);color:var(--color-text-primary)}
.ex-manage{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-40)}
.ex-scope-line{margin:0 0 var(--space-20);max-width:none;font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-field-error{margin:0;font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.ex-help{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-warning{color:var(--color-feedback-hold-text)}
.ex-small{display:block;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-secondary)}
.ex-block{display:block}
.ex-quiet-state{padding:var(--space-32) var(--space-16);text-align:center;color:var(--color-text-secondary);max-width:none}

/* --- the figures: the period's total leads -------------------------------------------------- */
.ex-figures{display:grid;gap:var(--space-20)}
.ex-report{padding:var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.ex-figure-label{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.ex-lead{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-10);margin:var(--space-4) 0 0;max-width:none;color:var(--color-text-primary)}
.ex-lead-amount{font-size:var(--text-display);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ex-unit{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ex-lead-count{margin:var(--space-4) 0 0;font-size:var(--text-md);color:var(--color-text-secondary)}
.ex-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--size-150) + var(--size-64)),1fr));gap:var(--space-16) var(--space-32);
  margin:var(--space-20) 0 var(--space-16);padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-subtle)}
.ex-split-figure{display:grid;gap:var(--space-4)}
.ex-split-figure dt{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.ex-split-figure dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0}
.ex-split-amount{font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ex-split-count{font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-report>.ex-help+.ex-help{margin-block-start:var(--space-8)}
.ex-card{padding:var(--space-20);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ex-card>h3{margin:0 0 var(--space-12);font-size:var(--text-md)}
.ex-totals{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ex-total-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--space-8) var(--space-16);
  padding-block:var(--space-10);border-block-end:1px solid var(--color-border-subtle)}
.ex-total-row:last-child{border-block-end:0}
.ex-total-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6);min-inline-size:0;font-weight:var(--weight-semibold)}
.ex-category-name{overflow-wrap:anywhere}
.ex-total-counts{font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-total-amount{display:flex;align-items:baseline;gap:var(--space-4);justify-content:flex-end}
.ex-amount{font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.ex-only{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-36);padding-inline:var(--space-10);font-size:var(--text-sm)}
.ex-retired{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.ex-account-id{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);min-inline-size:0}
.ex-account-id .bank-account{min-inline-size:0}
.ex-account-id .bank-icon{min-inline-size:var(--size-36);block-size:var(--size-36);font-size:var(--text-sm)}
.ex-account-id .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
@container ex-body (max-width: 559px){
  .ex-total-row{grid-template-columns:minmax(0,1fr) auto}
  .ex-total-counts{grid-column:1;grid-row:2}
  .ex-total-amount{grid-column:2;grid-row:1}
  .ex-only{grid-column:1 / -1;justify-self:start}
}

/* --- TICKET UX-AF: the owner's mockup (B). The page opens on "สรุปผล"; the transactions are on
   "รายการค่าใช้จ่าย". The scope line carries "จัดการหมวดหมู่"; the summary is two columns; each category
   has its share as a bar beside the server's own figure. ------------------------------------------- */
.ex-scope-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin:0 0 var(--space-16)}
.ex-scope-row .ex-scope-line{margin:0}
.ex-tabs{margin:0 0 var(--space-20)}   /* TICKET UX-PR (F06): the look is app.css's `.app-tabs` / `.app-tab` */
.ex-report{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-24)}
.ex-report-main{display:grid;align-content:start;gap:var(--space-4);min-inline-size:0}
.ex-report-main>.ex-help{margin-block-start:var(--space-8)}
.ex-report-side{display:grid;align-content:center;gap:var(--space-16);min-inline-size:0}
.ex-report-side .ex-split{grid-template-columns:minmax(0,1fr);margin:0;padding:0;border:0;gap:var(--space-16)}
.ex-to-list{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8)}
.ex-meter{display:block;block-size:var(--space-8);min-inline-size:var(--size-64);background:var(--color-meter-track);border-radius:var(--radius-pill);overflow:hidden}
.ex-meter-fill{display:block;block-size:100%;background:var(--color-meter-fill)}
.ex-total-row:has(.ex-meter){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto auto}
#expenses-panel .ex-list{margin-block-start:0}
@container ex-body (max-width: 719px){
  .ex-report{grid-template-columns:minmax(0,1fr)}
  .ex-to-list{inline-size:100%}
}
@container ex-body (max-width: 559px){
  .ex-total-row:has(.ex-meter){grid-template-columns:minmax(0,1fr) auto}
  .ex-meter{grid-column:1 / -1;grid-row:2}
  .ex-total-row:has(.ex-meter) .ex-total-counts{grid-row:3}
}

/* --- the list: a table that becomes one block per row in a narrow region ------------------- */
.ex-list{margin-block-start:var(--space-32)}
.ex-list-title{margin:0 0 var(--space-12);font-size:var(--text-md)}
.ex-list-title:focus{outline:none}
.ex-table-wrap{container:ex-table / inline-size;max-inline-size:100%;overflow-x:auto;background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ex-table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.ex-table th,.ex-table td{padding:var(--space-12);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle);font-size:var(--text-sm)}
.ex-table thead th{padding-block:var(--space-10);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);background:var(--color-surface-sunken);white-space:nowrap}
.ex-table tbody tr:last-child>*{border-block-end:0}
.ex-table .number{text-align:end;font-variant-numeric:tabular-nums}
.ex-table td.number{white-space:nowrap}
.ex-cell-label{display:none}
.ex-when-text{display:block;white-space:nowrap}
.ex-recorded{margin-block-start:var(--space-4)}
.ex-account-cell{min-inline-size:calc(var(--size-150) + var(--size-24))}
.ex-status{min-inline-size:calc(var(--size-150) - var(--size-24))}
.ex-kind{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.ex-kind[data-kind=bank]{background:var(--color-badge-processing-bg);color:var(--color-badge-processing-text)}
.ex-what .ex-category-name{margin-block-start:var(--space-4);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.ex-amount-figure{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.ex-free-text{display:block;overflow-wrap:anywhere;white-space:pre-line}
.ex-free-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
.ex-status .badge{white-space:nowrap}
.ex-status>*+*{margin-block-start:var(--space-6)}
.ex-slip-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.ex-slip-state .ex-small{max-inline-size:calc(var(--size-280) - var(--size-24))}
.ex-void-reason{overflow-wrap:anywhere}
.ex-actions{text-align:end}
.ex-action-stack{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-8)}
.ex-actions-head{text-align:end}
.ex-row-button{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
/* A voided expense is still readable: the row keeps its contrast, the amount is struck through, the
   row carries a marker, and the badge says "voided" in words. A bank expense the totals leave out is
   marked the same way at its amount, in words. */
#expenses-panel tr[data-voided=true]>td{background:var(--color-surface-sunken)}
#expenses-panel tr[data-voided=true]>td:first-child{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
#expenses-panel tr[data-voided=true] .ex-amount-figure,#expenses-panel tr[data-counted=false] .ex-amount-figure{text-decoration:line-through;color:var(--color-text-secondary)}
#expenses-panel tr[data-voided=true] :is(.ex-free-label,.ex-cell-label){color:var(--color-text-secondary)}
.ex-rows-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);padding:var(--space-32) var(--space-16);text-align:center;
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ex-rows-empty p{margin:0 auto}
.ex-rows-empty button{display:inline-flex;align-items:center;gap:var(--space-6)}
.ex-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);margin-block-start:var(--space-12);font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-pager p{margin:0}
.ex-pager-buttons{display:flex;gap:var(--space-8);flex-wrap:wrap}
@container ex-table (max-width: 719px){
  .ex-rows,.ex-rows tbody{display:block}
  .ex-rows thead{display:none}
  .ex-rows tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8) var(--space-12);
    padding:var(--space-14) var(--space-16);border-block-end:1px solid var(--color-border-subtle)}
  .ex-rows tbody tr:last-child{border-block-end:0}
  .ex-rows td{display:block;grid-column:1 / -1;padding:0;border:0;text-align:start;white-space:normal}
  .ex-rows td.number{text-align:start}
  .ex-cell-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
  .ex-rows .ex-when{grid-column:1;grid-row:1}
  .ex-rows .ex-amount-cell{grid-column:2;grid-row:1;text-align:end}
  .ex-rows .ex-when-text{white-space:normal}
  .ex-action-stack{align-items:stretch}
  .ex-account-cell,.ex-status{min-inline-size:0}
  .ex-actions .ex-cell-label{display:none}
  .ex-actions .ex-row-button{inline-size:100%;justify-content:center;min-height:var(--size-44)}
  #expenses-panel tr[data-voided=true]>td{background:transparent}
  #expenses-panel tr[data-voided=true]{background:var(--color-surface-sunken);box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
  #expenses-panel tr[data-voided=true]>td:first-child{box-shadow:none}
}

/* --- the dialogs ---------------------------------------------------------------------------- */
.ex-dialog .app-modal-head h2:focus{outline:none}
.ex-dialog{inline-size:min(calc(var(--space-64)*9),calc(100vw - var(--space-32)))}
.ex-dialog-wide{inline-size:min(calc(var(--space-64)*11),calc(100vw - var(--space-32)))}
.ex-dialog .app-modal-body label{flex:0 0 auto}
.ex-dialog textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md);resize:vertical}
.ex-form-fields{display:flex;flex-direction:column;gap:var(--space-16)}
.ex-kind-fields{display:flex;flex-direction:column;gap:var(--space-16)}
.ex-kind-switch{display:flex;align-self:flex-start}
.ex-kind-switch .ex-segment{flex:1 1 auto;min-height:var(--size-44)}
.ex-field{display:flex;flex-direction:column;gap:var(--space-6)}
.ex-field-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8);color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.ex-optional{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ex-hint{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ex-dialog .app-modal-body label :is(input,select,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.ex-dialog input[type=file]{padding:var(--space-8);font-size:var(--text-sm)}
.ex-category-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.ex-category-row>.ex-field{flex:1 1 calc(var(--size-150) + var(--size-64))}
.ex-add-toggle{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-44)}
.ex-inline-add,.ex-category-add{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8) var(--space-12);padding:var(--space-12);
  background:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.ex-inline-add>.ex-field,.ex-category-add>.ex-field{flex:1 1 calc(var(--size-150) + var(--size-64))}
.ex-inline-add .ex-field-error{flex:1 1 100%}
.ex-inline-add button,.ex-category-add button{min-height:var(--size-44);display:inline-flex;align-items:center;gap:var(--space-6)}
.ex-preview{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control)}
.ex-thumb{inline-size:var(--size-72);block-size:var(--size-72);object-fit:cover;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-card)}
.ex-upload{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-upload[data-state=ready]{color:var(--color-feedback-success-text)}
.ex-upload[data-state=refused]{color:var(--color-feedback-error-text)}
.ex-form-error{margin:0;padding:var(--space-10) var(--space-14);border-radius:var(--radius-control);background:var(--color-feedback-error-bg);
  color:var(--color-feedback-error-text);font-size:var(--text-sm);max-width:none}
.ex-slip-error{display:flex;align-items:flex-start;gap:var(--space-8)}
.ex-slip-error p{margin:0;max-width:none;color:inherit}
.ex-slip-error .icon{flex:0 0 auto;margin-block-start:var(--space-2)}
.ex-void-identity{display:grid;gap:var(--space-4);padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control)}
.ex-void-line{margin:0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.ex-picture-frame{display:flex;justify-content:center;padding:var(--space-12);background:var(--color-surface-sunken);border-radius:var(--radius-control)}
.ex-picture-image{max-inline-size:100%;max-block-size:calc(100vh - var(--space-64) * 5);object-fit:contain}
.ex-category-list{display:grid;gap:0;margin:0 0 var(--space-16);padding:0;list-style:none;border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.ex-category-item{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-12);
  padding:var(--space-10) var(--space-12);border-block-end:1px solid var(--color-border-subtle)}
.ex-category-item:last-child{border-block-end:0}
.ex-category-item[data-retired=true]{background:var(--color-surface-sunken)}
.ex-category-words{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0;font-weight:var(--weight-semibold)}
.ex-category-list>.ex-help{padding:var(--space-12)}

/* --- the day close's block (page-account-days.js): the day's expenses, read-only ------------- */
.ex-day{margin-block-start:var(--space-16);padding:var(--space-14) var(--space-16);background:var(--color-surface-page);
  border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.ex-day>h4{margin:0 0 var(--space-4);font-size:var(--text-sm)}
.ex-day-total{margin:0 0 var(--space-8);max-width:none;font-size:var(--text-sm);color:var(--color-text-primary)}
.ex-day-list{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;font-size:var(--text-sm)}
.ex-day-list li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.ex-day-list .ex-day-amount{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- a phone ---------------------------------------------------------------------------------- */
@media (max-width: 700px){
  .page-heading>.ex-heading-side{flex:1 1 100%;align-items:stretch}
  .ex-new{justify-content:center}
  .ex-toolbar{flex-direction:column;align-items:stretch}
  .ex-segments{display:flex}
  .ex-segment{flex:1 1 auto}
  .ex-select{flex:1 1 auto}
  .ex-manage{justify-content:center}
  .ex-lead-amount{font-size:var(--text-display-sm)}
  .ex-dialog,.ex-dialog-wide{inline-size:100%;max-inline-size:100%;max-block-size:100vh;margin:0;border-radius:0;border:0}
  .ex-dialog .app-modal-body{padding:var(--space-20)}
  .ex-dialog .app-modal-actions{flex-direction:column-reverse;align-items:stretch;margin-inline:calc(var(--space-20) * -1);padding:var(--space-16) var(--space-20)}
  .ex-dialog .app-modal-actions button{inline-size:100%}
  .ex-kind-switch{align-self:stretch}
  .ex-add-toggle{inline-size:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  #expenses-panel :is(button,input,select,textarea),.ex-segment,.ex-only,.ex-row-button{transition:none}
}

/* --- TICKET UX-PR (the owner's Group 1): one expense, "ค่าใช้จ่าย #id" ---------------------------------------------- */
.ex-detail-open{justify-content:flex-start;padding-inline:0;font-size:var(--text-xs)}
.ex-detail-tags{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0}
.ex-detail-amount{display:flex;align-items:baseline;gap:var(--space-8);margin:0;color:var(--color-text-primary)}
.ex-detail-figure{font-size:var(--text-xxl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.ex-detail-unit{font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-detail-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);margin:0}
.ex-detail-facts>div{display:grid;grid-template-columns:minmax(0,var(--size-150)) minmax(0,1fr);gap:var(--space-12);align-items:start}
.ex-detail-facts dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.ex-detail-facts dd{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
.ex-detail-more{display:grid;gap:var(--space-8)}
.ex-detail-note{display:grid;gap:var(--space-4);margin:0;max-width:none;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
#expenses-detail-actions button{display:inline-flex;align-items:center;gap:var(--space-8)}
@media (max-width: 700px){
  .ex-detail-facts>div{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}

/* --- TICKET 268 (the owner's mockup, approved 19 ต.ค. 2026) -------------------------------------------------------
   The company is the shell's (its top bar); here it is one quiet line under the heading rather than a card. The
   summary's right column is the mockup's lines: the kind on the left, its amount on the right. Each category's name
   is the press that shows only it. The list reads "วัน / ประเภท", "หมวด / บัญชี", the amount, the status, and
   "รายละเอียด" on every row, beside the row's picture and void where a role has them. */
#expenses-panel .ex-company{display:flex;align-items:baseline;gap:var(--space-4) var(--space-8);margin:calc(var(--space-8) * -1) 0 var(--space-16);
  padding:0;background:transparent;border:0;border-radius:0}
#expenses-panel .ex-company-label{font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:normal;text-transform:none;color:var(--color-text-secondary)}
#expenses-panel .ex-company-name{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.ex-report-side .ex-split-figure{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-12);
  padding-block-end:var(--space-12);border-block-end:1px solid var(--color-border-subtle)}
.ex-report-side .ex-split-figure dt{font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ex-report-side .ex-split-figure dd{justify-content:flex-end}
.ex-report-side .ex-split-amount{font-size:var(--text-lg)}
.ex-report-side .ex-split-count{flex:1 1 100%;text-align:end;font-size:var(--text-xs)}
.ex-total-row:has(.ex-meter){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto}
.ex-total-name .ex-only{min-height:var(--size-36);padding-inline:var(--space-4);margin-inline-start:calc(var(--space-4) * -1);font-size:var(--text-sm);
  font-weight:var(--weight-semibold)}
.ex-kind-line{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--space-2);margin-block-start:var(--space-2)}
.ex-kind-word[data-kind=bank]{color:var(--color-badge-processing-text)}
.ex-kind-line .ex-detail-open{min-height:var(--size-24);padding-block:0}
.ex-what .ex-category-name{margin-block-start:0}
.ex-what .ex-account-cell{margin-block-start:var(--space-4);min-inline-size:0}
.ex-what .ex-account-cell .bank-account-name{font-size:var(--text-xs);font-weight:var(--weight-regular)}
.ex-details.quiet{color:var(--color-text-link);background:transparent;border-color:transparent;font-weight:var(--weight-semibold)}
.ex-details.quiet:hover{background:var(--color-action-ghost-hover);border-color:transparent;text-decoration:underline}
@container ex-table (max-width: 719px){
  .ex-actions .ex-details{inline-size:auto;justify-content:flex-start;padding-inline:var(--space-4)}
  /* The mockup's phone row: the day and the kind on top, then the category beside its amount, then the rest. */
  .ex-rows .ex-what{grid-column:1;grid-row:2}
  .ex-rows .ex-amount-cell{grid-column:2;grid-row:2;align-self:start}
  .ex-rows :is(.ex-when,.ex-what,.ex-status)>.ex-cell-label{display:none}
  .ex-rows .ex-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
  .ex-rows .ex-status>*+*{margin-block-start:0}
}
/* A row's account under its category, as the mockup's one line ("บัญชีจ่ายหลัก · 0226"): no bank mark, the name and
   the masked number in the caption step. */
.ex-what .ex-account-cell .bank-icon{display:none}
.ex-what .ex-account-cell .bank-account{gap:0}
.ex-what .ex-account-cell :is(.bank-account-name,.bank-account-meta){font-size:var(--text-xs);color:var(--color-text-secondary)}
/* ===== TICKET 273 begin: "พบรายการเดิม" and a save button that never looks ready while it cannot save ============
   The record MoneyOS already holds is a card of its own, in the info colours, never the error box an unreadable
   picture gets; the save button is `aria-disabled` while the picture is checked or refused, with the reason beside it. */
.ex-slip-error[data-refusal=known]{display:block;padding:0;background:transparent;color:var(--color-text-primary)}
.ex-known{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-14) var(--space-16);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-processing-text);
  border-radius:var(--radius-control);background:var(--color-surface-card)}
.ex-known-title{margin:0;font-size:var(--text-md);line-height:var(--leading-snug)}
.ex-known p{margin:0;max-width:none;color:var(--color-text-primary)}
.ex-known .ex-small{color:var(--color-text-secondary)}
.ex-known-facts{display:grid;gap:var(--space-4);margin:0}
.ex-known-facts>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:var(--space-8);min-inline-size:0}
.ex-known-facts dt{color:var(--color-text-secondary);font-size:var(--text-sm)}
.ex-known-facts dd{margin:0;min-inline-size:0;overflow-wrap:anywhere}
.ex-known-figure{margin-inline-end:var(--space-4);font-weight:var(--weight-semibold)}
.ex-known-open{align-self:flex-start}
.ex-save-reason{margin:0;margin-inline-end:auto;align-self:center;font-size:var(--text-sm);color:var(--color-feedback-hold-text);max-width:none}
.ex-save-reason:focus{outline:none}
.ex-upload[data-known=true]{color:var(--color-text-secondary)}
#expenses-form-save[aria-disabled=true]{background:var(--color-action-disabled-bg);border-color:var(--color-action-disabled-border);
  color:var(--color-action-disabled-text);cursor:not-allowed;transform:none}
.ex-basis{color:var(--color-text-secondary)}
@media (max-width:700px){ /* ds-allow-hardcode: app.css's phone breakpoint; a media query cannot read a token */
  .ex-known-facts>div{grid-template-columns:minmax(0,1fr)}
  .ex-save-reason{order:1;margin-inline-end:0;text-align:center}   /* above the save button, as the column turns */
}
/* ===== TICKET 273 end ===== */
/* ===== TICKET 279 begin: a void that waits for a closed day's reopen ============================================
   The button stays where it was and never looks ready (`aria-disabled`, the disabled tokens), with the reason under
   it in the hold colour: the company owner reopens the day first. */
.ex-dialog .danger[aria-disabled=true],.ex-row-button[aria-disabled=true]{background:var(--color-action-disabled-bg);
  border-color:var(--color-action-disabled-border);color:var(--color-action-disabled-text);cursor:not-allowed;transform:none}
.ex-void-closed{margin:0;max-inline-size:calc(var(--size-280) - var(--size-24));color:var(--color-feedback-hold-text)}
.ex-void-closed:focus{outline:none}
.ex-detail-more .ex-void-closed{max-inline-size:none}
/* ===== TICKET 279 end ===== */
/* ===== TICKET 289 begin: the preview before the save, what the slip says against what was entered =================
   The preview is a card of its own in the info colours, as the record already held is: the account charged, the
   amount and the day, then the COMPUTED balance before and after and, apart from it, the ACTUAL balance with its
   evidence time, a different figure. A closed day says so in the hold colour; a slip held for a person, too. */
.ex-effect{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-14) var(--space-16);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-processing-text);
  border-radius:var(--radius-control);background:var(--color-surface-card)}
.ex-effect[hidden]{display:none}
.ex-effect-title{margin:0;font-size:var(--text-md);line-height:var(--leading-snug)}
.ex-effect p{margin:0;max-width:none}
.ex-effect-computed{font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.ex-effect-actual{padding-block-start:var(--space-8);border-block-start:1px solid var(--color-border-default);
  color:var(--color-text-secondary)}
.ex-effect-closed,.ex-check[data-check=held]{color:var(--color-feedback-hold-text)}
.ex-check[data-check=agrees]{color:var(--color-text-secondary)}
.ex-declared-amount{color:var(--color-text-secondary)}
.ex-void-effect{color:var(--color-text-primary)}
#expenses-detail-correct[aria-disabled=true]{background:var(--color-action-disabled-bg);
  border-color:var(--color-action-disabled-border);color:var(--color-action-disabled-text);cursor:not-allowed;transform:none}
/* ===== TICKET 289 end ===== */
/* ===== TICKET 290 begin: expense categories under standard main groups ============================================
   The figures read by main group, then by sub-category under each (indented under its group's line); money moves and
   loans are a card of their own, apart from the expense total. The sub-categories under no group yet are a list with a
   picker each, in the info colours, right after the total; the suggestion is said beside the picker. Tokens only. */
.ex-groups{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.ex-group{display:grid;gap:0;padding-block-end:var(--space-8);border-block-end:1px solid var(--color-border-default)}
.ex-group:last-child{padding-block-end:0;border-block-end:0}
.ex-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto;align-items:center;
  gap:var(--space-8) var(--space-16);padding-block:var(--space-10)}
.ex-group-name{font-size:var(--text-md);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.ex-group-head[data-main-group=unassigned] .ex-group-name{color:var(--color-feedback-hold-text)}
.ex-group-subs{padding-inline-start:var(--space-16);border-inline-start:var(--size-marker) solid var(--color-border-subtle)}
.ex-group-subs .ex-total-row{padding-block:var(--space-6)}
.ex-group-subs .ex-amount{font-size:var(--text-md)}
@container ex-body (max-width: 559px){
  .ex-group-head{grid-template-columns:minmax(0,1fr) auto}
  .ex-group-head .ex-meter{grid-column:1 / -1;grid-row:2}
  .ex-group-head .ex-total-counts{grid-column:1;grid-row:3}
  .ex-group-head .ex-total-amount{grid-column:2;grid-row:1}
  .ex-group-subs{padding-inline-start:var(--space-8)}
}
.ex-assign{border-inline-start:var(--size-marker) solid var(--color-feedback-hold-text)}
.ex-assign>.ex-help{margin:0 0 var(--space-12);max-width:none}
.ex-assign h3:focus,.ex-card>h3[tabindex]:focus{outline:none}
.ex-assign-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ex-assign-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:end;gap:var(--space-8) var(--space-16);
  padding-block:var(--space-12);border-block-end:1px solid var(--color-border-subtle)}
.ex-assign-row:last-child{border-block-end:0;padding-block-end:0}
.ex-assign-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6);min-inline-size:0;align-self:center;
  font-weight:var(--weight-semibold)}
.ex-group-picker{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-6) var(--space-12);min-inline-size:0}
.ex-group-field{flex:1 1 calc(var(--size-150) + var(--size-64));min-inline-size:0}
.ex-group-field select{inline-size:100%;min-height:var(--size-44)}
.ex-group-picker .ex-field-error{flex:1 1 100%;margin:0}
.ex-group-save{min-height:var(--size-44)}
.ex-suggested{flex:1 1 100%;color:var(--color-badge-processing-text)}
.ex-group-picker .ex-suggested{order:3}   /* under the picker and its button, which share a line */
.ex-group-picker .ex-field-error{order:4}
@container ex-body (max-width: 559px){
  .ex-assign-row{grid-template-columns:minmax(0,1fr)}
}
.ex-movement{border-inline-start:var(--size-marker) solid var(--color-border-strong)}
.ex-movement-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0 0 var(--space-12)}
.ex-movement .ex-help{margin-block-start:var(--space-8);max-width:none}
.ex-movement-note{color:var(--color-text-secondary)}
.ex-group-line{color:var(--color-text-secondary)}
.ex-group-line[data-main-group=unassigned]{color:var(--color-feedback-hold-text)}
.ex-category-group{font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ex-category-group[data-main-group=unassigned]{color:var(--color-feedback-hold-text)}
.ex-category-acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8)}
.ex-regroup{flex:1 1 100%;padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control)}
.ex-regroup[hidden]{display:none}
.ex-field[data-required=true] .ex-hint{color:var(--color-feedback-hold-text)}
.ex-day-list .ex-day-group{font-weight:var(--weight-semibold)}
.ex-day-list .ex-day-sub{padding-inline-start:var(--space-12);color:var(--color-text-secondary)}
.ex-day-movement{margin-block-start:var(--space-8);padding-block-start:var(--space-8);border-block-start:1px solid var(--color-border-default)}
/* ===== TICKET 290 end ===== */