/* ==================================================================================================================
   COMPATIBILITY LAYER (appearance unification, owner 4/11/2026): maps every legacy selector onto the kit components, so a page needs no edit to look like
   the kit and a design decision made in static/ui/tokens.css changes the whole system. Loaded LAST (after caspian-ui.css); every rule carries `:not(#_)`
   (an id's weight) so it beats the legacy sheets by weight as well as by order, without !important. It reads tokens only; it adds no primary button and
   never decides which element is primary: it re-skins what the page already says. Printed documents (.document-canvas, .doc-sheet, .document-panel,
   .print-sheet) are never touched. A family leaves this file when its own sheet is removed (Phase 3).
   ================================================================================================================== */

/* ---- A. type: every control speaks the kit's font */
body:not(#_) :is(button,input,select,textarea,optgroup):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){font-family:var(--font)}

/* ---- B. buttons: one size ladder (32 / 40 / 44), one radius, one weight, for every button family */
body:not(#_) :is(.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.cf-btn,.rw-btn,.l141-btn,.aix-btn,.v102-btn,.csp-send,.dcw-btn,.add-line):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.ui-density *)){
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:var(--ctl-h);padding-block:0;padding-inline:16px;border-radius:var(--r-ctl);
  font-family:var(--font);font-size:var(--t-body);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;vertical-align:middle;white-space:nowrap}
body:not(#_) :is(.add-line,.btn.small,.btn.sm,.btn-sm,.cf-btn.sm,.cf-btn.small,.rw-btn.sm,.rw-btn.small,.l141-btn.sm,.l141-btn.small,.aix-btn.sm):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.ui-density *)){
  min-height:var(--ctl-h-sm);padding-inline:12px;font-size:var(--t-small)}
body:not(#_) :is(.btn.lg,.btn-lg,.cf-btn.lg,.rw-btn.lg):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){min-height:var(--ctl-h-lg);font-size:15px}
/* colour: primary (brand), secondary (surface), ghost / quiet (text), danger - the families that spell it their own way */
body:not(#_) :is(.cf-btn.primary,.rw-btn.primary,.dcw-btn.p,.l141-btn.is-primary,.aix-btn.primary,.v102-btn.primary):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){background:var(--brand);border:1px solid var(--brand);color:var(--brand-fg);box-shadow:var(--shadow-1)}
body:not(#_) :is(.cf-btn.primary,.rw-btn.primary,.l141-btn.is-primary,.aix-btn.primary):hover{background:var(--brand-hover);border-color:var(--brand-hover)}
body:not(#_) :is(.cf-btn:not(.primary,.danger,.ghost,.quiet),.rw-btn:not(.primary,.danger,.ghost,.quiet),.dcw-btn:not(.p),.add-line,.l141-btn:not(.is-primary,.is-danger,.is-ghost),.aix-btn:not(.primary),.csp-send):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){background:var(--surface);border:1px solid var(--line);color:var(--fg);box-shadow:var(--shadow-1)}
body:not(#_) :is(.cf-btn:not(.primary,.danger,.ghost,.quiet),.rw-btn:not(.primary,.danger,.ghost,.quiet),.dcw-btn:not(.p),.add-line,.l141-btn:not(.is-primary,.is-danger,.is-ghost),.aix-btn:not(.primary)):hover{background:var(--surface-2)}
body:not(#_) :is(.cf-btn.danger,.rw-btn.danger,.l141-btn.is-danger):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){background:var(--bad-soft);border:1px solid transparent;color:var(--bad);box-shadow:none}
body:not(#_) :is(.cf-btn.ghost,.cf-btn.quiet,.rw-btn.ghost,.rw-btn.quiet,.l141-btn.is-ghost):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){background:transparent;border:1px solid transparent;color:var(--brand);box-shadow:none}
body:not(#_) :is(.btn.quiet):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){color:var(--muted)}
body:not(#_) :is(.btn,.cf-btn,.rw-btn,.l141-btn):is(:disabled,[aria-disabled=true],.is-disabled):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){opacity:.45;cursor:not-allowed;box-shadow:none}

/* icon buttons of the shell and of the drawers: light, 40px, one family (no dark floating buttons) */
body:not(#_) :is(.erp-icon-btn,.calendar-btn,.sh-toggle):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-h);min-height:var(--ctl-h);min-width:var(--ctl-h);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--fg);font-family:var(--font);font-size:var(--t-small);font-weight:600;box-shadow:var(--shadow-1);cursor:pointer;line-height:1}
body:not(#_) :is(.erp-icon-btn,.calendar-btn,.sh-toggle):hover{background:var(--surface-2)}
body:not(#_) .erp-icon-btn .erp-ico,body:not(#_) .erp-search > span{display:inline-grid;place-items:center;font-size:0}
body:not(#_) .calendar-btn{padding:0;width:var(--ctl-h)}
body:not(#_) :is(.csp-icon-btn,.csp-mobile-search-btn){box-sizing:border-box;display:inline-grid;place-items:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);min-height:0;padding:0;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--muted);font-size:0;cursor:pointer}
body:not(#_) .csp-icon-btn:hover{background:var(--surface-3);color:var(--fg)}
body:not(#_) .csp-fab{box-sizing:border-box;display:inline-grid;place-items:center;width:var(--ctl-h-lg);height:var(--ctl-h-lg);padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--brand);box-shadow:var(--shadow-2);font-size:0;cursor:pointer}
body:not(#_) .csp-fab:hover{background:var(--brand-soft)}
body:not(#_) .csp-fab.bell{background:var(--surface)}
body:not(#_) :is(.erp-icon-btn,.csp-icon-btn,.csp-fab,.calendar-btn,.sh-toggle,.csp-linkbtn,.csp-mobile-search-btn) .ui-icon{width:var(--icon);height:var(--icon)}
body:not(#_) .csp-linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h-sm);padding:0 8px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--brand);font-size:var(--t-small);font-weight:600;text-decoration:none;cursor:pointer}
body:not(#_) .csp-linkbtn:hover{background:var(--brand-soft)}

/* ---- C. tabs: one underline style for every tab family (the page's own click handlers stay) */
body:not(#_) :is(.csp-tab,.mg-tab,.ui-tab,.cf-tab,.rw-tab,.l141-tab):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:var(--tab-h);padding:0 14px;border:0;border-block-end:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);
  font-family:var(--font);font-size:var(--t-body);font-weight:600;cursor:pointer}
body:not(#_) :is(.csp-tab,.mg-tab,.ui-tab,.cf-tab,.rw-tab,.l141-tab):hover{color:var(--fg)}
body:not(#_) :is(.csp-tab.active,.csp-tab.on,.mg-tab.on,.mg-tab.active,.ui-tab.on,.ui-tab.active,.cf-tab.on,.rw-tab.on,.l141-tab.is-on,.l141-tab.on,[role=tab][aria-selected=true]):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){color:var(--brand);border-block-end-color:var(--brand);background:transparent}

/* ---- D. fields: 40px, the control border (3:1), 8px radius, the kit's focus ring - every text field, select, textarea and the form system's controls */
body:not(#_) :is(main,.auth-card,.ui-panel,aside.csp-drawer) :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=submit],[type=button],[type=color],.native-date-picker),select,textarea):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.erp-search *)){
  box-sizing:border-box;min-height:var(--ctl-h);border:1px solid var(--control-line);border-radius:var(--r-ctl);background:var(--surface);color:var(--fg);font-family:var(--font);font-size:var(--t-body);padding-inline:12px}
body:not(#_) :is(main,.auth-card,.ui-panel) textarea:not(:where(.document-canvas *,.doc-sheet *,.document-panel *)){padding-block:8px;min-height:80px}
body:not(#_) :is(main,.auth-card,.ui-panel) :is(input,select,textarea):not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=submit],[type=button],[type=color],.native-date-picker):focus{outline:0;border-color:var(--brand);box-shadow:var(--focus-ring)}
body:not(#_) :is(main,.auth-card) :is(input,select,textarea):is(:disabled,[readonly]):not([type=checkbox],[type=radio],[type=file],[type=hidden],.native-date-picker){background:var(--surface-2);color:var(--muted)}
body:not(#_) :is(main,.auth-card) label:not(.cf-check,.cf-radio){font-family:var(--font)}
body:not(#_) .native-date-picker{font-family:var(--font)}

/* ---- E. status chips: static/ui/caspian-standard.css section 3 (V245) */

/* ---- F. cards and panels: one card - surface, 12px radius, line border, one soft shadow */
body:not(#_) :is(.card,.panel,.user-panel,.rg-panel,.v102-card,.cf-mode-card,.co-card,.rw-card-foot,.finance-control-card,.summary-card,.form-card,.role-card,.toggle-card):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--fg)}
body:not(#_) .user-panel{background:var(--surface-2);box-shadow:none}

/* ---- G. tables: static/ui/caspian-standard.css section 10 (V245) */

/* ---- H. banners and flash messages: token tones, an icon, the kit's radius and type */
body:not(#_) :is(.flash,.notice,.alert,.aix-callout,.release-banner,.cds-flash):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--info-soft);color:var(--fg);font-family:var(--font);font-size:var(--t-body)}
body:not(#_) :is(.flash,.notice,.alert,.aix-callout):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *))::before{content:"";flex:none;width:18px;height:18px;margin-block-start:1px;background:currentColor;-webkit-mask:url("icons/info.svg") center/contain no-repeat;mask:url("icons/info.svg") center/contain no-repeat;color:var(--info)}
body:not(#_) :is(.flash.success,.notice.success,.alert.success,.aix-callout.ok,.release-banner.ok){background:var(--ok-soft);border-color:transparent}
body:not(#_) :is(.flash.success,.notice.success,.alert.success,.aix-callout.ok)::before{color:var(--ok);-webkit-mask-image:url("icons/circle-check.svg");mask-image:url("icons/circle-check.svg")}
body:not(#_) :is(.flash.warning,.notice.warning,.alert.warning,.aix-callout.warn){background:var(--warn-soft);border-color:transparent}
body:not(#_) :is(.flash.warning,.notice.warning,.alert.warning,.aix-callout.warn)::before{color:var(--warn);-webkit-mask-image:url("icons/triangle-alert.svg");mask-image:url("icons/triangle-alert.svg")}
body:not(#_) :is(.flash.error,.flash.danger,.notice.critical,.notice.error,.alert.error,.release-banner.blocked){background:var(--bad-soft);border-color:transparent}
body:not(#_) :is(.flash.error,.flash.danger,.notice.critical,.notice.error,.alert.error)::before{color:var(--bad);-webkit-mask-image:url("icons/circle-alert.svg");mask-image:url("icons/circle-alert.svg")}

/* ---- I. the shell: the sidebar and top-bar icons are Lucide SVGs (ui.icon). V230 (owner 6/11/2026): every item wears its module colour - the icon sits in a 28px
   rounded tile (soft background, solid stroke); the active item has the soft background, bold text and a FILLED tile with a white icon; a dot in the module
   colour comes before each group label. The module of an item is its data-mod (v230_appearance.NAV, written by the nav_modules filter of base.html). */
body:not(#_) .sidebar nav .nav-ico{font-size:0;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--m-s);color:var(--m);transition:background var(--motion),color var(--motion)}
body:not(#_) .sidebar nav .nav-ico::before{display:none}
body:not(#_) .sidebar nav .nav-ico .ui-icon{width:17px;height:17px}
body:not(#_) .sidebar nav .shipment-nav-children .nav-ico{font-size:0;width:24px;height:24px;border-radius:7px}
body:not(#_) .sidebar nav .shipment-nav-children .nav-ico .ui-icon{width:15px;height:15px}
html:not(.nav-min) body:not(#_) .sidebar nav :is(a,summary){display:flex;align-items:center;gap:9px;padding:4px 8px;border-radius:8px;font-size:var(--t-small);color:var(--fg);text-decoration:none}
body:not(#_) .sidebar nav :is(a,summary):hover{background:color-mix(in srgb,var(--m-s) 55%,var(--surface))}
body:not(#_) .sidebar nav a:is(.active,[aria-current="page"]),body:not(#_) .sidebar nav .shipment-nav-group.active>summary{background:var(--m-s);color:var(--fg);font-weight:600;box-shadow:inset 3px 0 0 var(--m)}
html[dir=rtl] body:not(#_) .sidebar nav a:is(.active,[aria-current="page"]),html[dir=rtl] body:not(#_) .sidebar nav .shipment-nav-group.active>summary{box-shadow:inset -3px 0 0 var(--m)}
body:not(#_) .sidebar nav a:is(.active,[aria-current="page"]) .nav-ico,body:not(#_) .sidebar nav .shipment-nav-group.active>summary .nav-ico{background:var(--m);color:var(--on-dark)}
body:not(#_) .sidebar nav .nav-label{display:flex;align-items:center;gap:6px}
body:not(#_) .sidebar nav .nav-label::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--m)}
html.nav-min body:not(#_) .sidebar nav .nav-label::before{display:none}
body:not(#_) .erp-search > span .ui-icon{width:18px;height:18px}
body:not(#_) .mobile-head button .ui-icon{width:22px;height:22px}

/* active filter / stage chips: the brand tone, never a dark fill */
body:not(#_) :is(.container-risk-badge.warn){background:var(--warn-soft);color:var(--warn)}
body:not(#_) :is(.container-risk-badge.ok){background:var(--ok-soft);color:var(--ok)}
body:not(#_) :is(.container-risk-badge.bad,.container-risk-badge.critical){background:var(--bad-soft);color:var(--bad)}

/* ---- J. link buttons (inline text actions: "show all", "show empty fields", a name that opens a record) and icon-only buttons of the form system */
body:not(#_) :is(.linkbtn,.aix-linkbtn,.ui-clip-b,.cf-link,.link-btn):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  display:inline;min-height:0;height:auto;padding:0;border:0;border-radius:4px;background:transparent;color:var(--brand);font-family:var(--font);font-size:inherit;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:none}
body:not(#_) :is(.linkbtn,.aix-linkbtn,.ui-clip-b,.cf-link,.link-btn):hover{text-decoration:underline;background:transparent}
body:not(#_) .cf-icon-btn{box-sizing:border-box;display:inline-grid;place-items:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);min-height:0;padding:0;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--muted);cursor:pointer}
body:not(#_) .cf-icon-btn:hover{background:var(--surface-3);color:var(--fg)}
body:not(#_) .cf-icon-btn.danger:hover{background:var(--bad-soft);color:var(--bad)}

/* ---- K. chip buttons (a filter you press): a pill that is a button; the pressed one takes the brand tone, never a dark fill */
body:not(#_) :is(.obx-chip):is(button,a):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h-sm);padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);
  font-family:var(--font);font-size:var(--t-small);font-weight:600;cursor:pointer;text-decoration:none}
body:not(#_) :is(.obx-chip):is(button,a):hover{background:var(--surface-2);color:var(--fg)}
body:not(#_) :is(.obx-chip.on,.obx-chip.active,.obx-chip[aria-pressed=true]):is(button,a){background:var(--brand-soft);border-color:transparent;color:var(--brand)}
body:not(#_) .obx-tile{border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);font-family:var(--font)}
body:not(#_) .obx-tile.need{background:var(--warn-soft);border-color:transparent}

/* L. Unstyled links and the bare brand-hover blues follow the tokens */
body:not(#_) main a:not([class]), body:not(#_) main a:not([class]) bdi, body:not(#_) main a:not([class]) strong { color: var(--brand); }
body:not(#_) main a:not([class]):hover { color: var(--brand-hover); }

/* M. Remaining one-offs: chip with a checkbox keeps its inner layout, only the shape follows the kit; small add button */
body:not(#_) .currency-chip { border-radius: 999px; }
body:not(#_) .mini-add { min-height: var(--ctl-h-sm); border-radius: var(--r-ctl); }
body:not(#_) .ui-density .btn { height: var(--ctl-h-sm); min-height: 0; padding-block: 0; }

/* N. Hidden stays hidden: the compat display rules must never beat [hidden] or a page's own is-hidden */
body:not(#_) [hidden] { display: none !important; }
body:not(#_) .rw-root.jw .is-hidden { display: none !important; }
@media (max-width: 800px) { body:not(#_) .sh-toggle { display: none; } }

/* ==================================================================================================================================================
   O. INPUT GROUPS (owner 5/11/2026, regression of the unification): where the WRAPPER is the visual field (own border, background, an icon / ok mark /
   unit beside the control), the wrapper carries the kit's field box - min-height var(--ctl-h) (never a fixed height), kit border, radius, background and
   focus ring through :focus-within - and the control inside is borderless, transparent and as tall as the wrapper. Section D (a 40px bordered control)
   no longer reaches a control that sits inside one of these wrappers, so the control can neither overflow the box nor draw a second one.
   Families (every wrapper found by tools/ui-inventory/journeys/kit_fields_guard.py): .wk-in (+ .wk-sel .wk-portin, the AI Inbox case workspace: shipment /
   Master / House B/L fields, review rows), .wk-sel-s (the small select of a table cell), .rpt-search (Reports library search).
   ================================================================================================================================================== */
body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search):not(:where(.document-canvas *, .doc-sheet *, .document-panel *, .print-sheet *)) {
  box-sizing: border-box; height: auto; min-height: var(--ctl-h); display: flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--control-line); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg);
  font-family: var(--font); font-size: var(--t-body); padding-block: 0; padding-inline: 12px;
}
body:not(#_) .wk-sel-s { min-height: var(--ctl-h-sm); padding-inline: 8px; }
html body:not(#_) .wk-sel-s > :is(input, select, textarea):not([type=hidden], [type=checkbox], [type=radio]):not([type=file]) { min-height: calc(var(--ctl-h-sm) - 2px); }
body:not(#_) .wk-sel:not(.wk-sel-s) { padding-inline-end: 32px; }
body:not(#_) .wk-sel.wk-sel-s { padding-inline-end: 26px; }          /* the small select keeps its narrow room: the arrow icon only */
body:not(#_) .wk-alw .wk-sel-s { padding-inline: 6px 24px; gap: 2px; }
body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search):focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search):has(> :is(input, select, textarea):is(:disabled, [readonly])) { background: var(--surface-2); color: var(--muted); }
html body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search) > :is(input, select, textarea):not([type=hidden], [type=checkbox], [type=radio]):not([type=file]) {
  box-sizing: border-box; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; height: auto; min-height: calc(var(--ctl-h) - 2px); align-self: center; line-height: 1.4;
  flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 0; font: inherit; color: inherit;
}
html body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search) > :is(input, select, textarea):not([type=hidden], [type=checkbox], [type=radio]):not([type=file]):is(:focus, :disabled, [readonly]) {
  border: 0; box-shadow: none; background: transparent;
}
html body:not(#_) :is(.wk-in, .wk-sel-s, .rpt-search) > :is(input, select):not([type=hidden], [type=checkbox], [type=radio]):not([type=file]):is(:disabled, [readonly]) { color: var(--muted); }
/* the states the workspace paints on the wrapper keep painting it (they sit on the wrapper, not on the control) */
body:not(#_) .wk-f.is-dirty .wk-in { border-color: var(--brand); background: var(--brand-soft); }
body:not(#_) .wk-f.is-err .wk-in { border-color: var(--bad); background: var(--bad-soft); }
body:not(#_) .wk-rv-in .wk-in:not(:focus-within) { border-color: var(--control-line); background: var(--surface); }
/* a caption / helper line under a field starts BELOW the field's box, one kit step down (the wrapper is as tall as the control now) */
body:not(#_) :is(.wk-in, .wk-sel-s) ~ :is(small, p, .wk-pai, .wk-fai, .wk-note, .wk-hint) { margin-block-start: var(--s1); }

/* P. BARS: a filter / search bar is a row of fields on the page, not a second box around them - the controls draw the boxes (no double border).
   Families: .ui-fb (the kit FilterBar, bookings, quotations, the registers), .rg-filters, .toolbar, .filter-bar, .mg-filters, .obx-fbar, .l141-upload,
   .finance-advanced (the folded "Advanced details" of finance: its tint stays, its outline goes). */
body:not(#_) :is(.ui-fb, .rg-filters, .toolbar, .filter-bar, .mg-filters, .obx-fbar, .l141-upload):has(:is(input, select, textarea):not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button])):not(:where(.document-canvas *, .doc-sheet *, .print-sheet *)) {
  border: 0; box-shadow: none; background: transparent; padding-inline: 0; border-radius: 0;
}
body:not(#_) .finance-advanced { border: 0; box-shadow: none; }

/* Q. AI INBOX CASE WORKSPACE: exactly ONE primary button at a time - the next step of the state the case is in. "Mark as reviewed" until the case is reviewed, then
   "Approve and create the records"; "Save draft" and every other .wk-primary is a secondary button. Style only: what a button does, and when it is enabled,
   is the page's own (the script toggles disabled / aria-disabled / is-locked / is-on exactly as before). */
body:not(#_) .wk-primary, body:not(#_) .wk-mark, body:not(#_) .wk-cust-new {
  min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); box-sizing: border-box; font-size: var(--t-small); font-weight: 600;
  background: var(--surface); color: var(--brand); border: 1px solid var(--control-line);
}
/* a register button may carry a long party name: it wraps, the box grows (the page's own rule for that cell) */
body:not(#_) .wk-cust-new { height: auto; min-height: 26px; padding-block: 3px; white-space: normal; }
body:not(#_) .wk-primary:not(:disabled, [aria-disabled=true]):hover { background: var(--brand-soft); }
body:not(#_) .wk-primary:disabled { color: var(--faint); background: var(--surface-2); cursor: not-allowed; }
body:not(#_) #wkMark:not(.is-on):not(:disabled), body:not(#_):has(#wkMark.is-on) #wbApprove:not(.is-locked) {
  background: var(--brand); color: var(--brand-fg); border-color: var(--brand); font-weight: 700;
}
body:not(#_) #wkMark:not(.is-on):not(:disabled):hover, body:not(#_):has(#wkMark.is-on) #wbApprove:not(.is-locked):hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* reviewed is a state, not an action: a quiet success (warning when something is still open) */
body:not(#_) .wk-mark.is-on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
body:not(#_) .wk-mark.is-on.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
/* approval that is locked (blockers open) keeps the role of its state and says it is not available */
body:not(#_) #wbApprove.is-locked { opacity: .6; cursor: not-allowed; background: var(--surface-2); color: var(--muted); border-color: var(--control-line); }
body:not(#_):has(#wkMark.is-on) #wbApprove.is-locked { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); opacity: .5; }
/* an inline form of bare controls (an input and its button: "Reason for reversal" + Reverse) is a flex row; the 12-column grid of the older ops sheet gave the
   160px input a one-twelfth cell and the button sat on top of it */
body:not(#_) .inline-form:not(:has(.field)) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* R. <small> with no size of its own: the browser default ("smaller") made 10.8px; the floor of the type scale instead (zero specificity: every sheet's own size still wins) */
:where(body small) { font-size: var(--t-micro); }

/* S. the way into the record-builder view of the case page: a visible strip above the case header */
body:not(#_) .wk-tryview { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
body:not(#_) .wk-tryview a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--ctl-h-sm); padding-inline: var(--s3); border: 1px solid var(--brand); border-radius: var(--r-ctl); background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: var(--t-small); text-decoration: none; }
body:not(#_) .wk-tryview a:hover { background: var(--brand); color: var(--brand-fg); }
body:not(#_) .wk-tryview .wk-i { width: 16px; height: 16px; }
html[dir=rtl] .wk-tryview .wk-i:last-child { transform: scaleX(-1); }

/* ==================================================================================================================
   V230 MODULE COLOURS (owner 6/11/2026): the older components take the same colours from the same tokens.
   ================================================================================================================== */
/* ---- section cards: a 3px line in the page's module colour on the card header (the kit's .ui-card-h has it in caspian-ui.css) */
body:not(#_) :is(.cds-card-head,.mg-card-head,.rw-card-head,.do-card-head,.dco-card-h,.wk-ch){box-shadow:inset 0 3px 0 var(--m)}
body:not(#_) :is(.cds-card-head,.mg-card-head,.rw-card-head,.do-card-head,.dco-card-h,.wk-ch) > :is(.ui-icon,.cds-i,.mg-i,.wk-i){color:var(--m-ink)}

/* ---- KPI / summary cards of the older pages (register strips, the dashboard cards): a 3px top edge and an icon tile in the colour of their MEANING, a soft shadow and a 1px lift on hover */
body:not(#_) :is(.mg-kpi,.rg-kpi,.cds-kpi){--k:var(--info);--k-s:var(--info-soft)}
body:not(#_) .cds-kpi{box-shadow:inset 0 3px 0 var(--k);transition:box-shadow var(--motion),transform var(--motion),background var(--motion)}
body:not(#_) :is(.mg-kpi,.rg-kpi,.cds-kpi):is(.t-crit,.t-bad,.tone-bad,.tone-crit,.tone-danger){--k:var(--bad);--k-s:var(--bad-soft)}
body:not(#_) :is(.mg-kpi,.rg-kpi,.cds-kpi):is(.t-warn,.tone-warn,.tone-warning){--k:var(--warn);--k-s:var(--warn-soft)}
body:not(#_) :is(.mg-kpi,.rg-kpi,.cds-kpi):is(.t-good,.t-ok,.tone-ok,.tone-good,.tone-success){--k:var(--ok);--k-s:var(--ok-soft)}
body:not(#_) :is(.mg-kpi,.rg-kpi,.cds-kpi):is(.t-info,.t-brand,.tone-info){--k:var(--info);--k-s:var(--info-soft)}
body:not(#_) .cds-kpi:hover{position:relative;z-index:1;box-shadow:inset 0 3px 0 var(--k),var(--shadow-lift);transform:translateY(-1px)}
body:not(#_) .mg-kpi .ico{width:30px;height:30px;border-radius:9px;background:var(--k-s) !important;color:var(--k)}
body:not(#_) .mg-kpi .ico .mg-i{width:16px;height:16px}


/* ==================================================================================================================
   V230 phase 2: the SUMMARY STRIPS of the registers and dashboards are KPI cards - an icon tile and a 3px top edge in the colour of their meaning
   (t-crit / t-warn / t-good / default info), a soft shadow and a 1px lift on hover. The markup of the pages does not change: the tile is drawn by the strip's own
   ::before (soft background) and ::after (the Lucide icon of the meaning, masked in the meaning colour).
   ================================================================================================================== */
body:not(#_) .rg-root .rg-kpis{gap:12px;margin-bottom:16px;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
body:not(#_) .rg-root .rg-kpi{--k:var(--info);--k-s:var(--info-soft);position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-content:center;align-items:center;min-height:64px;padding:12px 14px;
  border:1px solid var(--line);border-top:3px solid var(--k);border-radius:11px;background:var(--surface);box-shadow:none;transition:box-shadow var(--motion),transform var(--motion)}
body:not(#_) .rg-root .rg-kpi:is(.t-crit,.t-bad){--k:var(--bad);--k-s:var(--bad-soft)}
body:not(#_) .rg-root .rg-kpi:is(.t-warn){--k:var(--warn);--k-s:var(--warn-soft)}
body:not(#_) .rg-root .rg-kpi:is(.t-good,.t-ok){--k:var(--ok);--k-s:var(--ok-soft)}
body:not(#_) .rg-root .rg-kpi::before{content:"";grid-column:1;grid-row:1 / span 3;width:38px;height:38px;border-radius:10px;background:var(--k-s)}
body:not(#_) .rg-root .rg-kpi::after{content:"";display:block;position:absolute;inset-block-start:50%;inset-inline-start:23px;width:20px;height:20px;margin-block-start:-10px;background:var(--k);
  -webkit-mask:url("icons/info.svg") center/contain no-repeat;mask:url("icons/info.svg") center/contain no-repeat}
body:not(#_) .rg-root .rg-kpi:is(.t-crit,.t-bad)::after{-webkit-mask-image:url("icons/triangle-alert.svg");mask-image:url("icons/triangle-alert.svg")}
body:not(#_) .rg-root .rg-kpi:is(.t-warn)::after{-webkit-mask-image:url("icons/hourglass.svg");mask-image:url("icons/hourglass.svg")}
body:not(#_) .rg-root .rg-kpi:is(.t-good,.t-ok)::after{-webkit-mask-image:url("icons/circle-check.svg");mask-image:url("icons/circle-check.svg")}
body:not(#_) .rg-root .rg-kpi > :not(.v):not(.l){grid-column:2}
body:not(#_) .rg-root .rg-kpi .v{grid-column:2;grid-row:1;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.2;color:var(--fg)}
body:not(#_) .rg-root .rg-kpi .l{grid-column:2;grid-row:2;min-width:0;font-size:var(--t-micro);color:var(--muted);white-space:normal;overflow:visible;text-overflow:clip}
body:not(#_) .rg-root .rg-kpi:is(.t-crit,.t-bad) .v{color:var(--bad)}
body:not(#_) .rg-root .rg-kpi:is(.t-warn) .v{color:var(--warn)}
body:not(#_) .rg-root .rg-kpi .v[data-zero]{color:var(--faint)}
body:not(#_) .rg-root a.rg-kpi:hover,body:not(#_) .rg-root .rg-kpi:hover{background:var(--surface);box-shadow:var(--shadow-lift);transform:translateY(-1px);text-decoration:none}
body:not(#_) .rg-root a.rg-kpi.on{background:var(--k-s);border-color:var(--k)}
body:not(#_) .rg-root .rg-kpi:first-child,body:not(#_) .rg-root .rg-kpi:nth-child(n){border-inline-start:1px solid var(--line)}
/* the dashboard / manager strips (the icon is in the markup) */
body:not(#_) .mgr-root .mg-kpis{gap:12px;margin-bottom:16px;background:none;border:0;border-radius:0;overflow:visible}
body:not(#_) .mgr-root .mg-kpi{border:1px solid var(--line);border-top:3px solid var(--k);border-radius:11px;background:var(--surface);box-shadow:none;border-inline-start-width:1px;min-height:0}
body:not(#_) .mgr-root .mg-kpi:first-child{border-inline-start-width:1px}
body:not(#_) .mgr-root .mg-kpi.t-good,body:not(#_) .mgr-root .mg-kpi.t-brand{--k:var(--ok);--k-s:var(--ok-soft)}
body:not(#_) .mgr-root .mg-kpi.t-brand{--k:var(--info);--k-s:var(--info-soft)}
body:not(#_) .mgr-root .mg-kpi:hover{background:var(--surface)}
/* a wide table scrolls inside its own card (the v44 pages overflowed the window at 1024px) */
body:not(#_) .customer-card{min-width:0}
body:not(#_) .v44-table{max-width:100%;overflow-x:auto}
/* the Documents Center summary tiles (buttons that filter the board): the same KPI card */
body:not(#_) .obx .obx-tile{--k:var(--info);--k-s:var(--info-soft);position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:center;align-content:center;text-align:start;min-height:64px;padding:12px 14px;
  border:1px solid var(--line);border-top:3px solid var(--k);border-radius:11px;background:var(--surface);box-shadow:none;transition:box-shadow var(--motion),transform var(--motion)}
body:not(#_) .obx .obx-tile.need{--k:var(--warn);--k-s:var(--warn-soft)}
body:not(#_) .obx .obx-tile.done{--k:var(--ok);--k-s:var(--ok-soft)}
body:not(#_) .obx .obx-tile::before{content:"";grid-column:1;grid-row:1 / span 3;width:38px;height:38px;border-radius:10px;background:var(--k-s)}
body:not(#_) .obx .obx-tile::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:23px;width:20px;height:20px;margin-block-start:-10px;background:var(--k);-webkit-mask:url("icons/info.svg") center/contain no-repeat;mask:url("icons/info.svg") center/contain no-repeat}
body:not(#_) .obx .obx-tile.need::after{-webkit-mask-image:url("icons/hourglass.svg");mask-image:url("icons/hourglass.svg")}
body:not(#_) .obx .obx-tile.done::after{-webkit-mask-image:url("icons/circle-check.svg");mask-image:url("icons/circle-check.svg")}
body:not(#_) .obx .obx-tile>b{grid-column:2;grid-row:1;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.2}
body:not(#_) .obx .obx-tile>span{grid-column:2;grid-row:2}
body:not(#_) .obx .obx-tile>small{grid-column:2;grid-row:3}
body:not(#_) .obx .obx-tile>:is(b,span,small){justify-self:start;text-align:start;margin:0}
body:not(#_) .obx .obx-tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
body:not(#_) .obx .obx-tile[aria-pressed="true"]{background:var(--k-s);border-color:var(--k)}

/* ---- Finance: the hub tiles, the control cards and the v44 money cards are KPI cards (tile + tone edge + lift); the tone and the icon of a hub tile follow its destination */
body:not(#_) :is(.fin-section,.finance-control-card,.v44-kpi){--k:var(--info);--k-s:var(--info-soft);position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-content:center;align-items:center;min-height:64px;padding:12px 14px;
  border:1px solid var(--line);border-top:3px solid var(--k);border-radius:11px;background:var(--surface);box-shadow:none;color:inherit;text-decoration:none;transition:box-shadow var(--motion),transform var(--motion)}
body:not(#_) :is(.fin-section,.finance-control-card,.v44-kpi)::before{content:"";grid-column:1;grid-row:1 / span 4;width:38px;height:38px;border-radius:10px;background:var(--k-s)}
body:not(#_) :is(.fin-section,.finance-control-card,.v44-kpi)::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:23px;width:20px;height:20px;margin-block-start:-10px;background:var(--k);-webkit-mask:url("icons/info.svg") center/contain no-repeat;mask:url("icons/info.svg") center/contain no-repeat}
body:not(#_) :is(.fin-section,.finance-control-card,.v44-kpi) > *{grid-column:2;margin:0}
body:not(#_) :is(.fin-section,.finance-control-card,.v44-kpi):hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
body:not(#_) .finance-control-card > b,body:not(#_) .v44-kpi > strong{grid-row:1;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.2}
body:not(#_) .v44-kpi[data-direction="RECEIPT"]{--k:var(--ok);--k-s:var(--ok-soft)}
body:not(#_) .v44-kpi[data-direction="RECEIPT"]::after{-webkit-mask-image:url("icons/arrow-down-left.svg");mask-image:url("icons/arrow-down-left.svg")}
body:not(#_) .v44-kpi[data-direction="PAYMENT"]{--k:var(--warn);--k-s:var(--warn-soft)}
body:not(#_) .v44-kpi[data-direction="PAYMENT"]::after{-webkit-mask-image:url("icons/arrow-up-right.svg");mask-image:url("icons/arrow-up-right.svg")}
body:not(#_) .v44-kpi:not([data-direction])::after{-webkit-mask-image:url("icons/wallet.svg");mask-image:url("icons/wallet.svg")}
body:not(#_) .v44-kpi > strong{order:-1}
body:not(#_) .customer-card-title{box-shadow:inset 0 3px 0 var(--m)}


/* =====================================================================================================================================================
   V235 (owner 7/11) SYSTEM-WIDE FORM CONTROL SIZES - the ONE place (tokens.css gives the heights, this file gives the widths).
   a) heights: inputs, selects and buttons 28px in a form, 26px inside a table; only the page's main primary button (header or sticky save bar) 32px;
      a textarea is 2 rows (52px) and grows on focus.
   b) width follows the content, never the container: a text input or select with no size class is at most 360px, a search box at most 420px;
      .fw-xs 80 (qty, currency, days) | .fw-sm 140 (dates, codes, numbers, B/L no., container no.) | .fw-md 240 (names, ports, selects, one search) |
      .fw-lg 360 (addresses, e-mails) | .fw-full ONLY for descriptions, notes and remarks. Dates and numbers are .fw-sm by their type.
   c) an inline "register a new company" form is ONE line (name EN | name AR | Register | Cancel) on a light row.
   The Playwright guard (tools/ui-inventory/journeys/kit_fields_guard.py, kinds D and E) fails on a control taller than 32px or an input / select wider than 480px without .fw-full.
   ===================================================================================================================================================== */
html body:not(#_) :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=range],[type=color],[type=image],[type=submit],[type=button],[type=reset]),select):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  box-sizing:border-box;height:var(--ctl-h);min-height:var(--ctl-h);padding-block:0;max-width:360px}
html body:not(#_) input[type=search]:not(:where(.document-canvas *)),html body:not(#_) :is(.rg-search,.ui-fb-search,.obx-srch) input{max-width:420px}
html body:not(#_) :is(input.date-entry,input[type=date],input[type=number],input[type=time]){width:min(140px,100%)}
html body:not(#_) .fw-xs{width:min(80px,100%);max-width:100%}
html body:not(#_) .fw-sm{width:min(140px,100%);max-width:100%}
html body:not(#_) .fw-md{width:min(240px,100%);max-width:100%}
html body:not(#_) .fw-lg{width:min(360px,100%);max-width:100%}
html body:not(#_) .fw-full{width:100%;max-width:none}
html body:not(#_) .mobile-head button{height:var(--ctl-h-lg);min-height:0;padding-block:0}   /* the tablet menu button was 35px (guard D, kit_fields_guard ar 768) */
html body:not(#_) :is(table,[role=table],.rg-table,.rw-table,.ui-table) :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=range]),select,button:not(.rg-toggle),.btn,.cf-btn,.rw-btn){height:var(--ctl-h-sm);min-height:var(--ctl-h-sm)}
html body:not(#_) textarea:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.fw-tall)){min-height:52px;height:52px;padding-block:6px;resize:vertical;transition:height .12s ease}
html body:not(#_) textarea:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.fw-tall)):focus{height:96px}
html body:not(#_) :is(.btn:not(.secondary,.soft,.quiet,.ghost,.small),.btn.primary,.btn-primary,.rw-btn.primary,.cf-btn.primary,.wk-primary):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){min-height:var(--ctl-h-lg)}
/* the inline create form of a company / customer / agent: one line on a light row */
html body:not(#_) .wk-cust-form,html body:not(#_) tr.wk-cust-er .wk-cust-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 10px;margin:0;max-width:none;border:0;border-radius:var(--r-ctl);background:var(--brand-soft);min-width:0}
html body:not(#_) .wk-cust-form label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:var(--t-micro);color:var(--muted)}
html body:not(#_) .wk-cust-form input{width:240px;max-width:100%}
html body:not(#_) .wk-cust-form .wk-cust-fa{display:inline-flex;gap:6px}
html body:not(#_) .wk-cust-form :is(.wk-primary,.wk-outline){height:var(--ctl-h);min-height:var(--ctl-h);padding-block:0}
html body:not(#_) .wk-cust-form .wk-cust-err{flex:1 1 100%;margin:0}