/* ==========================================================================
   LYR Workspace — ENTERPRISE LAYER  (the one look for every screen)
   --------------------------------------------------------------------------
   Loaded LAST on every page (after style.css, ui-system.css, the per-tool
   sheets and responsive.css). It is the single place that decides what the
   product *looks like*; the per-tool sheets keep deciding what goes *where*.

   What it does, in one sentence: one typeface, one palette, flat bordered
   surfaces, one control size, one table style, one page header — and no
   mascot, no hazard stripes, no soft-UI glow, no mono/caps labels.

   Specificity: older sheets stamp !important everywhere (neumorphic pass,
   density pass). `:not(#_)` below adds ID-level specificity (it is always
   true — no element has id="_"), so these rules win on weight AND order
   without having to chase every selector chain.

   To retheme the whole suite, change the tokens in :root below. Nothing
   else should hold colour, radius or font values.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* One family. Numerics use tabular figures instead of a monospace face. */
  --font-display: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Palette */
  --e-bg:        #f3f5f8;   /* page floor */
  --e-surface:   #ffffff;   /* panels, cards, tables */
  --e-surface-2: #f7f8fa;   /* table header, toolbars, hover */
  --e-border:    #d8dde5;   /* default hairline */
  --e-border-hi: #bcc4d0;   /* inputs, emphasised edges */
  --e-text:      #172033;
  --e-text-2:    #4a5568;
  --e-text-3:    #667085;
  --e-accent:    #1a4fa0;
  --e-accent-hi: #123b7d;
  --e-accent-bg: #e8effa;
  --e-danger:    #b42318;
  --e-danger-bg: #fdecea;
  --e-ok:        #17703e;
  --e-ok-bg:     #e6f4ec;
  --e-warn:      #9a5b00;
  --e-warn-bg:   #fdf1dc;

  /* Shape + elevation: flat. Shadow is reserved for things that float. */
  --e-radius:    6px;
  --e-radius-sm: 4px;
  --e-float:     0 8px 24px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);

  /* Control + type scale */
  --e-ctl-h:     30px;
  --e-fs:        11px;
  --e-fs-sm:     10px;
  --e-fs-title:  13px;

  /* Re-point the older token systems at this one. */
  --neu-bg:      var(--e-bg);
  --neu-light:   var(--e-surface);
  --neu-dark:    rgba(16, 24, 40, .06);
  --neu-edge:    var(--e-border);
  --neu-ink:     var(--e-text);
  --neu-blue:    var(--e-accent);
  --neu-radius-lg: var(--e-radius);
  --neu-radius:    var(--e-radius);
  --neu-radius-sm: var(--e-radius-sm);
  /* zero-size transparent shadows (not `none`) so compound values such as
     `var(--neu-inset-sm), 0 0 0 2px var(--accent)` stay valid. */
  --neu-raised:        0 0 0 0 transparent;
  --neu-raised-sm:     0 0 0 0 transparent;
  --neu-inset:         0 0 0 0 transparent;
  --neu-inset-sm:      0 0 0 0 transparent;
  --neu-accent-raised: 0 0 0 0 transparent;
  --neu-accent-inset:  0 0 0 0 transparent;

  --bg: var(--e-bg);  --surface: var(--e-surface);  --surface-2: var(--e-surface-2);
  --border: var(--e-border);  --border-hi: var(--e-border-hi);
  --text: var(--e-text);  --text-dim: var(--e-text-2);  --text-mute: var(--e-text-3);
  --accent: var(--e-accent);  --accent-hi: var(--e-accent-hi);
  --brand-blue: var(--e-accent);
  --err: var(--e-danger);  --ok: var(--e-ok);  --warn: var(--e-warn);
  --hazard: var(--e-danger);
  --radius: var(--e-radius);  --radius-sm: var(--e-radius-sm);
  --shadow-1: 0 0 0 0 transparent;  --shadow-2: 0 0 0 0 transparent;  --shadow-3: var(--e-float);

  /* density tokens read by ui-system.css */
  --ui-radius:   var(--e-radius-sm);
  --ui-ctl-h:    var(--e-ctl-h);
  --ui-input-h:  var(--e-ctl-h);
  --ui-font:     var(--e-fs);
  --ui-font-sm:  var(--e-fs-sm);
  --ui-font-head: var(--e-fs-sm);
  --ui-font-title: var(--e-fs-title);
  --ui-row-h:    30px;
  --ui-head-h:   30px;
  --ui-grid-line: #e3e7ed;
  --ui-zebra:    transparent;
  --ui-hover:    #eef4fd;
  --ui-sel:      #dfeafb;

  /* The fixed header (title + tabs + primary action) is one height everywhere. */
  --header-h: 44px;
}

/* -------------------------------------------------------------------------
   2. TYPE — one family, sentence case, no tracking
   ------------------------------------------------------------------------- */
html, body { background: var(--e-bg) !important; color: var(--e-text); }
body, button, input, select, textarea {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
}
body :not(#_):not(svg):not(path) {
  text-transform: none !important;
  letter-spacing: normal !important;
}
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace !important; }
h1, h2, h3, h4 { font-family: var(--font-display) !important; color: var(--e-text); font-weight: 600; }

/* -------------------------------------------------------------------------
   3. SURFACES — flat, white, hairline border
   ------------------------------------------------------------------------- */
.card:not(#_), .panel:not(#_), .po-card:not(#_), .app-card:not(#_), .app-card-expand:not(#_),
.app-card-options:not(#_), .rail:not(#_), .rail-card:not(#_), .review-card:not(#_),
.review-map-row:not(#_), .results-dock:not(#_), .results-strip:not(#_),
.result-download-panel:not(#_), .progress-panel:not(#_), .auth-shell:not(#_),
.acct-item:not(#_), .month-countdown:not(#_), .merge-sample:not(#_), .hint-banner:not(#_),
.log:not(#_), .perm-grid:not(#_), .field:not(#_), .dropzone:not(#_),
.target-field-card:not(#_), .uploaded-row:not(#_), .supplier-row:not(#_),
.table-scroll:not(#_), .tab-bar:not(#_), .admin-grid:not(#_), .login-card:not(#_),
.home-dash-card:not(#_) {
  background: var(--e-surface) !important;
  border: 1px solid var(--e-border) !important;
  box-shadow: none !important;
  border-radius: var(--e-radius) !important;
}
.dropzone:not(#_) { border-style: dashed !important; border-color: var(--e-border-hi) !important; background: var(--e-surface-2) !important; }
.dropzone:not(#_):hover, .dropzone.is-over:not(#_), .dropzone.dragover:not(#_) { border-color: var(--e-accent) !important; background: var(--e-accent-bg) !important; }

/* Things that float keep a shadow — it tells you they are above the page. */
.summary-modal-panel:not(#_), .toast-card:not(#_), .po-modal:not(#_), [role="dialog"]:not(#_),
.app-side-menu:not(#_), #homeSettingsMenu:not(#_), [role="menu"]:not(#_) {
  background: var(--e-surface) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: var(--e-radius) !important;
  box-shadow: var(--e-float) !important;
}

/* -------------------------------------------------------------------------
   4. CONTROLS — one height, one radius, one focus ring
   ------------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.home-search-input):not(#_),
select:not(#_), textarea:not(#_) {
  background: var(--e-surface) !important;
  border: 1px solid var(--e-border-hi) !important;
  border-radius: var(--e-radius-sm) !important;
  box-shadow: none !important;
  color: var(--e-text);
  font-size: var(--e-fs) !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.home-search-input):not(#_),
select:not(#_) { height: var(--e-ctl-h); }
input:not(#_):focus, select:not(#_):focus, textarea:not(#_):focus {
  border-color: var(--e-accent) !important;
  box-shadow: 0 0 0 3px rgba(26, 79, 160, .18) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--e-text-3); opacity: 1; }
input:disabled:not(#_), select:disabled:not(#_), textarea:disabled:not(#_) { background: var(--e-surface-2) !important; color: var(--e-text-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--e-accent); }

/* Buttons: same chain the density pass uses, so the same buttons are caught
   and the custom ones it deliberately skips (calendar cells, icon buttons,
   modal close, strip chips...) are left alone. */
button:not(.po-strip-chip):not(.po-modal-save):not(.po-modal-close):not(.mini-btn):not(.login-form-btn):not(.role-picker-btn):not(.login-pw-toggle):not(.app-nav-item):not(.app-side-sub-toggle):not(.po-seg-btn):not(.po-linkbtn):not(.po-flash-x):not(.po-modal-submit):not(.tk-checklist-rm):not(.home-dash-card-refresh):not(.zone-task-delete):not(.remove-row-btn):not(.icon-bare):not([class*="app-side"]):not([class*="tk-"]):not(.btn-icon):not(.home-icon-btn):not(.summary-nav-btn):not([class*="nb-"]):not(#_),
.mini-btn:not(#_), .po-modal-save:not(#_), .po-modal-submit:not(#_), .po-seg-btn:not(#_),
.login-form-btn:not(#_), .role-picker-btn:not(#_), .confirm-btn:not(#_), .rr-btn:not(#_) {
  font-family: var(--font-body) !important;
  font-size: var(--e-fs) !important;
  font-weight: 500 !important;
  background: var(--e-surface) !important;
  color: var(--e-text) !important;
  border: 1px solid var(--e-border-hi) !important;
  border-radius: var(--e-radius-sm) !important;
  box-shadow: none !important;
  background-image: none !important;
}
button:hover:not(:disabled):not(#_), .mini-btn:hover:not(:disabled):not(#_) { background: var(--e-surface-2) !important; border-color: #9aa4b2 !important; }

/* primary */
button.primary:not(#_), .po-btn-generate:not(#_), .po-modal-save:not(#_), .po-modal-submit:not(#_),
.login-form-btn:not(#_), .role-picker-btn:not(#_), .confirm-btn:not(#_), .rr-btn:not(#_) {
  background: var(--e-accent) !important;
  border-color: var(--e-accent) !important;
  color: #fff !important;
}
button.primary:hover:not(:disabled):not(#_), .po-btn-generate:hover:not(:disabled):not(#_),
.po-modal-save:hover:not(:disabled):not(#_), .po-modal-submit:hover:not(:disabled):not(#_),
.login-form-btn:hover:not(:disabled):not(#_), .role-picker-btn:hover:not(:disabled):not(#_),
.confirm-btn:hover:not(:disabled):not(#_), .rr-btn:hover:not(:disabled):not(#_) {
  background: var(--e-accent-hi) !important; border-color: var(--e-accent-hi) !important;
}
/* destructive */
button.danger:not(#_), .mini-btn-danger:not(#_) {
  background: var(--e-surface) !important; color: var(--e-danger) !important; border-color: #e2a6a2 !important;
}
button.danger:hover:not(:disabled):not(#_), .mini-btn-danger:hover:not(:disabled):not(#_) { background: var(--e-danger-bg) !important; border-color: var(--e-danger) !important; }
button:disabled:not(#_) { opacity: .5; cursor: not-allowed; }
button:focus-visible:not(#_), a:focus-visible:not(#_) { outline: 2px solid var(--e-accent) !important; outline-offset: 2px; }

a { color: var(--e-accent); }

/* -------------------------------------------------------------------------
   5. TABLES — one grammar: light header, 32px rows, hairlines
   ------------------------------------------------------------------------- */
table:not(.po-grid) thead th:not(#_), .po-grid thead th:not(#_), .rd-table thead th:last-child:not(#_) {
  background: var(--e-surface-2) !important;
  color: var(--e-text-2) !important;
  font-family: var(--font-body) !important;
  font-size: var(--e-fs-sm) !important;
  font-weight: 600 !important;
  height: var(--e-ctl-h);
  border: none !important;
  border-bottom: 1px solid var(--e-border-hi) !important;
  border-right: 1px solid var(--e-border) !important;
  box-shadow: none !important;
}
table:not(.po-grid) thead th[data-sort]:hover:not(#_) { background: #eaeef4 !important; }
table:not(.po-grid) tbody td:not(#_), .po-grid tbody td:not(#_) {
  font-size: var(--e-fs) !important;
  color: var(--e-text);
  border-bottom: 1px solid var(--e-border) !important;
  border-right: 1px solid #eceff3 !important;
}
table:not(.po-grid) tbody tr:nth-child(even) td:not(#_) { background: #fff; }
table:not(.po-grid) tbody tr:hover td:not(#_) { background: var(--ui-hover) !important; }

/* -------------------------------------------------------------------------
   6. PAGE HEADER — title, tabs, primary action; identical on every page
   ------------------------------------------------------------------------- */
.po-strip:not(#_) {
  height: var(--header-h) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 calc(52px + var(--ws-conn-w, 0px)) 0 20px !important;
  gap: 4px 8px !important;
  background: var(--e-surface) !important;
  border-bottom: 1px solid var(--e-border) !important;
  box-shadow: none !important;
}
.po-strip-title:not(#_) {
  flex: none;
  font-family: var(--font-display) !important;
  font-size: var(--e-fs-title) !important;
  font-weight: 600 !important;
  color: var(--e-text) !important;
  margin-right: 14px;
  padding-right: 16px;
  border-right: 1px solid var(--e-border);
  line-height: 24px;
  white-space: nowrap;
}
.po-strip-chip:not(#_) {
  font-family: var(--font-body) !important;
  font-size: var(--e-fs) !important;
  font-weight: 500 !important;
  height: var(--e-ctl-h);
  padding: 0 11px !important;
  color: var(--e-text-2) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.po-strip-chip:not(#_):hover { color: var(--e-text) !important; background: var(--e-surface-2) !important; }
.po-strip-chip.is-active:not(#_), .po-strip-chip[aria-selected="true"]:not(#_) {
  color: var(--e-accent) !important;
  border-bottom-color: var(--e-accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.po-strip-chip-badge:not(#_) {
  font-size: 11px !important; font-weight: 600 !important; min-width: 20px; padding: 1px 6px !important;
  background: var(--e-accent-bg) !important; color: var(--e-accent) !important;
  border-radius: 10px !important; border: none !important; box-shadow: none !important;
}

/* canvas under the header */
.po-shell:not(#_) { background: var(--e-bg) !important; }
.po-canvas:not(#_), .wsnav-canvas:not(#_) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------
   7. SIDEBAR — the same rail, quiet labels, nothing clipped
   ------------------------------------------------------------------------- */
.app-side:not(#_) {
  background: var(--e-surface) !important;
  border-right: 1px solid var(--e-border) !important;
  box-shadow: none !important;
  padding: 0 10px 12px !important;
}
.app-side-brand:not(#_) { height: var(--header-h) !important; margin: 0 4px 10px !important; padding: 0; border-bottom: 1px solid var(--e-border); }
.app-side-brand img { height: 26px !important; width: auto !important; }
.app-side-group-label:not(#_) { font-size: var(--e-fs) !important; font-weight: 600 !important; color: var(--e-text-3) !important; font-family: var(--font-body) !important; }
.app-side-item:not(#_) {
  font-family: var(--font-body) !important;
  font-size: var(--e-fs) !important;
  font-weight: 500 !important;
  color: var(--e-text-2) !important;
  border-radius: var(--e-radius-sm) !important;
  box-shadow: none !important;
  background: transparent !important;
}
.app-side-item:not(#_):hover { background: var(--e-surface-2) !important; color: var(--e-text) !important; }
.app-side-item.is-active:not(#_) { background: var(--e-accent-bg) !important; color: var(--e-accent) !important; font-weight: 600 !important; }
.app-side-item-label:not(#_) { font-family: var(--font-body) !important; font-size: var(--e-fs) !important; }
.app-side-badge:not(#_) { background: var(--e-accent) !important; color: #fff !important; box-shadow: none !important; border-radius: 10px !important; }

.app-side-items .app-side-item:not(#_),
.app-side-items .app-side-item-label:not(#_),
.app-side-subitems .app-side-item:not(#_),
.app-side-subitems .app-side-item-label:not(#_) { font-size: var(--e-fs-sm) !important; }

/* -------------------------------------------------------------------------
   8. NO MASCOT — hidden everywhere (home, login, empty states, loader, patrol)
   ------------------------------------------------------------------------- */
.lyr-bot, .lyr-bot-fx, .wsnav-canvas-mascot, .login-card-mascot,
.wsnav-canvas-logo, img[src*="mascot"], .home-mascot, .wh-mascot { display: none !important; }

/* Loading state: a plain spinner, in place of the mascot. */
#wsLoader .ws-load { background: var(--e-surface) !important; border: 1px solid var(--e-border) !important; border-radius: var(--e-radius) !important; box-shadow: var(--e-float) !important; }
#wsLoader .ws-load::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px;
  border: 2px solid var(--e-border); border-top-color: var(--e-accent); border-radius: 50%;
  animation: e-spin .8s linear infinite;
}
@keyframes e-spin { to { transform: rotate(360deg); } }

/* Empty states: a quiet, centred message. */
.wsnav-canvas:not(#_) { align-items: center; justify-content: center; text-align: center; color: var(--e-text-3); font-size: var(--e-fs); }
.wsnav-canvas p, .wsnav-canvas-greeting, .po-canvas-empty p { color: var(--e-text-3) !important; font-size: var(--e-fs) !important; max-width: 420px; line-height: 1.5; }

/* -------------------------------------------------------------------------
   9. BADGES / STATUS — one tint-on-tint language
   ------------------------------------------------------------------------- */
.badge:not(#_), .tag:not(#_), .pill:not(#_), .chip:not(#_), [class*="-badge"]:not(.app-side-badge):not(.po-strip-chip-badge):not(#_) {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--e-radius-sm) !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   10. WAREHOUSE + LOGIN — same floor and fonts as everything else
   ------------------------------------------------------------------------- */
body.wh-shell, body.login-neu-body, body.rr-body { background: var(--e-bg) !important; }
.login-card:not(#_) { padding: 28px 28px 22px !important; box-shadow: var(--e-float) !important; }
.login-card h1:not(#_) { font-size: 20px !important; font-weight: 600 !important; margin: 14px 0 4px !important; color: var(--e-text); }
.login-card h1 span:not(#_) { color: var(--e-accent); }

/* hazard stripes / decorative bars from the old industrial theme */
.hazard, .hazard-stripe, [class*="hazard-stripe"], .app-nav::before { background-image: none !important; }

/* Sidebar group headers and the account button are navigation, not buttons. */
.app-side-group-toggle:not(#_), .app-side-account-btn:not(#_), .app-side-sub-toggle:not(#_) {
  background: transparent !important; border: none !important; box-shadow: none !important;
  font-family: var(--font-body) !important; font-size: var(--e-fs-sm) !important; font-weight: 600 !important;
  color: var(--e-text-3) !important; border-radius: var(--e-radius-sm) !important;
}
.app-side-group-toggle:not(#_):hover, .app-side-account-btn:not(#_):hover, .app-side-sub-toggle:not(#_):hover { background: var(--e-surface-2) !important; color: var(--e-text) !important; }
.app-side-account-btn:not(#_) { color: var(--e-text-2) !important; font-size: var(--e-fs) !important; font-weight: 500 !important; }

/* Calendar and other icon-only controls: same hairline look, native sizing. */
.tk-cal-grid:not(#_) { border: 1px solid var(--e-border-hi) !important; border-radius: var(--e-radius) !important; }
.tk-help-btn:not(#_), .tk-bell:not(#_), .btn-icon:not(#_) {
  background: var(--e-surface) !important; border: 1px solid var(--e-border-hi) !important;
  border-radius: var(--e-radius-sm) !important; box-shadow: none !important; color: var(--e-text-2) !important;
}

/* Global notification bell: icon only, no button chrome. */
.nb-bell:not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: var(--header-h) !important; width: 36px !important; }

/* One typeface everywhere, including tools that set their own (Warehouse legend, zone labels). */
body *:not(#_):not(svg):not(svg *):not(code):not(pre):not(kbd):not(samp):not(.bc-label-sheet):not(.bc-label-sheet *) { font-family: var(--font-body) !important; }

/* Sidebar wide enough for the longest tool names without truncating. */
:root { --nav-w: 186px; }
.app-side-item-label:not(#_) { white-space: nowrap; overflow: visible; text-overflow: clip; }

/* Wide tables scroll inside their own container, never the page. */
.pa-page:not(#_) { max-width: 100%; box-sizing: border-box; overflow-x: auto; }



/* =========================================================================
   11. SYSTEM v2 — smaller scale, semantic colour, action hierarchy
   Every rule below is prefixed with html:not(#_):not(#_) (two ID-weights) so it
   beats the older sheets AND the generic button chain in section 4.
   Colour means one thing everywhere: blue = act/selected, green = done/ready,
   amber = caution/waiting, red = error/destructive, grey = inactive.
   Button ranks: primary (filled blue gradient) > secondary (outlined) > ghost (text);
   red = destructive; green = ready/complete.
   ========================================================================= */
/* ---- 11A. SEMANTIC COLOUR: one colour = one meaning, used the same everywhere ---- */
:root {
  /* action / selected / info */
  --c-action-1:#2f6fd6; --c-action-2:#1a4fa0; --c-action-3:#123b7d; --c-action-bg:#e8effa; --c-action-bd:#b6cdee;
  /* success / complete / ready */
  --c-ok-1:#25a95f;  --c-ok-2:#17703e;  --c-ok-bg:#e2f5ea;  --c-ok-bd:#9fd8b8;
  /* caution / waiting / needs a look */
  --c-warn-1:#f0b429; --c-warn-2:#9a5b00; --c-warn-bg:#fff4d6; --c-warn-bd:#f2d27a;
  /* error / destructive / overdue */
  --c-err-1:#e5483b; --c-err-2:#b42318; --c-err-3:#8f1b11; --c-err-bg:#fdeceb; --c-err-bd:#f2aca6;
  /* neutral / inactive / draft */
  --c-neu-1:#6b7a90; --c-neu-2:#46536a; --c-neu-bg:#eef1f6; --c-neu-bd:#d3dae4;

  --g-action: linear-gradient(180deg, var(--c-action-1) 0%, var(--c-action-2) 100%);
  --g-action-hi: linear-gradient(180deg, #2a65cc 0%, var(--c-action-3) 100%);
  --g-ok:     linear-gradient(180deg, var(--c-ok-1) 0%, var(--c-ok-2) 100%);
  --g-err:    linear-gradient(180deg, var(--c-err-1) 0%, var(--c-err-2) 100%);
  --g-surface:linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  --g-head:   linear-gradient(180deg, #fafbfd 0%, #eef1f6 100%);
  --g-select: linear-gradient(90deg, var(--c-action-bg) 0%, rgba(232,239,250,0) 100%);
  --e-lift: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.02);
}
/* ---- 11B. BUTTON HIERARCHY: 1 primary (filled, gradient) > 2 secondary (outlined)
        > 3 ghost (text) ; red = destructive ; green = ready/complete ---------------- */
/* secondary = the default for every button */
html:not(#_):not(#_) button:where(:not([class*="tk-cal"]):not(.nb-bell):not(.po-strip-chip):not(.app-side-item):not(.app-side-group-toggle):not(.app-side-account-btn):not(.app-side-sub-toggle):not(.icon-bare):not(.login-pw-toggle)),
html:not(#_):not(#_) .mini-btn,
html:not(#_):not(#_) .po-seg-btn,
html:not(#_):not(#_) .rr-btn-ghost,
html:not(#_):not(#_) .confirm-cancel {
  background: var(--g-surface) !important;
  background-image: var(--g-surface) !important;
  color: var(--e-text) !important;
  border: 1px solid var(--e-border-hi) !important;
  font-weight: 500 !important;
  box-shadow: var(--e-lift) !important;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
html:not(#_):not(#_) button:hover:where(:not(:disabled):not(.po-strip-chip):not(.app-side-item):not(.nb-bell)),
html:not(#_):not(#_) .mini-btn:hover:not(:disabled),
html:not(#_):not(#_) .confirm-cancel:hover:not(:disabled) {
  background: var(--c-action-bg) !important; background-image: none !important;
  border-color: var(--c-action-2) !important; color: var(--c-action-2) !important;
}
/* primary: the one thing to click */
html:not(#_):not(#_) button.primary,
html:not(#_):not(#_) .po-btn-generate,
html:not(#_):not(#_) .po-btn-download-canvas,
html:not(#_):not(#_) .po-modal-save,
html:not(#_):not(#_) .po-modal-submit,
html:not(#_):not(#_) .login-form-btn,
html:not(#_):not(#_) .role-picker-btn,
html:not(#_):not(#_) .confirm-ok,
html:not(#_):not(#_) .notice-ok-btn,
html:not(#_):not(#_) .rr-btn:not(.rr-btn-ghost):not(.rr-btn-danger),
html:not(#_):not(#_) .dc-add-btn {
  background: var(--g-action) !important; background-image: var(--g-action) !important;
  color: #fff !important; font-weight: 600 !important;
  border: 1px solid var(--c-action-3) !important;
  box-shadow: 0 1px 2px rgba(18,59,125,.40), inset 0 1px 0 rgba(255,255,255,.20) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
html:not(#_):not(#_) button.primary:hover:not(:disabled),
html:not(#_):not(#_) .po-btn-generate:hover:not(:disabled),
html:not(#_):not(#_) .po-btn-download-canvas:hover:not(:disabled),
html:not(#_):not(#_) .po-modal-save:hover:not(:disabled),
html:not(#_):not(#_) .po-modal-submit:hover:not(:disabled),
html:not(#_):not(#_) .login-form-btn:hover:not(:disabled),
html:not(#_):not(#_) .role-picker-btn:hover:not(:disabled),
html:not(#_):not(#_) .confirm-ok:hover:not(:disabled),
html:not(#_):not(#_) .notice-ok-btn:hover:not(:disabled),
html:not(#_):not(#_) .rr-btn:not(.rr-btn-ghost):not(.rr-btn-danger):hover:not(:disabled),
html:not(#_):not(#_) .dc-add-btn:hover:not(:disabled) {
  background: var(--g-action-hi) !important; background-image: var(--g-action-hi) !important; color: #fff !important;
  border-color: var(--c-action-3) !important;
  box-shadow: 0 3px 8px rgba(26,79,160,.38), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html:not(#_):not(#_) button.primary:active:not(:disabled),
html:not(#_):not(#_) .po-btn-generate:active:not(:disabled),
html:not(#_):not(#_) .confirm-ok:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.25) !important; }
/* header action sits one step higher than any in-page primary */
html:not(#_):not(#_) .po-strip-generate.primary,
html:not(#_):not(#_) .po-strip-download.primary { padding: 0 16px !important; }
/* ready-to-download = success green */
html:not(#_):not(#_) button.primary.btn-download-ready,
html:not(#_):not(#_) .po-btn-download-canvas.btn-download-ready {
  background: var(--g-ok) !important; background-image: var(--g-ok) !important; border-color: #0f5a31 !important;
  box-shadow: 0 1px 2px rgba(15,90,49,.40), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* destructive: outlined red, fills red on hover; confirm-delete is solid red */
html:not(#_):not(#_) button.danger,
html:not(#_):not(#_) .mini-btn-danger,
html:not(#_):not(#_) .rr-btn-danger,
html:not(#_):not(#_) .po-danger,
html:not(#_):not(#_) .tk-danger {
  background: #fff !important; background-image: none !important; color: var(--c-err-2) !important;
  border: 1px solid var(--c-err-bd) !important; box-shadow: none !important;
}
html:not(#_):not(#_) button.danger:hover:not(:disabled),
html:not(#_):not(#_) .mini-btn-danger:hover:not(:disabled),
html:not(#_):not(#_) .rr-btn-danger:hover:not(:disabled),
html:not(#_):not(#_) .po-danger:hover:not(:disabled) {
  background: var(--g-err) !important; background-image: var(--g-err) !important; color: #fff !important; border-color: var(--c-err-3) !important;
}
html:not(#_):not(#_) #confirm-ok.confirm-ok { background: var(--g-err) !important; background-image: var(--g-err) !important; border-color: var(--c-err-3) !important; box-shadow: 0 1px 2px rgba(143,27,17,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; }
html:not(#_):not(#_) #confirm-ok.confirm-ok:hover:not(:disabled) { background: #d23a2d !important; background-image: none !important; box-shadow: 0 3px 8px rgba(180,35,24,.4) !important; }
html:not(#_):not(#_) #confirm-ok.notice-ok-btn { background: var(--g-action) !important; background-image: var(--g-action) !important; border-color: var(--c-action-3) !important; }
/* ghost / tertiary: text only */
html:not(#_):not(#_) .po-link-btn,
html:not(#_):not(#_) .po-linkbtn,
html:not(#_):not(#_) .rr-btn-ghost {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid transparent !important; color: var(--c-action-2) !important; font-weight: 500 !important;
}
html:not(#_):not(#_) .po-link-btn:hover:not(:disabled),
html:not(#_):not(#_) .po-linkbtn:hover:not(:disabled),
html:not(#_):not(#_) .rr-btn-ghost:hover:not(:disabled) {
  background: var(--c-action-bg) !important; border-color: transparent !important; color: var(--c-action-3) !important; text-decoration: none !important;
}
/* disabled primary reads as "not ready yet", not as a faded blue button */
html:not(#_):not(#_) button.primary:disabled,
html:not(#_):not(#_) .po-btn-generate:disabled,
html:not(#_):not(#_) .po-btn-download-canvas:disabled,
html:not(#_):not(#_) .po-modal-save:disabled,
html:not(#_):not(#_) .po-modal-submit:disabled,
html:not(#_):not(#_) .rr-btn:disabled {
  background: #c4d2ea !important; background-image: none !important; border-color: #b3c4e2 !important;
  color: #fff !important; box-shadow: none !important; text-shadow: none; opacity: 1 !important; cursor: not-allowed;
}
html:not(#_):not(#_) button:disabled:not(.primary):not(.po-btn-generate):not(.po-btn-download-canvas):not(.po-modal-save):not(.po-modal-submit):not(.rr-btn) {
  background: var(--e-surface-2) !important; background-image: none !important; color: #98a2b3 !important; border-color: var(--e-border) !important; box-shadow: none !important; opacity: 1 !important;
}
/* segmented toggles: selected = filled action colour */
html:not(#_):not(#_) .po-seg-btn.is-active,
html:not(#_):not(#_) .po-seg-btn[aria-pressed="true"],
html:not(#_):not(#_) .po-seg-btn.active {
  background: var(--g-action) !important; background-image: var(--g-action) !important; color: #fff !important; border-color: var(--c-action-3) !important; font-weight: 600 !important;
}
/* ---- 11C. STATE PILLS: tint on tint, always the same five meanings ---------------- */
html:not(#_):not(#_) .s-ok,
html:not(#_):not(#_) .s-warn,
html:not(#_):not(#_) .s-err,
html:not(#_):not(#_) .s-info,
html:not(#_):not(#_) .s-neutral,
html:not(#_):not(#_) .badge,
html:not(#_):not(#_) .status-pill,
html:not(#_):not(#_) .po-tag,
html:not(#_):not(#_) .pa-chip,
html:not(#_):not(#_) .badge-admin {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; font-size: var(--e-fs-sm) !important; font-weight: 600 !important; line-height: 18px;
  border: 1px solid var(--c-neu-bd) !important; border-radius: 999px !important;
  background: linear-gradient(180deg,#f7f9fc,var(--c-neu-bg)) !important; color: var(--c-neu-2) !important;
}
html:not(#_):not(#_) .s-ok,
html:not(#_):not(#_) .status-ok.status-pill { background: linear-gradient(180deg,#f0fbf5,var(--c-ok-bg)) !important;   color: var(--c-ok-2) !important;   border-color: var(--c-ok-bd) !important; }
html:not(#_):not(#_) .s-warn,
html:not(#_):not(#_) .status-warn.status-pill { background: linear-gradient(180deg,#fffaea,var(--c-warn-bg)) !important; color: var(--c-warn-2) !important; border-color: var(--c-warn-bd) !important; }
html:not(#_):not(#_) .s-err,
html:not(#_):not(#_) .status-err.status-pill { background: linear-gradient(180deg,#fff5f4,var(--c-err-bg)) !important;  color: var(--c-err-2) !important;  border-color: var(--c-err-bd) !important; }
html:not(#_):not(#_) .s-info,
html:not(#_):not(#_) .badge-admin { background: linear-gradient(180deg,#f3f7fe,var(--c-action-bg)) !important; color: var(--c-action-2) !important; border-color: var(--c-action-bd) !important; }
/* inline status text */
html:not(#_):not(#_) .status-ok,
html:not(#_):not(#_) .pa-ok,
html:not(#_):not(#_) .check-ok,
html:not(#_):not(#_) .notice-ok,
html:not(#_):not(#_) .assign-success { color: var(--c-ok-2) !important; font-weight: 600; }
html:not(#_):not(#_) .status-warn,
html:not(#_):not(#_) .is-warn,
html:not(#_):not(#_) .tc-warn,
html:not(#_):not(#_) .trends-warn { color: var(--c-warn-2) !important; font-weight: 600; }
html:not(#_):not(#_) .status-err,
html:not(#_):not(#_) .pa-err,
html:not(#_):not(#_) .is-err,
html:not(#_):not(#_) .is-bad,
html:not(#_):not(#_) .tk-form-err,
html:not(#_):not(#_) .rd-form-err,
html:not(#_):not(#_) .dc-form-err,
html:not(#_):not(#_) .stm-modal-err,
html:not(#_):not(#_) .tk-im-err { color: var(--c-err-2) !important; font-weight: 600; }
html:not(#_):not(#_) .status-changed { color: var(--c-action-2) !important; font-weight: 600; }
/* counts: info counts are blue, things that need you (sidebar alerts) are red */
html:not(#_):not(#_) .app-side-badge { background: var(--g-err) !important; background-image: var(--g-err) !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 1px 2px rgba(143,27,17,.35) !important; }
html:not(#_):not(#_) .po-strip-chip-badge { background: var(--c-action-bg) !important; color: var(--c-action-2) !important; border: 1px solid var(--c-action-bd) !important; }
html:not(#_):not(#_) .po-strip-chip.is-active .po-strip-chip-badge { background: var(--g-action) !important; color: #fff !important; border-color: var(--c-action-3) !important; }
/* ---- 11D. SURFACE + TEXT HIERARCHY ------------------------------------------------ */
html:not(#_):not(#_) body { background: linear-gradient(180deg, #eef2f7 0%, #f3f5f8 220px) !important; }
html:not(#_):not(#_) .po-strip { background: linear-gradient(180deg,#fff 0%,#fafbfd 100%) !important; box-shadow: 0 1px 0 rgba(16,24,40,.04) !important; }
html:not(#_):not(#_) .po-strip-title { font-weight: 700 !important; color: var(--e-text) !important; }
html:not(#_):not(#_) .po-strip-chip.is-active,
html:not(#_):not(#_) .po-strip-chip[aria-selected="true"] { background: linear-gradient(180deg, rgba(232,239,250,0), var(--c-action-bg)) !important; }
html:not(#_):not(#_) .card,
html:not(#_):not(#_) .panel,
html:not(#_):not(#_) .po-card,
html:not(#_):not(#_) .home-dash-card { box-shadow: 0 1px 2px rgba(16,24,40,.05) !important; }
/* title (strong) > section heading > label (quiet) > meta (quietest) */
html:not(#_):not(#_) h1 { font-size: 17px !important; font-weight: 700 !important; color: var(--e-text) !important; }
html:not(#_):not(#_) h2 { font-size: 13px !important; font-weight: 700 !important; color: var(--e-text) !important; }
html:not(#_):not(#_) h3 { font-size: 11.5px !important; font-weight: 600 !important; color: #263349 !important; }
html:not(#_):not(#_) h4,
html:not(#_):not(#_) label { font-size: var(--e-fs-sm) !important; font-weight: 600 !important; color: var(--e-text-2); }
/* ---- 11E. TABLES + SELECTION + SIDEBAR -------------------------------------------- */
html:not(#_):not(#_) table thead th,
html:not(#_):not(#_) .po-grid thead th { background: var(--g-head) !important; background-image: var(--g-head) !important; color: #3a465c !important; }
html:not(#_):not(#_) table thead th[aria-sort="ascending"],
html:not(#_):not(#_) table thead th[aria-sort="descending"],
html:not(#_):not(#_) table thead th.is-sorted { color: var(--c-action-2) !important; box-shadow: inset 0 -2px 0 var(--c-action-1) !important; }
html:not(#_):not(#_) table tbody tr:hover td { background: var(--ui-hover) !important; }
html:not(#_):not(#_) table tbody tr.is-selected td,
html:not(#_):not(#_) table tbody tr.selected td,
html:not(#_):not(#_) table tbody tr[aria-selected="true"] td { background: var(--ui-sel) !important; }
html:not(#_):not(#_) table tbody tr.is-selected td:first-child,
html:not(#_):not(#_) table tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--c-action-1) !important; }
html:not(#_):not(#_) .app-side-item.is-active { background: var(--g-select) !important; background-image: var(--g-select) !important; box-shadow: inset 3px 0 0 var(--c-action-1) !important; color: var(--c-action-2) !important; font-weight: 600 !important; }
html:not(#_):not(#_) .app-side-item:hover:not(.is-active) { background: var(--e-surface-2) !important; }
html:not(#_):not(#_) input:focus,
html:not(#_):not(#_) select:focus,
html:not(#_):not(#_) textarea:focus { border-color: var(--c-action-1) !important; box-shadow: 0 0 0 3px rgba(47,111,214,.20) !important; }
html:not(#_):not(#_) input:not([type=checkbox]):not([type=radio]):hover:not(:focus):not(:disabled),
html:not(#_):not(#_) select:hover:not(:focus):not(:disabled) { border-color: #8d99ab !important; }
html:not(#_):not(#_) ::selection { background: rgba(47,111,214,.22); }

/* 11F. master type scale, ~7% below the previous steps (older sheets multiply px by --fs) */
:root { --fs: 0.86; }
@media (min-width: 1600px) { :root { --fs: 0.92; } }
@media (min-width: 1920px) { :root { --fs: 0.99; } }
@media (min-width: 2400px) { :root { --fs: 1.12; } }
@media (min-width: 2880px) { :root { --fs: 1.29; } }
@media (min-width: 3440px) { :root { --fs: 1.42; } }
@media (min-width: 3840px) { :root { --fs: 1.59; } }
@media (min-width: 3440px) and (max-height: 1400px) { :root { --fs: 1.29; } }
@media (min-width: 2880px) and (max-height: 1200px) { :root { --fs: 1.12; } }
@media (min-width: 2400px) and (max-height: 1000px) { :root { --fs: 0.99; } }
@media (min-width: 1920px) and (max-height: 820px)  { :root { --fs: 0.92; } }
@media (min-width: 1600px) and (max-height: 700px)  { :root { --fs: 0.86; } }

/* ==========================================================================
   Settlement Monitoring -> same colour language + gradients as the Calendar (tasks.css).
   OK = Done green | amber = Waiting | red = Urgent red | blue = In progress.
   Cells get the calendar's left bar + tint gradient; pills use its bg/border/ink triples.
   ========================================================================== */
.stm-shell, .stm-popover, .stm-modal {
  --stm-green: #0f6c37; --stm-amber: #7d5700; --stm-red: #a3160c; --stm-blue: #0d4aa6;
  --stm-c-green: #1f9d55; --stm-bg-green: #e2f5ea; --stm-bd-green: #96d3ae;
  --stm-c-amber: #d29a00; --stm-bg-amber: #fff5d1; --stm-bd-amber: #efd27a;
  --stm-c-red:   #d92d20; --stm-bg-red:   #fdeceb; --stm-bd-red:   #f2aca6;
  --stm-c-blue:  #1d6fe0; --stm-bg-blue:  #e5effd; --stm-bd-blue:  #a9c8f4;
}
/* board cells: left bar + gradient (calendar: --pc bar, tint -> lighter) */
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-green { --sc: var(--stm-c-green); }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-amber { --sc: var(--stm-c-amber); }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-red   { --sc: var(--stm-c-red); }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-blue  { --sc: var(--stm-c-blue); }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-green,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-amber,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-red,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-blue {
  background: linear-gradient(90deg, #e1e3e8 0, #f4f5f7 100%) !important;
  box-shadow: inset 3px 0 0 var(--sc) !important;
}
@supports (background: color-mix(in srgb, red 50%, white)) { html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-green,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-amber,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-red,
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-blue {
  background: linear-gradient(90deg, #e1e3e8 0, #f4f5f7 100%) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 26%, #fff) 0, color-mix(in srgb, var(--sc) 9%, #fff) 100%) !important;
  box-shadow: inset 3px 0 0 var(--sc) !important;
} }

html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-severe {
  background: linear-gradient(90deg, #f0aba6 0, #f9dddb 100%) !important;
  box-shadow: inset 4px 0 0 #a3160c !important;
}
@supports (background: color-mix(in srgb, red 50%, white)) { html:not(#_):not(#_) .stm-board tbody td.stm-cell-td.stm-severe {
  background: linear-gradient(90deg, #f0aba6 0, #f9dddb 100%) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stm-c-red) 40%, #fff) 0, color-mix(in srgb, var(--stm-c-red) 16%, #fff) 100%) !important;
  box-shadow: inset 4px 0 0 #a3160c !important;
} }

html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-green,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-amber,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-red,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-blue {
  background: linear-gradient(90deg, #d5d9df 0, #eceef1 100%) !important;
}
@supports (background: color-mix(in srgb, red 50%, white)) { html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-green,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-amber,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-red,
html:not(#_):not(#_) .stm-board tbody tr:hover td.stm-cell-td.stm-blue {
  background: linear-gradient(90deg, #d5d9df 0, #eceef1 100%) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 36%, #fff) 0, color-mix(in srgb, var(--sc) 16%, #fff) 100%) !important;
} }

/* the button inside fills the cell: transparent so the gradient shows, ink colour from the calendar set */
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td .stm-cell { background: transparent !important; border: none !important; box-shadow: none !important; }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td .stm-cell.stm-green { color: var(--stm-green) !important; }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td .stm-cell.stm-amber { color: var(--stm-amber) !important; }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td .stm-cell.stm-red   { color: var(--stm-red) !important; }
html:not(#_):not(#_) .stm-board tbody td.stm-cell-td .stm-cell.stm-blue  { color: var(--stm-blue) !important; }
html:not(#_):not(#_) .stm-cell-days { background: #f8d9d7 !important; color: var(--stm-red) !important; }
@supports (background: color-mix(in srgb, red 50%, white)) { html:not(#_):not(#_) .stm-cell-days { background: #f8d9d7 !important;
  background: color-mix(in srgb, var(--stm-c-red) 18%, #fff) !important; color: var(--stm-red) !important; } }


/* status pills / status button / recon badges: calendar bg + border + ink */
html:not(#_):not(#_) .stm-status-pill.stm-status-open,
html:not(#_):not(#_) .stm-status-btn.stm-status-open,
html:not(#_):not(#_) .stm-recon-badge-mismatch { background: var(--stm-bg-red) !important; border-color: var(--stm-bd-red) !important; color: var(--stm-red) !important; }
html:not(#_):not(#_) .stm-status-pill.stm-status-in_progress,
html:not(#_):not(#_) .stm-status-btn.stm-status-in_progress { background: var(--stm-bg-blue) !important; border-color: var(--stm-bd-blue) !important; color: var(--stm-blue) !important; }
html:not(#_):not(#_) .stm-status-pill.stm-status-settled,
html:not(#_):not(#_) .stm-status-btn.stm-status-settled,
html:not(#_):not(#_) .stm-recon-badge-matched { background: var(--stm-bg-green) !important; border-color: var(--stm-bd-green) !important; color: var(--stm-green) !important; }
html:not(#_):not(#_) .stm-recon-badge-pending { background: var(--stm-bg-amber) !important; border-color: var(--stm-bd-amber) !important; color: var(--stm-amber) !important; }
/* recon cards: same tint-to-white gradient as calendar rows */
html:not(#_):not(#_) .stm-recon-matched  { background: linear-gradient(90deg, var(--stm-bg-green) 0, #fff 38%) !important; }
html:not(#_):not(#_) .stm-recon-mismatch { background: linear-gradient(90deg, var(--stm-bg-red) 0, #fff 38%) !important; }
html:not(#_):not(#_) .stm-ref-row .stm-ref-age-overdue { color: var(--stm-red) !important; }


/* ==========================================================================
   Compact page header
   - The tab title at the far left is dropped on every page: the sidebar
     already shows which tool you're in, and the room is better spent on the
     chips.
   - Tighter spacing between chips so more of them fit before the strip has to
     scroll sideways on a narrower screen.
   ========================================================================== */
html:not(#_):not(#_) .po-strip-title { display: none !important; }

html:not(#_):not(#_) .po-strip {
  gap: 2px !important;
  padding-left: 12px !important;
}
html:not(#_):not(#_) .po-strip-chip {
  padding: 0 8px !important;
  gap: 5px !important;
}
html:not(#_):not(#_) .po-strip-divider { margin: 0 2px; }
html:not(#_):not(#_) .po-strip-actions { gap: 8px !important; }

/* Sidebar alignment: every row in a group (active or not) starts at the same x, labels never push the rail wider. */
.app-side-items > .app-side-item:not(#_) { margin: 0 !important; padding-left: 8px !important; padding-right: 8px !important; width: 100% !important; transform: none !important; text-indent: 0 !important; }
.app-side-items > .app-side-item.is-active:not(#_) { padding-left: 8px !important; }
.app-side-item-label:not(#_) { overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0; }
.app-side:not(#_) { overflow-x: hidden !important; }


/* ==========================================================================
   12. ONE PAGE HEADER (loaded last, so it wins over the older per-page rules)
   Same bar on every page: flat white, one hairline under it, tabs that fill the
   bar's height with a single underline on the active one, small icons, neutral
   count pills (blue only on the active tab), and right-side actions that share
   one height. No gradients, no boxed chips.
   ========================================================================== */
:root { --header-h: 40px; }

html:not(#_):not(#_):not(#_) .po-strip {
  height: var(--header-h) !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding-left: 12px !important;
  background: var(--e-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--e-border) !important;
  box-shadow: none !important;
}
html:not(#_):not(#_):not(#_) .po-strip-title,
html:not(#_):not(#_):not(#_) .po-strip-divider { display: none !important; }

/* tabs */
html:not(#_):not(#_):not(#_) .po-strip-chip {
  display: inline-flex !important;
  align-items: center !important;
  align-self: stretch !important;
  height: auto !important;
  gap: 6px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: var(--e-fs) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--e-text-2) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:not(#_):not(#_):not(#_) .po-strip-chip:hover:not(.is-active) {
  color: var(--e-text) !important;
  background: var(--e-surface-2) !important;
  background-image: none !important;
}
html:not(#_):not(#_):not(#_) .po-strip-chip.is-active,
html:not(#_):not(#_):not(#_) .po-strip-chip[aria-selected="true"] {
  color: var(--e-accent) !important;
  font-weight: 600 !important;
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: var(--e-accent) !important;
  box-shadow: none !important;
}

/* icons: one size, same colour as the label */
html:not(#_):not(#_):not(#_) .po-strip-chip-icon,
html:not(#_):not(#_):not(#_) .po-strip-chip-icon svg { width: 15px !important; height: 15px !important; }
html:not(#_):not(#_):not(#_) .po-strip-chip-icon { color: inherit !important; opacity: .85; }

/* count pills: neutral, blue only on the active tab */
html:not(#_):not(#_):not(#_) .po-strip-chip-badge {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
  min-width: 18px;
  height: 16px;
  padding: 0 5px !important;
  text-align: center;
  background: var(--e-surface-2) !important;
  background-image: none !important;
  color: var(--e-text-2) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html:not(#_):not(#_):not(#_) .po-strip-chip.is-active .po-strip-chip-badge {
  background: var(--e-accent-bg) !important;
  background-image: none !important;
  color: var(--e-accent) !important;
}

/* right side: info text + buttons, all centred on one line, one control height */
html:not(#_):not(#_):not(#_) .po-strip-actions {
  align-self: center !important;
  gap: 10px !important;
}
html:not(#_):not(#_):not(#_) .po-strip-meta,
html:not(#_):not(#_):not(#_) .po-strip-status {
  font-size: var(--e-fs-sm) !important;
  color: var(--e-text-3) !important;
}
html:not(#_):not(#_):not(#_) .po-strip-meta b { color: var(--e-text-2) !important; font-weight: 600 !important; }
html:not(#_):not(#_):not(#_) .po-strip-actions button,
html:not(#_):not(#_):not(#_) .po-strip-actions .po-strip-generate,
html:not(#_):not(#_):not(#_) .po-strip-actions .po-btn-generate {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: var(--e-fs) !important;
  line-height: 1 !important;
  border-radius: var(--e-radius-sm) !important;
}

/* --- 12b. controls that live in the header (year pager, person filter, Add row, Refresh...) ---
   Pages put plain buttons / selects / inputs straight into the bar. They all get ONE look:
   28px tall, flat white, hairline border, 6px corners, no shadow; primary = solid blue. */
html:not(#_):not(#_):not(#_) .po-strip > :not(.po-strip-chip):not(.po-strip-spacer):not(.po-strip-title):not(.po-strip-divider):not(.po-strip-actions) { align-self: center !important; margin-right: 8px; }
html:not(#_):not(#_):not(#_) .po-strip > :is(button, select, input:not([type=checkbox]):not([type=radio]), .fm-btn, .fm-select):not(.po-strip-chip),
html:not(#_):not(#_):not(#_) .po-strip-actions :is(select, input:not([type=checkbox]):not([type=radio])) {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  font-family: var(--font-body) !important;
  font-size: var(--e-fs) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--e-text) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html:not(#_):not(#_):not(#_) .po-strip > :is(button, .fm-btn):not(.po-strip-chip):hover:not(:disabled) {
  background: var(--e-surface-2) !important; border-color: #c3cad6 !important;
}
html:not(#_):not(#_):not(#_) .po-strip > :is(button, .fm-btn):not(.po-strip-chip):disabled { opacity: .45; }
html:not(#_):not(#_):not(#_) .po-strip > :is(button.primary, .fm-primary):not(.po-strip-chip) {
  background: var(--e-accent) !important; border-color: var(--e-accent) !important; color: #fff !important; font-weight: 600 !important;
}
html:not(#_):not(#_):not(#_) .po-strip > :is(button.primary, .fm-primary):not(.po-strip-chip):hover:not(:disabled) {
  background: var(--c-action-2) !important; border-color: var(--c-action-2) !important;
}
html:not(#_):not(#_):not(#_) .po-strip :is(select, button, input):focus-visible { outline: 2px solid var(--c-action-1); outline-offset: 1px; }
/* selects: custom chevron instead of the chunky native arrow */
html:not(#_):not(#_):not(#_) .po-strip > select,
html:not(#_):not(#_):not(#_) .po-strip-actions select {
  -webkit-appearance: none; appearance: none;
  padding-right: 28px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important;
}

/* Files: year pager is ONE joined control, person filter beside it, Add row pinned right */
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmPrev,
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmNext { width: 30px; padding: 0 !important; font-size: 16px !important; }
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmPrev { border-radius: 6px 0 0 6px !important; margin-right: 0; }
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmNext { border-radius: 0 6px 6px 0 !important; margin-right: 14px; }
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmYear {
  box-sizing: border-box; height: 28px; min-width: 64px; margin: 0 -1px 0 -1px; padding: 0 10px; line-height: 26px;
  background: #fff; border-top: 1px solid var(--e-border); border-bottom: 1px solid var(--e-border);
  font-size: var(--e-fs-title); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--e-text); text-align: center;
}
html:not(#_):not(#_):not(#_) .fm-shell .po-strip .fm-select { margin-left: 0; }
html:not(#_):not(#_):not(#_) .fm-shell .po-strip #fmAdd { margin-left: auto; margin-right: 0; }


/* ==========================================================================
   SIDEBAR HIERARCHY (loaded last): each level is visibly one step down from its parent.
     category header (Stock)      icon 17px
     tool / sub-category row      icon 18px, indented under the category
     sub-category's tools         icon 16px, indented again, hung off a guide line
   Before, every level fought over icon size in a different file (17 / 22 / 20), so the
   children came out BIGGER than their parent, and the nested list had no clear step in.
   Sizes and steps are tokens so the whole tree scales together.
   ========================================================================== */
:root {
  --nav-ico-group: 17px;
  --nav-ico-item: 18px;
  --nav-ico-sub: 16px;
  --nav-indent: 28px;        /* tools under a category: puts their icons ~6px right of the category icon (the chevron pushes that icon to x=40) */
  --nav-w: 206px;            /* the deeper indent costs 14px of label room, so the rail grows to match */
  --nav-indent-sub: 6px;     /* tools under a sub-category, on top of the above */
}
.app-side-group-icon:not(#_), .app-side-group-icon:not(#_) svg { width: var(--nav-ico-group); height: var(--nav-ico-group); }
.app-side-item-icon:not(#_), .app-side-item-icon:not(#_) svg { width: var(--nav-ico-item); height: var(--nav-ico-item); }
.app-side-subitem .app-side-item-icon:not(#_), .app-side-subitem .app-side-item-icon:not(#_) svg { width: var(--nav-ico-sub); height: var(--nav-ico-sub); }

/* indent: category -> tools */
.app-side-items:not(#_) { padding-left: var(--nav-indent) !important; }
/* indent: sub-category -> its tools, with a guide line so they read as children */
.app-side-subitems:not(#_) {
  margin-left: 6px !important;   /* guide line sits just right of the sub-category's icon edge */
  padding-left: var(--nav-indent-sub) !important;
  border-left: 1px solid var(--e-border-hi, rgba(23,32,48,.15)) !important;
}
.app-side-subitem:not(#_) { padding: 6px 8px !important; gap: 8px !important; }
.app-side-subitem .app-side-item-label:not(#_) { font-size: var(--e-fs-sm) !important; }

/* icon-only rail (no room to nest): flatten, keep one icon size */
@media (max-width: 900px) {
  .app-side-items:not(#_) { padding-left: 0 !important; }
  .app-side-subitems:not(#_) { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
  .app-side-subitem .app-side-item-icon:not(#_), .app-side-subitem .app-side-item-icon:not(#_) svg { width: var(--nav-ico-item); height: var(--nav-ico-item); }
}