* { font-family: 'Segoe UI', Arial, sans-serif !important; }
  td, th, .num, [class*="num"], [class*="count"], [class*="amount"], [class*="total"], .mono, code { 
    font-family: 'Segoe UI', Arial, sans-serif !important; 
    font-size: 14px !important; 
  }

:root {
  /* ── Waypoint Claims v1 Design System ── */
  --navy:       #0B1F3A;
  --navy-dark:  #091729;
  --navy-light: #1B3A6B;
  --blue:       #2563EB;
  --blue-light: #3B82F6;
  --blue-pale:  #EFF6FF;
  --carolina:   #4A90D9;
  --gold:       #C8A84B;
  --gold-pale:  #EAF5FA;
  --green:      #16A34A;
  --red:        #DC2626;
  --orange:     #D97706;
  --bg:         #F4F3F0;
  --surface:    #FFFFFF;
  --surface2:   #F9F8F6;
  --border:     #E2DDD6;
  --border-2:   #CCC5BB;
  --text:       #0B1F3A;
  --text-1:     #0B1F3A;
  --text-2:     #374151;
  --text-3:     #6B7280;
  --text-4:     #9CA3AF;
  --sidebar-w:  240px;
  --topbar-h:   70px;   /* ORD-0238: the bar's REAL height. It said 56 while the #topbar rule drew 70, and the collapse-control wall did its arithmetic against the lie. The rule below now reads this number. */
  --radius:     10px;
  --shadow:     0 2px 12px rgba(11,31,58,0.08);
  --shadow-md:  0 4px 24px rgba(11,31,58,0.13);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
main { display: block; }

body {
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  font-size:14px;
  line-height: 1.5;
}

body.app-active {
  background: var(--bg);
}

/* ── LANDING PAGE ── */
#landing {
  min-height: 100vh;
  background: #1a5fa0;
  display: flex;
  flex-direction: column;
}

.land-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(170deg, #0B1F3A 0%, #091729 60%, #060F1C 100%);
}

.land-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.land-logo {
  width: 40px; height: 40px;
  background: var(--blue);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-size:20px;
  font-weight: 800;
  color: white;
}

.land-brand-text { color: white; }
.land-brand-text .name { font-size:17px; font-weight: 700; letter-spacing: -0.3px; }
.land-brand-text .sub { font-size:14px; color: rgba(255,255,255,0.55); letter-spacing: 0.5px; text-transform: uppercase; }

.land-nav-links { display: flex; gap: 32px; }
.land-nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size:14px; font-weight: 500; transition: color 0.2s; }
.land-nav-links a:hover { color: white; }

.land-nav-actions { display: flex; gap: 10px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px; font-size:14px; font-weight: 600; font-family: 'Segoe UI', Arial, sans-serif; cursor: pointer; border: none; text-decoration: none; transition: all 0.2s; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(75,156,211,0.4); }
.btn-secondary { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { background: rgba(255,255,255,0.2); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: white; }
.btn-lg { padding: 12px 28px; font-size:15px; border-radius: 10px; }
.btn-sm { padding: 6px 12px; font-size:14px; border-radius: 6px; }
.btn-navy { background: var(--navy); color: white; }
.btn-navy:hover { background: var(--navy-dark); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface2); }

.land-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.land-hero-copy { color: white; }
.eyebrow { font-size:14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-light); }
.land-hero-copy h1 { font-family: 'Segoe UI', Arial, sans-serif; font-size:52px; line-height: 1.1; margin: 16px 0 20px; }
.land-hero-copy h1 span { color: var(--blue-light); }
.land-hero-copy p { font-size:16px; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 480px; margin-bottom: 32px; }

.hero-actions { display: flex; gap: 12px; margin-bottom: 40px; }

.hero-metrics { display: flex; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.15); }
.hero-metrics div { text-align: center; }
.hero-metrics strong { display: block; font-size:28px; font-weight: 700; color: var(--blue-light); font-family: 'Segoe UI', Arial, sans-serif; }
.hero-metrics span { font-size:14px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; }

.land-hero-panel { position: relative; }

.demo-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(12px);
  color: white;
}

.demo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.demo-card-head h3 { font-size:15px; font-weight: 600; }
.demo-card-head .mini { font-size:14px; color: rgba(255,255,255,0.5); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

.demo-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.demo-stat { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; text-align: center; }
.demo-stat strong { display: block; font-size:22px; font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif; color: var(--blue-light); }
.demo-stat span { font-size:14px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.3px; }

.demo-claims { display: flex; flex-direction: column; gap: 8px; }
.demo-claim { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px 14px; }
.demo-claim .info strong { font-size:14px; }
.demo-claim .info span { display: block; font-size:14px; color: rgba(255,255,255,0.5); }

.badge { padding: 3px 10px; border-radius: 20px; font-size:14px; font-weight: 600; }
.badge-blue { background: rgba(75,156,211,0.25); color: #7dd3fc; }
.badge-gold { background: rgba(212,160,23,0.25); color: #fcd34d; }
.badge-green { background: rgba(34,197,94,0.25); color: #86efac; }
.badge-red { background: rgba(239,68,68,0.2); color: #fca5a5; }
.badge-gray { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.badge-orange { background: rgba(249,115,22,0.2); color: #fdba74; }

/* app badges (dark on light) */
.badge-app-blue { background: #dbeafe; color: #1d4ed8; }
.badge-app-gold { background: #fef9c3; color: #92400e; }
.badge-app-green { background: #dcfce7; color: #166534; }
.badge-app-red { background: #fee2e2; color: #991b1b; }
.badge-app-orange { background: #ffedd5; color: #9a3412; }
.badge-app-gray { background: #f1f5f9; color: #475569; }

.land-footer-bar {
  background: rgba(0,0,0,0.2);
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.4);
  font-size:14px;
}
.land-footer-bar a { color: rgba(255,255,255,0.4); text-decoration: none; }

/* ── APP SHELL ── */
#app { display: none; }

.app-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(170deg, #0B1F3A 0%, #091729 60%, #060F1C 100%);
  display: flex; align-items: center;
  padding: 0 20px;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.app-topbar .brand { display: flex; align-items: center; gap: 10px; width: var(--sidebar-w); }
.app-topbar .brand .logo { width: 42px; height: 42px; background: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', Arial, sans-serif; font-size:16px; font-weight: 800; color: white; }
.app-topbar .brand .btext { color: white; font-size:14px; font-weight: 700; }

.topbar-center { flex: 1; display: flex; align-items: center; gap: 12px; }

.search-box {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 7px 14px;
  color: white;
  font-size:14px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  width: 280px;
  outline: none;
}
.search-box::placeholder { color: rgba(255,255,255,0.4); }
.search-box:focus { border-color: var(--blue); }

.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { display: flex; align-items: center; gap: 8px; color: white; font-size:14px; cursor: pointer; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size:14px; font-weight: 700; color: white; }
.topbar-notif { color: rgba(255,255,255,0.6); font-size:18px; cursor: pointer; position: relative; }
.notif-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--red); border-radius: 50%; border: 2px solid var(--navy); }

.app-layout { display: block; }

/* ── SIDEBAR ── */
.sidebar { /* neutralized - using table layout */ }
#sidebar { background: linear-gradient(170deg, #0B1F3A 0%, #091729 60%, #060F1C 100%); display: table-cell; width: var(--sidebar-w); min-width: var(--sidebar-w); vertical-align: top; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.07); }

.sidebar-section { padding: 12px 0 4px; }
.sidebar-label { padding: 4px 20px; font-size:16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* Collapse chrome. The header is a real control, so it says so:
   pointer, a visible focus ring for the keyboard, and a chevron that
   turns. role and aria-expanded are set at load by the shared engine,
   /mcs_sidebar_collapse.js — this sheet only dresses them.
   aria-expanded is an ANNOUNCEMENT. The rule that actually hides the
   rows is the .sb-row-collapsed one below; without it the header would
   report itself collapsed while every page stayed on screen. */
.sidebar-label[role="button"] { cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; user-select: none; }
.sidebar-label[role="button"]:hover { color: rgba(255,255,255,0.78); }
.sidebar-label[role="button"]:focus-visible { outline: 2px solid var(--accent, #38BDF8);
  outline-offset: -2px; }
.sidebar-label[role="button"]::after { content: "\25BE"; font-size: 11px; line-height: 1;
  opacity: .65; transition: transform .15s ease; }
.sidebar-label[aria-expanded="false"]::after { transform: rotate(-90deg); }

/* THE RULE THAT ACTUALLY HIDES THE ROWS, and why it is shouted.
   HIS LIVE CATCH 2026-08-29: "The collapse arrows are present, but they
   don't collapse ... the sidebar is stuck in this perpetual state."
   Exactly right, and the arrow turning was the clue that the JavaScript
   was fine: the click fired, the header announced aria-expanded="false"
   — and every row stayed on screen, because the hide rule lost the
   cascade. It shipped at specificity (0,3,0) with no !important, while
   further down this same file `#sidebar .nav-item { display: flex
   !important; }` sits at (1,1,0) AND important. That wins twice over:
   one id beats any number of classes, and an important declaration
   beats a normal one however specific. Source order never entered it.
   So the fix is not cosmetic. This selector takes the #sidebar id and
   repeats !important, reaching (1,2,0) inside the important layer it
   was previously losing to.
   The class changed from the old [data-collapsed] wrapper attribute to
   .sb-row-collapsed when collapse became one shared engine across every
   portal — v8's wrapper mechanism could not travel to the five portals
   that have no wrapper, so it was retired rather than kept alongside.
   tests/test_sidebar_collapse_fleet.py computes both specificities from
   this file and fails if this rule ever stops out-ranking a competing
   display rule. The tests that shipped with #309 all passed while the
   feature did nothing, because they proved the rule EXISTED and never
   asked whether it WON. */
#sidebar .nav-item.sb-row-collapsed { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-label[role="button"]::after { transition: none; }
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px;
  color: rgba(255,255,255,0.55);
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
  font-family:'DM Serif Display',Georgia,serif;
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.nav-item.active { background: rgba(74,144,217,0.15); color: #ffffff; border-left: 3px solid #4A90D9; font-weight: 500; }
.nav-item .icon { font-size:16.0px; width: 20px; text-align: center; }
.nav-badge { margin-left: auto; background: var(--blue); color: white; font-size:14.0px; padding: 2px 7px; border-radius: 10px; font-weight: 700; }
.nav-badge-red { background: var(--red); }

/* ── MAIN ── */
.main-content { /* neutralized */ }

/* ── PAGE HEADER ── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size:22px; font-weight: 700; color: var(--navy); letter-spacing: -0.5px; }
.page-sub { font-size:14px; color: var(--text-3); margin-top: 3px; }

/* ── CARDS ── */
.card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; box-shadow: var(--shadow); }
.card-title { font-size:14px; font-weight: 700; color: var(--navy); letter-spacing: 0.2px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }

/* ── METRICS ── */
.metrics-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.metric-card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 18px 20px; box-shadow: var(--shadow); }
.metric-label { font-size:14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); margin-bottom: 8px; }
.metric-value { font-size:28px; font-weight: 700; color: var(--navy); font-family: 'Segoe UI', Arial, sans-serif; line-height: 1; }
.metric-change { font-size:14px; margin-top: 6px; }
.metric-change.up { color: var(--green); }
.metric-change.down { color: var(--red); }
.metric-change.neutral { color: var(--text-3); }
.metric-icon { float: right; font-size:22px; opacity: 0.15; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size:14px; }
.table-wrap, .card table, .card > table { overflow-x: auto; display: block; }
/* Reserve summary card: real table layout (not block/scroll), numbers never wrap. The right sidebar is widened (see .two-col-layout) to give the 4 money columns room. */
#reserve-card table#reserve-table { display: table !important; overflow-x: visible !important; width: 100%; }
#reserve-card #reserve-table th, #reserve-card #reserve-table td { white-space: nowrap; }
#reserve-card #reserve-table th:first-child, #reserve-card #reserve-table td:first-child { white-space: normal; }
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--surface2); padding: 10px 14px; text-align: left; font-size:14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface2); cursor: pointer; }
.claim-id { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 600; color: var(--navy); font-size:14px; }

/* ── FORM ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size:14px; font-weight: 600; color: var(--text-2); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=number], select, textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size:14px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238fa0b4' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* ── AI PANEL ── */
.ai-panel {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
  border: 1.5px solid #bee3f8;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 16px;
}
.ai-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ai-chip { background: var(--navy); color: white; font-size:14px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; }
.ai-typing { display: inline-block; }
.ai-typing::after { content: '▋'; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }
.ai-content { font-size:14px; color: var(--text); line-height: 1.7; white-space: pre-wrap; }
.ai-content strong { color: var(--navy); }

/* ── SEVERITY METER ── */
.severity-bar-wrap { margin: 12px 0; }
.severity-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.severity-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.sev-low { background: var(--green); }
.sev-med { background: var(--gold); }
.sev-high { background: var(--orange); }
.sev-critical { background: var(--red); }

/* ── STAGES ── */
.stage-track { display: flex; align-items: center; gap: 0; margin: 16px 0; }
.stage { flex: 1; text-align: center; position: relative; }
.stage::after { content:''; position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: var(--border); z-index: 0; }
.stage:last-child::after { display: none; }
.stage-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--border); border: 3px solid white; display: inline-flex; align-items: center; justify-content: center; font-size:14px; font-weight: 700; color: var(--text-3); position: relative; z-index: 1; }
.stage.done .stage-dot { background: var(--green); color: white; }
.stage.active .stage-dot { background: var(--blue); color: white; box-shadow: 0 0 0 4px rgba(75,156,211,0.2); }
.stage-label { font-size:14px; color: var(--text-3); margin-top: 4px; }
.stage.active .stage-label { color: var(--blue); font-weight: 600; }
.stage.done .stage-label { color: var(--green); }

/* ── DIARY ── */
.diary-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.diary-item:last-child { border-bottom: none; }
.diary-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size:14px; flex-shrink: 0; }
.diary-body { flex: 1; }
.diary-body .who { font-size:14px; font-weight: 600; color: var(--navy); }
.diary-body .when { font-size:14px; color: var(--text-3); }
.diary-body .what { font-size:14px; margin-top: 2px; }

/* ── LETTERS ── */
.letter-tpl { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px; cursor: pointer; transition: all 0.15s; }
.letter-tpl:hover { border-color: var(--blue); background: var(--blue-pale); }
.letter-tpl .ltitle { font-size:14px; font-weight: 600; color: var(--navy); }
.letter-tpl .ldesc { font-size:14px; color: var(--text-3); margin-top: 3px; }

/* ── STATES ── */
.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px,1fr)); gap: 6px; }
.state-btn { padding: 6px 4px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size:14px; font-weight: 600; cursor: pointer; transition: all 0.15s; color: var(--text-2); }
.state-btn:hover, .state-btn.active { background: var(--navy); color: white; border-color: var(--navy); }

.state-detail { background: var(--surface2); border-radius: var(--radius); border: 1px solid var(--border); padding: 18px; margin-top: 14px; }
.state-detail h3 { font-size:16px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.state-detail .rule-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size:14px; }
.state-detail .rule-row:last-child { border-bottom: none; }
.state-detail .rule-row .key { color: var(--text-2); font-weight: 500; }
.state-detail .rule-row .val { color: var(--navy); font-weight: 600; font-family: 'Segoe UI', Arial, sans-serif; font-size:14px; }

/* ── TABS ── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab { padding: 9px 18px; font-size:14px; font-weight: 500; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tab.active { color: var(--navy); border-bottom-color: var(--blue); font-weight: 600; }
.tab:hover { color: var(--navy); }
#tab-notes, #tab-status-history, #tab-payments-claim, #tab-contacts, #tab-litigation, #tab-invoicing { padding-left: 28px; padding-right: 28px; box-sizing: border-box; }

/* ── LOADING ── */
.spinner { width: 18px; height: 18px; border: 2px solid rgba(75,156,211,0.3); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ALERT ── */
.alert { padding: 10px 14px; border-radius: 8px; font-size:14px; margin-bottom: 12px; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-warn { background: #fef9c3; color: #713f12; border: 1px solid #fef08a; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── PAGES ── */
.page { display: none; text-align:left; }
.page.active { display: block; padding: 28px; text-align:left; }

/* ── API KEY MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }

/* SSO Splash — covers the landing view while the SSO callback verifies
   the token, fetches /auth/me, and renders the authenticated portal.
   Only activated when ?sso= is present in the URL on initial page load.
   See the inline activator script immediately after <body>. */
.sso-splash {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 35, 71, 0.95);
  backdrop-filter: blur(6px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
.sso-splash.show { display: flex; }
.sso-splash .sso-splash-logo { background:#F4F3F0; padding:14px 24px; border-radius:12px;
  height: 96px;
  width: auto;
  margin-bottom: 32px;
  filter: brightness(1.05);
}
.sso-splash .spinner-lg {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #4b9cd3;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20px;
}
.sso-splash .sso-splash-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.9;
}
.modal { background: white; border-radius: 14px; padding: 32px; width: 460px; box-shadow: var(--shadow-md); }
.modal h2 { font-size:20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.modal p { font-size:14px; color: var(--text-2); margin-bottom: 20px; line-height: 1.6; }
.modal .note { font-size:14px; color: var(--text-3); margin-top: 10px; }

/* ── CLAIM DETAIL ── */
.claim-detail-header { background: var(--navy); color: white; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; position: relative; }
.claim-detail-header .cnum { font-family: 'Segoe UI', Arial, sans-serif; font-size:14px; color: rgba(255,255,255,0.6); }
.claim-detail-header .cname { font-size:20px; font-weight: 700; margin: 4px 0; }
.claim-detail-header .cmeta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.claim-detail-header .cmeta span { font-size:14px; color: rgba(255,255,255,0.65); }
.claim-detail-header .cmeta strong { font-size:14px; color: white; }

.two-col-layout { display: grid; grid-template-columns: 1fr 400px; gap: 20px; }
  #tab-diary .two-col-layout { grid-template-columns: 1fr 380px; }  /* widen filter column for date-range pickers */

/* ── ANALYTICS ── */
.chart-bar-wrap { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-bar { width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.5s ease; opacity: 0.85; }
.chart-bar:hover { opacity: 1; }
.chart-lbl { font-size:14px; color: var(--text-3); }

/* ── RESPONSIVE HELPERS ── */
.row { display: flex; gap: 20px; }
.row .col { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb16 { margin-bottom: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.text-right { text-align: right; }
.font-mono { font-family: 'Segoe UI', Arial, sans-serif; }

#topbar { position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:1000; display:none; align-items:center; background:linear-gradient(170deg, #0B1F3A 0%, #091729 60%, #060F1C 100%); padding:0 20px; }
#app-shell { display:table; width:100%; margin-top:56px; }
#sidebar { display:table-cell; width:230px; background:#ffffff; border-right:1px solid #dde4ed; vertical-align:top; overflow-y:auto; }
#content { display:table-cell; vertical-align:top; background:#F4F3F0; }
#content > * { max-width:1400px; }
.page-inner, .page-wrap, [id*="-page"], [id*="page-"] { max-width:1400px; }

/* FORCE layout - added last so highest priority */
#app-shell { display:table !important; width:100% !important; margin-top:56px !important; border-spacing:0 !important; }
#sidebar { display:table-cell !important; width:230px !important; max-width:230px !important; vertical-align:top !important; }
#content { display:table-cell !important; vertical-align:top !important; background:#F4F3F0 !important; }
.page.active { padding:28px !important; display:block !important; }
#topbar-search::placeholder{color:rgba(255,255,255,0.9);}#claims-search::placeholder,#queue-search::placeholder,#diary-search::placeholder,#fn-note-search::placeholder{color:#999;}
  @media (max-width: 1024px) { #sidebar { width: 200px !important; max-width: 200px !important; } #content > * { max-width: 100% !important; } .page-inner, .page-wrap { max-width: 100% !important; } .metrics-row { grid-template-columns: repeat(2,1fr) !important; } .demo-stats { grid-template-columns: repeat(2,1fr) !important; } .grid3 { grid-template-columns: 1fr 1fr !important; } .two-col-layout { grid-template-columns: 1fr !important; } }
  @media (max-width: 767px) { body { font-size:14px; } #app-shell { display:block !important; } #sidebar { display:none !important; position:fixed !important; top:0; left:0; width:260px !important; max-width:260px !important; height:100vh !important; z-index:9999 !important; overflow-y:auto !important; box-shadow:4px 0 24px rgba(0,0,0,0.3) !important; } #sidebar.mobile-open { display:block !important; } #content { display:block !important; width:100% !important; padding:12px !important; } #content > * { max-width:100% !important; } .metrics-row { grid-template-columns:1fr 1fr !important; gap:10px !important; } .demo-stats { grid-template-columns:1fr 1fr !important; } .grid2 { grid-template-columns:1fr !important; } .grid3 { grid-template-columns:1fr !important; } .form-grid { grid-template-columns:1fr !important; } .two-col-layout { grid-template-columns:1fr !important; } #topbar { padding:0 52px 0 52px !important; } table { font-size:12px !important; } table th, table td { padding:6px 8px !important; } .modal-overlay > div { width:96vw !important; max-width:96vw !important; padding:20px !important; } }
  #mobile-menu-btn { display:none; position:fixed; top:12px; left:12px; z-index:10000; background:var(--navy); border:none; border-radius:8px; padding:8px 10px; cursor:pointer; color:white; font-size:20px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
  @media (max-width: 767px) { #mobile-menu-btn { display:block !important; } }
  @media (max-width: 1024px) { #sidebar { width: 200px !important; max-width: 200px !important; } #content > * { max-width: 100% !important; } .page-inner, .page-wrap { max-width: 100% !important; } .metrics-row { grid-template-columns: repeat(2,1fr) !important; } .demo-stats { grid-template-columns: repeat(2,1fr) !important; } .grid3 { grid-template-columns: 1fr 1fr !important; } .two-col-layout { grid-template-columns: 1fr !important; } }
  @media (max-width: 767px) { body { font-size:14px; } #app-shell { display:block !important; } #sidebar { display:none !important; position:fixed !important; top:0; left:0; width:260px !important; max-width:260px !important; height:100vh !important; z-index:9999 !important; overflow-y:auto !important; box-shadow:4px 0 24px rgba(0,0,0,0.3) !important; } #sidebar.mobile-open { display:block !important; } #content { display:block !important; width:100% !important; padding:12px !important; } #content > * { max-width:100% !important; } .metrics-row { grid-template-columns:1fr 1fr !important; gap:10px !important; } .demo-stats { grid-template-columns:1fr 1fr !important; } .grid2 { grid-template-columns:1fr !important; } .grid3 { grid-template-columns:1fr !important; } .form-grid { grid-template-columns:1fr !important; } .two-col-layout { grid-template-columns:1fr !important; } #topbar { padding:0 52px 0 52px !important; } table { font-size:12px !important; } table th, table td { padding:6px 8px !important; } .modal-overlay > div { width:96vw !important; max-width:96vw !important; padding:20px !important; } }
  #mobile-menu-btn { display:none; position:fixed; top:12px; left:12px; z-index:10000; background:var(--navy); border:none; border-radius:8px; padding:8px 10px; cursor:pointer; color:white; font-size:20px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
  @media (max-width: 767px) { #mobile-menu-btn { display:block !important; } }

/* ── Waypoint Claims v1 Design Enhancements ── */

/* Sidebar texture overlay */
.app-sidebar::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.015'%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;
  z-index: 0;
}
.app-sidebar > * { position: relative; z-index: 1; }

/* Nav item refinement */
.nav-item {
  border-radius: 6px;
  margin-bottom: 1px;
  transition: background 0.15s, color 0.15s;
  font-size: 13.5px;
  font-weight: 400;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Metric cards — top accent bar */
.metric-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.metric-card:hover {
  box-shadow: 0 4px 16px rgba(11,31,58,0.1) !important;
  transform: translateY(-1px);
}
.metric-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--carolina);
  opacity: 0.7;
}

/* Table refinements */
table thead tr { background: var(--surface2); }
table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
table tbody tr { transition: background 0.1s; }
table tbody tr:hover { background: var(--surface2) !important; }

/* Claim ID monospace */
.claim-id {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: var(--navy) !important;
}

/* Badge refinements */
.badge-app-blue   { background: #EFF6FF; color: #1D4ED8; border-radius: 4px; }
.badge-app-green  { background: #F0FDF4; color: #15803D; border-radius: 4px; }
.badge-app-red    { background: #FEF2F2; color: #B91C1C; border-radius: 4px; }
.badge-app-orange { background: #FFF7ED; color: #C2410C; border-radius: 4px; }
.badge-app-gray   { background: #F9FAFB; color: #374151; border-radius: 4px; }

/* Card refinement */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Button refinements */
.btn {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  transition: all 0.15s ease !important;
}

.btn-navy {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
.btn-navy:hover {
  background: var(--navy-light) !important;
  border-color: var(--navy-light) !important;
}

/* Page title serif */
.page-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Card title */
.card-title {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--navy);
}

/* Section label */
.section-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

/* Reserve bar */
.reserve-bar { border-radius: 2px; overflow: hidden; }
.reserve-bar-fill { background: var(--carolina); border-radius: 2px; }

/* Form inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  font-family: 'Segoe UI', Arial, sans-serif;
  border-radius: 6px;
  border-color: var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--carolina) !important;
  box-shadow: 0 0 0 3px rgba(74,144,217,0.12) !important;
  outline: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* Page load animation */
@keyframes mcs-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.metric-card { animation: mcs-fade-up 0.3s ease both; }
.metric-card:nth-child(1) { animation-delay: 0.05s; }
.metric-card:nth-child(2) { animation-delay: 0.10s; }
.metric-card:nth-child(3) { animation-delay: 0.15s; }
.metric-card:nth-child(4) { animation-delay: 0.20s; }

/* ══ V1 DESIGN FORCE OVERRIDES ══ */
#sidebar {
  background: linear-gradient(170deg, #0B1F3A 0%, #091729 60%, #060F1C 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
#sidebar .sidebar-section { padding: 14px 10px 4px !important; }
#sidebar .sidebar-label {
  color: rgba(255,255,255,0.5) !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
  margin-bottom: 4px !important;
}
#sidebar .nav-item {
  color: rgba(255,255,255,0.82) !important;
  border-radius: 6px !important;
  margin: 0 2px 1px !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
}
#sidebar .nav-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.85) !important;
}
#sidebar .nav-item.active {
  background: rgba(74,144,217,0.15) !important;
  color: #ffffff !important;
  border-left: 3px solid #4A90D9 !important;
  font-weight: 500 !important;
  padding-left: 7px !important;
}
#sidebar .nav-item .icon {
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
}
#sidebar .nav-badge {
  background: rgba(74,144,217,0.35) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  border-radius: 4px !important;
}
#sidebar .nav-badge-red {
  background: rgba(220,38,38,0.3) !important;
  color: #FCA5A5 !important;
}
/* Topbar v1 */
.app-topbar {
  background: linear-gradient(170deg, #0B1F3A 0%, #091729 100%) !important;
  height: 56px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
}
.app-topbar .brand .logo {
  background: linear-gradient(135deg, #4A90D9, #1B3A6B) !important;
  box-shadow: 0 2px 8px rgba(74,144,217,0.4) !important;
  border-radius: 8px !important;
}
.app-topbar .brand .btext {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
/* Page background */
#content {
  background: #F4F3F0 !important;
}
/* Cards */
.card {
  background: #ffffff !important;
  border: 1px solid #E2DDD6 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(11,31,58,0.06) !important;
}
.card-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #0B1F3A !important;
}
/* Metric cards top accent */
.metric-card { position: relative !important; overflow: hidden !important; }
.metric-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: #4A90D9 !important;
  border-radius: 10px 10px 0 0 !important;
}
.metric-value {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
}
/* Page title */
.page-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #0B1F3A !important;
}
/* Table */
table thead tr { background: #F9F8F6 !important; }
table th {
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
}
tbody tr:hover { background: #F9F8F6 !important; }
/* Claim ID monospace */
.claim-id {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  color: #0B1F3A !important;
}
/* Buttons */
.btn-navy {
  background: #0B1F3A !important;
  border-color: #0B1F3A !important;
}
.btn-navy:hover {
  background: #1B3A6B !important;
  border-color: #1B3A6B !important;
}
/* Body background */
body { background: #F4F3F0 !important; }

/* Assignment History module (Stage 1) */
.ah-label { font-size:11px; text-transform:uppercase; color:var(--text-3); letter-spacing:0.5px; }
.ah-card-clickable { cursor:pointer; padding:18px; transition:transform 0.15s, box-shadow 0.15s; }
.ah-card-clickable:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.ah-link { color:var(--navy); text-decoration:none; font-weight:600; }
.ah-link:hover { text-decoration:underline; }
.ah-th { text-align:left; padding:12px 14px; font-weight:700; color:var(--text-3); text-transform:uppercase; font-size:11px; letter-spacing:0.5px; cursor:pointer; user-select:none; }
.ah-td { padding:10px 14px; }
.ah-td-mono { padding:10px 14px; font-family:var(--mono); font-size:12px; }

/* Force the queue filter custom dropdown buttons to fit horizontally instead of stacking */
#page-queue button[type="button"][style*="width: 100%"] {
  width: auto !important;
  flex: 0 0 auto !important;
}
#page-queue button[type="button"][style*="width:100%"] {
  width: auto !important;
  flex: 0 0 auto !important;
}
.presence-dot-sm{width:12px;height:12px;border-radius:50%;flex-shrink:0;display:inline-block;position:relative;}
.presence-dot-sm.presence-dnd::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:1.8px;background:#fff;border-radius:2px;}
.presence-dot-sm.presence-offline{background:var(--surface);box-shadow:inset 0 0 0 2.5px #9CA3AF;}
.presence-opt{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;font-size:14px;color:var(--text);font-weight:600;transition:background .12s;}
.presence-opt:hover{background:var(--blue-pale);}
.presence-opt.presence-selected{background:#F0F6FF;}
#presence-trigger:hover{border-color:var(--carolina)!important;}
#presence-trigger:focus-visible{outline:2px solid var(--carolina);outline-offset:2px;}

/* File Note floating pop-out */
.fn-floating{ position:fixed !important; z-index:900;
  width:560px; height:auto;                 /* size to content; scrollbar only if it overflows */
  min-width:360px; min-height:320px;         /* sensible floor when shrinking */
  max-width:96vw;
  overflow:visible; box-shadow:0 12px 48px rgba(0,0,0,0.32); border:none;
  margin:0 !important; resize:none;
  padding:16px !important;                 /* match drag-header -16px -> no gray frame */
  border-radius:12px; background:#fff; }         /* drag bottom-right corner to enlarge */
/* make the drag-resize corner easy to see */
.fn-floating::-webkit-resizer{ background:transparent; }

.fn-floating #file-note-input{ min-height:120px; }

/* File Note four-corner resize handles */
.fn-rz{ position:absolute; width:16px; height:16px; z-index:5; }
.fn-rz-nw{ top:0; left:0; cursor:nwse-resize; }
.fn-rz-ne{ top:0; right:0; cursor:nesw-resize; }
.fn-rz-sw{ bottom:0; left:0; cursor:nesw-resize; }
.fn-rz-se{ bottom:0; right:0; cursor:nwse-resize; }
.fn-floating .fn-rz-se::after{ content:""; position:absolute; right:3px; bottom:3px;
  width:8px; height:8px; border-right:2px solid rgba(0,0,0,0.28); border-bottom:2px solid rgba(0,0,0,0.28); }

/* slim, subtle scrollbar for the floating File Note panel */
.fn-floating::-webkit-scrollbar{ width:8px; height:8px; }
.fn-floating::-webkit-scrollbar-track{ background:transparent; }
.fn-floating::-webkit-scrollbar-thumb{ background:rgba(15,35,71,0.22); border-radius:8px; }
.fn-floating::-webkit-scrollbar-thumb:hover{ background:rgba(15,35,71,0.38); }
.fn-floating{ scrollbar-width:thin; scrollbar-color:rgba(15,35,71,0.28) transparent; }
.fn-drag-header{ display:flex; align-items:center; justify-content:space-between;
  background:var(--navy); color:#fff; margin:-16px -16px 12px -16px; padding:9px 14px;
  border-radius:12px 12px 0 0; cursor:move; font-weight:700; font-size:13px; }

/* Loss Details: right column (Reserves/Declarations) was removed/moved — go full width */
#loss-details-layout { grid-template-columns: 1fr !important; }

/* ── next extracted block ── */

  /* Status banner dropdown: closed control is white-on-navy (inline style),
     but the OPEN option list must be dark text on white so options are visible. */
  select.banner-status-select option { color:#0f2347; background-color:#ffffff; font-family:'IBM Plex Sans',Arial,sans-serif; font-weight:600; }
  select.banner-status-select:hover { background-color:rgba(255,255,255,0.18); }

/* ── next extracted block ── */

          .org-ct{display:inline-block;margin-left:6px;font-size:11px;background:var(--surface,#faf8f3);border:1px solid var(--border);border-radius:10px;padding:0 7px;color:var(--text-3);font-weight:600;}
          .org-person{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;}
          .org-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;background:var(--navy);}
          .org-nm{font-weight:600;font-size:14px;color:var(--text);}
          .org-meta{font-size:12px;color:var(--text-3);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
          .org-empid{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-3);}
          .org-rb{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:10px;background:#eef1f7;color:var(--navy);}
          .org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:12px;}
          .org-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin:16px 0 2px;}
          .org-link{width:2px;height:20px;background:var(--border);margin-left:34px;}
          .org-you{border:1.5px solid var(--navy);box-shadow:0 0 0 3px rgba(10,31,68,.06);}
          .org-youtag{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);background:#eef1f7;padding:2px 9px;border-radius:10px;}
          .org-empty{font-size:13px;color:var(--text-3);text-align:center;padding:26px 18px;line-height:1.6;border:1px dashed var(--border);border-radius:10px;background:var(--surface,#faf8f3);}
          .org-mgr-group{border:1px solid var(--border);border-radius:11px;margin-top:12px;overflow:hidden;}
          .org-mgr-head{display:flex;align-items:center;gap:11px;padding:12px 15px;background:var(--surface,#faf8f3);border-bottom:1px solid var(--border);cursor:pointer;}
          .org-mgr-body{padding:13px 15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;background:#fff;}
          .org-mini{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;}
          .org-mini .org-av{width:30px;height:30px;font-size:12px;}
        

/* ═══════════════════════════════════════════════════════════════════════
   2026-08-21 RESKIN (his mockup + ruling: "I like this layout and
   background over the current build ... keep the font the current build
   has and keep all of the functionalities that are currently in place").
   An override layer, deliberately at the END of the file. The legacy
   polish sections above pin their look with !important, so the
   contested properties here carry !important too - the layer must win
   or it is decoration. Typography and every id, class, and dispatcher
   token the logic touches stay exactly as they were.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #EEF1F6;              /* cooler light ground */
  --surface2: #F6F8FB;
  --border: #E3E8EF;
  --border-2: #CBD4E0;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15,28,48,0.06), 0 6px 18px rgba(15,28,48,0.05);
  --shadow-md: 0 6px 28px rgba(15,28,48,0.11);
}
body { background: var(--bg) !important; }
#content { background: var(--bg) !important; }

/* ROUND 2 (2026-08-21, his on-screen confirm: "changes did not take ...
   only a portion of the top banner worked"): the mockup's structure is a
   full-height dark rail with the brand INSIDE it and a LIGHT strip across
   the top - not a full-width dark banner. The brand panel becomes the
   rail's top block (dark, spanning exactly the sidebar's 230px column),
   the rest of the topbar takes the page background, and the search pill
   sits dark-on-light at the strip's left edge, as drawn. Every control
   keeps its id and dispatcher token - this is paint, not plumbing. */
/* ROUND 5 (2026-08-21, his side-by-side: "The entire top banner is
   off"): the mockup's band is DARK and runs DOWN THROUGH THE GREETING -
   white "Good afternoon" on navy, the KPI cards straddling the band's
   bottom edge. The topbar is dark again, and the dashboard page paints
   the band's continuation (160px, ending mid-KPI-card) itself. */
#topbar { background: #0C1E38 !important; }
#topbar-brand-panel { background: #0C1E38 !important; border-right: none !important; width: 250px !important; }
#sidebar { background: linear-gradient(180deg, #0C1E38 0%, #0A1930 70%, #081324 100%) !important; border-right: none !important; }
#topbar-search { position: absolute; left: 254px; top: 50%; transform: translateY(-50%); width: min(430px, 34vw) !important; background: #16294A !important; border: 1px solid #29406B !important; }
#notif-bell-wrap > button { background: #16294A !important; width: 36px; height: 36px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; }
#platform-switcher > button { background: #16294A !important; border-color: #29406B !important; }
#topbar .user-name { color: #fff !important; font-weight: 600; }
#topbar [data-act^="logout"] { color: rgba(255,255,255,0.85) !important; }
#vps-status-btn { background: #16294A !important; }
/* the hero band, EVERY page (his order 2026-08-21: "make this
   correction on all pages"): painted on #content itself so it spans
   the full cell width on every page, hard edge at 160px - each page's
   header sits white-on-navy and the first row of content straddles
   the band's bottom edge, as drawn */
#content { background: linear-gradient(180deg, #0C1E38 0, #0C1E38 160px, var(--bg) 160px) !important; }
#content > #page-dashboard { max-width: none !important; }
.page .page-title { color: #fff !important; }
.page .page-sub { color: rgba(255,255,255,0.72) !important; }
/* header controls, band-friendly: ghost + navy buttons become dark
   chips, outline links go light (their inline navy would vanish) */
.page-header .btn-ghost, .page-header .btn-navy { background: rgba(255,255,255,0.09) !important; color: #E9EEF6 !important; border: 1px solid rgba(255,255,255,0.25) !important; }
.page-header .btn-outline { color: #E9EEF6 !important; border-color: rgba(255,255,255,0.4) !important; }
/* Agentic Intake queue (his order 2026-08-21, "use image 1 to make
   something for image 2"): the review table wears the Adjuster
   Performance identity banner's treatment - its header row rides the
   same navy gradient with white labels, and the whole table sits on a
   white rounded card so it straddles the band like every other first
   row. :not(:empty) keeps the empty div invisible before first render. */
#ai-intake-list:not(:empty) { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
#ai-intake-list table thead tr { background: linear-gradient(135deg, var(--navy), var(--navy-light)) !important; }
#ai-intake-list table th { background: transparent !important; color: rgba(255,255,255,0.85) !important; border-bottom: none !important; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 1024px) { #topbar-brand-panel { width: 220px !important; } #topbar-search { left: 224px; } }
@media (max-width: 767px) { #topbar-brand-panel { width: auto !important; background: transparent !important; margin-left: 0 !important; } #topbar-search { position: static; transform: none; width: 150px !important; } }

/* sidebar: quiet grouped labels + the active page as a solid blue pill */
#sidebar .sidebar-label { font-size: 12px !important; color: rgba(255,255,255,0.4) !important; letter-spacing: 0.14em !important; }
#sidebar .nav-item { margin: 1px 8px !important; border-radius: 8px !important; }
#sidebar .nav-item.active { background: var(--blue) !important; color: #fff !important; border-left: none !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(37,99,235,0.35); }

/* cards: rounder, lighter borders, soft depth (the 742 polish block
   pins the old look with !important, so this must match force) */
.card, .metric-card, .demo-card { border-radius: var(--radius) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; }

/* KPI cards: status dot only, per the mockup's four tiles (round 2:
   the drawn cards are clean white with a small colored dot top-right).
   Two legacy blocks (the 550 accent and the 756 !important accent)
   paint a 3px bar across EVERY metric-card's top via ::after - the
   mockup has no bars, so the layer retires the pseudo-element outright
   and draws the dashboard dots on ::before, which nothing contests. */
.metric-card::after { content: none !important; }
#dash-kpi-row .metric-card { position: relative; overflow: hidden; padding: 20px 22px; }
#dash-kpi-row .metric-card::before { content: ""; position: absolute; top: 14px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
#dash-kpi-row .metric-card:nth-child(2)::before { background: var(--red); }
#dash-kpi-row .metric-card:nth-child(3)::before { background: var(--orange); }
#dash-kpi-row .metric-card:nth-child(4)::before { background: var(--green); }
#dash-kpi-row .metric-label { font-size: 12px; letter-spacing: 0.09em; }
#dash-kpi-row .metric-value { font-size: 34px; }
#dash-kpi-row .metric-icon { display: none; }   /* the dot carries the status now */

/* Adjuster Performance: the dark panel. The renderer's inline styles
   reference var(--text-3) etc., so remapping the variables ON the card
   restyles its content without touching a line of logic. */
#dashbox-adjperf { background: linear-gradient(180deg, #0C1E38 0%, #0A1930 100%) !important; border: none !important; color: #fff; --text-3: rgba(255,255,255,0.62); --border: rgba(255,255,255,0.14); }
#dashbox-adjperf .card-title { color: #fff !important; }
#dashbox-adjperf .btn-ghost { color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.3) !important; }
#dashbox-adjperf .btn-ghost:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
#dashbox-adjperf table td { border-bottom: 1px solid rgba(255,255,255,0.09); color: #fff; }
/* HIS ORDER 2026-09-01: "When my cursor goes over a row the row turns
   white and I can't see the writing." Three global rules (341, 614, 829)
   repaint EVERY tbody row near-white on hover - under this card's white
   text that erases the writing. These rows are statistics, not links:
   no repaint, no pointer. The id out-ranks all three, !important ties. */
#dashbox-adjperf tbody tr:hover { background: transparent !important; cursor: default; }

/* ROUND 3 (2026-08-21, his order: "Now build it like the mock up!") -
   the remaining drawn details, faithful to the sheet:
   - card actions are blue text links ("View all →"), not bordered buttons
   - the big KPI number carries a small gray sub-label on its baseline
   - the My Claims status chip is a light pill in small caps ("NEW") */
#page-dashboard .card .btn-ghost { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--blue) !important; font-weight: 600; padding: 2px 0 !important; }
#page-dashboard .card .btn-ghost:hover { background: transparent !important; text-decoration: underline; }
#page-dashboard #dashbox-adjperf .btn-ghost { color: #8FBCFF !important; }
.kpi-line { display: flex; align-items: baseline; gap: 7px; }
.kpi-sub { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
#dash-my-claims .badge { background: #EDF1F7 !important; color: #41506B !important; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.07em; border-radius: 6px; padding: 3px 9px; font-weight: 700; }
/* the 288 rule makes .card tables display:block, which shrink-wraps the
   anonymous table box - the adjperf stat values then stop mid-card
   instead of hugging the right edge as drawn. Real table display here. */
#dashbox-adjperf table { display: table !important; width: 100%; }
#dash-my-claims table { display: table !important; width: 100%; }
#dash-my-claims th:last-child, #dash-my-claims td:last-child { text-align: right; }
/* the drawn brand sits left-aligned in the rail, not centered */
#topbar-brand-panel { justify-content: flex-start !important; padding-left: 14px; }
/* the drawn top-right cluster is monochrome dark chips: the bell glyph
   renders white (the red badge is a sibling, untouched by the filter),
   and the LIVE pill is dark with a green status dot + small-caps word */
.bell-glyph { filter: grayscale(1) brightness(6); }
#vps-status-btn { color: #fff !important; font-size: 12px !important; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px !important; padding: 7px 14px !important; }

/* ── HIS ROUND 2026-08-22: "the entire column width needs to be wider
   to fit all of the Loss Details so they don't wrap. The width on the
   other pages need to be set to the same width too." The legacy 1400px
   page cap left a dead zone on wide monitors and pushed the claim tab
   row onto a second line - every page now fills the content column,
   the same width everywhere (the dashboard already ran uncapped).
   Same selectors as the legacy cap, later in the cascade - stronger
   declarations elsewhere (modals, media queries) keep their own. */
#content > * { max-width: none; }
.page-inner, .page-wrap, [id*="-page"], [id*="page-"] { max-width: none; }

/* ── SIDEBAR: the portal shell's scale, not mcs_v8's own ───────────────────
   His order 2026-08-24, with the Underwriting Portal sidebar beside this one:
   "Image 2 doesn't look like Image 1. Image 2 should like image 1 with the
   labeling, placement and size."

   WHY THEY DIVERGED. The four portals draw their sidebar from
   mcs_admin_portal.css — one shell, four skins. mcs_v8 predates that shell
   and grew its own sidebar across four stacked override blocks in this file,
   each written for a different round of the reskin. The last block to load
   wins, and what it won with was a type scale nobody had put side by side
   with the portals until he did.

   Measured, not guessed:
                     portal shell     mcs_v8 was
     section label   10px / 600       12px / 700   -> looser, larger
     nav item        13.5px / 400     15px         -> the other half
     active row      3px left rail    rounded blue pill, square vs round

   This block is LAST on purpose: every value it sets is already set with
   !important by an earlier block, so matching force and coming later is the
   only way it applies. Numbers are copied from mcs_admin_portal.css and
   test_v8_sidebar_matches_portal_shell.py reads BOTH files and fails if they
   ever drift apart — so the shell stays one shell.

   NOT copied: the portal nav items carry SVG icons and these do not. He named
   labeling, placement and size; icons are none of the three, and fitting
   twenty-five of them is its own pass. Recorded so the omission is a decision,
   not an oversight. */

#sidebar .sidebar-header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
/* His order 2026-08-26 (this rail beside the Agent Portal rail): "it
   needs to look like image 2 design and sytlistically" — the mark in
   a white card centered at the top of the rail, the caps portal label
   centered beneath it, tinted with this surface's own light accent
   the way every segment portal tints its tag (agent #A7E3C6, claims
   #9FD0EE, underwriting #B4CCFB, billing #A7E0E3). The mark already
   reads "Waypoint Claims", so a name line would repeat it; the
   element stays in the markup because it is the shell's naming block
   and the shell test reads it. */
#sidebar .sidebar-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; }
#sidebar .sidebar-logo-card {
  background: #fff; border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: inline-flex; align-items: center;
}
#sidebar .sidebar-logo-card img { height: 60px; max-width: 190px; object-fit: contain; display: block; }
#sidebar .sidebar-brand-name { display: none; }
#sidebar .sidebar-brand-tag {
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #9FD0EE; text-align: center;
}

#sidebar .sidebar-section { padding: 0 !important; }
#sidebar .sidebar-label {
  padding: 18px 20px 6px !important;
  margin-bottom: 0 !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
}
#sidebar .nav-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 20px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 13.5px !important; font-weight: 400 !important;
  border-radius: 0 !important;
  position: relative !important;
}
#sidebar .nav-item:hover {
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.05) !important;
}
#sidebar .nav-item.active {
  color: #fff !important;
  background: rgba(74,144,196,.18) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--carolina, #4A90D9) !important;
  padding-left: 17px !important;
  box-shadow: none !important;
}
#sidebar .nav-badge {
  margin-left: auto !important;
  font-size: 10px !important; font-weight: 600 !important;
  padding: 1px 7px !important; border-radius: 10px !important;
  min-width: 20px !important; text-align: center !important;
}

/* the signed-in user, pinned at the bottom the way the portals do it */
/* sticky, not flex-pushed: #app-shell is display:table and #sidebar is a
   table-cell, so `margin-top:auto` does nothing here and switching the cell
   to flex would break the two-column table row. Sticky keeps the user block
   on screen while the 25-item nav scrolls, which is the behaviour Image 1
   has, without touching the shell's layout model. */
#sidebar .sidebar-footer {
  position: sticky; bottom: 0;
  background: #081324 !important;
  padding: 14px 14px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#sidebar .sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; cursor: pointer;
}
#sidebar .sidebar-user:hover { background: rgba(255,255,255,.05); }
#sidebar .user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4A90D9, #1a5fa8);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
#sidebar .user-info { flex: 1; min-width: 0; }
#sidebar .user-name {
  color: rgba(255,255,255,.85) !important; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sidebar .user-role { color: rgba(255,255,255,.4); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════
   2026-08-26 — MIRROR THE ADMIN PORTAL RAIL (his catches, same day):
   "too much space above the logo and the side bar is much wider on
   the Waypoint Center ... the text directly below the logo is a
   smaller font than the other portals ... mirror the Admin Portal
   logo and text under the logo".

   The Admin Portal runs its app at #app-shell{zoom:.85}; this page
   has no zoom, so mirroring it means matching its RENDERED numbers:
   rail 260px -> 221px, logo 60px -> 51px, brand tag -> 13.5px. The
   space above the logo was the dark 70px topbar brand column that
   survived the earlier move — the rail now runs to the very top of
   the page like the Admin's, and the topbar starts after it.

   Scoped to min-width:768px so the mobile drawer rules (display:none
   until .mobile-open) keep winning on phones. */
@media (min-width: 768px) {
  #sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important;
    bottom: 0 !important; display: block !important;
    width: 221px !important; min-width: 221px !important;
    max-width: 221px !important; overflow-y: auto !important;
    z-index: 999;
  }
  #topbar { left: 221px !important; }
  #topbar-search { position: static !important; transform: none !important;
    margin-left: 8px; }
  #app-shell { display: block !important; }
  #content { display: block !important; margin-left: 221px !important; }
  #sidebar .sidebar-header { padding: 20px 16px 16px !important; }
  #sidebar .sidebar-logo-card img { height: 51px !important; max-width: 170px; }
  #sidebar .sidebar-brand-tag {
    font-size: 13.5px !important; font-weight: 500 !important;
    letter-spacing: .1em !important;
  }
}

/* ══ RULED 2026-08-26 — his picks from the "Sidebar and Top Bar" canvas ══
   Top bar: he tried options 1+2+5 combined, then ruled "Top - 1 only" —
   the ombre alone: deep navy on the left sweeping to a lighter navy on
   the right, no hairline texture, no gradient edge. The flat #0C1E38
   brand panel stays over the sidebar, so the sweep reads from where the
   content begins.
   Sidebar active page: "Option D but with the line goes all the way
   under the title" — no pill, no rail (supersedes the 2026-08-24 shell
   rail): bright title with a light-blue underline the full width of the
   title text. text-decoration underlines exactly the title, which is
   what "all the way under the title" asks for. */
#topbar { background: linear-gradient(90deg, #0B1F3A 0%, #122B52 55%, #1E3D6E 100%) !important; }
#sidebar .nav-item.active {
  background: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding-left: 20px !important; /* the rail's 3px offset goes with the rail */
  text-decoration: underline;
  text-decoration-color: #4A90D9;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ORD-0053 slab 3 (2026-09-03), his "apply this exact same principal on
   every page in every portal": the Waypoint Center's boxes take the same
   head as the Admin shell's. A card whose first child is .card-title, or
   whose first child is the flex row that carries .card-title and its
   buttons, wears the cyan band edge to edge; that card drops its 20px
   padding, keeps every other child 22px inside and 22px off the bottom.
   Written AFTER the 786 polish block so it wins on importance and
   specificity; the earlier .card-title colour/size/weight rules lose
   here on purpose (they still govern a .card-title that is not a head). */
.card > .card-title, .card > :first-child:has(.card-title) { background: linear-gradient(135deg, #0E7490, #38BDF8) !important; color: #fff !important; padding: 14px 22px !important; margin: 0 0 16px 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom: none !important; }
.card > :first-child:has(.card-title) .card-title { margin: 0 !important; padding: 0 !important; background: none !important; flex: 1 1 auto; }
.card > .card-title, .card > :first-child:has(.card-title) .card-title { font-family: 'Segoe UI', Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; color: #fff !important; }
.card > .card-title *, .card > :first-child:has(.card-title) .card-title * { color: #fff !important; }
.card > :first-child:has(.card-title) [style*="color:var(--text-3)"], .card > :first-child:has(.card-title) [style*="color:var(--text-2)"] { color: rgba(255,255,255,.82) !important; }
.card > :first-child:has(.card-title) [style*="color:var(--navy)"] { color: #fff !important; }
.card > :first-child:has(.card-title) .btn-ghost, .card > .card-title .btn-ghost, .card > :first-child:has(.card-title) .btn-outline, .card > .card-title .btn-outline { background: rgba(8,26,48,.55) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.card > :first-child:has(.card-title) .btn-navy, .card > .card-title .btn-navy { background: var(--gold, #F5B301) !important; color: #081A30 !important; }
.card:has(> .card-title), .card:has(> :first-child .card-title) { padding: 0 !important; overflow: hidden; }
.card:has(> .card-title) > :not(.card-title), .card:has(> :first-child .card-title) > :not(:first-child) { margin-left: 22px !important; margin-right: 22px !important; }
.card:has(> .card-title) > :last-child:not(.card-title), .card:has(> :first-child .card-title) > :last-child:not(:first-child) { margin-bottom: 22px !important; }
.card:has(> .card-title) > table, .card:has(> :first-child .card-title) > table, .card:has(> .card-title) > .table-wrap, .card:has(> :first-child .card-title) > .table-wrap { width: auto; }
#dashbox-adjperf > :first-child:has(.card-title) { background: linear-gradient(135deg, #0E7490, #38BDF8) !important; }
.card thead tr { background: linear-gradient(135deg, #06657E, #0E7490) !important; }
.card thead th { background: transparent !important; color: #fff !important; border-bottom: none !important; }

/* ORD-0110 (2026-09-09): the Reports field on the Run the Selected Reports
   card — drawn as the other fields are, its panel dropping the report list
   beneath it. The card lets the panel out (overflow), the panel scrolls. */
#rpt-query-card { overflow: visible; }
.rpt-pick-wrap { position: relative; }
.rpt-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; width: 100%; }
.rpt-pick-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  min-width: 380px; max-width: 520px; max-height: 56vh; overflow: auto;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(13,27,42,.14); padding: 10px;
}
.rpt-pick-panel[hidden] { display: none; }
.rpt-pick-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; position: sticky; top: -10px; background: #fff; padding: 4px 0 6px; border-bottom: 1px solid var(--border); z-index: 1; }
.rpt-pick-head .form-input { flex: 1; min-width: 0; }
.rpt-pick-panel #rpt-checklist { display: flex; flex-direction: column; gap: 4px; }
.rpt-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); position: sticky; bottom: -10px; background: #fff; }
@media (max-width: 900px) { .rpt-pick-wrap { grid-column: 1 / -1 !important; } .rpt-pick-panel { min-width: 0; width: 100%; max-width: none; } }

/* ORD-0114 (2026-09-09): the hide-sidebar control on the topbar — his order for
   every portal, in the Waypoint colors. The dated mirror block above forces the
   rail, the topbar and the content into place with !important from 768px up,
   so the hidden state says !important too, later in the sheet. */
/* ORD-0138 (2026-09-10): the round white face with the chevron pair, on the
   column's right edge — the control he sent a picture of. */
/* the flyout the rail's rows share — one element on the body, never clipped */
.sb-rail-fly { position: fixed; transform: translateY(-50%); background: #0B1F3A; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 7px 12px; border-radius: 8px; box-shadow: 0 4px 16px rgba(8,26,48,.38); z-index: 400; pointer-events: none; }
#sidebar { position: relative; overflow: visible; }

/* ═══ ORD-0161 — the rail is the rail at EVERY width ═══════════════════
 *
 * HIS ORDER, 2026-09-13, with a picture of this column drawn as bare lines:
 * "no icons (waypoint center)", and then: "this needs to be fixed so it works
 * on any browser."
 *
 * MEASURED, both shells, before anything moved:
 *
 *   mcs_admin_portal.css   every body.sidebar-hidden rule  UNCONDITIONAL
 *   mcs_v8.css             every body.sidebar-hidden rule  @media (min-width: 768px)
 *
 * Two shells and two different answers to "when does the collapsed rail
 * exist". That is the SAME FAULT ORD-0159 fixed one layer up: its three
 * copies of the collapse BUTTON disagreed the same way, and the Waypoint
 * Centre's was the copy hidden behind this same 768px guard. The button was
 * lifted out and the rail was left behind it.
 *
 * WHAT THAT DID TO A NARROW WINDOW. Pressing collapse put `sidebar-hidden` on
 * the body and NOTHING in this sheet answered — no 64px column, no shrunken
 * label, no headings turned to rules. The only rules that did answer were the
 * shared sheet's, which are unconditional: it centred each row and forced the
 * icons to 16px inside a column that was never told to become a rail. A
 * half-collapsed column drawn by two sheets that disagree is exactly the
 * picture he sent.
 *
 * THE SPLIT, AND IT IS THE WHOLE OF THE FIX. What the RAIL LOOKS LIKE is
 * unconditional, matching the Administrator Portal. What the PAGE DOES ABOUT
 * IT stays width-dependent, because below 768px the column is not in the flow
 * at all — it is an overlay drawer over full-width content, so shifting the
 * top bar and the page by 64px would push them off a screen the rail is not
 * occupying. Those two lines, and only those two, keep the guard.
 *
 * ORD-0139 (2026-09-10), unchanged and now true everywhere: collapsed KEEPS
 * EVERY ENTRY as its icon — the empty 44px bar ORD-0114 left took a person's
 * navigation away with the width they were trying to win. The heading becomes
 * a rule; the words fly out on hover or focus.
 */
body.sidebar-hidden { --sidebar-w: 64px; }
body.sidebar-hidden #sidebar { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }
body.sidebar-hidden #sidebar .sidebar-brand-tag,
body.sidebar-hidden #sidebar .sidebar-brand-name { display: none !important; }
body.sidebar-hidden #sidebar .sidebar-logo-card img { height: 30px !important; max-width: 46px !important; }
body.sidebar-hidden #sidebar .nav-item { font-size: 0 !important; justify-content: center !important; padding: 10px 0 !important; gap: 0 !important; }
body.sidebar-hidden #sidebar .nav-item > svg { flex-shrink: 0; }
body.sidebar-hidden #sidebar .nav-badge { display: none !important; }
body.sidebar-hidden #sidebar .sidebar-label { font-size: 0 !important; height: 1px !important; padding: 0 !important; margin: 12px 14px !important; background: rgba(255,255,255,.14); overflow: hidden; }

@media (min-width: 768px) {
  /* the dated mirror block pins the top bar and the page at 221px with !important; railed, they start where the rail ends */
  body.sidebar-hidden #topbar { left: 64px !important; }
  body.sidebar-hidden #content { margin-left: 64px !important; }
}

/* AND THERE IS NO NARROW-WINDOW SPECIAL CASE, deliberately. One was written
   and taken out again: it restated the row and label sizes for the overlay
   drawer, which meant inventing numbers that then disagreed with the portal
   shell's own scale — the size wall caught it immediately. The rail is the
   rail at every width, which is what the Administrator Portal has always
   done. Only the two page-offset lines above are width-dependent, because
   below 768px the column is an overlay that occupies no page width. */

/* ORD-0116 (2026-09-09): the dashboard tiles stand in equal-height rows, and a
   chart with nothing to draw says so in words at the slot's height. */
#v8-tiles { align-items: stretch; }
#v8-tiles > .card { display: flex; flex-direction: column; min-width: 0; }
.pd-none { min-height: 220px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text-3); text-align: center; padding: 0 18px; }

/* ORD-0140 (2026-09-10, his words: "the selected drop down turns navy
   making it impossible to see the box wording. Keep it white"). Measured:
   59 of the Waypoint Center's dropdowns had option lists with no colours
   of their own, so the browser's own highlight painted the chosen row and
   the dark words on it vanished. Stated once, for every select. No
   !important: select.banner-status-select option already states its own
   readable pair and keeps it. */
select option { background-color: #ffffff; color: #111111; }
select option:checked { background-color: #EEF1F6; color: #0B1F3A; }
select option:disabled { color: #8A93A2; }

/* ═══ ORD-0160 — every notice on a claim is an icon ═════════════
   HIS ORDER 2026-09-13: "i don't like the tan, red, and orange banners.
   instead of banners make each notification a representative icon." He was
   shown a schema of all nine and approved it, then ruled Option A: the two
   full-width strips become icons too, keeping the Assign button.

   ONE CHIP, TWO GROUNDS. The header chips sit on the claim banner's navy;
   the notice chips sit on the page's light ground below it. Same four
   levels, two tint sets, chosen by the ground - never by the caller. That
   is the whole reason this block exists instead of nine inline fills: the
   header was wearing seven different colours to say about three things.

   FOUR LEVELS: act (a person must do something), weigh (measured evidence,
   never holds a claim), tidy (a blank worth clearing), standing (not a
   problem at all - a condition that changes how you work the claim). */
#claim-notice-strips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#claim-notice-strips:not(:empty) { margin-bottom: 16px; }

.cn-chip-wrap { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.cn-chip {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; cursor: default; line-height: 0;
  border: 1px solid rgba(11,31,58,.16); background: #fff;
}
.cn-chip[data-cn-toggle] { cursor: pointer; }
.cn-chip.cn-chip-num { width: auto; padding: 0 9px 0 7px; gap: 5px; }
.cn-chip .cn-num {
  font-size: 12px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text-1, #16212F);
}
.cn-chip svg { display: block; flex-shrink: 0; }
.cn-chip:focus-visible { outline: 2px solid var(--carolina, #1D86B5); outline-offset: 2px; }

/* the level IS the colour, and nothing else on the chip carries one */
.cn-chip.cn-act      { color: #B3261E; }
.cn-chip.cn-weigh    { color: #A9660A; }
.cn-chip.cn-tidy     { color: #4A5C74; }
.cn-chip.cn-standing { color: #1D4E7A; }

/* ON THE HEADER'S NAVY the same four levels take their lighter tints, and
   the chip's own shell goes translucent so it reads as part of the banner
   rather than a white sticker on it. */
.claim-detail-header .cn-chip,
.cmeta .cn-chip {
  border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.10);
}
.claim-detail-header .cn-chip .cn-num,
.cmeta .cn-chip .cn-num { color: #fff; }
.claim-detail-header .cn-chip.cn-act,      .cmeta .cn-chip.cn-act      { color: #F08A82; }
.claim-detail-header .cn-chip.cn-weigh,    .cmeta .cn-chip.cn-weigh    { color: #E2A445; }
.claim-detail-header .cn-chip.cn-tidy,     .cmeta .cn-chip.cn-tidy     { color: #9DB0C7; }
.claim-detail-header .cn-chip.cn-standing, .cmeta .cn-chip.cn-standing { color: #6FB6E4; }

/* THE CONTROL LIVES INSIDE THE PANEL. HIS QUESTION 2026-09-13: "why does not
   approve and payee not linked have words?" They were the only two chips
   wearing a label, which made them the odd ones out on a row of bare icons.
   The label is gone and the action is not: Assign, and Link Them on the
   Contacts Tab, sit with the sentence that explains why they are needed, one
   click away - the same one click that reaches every other notice's words. */
.cn-do { margin-top: 9px; font-size: 12.5px; padding: 5px 13px; }
.cn-do-act { background: var(--red, #DC2626); color: #fff; border: none; font-weight: 600; }
.cn-do-act:hover { background: #B91C1C; color: #fff; }

/* the words, on the click - where severity, coverage and complexity already
   kept theirs, and nobody has ever called those hard to reach */
.cn-detail {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 260px; max-width: min(440px, 86vw);
  background: #fff; color: var(--text-1, #16212F);
  border: 1px solid var(--border, #D9E0E9); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 8px 26px rgba(8,26,48,.22);
}
.cn-detail[hidden] { display: none !important; }
.cn-detail-head { font-weight: 700; margin-bottom: 5px; }
.cn-detail p { margin: 0 0 5px; }
.cn-detail p:last-child { margin-bottom: 0; }
.cn-detail ul { margin: 0; padding-left: 18px; }
.cn-detail li { margin: 2px 0; }
.cn-detail .cn-why { display: block; margin-top: 3px; color: var(--text-2, #54637A); }
.cn-detail .cn-ev { color: var(--text-3, #7C8AA0); }

@media (max-width: 640px) {
  .cn-detail { left: auto; right: 0; max-width: 88vw; }
}

/* ORD-0159 (2026-09-13): the collapse button's face and placing moved to
   the SHARED sheet, mcs_sidebar_collapse.css, beside the engine every
   portal already loads. There were three copies of it and they had
   drifted — his Image 3. Only the offset below this shell's own brand
   block stays here, because the brand blocks are genuinely different
   heights and that is the one thing that may differ. */
/* ORD-0238 (his finding 2026-09-23, railed): the railed offset sat at 68px
   under a 70px bar, so the top two pixels of the disc were painted over and
   did not take a click. Flush with the bar's lower edge, as the Administrator
   and Operator shells sit, is the rule (ORD-0220). */
:root { --sb-hide-top: 96px; --sb-hide-top-railed: 70px; }

/* ── ORD-0231 Team Profile (his order 2026-09-21): a manager's roster under Tools ── */
.tp-tab { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; background: none; border: 0; border-right: 1px solid var(--border); color: var(--text-2); cursor: pointer; }
.tp-tab-on { background: var(--card, #fff); color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); }
.tp-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tp-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 9px 14px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.tp-row:first-child { border-top: 0; }
.tp-row-on { background: var(--bg); box-shadow: inset 3px 0 0 var(--gold); }
.tp-row .tp-sub { grid-column: 1 / -1; color: var(--text-3); font-size: 12px; }
.tp-grp { margin-top: 18px; }
.tp-grp:first-child { margin-top: 0; }
.tp-grp h4 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin: 0 0 6px; }
.tp-kv { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; column-gap: 20px; }
.tp-kv > div { padding: 6px 0; border-bottom: 1px dotted var(--border); font-size: 14px; }
.tp-k { color: var(--text-2); }
.tp-from { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--text-3); }
.tp-edit { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tp-edit input, .tp-edit select { font: inherit; font-size: 14px; width: 110px; padding: 3px 6px; border: 1px solid var(--gold); border-radius: 3px; }
.tp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); column-gap: 28px; }
.tp-pill { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--bg); color: var(--text-2); }
.tp-pill-good { color: #1F7A4D; background: rgba(31,122,77,.12); }
.tp-pill-warn { color: #B7791F; background: rgba(183,121,31,.14); }
.tp-pill-bad { color: #A93A3A; background: rgba(169,58,58,.12); }
.tp-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tp-table th, .tp-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tp-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 900px) { #tp-grid { grid-template-columns: 1fr !important; } .tp-kv { grid-template-columns: 1fr; } }