/* The top-up page, "บันทึกเงินเข้า" (lean-rollout ticket 238). 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 #topups-panel or to a `tu-` class this page owns, so nothing here lands
   on another page of the shell. The three dialogs borrow the shell's `.app-modal` family
   (page-accounts-settings.css) and override only what this page needs.

   One thing leads on each tab: on the summary, the total of the period at the display step; on
   the list, the rows. Tables change shape by the width of their own region, not of the window,
   because the sidebar still takes width at 1024. */

#topups-panel{display:block}

/* --- heading, freshness and the company ------------------------------------------------- */
.tu-heading{margin-block-end:var(--space-16)}
.page-heading>.tu-heading-side{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-8)}
.tu-new{display:inline-flex;align-items:center;gap:var(--space-8)}
.tu-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)}
#topups-panel[data-topups-state=ready] .tu-freshness .status-dot{background:var(--color-feedback-success-text)}
#topups-panel:is([data-topups-state=stale],[data-topups-state=error]) .tu-freshness{color:var(--color-feedback-error-text)}
#topups-panel:is([data-topups-state=stale],[data-topups-state=error]) .tu-freshness .status-dot{background:var(--color-feedback-error-text)}
.tu-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
.tu-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)}
.tu-company-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.tu-company-name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.tu-company-note{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* --- the notice: what just happened ------------------------------------------------------- */
.tu-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)}
.tu-notice p{flex:1 1 var(--size-280);margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.tu-notice[data-tone=success]{background:var(--color-feedback-success-bg);border-color:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.tu-notice[data-tone=error]{background:var(--color-feedback-error-bg);border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.tu-notice button{min-height:var(--size-36);font-size:var(--text-sm)}
.tu-notice-close{color:var(--color-text-primary);background:var(--color-surface-card)}

/* --- the two tabs ------------------------------------------------------------------------- */
.tu-tabs{margin:0 0 var(--space-20)}   /* TICKET UX-PR (F06): the look is app.css's `.app-tabs` / `.app-tab` */
.tu-pane{container:tu-pane / inline-size}
#topups-records-title:focus{outline:none}

/* --- the toolbar: which companies, the period, the order, the filters ---------------------- */
.tu-toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-20);margin:0 0 var(--space-8)}
.tu-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)}
.tu-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)}
.tu-segment:hover{background:var(--color-surface-card);border-color:var(--color-border-default)}
.tu-segment:active{background:var(--color-surface-card);border-color:var(--color-border-strong)}
.tu-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)}
.tu-segment[aria-pressed=true]:hover{background:var(--color-surface-selected)}
.tu-period{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.tu-custom{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.tu-custom label{flex:0 0 auto;font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-custom input{font-size:var(--text-sm)}
.tu-custom .tu-field-error{flex:1 1 100%}
.tu-select{flex:0 1 calc(var(--size-280) - var(--size-40));font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-select select{font-size:var(--text-sm);color:var(--color-text-primary)}
.tu-scope-line{margin:0 0 var(--space-20);max-width:none;font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-field-error{margin:0;font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.tu-help{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-small{display:block;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-secondary)}
.tu-quiet-state{padding:var(--space-32) var(--space-16);text-align:center;color:var(--color-text-secondary);max-width:none}
.tu-error-text{color:var(--color-feedback-error-text)}

/* --- the headline: the period's total leads ------------------------------------------------- */
.tu-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)}
.tu-figure-label{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.tu-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)}
.tu-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}
.tu-unit{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.tu-lead-count{margin:var(--space-4) 0 0;font-size:var(--text-md);color:var(--color-text-secondary)}
.tu-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 0;padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-subtle)}
.tu-split-figure{display:grid;gap:var(--space-4)}
.tu-split-figure dt{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.tu-split-figure dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0}
.tu-split-amount{font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tu-split-count{font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-voided-note{margin-block-start:var(--space-16)}

/* --- the chart: one bar per Bangkok day, the theme's chart tokens -------------------------- */
.tu-card{margin-block-start:var(--space-24);padding:var(--space-20);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.tu-card>h3{margin:0 0 var(--space-12);font-size:var(--text-md)}
.tu-chart{margin:0}
.tu-chart-max{margin:0 0 var(--space-4);font-size:var(--text-xs);color:var(--color-text-secondary);max-width:none}
.tu-chart-svg{display:block;inline-size:100%;block-size:var(--size-150);overflow:visible}
.tu-chart-grid{stroke:var(--color-chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.tu-chart-axis{stroke:var(--color-chart-axis);stroke-width:1;vector-effect:non-scaling-stroke}
.tu-chart-bar{fill:var(--color-chart-series-1)}
.tu-chart-days{display:flex;justify-content:space-between;gap:var(--space-8);margin:var(--space-6) 0 var(--space-12);max-width:none;
  font-size:var(--text-xs);color:var(--color-text-secondary)}
.tu-chart-figures{margin-block-start:var(--space-12);border-block-start:1px solid var(--color-border-subtle);padding-block-start:var(--space-12)}
.tu-chart-figures summary{min-height:var(--size-44);display:flex;align-items:center;cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-link)}
.tu-chart-figures summary:hover{text-decoration:underline}
.tu-day-table{margin-block-start:var(--space-8)}

/* --- the accounts: each a button that opens its records ------------------------------------ */
.tu-section{margin-block-start:var(--space-32)}
.tu-section>h3{margin:0 0 var(--space-4);font-size:var(--text-md)}
.tu-section>.tu-help{margin-block-end:var(--space-12)}
.tu-accounts,.tu-companies{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.tu-account{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-8) var(--space-20);inline-size:100%;
  padding:var(--space-14) var(--space-16);background:var(--color-surface-card);border-color:var(--color-border-default);
  color:var(--color-text-primary);font-weight:var(--weight-regular);text-align:start;white-space:normal}
.tu-account:hover{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.tu-account:active{background:var(--color-surface-selected);border-color:var(--color-border-strong)}
.tu-account>.icon{color:var(--color-text-caption)}
.tu-account[data-count="0"] .tu-account-amount{color:var(--color-text-secondary)}
.tu-account-id{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);min-inline-size:0}
.tu-account-id .bank-account{min-inline-size:0}
.tu-account-id .bank-icon{min-inline-size:var(--size-36);block-size:var(--size-36);font-size:var(--text-sm)}
.tu-account-id .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
.tu-badges{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.tu-type{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.tu-type[data-account-type=withdrawal_staff]{background:var(--color-badge-processing-bg);color:var(--color-badge-processing-text)}
.tu-account-figures{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);text-align:end}
.tu-account-total{display:flex;align-items:baseline;gap:var(--space-4)}
.tu-account-amount{font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.tu-account-count{font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-account-latest{font-size:var(--text-xs);color:var(--color-text-secondary)}
.tu-company-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4) var(--space-16);
  padding:var(--space-14) var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.tu-company-row>*{grid-column:1}
.tu-company-row>.tu-open-company{grid-column:2;grid-row:1 / span 3;display:inline-flex;align-items:center;gap:var(--space-6);flex-direction:row-reverse}
.tu-company-row[data-status=error]{border-color:var(--color-border-danger)}
.tu-company-title{font-size:var(--text-md);overflow-wrap:anywhere}
.tu-company-figures{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-10);margin:0;max-width:none}
@container tu-pane (max-width: 559px){
  .tu-account{grid-template-columns:minmax(0,1fr) auto}
  .tu-account-figures{grid-column:1 / -1;align-items:flex-start;text-align:start}
  .tu-account>.icon{grid-column:2;grid-row:1}
  .tu-company-row{grid-template-columns:minmax(0,1fr)}
  .tu-company-row>.tu-open-company{grid-column:1;grid-row:auto;inline-size:100%;justify-content:center;min-height:var(--size-44)}
}

/* --- the list: a table that becomes one block per row in a narrow region ------------------- */
.tu-table-wrap{container:tu-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)}
.tu-table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.tu-table th,.tu-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)}
.tu-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}
.tu-table tbody tr:last-child>*{border-block-end:0}
.tu-table .number{text-align:end;font-variant-numeric:tabular-nums}
.tu-table td.number{white-space:nowrap}
.tu-day-table{border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.tu-cell-label{display:none}
.tu-when-text{display:block;white-space:nowrap}
.tu-amount-figure{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.tu-free-line{display:block;overflow-wrap:anywhere}
.tu-free-line+.tu-free-line{margin-block-start:var(--space-4)}
.tu-free-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
.tu-status .badge{white-space:nowrap}
.tu-status .tu-small{margin-block-start:var(--space-4)}
.tu-void-reason{overflow-wrap:anywhere}
.tu-actions{text-align:end}
.tu-actions-head{text-align:end}
.tu-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)}
.tu-actions .tu-row-button+.tu-row-button{margin-inline-start:var(--space-8)}
/* A voided record is still readable: the row keeps its contrast, the amount is struck through
   and the row carries a marker, and the badge says "voided" in words. */
#topups-panel tr[data-voided=true]>td{background:var(--color-surface-sunken)}
#topups-panel tr[data-voided=true]>td:first-child{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
#topups-panel tr[data-voided=true] .tu-amount-figure{text-decoration:line-through;color:var(--color-text-secondary)}
/* The caption ink does not reach AA on the sunken row (axe, measured); the secondary ink does. */
#topups-panel tr[data-voided=true] :is(.tu-free-label,.tu-cell-label){color:var(--color-text-secondary)}
.tu-rows-empty{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)}
.tu-rows-empty p{margin:0 auto}
.tu-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)}
.tu-pager p{margin:0}
.tu-pager-buttons{display:flex;gap:var(--space-8);flex-wrap:wrap}
@container tu-table (max-width: 719px){
  .tu-rows,.tu-rows tbody{display:block}
  .tu-rows thead{display:none}
  .tu-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)}
  .tu-rows tbody tr:last-child{border-block-end:0}
  .tu-rows td{display:block;grid-column:1 / -1;padding:0;border:0;text-align:start;white-space:normal}
  .tu-rows td.number{text-align:start}
  .tu-cell-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
  .tu-rows .tu-when{grid-column:1;grid-row:1}
  .tu-rows .tu-amount{grid-column:2;grid-row:1;text-align:end}
  .tu-rows .tu-when-text{white-space:normal}
  .tu-actions{display:flex;flex-direction:column;gap:var(--space-8)}
  .tu-actions .tu-cell-label{display:none}
  .tu-actions .tu-row-button{inline-size:100%;justify-content:center;min-height:var(--size-44)}
  .tu-actions .tu-row-button+.tu-row-button{margin-inline-start:0}
  #topups-panel tr[data-voided=true]>td{background:transparent}
  #topups-panel tr[data-voided=true]{background:var(--color-surface-sunken);box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
  #topups-panel tr[data-voided=true]>td:first-child{box-shadow:none}
}

/* --- the dialogs ---------------------------------------------------------------------------- */
.tu-dialog .app-modal-head h2:focus{outline:none}
.tu-dialog{inline-size:min(calc(var(--space-64)*9),calc(100vw - var(--space-32)))}
.tu-dialog-wide{inline-size:min(calc(var(--space-64)*11),calc(100vw - var(--space-32)))}
.tu-dialog .app-modal-body label{flex:0 0 auto}
.tu-dialog textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md);resize:vertical}
.tu-form-fields{display:flex;flex-direction:column;gap:var(--space-16)}
.tu-field-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8);color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.tu-optional{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.tu-hint{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.tu-dialog .app-modal-body label :is(input,select,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.tu-dialog input[type=file]{padding:var(--space-8);font-size:var(--text-sm)}
.tu-preview{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control)}
.tu-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)}
.tu-upload{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-upload[data-state=ready]{color:var(--color-feedback-success-text)}
.tu-upload[data-state=refused]{color:var(--color-feedback-error-text)}
.tu-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}
.tu-slip-error{display:flex;align-items:flex-start;gap:var(--space-8)}
.tu-slip-error p{margin:0;max-width:none;color:inherit}
.tu-slip-error .icon{flex:0 0 auto;margin-block-start:var(--space-2)}
.tu-check{display:flex;flex-direction:column;gap:var(--space-12)}
.tu-facts{display:grid;gap:var(--space-12);margin:0;padding:var(--space-16);background:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.tu-facts div{display:grid;grid-template-columns:minmax(0,calc(var(--size-150) - var(--size-24))) minmax(0,1fr);gap:var(--space-12);align-items:baseline}
.tu-facts dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.tu-facts dd{margin:0;font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.tu-check-thumb{inline-size:calc(var(--size-150) - var(--size-24));block-size:auto;max-block-size:calc(var(--size-150) * 1.5);object-fit:contain}
.tu-similar{display:flex;align-items:flex-start;gap:var(--space-10);padding:var(--space-12) var(--space-14);border:1px solid var(--color-border-lead);
  border-radius:var(--radius-control);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text);font-size:var(--text-sm)}
.tu-similar:focus{outline:none;box-shadow:var(--shadow-focus-ring)}
.tu-similar .icon{flex:0 0 auto;margin-block-start:var(--space-2)}
.tu-similar-text{margin:0;max-width:none;color:inherit}
.tu-similar-list{margin:var(--space-8) 0 0;padding-inline-start:var(--space-16)}
.tu-similar-list li+li{margin-block-start:var(--space-4)}
.tu-void-identity{display:grid;gap:var(--space-8);padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control)}
.tu-void-line{margin:0;font-weight:var(--weight-semibold)}
.tu-slip-frame{display:flex;justify-content:center;padding:var(--space-12);background:var(--color-surface-sunken);border-radius:var(--radius-control)}
.tu-slip-image{max-inline-size:100%;max-block-size:calc(100vh - var(--space-64) * 5);object-fit:contain}

/* --- a phone ---------------------------------------------------------------------------------- */
@media (max-width: 700px){
  .page-heading>.tu-heading-side{flex:1 1 100%;align-items:stretch}
  .tu-new{justify-content:center}
  .tu-toolbar{flex-direction:column;align-items:stretch}
  .tu-segments{display:flex}
  .tu-segment{flex:1 1 auto}
  .tu-select{flex:1 1 auto}
  .tu-lead-amount{font-size:var(--text-display-sm)}
  .tu-dialog,.tu-dialog-wide{inline-size:100%;max-inline-size:100%;max-block-size:100vh;margin:0;border-radius:0;border:0}
  .tu-dialog .app-modal-body{padding:var(--space-20)}
  .tu-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)}
  .tu-dialog .app-modal-actions button{inline-size:100%}
  .tu-facts div{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .tu-tab,.tu-segment,.tu-account{transition:none}
}

/* --- 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
   headline is the mockup's quieter card: the label, the total at the large step, the count. A period with no top-up
   is one centred card (the mark, the words, the form's button). The list reads "เวลา / บัญชี" (the account, then the
   slip's time, the record's number and who recorded it), "เงินเข้า", "หลักฐานและหมายเหตุ", the status and "ดูหลักฐาน". */
#topups-panel .tu-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}
#topups-panel .tu-company-label{font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:normal;text-transform:none;color:var(--color-text-secondary)}
#topups-panel .tu-company-name{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
#topups-panel .tu-lead-amount{font-size:var(--text-xxl);letter-spacing:-0.01em}
#topups-panel .tu-lead{margin-block-start:var(--space-12)}
#topups-panel .tu-lead-count{font-size:var(--text-sm)}
.tu-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:var(--space-40) var(--space-24);text-align:center;
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.tu-empty>.icon{inline-size:var(--space-20);block-size:var(--space-20);color:var(--color-text-secondary)}
.tu-empty-title{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.tu-empty .tu-help{max-inline-size:60ch}
.tu-empty-new{margin-block-start:var(--space-8);display:inline-flex;align-items:center;gap:var(--space-8)}
#topups-panel .tu-when .tu-account-id{gap:var(--space-4)}
#topups-panel .tu-when-line{display:flex;flex-wrap:wrap;gap:0 var(--space-2);margin-block-start:var(--space-6)}
#topups-panel .tu-when-line .tu-when-text{display:inline;white-space:nowrap}
#topups-panel .tu-who{margin-block-start:var(--space-2)}
@container tu-table (max-width: 719px){
  #topups-panel .tu-when-line .tu-when-text{white-space:normal}
}

/* --- TICKET 295 (the owner, 1 พ.ย. 2026): "โอนมาจาก" as a choice (an account in the system, or another channel), the
   row's source line, the slip that carries a top-up, a slip that may be it, and the form's answer to a similar slip of
   the source account. Tokens only. */
.tu-source{display:flex;flex-direction:column;gap:var(--space-12);margin:0;padding:0;border:0;min-inline-size:0}
.tu-source>legend{padding:0;margin-block-end:var(--space-8)}
.tu-source-choices{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.tu-dialog .app-modal-body label.tu-source-choice{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;gap:var(--space-10);
  min-block-size:var(--size-44);padding:var(--space-8) var(--space-14);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);background:var(--color-surface-card);color:var(--color-text-primary);
  font-weight:var(--weight-regular);cursor:pointer}
.tu-dialog .app-modal-body label.tu-source-choice:hover{border-color:var(--color-border-lead)}
.tu-dialog .app-modal-body label.tu-source-choice:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.tu-dialog .app-modal-body label.tu-source-choice:has(input:focus-visible){box-shadow:var(--shadow-focus-ring)}
.tu-dialog .app-modal-body label.tu-source-choice:has(input[aria-invalid=true]){border-color:var(--color-action-destructive)}
.tu-dialog .app-modal-body label.tu-source-choice input{flex:0 0 auto;inline-size:var(--size-24);min-height:var(--size-24);margin:0;
  padding:0;accent-color:var(--color-action-primary)}
#topups-panel .tu-source-line{display:block;margin-block-start:var(--space-2)}
#topups-panel .tu-link-line{display:block;margin-block-start:var(--space-4)}
#topups-panel .tu-waiting{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);margin-block-start:var(--space-8);
  padding:var(--space-8) var(--space-10);border-radius:var(--radius-control);background:var(--color-feedback-hold-bg);
  color:var(--color-feedback-hold-text)}
.tu-source-similar{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.tu-source-similar .tu-similar-list{padding-inline-start:0;list-style:none;align-self:stretch}
.tu-source-similar .tu-similar-list li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}