/* Canonical portal presentation. See docs/portal-ui-reference.md.
   Explicit compatibility mappings only: never flatten functional switch images. */
:root {
  --nx-canvas: #f5f5f7;
  --nx-surface: #fff;
  --nx-inset: #f0f1f3;
  --nx-text: #1d1d1f;
  --nx-muted: #60646c;
  --nx-border: #e1e4e9;
  --nx-border-strong: #bfc5ce;
  --nx-accent: var(--nx-brand-accent, #0071e3);
  --nx-accent-soft: color-mix(in srgb, var(--nx-accent) 9%, var(--nx-surface));
  --nx-success: #217346;
  --nx-warning: #946200;
  --nx-danger: #c43131;
  --nx-radius: 14px;
  --nx-control-radius: 8px;
  --nx-surface-end: #fcfcfd;
  --nx-segment: #eaecef;
  --nx-sheen: rgb(255 255 255 / 80%);
  --nx-texture: linear-gradient(180deg, var(--nx-surface), var(--nx-surface-end));
  --nx-selection-shadow: 0 1px 3px rgb(20 25 35 / 9%), 0 1px 1px rgb(20 25 35 / 3%);
  --nx-control-shadow: inset 0 1px 0 var(--nx-sheen), 0 1px 2px rgb(20 25 35 / 3%);
  --nx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --nx-shadow: 0 1px 2px rgb(20 25 35 / 3%), 0 3px 10px rgb(20 25 35 / 2%);
  --nx-shadow-pop: 0 8px 28px rgb(0 0 0 / 12%);
  --nx-focus: none;
  color-scheme: light;
}
html[data-theme="dark"] {
  --nx-canvas: #17181b;
  --nx-surface: #222428;
  --nx-inset: #2b2e33;
  --nx-text: #f5f5f7;
  --nx-muted: #b2b6bf;
  --nx-border: #3c4048;
  --nx-border-strong: #606671;
  --nx-surface-end: #24262a;
  --nx-segment: #1b1d21;
  --nx-sheen: rgb(255 255 255 / 5%);
  --nx-selection-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 2px 4px rgb(0 0 0 / 20%);
  --nx-control-shadow: inset 0 1px 0 var(--nx-sheen), 0 1px 2px rgb(0 0 0 / 12%);
  --nx-success: #79c998;
  --nx-warning: #e7bd66;
  --nx-danger: #ff9691;
  --nx-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 2px 6px rgb(0 0 0 / 10%);
  --nx-shadow-pop: 0 8px 28px rgb(0 0 0 / 30%);
  /* Existing admin dark-mode rules consume these names, often !important. */
  --dk-bg: var(--nx-canvas); --dk-bg2: var(--nx-surface); --dk-card: var(--nx-surface);
  --dk-card-h: var(--nx-inset); --dk-input: var(--nx-surface);
  --dk-border: var(--nx-border); --dk-border-h: var(--nx-border-strong);
  --dk-t1: var(--nx-text); --dk-t2: var(--nx-muted); --dk-t3: var(--nx-muted);
  --dk-green: var(--nx-success); --dk-blue: var(--nx-accent);
  --dk-red: var(--nx-danger); --dk-amber: var(--nx-warning); --dk-purple: var(--nx-accent);
  color-scheme: dark;
}

/* Resolve the three historic shell vocabularies at one inherited boundary. */
html body.nx-portal {
  --sb-font: var(--nx-font); --font-sans: var(--nx-font); --font-mono: var(--nx-mono);
  --sb-bg: var(--nx-surface); --hd-bg: var(--nx-surface); --surface: var(--nx-surface);
  --sb-border: var(--nx-border); --hd-border: var(--nx-border);
  --sb-border-strong: var(--nx-border-strong);
  --sb-text: var(--nx-muted); --sb-section: var(--nx-muted);
  --sb-text-hover: var(--nx-text); --sb-text-active: var(--nx-text);
  --sb-hover-bg: var(--nx-inset); --sb-active-bg: var(--nx-accent-soft);
  --sb-active-accent: var(--nx-accent);
  --bg-page: var(--nx-canvas); --bg-primary: var(--nx-canvas);
  --bg-body: var(--nx-canvas); --bg-header: var(--nx-surface);
  --bg-table-header: var(--nx-inset); --bg-table-row-hover: var(--nx-inset);
  --border: var(--nx-border); --shadow: var(--nx-shadow);
  --bg-elevated: var(--nx-surface); --bg-secondary: var(--nx-surface);
  --bg-subtle: var(--nx-inset); --bg-card: var(--nx-surface);
  --bg-card-hover: var(--nx-inset); --bg-sidebar: var(--nx-surface); --bg-input: var(--nx-surface);
  --border-color: var(--nx-border); --border-hover: var(--nx-border-strong);
  --text-primary: var(--nx-text); --text-secondary: var(--nx-muted); --text-muted: var(--nx-muted);
  --accent-blue: var(--nx-accent); --accent-blue-hover: var(--nx-accent);
  --accent-green: var(--nx-success); --accent-red: var(--nx-danger); --accent-amber: var(--nx-warning);
  --accent-purple: var(--nx-accent);
  --color-success: var(--nx-success); --color-warning: var(--nx-warning);
  --color-danger: var(--nx-danger); --color-info: var(--nx-accent); --color-purple: var(--nx-accent);
  --color-success-soft: color-mix(in srgb, var(--nx-success) 10%, var(--nx-surface));
  --color-warning-soft: color-mix(in srgb, var(--nx-warning) 10%, var(--nx-surface));
  --color-danger-soft: color-mix(in srgb, var(--nx-danger) 10%, var(--nx-surface));
  --color-info-soft: var(--nx-accent-soft); --color-purple-soft: var(--nx-accent-soft);
  --radius-sm: var(--nx-control-radius); --radius-md: var(--nx-control-radius);
  --radius-lg: var(--nx-radius); --radius-xl: var(--nx-radius);
  --ui-radius: var(--nx-radius); --ui-radius-sm: var(--nx-control-radius);
  --shadow-xs: var(--nx-shadow); --shadow-sm: var(--nx-shadow);
  --shadow-md: var(--nx-shadow-pop); --shadow-lg: var(--nx-shadow-pop);
  --ui-shadow: var(--nx-shadow); --ui-shadow-pop: var(--nx-shadow-pop);
  --ring-focus: var(--nx-focus); --ring-focus-soft: var(--nx-focus);
  --lt-bg: var(--nx-canvas); --lt-card: var(--nx-surface); --lt-input: var(--nx-surface);
  --lt-border: var(--nx-border); --lt-border-light: var(--nx-border);
  --lt-t1: var(--nx-text); --lt-t2: var(--nx-muted); --lt-t3: var(--nx-muted);
  --lt-accent: var(--nx-accent); --lt-green: var(--nx-success); --lt-red: var(--nx-danger);
  --lt-amber: var(--nx-warning); --lt-radius: var(--nx-radius);
  --cp-bg: var(--nx-canvas); --cp-card: var(--nx-surface); --cp-card-border: var(--nx-border);
  --cp-card-radius: var(--nx-radius); --cp-border: var(--nx-border);
  --cp-text: var(--nx-text); --cp-text-muted: var(--nx-muted); --cp-text-bright: var(--nx-text);
  --cp-green: var(--nx-success); --cp-green-dim: var(--color-success-soft);
  --cp-red: var(--nx-danger); --cp-blue: var(--nx-accent); --cp-amber: var(--nx-warning);
  --cp-violet: var(--nx-accent); --cp-cyan: var(--nx-muted);
  font-family: var(--nx-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--nx-text);
  background: var(--nx-canvas);
  min-width: 0;
  -webkit-font-smoothing: antialiased;
}
/* Report/editor pages own local token scopes, so map them explicitly too. */
html[data-theme] body.nx-portal .rpt-page {
  --rp-font: var(--nx-font); --rp-canvas: var(--nx-canvas); --rp-card: var(--nx-surface);
  --rp-card-solid: var(--nx-surface); --rp-border: var(--nx-border);
  --rp-border-strong: var(--nx-border-strong); --rp-shadow: var(--nx-shadow);
  --rp-shadow-solid: var(--nx-shadow); --rp-accent: var(--nx-accent);
  --rp-accent-hover: var(--nx-accent); --rp-accent-soft: var(--nx-accent-soft);
  --rp-text: var(--nx-text); --rp-text2: var(--nx-muted); --rp-muted: var(--nx-muted);
  --rp-placeholder: var(--nx-muted); --rp-ok: var(--nx-success); --rp-danger: var(--nx-danger);
  --rp-warn: var(--nx-warning); --rp-row: var(--nx-inset); --rp-subtle: var(--nx-inset);
  --rp-radius: var(--nx-radius); --rp-control-radius: var(--nx-control-radius);
}
/* Earlier card-list skins defined another private --rp-* scope. */
html[data-theme] body.nx-portal :is(.cst-page,.car-page,.rpl-page,.rpe-page,.rdk-page,.ird-page,.did-page,.dup-page,.bdr-page,.su-page,.paym-page,.blg-page,.vm-page,.ibr-page) {
  --rp-canvas:var(--nx-canvas); --rp-card:var(--nx-surface); --rp-solid:var(--nx-surface);
  --rp-borderc:var(--nx-border); --rp-line:var(--nx-border); --rp-accent:var(--nx-accent);
  --rp-accent-h:var(--nx-accent); --rp-accent-soft:var(--nx-accent-soft);
  --rp-text:var(--nx-text); --rp-text2:var(--nx-muted); --rp-muted:var(--nx-muted);
  --rp-ok:var(--nx-success); --rp-danger:var(--nx-danger); --rp-warn:var(--nx-warning);
  --rp-shadow:var(--nx-shadow); --bg-subtle:var(--nx-inset); --sb-hover-bg:var(--nx-inset);
  font-family:var(--nx-font);
}
.nx-portal .rpt-page :is(.rpt-head,.rpt-kpi,.rpt-strip,.rpt-card,.rpt-tbl,.rpt-filter) {
  --rp-radius: var(--nx-radius); --rp-font: var(--nx-font);
}
html[data-theme] body.nx-portal .te-editor {
  --te-accent: var(--nx-accent); --te-accent-soft: var(--nx-accent-soft);
  --te-card: var(--nx-surface); --te-solid: var(--nx-surface); --te-rail: var(--nx-surface);
  --te-text: var(--nx-text); --te-text-2: var(--nx-muted); --te-muted: var(--nx-muted);
  --te-faint: var(--nx-muted); --te-border: var(--nx-border); --te-border-strong: var(--nx-border-strong);
  --te-danger: var(--nx-danger); --te-shadow: var(--nx-shadow);
}

.nx-portal :is(main,.adm-content,.cp-content,.container-fluid) { min-width: 0; }
/* Override only identified legacy important declarations, not functional images. */
html[data-theme="dark"] body.nx-portal[data-portal="admin"] {
  background-color: var(--nx-canvas) !important; color: var(--nx-text) !important;
}
html[data-theme="dark"] body.nx-portal[data-portal="admin"] :is(.hero,.lc-hdr,.lc-hero,.dc-hero,.da-hero,.cq-hero,.cl-head,.cl-hero,.pr-hero,.ur-hero,.te-hero,.cdr-header,.page-hdr,.fas-page-head,.sr-page-head) {
  background-color: var(--nx-surface) !important; border-color: var(--nx-border) !important;
}
html[data-theme="dark"] body.nx-portal[data-portal="admin"] :is(.card-w,.kpi,.rp-card,.cleanup-panel,.cleanup-kpi),
html[data-theme="dark"] body.nx-portal[data-portal="admin"] :is(.card-w,.kpi,.rp-card,.cleanup-panel,.cleanup-kpi):hover {
  background-color: var(--nx-surface) !important; border-color: var(--nx-border) !important;
  box-shadow: var(--nx-shadow) !important;
}
html[data-theme="dark"] body.nx-portal[data-portal="admin"] :is(.adm-header .hd-title,.hero-brand h2) { color: var(--nx-text) !important; }
html[data-theme="dark"] body.nx-portal[data-portal="admin"] .hero-sub { color: var(--nx-muted) !important; }
.nx-portal :is(input,button,select,textarea) { font-family: var(--nx-font); }
.nx-portal :is(code,pre,kbd,samp,.font-monospace) { font-family: var(--nx-mono); }
.nx-portal :is(img,video) { max-width: 100%; }
.nx-portal :is(.adm-sidebar,.cp-sidebar,.adm-header,.cp-header) {
  background: var(--nx-surface); border-color: var(--nx-border); backdrop-filter: none;
}
.nx-portal :is(.sb-brand,.cp-brand) { min-width: 0; }
.nx-portal :is(.sb-brand,.cp-brand) img { max-width: 100%; max-height: 40px; object-fit: contain; }
.nx-portal :is(.sb-link,.sb-toggle,.cp-nav-link) { border-radius: var(--nx-control-radius); }
/* Sidebar section labels and the user role line: 12px sentence case in all three
   shells. Customer/agent already got this; admin's .sb-label/.sb-user-role kept the
   old 10px uppercase micro-label. */
.nx-portal :is(.sb-label,.sb-section-title,.sb-user-role) {
  color: var(--nx-muted); font-size: 12px; text-transform: none; letter-spacing: normal;
}
.nx-portal :is(.hd-title,.cp-page-title) { min-width: 0; overflow-wrap: anywhere; }
.nx-portal :is(.hd-search,.cp-header-title) { min-width: 0; }
.nx-portal .hd-search { width: clamp(160px,22vw,280px); }
.nx-portal :is(.hd-theme-btn,.hd-collapse-btn,.sb-mobile-toggle,.cp-theme-btn) {
  min-width: 36px; min-height: 36px; flex-shrink: 0; border-radius: var(--nx-control-radius);
}
.nx-portal[data-portal="agent"] .hd-theme-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: var(--nx-inset); border: 1px solid var(--nx-border); color: var(--nx-text);
}
.nx-portal[data-portal="agent"] .hd-theme-btn:hover { background: var(--nx-surface); border-color: var(--nx-border-strong); }
.nx-portal :is(.adm-toast,.ui-toast) { min-width: 0; width: max-content; max-width: calc(100vw - 24px); }
.nx-portal .nx-portal-footer { overflow-wrap: anywhere; }

/* Shared button geometry, then explicit meaning. No form/submit semantics here. */
.nx-portal :is(.btn,.ui-btn,.pg-btn,.pg-add,.cp-btn,.rpt-btn,.nx-btn) {
  min-height: 36px; padding: 7px 13px; border-radius: var(--nx-control-radius);
  font-family: var(--nx-font); font-size: 13px; font-weight: 600; line-height: 1.4;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  vertical-align: middle; text-decoration: none; box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nx-portal :is(.btn,.ui-btn,.pg-btn,.cp-btn,.rpt-btn,.nx-btn):hover {
  transform: none; box-shadow: none; filter: none;
}
.nx-portal :is(.btn,.ui-btn,.pg-btn,.cp-btn,.rpt-btn,.nx-btn):active { transform: none; }
.nx-portal :is(.btn-primary,.btn-info,.btn-success,.pg-add,.cp-btn-primary,.ui-btn.primary,.ui-btn.success,.pg-btn.primary,.pg-btn.save,.nx-btn-primary) {
  background: var(--nx-accent); border: 1px solid var(--nx-accent); color: var(--nx-on-accent, #fff);
  transition: border-color .15s, box-shadow .15s;
}
.nx-portal :is(.btn-primary,.btn-info,.btn-success,.pg-add,.cp-btn-primary,.ui-btn.primary,.ui-btn.success,.pg-btn.primary,.pg-btn.save,.nx-btn-primary):hover {
  background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-on-accent, #fff);
  box-shadow: inset 0 0 0 1px currentColor;
}
html[data-theme] body.nx-portal :is(.btn-primary,.btn-info,.btn-success,.pg-add,.cp-btn-primary,.ui-btn.primary,.ui-btn.success,.pg-btn.primary,.pg-btn.save,.nx-btn-primary,.te-save,.btn-form-save,.rpt-btn.primary) span { color: inherit !important; }
.nx-portal :is(.btn-secondary,.btn-light,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info,.btn-outline-success,.cp-btn-secondary,.nx-btn-secondary) {
  background: var(--nx-surface); border: 1px solid var(--nx-border); color: var(--nx-text);
}
.nx-portal :is(.btn-secondary,.btn-light,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info,.btn-outline-success,.cp-btn-secondary,.nx-btn-secondary):hover {
  background: var(--nx-inset); border-color: var(--nx-border-strong); color: var(--nx-text);
}
.nx-portal :is(.btn-danger,.btn-outline-danger,.ui-btn.danger,.pg-btn.danger,.nx-btn-danger) {
  background: var(--nx-surface); color: var(--nx-danger);
  border: 1px solid color-mix(in srgb, var(--nx-danger) 35%, var(--nx-border));
}
.nx-portal :is(.btn-danger,.btn-outline-danger,.ui-btn.danger,.pg-btn.danger,.nx-btn-danger):hover {
  color: var(--nx-danger); background: var(--color-danger-soft); border-color: var(--nx-danger);
}
.nx-portal :is(.btn-warning,.nx-btn-warning) {
  color: var(--nx-warning); background: var(--color-warning-soft); border-color: var(--nx-warning);
}
/* Named legacy controls not built from .btn; keep their payload/hooks intact. */
html body.nx-portal :is(.btn-form-save,.btn-form-cancel,.btn-trunk-save,.te-save,.te-cancel,.nf-act,.dd-btn) {
  min-height: 36px; padding: 7px 13px; border-radius: var(--nx-control-radius);
  font: 600 13px/1.4 var(--nx-font); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; text-decoration: none;
  box-shadow: none; transform: none; filter: none;
}
html body.nx-portal :is(.btn-form-save,.btn-trunk-save,.te-save,.dd-btn.primary,.rpt-btn.primary),
html body.nx-portal :is(.btn-form-save,.btn-trunk-save,.te-save,.dd-btn.primary,.rpt-btn.primary):hover {
  background: var(--nx-accent); border: 1px solid var(--nx-accent); color: var(--nx-on-accent, #fff);
  transition: border-color .15s, box-shadow .15s;
}
html body.nx-portal :is(.btn-form-cancel,.te-cancel,.nf-act,.dd-btn.ghost) {
  background: var(--nx-surface); border: 1px solid var(--nx-border); color: var(--nx-text);
}
html body.nx-portal :is(.btn-form-cancel,.te-cancel,.nf-act,.dd-btn.ghost):hover {
  background: var(--nx-inset); border-color: var(--nx-border-strong); color: var(--nx-text);
}
html body.nx-portal :is(.nf-act.danger,.dd-btn.danger) { color: var(--nx-danger); }
html body.nx-portal :is(.btn-form-save,.btn-trunk-save,.te-save,.dd-btn.primary):hover {
  box-shadow: inset 0 0 0 1px currentColor;
}
/* Earlier editor skins used !important on this one label; preserve contrast. */
html[data-theme] body.nx-portal .te-editor .te-dids .dd-btn.primary span { color: var(--nx-on-accent, #fff) !important; }
.nx-portal :is(.btn-sm,.ui-btn.sm) { min-height: 32px; padding: 5px 10px; font-size: 12px; }
html[data-theme] body.nx-portal :is(button,input,select,textarea,a,[tabindex]):focus-visible {
  outline: 2px solid var(--nx-accent); outline-offset: 2px;
}
.nx-portal :is(button,input,select,textarea):disabled {
  cursor: not-allowed; opacity: .6;
}
.nx-portal .nx-busy { cursor: progress; }
.nx-portal .nx-busy::after {
  content: ''; width: 13px; height: 13px; flex: 0 0 13px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: nx-spin .75s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

.nx-portal :is(.form-control,.form-select,.ui-input,.ui-select,.ui-textarea,.cp-input,.cp-select,.nx-input) {
  min-height: 36px; border-radius: var(--nx-control-radius); border-color: var(--nx-border);
  background-color: var(--nx-surface); color: var(--nx-text); font-size: 14px; line-height: 1.5;
}
.nx-portal :is(.form-control,.form-select,.ui-input,.ui-select,.ui-textarea,.cp-input,.cp-select,.nx-input):focus {
  border-color: var(--nx-border-strong); box-shadow: none;
}
.nx-portal :is(.form-control,.ui-input,.cp-input,.nx-input)::placeholder { color: var(--nx-muted); opacity: .9; }
html body.nx-portal :is(.rpe-weight,.rpe-limit,.rpe-cost-type,.rpe-cost-val,.lcr-mode-select) {
  min-height: 36px; border-radius: var(--nx-control-radius); font-family: var(--nx-font);
  font-size: 13px; background-color: var(--nx-surface); color: var(--nx-text);
}
html body.nx-portal .rpe-cost-type { font-size: 13px !important; min-width: 90px; }
html body.nx-portal #notifOverrideForm .form-select { min-width: 140px; }
.nx-portal :is(.form-label,.ui-label,.cp-label,.filter-bar .form-label,.ui-kpi-label,.ui-metric-label,.rpt-kpi-label,.rpt-strip-label) {
  font-size: 12px; font-weight: 600; color: var(--nx-muted); line-height: 1.45;
  letter-spacing: .01em; text-transform: none;
}
.nx-portal :is(.form-text,.ui-help,.cp-help) { font-size: 12px; line-height: 1.5; color: var(--nx-muted); }
html body.nx-portal .cp-kpi .kp-label {
  font-size: 12px; line-height: 1.45; letter-spacing: .01em; text-transform: none; color: var(--nx-muted);
}
.nx-portal .form-check-input:checked { background-color: var(--nx-accent); border-color: var(--nx-accent); }
.nx-portal :is(.card,.ui-card,.cp-card,.cp-panel,.form-section,.filter-bar,.panel,.nx-card) {
  border-radius: var(--nx-radius); border-color: var(--nx-border);
  background-color: var(--nx-surface); box-shadow: var(--nx-shadow);
}
.nx-portal :is(.card-header,.card-footer,.panel-head,.cp-ph) {
  background-color: var(--nx-surface); border-color: var(--nx-border); color: var(--nx-text);
}
.nx-portal :is(.ui-kpi-val,.ui-metric-val,.rpt-kpi-val,.rpt-strip-val,.cp-kpi .kpi-value,.cp-kpi .kp-val) {
  font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere;
}
.nx-portal :is(.ui-page-head,.ui-page-actions,.ui-card-head,.ui-card-foot,.pg-header,.pg-actions,.rpt-head-r) {
  flex-wrap: wrap; min-width: 0; gap: 12px;
}
.nx-portal :is(.ui-page-title,.pg-title,.nx-page-title) { line-height: 1.25; overflow-wrap: anywhere; }
.nx-portal .nx-page-title { font-size: clamp(22px,2vw,28px); font-weight: 650; letter-spacing: -.025em; }
.nx-portal :is(.table,.ui-table,.cp-table) {
  --bs-table-bg: var(--nx-surface); --bs-table-color: var(--nx-text);
  --bs-table-border-color: var(--nx-border); --bs-table-hover-bg: var(--nx-inset);
  --bs-table-hover-color: var(--nx-text); color: var(--nx-text);
}
.nx-portal :is(.table,.ui-table,.cp-table) th { color: var(--nx-muted); font-size: 12px; line-height: 1.4; }
.nx-portal :is(.tbl-scroll,.table-responsive,.nx-table-scroll) {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.nx-portal :is(.tbl-scroll,.table-responsive,.nx-table-scroll):focus-visible { outline-offset: -2px; }
.nx-portal :is(.dropdown-menu,.modal-content,.ui-modal) {
  background-color: var(--nx-surface); color: var(--nx-text); border-color: var(--nx-border);
  border-radius: var(--nx-radius); box-shadow: var(--nx-shadow-pop);
}
.nx-portal .modal-dialog { max-width: min(var(--bs-modal-width,500px),calc(100vw - 24px)); }
.nx-portal :is(.modal-header,.modal-footer) { border-color: var(--nx-border); flex-wrap: wrap; gap: 8px; }
.nx-portal .modal-body { min-width: 0; overflow-wrap: anywhere; }
.nx-portal .pagination { flex-wrap: wrap; gap: 4px; }
.nx-portal .page-link { background: var(--nx-surface); color: var(--nx-text); border-color: var(--nx-border); }
.nx-portal .page-item.active .page-link { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-on-accent, #fff); }
.nx-portal .nx-skip-link {
  position: fixed; top: -80px; left: 12px; z-index: 11000; padding: 10px 16px;
  color: var(--nx-text); background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: 8px;
}
.nx-portal .nx-skip-link:focus { top: 12px; }
.nx-portal.nx-nav-open { overflow: hidden; }

/* Refined surfaces: explicit component families, never input/switch images. */
html[data-theme] body.nx-portal :is(.pg-head,.rpt-head,.sr-head,.rp-head,.mc-hero,.mx-hero,.ec-hero,.po-hero,.pf-hero) {
  border-radius: calc(var(--nx-radius) + 2px); border-color: var(--nx-border);
  background-color: var(--nx-surface); background-image: var(--nx-texture);
  box-shadow: var(--nx-shadow); padding: 20px; gap: 16px;
}
html[data-theme] body.nx-portal :is(.pg-head-l h1,.rpt-head-l h1,.sr-head h1,.rp-head h1,.mc-hero-title,.mx-hero-title,.ec-hero-title,.po-hero-title,.pf-hero-title) {
  font: 700 clamp(23px,2.1vw,28px)/1.2 var(--nx-font); letter-spacing: -.035em;
  color: var(--nx-text); overflow-wrap: anywhere;
}
html[data-theme] body.nx-portal :is(.pg-head-sub,.rpt-head-l .sub,.sr-sub,.rp-head .sub,.mc-hero-sub,.mx-hero-sub,.ec-hero-sub,.po-hero-sub,.pf-hero-sub) {
  margin-top: 8px; font-size: 13px; line-height: 1.55; font-weight: 400; color: var(--nx-muted);
}
html[data-theme] body.nx-portal :is(.pg-card,.rpt-card,.sr-card,.cq-card,.cr-chart-card,.ibr-panel,.geo-card,.cp-panel,.cp-card,.card-w,.form-section-card,.tpanel,.nf-form,.rr-card,.rr-form) {
  border-radius: var(--nx-radius); border-color: var(--nx-border);
  background-color: var(--nx-surface); background-image: var(--nx-texture); box-shadow: var(--nx-shadow);
}
/* Nested settings are sections, not another elevated card inside a card. */
html[data-theme] body.nx-portal :is(.form-section-card,.tpanel,.nf-form,.rr-form) { box-shadow: none; background-image: none; }
html[data-theme] body.nx-portal :is(.pg-card-hd,.rpt-card-hd,.sr-card-hd,.sr-section-hd,.cq-card-head,.cr-chart-head,.cr-table-head,.ibr-panel-head,.geo-card .hd,.cp-ph,.card-h,.form-sec-hd,.tpanel-head) {
  background-color: color-mix(in srgb,var(--nx-inset) 25%,var(--nx-surface));
  border-color: var(--nx-border); padding: 14px 18px; gap: 12px; line-height: 1.4;
  font-family: var(--nx-font); font-weight: 650;
}
html[data-theme] body.nx-portal :is(.pg-card-hd h3,.rpt-card-hd h3,.cp-ph h3,.te-panel-copy h3) {
  font-size: 15px; font-weight: 650; letter-spacing: -.015em; color: var(--nx-text);
}

/* Summary tiles: separate quiet cards; keep existing responsive column counts. */
html[data-theme] body.nx-portal :is(.pg-stats,.rpt-page .rpt-kpi,.rpt-page .rpt-strip,.rpt-page .cr-kpi-strip) {
  gap: 12px; border: 0; background: transparent; box-shadow: none; overflow: visible;
}
html[data-theme] body.nx-portal :is(.pg-stat,.rpt-page .rpt-kpi-cell,.rpt-page .rpt-strip-cell,.rpt-page .cr-kpi,.cp-kpi,.cp-meter,.ar-kpi-card,.ibr-kpi,.geo-kpi) {
  min-width: 0; padding: 15px 16px; border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius); background-color: var(--nx-surface);
  background-image: var(--nx-texture); box-shadow: var(--nx-shadow);
}
html[data-theme] body.nx-portal :is(.pg-stat-lbl,.rpt-kpi-lbl,.rpt-strip-lbl,.sr-cell-lbl,.cr-kpi-lbl,.ar-kpi-label,.ibr-kpi-lbl,.geo-kpi .l,.cp-kpi .kp-label,.cp-meter-label) {
  font: 600 12px/1.45 var(--nx-font); letter-spacing: .005em; text-transform: none;
  color: var(--nx-muted); white-space: normal; overflow: visible; text-overflow: clip;
}
html[data-theme] body.nx-portal :is(.pg-stat-val,.rpt-kpi-val,.sr-cell-val,.cr-kpi-val,.ar-kpi-val,.ibr-kpi-val,.geo-kpi .v,.cp-kpi .kp-val) {
  font-family: var(--nx-font); font-size: clamp(21px,1.55vw,25px); line-height: 1.2;
  font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  white-space: normal; overflow: visible; text-overflow: clip;
}
html[data-theme] body.nx-portal :is(.pg-stat-sub,.rpt-kpi-sub,.sr-cell-sub,.cr-kpi-sub,.cp-meter-sub) {
  font-size: 12px; line-height: 1.5; color: var(--nx-muted); margin-top: 7px;
}
html[data-theme] body.nx-portal .rpt-strip-val { font-size: clamp(21px,1.55vw,25px); line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
html[data-theme] body.nx-portal .rpt-page .rpt-strip-lbl { margin-bottom: 7px; }
html[data-theme] body.nx-portal .rpt-page .rpt-strip-sub { font-size: 12px; line-height: 1.5; color: var(--nx-muted); margin-top: 7px; }
html[data-theme] body.nx-portal .cp-kpi .kp-icon {
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--nx-border);
  background: color-mix(in srgb,var(--nx-inset) 75%,var(--nx-surface)); color: var(--nx-muted);
  box-shadow: inset 0 1px 0 var(--nx-sheen);
}
html[data-theme] body.nx-portal[data-portal="customer"] .rpt-kpis .rpt-kpi {
  border-radius: var(--nx-radius); background-image: var(--nx-texture); box-shadow: var(--nx-shadow);
}
html[data-theme] body.nx-portal .cp-meter .ring-bg { stroke: var(--nx-border); }
html[data-theme] body.nx-portal :is(.rpt-filter,.cdr-filter,.tx-filter,.filter-bar) {
  border-color: var(--nx-border); border-radius: var(--nx-radius);
  background-color: var(--nx-surface); background-image: var(--nx-texture); box-shadow: var(--nx-shadow);
}
html[data-theme] body.nx-portal :is(.rpt-filter-label,.rpt-filter label,.rpt-filter .fld-label,.cdr-filter label,.tx-filter label,.sr-section-hd) {
  font-size: 12px; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: .005em;
}
html[data-theme] body.nx-portal :is(.rpt-filter input[type="date"],.rpt-filter input[type="text"],.rpt-filter select,.cq-custom input[type="date"],.cq-custom select,.cr-filters select) { border-radius: var(--nx-control-radius); box-shadow: var(--nx-control-shadow); }

/* Inset segmented navigation. No active/hidden lifecycle or link changes. */
html[data-theme] body.nx-portal :is(.cp-tabs,.ec-tabs,.rpt-tabs,.rpt-seg,.rpt-presets,.rpt-quick,.cq-pills,.cr-pills,.ar-period-tabs,.geo-tabs,.geo-seg,.ctab-bar,.ibr-time-btns) {
  max-width: 100%; min-width: 0; padding: 4px; gap: 4px; border: 1px solid var(--nx-border);
  border-radius: 13px; background: var(--nx-segment); box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
}
html[data-theme] body.nx-portal :is(.cp-tab,.ec-tab,.rpt-tab,.rpt-seg-btn,.rpt-preset,.rpt-quick a,.rpt-quick button,.cq-pill,.cr-pill,.ar-period-tab,.geo-tabs button,.geo-seg button,.ctab-btn,.ibr-time-btns a) {
  min-height: 36px; padding: 8px 13px; margin-bottom: 0; border: 1px solid transparent;
  border-radius: 9px; background: transparent; color: var(--nx-muted) !important;
  font: 550 13px/1.4 var(--nx-font); text-decoration: none; box-shadow: none;
  transition: background-color .14s, box-shadow .14s; transform: none;
}
html[data-theme] body.nx-portal :is(.cp-tab,.ec-tab,.rpt-tab,.rpt-seg-btn,.rpt-preset,.rpt-quick a,.rpt-quick button,.cq-pill,.cr-pill,.ar-period-tab,.geo-tabs button,.geo-seg button,.ctab-btn,.ibr-time-btns a):hover {
  color: var(--nx-text) !important; background: color-mix(in srgb,var(--nx-surface) 55%,transparent);
}
html[data-theme] body.nx-portal :is(.cp-tab.active,.ec-tab.active,.rpt-tab.active,.rpt-seg-btn.active,.rpt-preset.active,.rpt-quick a.active,.rpt-quick button.active,.cq-pill.active,.cr-pill.active,.ar-period-tab.active,.geo-tabs button.on,.geo-seg button.on,.ctab-btn.active,.ibr-time-btns a.active) {
  color: var(--nx-text) !important; background: var(--nx-surface); border-color: color-mix(in srgb,var(--nx-border) 55%,transparent);
  font-weight: 650; box-shadow: var(--nx-selection-shadow);
}
html[data-theme] body.nx-portal .rpt-tab.active .rpt-card-hd-tag { background: var(--nx-inset); color: var(--nx-muted); }
/* Section nav: accent wash + readable neutral text at any tenant accent.
   Not a white raised chip (rejected) and not a solid blue rectangle. */
html[data-theme] body.nx-portal :is(.rpt-tabs .rpt-tab.active,.ctab-bar .ctab-btn.active) {
  background: var(--nx-accent-soft); border-color: color-mix(in srgb,var(--nx-accent) 22%,transparent);
  color: var(--nx-text) !important; box-shadow: none;
}
html[data-theme] body.nx-portal :is(.rpt-tabs .rpt-tab.active,.ctab-bar .ctab-btn.active) :is(span,i) { color: inherit !important; }
html[data-theme] body.nx-portal .rpt-tab.active .rpt-card-hd-tag { background: transparent; color: inherit !important; }

/* Settings rail and report submenu: quiet selection, original navigation intact. */
html[data-theme] body.nx-portal .te-topbar { padding: 12px 16px; border-radius: 12px; background-image: var(--nx-texture); box-shadow: var(--nx-shadow); }
html[data-theme] body.nx-portal .te-head-copy h2 { font: 650 18px/1.3 var(--nx-font); letter-spacing: -.02em; }
html[data-theme] body.nx-portal .te-head-copy p { font-size: 12px; line-height: 1.45; }
html[data-theme] body.nx-portal .te-panels { border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); }
html[data-theme] body.nx-portal .te-rail { background: color-mix(in srgb,var(--nx-inset) 55%,var(--nx-surface)); border-color: var(--nx-border); border-radius: 12px; box-shadow: none; }
html[data-theme] body.nx-portal .te-rail-title { font-size: 12px; letter-spacing: .015em; text-transform: none; color: var(--nx-muted); }
html[data-theme] body.nx-portal .te-tab { border-radius: var(--nx-control-radius); font-size: 13px; }
html[data-theme] body.nx-portal .te-tab.active {
  background: var(--nx-accent-soft); box-shadow: none; color: var(--nx-text);
}
html[data-theme] body.nx-portal .te-editor .te-tab.active :is(span,i) { color: var(--nx-text) !important; }
html[data-theme] body.nx-portal .te-editor :is(.form-control,.form-select):focus {
  border-color: var(--nx-border-strong) !important; box-shadow: none !important;
}
html[data-theme] body.nx-portal .te-editor :is(.form-control,.form-select):focus-visible {
  outline: 2px solid var(--nx-accent); outline-offset: 2px;
}
html[data-theme] body.nx-portal .te-editor :is(.te-status,.te-switch-card,.te-toggle) .form-check-input:focus-visible {
  box-shadow: none !important; outline: 2px solid var(--nx-accent); outline-offset: 3px;
}
html[data-theme] body.nx-portal .te-mobile-picker { border-radius: var(--nx-control-radius); background: var(--nx-surface); border-color: var(--nx-border); box-shadow: var(--nx-control-shadow); }
html[data-theme] body.nx-portal #sb-reports > .sb-link { border-radius: 9px; margin-block: 2px; }
html[data-theme] body.nx-portal #sb-reports > .sb-link.active { background: var(--nx-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--nx-accent) 9%,transparent); }

/* Tactile controls: subtle highlights, no hover lift or animated gloss. */
html[data-theme] body.nx-portal :is(.btn,.ui-btn,.pg-btn,.pg-add,.pg-back,.cp-btn,.rpt-btn,.nx-btn,.btn-form-save,.btn-form-cancel,.te-save,.te-cancel,.nf-act) {
  border-radius: var(--nx-control-radius); min-height: 40px; box-shadow: var(--nx-control-shadow);
}
html[data-theme] body.nx-portal :is(.btn,.ui-btn,.pg-btn,.pg-add,.pg-back,.cp-btn,.rpt-btn,.nx-btn,.btn-form-save,.btn-form-cancel,.te-save,.te-cancel,.nf-act):active { box-shadow: inset 0 1px 3px rgb(0 0 0 / 8%); transform: none; }
html[data-theme] body.nx-portal :is(.btn-primary,.btn-info,.btn-success,.pg-add,.pg-btn.save,.cp-btn-primary,.ui-btn.primary,.nx-btn-primary,.btn-form-save,.te-save,.rpt-btn.primary,.rpt-btn-primary,.pf-btn.primary,.rate-save-btn) {
  background-color: var(--nx-accent); color: var(--nx-on-accent,#fff) !important;
  border-color: var(--nx-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 2px 3px rgb(0 0 0 / 7%);
}
html[data-theme] body.nx-portal .rate-save-btn :is(span,i) { color: var(--nx-on-accent,#fff) !important; }
html[data-theme] body.nx-portal :is(.rpt-page .cr-go,.rpt-page .cq-custom button) { color: var(--nx-on-accent,#fff) !important; box-shadow: var(--nx-control-shadow); }
/* Legacy :focus shadows also run after pointer clicks. No coloured outer halo;
   retain a crisp, theme-aware focus-visible outline for keyboard navigation. */
html[data-theme] body.nx-portal :is(button,.btn,.ui-btn,.pg-btn,.pg-add,.pg-back,.cp-btn,.rpt-btn,.nx-btn,.btn-form-save,.btn-form-cancel,.te-save,.te-cancel,.nf-act,.dd-btn,.pf-btn,.rp-action,.rd-action,.rate-save-btn,.rate-cancel-btn,.rate-action-btn):focus { box-shadow: none !important; }
html[data-theme] body.nx-portal :is(button,.btn,.ui-btn,.pg-btn,.pg-add,.pg-back,.cp-btn,.rpt-btn,.nx-btn,.btn-form-save,.btn-form-cancel,.te-save,.te-cancel,.nf-act,.dd-btn,.pf-btn,.rp-action,.rd-action,.rate-save-btn,.rate-cancel-btn,.rate-action-btn):focus:not(:focus-visible) { outline: none; }
html[data-theme] body.nx-portal :is(input,select,textarea):focus { box-shadow: none !important; }
html[data-theme] body.nx-portal[data-portal] :is(.form-control,.form-select,.ui-input,.ui-select,.ui-textarea,.cp-input,.cp-select,.nx-input,.pf-input,.pf-select,.pf-textarea,.rpe-weight,.rpe-limit,.rpe-cost-type,.rpe-cost-val,.lcr-mode-select,.te-scope-select,.rr-in,.em-entry,.rpt-filter input,.rpt-filter select,.cq-custom input,.cq-custom select,.cr-filters select,.pg-search input,.hd-search input,.rate-form-field input):focus:not([style*="border-color"]):not(.is-invalid,[aria-invalid="true"]) {
  border-color: var(--nx-border-strong) !important; box-shadow: none !important;
}
html[data-theme] body.nx-portal :is(.is-invalid,[aria-invalid="true"]):focus { border-color: var(--nx-danger) !important; }
html[data-theme] body.nx-portal :is(button,input,select,textarea,a,[tabindex]):focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
html[data-theme] body.nx-portal .te-editor .form-check-input:focus-visible { box-shadow: none !important; outline: 2px solid var(--nx-accent); outline-offset: 3px; }
html[data-theme] body.nx-portal :is(.pg-tbl,.rpt-tbl,.cr-tbl,.ibr-table,.geo-tbl,.te-live-table,.dd-table) th {
  font-size: 12px; line-height: 1.45; font-weight: 600; text-transform: none; letter-spacing: .005em;
}
html[data-theme] body.nx-portal :is(.rpt-empty,.sr-empty,.cq-empty,.cr-empty,.ibr-empty,.geo-empty) {
  padding: 40px 24px; font-size: 13px; line-height: 1.6; color: var(--nx-muted);
}
/* Bootstrap compatibility: radius variables and the old !important utility
   shadows were bypassing the shared card rules. Preserve semantic backgrounds,
   border widths/status edges and dropdown overflow. */
html[data-theme] body.nx-portal .card {
  --bs-card-border-radius: var(--nx-radius);
  --bs-card-inner-border-radius: calc(var(--nx-radius) - 1px);
  --bs-card-cap-bg: var(--nx-surface);
  border-radius: var(--nx-radius); min-width: 0;
  box-shadow: var(--nx-shadow) !important;
}
/* Legacy dark CSS paints card bodies too. Round only exposed body corners;
   never clip the whole card, which would cut dropdowns and focus outlines. */
html[data-theme] body.nx-portal .card > .card-body:first-child { border-start-start-radius: var(--bs-card-inner-border-radius); border-start-end-radius: var(--bs-card-inner-border-radius); }
html[data-theme] body.nx-portal .card > .card-body:last-child { border-end-start-radius: var(--bs-card-inner-border-radius); border-end-end-radius: var(--bs-card-inner-border-radius); }
html[data-theme] body.nx-portal :is(.card-header:not([class*="bg-"]),.card-header.bg-light,.card-footer:not([class*="bg-"]),.card-footer.bg-light) {
  background-color: var(--nx-surface) !important; color: var(--nx-text);
  border-color: var(--nx-border); gap: 12px; flex-wrap: wrap;
}
/* Bootstrap and older agent/audit section tabs share the same selection
   contract. No display rule touches panels or Bootstrap's tab lifecycle. */
html[data-theme] body.nx-portal :is(.nav-tabs,.assign-tabs,.audit-tabs) {
  --bs-nav-link-color: var(--nx-muted); --bs-nav-link-hover-color: var(--nx-text);
  --bs-nav-tabs-border-width: 0; --bs-nav-tabs-link-active-color: var(--nx-text);
  display: flex; flex-wrap: wrap; max-width: 100%; min-width: 0;
  padding: 4px; gap: 4px; border: 1px solid var(--nx-border);
  border-radius: 13px; background: var(--nx-segment); box-shadow: none;
}
html[data-theme] body.nx-portal .nav-tabs .nav-item { min-width: 0; max-width: 100%; }
html[data-theme] body.nx-portal :is(.nav-tabs .nav-link,.assign-tab,.audit-tabs a) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; max-width: 100%; padding: 8px 13px; margin: 0;
  border: 1px solid transparent; border-radius: 9px;
  font: 550 13px/1.4 var(--nx-font); text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; color: var(--nx-muted);
  background: transparent; box-shadow: none; transform: none;
}
html[data-theme] body.nx-portal :is(.nav-tabs .nav-link,.assign-tab,.audit-tabs a):hover {
  color: var(--nx-text); background: var(--nx-surface); box-shadow: none;
}
html[data-theme] body.nx-portal :is(.nav-tabs .nav-link.active,.assign-tabs .assign-tab.active,.audit-tabs a.active) {
  color: var(--nx-text); background: var(--nx-accent-soft);
  border-color: color-mix(in srgb,var(--nx-accent) 22%,transparent);
  font-weight: 650; box-shadow: none;
}
html[data-theme] body.nx-portal .nav-tabs .nav-link:is(.disabled,:disabled,[aria-disabled="true"]) {
  color: var(--nx-muted); opacity: .55; background: transparent; border-color: transparent;
  pointer-events: none; box-shadow: none;
}
/* Legacy admin agent/inbound/server KPI families missed the first shared pass. */
html[data-theme] body.nx-portal :is(.agt-page-head,.ap-page-head,.ap-actions,.assign-card-head,.ap-panel-head) { min-width: 0; flex-wrap: wrap; gap: 12px; }
html[data-theme] body.nx-portal :is(.agt-page-head h4,.ap-page-head h4) { font: 650 clamp(22px,2vw,28px)/1.25 var(--nx-font); letter-spacing: -.025em; overflow-wrap: anywhere; }
html[data-theme] body.nx-portal :is(.agt-page-sub,.ap-page-sub) { font-size: 13px; line-height: 1.5; color: var(--nx-muted); }
html[data-theme] body.nx-portal :is(.agt-stats-row,.ap-stats-row) { gap: 12px; }
html[data-theme] body.nx-portal :is(.agt-stat-tile,.ap-stat-tile,.vm-page .audio-stat-tile) {
  min-width: 0; padding: 18px; border-color: var(--nx-border);
  border-radius: var(--nx-radius); background: var(--nx-texture); box-shadow: var(--nx-shadow);
}
html[data-theme] body.nx-portal :is(.agt-stat-tile,.ap-stat-tile,.vm-page .audio-stat-tile) > div { min-width: 0; max-width: 100%; }
html[data-theme] body.nx-portal :is(.agt-stat-lbl,.ap-stat-lbl,.ib-kpi-label,.vm-page .audio-stat-lbl,.sm-kpi-lbl) {
  font: 600 12px/1.45 var(--nx-font); letter-spacing: .005em; text-transform: none;
  color: var(--nx-muted); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
html[data-theme] body.nx-portal :is(.agt-stat-val,.ap-stat-val,.ib-kpi-val,.vm-page .audio-stat-val,.sm-kpi-val) {
  font: 650 clamp(24px,2vw,29px)/1.2 var(--nx-font); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
html[data-theme] body.nx-portal .ib-kpi-sub { font-size: 12px; line-height: 1.5; }
html[data-theme] body.nx-portal :is(.assign-card,.ap-panel,.sm-card) { border-radius: var(--nx-radius); border-color: var(--nx-border); background: var(--nx-surface); box-shadow: var(--nx-shadow); }
html[data-theme] body.nx-portal :is(.assign-card-head,.ap-panel-head:not(.warn),.sm-card-hd) { background: var(--nx-surface); color: var(--nx-text); font-size: 14px; text-transform: none; letter-spacing: 0; }
html[data-theme] body.nx-portal :is(.assign-tbl,.ap-tbl,.sm-tbl) th { font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: .005em; }
html[data-theme] body.nx-portal :is(.ap-btn-primary,.ap-filter-bar button,.ap-filter-bar a,.ap-page-head .btn-light-outline,.sm-btn,.ib-btn) {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nx-control-radius); font-size: 13px; box-shadow: var(--nx-control-shadow);
}
html[data-theme] body.nx-portal :is(.ap-btn-primary,.ap-filter-bar button,.sm-btn.primary) { background: var(--nx-accent); color: var(--nx-on-accent,#fff); }
html[data-theme] body.nx-portal :is(.ap-btn-primary,.ap-filter-bar button,.ap-page-head .btn-light-outline,.sm-btn,.ib-btn):hover { filter: none; transform: none; box-shadow: var(--nx-control-shadow); }
html[data-theme] body.nx-portal .ap-filter-bar select { min-height: 40px; max-width: 100%; min-width: min(200px,100%); }
html[data-theme] body.nx-portal .sm-kpi { grid-template-columns: repeat(4,minmax(0,1fr)); }
html[data-theme] body.nx-portal .sm-kpi-cell { flex-wrap: wrap; }
html[data-theme] body.nx-portal .audit-page .stat-tile > div { min-width: 0; max-width: 100%; }
html[data-theme] body.nx-portal .audit-page .stat-val { overflow-wrap: anywhere; white-space: normal; }
/* Inbound owns a nested palette, so body aliases alone cannot reach it. */
html[data-theme] body.nx-portal .ib-wrap {
  --ib-bg: var(--nx-canvas); --ib-card: var(--nx-surface); --ib-card-hover: var(--nx-surface);
  --ib-border: var(--nx-border); --ib-border-hover: var(--nx-border-strong);
  --ib-text-primary: var(--nx-text); --ib-text-secondary: var(--nx-muted);
  --ib-text-muted: var(--nx-muted); --ib-text-faint: var(--nx-muted);
  --ib-radius: var(--nx-radius); --ib-font: var(--nx-font); --ib-mono: var(--nx-mono);
  --ib-shadow-sm: var(--nx-shadow); --ib-shadow: var(--nx-shadow); --ib-shadow-lg: var(--nx-shadow-pop); --ib-shadow-glow: var(--nx-shadow);
  --ib-teal: var(--nx-accent); --ib-teal-light: var(--nx-accent); --ib-teal-bg: var(--nx-accent-soft);
  --ib-blue: var(--nx-accent); --ib-violet: var(--nx-muted); --ib-cyan: var(--nx-accent);
  --ib-emerald: var(--nx-success); --ib-green: var(--nx-success); --ib-red: var(--nx-danger); --ib-amber: var(--nx-warning);
  --ib-table-header: var(--nx-surface); --ib-table-hover: var(--nx-inset);
}
@media (max-width: 640px) {
  html[data-theme] body.nx-portal :is(.agt-stats-row,.ap-stats-row,.vm-page .audio-stats-row,.sm-kpi,.audit-page .stats-row) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] body.nx-portal :is(.agt-stat-tile,.ap-stat-tile,.vm-page .audio-stat-tile) { padding: 14px 12px; }
  html[data-theme] body.nx-portal .audit-page .stat-tile { flex-direction: column; align-items: flex-start; }
  /* Agent Reports uses Bootstrap columns, not a named KPI grid. Match the
     actual card family only; leave unrelated Bootstrap form/table rows alone. */
  html[data-theme] body.nx-portal .row:has(> .col-md-3 > .ar-kpi-card) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-inline: 0; }
  html[data-theme] body.nx-portal .row > .col-md-3:has(> .ar-kpi-card) { width: auto; min-width: 0; padding-inline: 0; margin-top: 0; }
  html[data-theme] body.nx-portal .ap-filter-bar select { font-size: 16px; }
}
@media (max-width: 640px), (pointer: coarse) {
  html[data-theme] body.nx-portal :is(.nav-tabs .nav-link,.assign-tab,.audit-tabs a,.ap-btn-primary,.ap-filter-bar button,.ap-filter-bar a,.ap-page-head .btn-light-outline,.sm-btn,.ib-btn) { min-height: 44px; }
  html[data-theme] body.nx-portal .ap-filter-bar select { min-height: 44px; font-size: 16px; }
}
/* Public pages consume these local tokens without changing authentication code. */
html body.nx-auth { --nx-radius: 22px; --nx-control-radius: 12px; --nx-shadow: 0 3px 6px rgb(20 25 35 / 3%), 0 18px 48px rgb(20 25 35 / 6%); }
html body.nx-auth :is(.lx-card,.rp-card,.su-card,.k-card) { background-image: var(--nx-texture); }
html body.nx-auth :is(button,input,select,textarea):focus { box-shadow: none !important; }
html body.nx-auth :is(input,select,textarea):focus { border-color: var(--nx-border-strong); }
html body.nx-auth :is(button,a):focus:not(:focus-visible) { outline: none; }
html body.nx-auth :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

@media (max-width: 1199px) {
  .nx-portal .hd-clock { display: none; }
  .nx-portal .hd-search { width: clamp(150px,20vw,240px); }
}
@media (max-width: 991px) {
  html.sb-pre-collapsed body.nx-portal .adm-content,
  body.nx-portal.sb-collapsed .adm-content,
  body.nx-portal .adm-content { margin-left: 0; }
  html.sb-pre-collapsed body.nx-portal .adm-header,
  body.nx-portal.sb-collapsed .adm-header,
  body.nx-portal .adm-header { left: 0; }
  .nx-portal .nx-portal-footer { margin-left: 0 !important; }
  .nx-portal .cp-sidebar { transform: translateX(-100%); }
  .nx-portal .cp-sidebar.open { transform: translateX(0); }
  .nx-portal .cp-header { left: 0; }
  .nx-portal[data-portal="customer"] > main,
  .nx-portal[data-portal="agent"] > main { margin-left: 0; }
  .nx-portal .sb-overlay.active { display: block; }
  .nx-portal .sb-mobile-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  html[data-theme] body.nx-portal :is(.pg-stats,.rpt-page .rpt-kpi,.cp-kpi-grid,.rpt-kpis) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  /* The legacy report sheet forces a one-column grid with !important. */
  html[data-theme] body.nx-portal :is(.rpt-page .rpt-kpi,.rpt-page .rpt-strip) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html[data-theme] body.nx-portal .rpt-page .rpt-strip-cell { border-right: 0 !important; border-bottom: 0 !important; }
  html[data-theme] body.nx-portal .cp-kpi { flex-direction: column; align-items: flex-start; gap: 12px; }
  html[data-theme] body.nx-portal .cp-kpi .kp-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  html[data-theme] body.nx-portal .cp-kpi > div { min-width: 0; max-width: 100%; }
  html[data-theme] body.nx-portal :is(.pg-head,.rpt-head,.sr-head,.rp-head,.mc-hero,.mx-hero,.ec-hero,.po-hero,.pf-hero) { padding: 18px; }
  html[data-theme] body.nx-portal :is(.pg-stat,.rpt-page .rpt-kpi-cell,.rpt-page .cr-kpi,.cp-kpi,.cp-meter,.ar-kpi-card,.ibr-kpi,.geo-kpi) { padding: 16px; }
  html[data-theme] body.nx-portal :is(.cp-tabs,.ec-tabs,.rpt-tabs,.rpt-seg,.rpt-presets,.rpt-quick,.cq-pills,.cr-pills,.ar-period-tabs,.geo-tabs,.geo-seg,.ibr-time-btns) { flex-wrap: wrap; }
  html[data-theme] body.nx-portal :is(.cp-tab,.ec-tab,.rpt-tab,.rpt-seg-btn,.rpt-preset,.rpt-quick a,.rpt-quick button,.cq-pill,.cr-pill,.ar-period-tab,.geo-tabs button,.geo-seg button,.ibr-time-btns a) { padding-inline: 10px; }
  .nx-portal .adm-content { padding: 16px 12px; }
  /* These legacy canvases bleed by 1rem; match the new shell gutter exactly. */
  .nx-portal .adm-content > :is(.dw,.cst-page,.car-page,.rpl-page,.rpe-page,.ib-wrap,.upl-page,.tok-page,.bill-page,.blg-page,.bdr-page,.su-page,.block-page,.ctrunk-page,.pkg-page,.sim-page,.ird-page,.rdk-page,.did-page,.paym-page,.pay-page,.dup-page,.trunk-page,.vm-page,.ibr-page) {
    margin-inline: -12px; margin-top: -16px;
  }
  .nx-portal .adm-content > .cdr-page { margin: -16px -12px; padding: 16px 12px; }
  .nx-portal .adm-header { padding-inline: 12px; gap: 8px; }
  .nx-portal .hd-title { font-size: 14px; flex: 1; }
  .nx-portal .hd-user-name { display: none; }
  .nx-portal .hd-search { width: 36px; flex-shrink: 0; }
  .nx-portal .hd-search input { padding: 7px 0 7px 34px; cursor: pointer; }
  .nx-portal .hd-search:focus-within {
    position: absolute; inset: 8px 12px auto; width: auto; z-index: 3;
  }
  .nx-portal .hd-search:focus-within input { padding: 7px 12px 7px 34px; background: var(--nx-surface); }
  .nx-portal .hd-search-results { max-height: min(380px,65dvh); }
  .nx-portal .rpt-page { margin: -16px -12px; padding: 16px 12px; }
  .nx-portal :is(.ui-page-head,.ui-card-head,.ui-card-foot) { align-items: flex-start; }
  .nx-portal :is(.ui-metrics,.nx-kpi-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nx-portal .ui-metric { padding: 14px 12px; min-width: 0; }
  html body.nx-portal :is(.form-control,.form-select,.ui-input,.ui-select,.ui-textarea,.cp-input,.cp-select,.nx-input,.em-entry,.rr-in,.te-scope-select,.rpe-weight,.rpe-limit,.rpe-cost-val,.lcr-mode-select,#rpSearch,#globalSearch) { font-size: 16px; }
  html body.nx-portal :is(.rpt-filter input[type="date"],.rpt-filter input[type="text"],.rpt-filter select,.cq-custom input[type="date"],.cq-custom select,.cr-filters select) { font-size: 16px; min-height: 44px; max-width: 100%; }
  /* Cost-type has a legacy inline font-size; this bounded exception is intentional. */
  html body.nx-portal .rpe-cost-type { font-size: 16px !important; }
  html body.nx-portal :is(.rr-in,.em-entry,.te-scope-select) { min-height: 36px; }
  html body.nx-portal .rpe-cost-type { min-width: 90px; }
  .nx-portal .modal-dialog { margin: 12px auto; }
  .nx-portal :is(.modal-body,.modal-header,.modal-footer) { padding: 16px; }
  .nx-portal .nx-portal-footer { padding: 12px !important; }
}
@media (max-width: 480px) {
  /* Give the agent title and live pills their own rows, as in the customer shell. */
  html body.nx-portal[data-portal="agent"] { --header-height: 108px; }
  html body.nx-portal[data-portal="agent"] > .cp-header {
    display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 44px minmax(0,1fr);
    gap: 4px; padding: 6px 12px; align-items: center;
  }
  html body.nx-portal[data-portal="agent"] .cp-header > .hd-title {
    padding-inline: 52px 48px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; overflow-wrap: normal;
  }
  html body.nx-portal[data-portal="agent"] .hd-chips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-width: 0; }
  html body.nx-portal[data-portal="agent"] .hd-chip { min-width: 0; justify-content: center; padding-inline: 8px; font-size: 12px; }
  html body.nx-portal[data-portal="agent"] .hd-theme-btn { position: absolute; top: 6px; right: 12px; width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  html[data-theme] body.nx-portal :is(.btn,.ui-btn,.pg-btn,.pg-add,.pg-back,.cp-btn,.rpt-btn,.nx-btn,.btn-form-save,.btn-form-cancel,.te-save,.te-cancel,.nf-act,.cp-tab,.ec-tab,.rpt-tab,.rpt-seg-btn,.rpt-preset,.rpt-quick a,.rpt-quick button,.cq-pill,.cr-pill,.ar-period-tab,.geo-tabs button,.geo-seg button,.ctab-btn,.ibr-time-btns a) { min-height: 44px; }
  html body.nx-portal :is(.form-control,.form-select,.ui-input,.ui-select,.cp-input,.cp-select,.nx-input,.em-entry,.rr-in,.te-scope-select,.rpe-weight,.rpe-limit,.rpe-cost-type,.rpe-cost-val,.lcr-mode-select,#rpSearch,#globalSearch) { min-height: 44px; font-size: 16px; }
  html body.nx-portal :is(.rpt-filter input[type="date"],.rpt-filter input[type="text"],.rpt-filter select,.cq-custom input[type="date"],.cq-custom select,.cr-filters select) { min-height: 44px; font-size: 16px; }
  html body.nx-portal .rpe-cost-type { font-size: 16px !important; }
  html body.nx-portal :is(.btn-form-save,.btn-form-cancel,.btn-trunk-save,.te-save,.te-cancel,.nf-act,.dd-btn) { min-height: 44px; }
  .nx-portal :is(.btn,.ui-btn,.pg-btn,.pg-add,.cp-btn,.rpt-btn,.nx-btn,.page-link,.hd-theme-btn,.hd-collapse-btn,.sb-mobile-toggle,.cp-theme-btn) { min-height: 44px; }
  .nx-portal :is(.hd-theme-btn,.sb-mobile-toggle,.cp-theme-btn) { min-width: 44px; }
  .nx-portal :is(.form-control,.form-select,.ui-input,.ui-select,.cp-input,.cp-select,.nx-input) { min-height: 44px; }
  .nx-portal :is(.sb-link,.cp-nav-link) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-portal *, .nx-portal *::before, .nx-portal *::after {
    scroll-behavior: auto !important; transition-duration: .01ms !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
  .nx-portal .nx-busy::after { animation: none !important; border-right-color: currentColor; opacity: .6; }
}
@media print {
  .nx-portal :is(.nx-skip-link,.sb-overlay) { display: none; }
  .nx-portal { background: #fff; color: #000; }
}

/* ── Corrections 2026-09-07: page-local canvases, decorative tiles, micro-labels, mono numbers, empty rows ── */
.nx-portal .adm-content > :is(.bill-page,.block-page,.sim-page,.pkg-page,.tok-page,.ctrunk-page,.trunk-page,.pay-page) { background: transparent; }
html[data-theme] body.nx-portal :is(.stat-icon,.cleanup-kpi .ic,.cleanup-table .type-icon,.mc-ic,.sp-svc .svc-ic,.form-sec-hd-icon,.pp-sec-hd-icon,.ret-badge) {
  background: var(--nx-inset) !important; color: var(--nx-muted) !important;
}
html[data-theme] body.nx-portal :is(.agt-stat-lbl,.ap-stat-lbl,.lc-stat .l,.lc-st .l,.cdr-kpi .l,.carr-stat-lbl,.cust-stat-lbl,.ib-kpi .lbl,.cleanup-kpi .l,.cleanup-panel-head .tag,.filter-card label,.sim-page label,.geo-lbl,.ig-stat-lbl,.ig-meta-lbl,.pkg-form label,.dup-page label,.kpi-label,.sh-label,.section-label,.stat-lbl) {
  font-size: 12px; text-transform: none; letter-spacing: normal; line-height: 1.45;
}
html[data-theme] body.nx-portal :is(.agt-stat-val,.ap-stat-val,.money,.ap-money,.rate-pill,.agt-metric .m-val,.ib-kpi .sub,.hm-val,.kpi-val) { font-family: var(--nx-font); font-variant-numeric: tabular-nums; }
@media (max-width: 991px) {
  /* An empty-state row inside a horizontally scrolling table was centred off-screen. */
  html[data-theme] body.nx-portal :is(.tbl-scroll,.table-responsive,.nx-table-scroll) td[colspan]:only-child { position: sticky; left: 0; text-align: left !important; padding-left: 20px; }
  /* A wide table with no min-width crushes its columns instead of scrolling
     (agent detail payouts: 6 columns squeezed into 364px). Desktop is untouched. */
  html[data-theme] body.nx-portal :is(.tbl-scroll,.table-responsive,.nx-table-scroll) > table:has(thead th:nth-child(5)) { min-width: 640px; }
}

/* Inline code: neutral chip instead of Bootstrap pink; Bootstrap badges: soft tints */
.nx-portal :is(code,kbd,samp) { color: var(--nx-text); background: var(--nx-inset); padding: 1px 6px; border-radius: 4px; }
.nx-portal pre :is(code,kbd,samp) { background: none; padding: 0; }
.nx-portal .badge:is(.bg-info,.bg-primary,.bg-secondary,.bg-light,.bg-dark) { background: var(--nx-inset) !important; color: var(--nx-text) !important; }
/* Tokens, not fixed hex: the light-mode green/red/amber text sat at ~2:1 on the dark
   surface. --nx-success/warning/danger already flip per theme. */
.nx-portal .badge { font-size: 12px; }
.nx-portal .badge.bg-success { background: var(--color-success-soft) !important; color: var(--nx-success) !important; }
.nx-portal .badge.bg-danger { background: var(--color-danger-soft) !important; color: var(--nx-danger) !important; }
.nx-portal .badge.bg-warning { background: var(--color-warning-soft) !important; color: var(--nx-warning) !important; }

/* Date presets: the same accent wash in both themes. payments.php drew a solid accent
   pill, and the legacy dark sheet painted .date-btn.active green — then its blanket
   `span:not(…)` colour rule muted the label so the selection read as unselected.
   That blanket rule is why this needs the specificity and !important. */
html[data-theme] body.nx-portal[data-portal] .date-btn.active {
  background: var(--nx-accent-soft) !important; color: var(--nx-accent) !important;
  border-color: color-mix(in srgb,var(--nx-accent) 22%,transparent) !important;
}

/* Table headers everywhere: 12px sentence case, muted, semibold (overrides the legacy uppercase .table th) */
html[data-theme] body.nx-portal th { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 600; }

/* ── New-page primitives (R203+): section tabs on an accent wash, 36px neutral icon actions ── */
.nx-portal .nx-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.nx-portal .nx-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--nx-muted); text-decoration: none; cursor: pointer; }
.nx-portal .nx-tab:hover { color: var(--nx-text); background: var(--nx-inset); }
.nx-portal .nx-tab.active, .nx-portal .nx-tab[aria-selected="true"] { background: var(--nx-accent-soft); color: var(--nx-accent); border-color: color-mix(in srgb, var(--nx-accent) 22%, transparent); }
.nx-portal .nx-icon-btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--nx-border); background: var(--nx-surface); color: var(--nx-muted); text-decoration: none; cursor: pointer; font-size: 14px; }
.nx-portal .nx-icon-btn:hover { color: var(--nx-text); border-color: color-mix(in srgb, var(--nx-text) 25%, var(--nx-border)); }
.nx-portal .nx-icon-btn.danger:hover { color: var(--nx-danger); border-color: var(--nx-danger); }
.nx-portal :is(.nx-tab, .nx-icon-btn):focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
@media (pointer: coarse) { .nx-portal .nx-tab { min-height: 40px; } .nx-portal .nx-icon-btn { width: 40px; height: 40px; } }

/* Report tables: the share-of-volume bar is a quiet indicator, not an accent stripe */
html[data-theme] body.nx-portal .sr-vol-bar { height: 3px; border-radius: 2px; background: var(--nx-border); opacity: 1; }
html[data-theme] body.nx-portal .sr-trunk-row .sr-vol-bar { background: var(--nx-inset); }

@media (pointer: coarse) { html[data-theme] body.nx-portal .sr-expand-btn { width: 40px; height: 40px; } }

/* ── macOS-style vibrancy on floating chrome (operator direction, 2026-09-07) ──
   Frosted translucency only where page content scrolls behind a fixed/floating
   surface: the top header (all three shells), popover/dropdown panels, and the
   mobile sidebar overlay. Content cards and tables stay solid for readability.
   @supports guards it so browsers without backdrop-filter keep the solid surface. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme] body.nx-portal :is(.adm-header, .cp-header) {
    background: color-mix(in srgb, var(--nx-surface) 72%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  html[data-theme] body.nx-portal :is(.ct-panel, .col-dd-list, .sb-sub.sb-flyout) {
    background: color-mix(in srgb, var(--nx-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
  html[data-theme] body.nx-portal .sb-overlay {
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
}