/* ==================================================================================================================
   CASPIAN DESIGN KIT (owner 3 Nov 2026; docs/ui-reference/caspian-design-kit.html and -en.html). The tokens and the self-hosted faces moved to static/ui/tokens.css (the one place that defines a colour). This file holds the shared components. One stylesheet serves RTL and LTR: logical properties, the direction-aware
   --font. The five rules every screen follows: 1 one primary button per screen; 2 colour only for meaning (green done, amber missing,
   red blocked, blue information or waiting); 3 only the missing item is warm; 4 numbers and references are mono / LTR and never wrap;
   5 a card has a job. Display only: a status shown here is a status the server decided, never computed from an amount or a date.
   Replaces the former --c-* / --ui-* / --radius-* names (renamed in this change; the older --cds-* set in caspian-ds.css and the
   per-page sets now read these tokens).
   ================================================================================================================== */
/* tokens, fonts: static/ui/tokens.css (loaded before this file); legacy selectors mapped onto these components: static/ui/compat.css (loaded after it) */

/* Caspian UI standard (V211, owner 3/11). One sheet for every working page: linked once from base.html, inside <main>
   after the page's own sheets, so it wins by order and by the "main" in each selector. Same identity (palette, type,
   shell); what it sets is how data sits: tables with a header band and ruled rows, facts as a ruled sheet, section
   cards with a title band, forms in titled groups, one tab shown at a time. Logical properties serve Arabic and English.
   Printed documents never load base.html, and every broad rule leaves the document canvases alone.
   Standard and page order: docs/ui-standard.md. Replaces static/v210-lines.css (the shipping lines screens).
   Reads the kit tokens directly (the former alias names were removed). */

/* ------------------------------------------------------------------ page frame */
main .ui-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--t-small);color:var(--muted);margin:0 0 8px}
main .ui-crumb a{color:var(--brand);font-weight:500;text-decoration:none}
main .ui-crumb a:hover{text-decoration:underline}
main .ui-crumb .sep{color:var(--line)}
/* KPI / summary cards (V230): a card per figure - an icon tile and a 3px top edge in the colour of its MEANING (data-tone: ok done / warn waiting / bad missing or late / info informational) */
main .ui-kpis{display:grid;grid-template-columns:repeat(var(--ui-kpi-n,4),minmax(0,1fr));gap:12px;margin:0 0 16px}
main .ui-kpi{--k:var(--info);--k-s:var(--info-soft);display:flex;gap:12px;align-items:center;min-width:0;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--k);border-radius:11px;color:inherit;text-decoration:none;transition:box-shadow var(--motion),transform var(--motion)}
main .ui-kpi[data-tone="ok"]{--k:var(--ok);--k-s:var(--ok-soft)}main .ui-kpi[data-tone="warn"]{--k:var(--warn);--k-s:var(--warn-soft)}main .ui-kpi[data-tone="bad"]{--k:var(--bad);--k-s:var(--bad-soft)}main .ui-kpi[data-tone="info"]{--k:var(--info);--k-s:var(--info-soft)}
main .ui-kpi:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
main .ui-kpi-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--k-s);color:var(--k)}
main .ui-kpi-ic .ui-icon{width:20px;height:20px}
main .ui-kpi-t{min-width:0;display:grid;gap:1px}
main .ui-kpi b{font-family:var(--mono);font-size:var(--t-page);font-weight:600;line-height:1.2;color:var(--fg);font-variant-numeric:tabular-nums}
main .ui-kpi .ui-kpi-l,main .ui-kpi > span:not(.ui-kpi-ic):not(.ui-kpi-t){font-size:var(--t-micro);color:var(--muted)}

/* ------------------------------------------------------------------ cards: one title band, then the content */
main .ui-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);margin:0 0 16px;min-width:0;box-shadow:var(--shadow-1);overflow:visible}
main .ui-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:46px;padding:8px 18px;background:var(--surface-2);border-block-end:1px solid var(--line);border-start-start-radius:var(--r-card);border-start-end-radius:var(--r-card);box-shadow:inset 0 3px 0 var(--m)}
main .ui-card-h h2,main .ui-card-h h3{margin:0;font-size:var(--t-section);font-weight:600;color:var(--fg)}
main .ui-card-h .sp{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
main .ui-card-h small{padding:1px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:var(--t-micro);font-variant-numeric:tabular-nums;color:var(--muted)}
main .ui-card-b{padding:16px 18px}
main .ui-card-b.flush{padding:0}
main .ui-note{font-size:var(--t-small);color:var(--muted);margin:8px 0 0}
main .ui-empty{padding:22px 18px;text-align:center;color:var(--muted);font-size:var(--t-small)}
main .ui-two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
main .ui-two>.ui-card,main .ui-stack>.ui-card{margin:0}
main .ui-stack{display:grid;gap:16px;align-content:start}

/* ------------------------------------------------------------------ data tables (the standard and the existing families) */
main .ui-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-block-end:1px solid var(--line)}
main .ui-tools input[type=search]{flex:1 1 240px;min-width:0;height:38px}
main .ui-tools select{height:38px;width:auto;max-width:200px}
main .ui-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-inline:contain}
main .ui-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;font-size:var(--t-small);color:var(--muted);border-block-start:1px solid var(--line);background:var(--surface-2)}
main .ui-foot .rg-pager{margin:0}

/* T = every data table: the standard's own, the registers', the record pages', and the plain pages' (a table straight inside a
   .table-wrap, .card, .panel or .v44-table). Printed document canvases are never matched. */
main :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){border-collapse:separate;border-spacing:0;width:100%}
main :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table):not(:where(.document-canvas *,.doc-sheet *,.document-panel *))>thead>tr>th{
  height:36px;padding:0 12px;background:var(--surface-2);color:var(--muted);font-size:var(--t-small);font-weight:600;text-align:start;white-space:nowrap;
  border-block-end:1px solid var(--line);border-inline-start:1px solid var(--line-2);vertical-align:middle}
main :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table)>thead>tr>th:first-child{border-inline-start:0}
main[dir=ltr] :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table)>thead>tr>th{text-transform:uppercase;letter-spacing:.03em}
main[dir=rtl] :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table)>thead>tr>th{text-transform:none;letter-spacing:0}
main :is(table.ui-table,.rg-root table.rg-table,.rw-root table.rw-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table):not(:where(.document-canvas *,.doc-sheet *,.document-panel *))>tbody>tr>td{
  height:var(--row-h);padding:6px 12px;border-block-end:1px solid var(--line-2);vertical-align:middle;font-size:var(--t-small)}
main :is(table.ui-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table)>tbody>tr:hover>td,
main .rg-root table.rg-table>tbody>tr.rg-row:hover>td,
main .rw-root table.rw-table>tbody>tr:hover:not(.rw-detail)>td{background:var(--surface-2)}
main :is(table.ui-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table)>tbody>tr:last-child>td{border-block-end:0}
main :is(table.ui-table,.table-wrap>table,.card>table,.panel>table,.v44-table>table) :is(td,th).num{text-align:end;font-variant-numeric:tabular-nums}
main table.ui-table td.n,main table.ui-table th.n,main table.ui-table .num{text-align:end;font-variant-numeric:tabular-nums}
main table.ui-table td.empty,main .table-wrap>table td.empty{height:auto;padding:26px 16px;text-align:center;color:var(--muted);background:var(--surface)}
main table.ui-table td.nowrap,main table.ui-table th.nowrap{white-space:nowrap}
main table.ui-table td{white-space:nowrap}
main table.ui-table td.wrap{white-space:normal}
main .table-wrap{border:1px solid var(--line);border-radius:var(--r-ctl);overflow:auto;background:var(--surface)}
main .ui-card .table-wrap,main .ui-card-b.flush .table-wrap{border:0;border-radius:0}
main .ui-cell-name{display:flex;align-items:center;gap:10px;min-width:0;max-width:380px}
main .ui-cell-name a{font-weight:600;overflow:hidden;text-overflow:ellipsis}
main .ui-code{flex:none;display:inline-block;padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--fg);font-size:var(--t-micro);font-weight:600}
main .ui-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-hover);font-size:var(--t-micro);font-weight:600}
main .ui-dim{color:var(--muted)}
main .ui-cols{position:relative}
main .ui-cols summary{list-style:none;cursor:pointer}
main .ui-cols summary::-webkit-details-marker{display:none}
main .ui-cols-pop{position:absolute;z-index:30;inset-inline-end:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-2);padding:10px 14px;display:grid;gap:8px;white-space:nowrap;font-size:var(--t-small)}
main .ui-cols-pop label{display:flex;align-items:center;gap:8px}
main .ui-cols-pop input{width:auto;height:auto}
main table.ui-table .col-opt{display:none}
main table.ui-table[data-show-type] .col-type,main table.ui-table[data-show-contact] .col-contact{display:table-cell}

/* ------------------------------------------------------------------ facts: a ruled sheet (label cell | value cell) */
main .ui-sheet{display:grid;grid-template-columns:repeat(var(--ui-sheet-cols,1),minmax(150px,auto) minmax(0,1fr));margin:0;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;background:var(--surface)}
main .ui-sheet.c2{--ui-sheet-cols:2}
main .ui-sheet>dt,main .ui-sheet>dd{margin:0;padding:9px 14px;border-block-end:1px solid var(--line-2);min-height:40px;display:flex;align-items:center;font-size:var(--t-small);min-width:0;overflow-wrap:anywhere}
main .ui-sheet>dt{background:var(--surface-2);color:var(--muted);font-weight:500;border-inline-end:1px solid var(--line-2)}
main .ui-sheet>dd{color:var(--fg);font-weight:500}
main .ui-sheet.c2>dd:nth-of-type(odd){border-inline-end:1px solid var(--line-2)}
main .ui-sheet>dd.wide{grid-column:2 / -1}
main .ui-sheet>.last{border-block-end:0}
main .ui-sheet .ui-dim{font-weight:400}
/* the registers' fact lists (rg-facts, two columns label | value) */
main .rg-root dl.rg-facts{gap:0;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;font-size:var(--t-small);background:var(--surface)}
main .rg-root dl.rg-facts>dt,main .rg-root dl.rg-facts>dd{margin:0;padding:8px 14px;border-block-end:1px solid var(--line-2)}
main .rg-root dl.rg-facts>dt{background:var(--surface-2);color:var(--muted);font-weight:500;border-inline-end:1px solid var(--line-2)}
main .rg-root dl.rg-facts>dd{color:var(--fg);font-weight:500}

/* the record pages' cards get the same title band */
main .rw-root .rw-card>.rw-card-head,main .rw-root details.rw-card>summary.rw-card-head{background:var(--surface-2);border-block-end-color:var(--line);border-start-start-radius:var(--r-ctl);border-start-end-radius:var(--r-ctl)}
main .rw-root details.rw-card:not([open])>summary.rw-card-head{border-radius:var(--r-ctl);border-block-end:0}
main .rw-root .rw-card{border-color:var(--line)}

/* ------------------------------------------------------------------ one tab at a time (static/caspian-tabs.js) */
main .ui-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:0 8px;margin:0 0 16px;box-shadow:var(--shadow-1)}
main .ui-tabs a{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 14px;white-space:nowrap;font-size:var(--t-body);font-weight:500;color:var(--muted);border-block-end:3px solid transparent;text-decoration:none}
main .ui-tabs a:hover{color:var(--fg);background:var(--surface-2)}
main .ui-tabs a[aria-current]{color:var(--brand-hover);font-weight:600;border-block-end-color:var(--brand)}
main .ui-tabs small{padding:0 7px;border-radius:999px;background:var(--surface-3);font-size:var(--t-micro);font-variant-numeric:tabular-nums}
main .ui-tabs-on [data-panel]:not(.on){display:none!important}

/* ------------------------------------------------------------------ forms: titled groups, labels above, one save bar */
main .ui-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);margin:0 0 16px;box-shadow:var(--shadow-1)}
main .ui-group>h2{margin:0;padding:11px 18px;font-size:var(--t-body);font-weight:600;background:var(--surface-2);border-block-end:1px solid var(--line);border-start-start-radius:var(--r-card);border-start-end-radius:var(--r-card)}
main .ui-group>.ui-form{padding:16px 18px}
main .ui-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
main .ui-form.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
main .ui-form.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
main .ui-form .wide{grid-column:1/-1}
main .ui-form label,main .ui-field{display:flex;flex-direction:column;gap:5px;font-size:var(--t-small);font-weight:500;color:var(--muted);min-width:0}
main .ui-form .req{color:var(--bad)}
main .ui-form input:not([type=radio]):not([type=checkbox]),main .ui-form select,main .ui-form textarea{width:100%;min-height:var(--ctl-h);font-size:var(--t-body);box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--fg);padding:6px 12px}
main .ui-form input:focus,main .ui-form select:focus,main .ui-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus-ring)}
main .ui-form input[type=checkbox],main .ui-form input[type=radio]{width:18px;height:18px;min-height:0;margin:0;flex:none}
main table.ui-table{min-width:0}
main .ui-form .hint{font-size:var(--t-micro);font-weight:400;color:var(--muted)}
main .ui-form .check{flex-direction:row;align-items:center;gap:8px}
main .ui-save{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 18px;border-block-start:1px solid var(--line);background:var(--surface-2);border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card)}
main .ui-save.solo{border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
main .ui-form>.ui-save{grid-column:1/-1;margin:2px -18px -16px;padding-inline:18px}
main .ui-modes{display:flex;flex-wrap:wrap;gap:16px;grid-column:1/-1;border:0;padding:0;margin:0}
main .ui-modes label{flex-direction:row;align-items:center;gap:6px}
main details.ui-add{margin-top:12px}
main details.ui-add>summary{list-style:none;display:inline-flex;cursor:pointer}
main details.ui-add>summary::-webkit-details-marker{display:none}
main details.ui-add[open]>summary{margin-bottom:12px}
main details.ui-add[open]>.ui-form,main details.ui-add[open]>form{border:1px solid var(--line);border-radius:var(--r-ctl);padding:16px 18px;background:var(--surface-2)}
main details.ui-add[open]>form>.ui-save{border-end-start-radius:var(--r-ctl);border-end-end-radius:var(--r-ctl)}
main .ui-ac-w{position:relative}
main .ui-ac{position:absolute;z-index:40;inset-inline:0;top:100%;margin-top:2px;max-height:240px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-2)}
main .ui-ac[hidden]{display:none}
main .ui-ac button{display:block;width:100%;border:0;background:none;padding:9px 12px;font:inherit;font-size:var(--t-body);color:var(--fg);text-align:start;cursor:pointer}
main .ui-ac button:hover{background:var(--brand-soft)}

/* ------------------------------------------------------------------ buttons: the documents-center family takes the shared look */
main a.dcw-btn,main button.dcw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:var(--t-small);font-weight:600;text-decoration:none;cursor:pointer}
main a.dcw-btn:hover,main button.dcw-btn:hover{background:var(--surface-2)}
main a.dcw-btn.primary,main button.dcw-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-fg)}

@media (max-width:900px){
  main .ui-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  main .ui-two,main .ui-form,main .ui-form.c3,main .ui-form.c4{grid-template-columns:minmax(0,1fr)}
  main .ui-sheet,main .ui-sheet.c2{grid-template-columns:minmax(110px,auto) minmax(0,1fr)}
  main .ui-sheet.c2>dd:nth-of-type(odd){border-inline-end:0}
}
@media print{main .ui-tabs-on [data-panel]:not(.on){display:block!important}main .ui-tabs{display:none}}

/* the master-data profiles' sections (mdm-sec: a heading, then content) read as a card with a title band */
main .rg-root .mdm-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:0 18px 16px;margin:0 0 16px;box-shadow:var(--shadow-1);min-width:0}
main .rg-root .mdm-sec>h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 -18px 14px;padding:11px 18px;font-size:var(--t-section);font-weight:600;background:var(--surface-2);border-block-end:1px solid var(--line);border-start-start-radius:var(--r-card);border-start-end-radius:var(--r-card)}
main .rg-root .mdm-sec .rg-panel{border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:none}

/* the House B/L rail totals: a long state word wraps inside its cell instead of pushing the page sideways */
main .rw-root .hbw-tot .rw-pill{white-space:normal;max-width:100%}
main .rw-root .hbw-tot>div{min-width:0}
main .rw-root .hbw-tot dd{min-width:0}

/* a card whose body folds behind its title band (an "Add ..." form) */
main details.ui-card>summary{list-style:none;cursor:pointer}
main details.ui-card>summary::-webkit-details-marker{display:none}
main details.ui-card:not([open])>summary.ui-card-h{border-block-end:0;border-radius:var(--r-card)}
main details.ui-card>summary.ui-card-h h2{color:var(--brand-hover)}
main details.ui-card>form>.ui-save,main details.ui-card .ui-form>.ui-save{border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card)}
main .ui-card>form>.ui-save{border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card)}
main .ui-card-h .sp.ui-dim{font-size:var(--t-micro);font-weight:400;max-width:60%}

/* ==================================================================================================================
   KIT BASICS: numbers, references, focus. .ref (identifiers: job, HBL, container, document numbers) is mono and LTR everywhere.
   .num is mono and LTR inside the kit components only: the older pages define .num for themselves and keep it.
   ================================================================================================================== */
.ref{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
:is(.ui-dt-table,.tbl,.ui-panel,.card,.ledger,.banner,.hero,.ui-ready,.ui-rs,.pill,.ui-badge,.dock,.ui-root) .num{font-family:var(--mono);unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
:is(.ui-dt-table,.tbl,.ledger,.dock,.ui-root) :not(td,th).num{direction:ltr}
:is(td,th).num,:is(td,th).amt{text-align:end}
.eyebrow{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
:lang(ar) .eyebrow,[dir=rtl] .eyebrow{letter-spacing:0;text-transform:none;font-size:var(--t-small)}
.spacer{flex:1}
.ui-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(main,.ui-panel,.dock) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ==================================================================================================================
   BUTTONS (kit .btn). The older pages say .btn (primary), .btn.secondary, .btn.soft, .btn.small / .sm, .btn.danger; the kit's own names
   are .btn-primary / -secondary / -ghost / -danger and -lg / -sm. Both read the same rules. Rule 1: one primary button per screen.
   A disabled button says why in its title.
   ================================================================================================================== */
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--ctl-h);padding:0 16px;border-radius:var(--r-ctl);
  font-family:inherit;font-weight:600;font-size:var(--t-body);line-height:1.25;border:1px solid transparent;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--motion),box-shadow var(--motion),border-color var(--motion),transform .05s}
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):active{transform:translateY(1px)}
:is(.btn,.btn-primary):not(.secondary,.soft,.ghost,.quiet,.danger,.warning):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:var(--brand);border-color:var(--brand);color:var(--brand-fg);box-shadow:var(--shadow-1),inset 0 1px 0 var(--hairline-on-brand)}
:is(.btn,.btn-primary):not(.secondary,.soft,.ghost,.quiet,.danger,.warning):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-fg);filter:none}
:is(.btn,.btn-primary):not(.secondary,.soft,.ghost,.quiet,.danger,.warning):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):active{background:var(--brand-active);border-color:var(--brand-active)}
:is(.btn.secondary,.btn-secondary):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:var(--surface);border-color:var(--line);color:var(--fg);box-shadow:var(--shadow-1)}
:is(.btn.secondary,.btn-secondary):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);filter:none}
:is(.btn.soft,.btn.ghost,.btn.quiet,.btn-ghost):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:transparent;border-color:transparent;color:var(--brand);box-shadow:none}
:is(.btn.soft,.btn.ghost,.btn.quiet,.btn-ghost):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{background:var(--brand-soft);border-color:transparent;color:var(--brand);filter:none}
:is(.btn.danger,.btn-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:var(--bad-soft);border-color:transparent;color:var(--bad);box-shadow:none}
:is(.btn.danger,.btn-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{background:var(--bad);border-color:var(--bad);color:var(--on-dark);filter:none}
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):focus-visible{outline:0;box-shadow:var(--focus-ring)}
:is(.btn.lg,.btn-lg):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){min-height:var(--ctl-h-lg);font-size:var(--t-section);padding:0 22px;border-radius:10px}
:is(.btn.small,.btn.sm,.btn-sm):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){min-height:var(--ctl-h-sm);font-size:var(--t-small);padding:0 12px}
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger):is(:disabled,[aria-disabled=true]):not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* confirm (ok soft), module action (the page's module colour: the main action of a finance page, never a second primary), icon-only */
.btn.ok:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:var(--ok-soft);border-color:transparent;color:var(--ok);box-shadow:none}
.btn.ok:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{background:var(--ok);border-color:var(--ok);color:var(--on-dark)}
.btn.mod:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){background:var(--m-ink);border-color:var(--m-ink);color:var(--on-dark)}
.btn.mod:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)):hover{filter:brightness(1.1);color:var(--on-dark)}
.btn.icon:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){width:var(--ctl-h);padding:0}
.btn.icon.small,.btn.icon.sm{width:var(--ctl-h-sm)}

/* ==================================================================================================================
   PILLS (kit .pill) and the StatusBadge component: always a dot and a word, never colour alone. The label and the tone come from the
   server; nothing here decides a state from an amount or a date.
   ================================================================================================================== */
:is(.pill,.ui-badge){display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:var(--t-micro);font-weight:600;white-space:nowrap;line-height:18px;border:1px solid transparent}
:is(.pill,.ui-badge)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-badge-dot{display:none}
:is(.pill-ok,.ui-badge-good){background:var(--ok-soft);color:var(--ok)}
:is(.pill-warn,.ui-badge-warn){background:var(--warn-soft);color:var(--warn)}
:is(.pill-bad,.ui-badge-crit){background:var(--bad-soft);color:var(--bad)}
:is(.pill-info,.ui-badge-info){background:var(--info-soft);color:var(--info)}
:is(.pill-neutral,.ui-badge-quiet){background:var(--surface-3);color:var(--muted)}
main .status-pill.success{background:var(--ok-soft);color:var(--ok)}
main .status-pill.warning{background:var(--warn-soft);color:var(--warn)}
main .status-pill.danger{background:var(--bad-soft);color:var(--bad)}
main .status-pill.info{background:var(--info-soft);color:var(--info)}

/* ==================================================================================================================
   CARDS, BANNERS, FIELDS, TABLES, SKELETON, EMPTY (kit). These class names also exist in the older pages with their own layout, so the
   kit's geometry applies inside .ui-root (a rebuilt page) and inside the side panel; the older cards only take the tokens above.
   ================================================================================================================== */
.ui-root .card,.ui-panel .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--shadow-1)}
.ui-root .card h3,.ui-panel .card h3{margin:0 0 6px;font-size:var(--t-section);display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.ui-root .kv,.ui-panel .kv{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t-small);color:var(--muted);padding:2px 0}
.ui-root .kv b,.ui-panel .kv b{color:var(--fg);font-weight:500}
.ui-root .card-status{position:relative}
.ui-root .card-status::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--ok)}
.ui-root .card-status.todo::before{background:var(--warn)}
.ui-root .card-status.todo{background:linear-gradient(180deg,var(--warn-soft),var(--surface) 60%)}
.ui-root .card-status.wait::before{background:var(--info)}
.ui-root .card-status.bad::before{background:var(--bad)}
.ui-root .hero{background:linear-gradient(135deg,var(--brand-soft),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);border-radius:var(--r-hero);padding:18px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-2)}
.ui-root .hero .big{font-size:var(--t-lead);font-weight:700;line-height:1.3}
.banner{border-radius:var(--r-card);padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:600;border:1px solid transparent}
.banner small{font-weight:400;opacity:.9;font-size:var(--t-small)}
.banner-warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.banner-ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.banner-bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.banner-info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.ui-root .field,.ui-panel .field{display:grid;gap:4px}
.ui-root .field label,.ui-panel .field label{font-size:var(--t-small);font-weight:600}
.ui-root .field .hint,.ui-panel .field .hint{font-size:var(--t-micro);color:var(--muted)}
.ui-root .field.err input,.ui-panel .field.err input,.ui-panel .field.err select{border-color:var(--bad)}
.ui-root .field.err .hint,.ui-panel .field.err .hint{color:var(--bad)}
.ctx{background:var(--info-soft);color:var(--info);border-radius:var(--r-ctl);padding:8px 12px;font-size:var(--t-small)}
/* every text field and select: 40px, kit border, soft focus ring. Specificity (0,0,2): any page rule that names a class still wins. */
main input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=submit],[type=button],[type=color])):where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)),main select:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)),main textarea:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)){
  font-family:inherit;font-size:var(--t-body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);padding-inline:12px}
main input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=submit],[type=button],[type=color])):where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):hover,main select:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):hover,main textarea:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):hover{border-color:color-mix(in srgb,var(--line),var(--muted) 30%)}
main input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=submit],[type=button],[type=color])):where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):focus,main select:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):focus,main textarea:where(:not(.erp-topbar *,.document-canvas *,.doc-sheet *,.document-panel *)):focus{border-color:var(--brand);box-shadow:var(--focus-ring);outline:0}
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-1)}
.tscroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.tbl th{position:sticky;top:0;background:var(--surface-2);text-align:start;color:var(--muted);font-size:var(--t-small);font-weight:600;padding:0 12px;height:36px;border-block-end:1px solid var(--line);white-space:nowrap}
.tbl td{padding:0 12px;height:var(--row-h);border-block-end:1px solid var(--line-2);white-space:nowrap}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td.id{font-weight:600}
.tbl .sticky{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;box-shadow:inset -1px 0 0 var(--line)}
[dir=rtl] .tbl .sticky{box-shadow:inset 1px 0 0 var(--line)}
.skel,.ui-skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2));background-size:200% 100%;animation:ui-skel 1.2s linear infinite}
@keyframes ui-skel{to{background-position:-200% 0}}
.ui-root .empty,.ui-state{text-align:center;padding:var(--s6);color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-card)}
.ui-root .empty b{display:block;color:var(--fg);margin-bottom:4px}

/* ==================================================================================================================
   LEDGER AND DOCK (layout "E": two ledgers - money and operations - under one status banner, with a sticky dock). Used by the
   delivery-order page. A row is quiet when done (a check); only the missing row is warm and carries the primary button; a row
   waiting for someone else is blue.
   ================================================================================================================== */
.ledger-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);margin-block-start:var(--s4);align-items:start}
@media (max-width:900px){.ledger-grid{grid-template-columns:1fr}}
.ledger{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-1)}
.ledger>header{padding:10px 16px;background:var(--surface-2);border-block-end:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.ledger>header h2{margin:0;font-size:var(--t-small);font-weight:700;letter-spacing:.02em}
.lr{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:10px 16px;border-block-end:1px solid var(--line-2)}
.lr:last-child{border-block-end:0}
.lr .mk{width:20px;height:20px;border-radius:50%;background:var(--ok);color:var(--on-dark);display:grid;place-items:center}
.lr.todo{background:linear-gradient(180deg,var(--warn-soft),var(--surface) 90%)}
.lr.todo .mk{background:transparent;border:2px solid var(--warn);color:var(--warn)}
.lr.wait .mk{background:transparent;border:2px solid var(--info);color:var(--info)}
.lr.na .mk{background:var(--surface-3);color:var(--muted)}
.lr .t{font-weight:600}
.lr .d{font-size:var(--t-small);color:var(--muted);overflow-wrap:anywhere}
.lr .d .ref{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.lr .d{min-width:0}
.lr.todo .d{color:var(--warn)}
.lr.wait .d{color:var(--info)}
.lr .amt{text-align:end;font-weight:600;white-space:nowrap}
.lr .amt small{display:block;font-weight:400;color:var(--muted);font-size:var(--t-micro);font-family:var(--font)}
.ledger .tot{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 16px;background:var(--surface-2);font-weight:700;border-block-start:1px solid var(--line)}
.dock{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-block-start:var(--s4);z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 12px 32px -8px var(--shadow-dock)}
.dock .thumb{width:42px;height:54px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(var(--line) 1px,transparent 1px) 0 10px/100% 7px;flex:none}
.dock .lbl b{display:block}.dock .lbl small{color:var(--muted)}

/* ==================================================================================================================
   SHARED COMPONENTS (phase B2; markup templates/ui/*.html, behaviour static/caspian-ui.js, gallery /_ui/kit), now on the kit
   ================================================================================================================== */
@media (prefers-reduced-motion:reduce){.ui-panel,.ui-panel-box,.ui-clip{transition:none!important;animation:none!important}}

/* PageHeader: the kit's page header, a card with the title, a status, the actions and a data line */
:where(body.cds-shell) .page-head h1:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){font-size:var(--t-page);font-weight:700;letter-spacing:0}
.ui-menu{position:relative}
.ui-menu>summary{list-style:none;cursor:pointer}.ui-menu>summary::-webkit-details-marker{display:none}
.ui-menu-list{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:30;display:grid;min-width:200px;padding:var(--s1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-2)}
.ui-menu-list>*{display:block;padding:8px 12px;border-radius:var(--r-ctl);color:var(--fg);text-decoration:none}
.ui-menu-list>*:hover{background:var(--surface-2)}

/* CurrencyAmount */
.ui-amt{font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:isolate;font-family:var(--mono)}
.ui-amt-none{color:var(--muted)}

/* RecordSummary */
.ui-rs{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.ui-rs-id{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.ui-rs-name{font-size:var(--t-section);font-weight:600;color:var(--fg)}
.ui-rs-no{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.ui-rs-refs{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0}
.ui-rs-refs div{display:grid;gap:2px}.ui-rs-refs dt{font-size:var(--t-small);color:var(--muted)}.ui-rs-refs dd{margin:0;font-weight:500}

/* ReadinessList: the conditions the server evaluated. Rule 3: a met row is quiet (a check), only a missing row is warm */
.ui-ready ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1)}
.ui-ready-h{margin:0 0 var(--s2);font-size:var(--t-section)}
.ui-ready-row{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-block-start:1px solid var(--line-2)}
.ui-ready-row:first-child{border-block-start:0}
.ui-ready-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:700;flex:0 0 auto;font-size:var(--t-micro)}
.is-met .ui-ready-mark{color:var(--on-dark);background:var(--ok)}
.is-not{background:linear-gradient(180deg,var(--warn-soft),var(--surface) 90%)}
.is-not .ui-ready-mark{color:var(--warn);background:transparent;border:2px solid var(--warn)}
.is-not .ui-ready-reason{color:var(--warn)}
.is-unknown .ui-ready-mark{color:var(--muted);background:var(--surface-3)}
.ui-ready-text{display:grid;gap:2px;flex:1;min-width:0}.ui-ready-label{font-weight:600}.ui-ready-reason{font-size:var(--t-small);color:var(--muted)}

/* DetailPanel: the side panel every in-page action opens (the kit's drawer) */
.ui-panel{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:var(--scrim)}
.ui-panel[hidden]{display:none}
.ui-panel-box{display:flex;flex-direction:column;width:var(--panel-w);max-width:100%;height:100%;background:var(--surface);box-shadow:var(--shadow-2);outline:none;animation:ui-panel-in var(--motion) ease-out}
.ui-panel-wide .ui-panel-box{width:min(880px,94vw)}
@keyframes ui-panel-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
[dir=rtl] .ui-panel-box{animation-name:ui-panel-in-rtl}
@keyframes ui-panel-in-rtl{from{transform:translateX(-24px);opacity:.6}to{transform:none;opacity:1}}
.ui-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding-block:var(--s2);padding-inline:var(--s5) var(--s4);border-block-end:1px solid var(--line);background:var(--surface)}
.ui-panel-head h2{margin:0;font-size:var(--t-section);font-weight:700;color:var(--fg);display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.ui-panel-x{display:grid;place-items:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);border:0;border-radius:var(--r-ctl);background:transparent;color:var(--brand);font-size:var(--t-section);cursor:pointer}
.ui-panel-x:hover{background:var(--brand-soft)}
.ui-panel-body{flex:1;overflow:auto;padding:var(--s5)}
.ui-panel-inline{position:static;background:none;display:block}
.ui-panel-inline .ui-panel-box{width:auto;height:auto;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);animation:none}
.ui-panel-form{display:grid;gap:var(--s4)}
.ui-panel-form .ui-field{display:grid;gap:6px}
.ui-panel-form label{font-weight:600;font-size:var(--t-small);color:var(--fg)}
.ui-panel-form .ui-row2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s3)}
.ui-panel-form :is(input:not([type=checkbox]),select,textarea){width:100%;min-height:var(--ctl-h);padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--fg);font:inherit}
.ui-panel-form :is(input:not([type=checkbox]),select,textarea):focus{border-color:var(--brand);box-shadow:var(--focus-ring);outline:0}
.ui-panel-form .ui-check{display:flex;align-items:center;gap:var(--s2);font-weight:600}
.ui-panel-form .ui-check input{width:18px;height:18px}
.ui-panel-foot{position:sticky;bottom:calc(-1 * var(--s5));display:flex;justify-content:flex-start;gap:var(--s2);margin:var(--s2) calc(-1 * var(--s5)) calc(-1 * var(--s5));padding:var(--s3) var(--s5);background:var(--surface);border-block-start:1px solid var(--line)}
.ui-hint{font-size:var(--t-small);color:var(--muted)}

/* FilterBar */
.ui-fb{display:grid;gap:var(--s2);padding:var(--s2) 0;margin:0 0 var(--s3)}   /* a row of fields on the page: the controls draw the boxes, the bar draws none (no double border) */
.ui-fb-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.ui-fb-row>:is(select,input,label){min-height:var(--ctl-h)}
.ui-fb .ui-fb-more{display:none}
.ui-fb.is-open .ui-fb-more{display:revert}
.ui-fb.is-open select.ui-fb-more{display:inline-block}
.ui-fb-toggle .ui-fb-off{display:none}.ui-fb.is-open .ui-fb-toggle .ui-fb-on{display:none}.ui-fb.is-open .ui-fb-toggle .ui-fb-off{display:inline-block}
.ui-fb-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--brand-fg);font-size:var(--t-small);font-weight:700}
.ui-fb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding-block-start:var(--s2);border-block-start:1px solid var(--line-2)}
.ui-fb-chips-l{font-size:var(--t-small);color:var(--muted);font-weight:600}
.ui-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-hover);font-size:var(--t-small);font-weight:600;text-decoration:none;border:1px solid transparent}
.ui-chip:hover{border-color:var(--brand)}
.ui-fb-reset{font-size:var(--t-small);font-weight:600;color:var(--brand)}

/* DataTable (kit .tbl): 44px rows, sticky header, the first column pinned, numbers at the end side */
.ui-dt{position:relative;overflow:auto;max-height:calc(100vh - var(--header-h) - 96px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.ui-dt-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-small)}
.ui-dt-table th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--muted);font-size:var(--t-small);font-weight:600;letter-spacing:.03em;text-align:start;white-space:nowrap;padding:0 12px;height:36px;border-block-end:1px solid var(--line)}
[dir=ltr] .ui-dt-table th{text-transform:uppercase}
.ui-dt-table td{height:var(--row-h);padding:6px 12px;border-block-end:1px solid var(--line-2);vertical-align:middle;color:var(--fg);background:var(--surface)}
.ui-dt-table tbody tr:hover td{background:var(--surface-2)}
.ui-dt-table .n{text-align:end;font-variant-numeric:tabular-nums}
.ui-dt-table .nw{white-space:nowrap}
.ui-dt-sticky .ui-dt-table :is(th,td):first-child{position:sticky;inset-inline-start:0;z-index:1;box-shadow:inset -1px 0 0 var(--line)}
[dir=rtl] .ui-dt-sticky .ui-dt-table :is(th,td):first-child{box-shadow:inset 1px 0 0 var(--line)}
.ui-dt-sticky .ui-dt-table th:first-child{z-index:3}
.ui-dt-table .ui-id{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;unicode-bidi:isolate;font-family:var(--mono)}
.ui-dt-table .ui-sub{display:block;font-size:var(--t-small);color:var(--muted)}
.ui-dt-table tr.is-exception td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
[dir=rtl] .ui-dt-table tr.is-exception td:first-child{box-shadow:inset -3px 0 0 var(--bad)}
.ui-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none}
.ui-sort-i{font-size:var(--t-micro);color:var(--muted)}.ui-sort.is-asc .ui-sort-i,.ui-sort.is-desc .ui-sort-i{color:var(--brand)}
.ui-state{display:grid;justify-items:center;gap:var(--s2)}
.ui-state p{margin:0}.ui-state-err p{color:var(--bad);font-weight:600}
.ui-dt-table .ui-dt-state td,.ui-dt-table .ui-dt-state:hover td{background:var(--surface);height:auto}
.ui-dt-table .ui-dt-state .ui-state{border:0;padding:var(--s6) var(--s4)}
.ui-clip{display:grid;gap:2px;min-width:12ch;max-width:44ch}
.ui-clip-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-clip.is-open .ui-clip-t{display:block;-webkit-line-clamp:unset}
.ui-clip-b{justify-self:start;padding:0;border:0;background:none;color:var(--brand);font:inherit;font-size:var(--t-small);font-weight:600;cursor:pointer}
.ui-clip-less{display:none}.ui-clip.is-open .ui-clip-less{display:inline}.ui-clip.is-open .ui-clip-more{display:none}

/* AppShell / sidebar: the active item is a soft background plus a stripe at the inline start (never colour alone) */
.ui-shell{width:var(--sidebar-w);max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s2);box-shadow:var(--shadow-1)}
.ui-shell-open{display:none}
.ui-shell-g{border-radius:var(--r-ctl)}
.ui-shell-g>summary{cursor:pointer;padding:8px 10px;font-size:var(--t-small);font-weight:700;color:var(--muted);list-style:none}
.ui-shell-g>summary::-webkit-details-marker{display:none}
.ui-shell-g ul{list-style:none;margin:0 0 var(--s2);padding:0}
.ui-shell-g a{display:block;padding:8px 12px;border-radius:var(--r-ctl);color:var(--fg);text-decoration:none;font-weight:500}
.ui-shell-g a:hover{background:var(--surface-2)}
.ui-shell-g a.is-active{background:var(--brand-soft);color:var(--brand);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
[dir=rtl] .ui-shell-g a.is-active{box-shadow:inset -3px 0 0 var(--brand)}
@media (max-width:1023px){.ui-shell{width:auto}.ui-shell-open{display:inline-flex}.ui-shell-groups{display:none}.ui-shell.is-open .ui-shell-groups{display:block}}
:where(html) body.cds-shell .sidebar nav a:is(.active,[aria-current="page"]){background:var(--brand-soft);color:var(--brand);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
html[dir=rtl] body.cds-shell .sidebar nav a:is(.active,[aria-current="page"]){box-shadow:inset -3px 0 0 var(--brand)}
body.cds-shell .sidebar nav a.active::before{content:none}
html.ui-panel-lock{overflow:hidden}
/* component fixes against the global sheets: style.css gives every table min-width:850px and every field width:100% */
main .ui-dt .ui-dt-table{min-width:100%;width:max-content;max-width:none}
main .ui-dt:not(.ui-dt-sticky) .ui-dt-table{width:100%}
main .ui-dt-table td{white-space:normal}
main .ui-fb-row>:is(input,select){width:auto;flex:0 1 200px;min-width:0;margin:0}
main .ui-fb-row>input[type=search]{flex:1 1 260px}
/* FilterBar on a register form (.rg-filters keeps the register controls; the bar keeps its two rows) */
main .rg-root .ui-fb.rg-filters{display:grid;flex-wrap:initial}

/* File field (UI-25): the real <input type=file> stays (name, accept, required); a translated button and the chosen file name replace
   the browser's own English "Choose File / No file chosen" */
.ui-file{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.ui-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ui-file-input:focus-visible+label{box-shadow:var(--focus-ring)}
.ui-file-name{font-size:var(--t-small);color:var(--muted);unicode-bidi:plaintext}

/* ==================================================================================================================
   PAGE HEAD, DOCUMENT MODAL AND PANEL FORMS (delivery-order page, layout "E", owner 3/11)
   ================================================================================================================== */
.pagehead{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 18px;box-shadow:var(--shadow-1)}
.pagehead h1,.pagehead h2{margin:0;font-size:var(--t-page);font-weight:700;display:flex;gap:10px;align-items:baseline;letter-spacing:0}
.pagehead .m{flex-basis:100%;display:flex;gap:4px 16px;flex-wrap:wrap;color:var(--muted);font-size:var(--t-small)}
.pagehead .m b{color:var(--fg);font-weight:500}
.pagehead .m a{color:var(--brand)}
.do-page{display:grid;gap:var(--s3);align-content:start;max-width:1320px;margin-inline:auto}
.do-page>.ledger-grid{margin-block-start:var(--s1)}
.do-page>.dock{margin-block-start:var(--s1)}
/* D/O page spacing helpers (these were style="" attributes in the template). body:not(#_) gives them the weight the attributes had. */
body:not(#_) .do-mt4{margin-top:4px}
body:not(#_) .do-mt6{margin-top:6px}
body:not(#_) .do-mt8{margin-top:8px}
body:not(#_) .do-my8{margin:8px 0}
body:not(#_) .do-mw150{max-width:150px}
body:not(#_) .do-mw170{max-width:170px}
body:not(#_) .do-mw190{max-width:190px}
body:not(#_) .do-ib-ms8{display:inline-block;margin-inline-start:8px}
body:not(#_) .do-ib-mt6{display:inline-block;margin-top:6px}
body:not(#_) .do-fs105{font-size:var(--t-micro)}
body:not(#_) .do-fs11-mt4{font-size:var(--t-micro);margin-top:4px}
body:not(#_) .do-row6{display:flex;gap:6px;align-items:center}
body:not(#_) .do-row6-w220{display:flex;gap:6px;align-items:center;min-width:220px}
body:not(#_) .do-row8{display:flex;gap:8px;align-items:center}
body:not(#_) .do-row8-mt4{display:flex;gap:8px;align-items:center;margin-top:4px}
body:not(#_) .do-list{margin:4px 0 6px;padding-inline-start:18px}
body:not(#_) .do-blk-mt4{display:block;margin-top:4px}
body:not(#_) .do-w100-mt2{width:100%;margin-top:2px}
.lr .mk .ui-icon{width:12px;height:12px;stroke-width:2.4;vertical-align:baseline}
.lr .act{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end}
.lr .act:empty{display:none}
.lr>.t{min-width:0}
@media (max-width:560px){.lr{grid-template-columns:22px minmax(0,1fr);row-gap:6px}.lr .amt,.lr .act{grid-column:2;text-align:start;justify-content:flex-start}}
.ledger .tot{flex-wrap:wrap}
.ledger .tot b{font-weight:600}
.ledger .tot .ccy{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;justify-content:flex-end}
/* the document modal: the same panel component, centred; its body is one iframe and a foot */
.ui-panel-modal{align-items:center;justify-content:center;padding:var(--s4)}
.ui-panel-modal .ui-panel-box{width:min(1000px,100%);height:min(92vh,1200px);border-radius:var(--r-card);animation-name:ui-modal-in}
[dir=rtl] .ui-panel-modal .ui-panel-box{animation-name:ui-modal-in}
@keyframes ui-modal-in{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
.ui-panel-modal .ui-panel-body{padding:0;display:flex;flex-direction:column;overflow:hidden}
.ui-panel-modal iframe{flex:1;width:100%;min-height:0;border:0;background:var(--surface-3)}
.ui-modal-foot{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--s4);border-block-start:1px solid var(--line);background:var(--surface)}
.ui-modal-foot form{display:inline}
.ui-modal-foot form[hidden]{display:none}
/* forms and facts inside the side panels (the blocks moved from the former page keep their class names) */
.ui-panel .do-field label{display:block;font-size:var(--t-small);font-weight:600;margin-bottom:2px}
.ui-panel .do-field input:not([type=checkbox]),.ui-panel .do-field select,.ui-panel .do-field textarea{width:100%;min-height:var(--ctl-h)}
.ui-panel .do-field .req{color:var(--bad)}
.ui-panel .do-inline{display:flex;gap:var(--s2);align-items:end;flex-wrap:wrap}
.ui-panel .do-inline .do-field{min-width:150px;flex:1}
.ui-panel .do-compact-form{max-width:100%}
.ui-panel .do-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);margin-block-end:var(--s2)}
.ui-panel .do-stat{border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 10px;background:var(--surface);min-width:0}
.ui-panel .do-stat span{display:block;font-size:var(--t-micro);color:var(--muted)}
.ui-panel .do-stat b{font-size:var(--t-small);display:block;overflow-wrap:anywhere}
.ui-panel .notice.compact{padding:8px 12px;font-size:var(--t-small);border-radius:var(--r-ctl);margin-block-start:var(--s2)}
.ui-panel .table-wrap{overflow:auto}
.ui-panel .table-wrap table{width:100%;font-size:var(--t-small);border-collapse:collapse}
.ui-panel .table-wrap th,.ui-panel .table-wrap td{padding:6px 8px;border-block-end:1px solid var(--line-2);text-align:start;white-space:nowrap}
.ui-panel .table-wrap th{background:var(--surface-2);color:var(--muted);font-weight:600}
.ui-panel .actions.tight{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-block-start:var(--s2)}
.ui-panel .tariff-picker{display:grid;grid-template-columns:minmax(220px,2fr) auto auto;gap:var(--s2);align-items:end}
.ui-panel .tariff-scope{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ui-panel .scope-tag{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:var(--t-small);background:var(--surface-2)}
.ui-panel .scope-tag.rec{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.ui-panel .preview{margin-block-start:var(--s2);border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;background:var(--surface)}
.ui-panel .preview-head{display:flex;justify-content:space-between;gap:var(--s2);padding:8px 12px;background:var(--surface-2);border-block-end:1px solid var(--line)}
.ui-panel .manual-box{margin-block-start:var(--s3);border-block-start:1px solid var(--line);padding-block-start:var(--s2)}
.ui-panel .manual-row{display:grid;grid-template-columns:2fr .75fr .85fr auto;gap:var(--s2);align-items:end;margin:6px 0}
.ui-panel .do-guarantee{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s2);align-items:end}
.ui-panel .g-group{display:none}.ui-panel .g-group.show{display:block}
.ui-panel .stepper{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.ui-panel .stepper span{border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:var(--t-small);color:var(--muted);background:var(--surface)}
.ui-panel .stepper span.done{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.ui-panel .stepper span.now{background:var(--brand);color:var(--brand-fg);border-color:transparent}
.ui-panel .line-row{display:grid;grid-template-columns:minmax(200px,2.2fr) .7fr .9fr .9fr auto;gap:var(--s2);align-items:end;margin:6px 0}
.ui-panel .line-row label{display:block;font-size:var(--t-small);font-weight:600;margin-bottom:2px}
.ui-panel .line-row input:not([type=checkbox]){width:100%;min-height:var(--ctl-h)}
.ui-panel .line-row .amt{font-weight:600;padding:8px 0;direction:ltr;text-align:end;font-family:var(--mono)}
.ui-panel .line-row .rm{display:flex;align-items:center;gap:4px;font-size:var(--t-small);white-space:nowrap}
.ui-panel .panel-sec{display:grid;gap:var(--s2);padding-block:var(--s3);border-block-start:1px solid var(--line-2)}
.ui-panel .panel-sec:first-child{border-block-start:0;padding-block-start:0}
.ui-panel .panel-sec>h3{margin:0;font-size:var(--t-body)}
.ui-panel .panel-links{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-small);padding-block-start:var(--s3);border-block-start:1px solid var(--line-2)}
.ui-panel .panel-links a{color:var(--brand)}
@media (max-width:700px){.ui-panel .tariff-picker,.ui-panel .manual-row,.ui-panel .line-row{grid-template-columns:1fr 1fr}}

.pagehead>.ui-crumb{flex-basis:100%;margin:0}

/* in-page actions: messages inside a panel, a toast when the panel is gone, the embedded page */
.ui-msgs{display:grid;gap:var(--s2);margin-block-end:var(--s3)}.ui-msgs:empty{display:none}
.ui-toast{position:fixed;inset-inline:var(--s5);inset-block-end:88px;z-index:80;display:grid;gap:var(--s2);max-width:560px;margin-inline:auto}.ui-toast[hidden]{display:none}
.ui-toast .notice{box-shadow:var(--shadow-2);background:var(--surface)}
.ui-embed{min-height:80px}.ui-embed[aria-busy=true]{opacity:.6}
.ui-embed .page-head{display:none}.ui-embed [data-ui-nolink]{color:inherit;text-decoration:none}
.ui-panel[aria-busy=true] [aria-disabled=true]{opacity:.6;cursor:progress}
.linkbtn{background:none;border:0;padding:0;min-height:0;font:inherit;color:var(--brand);cursor:pointer;text-align:start}.linkbtn:hover{text-decoration:underline}
.ui-panel [hidden]{display:none!important}
.ui-panel .do-field .req::after{content:none}
.ui-embed{min-width:0;overflow-x:auto}
@media (max-width:900px){.ui-panel-wide .ui-panel-box{width:100vw}}
.ui-embed .dd73-inv-focus{min-width:0}.ui-embed .dd73-inv-focus-head{flex-wrap:wrap}.ui-embed .dd73-inv-focus-head>div{min-width:0}
.ui-embed .dd73-inv-focus .muted{overflow-wrap:anywhere}.ui-embed .dd73-inv-focus-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ui-embed .dd73-inv-focus{grid-template-columns:minmax(0,1fr)}
.ui-embed .dd73-inv-focus *{min-width:0}.ui-embed .dd73-inv-focus .table-wrap{max-width:100%;overflow-x:auto}

/* ==================================================================================================================
   APPEARANCE UNIFICATION (owner 4/11/2026) - the kit components that have a Jinja macro (templates/ui/macros.html): icon, button states, pill with an icon,
   banner, field (label above, helper below, visible reason), card, empty / skeleton, next-action card with progress, identity cell, density toggle.
   Reads tokens only (static/ui/tokens.css). Icons: Lucide, 20px, stroke 1.65 (--icon, --icon-sw).
   ================================================================================================================== */
.ui-icon{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-sw);stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;display:inline-block}
[dir="rtl"] .ui-icon.ui-mirror{transform:scaleX(-1)}
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger) .ui-icon{width:18px;height:18px;vertical-align:middle}
:is(.btn.small,.btn.sm,.btn-sm) .ui-icon{width:16px;height:16px}
:is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger) > span{display:inline-block}

/* button states: loading (spinner, no second click), success, disabled WITH its reason on a visible line */
@keyframes ui-spin{to{transform:rotate(360deg)}}
.btn.is-loading,.btn[aria-busy="true"]{pointer-events:none;cursor:progress;opacity:.9}
.btn.is-loading::before,.btn[aria-busy="true"]::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:ui-spin .7s linear infinite}
.btn.is-done{background:var(--ok-soft);border-color:transparent;color:var(--ok);box-shadow:none}
.ui-reason{display:flex;align-items:center;gap:6px;margin-block-start:6px;font-size:var(--t-small);color:var(--warn);line-height:1.35}
.ui-reason .ui-icon{width:14px;height:14px}
.ui-help{display:block;margin-block-start:4px;font-size:var(--t-small);color:var(--muted);line-height:1.35}
.ui-err{display:flex;gap:6px;margin-block-start:4px;font-size:var(--t-small);color:var(--bad)}

/* fields: the label sits ABOVE the control, always */
.ui-field{display:grid;gap:6px;min-width:0;align-content:start}
.ui-field > label{font-size:var(--t-small);font-weight:600;color:var(--fg)}
.ui-field .ui-req{color:var(--bad)}
.ui-field.has-error :is(input,select,textarea){border-color:var(--bad)}
.ui-field :is(input,select,textarea):is(:disabled,[readonly]){background:var(--surface-2);color:var(--muted)}

/* status = an icon and a word, never colour alone */
.pill > .ui-icon{width:14px;height:14px;vertical-align:middle}
.pill:has(> .ui-icon)::before{display:none}
.pill{gap:6px}

/* banner */
.ui-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--info-soft);color:var(--fg);font-size:var(--t-body)}
.ui-banner > .ui-icon{margin-block-start:1px;color:var(--info)}
.ui-banner b{display:block;font-weight:600}
.ui-banner p{margin:2px 0 0;color:var(--muted);font-size:var(--t-small)}
.ui-banner-ok{background:var(--ok-soft)} .ui-banner-ok > .ui-icon{color:var(--ok)}
.ui-banner-warn{background:var(--warn-soft)} .ui-banner-warn > .ui-icon{color:var(--warn)}
.ui-banner-bad{background:var(--bad-soft)} .ui-banner-bad > .ui-icon{color:var(--bad)}

/* card with an icon in its title band, empty state, skeleton */
.ui-card-h > .ui-icon{color:var(--m-ink)}
.ui-empty-state{display:grid;justify-items:center;gap:8px;padding:28px 18px;text-align:center;color:var(--muted)}
.ui-empty-state > .ui-icon{width:32px;height:32px;stroke-width:1.4;color:var(--faint)}
.ui-empty-state p{margin:0;font-size:var(--t-body)}
.ui-skeleton{display:grid;gap:10px;padding:14px 18px}
.ui-skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:ui-shimmer 1.4s ease-in-out infinite}
@keyframes ui-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ui-skel,.btn.is-loading::before,.btn[aria-busy="true"]::before{animation-duration:3s}}

/* the next-action card: what to do now, and how far along the file is */
.ui-next{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px 28px;padding:18px 20px;background:linear-gradient(135deg,var(--m-s),var(--surface) 75%);border:1px solid color-mix(in srgb,var(--m) 30%,var(--line));border-inline-start:3px solid var(--m);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.ui-next h2{margin:0 0 4px;font-size:var(--t-section);font-weight:600}
.ui-next p{margin:0;color:var(--muted);font-size:var(--t-body)}
.ui-next-act{margin-block-start:12px;display:flex;gap:8px;flex-wrap:wrap}
.ui-bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ui-bar > i{display:block;height:100%;background:var(--brand);border-radius:999px}
.ui-next-prog ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.ui-next-prog li{display:flex;align-items:center;gap:8px;font-size:var(--t-small);color:var(--muted)}
.ui-next-prog li.is-done{color:var(--ok)} .ui-next-prog li.is-current{color:var(--fg);font-weight:600} .ui-next-prog li .ui-icon{width:16px;height:16px}
@media (max-width:760px){.ui-next{grid-template-columns:1fr}}

/* table identity cell (a name or number and a secondary line) and the density toggle (compact 44px is the default) */
.ui-ident{display:grid;gap:2px;min-width:0}
.ui-ident-1{font-weight:600;color:var(--fg);text-decoration:none;overflow-wrap:anywhere}
a.ui-ident-1{color:var(--brand)}
.ui-ident-2{font-size:var(--t-small);color:var(--muted);overflow-wrap:anywhere}
.ui-density{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface)}
.ui-density .btn{min-height:28px;padding:0 10px}
.ui-density .btn.is-on{background:var(--brand-soft);color:var(--brand)}
.ui-dt[data-density="comfortable"] :is(td,th){padding-block:calc((var(--row-h-comfort) - 1.5em) / 2)}
.ui-dt[data-density="comfortable"] tbody tr{height:var(--row-h-comfort)}

/* the sign-in, setup and error shells (pages with no application frame) */
.auth-body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg);color:var(--fg);font:var(--t-body)/1.5 var(--font)}
.auth-body *,.auth-body *::before,.auth-body *::after{box-sizing:border-box}
.auth-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-hero);padding:28px;box-shadow:var(--shadow-2)}
.auth-card .auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.auth-card .brand{font-weight:700;letter-spacing:.04em;color:var(--fg)}
.auth-card h1{margin:18px 0 14px;font-size:var(--t-page);font-weight:600;color:var(--fg)}
.auth-card .muted{color:var(--muted)}
.auth-card form{display:grid;gap:14px}
.auth-card label{display:grid;gap:6px;font-size:var(--t-small);font-weight:600;color:var(--fg)}
.auth-card .btn{width:100%;margin-block-start:6px}
.auth-card .auth-lang{display:flex;gap:4px}
.auth-card .auth-lang a{font-size:var(--t-small);font-weight:600;color:var(--muted);text-decoration:none;padding:4px 10px;border-radius:var(--r-ctl);border:1px solid var(--line)}
.auth-card .auth-lang a.on{background:var(--brand-soft);border-color:transparent;color:var(--brand)}
[dir="rtl"] .auth-card{text-align:right}
.auth-card .flash{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--info-soft);color:var(--fg);font-size:var(--t-small)}
.auth-card .flash.error{background:var(--bad-soft);color:var(--bad)}
.auth-card .flash.success{background:var(--ok-soft);color:var(--ok)}
.auth-card .flash.warning{background:var(--warn-soft);color:var(--warn)}

/* ---- classes that replace inline look styles (the template sweep): tones from the tokens, a warning note, flat fieldset, small checkboxes ---- */
.ui-tone-ok{color:var(--ok)} .ui-tone-warn{color:var(--warn)} .ui-tone-bad{color:var(--bad)} .ui-tone-muted{color:var(--muted)} .ui-tone-ink{color:var(--fg);font-size:var(--t-body)}
.ui-small{font-size:var(--t-micro)} .ui-quiet{font-weight:400;color:var(--muted)}
.ui-h-tight{margin:0 0 6px;font-size:var(--t-body)}
.ui-fieldset-flat{border:0;margin:0;padding:0;min-width:0}
.ui-links-flat{border:0;padding:0;margin:0 0 var(--s3)}
.ui-note-warn{margin:8px 0;padding:8px 12px;border:1px solid color-mix(in srgb,var(--warn-soft),var(--warn) 30%);border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--warn);font-size:var(--t-small)}
.ui-card-attn{margin-block-end:18px;border-color:color-mix(in srgb,var(--warn-soft),var(--warn) 40%)}
.ui-textarea-block{width:100%;min-height:110px;padding:8px}
.ui-check16{width:16px;height:16px;min-width:16px;margin:2px 0 0}
.ui-check18{width:18px;height:18px}
.ui-sw{display:block;width:100%;height:34px;border-radius:6px;background:var(--sw)}
.cf-mode-card{grid-column:span 6;display:block;padding:10px 12px;cursor:pointer}
.co-chip{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:var(--t-small);text-decoration:none;margin:0 0 10px;background:var(--surface);color:var(--fg)}
.rv-warn.is-ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.rv-warn.is-info{background:var(--info-soft);border-color:transparent;color:var(--info)}
span.b[style*="--h"]{height:var(--h)}
.ui-rule-top{border-block-start:1px solid var(--line-2)}
.ui-rule-dash{border-block-start:1px dashed var(--line);padding-block-start:6px}

.ui-dt-tools{display:flex;justify-content:flex-end;margin-block-end:var(--s2)}
.ui-sort-i .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.ui-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s2)}
.ui-icon-cell{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);font-size:var(--t-micro);color:var(--muted);min-width:0}
.ui-icon-cell bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-icon-cell .ui-icon{flex:none;color:var(--fg)}

/* ==================================================================================================================
   V230 MODULE COLOURS (owner 6/11/2026): the cards of the reference (next action, money, record), icon motion and the module line of a card.
   Every colour is a token (static/ui/tokens.css: --m / --m-s / --m-ink of the page's module, --ok / --warn / --bad / --info and their softs).
   ================================================================================================================== */
main .ui-crumb a{color:var(--m-ink)}
.ui-ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px}
.ui-ocards>*{min-width:0}
@media (max-width:1050px){.ui-ocards{grid-template-columns:minmax(0,1fr)}}
.ui-ocard{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);transition:box-shadow var(--motion),transform var(--motion)}
.ui-ocard:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.ui-ocard.is-next{background:linear-gradient(135deg,var(--m-s),var(--surface) 75%);border-color:color-mix(in srgb,var(--m) 30%,var(--line));border-inline-start:3px solid var(--m)}
.ui-oc-pad{flex:1;padding:18px 20px}
.ui-oc-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ui-oc-top .pill{margin-inline-start:auto}
.ui-oc-sym{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--m-s);color:var(--m)}
.ui-oc-sym .ui-icon{width:20px;height:20px}
.ui-oc-eb{font-size:var(--t-micro);font-weight:600;color:var(--m-ink)}
.ui-ocard h3{margin:0 0 6px;font-size:var(--t-lead);font-weight:600;line-height:1.3}
.ui-ocard p{margin:0;font-size:var(--t-small);line-height:1.6;color:var(--muted)}
.ui-oc-amt{margin:8px 0 2px;font-family:var(--mono);font-size:26px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.ui-oc-kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--t-small)}
.ui-oc-kv>span{color:var(--muted)}
.ui-oc-kv>b{font-weight:600;text-align:end;min-width:0}
.ui-oc-track{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:14px 0 6px}
.ui-oc-track>i{display:block;height:100%;border-radius:4px;background:var(--m)}
.ui-oc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 20px;border-top:1px solid var(--line);font-size:var(--t-micro);color:var(--muted)}

/* ---- icon motion (the caspian-elements kit): every icon carries data-m (v230_appearance.MOTION, written by the icon macros); it plays ONCE on hover and
   on keyboard focus of a sidebar item, a page-header tile, a KPI card, a card or a button - only the ship keeps sailing while hovered. Under 1s each. */
@keyframes sail{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes scan{0%,100%{transform:translate(0)}30%{transform:translate(2px,-2px) scale(1.06)}65%{transform:translate(-2px,1px)}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
@keyframes stamp{0%{transform:scale(.8);opacity:.4}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes bars{from{transform:scaleY(.5);opacity:.4}to{transform:scaleY(1);opacity:1}}
@keyframes reveal{0%{transform:perspective(120px) rotateY(-22deg)}100%{transform:perspective(120px) rotateY(0)}}
@keyframes wallet{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px)}65%{transform:translateX(2px)}}
@keyframes document{0%{transform:translateY(4px);opacity:.4}100%{transform:translateY(0);opacity:1}}
@keyframes flip{to{transform:rotate(180deg)}}
@keyframes lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px)}}
@keyframes gear{to{transform:rotate(90deg)}}
@keyframes sync{to{transform:rotate(180deg)}}
.ui-icon[data-m]{transform-origin:50% 60%;--mv-d:.6s;--mv-e:ease-out;--mv-n:1}
.ui-icon[data-m="sail"]{--mv-d:1.4s;--mv-e:ease-in-out;--mv-n:infinite}
.ui-icon[data-m="ring"]{--mv-d:.7s;--mv-e:ease-in-out;transform-origin:50% 10%}
.ui-icon[data-m="stamp"]{--mv-d:.55s;--mv-e:cubic-bezier(.2,.8,.3,1)}
.ui-icon[data-m="bars"]{--mv-d:.7s;transform-origin:50% 90%}
.ui-icon[data-m="document"]{--mv-d:.65s}
.ui-icon[data-m="flip"]{--mv-d:.7s;--mv-e:cubic-bezier(.2,.8,.3,1)}
.ui-icon[data-m="scan"]{--mv-d:.9s;--mv-e:ease-in-out}
.ui-icon[data-m="gear"]{--mv-d:.65s;--mv-e:cubic-bezier(.2,.8,.3,1)}
.ui-icon[data-m="sync"]{--mv-d:.9s;--mv-e:ease-in-out}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="sail"]{animation:sail var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="ring"]{animation:ring var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="stamp"]{animation:stamp var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="bars"]{animation:bars var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="reveal"]{animation:reveal var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="wallet"]{animation:wallet var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="document"]{animation:document var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="flip"]{animation:flip var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="lift"]{animation:lift var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="scan"]{animation:scan var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="gear"]{animation:gear var(--mv-d) var(--mv-e) var(--mv-n)}
:is(.sidebar nav a,.sidebar nav summary,.ui-kpi,.mg-kpi,.cds-kpi,.ui-ocard,.ui-card-h,.btn,.cf-icon-btn,.erp-icon-btn):is(:hover,:focus-visible) .ui-icon[data-m="sync"]{animation:sync var(--mv-d) var(--mv-e) var(--mv-n)}

/* ---- Settings -> Appearance (V230): the swatches, the sample rows and the two mapping tables; every colour a token */
.ap-t{margin:20px 2px 10px;font-size:var(--t-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:lang(ar) .ap-t,[dir=rtl] .ap-t{letter-spacing:0;text-transform:none}
.ap-t-h{text-transform:none;letter-spacing:0;font-weight:500}
.ap-sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:16px}
.ap-sws-4{grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:760px){.ap-sws,.ap-sws-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap-sw{position:relative;display:block;cursor:pointer;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px;transition:box-shadow var(--motion),transform var(--motion)}
.ap-sw:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.ap-sw:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.ap-sw.is-bad{border-color:var(--bad)}
.ap-sw-c{display:block;height:46px;background:var(--c)}
.ap-sw b{display:block;padding:7px 10px 0;font-size:var(--t-small)}
.ap-sw small{display:block;padding:0 10px 8px;font-size:var(--t-micro);color:var(--muted)}
.ap-hex{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;text-align:start}
.ap-note{color:var(--bad)!important}
.ap-sw input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ap-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px}
.ap-row-b{border-top:1px solid var(--line)}
.ap-gap{width:20px}
.ap-foot{margin:0;padding:0 16px 14px;font-size:var(--t-micro);color:var(--muted)}
.ap-foot.is-bad,[data-ap-msg].is-bad{color:var(--bad);font-weight:600}
.ap-maps{padding:8px 16px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ap-maps>details{min-width:0}
.ap-maps summary{cursor:pointer;font-weight:600;padding:6px 0}
.ap-tw{overflow-x:auto}
.ap-tw table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.ap-tw th,.ap-tw td{padding:7px 12px;border-bottom:1px solid var(--line-2);text-align:start}
.ap-tw th{font-size:var(--t-micro);color:var(--muted);background:var(--surface-2)}
.ap-dot{display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--m)}
.ap .ui-icon{vertical-align:middle}

/* V235 party name rule: a party is its NAME on one line (templates/ui/party.html); the printed block lives on the company record, the B/L record and the printed documents */
.pnm{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;max-width:100%;min-width:0;vertical-align:baseline}
.pnm-n{min-width:0;max-width:var(--pnm-max,32ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
a.pnm-n{color:var(--brand)}
.pnm-code{flex:none;font:var(--t-micro) var(--mono);color:var(--muted)}
.pnm-nl{flex:none;font-size:var(--t-micro);line-height:16px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;white-space:nowrap}
dd:has(> .pnm),td:has(> .pnm),li:has(> .pnm){min-width:0}
td .pnm-n, li .pnm-n { max-width: var(--pnm-max, 22ch); }

/* Delivery orders list: 8 visible columns that fit the card at 1440 and 1280 (tighter cell padding; numbers never wrap, the party name wraps) */
main .rg-root .rg-table.do-table > thead > tr > th, main .rg-root .rg-table.do-table > tbody > tr > td { padding-inline: 8px; }
main .rg-root .rg-table.do-table td .pnm-n { white-space: normal; overflow-wrap: anywhere; }

/* V243 no-horizontal-scroll: record tables inside a card give way instead of scrolling. Text cells wrap (long values break anywhere), numbers,
   actions and cells marked .nw keep their line; the global table min-width (850px) does not apply inside these frames. */
main :is(.rw-root .rw-table,.cf-root .cf-table,.rg-root .rg-table,.table-wrap.hr-table table,.table-wrap.tl-wrap table,.tw .ft-table) { min-width: 0; }
main :is(.rw-root .rw-table,.cf-root .cf-table,.rg-root .rg-table,.table-wrap.hr-table table,.table-wrap.tl-wrap table,.tw .ft-table) > tbody > tr > td:not(.num):not(.nw):not(.act):not(.total):not(.n),
main :is(.rw-root .rw-table,.cf-root .cf-table,.rg-root .rg-table,.table-wrap.hr-table table,.table-wrap.tl-wrap table,.tw .ft-table) > tbody > tr > th:not(.num):not(.nw) { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
body:not(#_) main :is(.rw-root .rw-table,.cf-root .cf-table,.rg-root .rg-table,.table-wrap.hr-table table,.table-wrap.tl-wrap table,.tw .ft-table) > thead > tr > th:not(.nw) { white-space: normal; }
main .cf-root .cf-table-wrap.mw-check > table { width: 100%; }
/* V243 (live check at 1366): the tables that were 3-16px too wide with real data take tighter cell padding (no inner horizontal scroll) */
body:not(#_) main .chg-table :is(th,td){padding-inline:6px}
body:not(#_) main .bm-table :is(th,td){padding-inline:6px}