* { 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:   56px;
  --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); }

.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:70px; 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; }

/* 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: 14px 20px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#sidebar .sidebar-brand-text { line-height: 1.15; }
#sidebar .sidebar-brand-name {
  font-family: 'DM Serif Display', Georgia, serif;
  color: #fff; font-size: 15px;
}
#sidebar .sidebar-brand-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

#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; }