/* ══════════════════════════════════════════
   PAGES — Main content area & page-specific styles
   modular extract
══════════════════════════════════════════ */

/* 2026-06-01 — Guard the body against horizontal overflow from a
   single wide child (admin tables with many columns were pushing the
   whole viewport sideways, exposing a body-level scrollbar under the
   bottom strip). Each card's table now scrolls internally instead. */
html, body{ overflow-x: hidden; }

/* Tab visibility is driven by THIS class, not raw inline display — so a
   stray `style.display=''` write (applyPermGates, reveal animations, the
   layered switchPageTab wrappers) can't un-hide an inactive sub-tab and
   leave two tabs stacked. switchPageTab toggles the class; !important
   guarantees the hidden tab stays hidden whatever else pokes inline style. */
.ptab-content.ptab-content--hidden,
#page-maint > .ptab-content.ptab-content--hidden{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Main content area — content-first SaaS: maximize data area vs header chrome */
.main{
  padding-top: calc(var(--unified-nav-h) + 4px);
  padding-bottom: calc(var(--ticker-h) + 8px);
  min-height: 100vh;
  transition: padding-top var(--t-fast);
}
body.has-subnav .main{
  padding-top: calc(var(--unified-nav-h) + var(--subnav-h) + 2px);
}
body.nav-hidden .main {
  padding-top: 2px !important; /* maximum data real-estate */
}
.content-frame{
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 24px;   /* balanced breathing room — modern, not congested */
  /* The frame should contain its own width — never push the viewport
     wider than 100% even if a card overflows. */
  min-width: 0;
}
/* 2026-06-01 — Cards containing wide tables. card-body is the
   canonical wrapper inside .card; declaring overflow-x: auto here
   lets a 1500px Alert Rules / Location Master table scroll INSIDE
   the card instead of pushing the whole page sideways. Vertical
   stays visible so dropdowns / popovers don't get clipped. */
.card-body{ overflow-x: auto; }

/* Readable data tables — dense enough for ops, not cramped */
table {
  font-size: 13px;
}
td, th {
  padding: 8px 10px !important;
  line-height: 1.4;
}
tr {
  height: auto;
}
.content-frame .page-header{padding:12px 0 10px;border-bottom:1px solid var(--border-2);margin-bottom:14px;}

/* Page container */
.page{
  display: none;
  animation: pageIn .35s var(--ease);
}
.page.active{
  display: block;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
.page.active:hover {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: var(--shadow-md), var(--accent-glow);
}
.page.active::after {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 40%; height: 200%;
  background: linear-gradient(135deg, transparent, rgba(212, 175, 55, 0.06), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s;
  pointer-events: none;
  left: 120%;
}
.page.active:hover::after {
  left: -60%;
}

/* ── Page header — clear hierarchy without wasting vertical space */
.page-header{
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.page-header h1{
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.page-header p, .page-header .ptab-desc {
  font-size: 13px; color: var(--muted); margin: 0;
  line-height: 1.45;
}
.page-header .live-dot{
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.55), 0 0 0 2px rgba(212, 175, 55, 0.2);
  display: inline-block;
}
.breadcrumb {
  font-size: 11px; color: var(--muted); margin-bottom: 6px; opacity: 0.85;
}
.page-top{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.page-actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Page sub-tabs (universal) ──
   2026-06-01 — wrap to multiple rows when the strip overflows the
   container instead of forcing a horizontal scrollbar. Operator-
   reported: /#/maint/* pages were rendering a 6px scrollbar under
   the tab strip because there are 11 tabs and the strip exceeds
   1224px (content-frame max minus padding) on common laptop widths.
   Wrapping eliminates the scroll without truncating any tab. */
/* Slim futuristic sub-tabs (full experience visible, attractive, gold accent, low density) */
.ptab-bar{
  display:flex;gap:4px;row-gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:0;
  flex-wrap:wrap; align-items: flex-end;
}
.ptab{
  padding:7px 12px;border:none;background:transparent;cursor:pointer;
  font-size:0.82rem;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;flex-shrink:0; border-radius: 6px 6px 0 0;
}
.ptab:hover{color:var(--text); background: rgba(212, 175, 55, 0.08);}
.ptab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600; background: rgba(212, 175, 55, 0.1); box-shadow: inset 0 -2px 12px rgba(212, 175, 55, 0.08);}

/* 2026-06-09 — Data Intelligence → Map carries 9 sub-tabs, the most of
   any page. The universal .ptab-bar already flex-wraps so nothing runs
   off-screen, but when a row wraps the active tab's underline floats
   mid-bar and reads as accidental. Scope a refinement HERE (not the
   universal rule, so other pages are untouched): align wrapped tabs to
   the bottom of each row and round the hover/active tint into a tab-like
   pill so a two-row strip reads as one intentional control. All 9 tabs
   stay reachable on a normal laptop width without a horizontal scroll. */
/* Data/Map long sub-tab bar - compact futuristic, all tabs visible */
#page-map .ptab-bar{
  align-items: flex-end;
  column-gap: 3px;
  margin-bottom: 12px;
}
#page-map .ptab{
  border-radius: 6px 6px 0 0;
  padding: 6px 10px;
  font-size: 0.78rem;
}
#page-map .ptab:hover{
  background: rgba(181,136,11,0.06);
}
#page-map .ptab.active{
  background: rgba(181,136,11,0.08);
}

/* 2026-06-09 — Map page header overlapping the fixed top nav.
   Every .page runs the pageIn keyframe (theme.css), which animates
   `transform` and therefore promotes .page to its own stacking
   context. On the Map page Mapbox GL keeps that compositor layer
   retained after the animation settles, so the page-header (no
   explicit z-index) could paint at the root level and bleed OVER the
   fixed .primary-nav (z-index 9980) at the top of scroll / on some
   widths. .main already reserves the nav's height as padding-top, so
   the geometry is correct — the bug is purely paint order. Pin
   #page-map into a stacking context that sits BELOW the nav so the
   header can never paint over it, and give the header scroll-margin
   so anchored jumps clear the fixed nav too. Scoped to the Map page;
   no other page or the global nav is touched. */
#page-map{
  position: relative;
  z-index: 0;
}
#page-map .page-header{
  scroll-margin-top: calc(var(--unified-nav-h) + var(--subnav-h) + 8px);
}

/* Fabric / Factory geo maps — in-card loading overlay while API + D3 paint */
.geo-map-loading{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(248,247,244,.82);
  backdrop-filter:blur(2px);
}
.geo-map-loading--dark{
  background:rgba(15,21,40,.72);
}
.geo-map-loading-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 22px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.geo-map-loading--dark .geo-map-loading-inner{
  background:rgba(22,28,48,.92);border-color:rgba(255,255,255,.12);
}
.geo-map-loading-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  animation:spin .85s linear infinite;
}
.geo-map-loading--dark .geo-map-loading-spinner{
  border-color:rgba(255,255,255,.15);
  border-top-color:var(--accent);
}
.geo-map-loading-msg{
  font-size:12px;font-weight:600;color:var(--muted);
}
.geo-map-loading--dark .geo-map-loading-msg{
  color:rgba(230,233,241,.85);
}

/* Slim maintenance sub-tabs for full visible experience */
.maint-tab{ white-space:nowrap; padding: 3px 8px; font-size: 11px; }
.maint-tab i{ font-size:11px; }
.maint-panel{ display:none; }
.maint-panel.active{ display:block; }
tr.selected{ background:var(--hover) !important; }

/* ══════════════════════════════════════════
   MASTER DATA MAINTENANCE (#/maint)
   Enterprise admin panels — theme-aware
══════════════════════════════════════════ */
#page-maint .page-header{
  margin-bottom:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
#page-maint .page-header h1{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:6px 0 4px;
}
#page-maint .maint-ptab-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}
#page-maint .maint-ptab-group-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  padding:0 2px 4px;
}
#page-maint .maint-ptab-bar{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin:0;
  padding:0;
  border-bottom:none;
}
#page-maint .ptab-bar{
  gap:3px;
  margin-bottom:16px;
  padding-bottom:2px;
  border-bottom:1px solid var(--border);
}
#page-maint .ptab{
  padding:6px 10px;
  font-size:0.76rem;
  gap:5px;
  border-radius:6px 6px 0 0;
}
#page-maint .ptab i{
  font-size:0.82rem;
  opacity:0.85;
}
#page-maint .ptab.active i{
  color:var(--accent);
  opacity:1;
}
#page-maint .ptab-content{
  animation:pageIn 0.28s var(--ease);
}
#page-maint .maint-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:14px;
}
#page-maint .maint-toolbar-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}
#page-maint .maint-toolbar-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
#page-maint .maint-search-wrap{
  position:relative;
  flex:0 1 260px;
  min-width:180px;
}
#page-maint .maint-search-wrap i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:0.45;
  pointer-events:none;
}
#page-maint .maint-search-wrap .form-control{
  padding-left:36px;
  width:100%;
}
#page-maint .maint-filter-select{
  flex:0 1 auto;
  min-width:120px;
  max-width:200px;
}
#page-maint .maint-hint{
  font-size:11px;
  color:var(--text-2,var(--muted));
  line-height:1.5;
  margin:0 0 14px;
}
#page-maint .maint-hint i{
  color:var(--accent);
  margin-right:4px;
}
#page-maint .maint-hint a{
  color:var(--accent);
  text-decoration:none;
}
#page-maint .maint-hint a:hover{
  text-decoration:underline;
}
#page-maint .maint-hint code{
  font-size:10px;
  padding:1px 5px;
  border-radius:4px;
  background:var(--bg-inset);
  border:1px solid var(--border);
}
#page-maint .maint-stat-inline{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
#page-maint .maint-stat-inline strong{
  color:var(--text);
  font-weight:700;
}
/* Labs tab — authorized + review queue */
#page-maint .maint-labs-layout{ display:flex; flex-direction:column; gap:14px; }
#page-maint .maint-labs-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
#page-maint .maint-labs-stat{
  font-size:11px;
  color:var(--muted);
  padding:4px 10px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg-inset);
  white-space:nowrap;
}
#page-maint .maint-labs-stat strong{ color:var(--text); }
#page-maint .maint-labs-stat--warn{
  border-color:rgba(196,127,23,0.35);
  background:var(--warning-soft,rgba(245,158,11,0.1));
}
#page-maint .card--review .card-head i{ color:var(--warning); }
#page-maint .card{
  margin-bottom:14px;
  overflow:hidden;
}
#page-maint .card-head{
  padding:10px 14px;
  font-size:12px;
  font-weight:600;
  color:var(--text);
}
#page-maint .card-head > span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
#page-maint .card-head i{
  color:var(--accent);
}
#page-maint .card-body table,
#page-maint .ptab-content > .card table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
#page-maint .card-body thead th,
#page-maint .ptab-content > .card thead th{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg-inset);
  white-space:nowrap;
}
#page-maint .card-body tbody td,
#page-maint .ptab-content > .card tbody td{
  padding:9px 12px;
  border-bottom:1px solid var(--border-2,var(--border));
  color:var(--text);
  vertical-align:middle;
}
#page-maint .card-body tbody tr:hover td,
#page-maint .ptab-content > .card tbody tr:hover td{
  background:var(--accent-soft);
}
#page-maint .maint-form-label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  display:block;
  margin-bottom:4px;
}
#page-maint .maint-card-filter-row{
  display:flex;
  gap:8px;
  padding:12px 14px;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  background:var(--bg-inset);
}
#page-maint .maint-panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:900px){
  #page-maint .maint-panel-grid{ grid-template-columns:1fr; }
  #page-maint .maint-toolbar-actions{
    width:100%;
    margin-left:0;
    justify-content:flex-end;
  }
}

/* Flush table cards */
#page-maint .card-body--flush{ padding:0; }

/* Empty / loading table cells */
#page-maint .maint-empty-cell{
  text-align:center;
  color:var(--muted);
  padding:30px 16px;
  font-size:12px;
}
#page-maint .maint-empty-cell--sm{ padding:20px 16px; font-size:11px; }
#page-maint .maint-empty-cell--xs{ padding:14px 16px; font-size:11px; }

/* Permission / meta badges in card heads */
#page-maint .maint-perm-badge{
  font-size:10px;
  color:var(--muted);
  font-weight:400;
}
#page-maint .maint-perm-badge code{
  font-size:9px;
  padding:1px 4px;
  border-radius:3px;
  background:var(--bg-inset);
  border:1px solid var(--border);
}

/* Hint variants */
#page-maint .maint-hint--tight{ margin-bottom:10px; }
#page-maint .maint-hint--intro{ margin:0 0 8px; }
#page-maint .maint-hint--xs{ font-size:10px; margin-bottom:10px; }
#page-maint .maint-hint--danger{ color:var(--danger); }
#page-maint .maint-hint--warning{ color:var(--warning,#78350f); }
#page-maint .maint-hint-list{
  font-size:11px;
  color:var(--text-2,var(--muted));
  margin:0 0 14px;
  padding-left:20px;
  line-height:1.55;
}

/* Section titles */
#page-maint .maint-section-title{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:6px;
}
#page-maint .maint-section-title--sm{
  font-size:10px;
  margin-bottom:8px;
}
#page-maint .maint-section-title i{ color:var(--accent); margin-right:4px; }
#page-maint .maint-section-title .maint-section-sub,
#page-maint .maint-section-sub{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
}

/* Action rows & tab toolbars */
#page-maint .maint-action-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}
#page-maint .maint-action-row--mb12{ margin-bottom:12px; }
#page-maint .maint-action-row--mb14{ margin-bottom:14px; }
#page-maint .maint-tab-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
#page-maint .maint-tab-toolbar--mb16{ margin-bottom:16px; }
#page-maint .maint-tab-toolbar__left,
#page-maint .maint-tab-toolbar__right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
#page-maint .maint-tab-toolbar__left{ flex:1 1 auto; min-width:0; }
#page-maint .maint-tab-toolbar__right{ flex-shrink:0; }
#page-maint .maint-tab-lead{
  font-size:12px;
  color:var(--muted);
  margin:0;
}

/* Form grids */
#page-maint .maint-form-grid{
  display:grid;
  gap:10px;
  align-items:end;
}
#page-maint .maint-form-grid--3col{
  grid-template-columns:1fr 1fr auto;
  max-width:760px;
}
#page-maint .maint-form-grid--2col{
  grid-template-columns:1fr 1fr;
}
#page-maint .maint-form-grid--2col-start{ align-items:start; gap:18px; }
#page-maint .maint-form-grid--mb14{ margin-bottom:14px; }
#page-maint .maint-form-grid--retention{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
#page-maint .maint-form-label--upper{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:3px;
}
#page-maint .maint-form-label--inline{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:0;
  cursor:pointer;
}
#page-maint .maint-input-wide{ min-width:200px; }
#page-maint .maint-input-mono{
  font-size:14px;
  font-family:var(--font-mono,monospace);
}
#page-maint .maint-input-narrow{ width:140px; }
#page-maint .maint-input-filter{ width:280px; font-size:11px; }
#page-maint .maint-select-auto{ width:auto; font-size:11px; }
#page-maint .maint-select-broker{ min-width:240px; font-size:12px; }

/* Scroll / overflow panels */
#page-maint .maint-overflow-x{ overflow-x:auto; }
#page-maint .maint-scroll-panel{ overflow:auto; max-height:480px; }
#page-maint .maint-scroll-panel--lg{ max-height:520px; }
#page-maint .maint-scroll-box{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-card,var(--surface));
  max-height:280px;
  overflow-y:auto;
  font-size:11px;
}
#page-maint .maint-scroll-box__empty{
  padding:14px;
  color:var(--muted);
  text-align:center;
}

/* Feature flags */
#page-maint .maint-flags-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#page-maint .maint-flag-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--border);
}
#page-maint .maint-flag-row:last-child{ border-bottom:none; }
#page-maint .maint-flag-row input[type="checkbox"]{
  flex:none;
  margin-top:3px;
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--accent);
}
#page-maint .maint-flag-body{ flex:1; min-width:0; }
#page-maint .maint-flag-key{
  font-family:var(--font-mono,monospace);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  word-break:break-all;
}
#page-maint .maint-flag-desc{
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  margin-top:2px;
}
#page-maint .maint-flag-meta{
  font-size:10px;
  color:var(--muted);
  opacity:0.75;
  margin-top:2px;
}
#page-maint .maint-flags-filter{
  width:100%;
  max-width:320px;
  margin-bottom:10px;
}
#page-maint .maint-status-text{
  color:var(--muted);
  font-size:12px;
}
#page-maint .maint-status-text--danger{ color:var(--danger); }

/* Danger / warning cards */
#page-maint .maint-danger-text{ color:var(--danger); }
#page-maint .card-head--danger > span{ color:var(--danger); }
#page-maint .maint-confirm-panel{
  display:none;
  border-top:1px dashed var(--border);
  padding-top:14px;
  margin-top:4px;
}
#page-maint .maint-confirm-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  max-width:540px;
}
#page-maint .maint-confirm-row .form-control{ flex:1; }
#page-maint .btn--danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
#page-maint .btn--danger:hover{ filter:brightness(1.08); }

/* Checkbox labels */
#page-maint .maint-check-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  cursor:pointer;
  color:var(--text);
}
#page-maint .maint-check-label input{ accent-color:var(--accent); }

/* Pills */
#page-maint .pill--xs{ font-size:9px; }

/* Hidden file input */
#page-maint .maint-file-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* Broker grants panels */
#page-maint .maint-grant-box{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:36px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
}
#page-maint .maint-grant-box--stack{
  flex-direction:column;
  flex-wrap:nowrap;
}
#page-maint .maint-grant-add-row{
  display:flex;
  gap:6px;
  margin-top:6px;
}
#page-maint .maint-grant-add-row .form-control{
  flex:1;
  font-family:var(--font-mono,monospace);
}
#page-maint .maint-footnote{
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.45;
}
#page-maint .maint-divider-note{
  margin-top:16px;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:11px;
  color:var(--muted);
}
#page-maint .maint-placeholder-box{
  padding:24px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}

/* Broker feed filter bar */
#page-maint .bfeed-filter-bar{
  display:flex;
  gap:16px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:space-between;
}
#page-maint .bfeed-filters{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  flex:1 1 auto;
  min-width:0;
}
#page-maint .bfeed-actions{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
  flex:0 0 auto;
}
#page-maint .bfeed-field{
  flex:1 1 240px;
  min-width:200px;
  max-width:340px;
}
#page-maint .bfeed-field--sm{
  flex:0 1 160px;
  min-width:140px;
}
#page-maint .bfeed-field--md{
  flex:0 1 180px;
  min-width:150px;
}
#page-maint .bfeed-field .form-control{ width:100%; }

/* Building / status banners */
#page-maint .maint-banner{
  margin-bottom:10px;
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;
  line-height:1.45;
}
#page-maint .maint-banner--warn{
  background:var(--warning-soft,rgba(245,158,11,0.12));
  border:1px solid var(--warning-border,rgba(245,158,11,0.35));
  color:var(--warning-text,#92400e);
}

/* Details / collapsible editor */
#page-maint .maint-details{
  margin-top:18px;
}
#page-maint .maint-details > summary{
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2,var(--bg-inset));
  color:var(--text);
  list-style:none;
}
#page-maint .maint-details > summary::-webkit-details-marker{ display:none; }
#page-maint .maint-details > summary i{ color:var(--accent); margin-right:6px; }
#page-maint .maint-details__body{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* Broker coverage comparison table */
#page-maint #brokerCoverageBody table.bcov{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
#page-maint #brokerCoverageBody table.bcov th,
#page-maint #brokerCoverageBody table.bcov td{
  border:1px solid var(--border);
  padding:6px 8px;
  vertical-align:top;
  text-align:left;
  color:var(--text);
}
#page-maint #brokerCoverageBody table.bcov th{
  background:var(--bg-inset);
  font-weight:600;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  position:sticky;
  top:0;
  z-index:1;
}
#page-maint #brokerCoverageBody table.bcov tr:nth-child(even) td{
  background:var(--accent-soft);
}
#page-maint #brokerCoverageBody .bcov-cell-note{ width:18%; }
#page-maint #brokerCoverageBody .bcov-note-input{
  width:100%;
  min-height:36px;
  font-size:11px;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:4px;
  font-family:inherit;
  background:var(--surface);
  color:var(--text);
}
#page-maint #brokerCoverageBody .bcov-status-pill{
  display:inline-block;
  padding:1px 6px;
  border-radius:10px;
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:4px;
}
#page-maint #brokerCoverageBody .bcov-status-open{ background:var(--bg-inset); color:var(--muted); }
#page-maint #brokerCoverageBody .bcov-status-confirmed{ background:var(--success-soft); color:var(--success); }
#page-maint #brokerCoverageBody .bcov-status-blocked{ background:var(--danger-soft); color:var(--danger); }
#page-maint #brokerCoverageBody .bcov-status-deferred{ background:var(--warning-soft,rgba(245,158,11,0.12)); color:var(--warning,#92400e); }
#page-maint #brokerCoverageBody .bcov-required{
  background:var(--danger-soft);
  color:var(--danger);
  font-size:9px;
  padding:1px 4px;
  border-radius:3px;
  font-weight:600;
}
#page-maint #brokerCoverageBody .bcov-optional{
  background:var(--bg-inset);
  color:var(--muted);
  font-size:9px;
  padding:1px 4px;
  border-radius:3px;
}

/* Alerts tab */
#page-maint .maint-alerts-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
#page-maint .maint-alerts-row--esc{
  gap:18px;
  margin-bottom:12px;
}
#page-maint .maint-alerts-label{
  font-weight:500;
  opacity:0.85;
  white-space:nowrap;
  color:var(--text);
}
#page-maint .maint-alerts-input-wide{
  flex:1;
  min-width:280px;
}
#page-maint .maint-alerts-field-label{
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text);
}
#page-maint .maint-alerts-field-label .form-control{ width:70px; }
#page-maint .maint-alerts-field-label--wide .form-control{ width:160px; }
#page-maint .maint-alerts-section{
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-bottom:12px;
}
#page-maint .maint-alerts-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
#page-maint .maint-alerts-section-title{
  font-size:12px;
  font-weight:600;
  color:var(--text);
}

/* Inline stat in card head */
#page-maint .maint-card-stat{
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

/* Result / preview output areas */
#page-maint .maint-result-area{ margin-top:14px; }
#page-maint .maint-result-area--mb{ margin-bottom:14px; }
#page-maint .maint-context-area{ margin-bottom:10px; }

/* Validation form */
#page-maint .maint-validate-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

/* Card spacing */
#page-maint .card--spaced{ margin-top:16px; }

/* Text align helpers for tables */
#page-maint th.text-right,
#page-maint td.text-right{ text-align:right; }

@media print{
  #page-maint .ptab-bar,
  #page-maint .breadcrumb{ display:none !important; }
  #page-maint #brokerCoverageBody table{ font-size:9px; }
}

/* Config tab — expiry thresholds, settings blocks */
#page-maint .maint-config-grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:700px;
}
#page-maint .maint-config-stat-input{
  font-size:20px;
  font-weight:700;
  text-align:center;
}
#page-maint .maint-config-section{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
#page-maint .maint-config-section--dashed{
  border-top-style:dashed;
}
#page-maint .maint-config-section-title{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
#page-maint .maint-config-section-title i{ color:var(--accent); margin-right:4px; }
#page-maint .maint-config-row{
  display:flex;
  align-items:flex-end;
  gap:18px;
  max-width:900px;
  flex-wrap:wrap;
}
#page-maint .maint-expiry-preview{
  display:flex;
  gap:10px;
  font-size:11px;
  flex-wrap:wrap;
}
#page-maint .maint-expiry-chip{
  padding:4px 10px;
  border-radius:6px;
  font-weight:600;
}
#page-maint .maint-expiry-chip--valid{ background:var(--success-soft); color:var(--success); }
#page-maint .maint-expiry-chip--warn{ background:var(--warning-soft,rgba(196,127,23,0.1)); color:var(--warning,#C47F17); }
#page-maint .maint-expiry-chip--crit{ background:var(--danger-soft); color:var(--danger); }
#page-maint .maint-expiry-chip--exp{ background:rgba(184,50,48,0.1); color:#B83230; }
#page-maint .maint-settings-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#page-maint .maint-config-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:1180px;
}
#page-maint .maint-config-stack > .card{
  margin-bottom:0;
}
#page-maint .maint-config-group-hd{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  padding:10px 4px 2px;
  border-bottom:2px solid var(--border);
  margin-top:6px;
}
#page-maint .maint-config-group-hd:first-child{ margin-top:0; }
#page-maint .maint-config-group-hd i{ color:var(--accent); font-size:13px; }
#page-maint .maint-config-group-hd--collapsible{
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
  padding:10px 12px; margin:12px 0 6px; border-radius:8px;
  background:var(--surface-2,#f5f3ef); border:1px solid var(--border,#e5e0d8);
}
#page-maint .maint-config-group-hd--collapsible:hover{ background:var(--surface-3,#ebe6de); }
#page-maint .maint-config-chev{ color:var(--muted); font-size:12px; flex-shrink:0; }
#page-maint .maint-config-card--collapsed{ display:none !important; }
#page-maint .maint-smtp-grid{
  display:grid;
  grid-template-columns:2fr 1fr 2fr 2fr;
  gap:14px;
  max-width:900px;
  margin-bottom:14px;
}
#page-maint .maint-teams-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
#page-maint .maint-teams-enable{
  font-size:11px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  white-space:nowrap;
}
#page-maint .maint-field-status{
  font-size:10px;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}
#page-maint #maint-config .card-body table,
#page-maint #maint-config .card-body--flush table{
  width:100%;
  border-collapse:collapse;
}
#page-maint #maint-config .card-body--flush thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--bg-inset);
}
@media (max-width: 900px){
  #page-maint .maint-smtp-grid{ grid-template-columns:1fr 1fr; }
}
#page-maint .maint-check-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#page-maint .maint-scm-footer{
  display:flex;
  gap:8px;
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:12px;
}
#page-maint .maint-scm-status{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
}
#page-maint .maint-inline-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:10px;
}
#page-maint .maint-inline-table thead tr{
  background:var(--bg-inset);
}
#page-maint .maint-inline-table th,
#page-maint .maint-inline-table td{
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
#page-maint .maint-card-pad-hint{
  font-size:11px;
  color:var(--text-2,var(--muted));
  padding:10px 14px 0;
  margin:0;
  line-height:1.5;
}
#page-maint .maint-card-pad-hint i{ color:var(--accent); margin-right:4px; }
#page-maint .maint-notice-bar{
  margin-top:14px;
  padding:10px 12px;
  background:var(--warning-soft,rgba(245,197,66,0.08));
  border:1px solid var(--warning-border,rgba(245,197,66,0.25));
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:10px;
}
#page-maint .maint-notice-bar label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  margin:0;
  color:var(--text);
}
#page-maint .maint-flex-1{ flex:1; }
#page-maint .maint-secrets-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width:900px){
  #page-maint .maint-config-grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* Admin Ops tab */
#page-maint .ops-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#page-maint .ops-auto-flip{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
#page-maint .ops-region-select{
  max-width:140px;
  font-size:12px;
}
#page-maint .ops-pipeline-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px 20px;
  margin-bottom:12px;
}
#page-maint .ops-k{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:2px;
}
#page-maint .ops-v{ font-size:13px; }
#page-maint .ops-steps{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
  margin:8px 0 4px;
}
#page-maint .ops-step{
  background:var(--surface-2,#f5f0e8);
  border-radius:4px;
  padding:3px 8px;
}
#page-maint .ops-step-sep{ font-size:10px; opacity:.5; }
#page-maint .ops-cutover-table{ width:100%; font-size:12px; }
#page-maint .ops-cutover-table th,
#page-maint .ops-cutover-table td{ padding:8px 10px; vertical-align:middle; }
#page-maint .ops-flag{ font-size:10px; word-break:break-all; }
#page-maint .ops-parity{ font-size:11px; line-height:1.4; }
#page-maint .ops-action-cell{ text-align:right; white-space:nowrap; }
#page-maint .ops-playbook{
  border-top:1px solid var(--border,#e8e0d4);
  background:var(--surface-1,#faf8f5);
}
#page-maint .ops-playbook-title{
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}
#page-maint .ops-playbook-list{
  margin:0;
  padding-left:20px;
  font-size:12px;
  line-height:1.55;
  color:var(--text-secondary,var(--muted));
}
#page-maint .ops-playbook-list li{ margin-bottom:6px; }
#page-maint .ops-alert-stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  font-size:12px;
  margin-bottom:10px;
}
#page-maint .ops-critical{ color:var(--danger); }
#page-maint .ops-config-row{
  font-size:11px;
  color:var(--muted);
  margin-bottom:10px;
}
#page-maint .ops-jobs-table{
  width:100%;
  font-size:12px;
  margin-bottom:10px;
}
#page-maint .ops-jobs-table th,
#page-maint .ops-jobs-table td{ padding:6px 8px; }
#page-maint .ops-rec-list{
  margin:8px 0 0;
  padding-left:18px;
  font-size:12px;
  color:var(--warning,#78350f);
}
#page-maint .ops-healthy{
  font-size:12px;
  color:var(--success,#166534);
  margin:8px 0 0;
}
#page-maint .ops-loading,
#page-maint .ops-error{
  font-size:12px;
  color:var(--muted);
  padding:8px 0;
}
#page-maint .ops-error{ color:var(--danger); }

/* Dynamic preview / purge result panels (JS-generated) */
#page-maint .maint-preview-loading{
  padding:14px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
#page-maint .maint-preview-box{
  border-radius:6px;
  padding:14px;
  font-size:12px;
  line-height:1.5;
}
#page-maint .maint-preview-box--error{
  background:var(--danger-soft);
  border:1px solid var(--danger);
  color:var(--danger);
}
#page-maint .maint-preview-box--warn{
  background:var(--warning-soft,rgba(245,158,11,0.12));
  border:1px solid var(--warning-border,rgba(245,158,11,0.35));
  color:var(--warning-text,#78350f);
}
#page-maint .maint-preview-box--success{
  background:var(--success-soft);
  border:1px solid var(--success);
  color:var(--success);
}
#page-maint .maint-preview-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 6px;
}
#page-maint .maint-preview-stat{
  flex:1;
  min-width:120px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 14px;
}
#page-maint .maint-preview-stat__label{
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
}
#page-maint .maint-preview-stat__value{
  font-size:22px;
  font-weight:700;
  font-family:var(--font-mono,monospace);
}
#page-maint .maint-preview-meta{
  font-size:11px;
  color:var(--text-2,var(--muted));
  margin-top:10px;
  line-height:1.7;
}
#page-maint .maint-preview-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  margin-bottom:6px;
}
#page-maint .maint-preview-table thead tr{
  background:var(--bg-inset);
}
#page-maint .maint-preview-table th,
#page-maint .maint-preview-table td{
  padding:5px 8px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
#page-maint .maint-preview-table td.mono{
  font-family:var(--font-mono,monospace);
  font-size:10px;
}
#page-maint .maint-preview-table td.success{ color:var(--success); }
#page-maint .maint-preview-section-title{
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
  margin:14px 0 6px;
}
#page-maint .maint-link-sm{
  font-size:11px;
  color:var(--accent);
  text-decoration:none;
}
#page-maint .maint-link-sm:hover{ text-decoration:underline; }
#page-maint .maint-field-fixed{ flex:0 0 300px; }
#page-maint .maint-push-right{ margin-left:auto; }
#page-maint th.col-check{ width:36px; }

/* ── Action required banner ── */
.action-banner{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 20px;
}
.action-banner-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.action-banner-head h3{
  font-size: 13px; font-weight: 700; color: var(--danger);
  margin: 0; display: flex; align-items: center; gap: 6px;
}

/* ── Action tiles ── */
.action-tiles{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.action-tile{
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.action-tile:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.at-count{ font-size: 20px; font-weight: 800; line-height: 1; }
.at-label{ font-size: 11px; color: var(--muted); margin-top: 2px; }
.at-link{
  font-size: 10px; color: var(--accent); font-weight: 600;
  margin-top: 6px; display: flex; align-items: center; gap: 3px;
}

/* ── PO Traceability ── */
.trace-chain{ display:flex; flex-direction:column; gap:0; align-items:center; }
.trace-card{ width:100%; max-width:700px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px; }
.trace-arrow{ color:var(--muted); font-size:24px; padding:4px 0; }
.trace-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:700px; }

/* ── Test Traceability Expandable Rows ── */
.tr-expandable{cursor:pointer;transition:background 0.15s;}
.tr-expandable:hover{background:rgba(0,0,0,0.02);}
.tr-expand-icon{transition:transform 0.2s;font-size:11px;color:var(--muted);}
.tr-expand-icon.open{transform:rotate(90deg);color:var(--accent);}
.test-trace-panel{padding:14px 18px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin:4px 0;}
.test-trace-title{font-size:12px;font-weight:700;margin-bottom:12px;}
.test-trace-chain{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:12px;}
.trace-node{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);min-width:110px;text-align:center;}
.trace-node.warning{border-color:var(--warning);background:var(--warning-soft);}
.trace-node-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px;}
.trace-node-value{font-size:12px;font-weight:600;}
.trace-arrow{padding:0 6px;color:var(--muted);font-size:14px;}
.test-trace-details{margin-top:8px;}

/* ── PO Broker Status ── */
.broker-status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;}
.broker-sent{background:rgba(5,150,105,0.1);color:#059669;}
.broker-pending{background:rgba(181,136,11,0.1);color:var(--warning);}
.broker-failed{background:rgba(184,50,48,0.1);color:var(--danger);}
.broker-na{background:var(--surface-2);color:var(--muted);}

/* ══════════════════════════════════════════
   DASHBOARD — v7 dashboard components
══════════════════════════════════════════ */
.db-stats-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
/* 6-tile variant — smaller min-width + tighter padding so all six fit on a
   ~1280px+ screen without wrapping. Wraps cleanly below that. */
.db-stats-row-6{gap:10px;}
.db-stats-row-6 .db-stat-card{padding:14px 14px;min-width:140px;}
.db-stats-row-6 .db-stat-val{font-size:1.45rem;}
.db-stats-row-6 .db-stat-icon{width:34px;height:34px;font-size:1.05rem;}
.db-stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;flex:1;min-width:160px;display:flex;align-items:center;gap:14px;transition:transform var(--t),box-shadow var(--t),border-color var(--t);}
.db-stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.12);border-color:var(--accent);}
.db-stat-card.accent-border{border-left:3px solid var(--accent);}


/* Futuristic live touch - subtle pulse on live data updates */
.db-stat-card.live-update { animation: livePulse 1.2s ease; }

/* Supply chain map container gets the same live-update pulse on refresh */
#dashMapWrap.live-update {
  animation: livePulse 1.2s ease;
}
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(181,136,11,.3); } 70% { box-shadow: 0 0 0 10px rgba(181,136,11,0); } 100% { box-shadow: 0 0 0 0 rgba(181,136,11,0); } }

/* Animated status for attention tiles (more futuristic but professional) */
.db-stat-card[data-status="attention"] .db-stat-icon {
  animation: iconBreathe 3s ease-in-out infinite;
}
@keyframes iconBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.db-stat-card[data-status="attention"]:hover .db-stat-icon {
  animation-play-state: paused;
}

/* Attention stat tiles — one restrained cue (icon breathe + soft border) */
.db-stat-card[data-status="attention"] {
  border-left:3px solid var(--warning);
  animation:tileGlow 5s ease-in-out infinite;
}
@keyframes tileGlow {
  0%,100% { box-shadow:0 1px 3px rgba(0,0,0,.04); }
  50% { box-shadow:0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(196,127,23,.1); }
}

/* Harder futuristic stats: modern depth, gold accent on hover, better hierarchy */
.db-stat-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.db-stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(181,136,11,0.06) 0%, transparent 70%);
  transform: translate(20px, -20px);
  transition: transform 0.3s;
}
.db-stat-card:hover::after {
  transform: translate(10px, -10px);
}
.db-stat-body { flex: 1; min-width: 0; }
.db-stat-val { font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.02em; }
.db-stat-lbl { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-top: 2px; letter-spacing: 0.3px; }
.db-stat-icon{width:40px;height:40px;border-radius:10px;background:rgba(181,136,11,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.db-stat-icon.warn{background:rgba(245,158,11,.12);color:#f59e0b;}
.db-stat-icon.ok{background:rgba(34,197,94,.12);color:#22c55e;}
.db-stat-val{font-size:1.6rem;font-weight:700;line-height:1;}
.db-stat-lbl{font-size:0.75rem;color:var(--text-muted);margin-top:4px;}
.db-stat-trend{font-size:0.7rem;margin-top:6px;color:var(--text-muted);}
.db-stat-trend.up{color:#22c55e;}
.db-stat-trend.down{color:#ef4444;}

/* General futuristic live update for stats across pages (dashboard, compliance etc) */
.stat-value[data-live] { transition: color .2s; }
.live-update .stat-value { animation: livePulse 1.2s ease; }

/* ── Dashboard top strip — compact banners + map ── */
.dash-top-banners{
  display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
}
.dash-top-banners .db-portal-insights-banner{margin-bottom:0;}
#page-dashboard .db-stats-row{margin-bottom:12px;}
#page-dashboard .page-header{margin-bottom:10px;padding-bottom:8px;}
#page-dashboard .db-sidebar{gap:10px;}
#page-dashboard .db-sidebar-card{padding:12px 14px;}

/* ── LIVE PORTAL INSIGHTS + Operator Action Inbox — enterprise banners ──
   Neutral card chrome; status via a slim left accent + dot pills only.
   Background drift is intentionally subtle — alive, not decorative. */
.db-portal-insights-banner{
  margin-bottom:16px;
  padding:11px 14px !important;
  border:1px solid var(--border);
  border-left-width:3px;
  border-left-color:var(--muted-2);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  background:linear-gradient(135deg, var(--card) 0%, var(--surface,#fafafa) 48%, var(--card) 100%);
  background-size:200% 200%;
  animation:portalInsightsBg 28s ease-in-out infinite;
}
.dash-top-banners .db-futuristic-card::before{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.05) 30%, rgba(0,0,0,.05) 70%, transparent);
}
@keyframes portalInsightsBg{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.db-portal-insights-inner,
.dash-inbox-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.db-portal-insights-eyebrow{
  font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.65px;
  text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.db-portal-insights-tagline{
  font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.4;
}
.db-portal-insights-pills{display:flex;gap:6px;flex-wrap:wrap;}
@media (prefers-reduced-motion: reduce){
  .db-portal-insights-banner{animation:none;background-size:auto;}
}
body.animations-off .db-portal-insights-banner{
  animation:none !important;background-size:auto !important;
}

/* Enterprise status pills — neutral chip, semantic dot only */
.dash-status-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;font-size:10px;font-weight:600;
  color:var(--muted);background:var(--card);
  border:1px solid var(--border);border-radius:999px;
}
.dash-status-pill .dash-status-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--muted-2);
}
.dash-status-pill[data-tone="green"]{color:var(--text);}
.dash-status-pill[data-tone="green"] .dash-status-dot{background:var(--success);}
.dash-status-pill[data-tone="yellow"] .dash-status-dot{background:var(--warning);}
.dash-status-pill[data-tone="red"] .dash-status-dot{background:var(--danger);}

/* Collapsible dashboard panels — eye toggle (Insights + Action Inbox) */
.dash-collapsible-panel[data-collapsed="true"] .dash-panel-body{display:none;}
.dash-panel-banner{cursor:pointer;user-select:none;width:100%;}
.dash-panel-banner:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}
.dash-panel-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.dash-panel-eye-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background:var(--neutral-fill);color:var(--muted);
  border:1px solid var(--border);flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s;
}
.dash-panel-banner:hover .dash-panel-eye-toggle{
  background:var(--surface-2,#f3f4f6);color:var(--text);border-color:var(--border-2,var(--border));
}
.dash-panel-eye-toggle i{font-size:14px;}

/* LIVE PORTAL INSIGHTS — left-accent status (no full-card color wash) */
#dashPortalInsights[data-feed-status="green"]{
  border-left-color:var(--success);
}
#dashPortalInsights[data-feed-status="yellow"]{
  border-left-color:var(--warning);
}
#dashPortalInsights[data-feed-status="red"]{
  border-left-color:var(--danger);
  animation:portalInsightsBg 28s ease-in-out infinite, dashBannerAttention 6s ease-in-out infinite;
}
@keyframes dashBannerAttention{
  0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.04);}
  50%{box-shadow:0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(184,50,48,.12);}
}

.sysref-embedded{
  margin:0;border:none;box-shadow:none;background:transparent;padding:0;
}
.sysref-embedded .sysref-hero{margin-bottom:10px;padding:8px 10px;}

/* Operator Action Inbox — attention = left accent only, same neutral drift */
.dash-action-inbox[data-status="attention"]{
  border-left-color:var(--danger);
  animation:portalInsightsBg 28s ease-in-out infinite, dashBannerAttention 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .dash-action-inbox[data-status="attention"],
  #dashPortalInsights[data-feed-status="red"]{animation:none;background-size:auto;}
}
.dash-action-inbox[data-collapsed="true"] .dash-inbox-body{display:none;}
.dash-inbox-banner-right{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;
}
.dash-inbox-banner-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.dash-inbox-body{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
}
.dash-inbox-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media(max-width:980px){.dash-inbox-grid{grid-template-columns:1fr;}}
.dash-inbox-col{
  background:var(--surface, var(--card));
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  min-height:108px;
  display:flex;flex-direction:column;
}
.dash-inbox-col[data-status="attention"]{
  border-color:rgba(239,68,68,0.22);
  background:linear-gradient(180deg, rgba(239,68,68,0.03) 0%, transparent 100%);
}
.dash-inbox-col-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:10px;
}
.dash-inbox-col-title{
  font-size:0.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.55px;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.dash-inbox-badge{
  font-size:0.72rem;font-weight:800;padding:2px 8px;border-radius:999px;
  background:var(--surface-2, #f3f4f6);color:var(--text);
}
.dash-inbox-badge.warn{background:var(--warning-fill);color:var(--warning);}
.dash-inbox-badge.danger{background:var(--danger-fill);color:var(--danger);}
.dash-inbox-badge.ok{background:var(--success-fill);color:var(--success);}
.dash-inbox-list{flex:1;display:flex;flex-direction:column;gap:6px;}
.dash-inbox-row{
  display:flex;align-items:flex-start;gap:8px;padding:7px 8px;
  border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:background .15s, border-color .15s;
}
.dash-inbox-row:hover{background:rgba(181,136,11,0.05);border-color:rgba(181,136,11,0.12);}
.dash-inbox-row-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--warning);}
.dash-inbox-row-dot.critical{background:var(--danger);}
.dash-inbox-row-dot.info{background:var(--info,#3b82f6);}
.dash-inbox-row-body{flex:1;min-width:0;}
.dash-inbox-row-lbl{font-size:0.78rem;font-weight:600;color:var(--text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-inbox-row-sub{font-size:0.68rem;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-inbox-foot{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  text-align:right;
}
.dash-inbox-foot a{
  font-size:0.7rem;font-weight:700;color:var(--accent);text-decoration:none;
}
.dash-inbox-foot a:hover{text-decoration:underline;}
.dash-inbox-empty{
  flex:1;display:flex;align-items:center;gap:8px;
  font-size:0.76rem;color:var(--muted);padding:8px 0;
}
.dash-inbox-empty i{font-size:1rem;}

.db-main-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;}
@media(max-width:1100px){.db-main-grid{grid-template-columns:1fr;}}

.db-graph-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
/* Harder futuristic dashboard: subtle depth, live glow, modern cards */
.db-futuristic-card {
  background: linear-gradient(145deg, var(--card) 0%, #faf8f5 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;   /* denser — more map / stat data visible */
  position: relative;
  overflow: hidden;
}
/* Top accent + cursor-follow ambient wash (JS sets --glow-x / --glow-y). */
.db-futuristic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(181, 136, 11, 0.35) 20%, rgba(181, 136, 11, 0.35) 80%, transparent);
  pointer-events: none;
}
.db-futuristic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    480px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(181, 136, 11, 0.055) 0%,
    rgba(181, 136, 11, 0.02) 32%,
    transparent 62%
  );
}
.db-futuristic-card.glow-active::after {
  opacity: 1;
}
.db-futuristic-card > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .db-futuristic-card::after { display: none; }
}
html[data-theme="bright"] .db-futuristic-card::after {
  background: radial-gradient(
    480px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(181, 136, 11, 0.04) 0%,
    rgba(181, 136, 11, 0.014) 32%,
    transparent 62%
  );
}
.db-futuristic-card .live-dot {
  width: 8px; height: 8px; background: #22c55e; border-radius: 50%;
  box-shadow: 0 0 6px #22c55e; display: inline-block; animation: livePulse 2s infinite;
}
.db-graph-header{display:flex;align-items:flex-start;justify-content:space-between;padding:8px 12px 6px;gap:10px;flex-wrap:wrap;}
.db-graph-title{font-size:0.82rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:5px;}
.db-graph-sub{font-size:0.68rem;color:var(--text-muted);margin-top:1px;}
.db-graph-controls{display:flex;gap:6px;flex-wrap:wrap;}
.graph-ctrl-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:0.75rem;padding:4px 12px;cursor:pointer;transition:all var(--t);}
.graph-ctrl-btn.active,.graph-ctrl-btn:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}
.db-graph-legend{padding:10px 20px 14px;display:flex;align-items:center;gap:16px;font-size:0.72rem;color:var(--text-muted);flex-wrap:wrap;}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;}

/* Subtle animated status for legend (professional futuristic) */
.map-legend-ring.live-pending { animation: legendPulse 2.5s ease-in-out infinite; }
.map-legend-ring.live-blocked { animation: legendPulse 2s ease-in-out infinite; }
@keyframes legendPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,127,23,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(196,127,23,0); }
}

.db-sidebar{display:flex;flex-direction:column;gap:14px;}
.db-sidebar-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;}
.db-sidebar-title{font-size:0.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;display:flex;align-items:center;gap:6px;}

/* ── Action items (sidebar) ── */
.action-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.action-item:last-child{border-bottom:none;padding-bottom:0;}
.action-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;}
.action-dot.warn{background:#f59e0b;}
.action-dot.ok{background:#22c55e;}
.action-lbl{font-size:0.82rem;font-weight:500;color:var(--text);}
.action-sub{font-size:0.72rem;color:var(--text-muted);margin-top:2px;}
.action-item > div:nth-child(2){flex:1;}
.action-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:0.72rem;padding:3px 10px;cursor:pointer;white-space:nowrap;transition:all var(--t);}
.action-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── System Refresh status board (full-width, under the map stat strip) ──
   Status dots use the theme tokens (no hardcoded hex). The subtle pulse
   is gated by [data-pulse] which perf-lite + prefers-reduced-motion both
   already suppress (theme.css). Reads as a clean status board, not a list. */
.sysref-card{
  margin-top:14px;padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
}
/* Prominent overall status — a hero band with a big dot + status sentence.
   A subtle left accent in the worst-state token reinforces green/yellow/red. */
.sysref-hero{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;margin-bottom:12px;
  border-radius:var(--r);
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid var(--muted-2);
}
.sysref-hero.green{border-left-color:var(--success);}
.sysref-hero.yellow{border-left-color:var(--warning);}
.sysref-hero.red{border-left-color:var(--danger);}
.sysref-hero-text{font-size:0.95rem;font-weight:700;color:var(--text);}
.sysref-group-title{font-size:0.66rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.7px;margin:14px 0 8px;}
.sysref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;
}
.sysref-tile{
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg,transparent);
}
.sysref-tile.clickable{cursor:pointer;}
.sysref-tile.clickable:hover{border-color:var(--danger);}
.sysref-tile.clickable:hover .sysref-tile-label{color:var(--danger);}
.sysref-tile-head{display:flex;align-items:center;gap:8px;}
.sysref-tile-label{font-size:0.82rem;font-weight:600;color:var(--text);flex:1;min-width:0;}
.sysref-tile-fresh{font-size:0.7rem;color:var(--muted);margin-top:5px;}
.sysref-tile-detail{font-size:0.7rem;color:var(--muted);margin-top:3px;}
.sysref-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--muted-2);}
.sysref-dot.lg{width:14px;height:14px;}
.sysref-dot.green{background:var(--success);}
.sysref-dot.yellow{background:var(--warning);}
.sysref-dot.red{background:var(--danger);}
.sysref-dot.grey{background:var(--muted-2);}
.sysref-broker-count{font-size:0.82rem;font-weight:700;color:var(--text);}
/* The pulse keyframe is shared (theme.css @keyframes pulse). data-pulse
   opts the dot into the loop; perf-lite/reduced-motion stop it. */
.sysref-dot[data-pulse]{animation:pulse 2.4s ease-in-out infinite;}
/* The HERO status dot animates on attention-states (yellow/red) regardless of
   perf-lite — it's a single cheap dot, not the map's heavy loops, and the
   operator wants the overall light to read as "alive". Only
   prefers-reduced-motion stops it (accessibility). */
.sysref-dot.lg.yellow, .sysref-dot.lg.red{animation:sysrefHeroPulse 1.6s ease-in-out infinite;}
@keyframes sysrefHeroPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.28);opacity:.55;}}
@media (prefers-reduced-motion: reduce){.sysref-dot.lg{animation:none !important;}}
.action-item.danger .action-btn:hover{border-color:#ef4444;color:#ef4444;}

/* ── Action Required attention animations (even action required may be) ──
   Subtle professional pulses on dots + soft glow/breathe on the card and items.
   Matches the treatment on stat tiles (tileGlow, iconBreathe) and live-dots.
   Red for Critical blockers; restrained, respects reduced-motion via theme. */
.action-dot:not(.ok) {
  animation: actionDotPulse 2s ease-in-out infinite;
}
@keyframes actionDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.38); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); transform: scale(1.18); }
}
.action-dot.warn {
  animation: actionDotPulseWarn 2.4s ease-in-out infinite;
}
@keyframes actionDotPulseWarn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.38); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

.action-item.attention {
  animation: attentionItemBreathe 5s ease-in-out infinite;
}
@keyframes attentionItemBreathe {
  0%,100% { background-color: transparent; }
  50% { background-color: rgba(239, 68, 68, 0.035); }
}

/* Attention treatment on the Action Required sidebar card itself */
.db-sidebar-card[data-status="attention"] {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.14);
  animation: actionCardGlow 4.5s ease-in-out infinite;
}
@keyframes actionCardGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.14); }
  50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.05); }
}
.db-sidebar-card[data-status="attention"]:hover {
  animation-play-state: paused;
}

/* Top Action Required strip attention dots */
#dashboard-alert-strip[data-status="attention"] .action-dot {
  animation: actionDotPulse 1.8s ease-in-out infinite;
}
#dashboard-alert-strip[data-status="attention"] {
  animation: stripAttention 4.2s ease-in-out infinite;
}
@keyframes stripAttention {
  0%,100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.12); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .action-dot:not(.ok), .action-dot.warn, .action-item.attention,
  .db-sidebar-card[data-status="attention"], #dashboard-alert-strip[data-status="attention"] {
    animation: none !important;
  }
}

.act-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:0.78rem;}
.act-item:last-child{border-bottom:none;}
.act-badge{font-size:0.65rem;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap;}
.act-badge.coc{background:rgba(181,136,11,.15);color:var(--accent);}
.act-badge.xfer{background:rgba(59,130,246,.15);color:#3b82f6;}
.act-badge.test{background:rgba(34,197,94,.15);color:#22c55e;}
.act-badge.warn{background:rgba(239,68,68,.12);color:#ef4444;}
.act-text{flex:1;color:var(--text-muted);}
.act-time{color:var(--text-muted);opacity:.6;white-space:nowrap;}

/* Compliance score — fully responsive */
.compliance-score-wrap{position:relative;width:min(140px, 80%);margin:0 auto 12px;}
.compliance-arc{width:100%;height:auto;display:block;}
.compliance-score-val{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:clamp(1.2rem, 4vw, 1.8rem);font-weight:700;color:var(--text);}
.comp-bar-row{display:flex;align-items:center;gap:8px;font-size:0.72rem;color:var(--text-muted);margin-bottom:8px;}
.comp-bar-row span:first-child{width:110px;flex-shrink:0;font-size:clamp(0.6rem, 2vw, 0.72rem);}
.comp-bar-row span:last-child{width:30px;text-align:right;color:var(--text);}
.comp-bar{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
/* Default fill; JS sets per-bar color by score band (green/yellow/red). */
.comp-bar div{height:100%;background:#22c55e;border-radius:3px;transition:width 1s ease-out,background .35s ease;}
.comp-bar.ok div{background:#22c55e;}
.comp-bar-row span:last-child{transition:color .35s ease;}

/* One-shot bar shimmer during milestone open (colors stay band-correct) */
.mini-compliance.compliance-bars-pulse .comp-bar div{
  animation:complianceBarPulse 1.2s ease-out 1;
}
@keyframes complianceBarPulse{
  0%{filter:brightness(1);transform:scaleY(1);}
  40%{filter:brightness(1.25);transform:scaleY(1.35);}
  100%{filter:brightness(1);transform:scaleY(1);}
}
@media (prefers-reduced-motion: reduce){
  .mini-compliance.compliance-bars-pulse .comp-bar div{animation:none !important;}
}

/* ── Compliance milestones — distinct one-shot FX per level ──────────
   60 rise · 80 spark · 90 streak · 100 burst
   Open once; banner stays; no infinite loops (refresh-safe).
──────────────────────────────────────────────────────────────────── */
.mini-compliance{position:relative;}

/* Resting band tints (stay after burst) */
.mini-compliance.compliance-perfect{
  border-color:color-mix(in srgb, var(--success) 45%, var(--border));
  background:var(--card);
}
.mini-compliance.compliance-perfect .comp-bar-row span:last-child{
  color:var(--success);font-weight:700;
}
.mini-compliance.compliance-m60{
  border-color:color-mix(in srgb, var(--warning) 50%, var(--border));
}
.mini-compliance.compliance-m80{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
}
.mini-compliance.compliance-m90{
  border-color:color-mix(in srgb, var(--success) 40%, var(--border));
}

/* Particle layer — clipped to gauge */
.compliance-perfect-layer{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;
  contain:strict;
}
.compliance-fx{
  position:absolute;left:50%;top:58%;width:7px;height:7px;border-radius:2px;
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.compliance-fx.circle{border-radius:50%;}
.compliance-fx.dash{width:12px;height:3px;border-radius:2px;}

/* 60 Looking good — soft amber bubbles float up */
.compliance-fx--rise{
  animation:complianceFxRise 1.35s ease-out forwards;
}
/* 80 Going strong — gold sparks shoot sideways */
.compliance-fx--spark{
  animation:complianceFxSpark 1.15s cubic-bezier(.2,.8,.2,1) forwards;
}
/* 90 Almost there — green-gold streaks shoot up */
.compliance-fx--streak{
  width:3px;height:14px;border-radius:2px;
  animation:complianceFxStreak 1.05s cubic-bezier(.15,.9,.3,1) forwards;
}
.compliance-fx--streak.circle{width:6px;height:6px;}
.compliance-fx--streak.dash{width:3px;height:16px;}
/* 100 Perfect — radial confetti burst */
.compliance-fx--burst{
  animation:complianceFxBurst 1.25s cubic-bezier(.15,.75,.35,1) forwards;
}

/* Card / score / banner FX while .compliance-milestone-burst is on */
/* 60: gentle nod */
.mini-compliance.compliance-fx-rise.compliance-milestone-burst .compliance-score-val{
  animation:complianceScoreNod .85s ease-out 1;
}
.mini-compliance.compliance-fx-rise.compliance-milestone-burst{
  animation:complianceCardGlowAmber 1.2s ease-out 1;
}
.mini-compliance.compliance-fx-rise.compliance-milestone-burst .compliance-perfect-banner{
  animation:complianceBannerSlideUp .5s ease-out 1;
}

/* 80: strong bounce + gold flash */
.mini-compliance.compliance-fx-spark.compliance-milestone-burst .compliance-score-val{
  animation:complianceScoreBounce 1s cubic-bezier(.34,1.5,.64,1) 1;
}
.mini-compliance.compliance-fx-spark.compliance-milestone-burst{
  animation:complianceCardFlashGold 1.1s ease-out 1;
}
.mini-compliance.compliance-fx-spark.compliance-milestone-burst .compliance-perfect-banner{
  animation:complianceBannerSnap .45s cubic-bezier(.34,1.6,.64,1) 1;
}

/* 90: double pulse + ring shimmer */
.mini-compliance.compliance-fx-streak.compliance-milestone-burst .compliance-score-val{
  animation:complianceScorePulse2 1.15s ease-in-out 1;
}
.mini-compliance.compliance-fx-streak.compliance-milestone-burst{
  animation:complianceCardRingGreen 1.3s ease-out 1;
}
.mini-compliance.compliance-fx-streak.compliance-milestone-burst .compliance-perfect-banner{
  animation:complianceBannerZap .5s cubic-bezier(.2,1.2,.4,1) 1;
}

/* 100: big pop + green glow */
.mini-compliance.compliance-fx-burst.compliance-milestone-burst .compliance-score-val,
.mini-compliance.compliance-perfect-burst .compliance-score-val{
  animation:complianceScorePopBig 1.1s cubic-bezier(.34,1.55,.64,1) 1;
}
.mini-compliance.compliance-fx-burst.compliance-milestone-burst,
.mini-compliance.compliance-perfect-burst{
  animation:complianceCardGlowGreen 1.4s ease-out 1;
}
.mini-compliance.compliance-fx-burst.compliance-milestone-burst .compliance-perfect-banner,
.mini-compliance.compliance-perfect-burst .compliance-perfect-banner{
  animation:complianceBannerParty .55s cubic-bezier(.34,1.5,.64,1) 1;
}

/* Banner shell */
.compliance-perfect-banner{
  display:none;align-items:center;justify-content:center;gap:6px;
  margin:0 0 10px;padding:7px 12px;
  border-radius:999px;
  background:var(--success-fill);
  border:1px solid color-mix(in srgb, var(--success) 40%, transparent);
  color:var(--success);font-size:0.8rem;font-weight:700;letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.mini-compliance.compliance-perfect .compliance-perfect-banner,
.mini-compliance.compliance-m60 .compliance-perfect-banner,
.mini-compliance.compliance-m80 .compliance-perfect-banner,
.mini-compliance.compliance-m90 .compliance-perfect-banner,
.mini-compliance.compliance-milestone-burst .compliance-perfect-banner,
.mini-compliance.compliance-perfect-burst .compliance-perfect-banner{
  display:flex !important;
}
.compliance-perfect-emoji{font-size:0.95rem;line-height:1;}
.compliance-perfect-text{color:inherit;}

/* Banner band colors */
.compliance-perfect-banner.compliance-banner-m60{
  background:var(--warning-fill, rgba(196,127,23,.12));
  border-color:color-mix(in srgb, var(--warning) 40%, transparent);
  color:var(--warning);
}
.compliance-perfect-banner.compliance-banner-m80{
  background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent);
}
.compliance-perfect-banner.compliance-banner-m90{
  background:var(--success-fill);
  border-color:color-mix(in srgb, var(--success) 35%, transparent);
  color:var(--success);
}
.compliance-perfect-banner.compliance-banner-m100{
  background:var(--success-fill);
  border-color:color-mix(in srgb, var(--success) 40%, transparent);
  color:var(--success);
}

/* Dark (default) */
html[data-theme="dark"] .mini-compliance.compliance-perfect,
html:not([data-theme]) .mini-compliance.compliance-perfect{
  border-color:rgba(74,222,128,.35);
  background:linear-gradient(165deg,rgba(34,197,94,.08),var(--card) 70%);
}
html[data-theme="dark"] .mini-compliance.compliance-perfect .comp-bar-row span:last-child,
html:not([data-theme]) .mini-compliance.compliance-perfect .comp-bar-row span:last-child{
  color:#4ade80;
}
html[data-theme="dark"] .compliance-perfect-banner.compliance-banner-m60,
html:not([data-theme]) .compliance-perfect-banner.compliance-banner-m60{
  background:rgba(196,127,23,.14);
  border-color:rgba(251,191,36,.35);
  color:#fbbf24;
}
html[data-theme="dark"] .compliance-perfect-banner.compliance-banner-m80,
html:not([data-theme]) .compliance-perfect-banner.compliance-banner-m80{
  background:rgba(212,175,55,.14);
  border-color:rgba(232,197,71,.35);
  color:#e8c547;
}
html[data-theme="dark"] .compliance-perfect-banner.compliance-banner-m90,
html:not([data-theme]) .compliance-perfect-banner.compliance-banner-m90{
  background:rgba(34,197,94,.10);
  border-color:rgba(74,222,128,.28);
  color:#86efac;
}
html[data-theme="dark"] .compliance-perfect-banner.compliance-banner-m100,
html:not([data-theme]) .compliance-perfect-banner.compliance-banner-m100{
  background:rgba(34,197,94,.12);
  border-color:rgba(74,222,128,.32);
  color:#4ade80;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.08);
}

/* Bright */
html[data-theme="bright"] .mini-compliance.compliance-perfect{
  border-color:rgba(46,125,50,.4);
  background:var(--card);
}
html[data-theme="bright"] .mini-compliance.compliance-perfect .comp-bar-row span:last-child{
  color:var(--success);
}
html[data-theme="bright"] .compliance-perfect-banner.compliance-banner-m100{
  background:var(--success-fill);
  border-color:rgba(46,125,50,.35);
  color:var(--success);
  box-shadow:none;
}

/* ── Keyframes: particles ── */
@keyframes complianceFxRise{
  0%{opacity:0;transform:translate(-50%,0) scale(.4);}
  15%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)), var(--dy)) scale(1);}
}
@keyframes complianceFxSpark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4) rotate(var(--rot));}
}
@keyframes complianceFxStreak{
  0%{opacity:1;transform:translate(-50%,-50%) scaleY(.3) rotate(0deg);}
  40%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scaleY(1.2) rotate(var(--rot));}
}
@keyframes complianceFxBurst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.45) rotate(var(--rot));}
}

/* ── Keyframes: score ── */
@keyframes complianceScoreNod{
  0%{transform:translateX(-50%) scale(1);}
  40%{transform:translateX(-50%) scale(1.08);}
  100%{transform:translateX(-50%) scale(1);}
}
@keyframes complianceScoreBounce{
  0%{transform:translateX(-50%) scale(1);}
  35%{transform:translateX(-50%) scale(1.22);}
  55%{transform:translateX(-50%) scale(.94);}
  75%{transform:translateX(-50%) scale(1.06);}
  100%{transform:translateX(-50%) scale(1);}
}
@keyframes complianceScorePulse2{
  0%{transform:translateX(-50%) scale(1);}
  25%{transform:translateX(-50%) scale(1.14);}
  50%{transform:translateX(-50%) scale(1);}
  75%{transform:translateX(-50%) scale(1.1);}
  100%{transform:translateX(-50%) scale(1);}
}
@keyframes complianceScorePopBig{
  0%{transform:translateX(-50%) scale(1);}
  40%{transform:translateX(-50%) scale(1.32);}
  65%{transform:translateX(-50%) scale(.92);}
  100%{transform:translateX(-50%) scale(1);}
}

/* ── Keyframes: card ── */
@keyframes complianceCardGlowAmber{
  0%{box-shadow:0 0 0 0 rgba(251,191,36,0);}
  40%{box-shadow:0 0 0 3px rgba(251,191,36,.25),0 6px 20px rgba(251,191,36,.12);}
  100%{box-shadow:0 0 0 0 rgba(251,191,36,0);}
}
@keyframes complianceCardFlashGold{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,0);}
  30%{box-shadow:0 0 0 4px rgba(212,175,55,.35),0 8px 24px rgba(212,175,55,.18);}
  100%{box-shadow:0 0 0 1px rgba(212,175,55,.15);}
}
@keyframes complianceCardRingGreen{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
  35%{box-shadow:0 0 0 3px rgba(74,222,128,.3),0 0 20px rgba(212,175,55,.12);}
  70%{box-shadow:0 0 0 5px rgba(74,222,128,.12);}
  100%{box-shadow:0 0 0 1px rgba(74,222,128,.2);}
}
@keyframes complianceCardGlowGreen{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
  40%{box-shadow:0 0 0 5px rgba(34,197,94,.3),0 10px 28px rgba(34,197,94,.18),0 0 32px rgba(212,175,55,.1);}
  100%{box-shadow:0 0 0 1px rgba(34,197,94,.22),0 6px 18px rgba(34,197,94,.1);}
}

/* ── Keyframes: banner entrance ── */
@keyframes complianceBannerSlideUp{
  0%{opacity:0;transform:translateY(10px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes complianceBannerSnap{
  0%{opacity:0;transform:scale(.7);}
  70%{transform:scale(1.06);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes complianceBannerZap{
  0%{opacity:0;transform:translateY(6px) scaleX(.85);}
  50%{opacity:1;transform:translateY(-2px) scaleX(1.04);}
  100%{opacity:1;transform:translateY(0) scaleX(1);}
}
@keyframes complianceBannerParty{
  0%{opacity:0;transform:scale(.6) rotate(-3deg);}
  55%{transform:scale(1.08) rotate(1deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}

@media (prefers-reduced-motion: reduce){
  .mini-compliance.compliance-milestone-burst .compliance-score-val,
  .mini-compliance.compliance-perfect-burst .compliance-score-val,
  .mini-compliance.compliance-milestone-burst .compliance-perfect-banner,
  .mini-compliance.compliance-perfect-burst .compliance-perfect-banner,
  .mini-compliance.compliance-milestone-burst,
  .mini-compliance.compliance-perfect-burst,
  .compliance-fx{animation:none !important;}
  .mini-compliance.compliance-perfect .compliance-perfect-banner,
  .mini-compliance.compliance-m60 .compliance-perfect-banner,
  .mini-compliance.compliance-m80 .compliance-perfect-banner,
  .mini-compliance.compliance-m90 .compliance-perfect-banner{
    display:flex !important;opacity:1;transform:none;
  }
}

/* 3D graph node tooltip */
#graph-tooltip{position:fixed;pointer-events:none;background:rgba(22,28,36,.95);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:0.78rem;color:var(--text);z-index:9999;display:none;max-width:220px;will-change:transform;}
#graph-tooltip .tt-title{font-weight:600;color:var(--accent);margin-bottom:4px;}
#graph-tooltip .tt-row{display:flex;justify-content:space-between;gap:16px;color:var(--text-muted);}
#graph-tooltip .tt-row span:last-child{color:var(--text);font-weight:500;}

/* ── Vendor banner ── */
.vendor-banner{
  background:linear-gradient(135deg,rgba(181,136,11,.08),rgba(181,136,11,.03));
  border:1px solid rgba(181,136,11,.25); border-radius:var(--r);
  padding:10px 16px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px;
}
.vendor-banner .vb-info{ display:flex; align-items:center; gap:10px; }
.vendor-banner .vb-icon{
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:15px;
}
.vendor-banner .vb-name{ font-weight:700; color:var(--text); }
.vendor-banner .vb-code{ color:var(--muted); font-size:11px; }

/* Two-col security layout */
.security-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:1024px){ .security-cols{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════
   GEO MAP — Interactive world map
══════════════════════════════════════════ */
.geo-section{
  display: grid; grid-template-columns: 1fr 300px; gap: 0;
  overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.geo-map-wrap{
  position: relative; padding: 16px;
  min-height: 320px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-right: 1px solid var(--border-2);
}
.geo-map-wrap canvas{
  width: 100%; height: 100%;
  display: block; cursor: crosshair;
}
/* Tooltip */
.geo-tooltip{
  position: absolute; pointer-events: none;
  background: var(--surface); border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  padding: 10px 14px; font-size: 12px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  z-index: 10; white-space: nowrap;
}
.geo-tooltip.show{ opacity: 1; transform: translateY(0); }
.geo-tooltip .gt-country{
  font-weight: 700; font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.geo-tooltip .gt-country .gt-flag{ font-size: 16px; }
.geo-tooltip .gt-row{
  display: flex; justify-content: space-between; gap: 20px;
  padding: 2px 0; font-size: 11px;
}
.geo-tooltip .gt-row .gt-k{ color: var(--muted); }
.geo-tooltip .gt-row .gt-v{ font-weight: 600; }

/* Country data sidebar */
.geo-data{
  padding: 14px 16px; overflow-y: auto;
  max-height: 360px;
}
.geo-data h4{
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); font-weight: 700; margin: 0 0 10px;
}
.country-row{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  margin-bottom: 2px;
}
.country-row:hover{ background: var(--accent-soft); box-shadow: var(--shadow-xs); }
.country-row.active{ background: var(--accent-soft); }
.country-flag{ flex-shrink: 0; }
.country-info{ flex: 1; min-width: 0; }
.country-name{ font-size: 12px; font-weight: 600; color: var(--text); }
.country-detail{ font-size: 10px; color: var(--muted); margin-top: 1px; }
.country-stats{
  text-align: right; flex-shrink: 0;
}
.country-stats .cs-val{ font-size: 14px; font-weight: 800; color: var(--text); }
.country-stats .cs-label{ font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.country-stats .cs-bar{
  width: 48px; height: 4px; background: var(--border);
  border-radius: 2px; margin-top: 3px; overflow: hidden;
}
.country-stats .cs-bar-fill{
  height: 100%; border-radius: 2px;
  transition: width .6s var(--ease);
}

@media (max-width: 900px){
  .geo-section{ grid-template-columns: 1fr; }
  .geo-map-wrap{ border-right: none; border-bottom: 1px solid var(--border-2); min-height: 240px; }
  .geo-data{ max-height: none; }
}

/* ══════════════════════════════════════════
   PREMIUM MAP — Operational Intelligence Panel
   Flexport / Palantir-grade styling
══════════════════════════════════════════ */

/* Map container upgrade */
#mapbox-container{border-radius:12px;overflow:hidden;background:#e8e0d8;position:relative;}
#mapboxMap{width:100%;height:100%;}

/* Operational toolbar */
.map-ops-bar{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);position:absolute;top:0;left:0;right:0;z-index:5;
}
.map-ops-bar .ops-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:8px;}
.map-toggle{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--text);transition:all .2s;user-select:none;
}
.map-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.map-toggle .toggle-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.map-ops-sep{width:1px;height:20px;background:var(--border);margin:0 4px;}
.map-ops-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.map-live-badge{
  display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(34,197,94,0.1);color:#16a34a;border:1px solid rgba(34,197,94,0.2);
}
.map-live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:mapPulse 3.2s infinite;}
@keyframes mapPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.4);}50%{opacity:.65;box-shadow:0 0 0 5px rgba(34,197,94,0);}}

/* Supply Chain Overview map on Dashboard — lightweight, tasteful animation
   User likes the "background" movement but we must avoid motion discomfort ("headache").
   - Very slow + tiny scale changes (9.5s flow, 1.018x breathe)
   - Mobile: much smaller viewport height + auto-static + even slower / none
   - Zoom: vector-effect: non-scaling-stroke + runtime perfLite stripping on resize/dpr
   - Strong reduced-motion + user toggle in profile + auto _perfLite(>250 nodes or touch)
   - Pure CSS (no rAF loops in hot path)
   - Still feels alive and premium when enabled */
#dashMapSvg .map-arcs path.animated-flow,
#dashMapSvg .map-arcs path.flow {
  /* Calm professional flow — slow enough to be pleasant, not distracting */
  stroke-width: 1.9;
  animation: supplyArcFlow 9.5s linear infinite;
  vector-effect: non-scaling-stroke; /* helps at browser zoom levels */
}
@keyframes supplyArcFlow {
  to { stroke-dashoffset: -18; }
}

#dashMapSvg .map-arcs .shipment-dot,
#dashMapSvg .map-arcs .shipment-pulse {
  /* Gentler pulse — smaller excursion so less likely to cause discomfort */
  animation: supplyShipmentPulse 5.8s ease-in-out infinite;
}
@keyframes supplyShipmentPulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.35); opacity: 0.22; }
}

#dashMapSvg .map-nodes .live-node {
  animation: supplyNodeBreathe 7s ease-in-out infinite;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
#dashMapSvg .map-nodes .live-node.attention {
  animation: supplyNodeBreatheAttention 4.5s ease-in-out infinite;
}
@keyframes supplyNodeBreathe {
  0%,100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.018); opacity: 0.98; }
}
@keyframes supplyNodeBreatheAttention {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Subtle live-update flash on the map container when data refreshes (re-uses tile pattern) */
#dashMapWrap.live-update #dashMapSvg {
  animation: livePulse 1.1s ease;
}

/* ── Responsive map (mobile + zoom friendliness) ─────────────────────
   480px is great on desktop but way too tall on phones.
   Use viewport-relative height on small screens.
   Also reduce animation intensity on mobile to avoid motion issues + battery.
*/
#dashMapWrap {
  height: 300px;   /* tighter — keep map + sidebar above the fold with collapsed inbox */
}
@media (max-width: 900px) {
  #dashMapWrap { height: min(420px, 48vh) !important; }
  #dashMapSvg .map-arcs path.animated-flow,
  #dashMapSvg .map-arcs path.flow {
    animation-duration: 12s;
    stroke-width: 1.6;
  }
  #dashMapSvg .map-arcs .shipment-dot,
  #dashMapSvg .map-arcs .shipment-pulse {
    animation-duration: 7s;
  }
}
@media (max-width: 640px) {
  #dashMapWrap { height: min(340px, 42vh) !important; }
  /* On phones we lean even more static — the "background animation" is still
     there at very low intensity so it doesn't feel dead, but much calmer. */
  #dashMapSvg .map-arcs path.animated-flow,
  #dashMapSvg .map-nodes .live-node {
    animation-duration: 14s !important;
  }
  #dashMapSvg .shipment-dot {
    animation: none !important;   /* drop the pulsing dot on tiny screens */
  }
}

/* Smart legend bar (bottom of map) */
.map-legend-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:14px;padding:8px 16px;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);
  border-top:1px solid rgba(0,0,0,0.06);font-size:10px;color:var(--muted);
}
.map-legend-inline{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);}
.map-legend-item{display:flex;align-items:center;gap:5px;font-weight:500;}
.map-legend-ring{
  width:12px;height:12px;border-radius:50%;border:2.5px solid;background:transparent;
}
.map-legend-line{width:18px;height:0;border-top:2px dashed;}
.map-legend-diamond{width:8px;height:8px;transform:rotate(45deg);border-radius:1px;}
.map-legend-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-weight:600;}

/* Map detail panel upgrade */
#mapDetailPanel{
  display:none;position:absolute;top:48px;right:12px;width:300px;max-height:440px;
  overflow-y:auto;background:rgba(255,255,255,0.98);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.15);z-index:10;
  backdrop-filter:blur(12px);
}
.map-detail-header{
  padding:16px 18px 12px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.map-detail-name{font-size:14px;font-weight:800;letter-spacing:-.01em;}
.map-detail-loc{font-size:11px;color:var(--muted);margin-top:2px;}
.map-detail-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;padding:2px;}
.map-detail-close:hover{color:var(--text);}
.map-detail-body{padding:14px 18px;}
.map-detail-status{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.map-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.map-detail-stat{
  padding:10px 12px;background:var(--surface-2);border-radius:10px;text-align:center;
  border:1px solid transparent;
  transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.map-detail-stat:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.map-detail-stat .stat-val{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.map-detail-stat .stat-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:2px;}
.map-detail-progress{margin:10px 0;}
.map-detail-progress-label{display:flex;justify-content:space-between;font-size:10px;font-weight:600;margin-bottom:4px;}
.map-detail-progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.map-detail-progress-fill{height:100%;border-radius:3px;transition:width .5s;}
.map-detail-actions{display:flex;gap:6px;margin-top:14px;}
.map-detail-actions .btn{flex:1;font-size:10px;padding:7px 8px;border-radius:8px;}

/* Map popup styles for intelligence cards */
.map-intel-card{padding:14px 16px;font-size:12px;line-height:1.5;min-width:220px;}
.map-intel-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.map-intel-name{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text);}
.map-intel-sub{font-size:10px;color:#6B7280;margin-top:1px;}
.map-intel-badge{
  display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;
}
.map-intel-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;}
.map-intel-grid dt{font-size:10px;color:#6B7280;font-weight:500;}
.map-intel-grid dd{font-size:11px;font-weight:700;margin:0;}
.map-intel-risk{
  margin-top:8px;padding:6px 8px;border-radius:6px;font-size:10px;font-weight:600;
  display:flex;align-items:center;gap:5px;
}
/* Shipment intel card */
.map-ship-card{padding:12px 14px;font-size:11px;min-width:200px;}
.map-ship-route{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.map-ship-route .route-arrow{color:var(--accent);font-size:14px;}
.map-ship-progress{height:4px;background:#e5e7eb;border-radius:2px;margin:8px 0 4px;overflow:hidden;}
.map-ship-progress-fill{height:100%;border-radius:2px;}

/* Focus mode overlay */
.map-focus-overlay{
  position:absolute;top:48px;left:12px;z-index:5;
  display:none;padding:8px 14px;border-radius:10px;
  background:rgba(44,48,52,0.9);color:#fff;font-size:11px;font-weight:600;
  backdrop-filter:blur(8px);cursor:pointer;transition:opacity .2s;
}
.map-focus-overlay:hover{background:rgba(44,48,52,1);}
.map-focus-overlay i{margin-right:4px;}

/* ══════════════════════════════════════════
   LIVE STATUS TICKER — Bottom bar
══════════════════════════════════════════ */
.ticker{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--ticker-h);
  background:var(--ticker-bg);
  border-top:1px solid var(--ticker-border);
  box-shadow:var(--ticker-shadow);
  z-index:50;
  display:flex;align-items:center;
  /* Reserve a dedicated lane on the right — credit is position:fixed there */
  padding:0 calc(var(--ticker-credit-w) + 16px) 0 24px;
  font-size:12px;
  color:var(--ticker-text);
}
.ticker-status{
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
  padding-right:16px;
  border-right:1px solid var(--ticker-divider);
  margin-right:20px;
}
.ticker-pod{
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.health-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.health-dot.green{
  background:var(--success);
  box-shadow:0 0 4px rgba(5,150,105,.4);
  animation:pulse 2.4s ease-in-out infinite;
}
.health-dot.yellow{
  background:var(--warning);
  box-shadow:0 0 4px rgba(217,119,6,.4);
  animation:pulse 1.8s ease-in-out infinite;
}
.health-dot.red{
  background:var(--danger,#ef4444);
  box-shadow:0 0 4px rgba(239,68,68,.4);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.pod-label{color:var(--ticker-text-muted);}
.pod-val{font-weight:700;color:var(--accent);}
.ticker-feed{
  flex:1;overflow:hidden;position:relative;
  min-width:0;
  mask-image:linear-gradient(90deg,transparent,black 3%,black 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 3%,black 96%,transparent);
}
/* Pinned to the viewport corner — not competing with flex siblings */
.ticker-credit{
  position:fixed;
  right:0;
  bottom:0;
  z-index:55;
  width:var(--ticker-credit-w);
  height:var(--ticker-h);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 14px 0 28px;
  pointer-events:none;
  border-left:1px solid var(--ticker-divider);
  background:var(--ticker-bg);
  box-shadow:var(--ticker-credit-shadow);
}
.ticker-credit::before{
  content:'';
  position:absolute;
  right:100%;
  top:0;bottom:0;
  width:32px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--ticker-bg-solid));
}
.ticker-credit img{
  height:22px;
  width:auto;
  max-width:calc(var(--ticker-credit-w) - 42px);
  object-fit:contain;
  object-position:right center;
  opacity:1;
  display:block;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.35));
}
.ticker-track{
  display:flex;align-items:center;gap:32px;
  white-space:nowrap;width:max-content;
  animation:scroll var(--scroll-speed,300s) linear infinite;
}
.ticker-track:hover{animation-play-state:paused;}
@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.ticker-event{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ticker-text-muted);font-size:11px;opacity:.92;
}
.ticker-event:hover{color:var(--accent);opacity:1;}
.te-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;}
.te-dot.success{background:var(--success);}
.te-dot.warning{background:var(--warning);}
.te-dot.danger{background:var(--danger);}
.te-dot.info{background:var(--accent);}
.te-time{color:var(--chrome-muted);font-size:10px;}

/* ══════════════════════════════════════════
   DASHBOARD STAT STRIP — in-page row below the map
   (lightweight inline-SVG mini-charts;
    moved out of the bottom ticker into the dashboard body)
══════════════════════════════════════════ */
.dash-stat-strip{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:14px;padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:12px;color:var(--muted);
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.dash-stat-strip:hover{
  border-color:var(--border-2,var(--border));
  box-shadow:var(--shadow-xs);
}
.ss-loading{
  font-size:11px;font-weight:600;color:var(--text-2,var(--muted));
  letter-spacing:.02em;
}
.ss-loading .ss-retry{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.ss-loading .ss-retry:hover{ text-decoration:underline; }
/* Four mini-chart cards, left-aligned; health badge pinned right. */
.stat-strip-charts{
  display:flex;align-items:center;gap:22px;
  flex:1;min-width:0;flex-wrap:wrap;
}
.ss-card{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;white-space:nowrap;
}
.ss-card:hover .ss-label{color:var(--accent);}
.ss-chart{display:flex;align-items:center;flex-shrink:0;}
.ss-text{display:flex;flex-direction:column;line-height:1.05;}
.ss-value{font-weight:700;font-size:13px;color:var(--text);}
.ss-label{font-size:10px;color:var(--muted);}

.stat-strip-health{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  padding-left:18px;margin-left:18px;
  border-left:1px solid rgba(84,88,95,0.25);
}
.stat-strip-health-text{display:flex;flex-direction:column;line-height:1.1;}
.sh-label{font-weight:700;font-size:12px;color:var(--text);}
.sh-detail{font-size:10px;color:var(--muted);opacity:.85;}

/* ── Page responsive overrides ── */
@media (max-width: 1024px){
  .action-tiles{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .content-frame{ padding: 12px 14px; }
  .page-top{ flex-direction: column; align-items: flex-start; }
  .page-actions{ width: 100%; }
  .action-tiles{ grid-template-columns: 1fr 1fr; }
  .geo-data{ padding: 10px 12px; }
}
@media (max-width: 480px){
  .action-tiles{ grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   Sidebar Filter + Results Layout (CPSC portal pattern)
══════════════════════════════════════════ */
.filter-results-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
.filter-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  position: sticky;
  top: calc(var(--unified-nav-h) + var(--subnav-h) + 20px);
}
.filter-sidebar .filter-group { margin-bottom: 14px; }
.filter-sidebar .filter-group:last-of-type { margin-bottom: 0; }
.filter-sidebar .form-label {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px; display: block;
}
.filter-sidebar .form-input,
.filter-sidebar .form-select {
  width: 100%; box-sizing: border-box; font-size: 12px;
}
.filter-sidebar select[multiple] {
  height: 100px;
}
.results-panel { min-width: 0; }
.results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; font-size: 12px; color: var(--muted);
}

/* ── Data table (used by Upload History, Approval Queue, etc.) ──
   Defaults to a scroll-on-overflow shell so columns never overlap or
   smash into each other when the user zooms. table-layout:auto +
   min-widths on the cells means columns size to their content but
   the whole table can scroll sideways when the viewport is narrower
   than the content needs. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
  /* Wider than any reasonable narrow column; if total content needs
     more, the scroll container around the table handles it. */
  min-width: 760px;
}
.data-table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.4;
  /* Long filenames + IDs wrap inside the cell instead of pushing
     neighbors out of alignment. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.data-table tbody tr:hover { background: rgba(21,101,192,.03); }
/* The table sits inside .results-panel which is min-width:0 already.
   Wrap the table in a scroll shell so horizontal overflow scrolls,
   not overlaps. We give .results-panel itself the overflow rule when
   it contains a .data-table; safe because .results-panel is otherwise
   a passive container. */
.results-panel:has(.data-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px){
  .data-table { font-size: 11px; min-width: 640px; }
  .data-table thead th, .data-table tbody td { padding: 7px 10px; }
}
@media (max-width: 700px){
  .data-table { font-size: 10.5px; min-width: 560px; }
  .data-table thead th, .data-table tbody td { padding: 6px 8px; }
}

/* ── results-table + results-scroll (userstories.html, similar) ──
   The class was used without base rules; userstories.html wraps it in
   .results-scroll which also had no rules. Same overlap-on-zoom symptom
   as .data-table. */
.results-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
  min-width: 720px;
}
.results-table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.results-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.results-table tbody tr:hover { background: rgba(21,101,192,.03); }

/* ── Document Review Panel (Scanner page) ── */
.upload-row { transition: background .15s ease; }
.upload-row:hover { background: rgba(21,101,192,.04) !important; }
.upload-row-selected { background: rgba(21,101,192,.08) !important; box-shadow: inset 3px 0 0 var(--accent); }
.row-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; color: var(--muted); font-size: 12px;
  transition: all .15s ease;
}
.row-action-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(21,101,192,.04); }
#docReviewPanel { animation: slideDown .25s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════
   TEST RESULTS — Stats row & filter bar
══════════════════════════════════════════ */
.archive-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.archive-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--border, #e8e6f0);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}

.archive-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg, #1a1a2e);
}

.archive-stat-label {
  font-size: 11px;
  color: var(--muted, #999);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.archive-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e8e6f0);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}

.archive-filter-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.archive-filter-bar .filter-group label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #999);
}

.archive-filter-bar .filter-group input,
.archive-filter-bar .filter-group select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d0cde0);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg-card, #fff);
  color: var(--fg, #1a1a2e);
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
}

.archive-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #999);
  border-bottom: 2px solid var(--border, #e8e6f0);
}

.archive-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e8e6f0);
  font-size: 12px;
}

/* ══════════════════════════════════════════
   INQUIRY — Entity pills & search bar
══════════════════════════════════════════ */
.inquiry-entity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.entity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--border, #d0cde0);
  border-radius: 24px;
  background: var(--bg-card, #fff);
  color: var(--fg, #1a1a2e);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}

.entity-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.entity-pill.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.entity-pill.active:hover {
  color: #fff;
  background: var(--accent-hover, var(--accent));
  border-color: var(--accent-hover, var(--accent));
}

.entity-pill i {
  font-size: 14px;
}

.inquiry-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.inquiry-search-input-wrap {
  position: relative;
  flex: 1;
}

.inquiry-search-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #999);
  font-size: 14px;
}

.inquiry-search-input-wrap input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 2px solid var(--border, #d0cde0);
  border-radius: 10px;
  font-size: 13px;
  background: var(--bg-card, #fff);
  color: var(--fg, #1a1a2e);
  transition: border-color .2s;
}

.inquiry-search-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
#login-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(135deg, var(--wwof-navy-footer, #091421) 0%, var(--wwof-navy-deep, #1a2b3c) 45%, #0b1018 100%);
  background-size: 400% 400%;
  animation: loginBgShift 12s ease infinite;
}
@keyframes loginBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#login-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.login-card {
  position: relative;
  width: 420px; max-width: 92vw;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), var(--accent-glow);
  overflow: hidden;
  animation: loginSlideUp .5s cubic-bezier(.22,1,.36,1);
}
.login-card--vendor { width: 460px; }
@keyframes loginSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-header {
  text-align: center;
  padding: 36px 32px 20px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.login-logo {
  height: 48px; margin-bottom: 12px;
}
.login-title {
  font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 4px;
  letter-spacing: -.02em;
}
.login-subtitle {
  font-size: 12px; color: var(--muted); margin: 0 0 10px; font-weight: 400;
}
.login-env-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
  letter-spacing: .06em;
}
.login-env-pill.dev {
  background: rgba(181,136,11,.12); color: #B5880B;
}
.login-env-pill.azure {
  background: rgba(0,120,212,.12); color: #0078D4;
}

.login-body {
  padding: 28px 32px;
}

/* Microsoft sign-in button */
.login-ms-btn {
  width: 100%; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(212, 175, 55, 0.2); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: all .15s ease;
}
.login-ms-btn:hover {
  background: rgba(212, 175, 55, 0.1); border-color: #0078D4; color: #5eb3ff;
  box-shadow: 0 2px 12px rgba(0, 120, 212, 0.2);
}

.login-path-hint {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0;
}

.login-vendor-btn {
  width: 100%;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(46, 125, 50, 0.06);
  border: 1.5px solid rgba(46, 125, 50, 0.28);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
}
.login-vendor-btn:hover {
  background: rgba(46, 125, 50, 0.12);
  border-color: rgba(46, 125, 50, 0.45);
  color: #2E7D32;
  box-shadow: 0 2px 10px rgba(46, 125, 50, 0.15);
}
.login-vendor-btn--focus {
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}

/* Vendor onboarding on the main login URL (?vendor=1) */
.login-vendor-panel {
  margin-bottom: 18px; padding: 14px 16px;
  background: rgba(46, 125, 50, 0.08); border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 10px; text-align: left;
}
.login-vendor-panel--focus {
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.35);
}
.login-vendor-title {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.login-vendor-copy {
  font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0 0 8px;
}
.login-vendor-steps {
  margin: 0 0 12px; padding-left: 18px; font-size: 11px;
  color: var(--muted); line-height: 1.55;
}
.login-vendor-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px; border-radius: 8px;
  background: #2E7D32; color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s ease;
}
.login-vendor-cta:hover { background: #256628; color: #fff; }

/* Divider */
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 12px; color: var(--muted-2); font-size: 11px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(212, 175, 55, 0.15);
}

/* Local form */
.login-local-form { display: flex; flex-direction: column; gap: 14px; }
.login-field label {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.login-field input {
  width: 100%; padding: 10px 14px; font-size: 14px;
  border: 1.5px solid rgba(212, 175, 55, 0.2); border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.login-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
  background: rgba(0, 0, 0, 0.35);
}
.login-submit-btn {
  width: 100%; padding: 12px; margin-top: 4px;
  background: linear-gradient(135deg, var(--accent-deep, #B5880B), var(--accent));
  color: #0b1018; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, box-shadow .15s;
}
.login-submit-btn:hover { box-shadow: var(--accent-glow); filter: brightness(1.08); }
.login-submit-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid rgba(212, 175, 55, 0.28);
  filter: none;
}
.login-submit-btn--ghost:hover {
  background: rgba(212, 175, 55, 0.08);
  box-shadow: none;
}

.login-vendor-link {
  font-size: 12px;
  color: #0078D4;
  text-decoration: underline;
  cursor: pointer;
}
.login-vendor-link:hover { color: #5eb3ff; }

/* Error message */
.login-error {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(184,50,48,.08); color: #B83230;
  border: 1px solid rgba(184,50,48,.2); border-radius: 8px;
  font-size: 12px; font-weight: 500; text-align: center;
}

/* Footer */
.login-footer {
  text-align: center; padding: 14px 32px;
  font-size: 10px; color: var(--muted-2);
  border-top: 1px solid rgba(212, 175, 55, 0.12);
}

/* Status icon on pending/denied screens */
.login-status-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.login-status-icon.pending {
  background: rgba(196,127,23,.1); color: #C47F17;
}
.login-status-icon.denied {
  background: rgba(184,50,48,.1); color: #B83230;
}

/* ── Map browse filter rows (Lots / POs / XLOTs / Tests / Fabric-Greige) ──
   WHY: the filter row mixes native <select>, text <input>, the chip
   multi-select button (.ms-wrap > .form-control), checkboxes and a
   flex:1 search box. Without a shared baseline they sit at different
   y-coords and the search box wraps to a second row under crowding.
   Normalize every control to one height + center-align so the row reads
   as a single clean strip; let the search box shrink (min-width floor)
   before the row wraps. */
.map-filter-row { row-gap: 8px; }
.map-filter-row > .form-control,
.map-filter-row .ms-wrap > .form-control {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
}
/* The chip button carries its own width + text-overflow:ellipsis (set
   per-facet in JS). Keep display:inline-block so the ellipsis truncation
   of the "N selected" label still works; center the text via line-height
   so it shares the sibling inputs' baseline. */
.map-filter-row .ms-wrap { display: inline-block; vertical-align: middle; }
.map-filter-row .ms-wrap > .form-control {
  line-height: 22px;
}
/* Search box: grow to fill, but floor the width so it shrinks instead of
   wrapping the whole control off the row on mid-width viewports. */
.map-filter-row > input.form-control[id$="-q"] {
  flex: 1 1 180px;
  min-width: 160px;
}
/* The inline checkbox labels (US-bound only) align to the control center. */
.map-filter-row > label { align-self: center; }

/* ── Broker-feed filter bar (Admin → Maintenance → Broker Feed) ──
   WHY: the label-on-top filter blocks + the right-pinned action cluster
   are already split in markup. Reinforce a uniform select height so the
   labels share one baseline and the Refresh/Send buttons align to the
   select bottom edge instead of drifting. */
.bfeed-filter-bar .form-control {
  height: 36px;
  min-height: 36px;
}
.bfeed-filter-bar label {
  white-space: nowrap;
}

/* 2026-06-09 — Data → Map browse tables overflowed the viewport.
   ROOT CAUSE: every browse table (#map-lots/#map-pos/#map-tests/#map-xlots/
   #map-cpsc-emails/#map-vendor-documents/#map-infocenter) carries an INLINE
   `min-width:1000–1200px` on the <table> plus an inline `min-width` on nearly
   every <th>. Those inline floors sum to more than the content area at a
   normal laptop width (the sidebar + page padding leave well under 1200px),
   so .table-wrap (overflow-x:auto) fell back to a horizontal scrollbar and
   the rightmost columns (Lots' "Required Regs (CATAIR)", POs' Qty/Broker)
   ran off the edge / hid behind the scrollbar. CSS cannot beat inline styles
   without !important, so neutralize the inline floors and let the table size
   to its wrapper.

   STRATEGY: scope strictly to the 7 named browse tabs by their tab ID
   (#map-lots etc.) — NOT a blanket .ptab-content rule, because the Map page
   also hosts the Factory Directory + Greige→Fabric tables under .ptab-content
   that must stay as-is. Inquiry / Vendor-360 tables live on other pages.
   1. Drop the inline min-width floor on the table + cells so width:100%
      (from components.css) governs and columns share the available width.
   2. table-layout:auto keeps the browser distributing by content.
   3. Let the long-text columns WRAP (Description, Garment/Brand, Goods
      Description, Lab, Importer, addresses, emails, PO/report numbers)
      instead of pushing width — word-break:break-word folds the worst case.
   4. Keep short code/pill/number columns compact (white-space:nowrap) so
      they don't blow up vertically while the prose columns wrap.
   5. Tighten cell padding a touch — the dense 12px tables read fine narrower.
   ALL columns stay visible: this folds text, it never hides or drops a
   column. The .table-wrap scrollbar remains the graceful fallback only when
   the viewport is genuinely too narrow (phones / heavy zoom).
   SCOPED BY ID to exactly the 7 operator-named browse tabs — the Factory
   Directory table (no inline floor, has right-aligned cols) and the
   Greige→Fabric map (narrow 760px, already fits) are deliberately left
   alone. */
#page-map #map-lots table,
#page-map #map-pos table,
#page-map #map-tests table,
#page-map #map-xlots table,
#page-map #map-cpsc-emails table,
#page-map #map-vendor-documents table,
#page-map #map-infocenter table {
  /* Beat the inline min-width:1000–1200px so the table fits its wrapper. */
  min-width: 0 !important;
  width: 100%;
  table-layout: auto;
}
#page-map #map-lots th, #page-map #map-lots td,
#page-map #map-pos th, #page-map #map-pos td,
#page-map #map-tests th, #page-map #map-tests td,
#page-map #map-xlots th, #page-map #map-xlots td,
#page-map #map-cpsc-emails th, #page-map #map-cpsc-emails td,
#page-map #map-vendor-documents th, #page-map #map-vendor-documents td,
#page-map #map-infocenter th, #page-map #map-infocenter td {
  /* Beat inline per-cell min-width/width floors; allow long words to fold. */
  min-width: 0 !important;
  padding: 8px 10px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}
/* Short code / pill / numeric columns stay on one line + hug their content
   so the prose columns get the slack. Targeted per browse table by column
   position (header order matches the markup in data.html). */
/* Lots: Lot, CoC Type, Vendor, Classification, Region, [Description],
   [Garment/Brand], Qty — keep 1-5 + 8 tight; let 6,7,9 wrap. */
#page-map #map-lots td:nth-child(-n+5),
#page-map #map-lots th:nth-child(-n+5),
#page-map #map-lots td:nth-child(8),
#page-map #map-lots th:nth-child(8),
/* POs: PO can wrap (col 1); keep Style..Qty (2-10) tight. */
#page-map #map-pos td:nth-child(n+2),
#page-map #map-pos th:nth-child(n+2),
/* XLOTs: Lot, PO, Vendor, Cut#, HTS, [Goods Desc], Fabric, Class, Test,
   Status — keep all but the Goods Description (col 6) tight. */
#page-map #map-xlots td:not(:nth-child(6)),
#page-map #map-xlots th:not(:nth-child(6)),
/* Tests: keep all but Lab (col 2) + Uploaded By (col 12) tight. */
#page-map #map-tests td:not(:nth-child(2)):not(:nth-child(12)),
#page-map #map-tests th:not(:nth-child(2)):not(:nth-child(12)),
/* CPSC Emails: Received(1) + Open(6) stay tight; Sender/Subject/Attachment/
   Matched-to (2-5) wrap. */
#page-map #map-cpsc-emails td:nth-child(1),
#page-map #map-cpsc-emails th:nth-child(1),
#page-map #map-cpsc-emails td:nth-child(6),
#page-map #map-cpsc-emails th:nth-child(6),
/* Vendor Documents: Report#(2), Regulation(4), Uploaded(5), Status(6),
   Actions(8) tight; Document(1)/Lab(3)/Mapped-to(7) wrap. */
#page-map #map-vendor-documents td:nth-child(2),
#page-map #map-vendor-documents th:nth-child(2),
#page-map #map-vendor-documents td:nth-child(n+4):nth-child(-n+6),
#page-map #map-vendor-documents th:nth-child(n+4):nth-child(-n+6),
#page-map #map-vendor-documents td:nth-child(8),
#page-map #map-vendor-documents th:nth-child(8),
/* Infocenter: PO(1), Style(2), ShipID(4), Source(5), Download(7) tight;
   Importer(3)/Source-file(6) wrap. */
#page-map #map-infocenter td:nth-child(1),
#page-map #map-infocenter th:nth-child(1),
#page-map #map-infocenter td:nth-child(2),
#page-map #map-infocenter th:nth-child(2),
#page-map #map-infocenter td:nth-child(n+4):nth-child(-n+5),
#page-map #map-infocenter th:nth-child(n+4):nth-child(-n+5),
#page-map #map-infocenter td:nth-child(7),
#page-map #map-infocenter th:nth-child(7) {
  white-space: nowrap;
  width: 1%;            /* shrink-to-fit so prose columns absorb the slack */
}
/* 2026-06-11 — Tests is the only 12-column browse; the fit-to-viewport
   neutralize above starved its Lab column to ~1 char so "SGS" wrapped to
   "S G S" and rows ballooned vertically. 12 dense columns genuinely don't fit
   a laptop width — let THIS table size to its content (every cell nowrap → no
   vertical wrap → no tall rows) above a min-width floor, so .table-wrap scrolls
   horizontally instead of squeezing. Scoped to #map-tests only; the other six
   browse tables keep the fit-to-viewport behavior. */
#page-map #map-tests table {
  width: auto !important;
  min-width: 1200px !important;
  table-layout: auto !important;
}
#page-map #map-tests th, #page-map #map-tests td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ── Exceptions inbox (#page-exceptions) ─────────────────────────── */
#page-exceptions .exceptions-header__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
#page-exceptions .exceptions-header__actions{
  display:flex; gap:8px; flex-shrink:0;
}
#page-exceptions .exceptions-stats{ margin-bottom:16px; }
#page-exceptions .exc-stat-card{
  position:relative; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:12px;
  padding:14px 16px 12px 52px;
  background:var(--surface);
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#page-exceptions .exc-stat-card:hover{
  border-color:rgba(181,136,11,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
#page-exceptions .exc-stat-card.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(181,136,11,.18);
}
#page-exceptions .exc-stat-card__icon{
  position:absolute; left:14px; top:14px;
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--bg-inset, rgba(0,0,0,.04));
  color:var(--accent);
}
#page-exceptions .stat-card--danger .exc-stat-card__icon{ color:var(--danger); }
#page-exceptions .stat-card--warning .exc-stat-card__icon{ color:var(--warning); }
#page-exceptions .stat-card--info .exc-stat-card__icon{ color:var(--info); }
#page-exceptions .exc-stat-card .stat-value{ font-size:22px; line-height:1.1; }
#page-exceptions .exc-stat-card .stat-label{
  font-size:11px; font-weight:700; margin-top:4px;
}
#page-exceptions .exc-stat-card__hint{
  font-size:10px; color:var(--muted); margin-top:2px;
}
#page-exceptions .exceptions-dash{
  margin-bottom:16px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
  overflow:hidden;
}
#page-exceptions .exceptions-dash__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:12px 18px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-inset, rgba(0,0,0,.02)) 100%);
}
#page-exceptions .exceptions-dash__title{
  font-size:13px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
#page-exceptions .exceptions-dash__title i{ color:var(--accent); }
#page-exceptions .exceptions-dash__hint{
  font-size:10px; color:var(--muted);
}
#page-exceptions .exceptions-dash__chips{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 18px 14px;
}
#page-exceptions .exc-dash-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-inset, rgba(0,0,0,.03));
  color:var(--text); cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
#page-exceptions .exc-dash-chip:hover{
  border-color:rgba(181,136,11,.4);
  background:rgba(181,136,11,.06);
}
#page-exceptions .exc-dash-chip.is-active{
  border-color:var(--accent);
  background:rgba(181,136,11,.12);
  color:var(--accent);
}
#page-exceptions .exc-dash-chip--critical{
  border-color:rgba(220,38,38,.25);
  background:rgba(220,38,38,.06);
  color:var(--danger);
}
#page-exceptions .exc-dash-chip--critical.is-active{
  border-color:var(--danger);
  background:rgba(220,38,38,.14);
}
#page-exceptions .exc-dash-chip .exc-dash-chip__count{
  font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:999px;
  background:rgba(0,0,0,.06); color:var(--muted);
}
#page-exceptions .exc-dash-chips-dynamic{ display:contents; }
#page-exceptions .exceptions-filters{
  margin-bottom:16px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
  overflow:hidden;
}
#page-exceptions .exceptions-filters__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-inset, rgba(0,0,0,.02)) 100%);
}
#page-exceptions .exceptions-filters__title{
  font-size:13px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
#page-exceptions .exceptions-filters__title i{ color:var(--accent); }
#page-exceptions .exceptions-scope-pill{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--info); background:var(--info-fill, rgba(59,130,246,.1));
  border:1px solid rgba(59,130,246,.22); border-radius:999px;
  padding:4px 10px; display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
#page-exceptions .exceptions-filters__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px 18px;
  padding:16px 18px 6px;
}
#page-exceptions .exceptions-label{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted);
  display:block; margin-bottom:5px;
}
#page-exceptions .exceptions-field .form-control{ width:100%; font-size:12px; }
#page-exceptions .exceptions-field--facet{ min-width:0; }
#page-exceptions .exceptions-filters__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:10px 18px 14px;
  border-top:1px solid var(--border);
}
#page-exceptions .exceptions-filters__hint{
  margin:0; font-size:11px; color:var(--muted); line-height:1.45;
  flex:1; min-width:200px;
}
#page-exceptions .exceptions-filters__hint i{ color:var(--accent); margin-right:4px; }
#page-exceptions .exceptions-filters__actions{
  display:flex; gap:8px; flex-shrink:0;
}
#page-exceptions .exc-banners{ margin-bottom:12px; }
#page-exceptions .exc-banners:empty{ display:none; }
#page-exceptions .exceptions-results{
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface);
  padding:14px 16px 8px;
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}
#page-exceptions .exceptions-results__toolbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:10px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
#page-exceptions .exc-results-meta{
  display:flex; flex-direction:column; gap:6px; min-width:0; flex:1;
}
#page-exceptions .exc-active-filters{
  display:flex; flex-wrap:wrap; gap:6px; min-height:0;
}
#page-exceptions .exc-active-filters:empty{ display:none; }
#page-exceptions .exc-filter-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600;
  padding:3px 9px; border-radius:999px;
  background:var(--bg-inset); border:1px solid var(--border);
  color:var(--text);
}
#page-exceptions .exc-filter-pill button{
  border:none; background:none; padding:0; margin:0;
  color:var(--muted); cursor:pointer; line-height:1;
  font-size:12px;
}
#page-exceptions .exc-filter-pill button:hover{ color:var(--danger); }
#page-exceptions .exceptions-results .results-count strong{ color:var(--text); }
#page-exceptions .exc-results-tip{
  font-size:10px; color:var(--muted); white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px;
}
#page-exceptions.page.active{
  overflow:visible;
}
#page-exceptions .exceptions-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 -4px;
  max-height:min(72vh, 780px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
#page-exceptions .exceptions-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface);
  box-shadow:0 1px 0 var(--border);
}
#page-exceptions .exceptions-table{
  min-width:1020px;
  /* !important so the generic .data-table{table-layout:auto} base can never win
     and collapse the wrappable Description column. */
  table-layout:fixed !important;
  width:100%;
}
#page-exceptions .exceptions-table thead th:nth-child(1){ width:9%; }
#page-exceptions .exceptions-table thead th:nth-child(2){ width:12%; }
#page-exceptions .exceptions-table thead th:nth-child(3){ width:13%; }
#page-exceptions .exceptions-table thead th:nth-child(4){ width:30%; }
#page-exceptions .exceptions-table thead th:nth-child(5){ width:8%; min-width:76px; }
#page-exceptions .exceptions-table thead th:nth-child(6){ width:5%; }
#page-exceptions .exceptions-table thead th:nth-child(7){ width:7%; }
#page-exceptions .exceptions-table thead th:nth-child(8){ width:16%; min-width:160px; }
#page-exceptions .exceptions-table tbody tr.exc-row{
  cursor:pointer; transition:background .12s ease;
}
#page-exceptions .exceptions-table tbody tr.exc-row:hover{
  background:rgba(181,136,11,.04);
}
#page-exceptions .exceptions-table tbody tr.exc-row--critical:hover{
  background:rgba(220,38,38,.04);
}
#page-exceptions .exceptions-th-actions{ text-align:right; }
#page-exceptions .exceptions-empty-cell{
  text-align:center; padding:36px 20px !important;
  color:var(--muted); font-size:12px;
}
#page-exceptions .exc-sev-cell{
  white-space:nowrap;
  min-width:76px;
}
#page-exceptions .exc-sev-pill{
  display:inline-block; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px; letter-spacing:.03em;
  white-space:nowrap;
  line-height:1.3;
}
#page-exceptions .exc-entity-cell{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:0;
}
#page-exceptions .exc-desc-cell{
  font-size:11px;
  width:36%;
  min-width:240px;
  vertical-align:top;
}
/* The line-clamp lives on an inner block element, not the <td>: table cells
   don't reliably honor -webkit-line-clamp, so the clamp on the cell let a
   third line bleed past the box. The inner span clamps cleanly to 2 lines
   with an ellipsis; max-height is a hard backstop if a browser ignores the
   clamp. word-break:break-word (NOT break-all) wraps prose on spaces. */
#page-exceptions .exc-desc-clamp{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.35;
  max-height:2.7em;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#page-exceptions .exc-sev-pill--critical{
  color:var(--danger); background:var(--danger-fill, rgba(220,38,38,.1));
}
#page-exceptions .exc-sev-pill--warning{
  color:var(--warning); background:var(--warning-fill, rgba(217,119,6,.1));
}
#page-exceptions .exc-sev-pill--info{
  color:var(--info); background:var(--info-fill, rgba(14,165,233,.1));
}
#page-exceptions .exc-status-pill--open{
  background:var(--info-fill); color:var(--info);
}
#page-exceptions .exc-status-pill--ack{
  background:var(--warning-fill); color:var(--warning);
}
#page-exceptions .exc-status-pill--esc{
  background:var(--danger-fill); color:var(--danger);
}
#page-exceptions .exc-actions{
  display:inline-flex; gap:4px; justify-content:flex-end;
}
#page-exceptions .exc-load-more-bar{
  padding:12px 16px; text-align:center;
  border-top:1px solid var(--border);
  position:sticky; bottom:0;
  background:var(--card);
  z-index:3;
}
#page-exceptions .exc-type-group td {
  background: rgba(181,136,11,0.055);
  font-size: 11px;
  padding: 5px 10px !important;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
#page-exceptions .exc-type-group td:first-child {
  border-left: 3px solid var(--accent);
}
#page-exceptions.exceptions-loading .exceptions-table-wrap{
  opacity:.65;
}
#page-exceptions.exceptions-loading .exceptions-table tbody{
  pointer-events:none;
}
@media (max-width: 1100px){
  #page-exceptions .exceptions-filters__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #page-exceptions .exceptions-dash__chips{ gap:6px; }
  #page-exceptions .exc-dash-chip{ font-size:11px; padding:5px 10px; }
}
@media (max-width: 640px){
  #page-exceptions .exceptions-filters__grid{ grid-template-columns:1fr; }
  #page-exceptions .exceptions-header__actions{ width:100%; }
  #page-exceptions .exceptions-header__actions .btn{ flex:1; }
  #page-exceptions .exceptions-filters__foot{ flex-direction:column; align-items:stretch; }
  #page-exceptions .exceptions-filters__actions{ justify-content:flex-end; }
  #page-exceptions .exceptions-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #page-exceptions .exceptions-results__toolbar{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  #page-exceptions .exc-results-tip{ font-size:10px; }
  #page-exceptions .exceptions-table{ min-width:880px; }
}

/* ── Functional loading spinners ─────────────────────────────────────
   `@keyframes spin` is referenced by inline `animation:spin` on the
   re-extract / busy buttons; define it here (it was previously undefined,
   so those spinners never turned).

   TWO things freeze a functional spinner on this app:
   1. theme.css reduced-motion reset `*{animation-duration:.01ms!important}`
      (only under OS prefers-reduced-motion). A class/attr selector beats `*`,
      so restoring animation-duration below keeps the duration sane.
   2. Perf-lite mode (theme.css `body.animations-off *:not(...)` — DEFAULT-ON)
      forces `animation-iteration-count:1` at specificity (0,0,5,1), which an
      attribute/class selector here CANNOT out-specify. The spinner runs once
      then stops. The only reliable opt-out is the `data-keep-anim` /
      `.keep-anim` token the Perf-lite selector explicitly excludes — so every
      functional spinner element carries `data-keep-anim` at its creation site.
   The rule below handles (1); `data-keep-anim` on the elements handles (2). */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
[style*="animation:spin"], [style*="animation: spin"], ._extract-spinner {
  animation: spin 1s linear infinite !important;
}

/* ── Shipments lookup (#page-shipments) ───────────────────────── */
#page-shipments .shipments-header__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
#page-shipments .shipments-header__actions{
  display:flex; gap:8px; flex-shrink:0;
}
#page-shipments .shipments-stats{ margin-bottom:16px; }
#page-shipments .shipments-filters{
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
  overflow:hidden;
}
#page-shipments .shipments-filters__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-inset, rgba(0,0,0,.02)) 100%);
}
#page-shipments .shipments-filters__title{
  font-size:13px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
#page-shipments .shipments-filters__title i{ color:var(--accent); }
#page-shipments .shipments-scope-pill{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--success); background:var(--success-fill, rgba(34,197,94,.1));
  border:1px solid rgba(34,197,94,.22); border-radius:999px;
  padding:4px 10px; display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
#page-shipments .shipments-filters__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px 18px;
  padding:16px 18px 6px;
}
#page-shipments .shipments-sid{
  font-size:11px;
  background:var(--bg-inset);
  padding:2px 7px;
  border-radius:4px;
  border:1px solid var(--border);
}
#page-shipments .shipments-sid-empty{
  color:var(--muted);
  font-style:italic;
}
#page-shipments .shipments-label{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted);
  display:block; margin-bottom:5px;
}
#page-shipments .shipments-field .form-control{
  width:100%; font-size:12px;
}
#page-shipments .shipments-filters__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:10px 18px 14px;
  border-top:1px solid var(--border);
}
#page-shipments .shipments-filters__hint{
  margin:0; font-size:11px; color:var(--muted); line-height:1.45;
  flex:1; min-width:200px;
}
#page-shipments .shipments-filters__hint i{ color:var(--accent); margin-right:4px; }
#page-shipments .shipments-filters__actions{
  display:flex; gap:8px; flex-shrink:0;
}
#page-shipments .shipments-results{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  padding:14px 16px 8px;
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}
#page-shipments .shipments-results__toolbar{
  margin-bottom:10px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
#page-shipments .shipments-results .results-count strong{ color:var(--text); }
#page-shipments .shipments-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 -4px;
}
#page-shipments .shipments-table{
  min-width:1080px;
  table-layout:auto;
}
#page-shipments .shipments-table th:nth-child(2),
#page-shipments .shipments-table .shipments-lot{
  min-width:88px;
  width:88px;
}
#page-shipments .shipments-table tbody tr.shipments-row{
  cursor:pointer; transition:background .12s ease;
}
#page-shipments .shipments-table tbody tr.shipments-row:hover{
  background:rgba(181,136,11,.04);
}
#page-shipments .shipments-th-actions{ text-align:right; }
#page-shipments .shipments-empty-cell{
  text-align:center; padding:36px 20px !important;
  color:var(--muted); font-size:12px;
}
#page-shipments .shipments-empty-cell i{
  display:block; font-size:26px; margin-bottom:8px; opacity:.45;
}
#page-shipments.shipments-loading .shipments-table-wrap{
  opacity:.55; pointer-events:none;
}
#page-shipments .shipments-po{ font-weight:600; color:var(--text); }
#page-shipments .shipments-inq-link{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
#page-shipments .shipments-inq-link:hover{
  text-decoration:underline;
}
#page-shipments .shipments-inq-link .shipments-lot-code{
  color:inherit;
  border-color:rgba(181,136,11,.35);
}
#page-shipments .shipments-edi-cell{
  white-space:nowrap;
}
#page-shipments .shipments-actions a.row-action-btn{
  text-decoration:none;
  color:inherit;
}
#page-shipments .shipments-lot{
  white-space:nowrap;
}
#page-shipments .shipments-lot code,
#page-shipments .shipments-lot-code{
  font-size:11px; background:var(--bg-inset); padding:2px 7px;
  border-radius:4px; border:1px solid var(--border);
  white-space:nowrap;
  display:inline-block;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
#page-shipments .shipments-sid,
#page-shipments .shipments-sid-empty{
  white-space:nowrap;
}
#page-shipments .shipments-meta{ font-size:11px; color:var(--muted); }
#page-shipments .shipments-actions{
  display:inline-flex; gap:4px; justify-content:flex-end;
}
@media (max-width: 960px){
  #page-shipments .shipments-filters__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #page-shipments .shipments-filters__grid{ grid-template-columns:1fr; }
  #page-shipments .shipments-header__actions{ width:100%; }
  #page-shipments .shipments-header__actions .btn{ flex:1; }
  #page-shipments .shipments-filters__foot{ flex-direction:column; align-items:stretch; }
  #page-shipments .shipments-filters__actions{ justify-content:flex-end; }
}

/* ══════════════════════════════════════════
   HELP CENTER — guide panel layout
   Sticky sidebars require overflow:visible on the page container.
   overflow:hidden (the default on .page.active for the shimmer effect)
   silently breaks position:sticky in all descendants.
══════════════════════════════════════════ */
#page-help.page.active{
  overflow: visible;
}
/* The shimmer sweep is on ::after — keep it clipped to the card
   boundary without affecting sticky children. Clip-path carries the
   visual constraint while leaving overflow:visible for sticky. */
#page-help.page.active::after{
  clip-path: inset(0 round 10px);
}

.help-guides-layout{
  display: grid;
  grid-template-columns: 220px 1fr 256px;
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.help-guides-rail{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  position: sticky;
  top: calc(var(--unified-nav-h) + 18px);
  max-height: calc(100vh - var(--unified-nav-h) - 52px);
  overflow-y: auto;
  min-width: 0;
}
.help-guides-rail::-webkit-scrollbar{ width: 4px; }
.help-guides-rail::-webkit-scrollbar-thumb{ background: var(--border-2); border-radius: 4px; }
.help-guides-main{ min-width: 0; }
.help-guides-sidebar{
  position: sticky;
  top: calc(var(--unified-nav-h) + 18px);
  min-width: 0;
}

/* Collapse right sidebar at medium widths (includes 125 %+ browser zoom) */
@media (max-width: 1100px){
  .help-guides-layout{
    grid-template-columns: 200px 1fr;
  }
  .help-guides-sidebar{ display: none; }
}
/* Single column on tablets and small desktops */
@media (max-width: 800px){
  .help-guides-layout{
    grid-template-columns: 1fr;
  }
  .help-guides-rail{
    position: static;
    max-height: none;
  }
}