/* One overview of every company (lean-rollout ticket 198), in design A's own language.
   Every value is a token from finance_app/static/tokens.css; nothing here is a hex, a
   pixel (bar the 1px hairline the rest of the app uses) or a duration.

   The composition: the green hero leads, as the board's does, and carries the two figure
   sets side by side with their own names and definitions, so "money in the bank" and
   "allowance left to transfer" are never read as one number. Everything under it is
   quiet: a line of notices, the two view controls, one table (or one grid of cards), and
   the detail of one company opening in the page under them. */

/* --- the entry ----------------------------------------------------------------------- */
/* TICKET 267 (the owner's mockup): "ทุกบริษัท" with the building, a quiet link-coloured control at the start of the
   top bar's end (its look is app.css's TICKET 267 block), at every width; on a phone its words leave the eye and the
   building stays. Signed out, it is not drawn. On this page the top bar says "ระดับระบบ" and "ทุกบริษัท" (app.js
   `placeTopbarScope`), so the company's name is not drawn either. */
.top-actions>.scope-entry{flex:0 0 auto;inline-size:auto;white-space:nowrap;border-color:transparent;background:transparent}
.top-actions>.scope-entry:hover,.top-actions>.scope-entry[aria-current=page]{border-color:transparent;background:var(--color-surface-selected)}
body:has(#workspace[hidden]) .scope-entry{display:none}

/* --- heading, freshness, banners ----------------------------------------------------- */
.companies-heading>div{min-inline-size:0}
.companies-scope-note{font-size:var(--text-xs);color:var(--color-text-caption)}
.companies-freshness{display:inline-flex;align-items:flex-start;gap:var(--space-8);margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-freshness .status-dot{margin-block-start:var(--space-6)}
.companies-freshness>span:last-child{display:flex;flex-direction:column}
.companies-day{font-size:var(--text-xs);color:var(--color-text-caption)}
#companies-panel[data-overview-state=ready] .companies-freshness .status-dot{background:var(--color-feedback-success-text)}
#companies-panel[data-overview-state=partial] .companies-freshness{color:var(--color-feedback-warning-text)}
#companies-panel[data-overview-state=partial] .companies-freshness .status-dot{background:var(--color-feedback-warning-text)}
#companies-panel[data-overview-state=stale] .companies-freshness,
#companies-panel[data-overview-state=error] .companies-freshness{color:var(--color-feedback-error-text)}
#companies-panel[data-overview-state=stale] .companies-freshness .status-dot,
#companies-panel[data-overview-state=error] .companies-freshness .status-dot{background:var(--color-feedback-error-text)}
/* Loading shows no figures and dims nothing that could be mistaken for one. */
#companies-panel[data-overview-state=loading] .companies-content,
#companies-panel[data-overview-state=error] .companies-content{pointer-events:none}

.companies-banner{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap;margin:0 0 var(--space-24);padding:var(--space-16) var(--space-20);border-radius:var(--radius-card)}
.companies-banner[data-tone=stale]{background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text);border:1px solid var(--color-border-lead)}
.companies-banner[data-tone=error]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);border:1px solid var(--color-border-danger)}
.companies-banner>div,.companies-banner>p{flex:1 1 auto;min-inline-size:0;margin:0;color:inherit}
.companies-banner p{margin:0;font-size:var(--text-sm);color:inherit}
.companies-banner .icon{flex:0 0 auto}

/* --- the hero: two named figure sets --------------------------------------------------- */
/* The board's own green: `action.primary-hover` to `action.primary` at 125 degrees, with the
   darker end as a flat colour under it so a renderer that reads the element's own
   background measures the worse of the two. White text on both ends. */
.companies-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0 0 var(--space-16);border-radius:var(--radius-card);overflow:hidden;background:var(--color-action-primary-hover);background-image:linear-gradient(125deg,var(--color-action-primary-hover) 0%,var(--color-action-primary) 100%);color:var(--color-action-primary-text)}
.companies-hero-half{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0;padding:var(--space-24) var(--space-28);container-type:inline-size}
.companies-hero-half+.companies-hero-half{border-inline-start:1px solid color-mix(in srgb,var(--color-action-primary-text) 35%,transparent)}
.companies-hero p{margin:0;max-inline-size:none;color:inherit}
.companies-hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);font-size:var(--text-base);font-weight:var(--weight-medium)}
.companies-hero-pill{display:inline-flex;align-items:center;padding:0 var(--space-8);border:1px solid currentColor;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-normal)}
.companies-hero-define{font-size:var(--text-sm);opacity:var(--opacity-muted)}
.companies-hero-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-10);margin:var(--space-8) 0 var(--space-2);min-block-size:var(--size-48)}
/* Twelve characters and two decimals at 320: sized against the half's own width, never
   abbreviated or broken (ticket 105's rule for a display figure). */
.companies-hero-amount{font-size:clamp(var(--text-xl),9cqi,var(--text-display-sm));font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:-0.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.companies-hero-unit{font-size:var(--text-md)}
.companies-hero-words{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}
.companies-hero-note{font-size:var(--text-sm)}
.companies-hero-caution{font-size:var(--text-sm);font-weight:var(--weight-semibold)}

/* --- the notices ----------------------------------------------------------------------- */
.companies-notices{display:flex;flex-wrap:wrap;gap:var(--space-8);list-style:none;margin:0 0 var(--space-20);padding:0}
.companies-notices li{padding:var(--space-6) var(--space-12);border-radius:var(--radius-control);font-size:var(--text-sm);line-height:var(--leading-normal)}
.companies-notices li[data-tone=info]{background:var(--color-surface-sunken);color:var(--color-text-primary)}
.companies-notices li[data-tone=warning]{background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text)}
.companies-notices li[data-tone=error]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}

/* --- the two view controls ------------------------------------------------------------- */
.companies-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12) var(--space-16);margin:0 0 var(--space-16)}
.companies-layout,.companies-detail-switch{display:inline-flex;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface-card)}
.companies-layout-option,.companies-detail-option{min-height:var(--size-36);padding:var(--space-4) var(--space-16);background:transparent;border-color:transparent;color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.companies-layout-option:hover,.companies-detail-option:hover{background:var(--color-action-ghost-hover);border-color:transparent}
.companies-layout-option:active,.companies-detail-option:active{background:var(--color-action-secondary-hover);border-color:transparent}
.companies-layout-option[aria-pressed=true],.companies-detail-option[aria-pressed=true]{background:var(--color-action-primary);border-color:var(--color-action-primary);color:var(--color-action-primary-text);font-weight:var(--weight-semibold)}
.companies-layout-option[aria-pressed=true]:hover,.companies-detail-option[aria-pressed=true]:hover{background:var(--color-action-primary-hover);border-color:var(--color-action-primary-hover)}
/* app.css makes every label a 210-pixel column; this one is a row that sizes to itself. */
.companies-order{flex:0 1 auto;flex-direction:row;align-items:center;gap:var(--space-8);font-size:var(--text-sm)}
.companies-order select{inline-size:auto;min-inline-size:0;max-inline-size:100%}

/* --- the table ------------------------------------------------------------------------- */
.companies-table-wrap{max-inline-size:100%;overflow-x:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.companies-table-wrap:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-2)}
/* Six columns stay readable at this width; narrower than it, the table scrolls inside its
   own box and the cue under it says so, and the page itself never scrolls sideways. */
.companies-table-wrap table{inline-size:100%;min-inline-size:calc(var(--space-64) * 13);border-collapse:collapse}
.companies-table-wrap th,.companies-table-wrap td{padding:var(--space-12);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle)}
.companies-table-wrap 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}
.companies-table-wrap tbody tr:last-child>*{border-block-end:0}
.companies-table-wrap .number{text-align:end;font-variant-numeric:tabular-nums}
/* The company column stays in view while the rest scrolls under it. */
.companies-who{position:sticky;inset-inline-start:0;z-index:var(--z-sticky);background:var(--color-surface-card);min-inline-size:calc(var(--space-64) * 3)}
.companies-table-wrap thead th:first-child{position:sticky;inset-inline-start:0;z-index:var(--z-sticky)}
.companies-who small{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.companies-name{display:inline-flex;min-height:var(--size-36);padding:0;background:transparent;border-color:transparent;color:var(--color-text-primary);font-size:var(--text-base);font-weight:var(--weight-semibold);text-align:start;white-space:normal;overflow-wrap:anywhere}
.companies-name:hover,.companies-name:active{background:transparent;border-color:transparent;color:var(--color-text-link);text-decoration:underline;text-underline-offset:var(--space-4)}
.companies-name[aria-expanded=true]{color:var(--color-text-link);text-decoration:underline;text-underline-offset:var(--space-4)}
.companies-value{display:block;font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);white-space:nowrap;font-variant-numeric:tabular-nums}
.companies-cell-label{display:none}
.companies-value[data-known=false]{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary);white-space:normal}
.companies-value[data-tone=stale]{color:var(--color-feedback-warning-text)}
.companies-note{display:block;margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary);white-space:normal}
.companies-note[data-tone=over]{color:var(--color-feedback-error-text);font-weight:var(--weight-semibold);white-space:nowrap}
.companies-bank{min-inline-size:calc(var(--space-64) * 2)}
/* TICKET 272: the company's balance now, an estimate, under the recorded balance in the same cell, labelled. */
.companies-now{display:block;margin-block-start:var(--space-8);padding-block-start:var(--space-8);border-block-start:1px solid var(--color-border-default)}
.companies-now-label{display:block;font-size:var(--text-xs);color:var(--color-text-secondary);white-space:normal}
.companies-now .companies-value{font-size:var(--text-sm)}
.companies-card-bank .companies-now .companies-value{margin-block-start:var(--space-2);font-size:var(--text-md)}
.companies-now-warning{display:block;margin-block-start:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-feedback-warning-text);white-space:normal}
.companies-left{min-inline-size:calc(var(--space-64) * 2)}
.companies-meter{display:block;inline-size:100%;block-size:var(--space-4);margin:var(--space-6) 0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-meter-track);overflow:hidden}
.companies-meter-fill{display:block;block-size:100%;inline-size:0;background:var(--color-meter-fill)}
.companies-meter-fill[data-tone=low]{background:var(--color-feedback-warning-text)}
.companies-meter-fill[data-tone=over]{background:var(--color-meter-fill-problem)}
.companies-status{min-inline-size:calc(var(--space-64) * 2)}
.companies-flags{display:flex;flex-wrap:wrap;gap:var(--space-4)}
#companies-panel .badge{white-space:normal;block-size:auto;min-block-size:var(--space-20);padding-block:var(--space-2);line-height:var(--leading-normal)}
#companies-panel .badge[data-tone=error]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
#companies-panel .badge[data-tone=warning]{background:var(--color-badge-review-bg);color:var(--color-badge-review-text)}
#companies-panel .badge[data-tone=success]{background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
#companies-panel .badge[data-tone=neutral]{background:var(--color-surface-sunken);color:var(--color-badge-pending-text)}
.companies-failed{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.companies-failed p{flex:1 1 auto;min-inline-size:0;margin:0;font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.companies-retry{flex:0 0 auto;min-height:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}

/* --- the cards --------------------------------------------------------------------------- */
.companies-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
.companies-card{display:flex;flex-direction:column;gap:var(--space-16);min-inline-size:0;padding:var(--space-20);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.companies-card[data-selected=true]{outline:var(--space-2) solid var(--color-action-primary);outline-offset:var(--space-2)}
.companies-card-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8)}
.companies-card-head h3{margin:0;min-inline-size:0;font-size:var(--text-md);overflow-wrap:anywhere}
.companies-card p{margin:0;max-inline-size:none}
.companies-card-label{font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-card-bank{padding-block-end:var(--space-16);border-block-end:1px solid var(--color-border-default)}
.companies-card-bank .companies-value{margin-block-start:var(--space-4);font-size:var(--text-lg)}
.companies-card-allowance .companies-value{margin-block-start:var(--space-4);font-size:var(--text-xl);line-height:var(--leading-normal)}
.companies-card .companies-value[data-known=false]{font-size:var(--text-md);font-weight:var(--weight-medium)}
.companies-card-figures{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);margin:var(--space-10) 0 0}
.companies-card-figures dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-card-figures dd{margin:0}
.companies-card-figures .companies-value{font-size:var(--text-sm)}
.companies-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);margin-block-start:auto;padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-default);font-size:var(--text-sm);color:var(--color-text-secondary)}
.companies-card-foot .text-button{padding-inline:var(--space-8)}

/* --- under the list ---------------------------------------------------------------------- */
.companies-cue{margin:var(--space-8) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);max-inline-size:none;margin:var(--space-16) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-empty{padding:var(--space-48) var(--space-24);border:1px dashed var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-card);text-align:center}
.companies-empty h3{margin:0 0 var(--space-8)}
.companies-empty p{margin:0 auto;max-inline-size:52ch;font-size:var(--text-sm)}

/* --- the detail of one company ----------------------------------------------------------- */
.companies-detail{margin:var(--space-24) 0 0;padding:var(--space-24);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.companies-detail[aria-busy=true] .companies-detail-body{opacity:var(--opacity-disabled)}
.companies-detail-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12)}
.companies-detail-head>div{min-inline-size:0}
.companies-detail-head p{margin:0}
.companies-detail-eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-link)}
.companies-detail-head h2{margin:var(--space-4) 0;font-size:var(--text-lg);overflow-wrap:anywhere}
.companies-detail-head h2:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-4)}
.companies-detail-read{font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-detail-switch{margin:var(--space-16) 0}
.companies-detail-status{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12);margin:0 0 var(--space-12)}
.companies-detail-status p{flex:1 1 auto;min-inline-size:0;margin:0;font-size:var(--text-sm)}
.companies-detail-body{display:flex;flex-direction:column;gap:var(--space-12)}
.companies-detail-proof{margin:0;max-inline-size:none;padding:var(--space-10) var(--space-16);border-radius:var(--radius-control);background:var(--color-surface-sunken);color:var(--color-text-primary);font-size:var(--text-sm)}
.companies-detail-empty{margin:0;padding:var(--space-24);border-radius:var(--radius-control);background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-sm)}
.companies-detail-empty h3{margin:0 0 var(--space-8);color:var(--color-text-primary)}
.companies-detail-empty p{margin:0;max-inline-size:64ch}
.companies-detail-table{max-inline-size:100%;overflow-x:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.companies-detail-table:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-2)}
.companies-detail-table table{inline-size:100%;min-inline-size:calc(var(--space-64) * 10);border-collapse:collapse}
.companies-detail-table th,.companies-detail-table td{padding:var(--space-10) var(--space-12);text-align:start;vertical-align:middle;font-size:var(--text-sm);border-block-end:1px solid var(--color-border-subtle)}
.companies-detail-table thead th{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.companies-detail-table tbody th{background:var(--color-surface-card);font-weight:var(--weight-regular)}
.companies-detail-table tfoot th,.companies-detail-table tfoot td{background:var(--color-surface-page);border-block-end:0;font-weight:var(--weight-semibold)}
.companies-detail-table tfoot td:last-child{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.companies-detail-table .number{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.companies-detail-table td[data-tone=stale]{color:var(--color-feedback-warning-text)}
.companies-account{display:flex;align-items:center;gap:var(--space-12);min-inline-size:calc(var(--space-64) * 3)}
.companies-account-mark{min-inline-size:var(--size-36);block-size:var(--size-36);padding-inline:var(--space-4)}
.companies-account-mark img,.companies-account-mark svg{inline-size:var(--space-24);block-size:var(--space-24);object-fit:contain}
.companies-account-copy{display:flex;flex-direction:column;min-inline-size:0}
.companies-account-name{font-weight:var(--weight-medium);overflow-wrap:anywhere}
.companies-account-number{font-size:var(--text-xs);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}

/* --- narrow widths ----------------------------------------------------------------------- */
@media (max-width:1100px){
  .companies-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .companies-hero{grid-template-columns:minmax(0,1fr)}
  .companies-hero-half+.companies-hero-half{border-inline-start:0;border-block-start:1px solid color-mix(in srgb,var(--color-action-primary-text) 35%,transparent)}
}
@media (max-width:700px){
  .companies-hero-half{padding:var(--space-20)}
  .companies-who{min-inline-size:calc(var(--space-64) * 2)}
  .companies-cards{grid-template-columns:minmax(0,1fr)}
  .companies-tools{flex-direction:column;align-items:stretch}
  .companies-layout{display:flex}
  .companies-layout-option{flex:1 1 0}
  .companies-order{justify-content:space-between}
  .companies-order select{flex:1 1 auto}
  .companies-detail{padding:var(--space-16)}
  .companies-detail-switch{display:flex}
  .companies-detail-option{flex:1 1 0}
  .companies-detail-head button{inline-size:100%}
  /* The table stacks: one company is one block, its name and accounts on the first line,
     its figures two to a line under it, each carrying its own column name, and its status
     last. Nothing is scrolled sideways out of view, the remaining allowance least of all.
     The detail's two tables stack the same way. */
  .companies-table-wrap table,.companies-detail-table table{min-inline-size:0}
  .companies-table-wrap thead,.companies-detail-table thead{display:none}
  .companies-table-wrap tbody,.companies-detail-table tbody,.companies-detail-table tfoot{display:block}
  .companies-table-wrap tr,.companies-detail-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10) var(--space-12);padding:var(--space-16);border-block-start:1px solid var(--color-border-default)}
  .companies-table-wrap tbody tr:first-child,.companies-detail-table tbody tr:first-child{border-block-start:0}
  .companies-table-wrap th,.companies-table-wrap td,.companies-detail-table th,.companies-detail-table td{display:block;min-inline-size:0;padding:0;border:0;text-align:start}
  .companies-table-wrap .number,.companies-detail-table .number{text-align:start}
  .companies-table-wrap .companies-who{position:static;grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-8)}
  .companies-table-wrap .companies-status,.companies-table-wrap td[colspan],.companies-detail-table td[colspan],
  .companies-detail-table .companies-account,.companies-detail-table tfoot th{grid-column:1/-1}
  .companies-bank,.companies-left,.companies-status,.companies-account{min-inline-size:0}
  .companies-detail-table .companies-account{display:flex}
  .companies-detail-table tfoot tr{background:var(--color-surface-page)}
  .companies-detail-table tfoot th,.companies-detail-table tfoot td{background:transparent}
  .companies-note[data-tone=over]{white-space:normal}
  .companies-cell-label{display:block;margin-block-end:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary);white-space:normal}
}

/* --- TICKET 222: a range of days ---------------------------------------------------------- */
/* The page's one range, between the heading and the figures it scopes, as the per-company
   overview's is (ticket 210, page-board.css `.board-scope`): the control on the left and,
   beside it, the line that says which day each kind of figure is counted on (and the news,
   when there is any). Two classes, so the control's own full-width help rule gives way.
   The custom pair's field is as wide as two dates and their word, never wider than the bar. */
.companies-scope{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-8) var(--space-20);margin:0 0 var(--space-24)}
.companies-range{flex:0 1 auto;min-inline-size:0}
.companies-range .date-range-select{max-inline-size:100%}
.companies-scope .companies-range .date-range-field-wrap{flex:0 1 auto;inline-size:var(--size-280);max-inline-size:100%}
.companies-scope .companies-range-help{flex:1 1 var(--size-280);min-inline-size:0;max-inline-size:none;margin:0;padding-block-end:var(--space-12);font-size:var(--text-xs);color:var(--color-text-secondary)}
/* The hero's line for today's remaining allowance under the range's figure. */
.companies-hero-today{font-weight:var(--weight-semibold)}
/* A range figure that may still grow says so in words; the colour only supports them. */
.companies-note[data-tone=caution]{color:var(--color-feedback-warning-text);font-weight:var(--weight-medium)}
.companies-moved,.companies-received{min-inline-size:calc(var(--space-64) * 2)}
.companies-received .companies-note span{white-space:nowrap}
/* A card's three slip counts sit on one line; today's remaining allowance is a line of its
   own under them, set apart, because it is a different day's figure. */
.companies-card .companies-card-slips{grid-template-columns:repeat(3,minmax(0,1fr))}
.companies-today{margin:var(--space-12) 0 0;padding-block-start:var(--space-10);border-block-start:1px solid var(--color-border-subtle);font-size:var(--text-sm);color:var(--color-text-secondary)}
.companies-card .companies-today .companies-value{display:inline;margin:0;font-size:var(--text-sm);color:var(--color-text-primary)}
@media (max-width:700px){
  /* On a phone the range takes its own row and the line goes under it, on one line: a
     wrapping column is as wide as its widest item (ticket 210 measured the spill). */
  .companies-scope{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--space-4)}
  .companies-scope .companies-range-help{flex-basis:auto;padding-block-end:0}
  .companies-moved,.companies-received{min-inline-size:0}
}

/* --- TICKET 227: the withdrawal review in every company ----------------------------------- */
/* Its own section under the list, on the card surface the list uses: a heading, four totals
   on the sunken surface, then one row per company with its result in words and its two
   actions at the row's end. Below 700 the rows stack the way the list's own rows do, each
   figure carrying its own column name. */
.companies-review{margin:var(--space-24) 0 0;padding:var(--space-24);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.companies-review-head h2{margin:0;font-size:var(--text-lg);overflow-wrap:anywhere}
.companies-review-note{margin:var(--space-4) 0 0;max-inline-size:none;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-review-status{margin:var(--space-16) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.companies-review[data-review-state=error] .companies-review-status{color:var(--color-feedback-error-text)}
.companies-review-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-12);margin:var(--space-16) 0}
.companies-review-totals>div{min-inline-size:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.companies-review-totals dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-review-totals dd{margin:var(--space-4) 0 0;font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.companies-review-totals dd[data-known=false]{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.companies-review-totals small{display:block;margin-block-start:var(--space-2);font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-review-wrap{max-inline-size:100%;overflow-x:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.companies-review-wrap:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-2)}
.companies-review-wrap table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.companies-review-wrap th,.companies-review-wrap td{padding:var(--space-12);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle)}
.companies-review-wrap 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}
.companies-review-wrap tbody tr:last-child>*{border-block-end:0}
.companies-review-wrap .number{text-align:end;font-variant-numeric:tabular-nums}
.companies-review-wrap tbody th{background:var(--color-surface-card);font-size:var(--text-base)}
.companies-review-who strong{font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.companies-review-wrap .number .companies-note{white-space:nowrap}
.companies-review-file{display:block;font-size:var(--text-sm);overflow-wrap:anywhere}
.companies-review-failed{font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.companies-review-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-8)}
.companies-review-buttons button{min-height:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}
@media (max-width:1100px){
  .companies-review-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .companies-review{padding:var(--space-16)}
  .companies-review-wrap thead{display:none}
  .companies-review-wrap table,.companies-review-wrap tbody{display:block}
  .companies-review-wrap tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10) var(--space-12);padding:var(--space-16);border-block-start:1px solid var(--color-border-default)}
  .companies-review-wrap tbody tr:first-child{border-block-start:0}
  .companies-review-wrap th,.companies-review-wrap td{display:block;min-inline-size:0;padding:0;border:0;text-align:start}
  .companies-review-wrap .number{text-align:start}
  .companies-review-wrap .number .companies-note{white-space:normal}
  .companies-review-wrap .companies-review-who,.companies-review-wrap td[colspan],.companies-review-wrap .companies-review-actions{grid-column:1/-1}
  .companies-review-buttons{justify-content:stretch}
  .companies-review-buttons button{flex:1 1 0}
}
@media (max-width:380px){
  .companies-review-totals{grid-template-columns:minmax(0,1fr)}
}

/* --- TICKET 234: the available balance from the latest bank SMS --------------------------- */
/* An account's figure that is shown but not counted (its phone was silent, or a message is
   missing) wears the warning text colour in the detail; its state cell says why in words. A
   company's own figure is always the counted sum, so it keeps the primary colour, and the line
   under it says how many accounts it adds. */
.companies-value[data-tone=maybe_stale],.companies-value[data-tone=uncertain]{color:var(--color-feedback-warning-text)}
.companies-detail-table td[data-figure=balance-state] .companies-note{margin-block-start:var(--space-4)}
/* A company's bank note: "นับ 1 จาก 3 บัญชี · ณ 10:32 น.", each part kept whole. */
.companies-bank-note span{white-space:nowrap}

/* --- TICKET 235: only a role that may reveal sees the balance ------------------------------ */
/* A session that may see no company's available balance has no balance half: the allowance
   half is the whole hero, with no rule drawn where the other half was. */
#companies-panel[data-balance=none] .companies-hero{grid-template-columns:minmax(0,1fr)}
#companies-panel[data-balance=none] .companies-hero-half+.companies-hero-half{border-inline-start:0;border-block-start:0}
/* A detail with no balance tab has no switch, whose own margin parted the head from the body:
   the head keeps that space itself. */
.companies-detail:has(>.companies-detail-switch[hidden]) .companies-detail-head{margin-block-end:var(--space-16)}
/* The hero's balance note: each part stays whole while it fits on the line, and wraps inside
   itself only when it is wider than the line (a long part in English at a phone width). */
.companies-hero-note-part{display:inline-block;max-inline-size:100%}

/* --- TICKET 267 (the owner's mockup, 19 ต.ค. 2026): "ภาพรวมทุกบริษัท" as the mockup draws it ----------------------
   The two cards side by side (the allowance of every company today with the primary rule along its top, and the money
   transferred out in the page's range), then "วงเงินแยกตามบริษัท" in the mockup's panel with its tools in the head,
   the mockup's table look (the head on the page surface, the rows on rules) and the remaining figure at the
   allowance step. Laid over the rules above; every value is a token. */
.companies-heading .companies-freshness{color:var(--color-action-primary);font-size:var(--text-sm)}
#companies-panel[data-overview-state=ready] .companies-freshness .status-dot{display:none}
.companies-scope{align-items:center;justify-content:space-between}
.companies-scope .date-range-preset-field{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.companies-scope .date-range-preset-field .date-range-field-label{flex:0 1 auto;inline-size:auto}
.companies-scope .companies-range .date-range-field-wrap{inline-size:auto}
.companies-scope .date-range[data-form=compact] .date-range-field-label{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-primary)}
.companies-scope .date-range-select{inline-size:auto;min-inline-size:calc(var(--space-44) * 4)}
.companies-heading .companies-scope-note{font-size:var(--text-xs);color:var(--color-text-caption)}
.companies-scope .companies-range-help{flex:0 1 auto;padding-block-end:0;text-align:end}
.companies-finance{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:var(--space-20);align-items:stretch;margin:0 0 var(--space-20)}
.companies-finance>*{min-inline-size:0}
.companies-hero,.companies-period,.companies-list{border:1px solid var(--color-border-default);border-radius:var(--radius-frame);background:var(--color-surface-card);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}
.companies-hero{display:block;margin:0;background-image:none;border-block-start:var(--space-4) solid var(--color-action-primary)}
.companies-hero-half{gap:var(--space-12);padding:var(--space-28)}
.companies-hero p{color:var(--color-text-primary)}
.companies-hero-kicker{font-size:var(--text-md);font-weight:var(--weight-regular)}
.companies-hero-pill{border-color:var(--color-border-default);color:var(--color-text-secondary)}
.companies-hero-figure{margin:0}
.companies-hero-amount{font-size:clamp(var(--text-xl),11cqi,var(--text-display));line-height:var(--leading-snug);letter-spacing:-0.04em}
.companies-hero-unit{color:var(--color-text-secondary)}
.companies-hero-note{font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-hero p.companies-hero-note{color:var(--color-text-secondary)}
.companies-hero-equation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);margin-block-start:var(--space-12);font-size:var(--text-xs)}
.companies-hero-equation strong{font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.companies-hero-equation>span:last-child{color:var(--color-text-secondary)}
.companies-hero-meter{block-size:var(--space-8);border-radius:var(--radius-pill);background:var(--color-meter-track);overflow:hidden}
.companies-hero-meter>span{display:block;block-size:100%;inline-size:0;background:var(--color-action-primary)}
.companies-hero-meter>span[data-over=true]{background:var(--color-feedback-warning-text)}
.companies-hero-define{display:flex;align-items:center;gap:var(--space-8);margin-block-start:var(--space-8);font-size:var(--text-sm);opacity:1}
.companies-hero p.companies-hero-define{color:var(--color-text-secondary)}
.companies-hero p.companies-hero-caution{color:var(--color-feedback-hold-text);font-weight:var(--weight-medium)}
.companies-period{display:flex;flex-direction:column;gap:var(--space-20);padding:var(--space-24)}
.companies-period h2{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.companies-period-span{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-period-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-10);margin:0}
.companies-period-figure .companies-hero-amount{font-size:var(--text-display-sm);letter-spacing:-0.03em}
.companies-period-foot{display:flex;flex-direction:column;margin:auto 0 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.companies-period-slips{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.companies-period .companies-hero-caution{margin:0;font-size:var(--text-sm);color:var(--color-feedback-hold-text)}
.companies-list{overflow:hidden}
.companies-list-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-12) var(--space-16);padding:var(--space-20)}
.companies-list-head>div{min-inline-size:0}
.companies-list-head h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.companies-list-sub{margin:var(--space-4) 0 0;max-inline-size:none;font-size:var(--text-xs);color:var(--color-text-secondary)}
.companies-recorded-total{color:var(--color-text-primary)}
.companies-list .companies-tools{margin:0}
.companies-list .companies-table-wrap{border:0;border-radius:0}
.companies-list .companies-cards{padding:0 var(--space-20) var(--space-20)}
.companies-list .companies-empty{margin:0 var(--space-20) var(--space-20)}
.companies-list .companies-cue{margin:0;padding:var(--space-8) var(--space-20)}
.companies-table-wrap table{min-inline-size:calc(var(--space-64) * 12)}
.companies-table-wrap thead th{padding:var(--space-12);background:var(--color-surface-page);font-size:var(--text-sm)}
.companies-table-wrap th,.companies-table-wrap td{padding:var(--space-16) var(--space-12);vertical-align:middle;border-block-end:0;border-block-start:1px solid var(--color-border-default)}
.companies-table-wrap :is(th,td):first-child{padding-inline-start:var(--space-20)}
.companies-table-wrap thead th{border-block-start:1px solid var(--color-border-default)}
.companies-who{background:var(--color-surface-card)}
.companies-name{font-size:var(--text-sm)}
.companies-left .companies-value{font-size:var(--text-xl);font-weight:var(--weight-medium)}
.companies-moved .companies-value{font-size:var(--text-md);font-weight:var(--weight-medium)}
.companies-meter-fill{background:var(--color-action-primary)}
.companies-open-cell{white-space:nowrap}
.companies-open-company{padding-inline:var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}
.companies-value[data-tone=earlier]{color:var(--color-feedback-hold-text)}
@media (max-width:1100px){
  .companies-finance{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .companies-hero-half,.companies-period{padding:var(--space-20)}
}
@media (max-width:820px){
  .companies-finance{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .companies-scope .companies-range-help{text-align:start}
  .companies-hero-amount{font-size:clamp(var(--text-xl),11cqi,var(--text-display-sm))}
  .companies-period-figure .companies-hero-amount{font-size:var(--text-xxl)}
  .companies-list-head{align-items:stretch;padding:var(--space-16)}
  .companies-list .companies-tools{inline-size:100%}
  .companies-list .companies-cards{padding:0 var(--space-16) var(--space-16)}
  .companies-table-wrap table{min-inline-size:0}
  .companies-table-wrap th,.companies-table-wrap td{padding:0;border:0}
  .companies-table-wrap .companies-open-cell{grid-column:1/-1}
}
/* --- TICKET 267 end ----------------------------------------------------------------------------------------------- */