/* ─── TOKENS ─────────────────────────────────────────────── */
  :root {
    --navy:       #0D1B2A;
    --navy-mid:   #152336;
    --navy-light: #1E3250;
    --carolina:   #4A90C4;
    --carolina-lt:#6EB0DF;
    --accent:     #15658A;
    --bg:         #F4F3F0;
    --bg-card:    #FFFFFF;
    --text:       #1A1A2E;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --border:     #E5E4E0;
    --border-mid: #D1CFC9;
    --success:    #2D7D4F;
    --success-bg: #EBF7F1;
    --warning:    #B45309;
    --warning-bg: #FEF3E2;
    --danger:     #B91C1C;
    --danger-bg:  #FEE2E2;
    --sidebar-w:  260px;
    --topbar-h:   60px;
    --radius:     8px;
    --radius-lg:  12px;
    --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
    --transition: all .18s ease;
  }

  /* ─── RESET ──────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'IBM Plex Sans', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
  button { cursor: pointer; border: none; background: none; font-family: inherit; }
  input, select, textarea { font-family: inherit; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }

  /* ─── SCROLLBAR ───────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

  /* ══════════════════════════════════════════════════════════
     LOGIN PAGE
  ══════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     LOGIN PAGE — Corporate redesign
  ══════════════════════════════════════════════════════════ */
  #login-screen {
    min-height: 100vh;
    display: flex;
    /* 2026-08-11 (his ruling, round 2): the screen's OWN ground is navy —
       every pixel that is not the sign-in column is dark by construction,
       immune to flex/zoom/viewport quirks. The right column paints its
       #F4F3F0 over this. */
    background: var(--navy);
  }
  html, body { margin: 0; min-height: 100%; }
  .login-left {
    flex: 1;
    min-height: 100vh; /* 2026-08-11: page must reach the bottom (his ruling) */
    background: var(--navy);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
  }
  /* Subtle ruled lines — architectural, not bubbly */
  .login-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 79px,
        rgba(255,255,255,.04) 79px,
        rgba(255,255,255,.04) 80px
      );
    pointer-events: none;
  }
  /* Strong left-edge accent bar */
  .login-left::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--carolina);
  }
  .login-left-top {
    position: relative; z-index: 1;
  }
  .login-left-bottom {
    position: relative; z-index: 1;
  }
  .login-wordmark {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 64px;
  }
  .login-wordmark-icon {
    width: 40px; height: 40px;
    border: 1.5px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Serif Display', serif;
    color: #fff; font-size: 18px;
  }
  .login-wordmark-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
  }
  .login-headline {
    font-family: 'DM Serif Display', serif;
    font-size: 42px; line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    max-width: 400px;
  }
  .login-headline em {
    font-style: italic;
    color: var(--carolina-lt);
  }
  .login-rule {
    width: 40px; height: 2px;
    background: var(--carolina);
    margin-bottom: 24px;
  }
  .login-sub {
    font-size: 14px; line-height: 1.8;
    color: rgba(255,255,255,.45);
    font-weight: 300;
    max-width: 380px;
  }
  .login-divider {
    width: 100%; height: 1px;
    background: rgba(255,255,255,.08);
    margin: 36px 0;
  }
  .login-stats {
    display: flex; align-items: center; gap: 0;
  }
  .login-stat { flex: 1; }
  .login-stat-num {
    font-family: 'DM Serif Display', serif;
    font-size: 28px; color: #fff;
    line-height: 1; margin-bottom: 6px;
  }
  .login-stat-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
  }
  .login-stat-sep {
    width: 1px; height: 40px;
    background: rgba(255,255,255,.1);
    margin: 0 24px; flex-shrink: 0;
  }
  .login-legal {
    font-size: 11px; color: rgba(255,255,255,.2);
    letter-spacing: .03em;
  }

  /* RIGHT PANEL */
  .login-right {
    width: 480px; flex-shrink: 0;
    min-height: 100vh; /* 2026-08-11: page must reach the bottom (his ruling) */
    background: #F4F3F0;
    display: flex; flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    border-left: 1px solid var(--border);
  }
  .login-form-eyebrow {
    font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--carolina); margin-bottom: 12px;
  }
  .login-form-title {
    font-family: 'DM Serif Display', serif;
    font-size: 30px; color: var(--text);
    margin-bottom: 6px; line-height: 1.1;
  }
  .login-form-sub {
    font-size: 13px; color: var(--text-muted);
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
  }
  .login-form-wrap { width: 100%; }
  .form-group { margin-bottom: 20px; }
  .form-label {
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 7px;
  }
  .form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-mid);
    border-radius: 0;
    background: #fff;
    color: var(--text); font-size: 14px;
    transition: var(--transition);
    outline: none;
  }
  .form-input:focus {
    border-color: var(--navy);
    box-shadow: none;
  }
  .form-input::placeholder { color: var(--text-light); }
  .btn-primary {
    width: 100%; padding: 12px;
    background: var(--navy);
    color: #fff; border-radius: 0;
    font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    transition: var(--transition);
    border: none; cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
  }
  .btn-primary:hover { background: var(--navy-light); }
  .btn-primary:active { background: var(--navy); }
  .login-footer {
    margin-top: 24px;
    font-size: 11.5px; color: var(--text-light);
    display: flex; justify-content: space-between;
    align-items: center;
  }
  .login-footer a { color: var(--carolina); text-decoration: none; }
  .login-footer a:hover { text-decoration: underline; }
  .login-error {
    background: var(--danger-bg); border: 1px solid #FECACA;
    color: var(--danger); border-radius: 0;
    padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
    display: none;
  }

  /* ══════════════════════════════════════════════════════════
     APP SHELL
  ══════════════════════════════════════════════════════════ */
  #app-shell { display: none; min-height: 100vh; }

  /* SIDEBAR */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
    display: flex; flex-direction: column;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0,0,0,.2);
  }
  .sidebar-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .sidebar-brand {
    display: flex; align-items: center; gap: 11px;
  }
  .sidebar-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--carolina), var(--carolina-lt));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Serif Display', serif; color: #fff; font-size: 17px;
    box-shadow: 0 2px 8px rgba(74,144,196,.35);
    flex-shrink: 0;
  }
  .sidebar-brand-text { line-height: 1.15; }
  .sidebar-brand-name {
    font-family: 'DM Serif Display', serif;
    color: #fff; font-size: 15px;
  }
  .sidebar-brand-tag {
    font-size: 10px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }

  /* ORD-0159, HIS ORDER 2026-09-13 with a picture of this sidebar: "the
     spacing is wrong", and on which way: "Tighten the Admin to match the
     Waypoint Center". MEASURED — the rows were never the problem, both
     shells pad a .nav-item at 9px 20px. It is the SECTION HEADING: this
     carried 18px above it and the Waypoint Center's carries 4px, so every
     group on this portal was pushed a third of an inch further apart than
     the same groups next door, and six groups turned into the gap he
     photographed. Only the padding moves; the heading keeps its own smaller
     type, which is this portal's and not a mismatch. */
  .sidebar-section-label {
    padding: 4px 20px;
    font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
  }
  .sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 16px; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px;
    color: rgba(255,255,255,.6);
    font-size: 13.5px; font-weight: 400;
    cursor: pointer; border-radius: 0;
    transition: var(--transition);
    position: relative;
  }
  .nav-item svg { flex-shrink: 0; opacity: .7; }
  .nav-item:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); }
  .nav-item:hover svg { opacity: 1; }
  .nav-item.active {
    color: #fff; background: rgba(74,144,196,.18);
    font-weight: 500;
  }
  .nav-item.active svg { opacity: 1; }
  .nav-item.active::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--carolina);
    border-radius: 0 2px 2px 0;
  }
  .nav-badge {
    margin-left: auto;
    background: var(--carolina);
    color: #fff; font-size: 10px; font-weight: 600;
    padding: 1px 7px; border-radius: 10px;
    min-width: 20px; text-align: center;
  }

  .sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
  }
  .sidebar-user:hover { background: rgba(255,255,255,.05); }
  .user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--carolina), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 600;
    flex-shrink: 0;
  }
  .user-info { flex: 1; min-width: 0; }
  .user-name { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; truncate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-role { color: rgba(255,255,255,.4); font-size: 11px; }

  /* TOPBAR */
  .topbar {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0;
    height: var(--topbar-h);
    background: rgba(244,243,240,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 28px;
    z-index: 90;
    gap: 16px;
  }
  .topbar-title {
    font-family: 'DM Serif Display', serif;
    font-size: 20px; color: var(--text);
    flex: 1;
  }
  .topbar-actions { display: flex; align-items: center; gap: 10px; }
  .btn-icon {
    width: 34px; height: 34px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: var(--transition);
  }
  .btn-icon:hover { background: var(--border); color: var(--text); }

  /* MAIN CONTENT */
  .main-content {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    padding: 28px;
  }

  /* ─── SECTION VIEWS ────────────────────────────────────────── */
  .view { display: none; }
  .view.active { display: block; }

  /* ─── CARDS ────────────────────────────────────────────────── */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  .card-header {
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
  }
  .card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 17px; color: var(--text);
    flex: 1;
  }
  .card-body { padding: 22px; }
  canvas[id^="dash-cv-"] { width: 100% !important; height: 100% !important; box-sizing: border-box; display: block; }

  /* ─── STAT TILES ───────────────────────────────────────────── */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }
  .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: flex; align-items: flex-start; gap: 14px;
    box-shadow: var(--shadow);
  }
  .stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .stat-icon.blue  { background: rgba(74,144,196,.12); color: var(--carolina); }
  .stat-icon.navy  { background: rgba(13,27,42,.08); color: var(--navy); }
  .stat-icon.amber { background: rgba(196,135,58,.12); color: var(--accent); }
  .stat-icon.green { background: rgba(45,125,79,.1); color: var(--success); }
  .stat-val {
    font-family: 'DM Serif Display', serif;
    font-size: 28px; color: var(--text); line-height: 1;
    margin-bottom: 4px;
  }
  .stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

  /* ─── TABLE ────────────────────────────────────────────────── */
  .tbl-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  thead th {
    padding: 11px 16px; text-align: left;
    font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg);
  }
  thead th:first-child { border-radius: var(--radius) 0 0 0; }
  thead th:last-child  { border-radius: 0 var(--radius) 0 0; }
  tbody tr { transition: background .1s; }
  tbody tr:hover { background: rgba(244,243,240,.6); }
  tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px; color: var(--text);
    vertical-align: middle;
  }
  tbody tr:last-child td { border-bottom: none; }

  /* ─── BADGE ────────────────────────────────────────────────── */
  .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
  }
  .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
  .badge.active  { background: var(--success-bg); color: var(--success); }
  .badge.active::before  { background: var(--success); }
  .badge.inactive { background: var(--border); color: var(--text-muted); }
  .badge.inactive::before { background: var(--text-light); }
  .badge.pending { background: var(--warning-bg); color: var(--warning); }
  .badge.pending::before { background: var(--warning); }
  .badge.plain { background: rgba(74,144,196,.1); color: var(--carolina); }
  .badge.plain::before { display: none; }

  /* ─── BUTTONS ──────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: var(--radius);
    font-size: 13px; font-weight: 500; font-family: inherit;
    transition: var(--transition); cursor: pointer; border: none;
    line-height: 1;
  }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  .btn-navy {
    background: var(--navy); color: #fff;
    box-shadow: var(--shadow);
  }
  .btn-navy:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-outline {
    background: transparent; color: var(--text);
    border: 1.5px solid var(--border-mid);
  }
  .btn-outline:hover { border-color: var(--text-muted); background: rgba(0,0,0,.02); }
  .btn-danger {
    background: var(--danger-bg); color: var(--danger);
    border: 1px solid #FECACA;
  }
  .btn-danger:hover { background: #FEE2E2; }
  .btn-success {
    background: var(--success-bg); color: var(--success);
    border: 1px solid #BBF7D0;
  }
  .btn-ghost { background: transparent; color: var(--text-muted); }
  .btn-ghost:hover { color: var(--text); background: var(--border); }

  /* ─── TOOLBAR ─────────────────────────────────────────────── */
  .toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; flex-wrap: wrap;
  }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1.5px solid var(--border-mid);
    border-radius: var(--radius); padding: 7px 12px;
    flex: 1; min-width: 180px; max-width: 340px;
    transition: var(--transition);
  }
  .search-box:focus-within { border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(74,144,196,.1); }
  .search-box input {
    border: none; background: transparent;
    font-size: 13px; color: var(--text); outline: none; flex: 1;
  }
  .search-box input::placeholder { color: var(--text-light); }
  .search-box svg { color: var(--text-light); flex-shrink: 0; }

  /* ─── MODAL ────────────────────────────────────────────────── */
  #qb-conditions select, #qb-conditions input { padding-top: 16px; padding-bottom: 16px; }
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(13,27,42,.45);
    backdrop-filter: blur(4px);
    z-index: 200; display: none;
    align-items: center; justify-content: center;
    padding: 24px;
  }
  .modal-overlay.open { display: flex; }
  /* The confirm dialog can be summoned from INSIDE another open modal
     (e.g. Remove ZIP in the deployment editor). At the shared z-index
     the later DOM sibling paints on top, so the prompt opened buried
     and the click read as dead. It must always sit above whichever
     modal launched it. */
  #modal-confirm { z-index: 300; }
  .modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    animation: modalIn .18s ease;
  }
  /* Wider modal + larger fonts scoped to deployment Create/Edit modal only.
     RULED 2026-08-26 (his Image 1, "this box needs to be wider"): the
     Assigned Adjusters rows now carry Comp + Indem $ + Exp $ + per-adjuster
     zips, and 820px clipped the zip input at the modal edge. */
  #modal-add-deployment .modal { max-width: 1080px; width: 94%; }
  /* Wider Edit Client modal (correspondence branding designers need room). */
  #modal-edit-client .modal { max-width: 920px; width: 94%; }
  #modal-edit-client .form-input,
  #modal-edit-client .form-select,
  #modal-edit-client .form-textarea { font-size: 14px; }
  #modal-add-deployment .form-label { font-size: 13px; }
  #modal-add-deployment .form-input,
  #modal-add-deployment .form-select,
  #modal-add-deployment .form-textarea { font-size: 15px; padding: 11px 14px; }
  #modal-add-deployment .modal-title { font-size: 22px; }
  #modal-add-deployment .modal-body { padding: 26px 28px; }
  #modal-add-deployment .form-helper-text { font-size: 12px; color: #888; margin-top: 4px; }
  /* Wider modal scoped to roster (Add/Edit Employee) modal only. */
  #modal-add-roster .modal { max-width: 720px; }
  @keyframes modalIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .modal-header {
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
  }
  .modal-title { font-family: 'DM Serif Display', serif; font-size: 19px; flex: 1; }
  .modal-body { padding: 22px 24px; }
  .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
  }

  /* ─── FORM STYLES ─────────────────────────────────────────── */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-group { margin-bottom: 18px; }
  .form-label {
    display: block; font-size: 12px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 6px;
  }
  .form-input, .form-select, .form-textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--border-mid);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text); font-size: 13.5px;
    transition: var(--transition); outline: none;
    font-family: inherit;
  }
  .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(74,144,196,.1); background: #fff; }
  .form-textarea { resize: vertical; min-height: 80px; }
  .form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }

  /* ─── DIVIDER ─────────────────────────────────────────────── */
  .divider { height: 1px; background: var(--border); margin: 20px 0; }

  /* ─── EMPTY STATE ─────────────────────────────────────────── */
  .empty-state {
    text-align: center; padding: 60px 24px;
    color: var(--text-muted);
  }
  .empty-state svg { opacity: .25; margin-bottom: 14px; }
  .empty-state h3 { font-family: 'DM Serif Display', serif; font-size: 19px; color: var(--text); margin-bottom: 6px; }
  .empty-state p { font-size: 13px; }

  /* ─── PLATFORM TYPE PILL ─────────────────────────────────── */
  .type-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 500;
    background: rgba(74,144,196,.1); color: var(--carolina);
    font-family: 'IBM Plex Mono', monospace;
  }

  /* ─── DETAIL ROW ─────────────────────────────────────────── */
  .detail-row {
    display: flex; gap: 10px; font-size: 13px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .detail-row:last-child { border-bottom: none; }
  .detail-key { color: var(--text-muted); width: 140px; flex-shrink: 0; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
  .detail-val { color: var(--text); flex: 1; }

  /* ─── PLATFORM CARD GRID ──────────────────────────────────── */
  .platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  .platform-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
  }
  .platform-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-mid); }
  .platform-card-header {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
  }
  .platform-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
  }
  .platform-name { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
  .platform-url {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .platform-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .platform-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

  /* ─── CLIENT DETAIL PANEL ──────────────────────────────────── */
  .panel-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
  @media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }

  /* ─── TABS ────────────────────────────────────────────────── */
  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
  .tab {
    padding: 10px 18px; font-size: 13px; font-weight: 500;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: var(--transition);
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--navy); border-bottom-color: var(--carolina); }

  /* ─── TOAST ───────────────────────────────────────────────── */
  #toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 500;
    background: var(--navy); color: #fff;
    padding: 12px 20px; border-radius: var(--radius);
    font-size: 13px; box-shadow: var(--shadow-lg);
    display: none; align-items: center; gap: 10px;
    max-width: 320px;
    animation: toastIn .2s ease;
  }
  @keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #toast.show { display: flex; }
  #toast.success { background: var(--success); }
  #toast.error { background: var(--danger); }

  /* ─── FILTER SELECT ───────────────────────────────────────── */
  .filter-select {
    padding: 7px 30px 7px 12px;
    border: 1.5px solid var(--border-mid);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text); font-size: 13px;
    font-family: inherit; outline: none; cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: var(--transition);
  }
  .filter-select:focus { border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(74,144,196,.1); }

  /* ─── CONFIRM DIALOG ──────────────────────────────────────── */
  .confirm-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
  }
  .confirm-icon.danger { background: var(--danger-bg); color: var(--danger); }
  .confirm-icon.warning { background: var(--warning-bg); color: var(--warning); }

  /* ══════════════════════════════════════════════════════════
     DASHBOARD (OVERVIEW)
  ══════════════════════════════════════════════════════════ */
  .activity-list { display: flex; flex-direction: column; gap: 0; }
  .activity-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .activity-item:last-child { border-bottom: none; }
  .activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
  }
  .activity-dot.blue  { background: var(--carolina); }
  .activity-dot.green { background: var(--success); }
  .activity-dot.amber { background: var(--accent); }
  .activity-time { margin-left: auto; color: var(--text-light); font-size: 11.5px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; }

  /* ─── PRINT ───────────────────────────────────────────────── */
  @media print {
    .sidebar, .topbar, .toolbar { display: none !important; }
    .main-content { margin: 0; padding: 0; }
  }


  /* ===== Moved pages (Settings, Analytics) — self-contained styles ===== */
  #view-settings, #view-analytics {
    --blue:       #4B9CD3;
    --blue-pale:  #DCE9F5;
    --green:      #1B7A43;
    --red:        #C0392B;
    --text-2:     #41506B;
    --text-3:     #6B7A90;
    --surface2:   #F4F3F0;
    --border-mv:  #E2E5EA;
  }
  #view-settings .card, #view-analytics .card {
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px; box-shadow:0 1px 3px rgba(0,0,0,.05);
  }
  #view-settings .card-title, #view-analytics .card-title {
    font-size:16px; font-weight:700; color:var(--navy); margin-bottom:16px;
  }
  #view-settings .page-header, #view-analytics .page-header { margin-bottom:22px; }
  #view-settings .page-title, #view-analytics .page-title { font-size:24px; font-weight:700; color:var(--navy); }
  #view-settings .page-sub, #view-analytics .page-sub { font-size:14px; color:var(--text-3); margin-top:4px; }
  #view-settings .grid2, #view-analytics .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  #view-settings .form-group, #view-analytics .form-group { margin-bottom:14px; }
  #view-settings .form-group label, #view-analytics .form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
  #view-settings .form-group input, #view-settings .form-group select, #view-settings .form-group textarea,
  #view-analytics .form-group input, #view-analytics .form-group select, #view-analytics .form-group textarea {
    width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit;
  }
  #view-settings textarea, #view-analytics textarea { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit; }
  #view-settings .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  #view-settings .btn-navy, #view-analytics .btn-navy {
    background:var(--navy); color:#fff; border:none; padding:10px 18px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer;
  }
  #view-settings .btn-navy:hover, #view-analytics .btn-navy:hover { background:var(--navy-light); }
  #view-settings .btn-ghost, #view-analytics .btn-ghost {
    background:transparent; color:var(--text-2); border:1px solid var(--border); padding:10px 18px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer;
  }
  #view-settings .btn-sm { padding:6px 14px; font-size:13px; }
  #view-settings .badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
  #view-settings .badge-app-gray  { background:#EEF1F4; color:var(--text-3); }
  #view-settings .badge-app-green  { background:#E3F4EA; color:var(--green); }
  #view-settings .mb16 { margin-bottom:16px; } #view-settings .mt12 { margin-top:12px; }
  #view-analytics .mt8 { margin-top:8px; } #view-analytics .mt16 { margin-top:16px; }
  #view-settings .alert { padding:10px 14px; border-radius:6px; font-size:14px; margin-top:8px; }
  #view-settings .alert-success { background:#E3F4EA; color:var(--green); border:1px solid #86efac; }
  #view-settings .alert-error   { background:#fef2f2; color:var(--red); border:1px solid #fca5a5; }
  #view-analytics .metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
  #view-analytics .metric-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; }
  #view-analytics .metric-label { font-size:13px; color:var(--text-3); }
  #view-analytics .metric-value { font-size:26px; font-weight:700; color:var(--navy); margin:6px 0; }
  #view-analytics .metric-change { font-size:13px; color:var(--text-3); }
  #view-analytics .metric-change.up { color:var(--green); }
  #view-analytics .chart-bar-wrap { display:flex; align-items:flex-end; gap:18px; height:130px; padding-top:10px; }
  #view-analytics .chart-bar-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; }
  #view-analytics .chart-bar { width:100%; max-width:48px; border-radius:6px 6px 0 0; }
  #view-analytics .chart-lbl { font-size:12px; color:var(--text-3); margin-top:8px; }


/* font-floor override v3 — universal 16px minimum, exceptions for headings */
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.modal-title) {
  font-size: 16px !important;
}
h1 { font-size: 32px !important; }
h2 { font-size: 26px !important; }
h3 { font-size: 20px !important; }
h4, h5, h6 { font-size: 18px !important; }
.modal-title { font-size: 24px !important; }

  /* Segoe UI universal font + body-text 14px (override block) */
  body, h1, h2, h3, h4, h5, h6, p, li, td, label, button, input, select, textarea, span, div, a {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  }
  body, p, li, td, label { font-size: 14px !important; }
  /* 2026-08-11: zoom moved from BODY to the app shell. Body-level zoom scaled the login's 100vh to 85% of the viewport (the white band Roddrick caught) and shrank its 64px logo to ~54px (the size mismatch he caught). The signed-in app keeps its designed density; the login renders at true 100%, identical to the Operator Portal. */
  #app-shell { zoom: 0.85; }

  /* 2026-08-11 (his ruling: Admin login text matches Operator). The
     font-floor override above clamps every non-heading element to 16px
     !important — Operator's headline is an <h1> (exempt), Admin's is a
     <div>, so the whole left panel rendered crushed. These #-anchored
     rules out-rank the floor and mirror Operator's login text exactly. */
  #login-screen .login-wordmark-text { font-size: 11px !important; }
  #login-screen .login-headline { font-size: 40px !important; font-weight: 700; line-height: 1.1; max-width: 420px; }
  #login-screen .login-headline em { color: var(--carolina); }
  #login-screen .login-sub { font-size: 14px !important; line-height: 1.8; color: rgba(255,255,255,.45); max-width: 400px; }
  #login-screen .login-stat-num { font-size: 28px !important; }
  #login-screen .login-stat-label { font-size: 10px !important; }
  #login-screen .login-legal { font-size: 11px !important; }
  #login-screen .login-form-eyebrow { font-size: 10px !important; }
  #login-screen .login-form-title { font-size: 30px !important; }
  #login-screen .login-form-sub { font-size: 13px !important; }

/* ── next extracted block ── */

/* F10 statute modal: self-contained form styling (dense 4-col grid) */
#sr-modal-overlay .modal { max-width: 740px; max-height: 88vh; overflow-y: auto; padding: 22px 26px; }
#sr-modal-overlay .form-group label { font-size: 11px; color: #8a8782; margin-bottom: 4px; display: block; font-weight: 600; }
#sr-modal-overlay input, #sr-modal-overlay select, #sr-modal-overlay textarea {
  width: 100%; font-size: 12.5px; padding: 7px 9px;
  border: 1px solid #d5d2cb; border-radius: 5px; background: #fbfaf8;
  color: #2b2b2b; font-family: inherit;
}
#sr-modal-overlay input:focus, #sr-modal-overlay select:focus, #sr-modal-overlay textarea:focus {
  outline: none; border-color: #2e5cb8; background: #fff;
  box-shadow: 0 0 0 3px rgba(46,92,184,.12);
}
#sr-modal-overlay textarea { line-height: 1.45; }
#sr-modal-overlay #sr-m-cite { min-height: 84px; }
#sr-modal-overlay #sr-m-notes { min-height: 52px; }
#sr-modal-overlay .sr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 14px; }
#sr-modal-overlay .sr-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e0db;
}
#sr-modal-overlay .sr-foot .sr-warn { font-size: 11px; color: #b8860b; line-height: 1.45; flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   2026-08-22 ADMIN RESKIN (his image-1 scheme, ruling "Proceed with
   the design change"): deep-navy shell + navy hero band, gold accents,
   colorful boxes, banner-highlighted card headers. An override layer,
   deliberately at the END of the file — every id, class, and dispatcher
   token the logic touches stays exactly as it was. Brand ruling
   2026-08-22: the Waypoint logo is the DEFAULT everywhere; an org's
   uploaded logo persists in its place.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --mc-navy-deep: #081A30;
  --mc-navy:      #0C2340;
  --mc-navy-2:    #123056;
  --mc-navy-3:    #1B3F6E;
  --mc-gold:      #1D86B5;
  --mc-gold-dk:   #15658A;
  --mc-line:      rgba(255,255,255,0.12);
  --bg: #EEF1F6;
}

/* shell: sidebar darker navy, gold-touched brand */
.sidebar { background: linear-gradient(180deg, var(--mc-navy-deep) 0%, #0A1F3C 100%) !important; }
.sidebar-logo { background: linear-gradient(135deg, var(--mc-gold), var(--mc-gold-dk)) !important; box-shadow: 0 2px 10px rgba(29,134,181,.35) !important; }
.sidebar-section-label { color: rgba(29,134,181,.55) !important; }
.nav-item.active { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; margin: 0 10px; padding: 9px 10px; color: #fff !important; }
.nav-item.active::before { display: none; }
.nav-badge { background: var(--mc-gold) !important; color: #081A30 !important; }

/* topbar joins the navy band: white serif title on navy */
.topbar { background: var(--mc-navy) !important; border-bottom: none !important; }
.topbar-title { color: #fff !important; }
.btn-icon { color: rgba(255,255,255,.75) !important; }
.btn-icon:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }

/* the hero band: navy runs down through each view's first region */
.main-content { background: linear-gradient(180deg, var(--mc-navy) 0, var(--mc-navy) 168px, var(--bg) 168px) !important; }

/* toolbar controls read on the band (gold primary, light input chips)
   The SEARCH BOX carried the same defect as the filter selects below it
   and is fixed the same way. He named the dropdowns, but this input sits
   beside them on the very toolbar he screenshotted, with white text in a
   near-transparent chip on the light ground — so a person searching the
   Platform Registry could not see what they were typing. Shipping the
   fix for one and not the other would have left half a bug on the screen
   he was looking at. */
.toolbar .search-box { background: #fff !important; border-color: var(--border-mid) !important; }
.toolbar .search-box input { color: #111 !important; }
.toolbar .search-box input::placeholder { color: #6B7280; }
.toolbar .search-box svg { color: #6B7280 !important; }
/* HIS CATCH 2026-08-30, Platform Registry in frame: "The dropdowns for
   All Clients and All Types are white washed behind their white
   background. Change the drop down text to black."

   The rule this replaces was written for the navy band, and the band is
   only the first 168px of .main-content (see the gradient above). Every
   toolbar that sits BELOW it — Platform Registry's among them — was
   rendering a near-transparent chip with WHITE text on the light page
   ground. Unreadable, and invisible to anyone testing on a view whose
   toolbar happens to sit high enough.

   A translucent chip cannot be right on both grounds, so this stops
   trying: a solid light chip with black text reads on the navy band AND
   on the page below it. The `option` rule is not redundant — several
   browsers paint the popup list with the select's own colors, so a
   select fixed without it still drops open white-on-white. */
.toolbar .filter-select { background-color: #fff !important; border-color: var(--border-mid) !important; color: #111 !important; }
.toolbar .filter-select option { background-color: #fff; color: #111; }
.toolbar .btn-navy { background: var(--mc-gold) !important; color: #081A30 !important; font-weight: 700 !important; }
.toolbar .btn-outline { border-color: rgba(255,255,255,.4) !important; color: #fff !important; }
/* ORD-0073 (his catch 2026-09-04, the Billing Dashboard in frame: "As is
   now there are widgets to add. I was only able to remove them"): the
   portal-dashboard toolbars sit BELOW the band — the lead card takes
   the band's 168px — so the rule above painted + Add Widget and Reset
   Layout white on the light page. The widget doors keep the dark text
   of a light card; the render harness (scratch pw_dash.js) measured
   rgb(255,255,255) on rgb(238,241,246) before this rule. */
/* ORD-0055 slab 3 (his 2026-09-06 screenshot: "There is no widget add"):
   the Claims Portal's dashboard toolbar is the claims loader's — its
   + Add Widget and Reset Layout carry dash* tokens, not pdash*, and the
   rule above painted them white on the light page too. Both engines'
   widget doors wear the light card's dark text. */
.toolbar .btn-outline[data-act^="pdash"] { background: #fff !important; border-color: var(--border-mid) !important; color: var(--navy) !important; }
.toolbar .btn-outline[data-act^="dash"] { background: #fff !important; border-color: var(--border-mid) !important; color: var(--navy) !important; }
.toolbar .btn-ghost { color: rgba(255,255,255,.8) !important; }

/* dashboard stat tiles: the drawn dark KPI panels — gold caps labels,
   big white numbers, thin translucent rules */
.stat-card { background: rgba(255,255,255,.05) !important; border: 1px solid var(--mc-line) !important; box-shadow: none !important; }
.stat-card .stat-val { color: #fff !important; }
.stat-card .stat-label { color: var(--mc-gold) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; font-weight: 700 !important; }
.stat-icon { background: rgba(255,255,255,.08) !important; color: var(--mc-gold) !important; }

/* cards: banner-highlighted headers, colorful accent rotation */
.card { border: none !important; box-shadow: 0 2px 10px rgba(8,26,48,.10) !important; overflow: hidden; }
/* BRIGHT CYAN, his order 2026-08-28 with the My Agency screenshot in
   frame: "For the Banners that blend in with the Navy header back
   ground in all portals, I like Bright cyan."

   This is the same complaint as 2026-08-22 (see the table-head note
   below), one surface further in. That round fixed the table head and
   left the card banner navy, so the defect survived on the one band
   that actually touches the page bar.

   Why it blended: this banner ran #0C2340 -> #1B3F6E, which is two of
   the page bar's own three colours. Same colours, different gradient
   angle — invisible across a 4px gap, so the first card of every group
   dissolved into the bar while cards 2 and 3 survived on their own
   rotation hues. That is why some cards looked fine and the top one
   did not.

   Why it starts dark. His literal pick was #0891B2 -> #38BDF8. White on
   #0891B2 measures 3.68:1 and the card title is 13px semibold — normal
   text, needing 4.5:1. The title sits at the LEFT, on the start colour,
   so shipping the pick literally would have made every title harder to
   read than the navy it replaced (15.79:1). The start moves to #0E7490
   (5.36:1) and his bright end is kept intact: the bar still reads
   bright cyan, and the words on it still read. */
.card-header { background: linear-gradient(135deg, #0E7490, #38BDF8) !important; border-bottom: none !important; }
.card-header .card-title { color: #fff !important; }
.card-header .btn-navy { background: var(--mc-gold) !important; color: #081A30 !important; }
/* These two sit at the RIGHT of the banner — "View all ->" on Recent
   Activity is exactly there — which is now the BRIGHT end. White on
   #38BDF8 is 2.14:1, so they stop borrowing the banner as a background
   and carry their own chip. It composites to at least 5.9:1 against the
   brightest colour any of the three gradients reaches. */
.card-header .btn-outline { background: rgba(8,26,48,.55) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.card-header .btn-ghost { background: rgba(8,26,48,.55) !important; color: #fff !important; }
/* the colorful rotation: successive cards carry different banner hues.
   All three move into the cyan family rather than collapsing onto one
   colour — the rotation is what stopped cards 2 and 3 vanishing, and a
   page of cards still has to read as a list rather than a wall. */
.view .card:nth-of-type(3n+2) > .card-header { background: linear-gradient(135deg, #06657E, #22D3EE) !important; }
/* TEAL, not gold — his order 2026-08-23 with the Loss Causes banner in
   frame: "Lets remove this color from the platform and replace it with
   teal" / "When I say platform I mean all platforms".
   This was the ONLY warm banner gradient in the entire frontend, and it
   lives in the SHARED sheet, so one edit reaches every portal that
   loads it: Organization, Claims, Underwriting and Agent. The Waypoint
   Center (mcs_v8), Operator Portal, tools suite, invoice portal and
   Personnel never carried it — censused, not assumed.
   2026-08-28: moved again, from that teal into the cyan family, so the
   third rotation step matches the other two. */
.view .card:nth-of-type(3n)   > .card-header { background: linear-gradient(135deg, #155E75, #06B6D4) !important; }

/* moved pages (Settings, Analytics): their titles become banners too */
#view-settings .card, #view-analytics .card { padding: 0 !important; overflow: hidden; }
#view-settings .card > *:not(.card-title), #view-analytics .card > *:not(.card-title) { margin-left: 22px !important; margin-right: 22px !important; }
#view-settings .card > *:last-child, #view-analytics .card > *:last-child { margin-bottom: 22px; }
/* These titles ARE banners (white text on a full-width painted band),
   they carried the same navy pair, and they sit on Settings and
   Analytics directly under the page bar — so they blended for exactly
   the same reason and move with the rest. */
#view-settings .card-title, #view-analytics .card-title {
  background: linear-gradient(135deg, #0E7490, #38BDF8);
  color: #fff !important; padding: 14px 22px; margin: 0 0 16px 0 !important;
}
#view-settings .grid2 > .card .card-title, #view-analytics .grid2 > .card .card-title { margin-top: 0; }
/* ORD-0053 (2026-09-03), his rule for every box, first on this page: a
   gap between boxes BY RULE (the Money rules cards carried hand-written
   inline margins on four of five and none on the first), and every card
   body kept inside the box — the inset above now beats an inline margin
   shorthand, which is what pulled the Money rules paragraphs to the
   edge. The Financial Data tiles live inside their own banded card. */
#view-analytics .fda-pane > .card, #view-analytics .fda-pane > .grid2 { margin-bottom: 16px; }
#view-analytics .card > .metrics-row { margin-top: 0; }
#view-analytics .metric-card { border-top: 4px solid var(--mc-navy-3) !important; }
#view-analytics .metric-card:nth-child(2) { border-top-color: #2478B9 !important; }
#view-analytics .metric-card:nth-child(3) { border-top-color: var(--mc-gold) !important; }
#view-analytics .metric-card:nth-child(4) { border-top-color: #2D7D4F !important; }

/* ORD-0053 slab 2 (2026-09-03), his "apply this exact same principal on
   every page in every portal": ONE head class on every admin-shell
   page. A card whose first child is .card-title wears the AI Portfolio
   Analysis band edge to edge (padding 0 on the card, the band's own
   padding), keeps every other child 22px inside, and sits 16px above
   the next box. The plain bold heads, the flex rows that carried a head
   and its buttons, the five .cpv-secline heads and the hand-rolled
   Licenses panel all became .card-title; the 41 inline card margins
   became the one gap rule. Controls that ride on the band take the
   same chips the .card-header controls already wear; words that were
   navy or muted on white turn white on the band. */
.view .card > .card-title { background: linear-gradient(135deg, #0E7490, #38BDF8); color: #fff !important; padding: 14px 22px; margin: 0 0 16px 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; font-size: 14px; font-weight: 700; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.view .card:has(> .card-title) { padding: 0 !important; }
.view .card:has(> .card-title) > *:not(.card-title):not(.card-body) { margin-left: 22px !important; margin-right: 22px !important; }
.view .card:has(> .card-title) > *:last-child:not(.card-title) { margin-bottom: 22px; }
.view .card, #dash-grid { margin-bottom: 16px; }
.grid2 > .card, .metrics-row > .card, #integrations-list > .card, .ut-shelf > .card, #dash-grid > .card, #pdash-grid > .card { margin-bottom: 0; }
.view .card > .card-title [style*="color:var(--navy)"], .view .card > .card-title [style*="color:#1a2740"], .view .card > .card-title h3, .view .card > .card-title strong, .view .card > .card-title .ut-name { color: #fff !important; }
.view .card > .card-title [style*="color:var(--text-muted)"], .view .card > .card-title [style*="color:var(--text-3)"], .view .card > .card-title [style*="color:#888"], .view .card > .card-title .ut-kind { color: rgba(255,255,255,.82) !important; }
.view .card > .card-title h3 { margin: 0; font-size: 14px !important; font-weight: 700; }
.view .card > .card-title a { color: #fff; text-decoration: underline; }
.view .card > .card-title label { color: rgba(255,255,255,.9); }
.view .card > .card-title .btn-navy { background: var(--mc-gold) !important; color: #081A30 !important; }
.view .card > .card-title [style*="background:var(--navy)"] { background: var(--mc-gold) !important; color: #081A30 !important; }
.view .card > .card-title .btn-outline { background: rgba(8,26,48,.55) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.view .card > .card-title .btn-ghost { background: rgba(8,26,48,.55) !important; color: #fff !important; }
.view .card > .card-title [style*="background:#fff"] { background: rgba(8,26,48,.55) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.view .card > .card-title .form-select, .view .card > .card-title .filter-select, .view .card > .card-title .form-input, .view .card > .card-title input, .view .card > .card-title select { background: #fff !important; color: #111 !important; border-color: rgba(255,255,255,.55) !important; }

/* platform cards join the colorful family */
.platform-card { border-top: 4px solid var(--mc-navy-3) !important; }
.platform-grid .platform-card:nth-child(3n+2) { border-top-color: #2478B9 !important; }
.platform-grid .platform-card:nth-child(3n)   { border-top-color: var(--mc-gold) !important; }
.platform-icon { background: linear-gradient(135deg, var(--mc-navy), var(--mc-navy-3)) !important; }

/* tables: BLUE banner header rows inside cards (his round 2026-08-22:
   the navy banners vanished against the navy band on Clients,
   Deployments, Invoicing, Users, and Permissions - the blue gradient
   reads on the band AND on white card bodies). Gradient on the ROW,
   cells transparent, so it paints as one banner.

   2026-08-28: this row moves into cyan with the banners — otherwise a
   card would show a cyan banner above a blue table head — but it does
   NOT take a bright end, and the difference is not cosmetic. A card
   banner carries its title at the LEFT only, so its right end is free
   to be bright. A table head carries white column labels across its
   ENTIRE width, so its right end is read too. The banner's #22D3EE
   would put the rightmost column label at 1.81:1. This pair is
   6.62:1 at the left and 5.36:1 at the right, so every column heading
   reads no matter where it falls. (The old blue ended at 4.71:1, which
   was already close to the floor.) */
.card thead tr { background: linear-gradient(135deg, #06657E, #0E7490) !important; }
.card thead th { background: transparent !important; color: #fff !important; border-bottom: none !important; }

/* primary action buttons on the light zone go gold too (his sheet) */
.view .btn-navy { background: var(--mc-navy); }

/* his ruling 2026-08-22: the Waypoint logo is the DEFAULT brand;
   an org upload persists in its place. The logo chip stays. */

/* Option A (his pick 2026-08-22, from the rendered options): the KPI
   tiles go SOLID navy - opaque wherever the band's edge falls, so the
   gold labels never wash out on the light zone. And the dashboard's
   Add Widget / Reset Layout buttons stand the same height as the
   From/To/Client/Segment controls, bottom-aligned with them. */
#view-dashboard .toolbar { align-items: flex-end; }
#view-dashboard .toolbar .btn-outline.btn-sm { height: 41px; padding: 0 18px; display: inline-flex; align-items: center; font-size: 13px; }
.stat-card { background: #10294A !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 10px !important; }

/* Bordereaux tabs + band-zone toolbar text (his round 2026-08-22:
   "Programs wording is hard to see"): the tab buttons ride the band,
   so they go light with a GOLD underline on the active tab (the
   dispatcher sets an inline navy border - the color override wins);
   inline-navy toolbar titles and their muted spans flip light too. */
#view-bordereaux .btn-ghost { color: rgba(255,255,255,.75) !important; border-bottom-color: var(--mc-gold) !important; }
#view-bordereaux .btn-ghost:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.toolbar [style*="color:var(--navy)"] { color: #fff !important; }
.toolbar [style*="color:var(--text-muted)"] { color: rgba(255,255,255,.68) !important; }

/* HIS ROUNDS 2026-08-22 (batch): titles, band spacing, Analytics Suite */
/* 1. every page title was clamped small by the 16px font-floor - this
   selector outranks the floor's *:not() chain and restores presence */
.topbar .topbar-title { font-size: 26px !important; }
/* 2. (RETIRED 2026-09-03 by ORD-0053 slab 4, his F1 ruling: "I wante to
   keep the User Management transition banner, then I want the content
   to start where the search section starts on image 1. I want to keep
   the thick banner under the top transition bar.") The 64px first-card
   offsets on Contacts, Policy Administration, Rating & Billing and
   Underwriting, and the 142px view padding on Financial Data, Settings
   and Upload Templates, all pushed the first block BELOW the band; every
   page now starts ON the band at the same line as User Management's
   search row. A page that opens with words (Financial Data, Upload
   Templates, the Claims Portal's Settings) carries them in white on the
   band; the Financial Data tabs do the same in the Claims accent sheet. */
.view > .page-header:first-child .page-title { color: #fff !important; }
.view > .page-header:first-child .page-sub { color: rgba(255,255,255,.78) !important; }
#view-templates .page-header { margin-bottom: 18px; }
#view-templates .page-title { font-size: 24px; font-weight: 700; color: var(--navy); }
#view-templates .page-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
/* 3. Analytics Suite (his items): the role switcher's LIGHT pill made
   the inactive tabs unreadable on the band - the pill goes dark; the
   summary tiles go CAROLINA BLUE with white text (his color call);
   the chart cards wear banner titles like the rest of the portal */
#ans-roleswitch { background: rgba(255,255,255,.10) !important; }
#view-analytics-suite .stat-card { background: linear-gradient(135deg, #4A90C4, #6EB0DF) !important; border: none !important; }
#view-analytics-suite .stat-card div { color: #fff !important; }
/* :not(.card-body) is LOAD-BEARING. These three rules paint a card's
   first child as the navy banner title. A card that wraps its content
   in a .card-body instead of leading with a title div hands that
   wrapper to this selector, and the whole panel turns navy with its
   text left dark — unreadable, and it looks like missing data rather
   than a style bug. That shipped on the Actuary development table and
   he caught it on screen 2026-08-23. The guard means the worst a
   mis-shaped card can do now is miss its banner. */
#view-analytics-suite .card > div:first-child:not(.card-body) { background: linear-gradient(135deg, #0E7490, #38BDF8); color: #fff !important; margin: -12px -12px 10px; padding: 10px 14px; border-radius: 12px 12px 0 0; }
/* The subtitle was 75% white, which read 9.37:1 on navy and only
   3.74:1 on the cyan start — under the 4.5 floor. At 90% it is 4.67:1
   and still reads as the quieter line. */
#view-analytics-suite .card > div:first-child:not(.card-body) span { color: rgba(255,255,255,.90) !important; }
/* Right-aligned, so it lands on the bright end: same chip as the card
   banner's controls, for the same measured reason. */
#view-analytics-suite .card > div:first-child:not(.card-body) .btn-outline { background: rgba(8,26,48,.55) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
/* ...and the development table's own body text, stated rather than
   inherited, so no future container can leave it dark-on-dark. Body
   cells ONLY: the header row already wears the portal's blue band with
   white type, and forcing dark text there would trade one unreadable
   row for another. */
#ans-act-body table tbody td { color: var(--text) !important; }

/* ══ RULED 2026-08-26 — his Waypoint Center picks, applied fleet-wide ══
   From the "Sidebar and Top Bar" canvas he picked: top bar "1 only"
   (the ombre — deep navy sweeping to a lighter navy, no texture, no
   accent edge) and sidebar "Option D but with the line goes all the
   way under the title" (no pill, no tint, no rail — bright title with
   a 2px underline the full width of the title). Then: "Apply those
   top bar and side bar changes to all portals."
   This shell serves Admin, Claims, Underwriting, Agent and Billing —
   the ombre runs on the shell's own navy family, and the underline
   wears each portal's own accent (--mc-gold: Carolina, traditional
   blue, green, teal, or the Admin steel-blue), so the segment
   signatures survive the restyle. */
.topbar { background: linear-gradient(90deg, var(--mc-navy) 0%, var(--mc-navy-2) 55%, var(--mc-navy-3) 100%) !important; }
.nav-item.active {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 9px 20px !important; /* the frosted pill's inset goes with the pill */
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--mc-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.nav-item.active::before { display: none !important; }

/* RULED 2026-08-28, his words: "there is a lot of data on that page and
   Im not sure the box flow in an easy to read format." The Settings
   page stacks a dozen full-bleed sections, so on a wide monitor every
   sentence ran the entire width of the screen and the cards lost any
   sense of being a column you read down. A reading measure fixed the
   flow without moving a single control: the sections kept their order
   and their content, they just stopped stretching. Scoped to Settings —
   the data-dense pages (rosters, claim tables) still want the width.
   RE-RULED 2026-09-04 (ORD-0058), his words on the Admin Portal Settings
   page: "width is too narrow and does not expand horizontal to fit the
   page." The 1180px cap is lifted: Settings fills the page on every
   portal that shares this sheet, the way the Claims Portal's own
   sheet already had it (ORD-0050 ruling 6). Both rulings are kept here
   so the next reader sees the reversal and its date. */
#view-settings {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
#view-settings > .card,
#view-settings > .page-header { margin-bottom: 16px; }

/* ── Collapsible sidebar sections ──────────────────────────────────────
   HIS ORDER 2026-08-29: "The collapsible and expandable function only
   landed in the claims platform. That feature needs to be in every
   platform."

   This sheet is loaded by five portals — Admin, Claims, Underwriting,
   Producer and Billing — so these rules land on all five at once. The
   engine is /mcs_sidebar_collapse.js; it walks forward from a header to
   the next header, because these portals have no wrapper element around
   a section the way mcs_v8 does.

   WHY THE HIDE RULE SHOUTS. #309 shipped with perfect JavaScript and a
   dead feature: its hide rule lost the cascade to a blunter rule
   carrying !important, and seven passing tests never noticed because
   they asserted the rule EXISTED. Checked here before writing: no rule
   in this sheet sets `display` on .nav-item at all, so (0,3,0)+important
   wins with room to spare — and the suite now checks that it WINS. */
.sidebar .sidebar-section-label[role="button"] {
  cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; user-select: none;
}
.sidebar .sidebar-section-label[role="button"]:hover { color: rgba(255,255,255,.55); }
.sidebar .sidebar-section-label[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #38BDF8); outline-offset: -2px;
}
.sidebar .sidebar-section-label[role="button"]::after {
  content: "\25BE"; font-size: 11px; line-height: 1; opacity: .65;
  transition: transform .15s ease;
}
.sidebar .sidebar-section-label[aria-expanded="false"]::after { transform: rotate(-90deg); }

/* THE RULE THAT ACTUALLY HIDES THE ROWS. */
.sidebar .nav-item.sb-row-collapsed { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sidebar .sidebar-section-label[role="button"]::after { transition: none; }
}


/* ── ORD-0050 (RULED 2026-09-03): the Claims Portal Vendors page in four
   tabs — the tab shell, count pills, section lines, the mini table,
   settings rows, the segmented control, chips, approval cards with
   old-beside-new deltas, and the side-by-side duplicate grid. Also the
   ORD-0049 vendor form's own classes (cpva-*), which had shipped
   unstyled. ── */
.cpv-tabs{display:flex;flex-wrap:wrap;gap:0}
.cpv-tab{padding:11px 16px;font-size:13px;font-weight:500;color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.cpv-tab:hover{color:var(--navy)}
.cpv-tab.on{color:var(--navy);border-bottom-color:var(--carolina,#4B9CD3);font-weight:600}
.cpv-pill,.cpva-pill{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--border);color:var(--text-muted);white-space:nowrap;vertical-align:middle}
.cpv-pill.warn{background:#FFF4DA;color:#9A6A12}
.cpv-pill.ok{background:#EDF6F1;color:#2F7A55}
.cpv-pill.chg{background:var(--navy);color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.cpv-secline{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-bottom:5px;border-bottom:1px solid var(--border);margin-bottom:6px}
table.cpv-mini{width:100%;border-collapse:collapse;font-size:13px}
table.cpv-mini th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:0 8px 6px 0;border-bottom:1px solid var(--border);white-space:nowrap}
table.cpv-mini td{padding:7px 8px 7px 0;border-bottom:1px solid var(--border);vertical-align:middle}
table.cpv-mini td.num,table.cpv-mini th.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;padding-right:0}
.cpv-setting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--border)}
.cpv-setting:last-of-type{border-bottom:none}
.cpv-s-name{font-size:13.5px;font-weight:600}
.cpv-s-desc{font-size:12px;color:var(--text-muted);margin-top:3px;max-width:70ch}
.cpv-s-val{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
@media (max-width:700px){.cpv-setting{grid-template-columns:1fr}.cpv-s-val{align-items:flex-start;text-align:left}}
.cpv-seg{display:inline-flex;border:1.5px solid var(--border-mid,#D1CFC9);border-radius:6px;overflow:hidden}
.cpv-seg a{padding:6px 14px;font-size:12.5px;font-weight:500;color:var(--text-muted);text-decoration:none}
.cpv-seg a.on{background:var(--navy);color:#fff}
.cpv-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border:1px solid var(--border-mid,#D1CFC9);border-radius:999px;background:#fff}
.cpv-chip .x{color:var(--text-muted);text-decoration:none;font-size:14px;line-height:1}
.cpv-approval{border:1px solid var(--border);border-radius:8px;padding:12px 13px;display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.cpv-delta{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) minmax(0,1fr);gap:5px 12px;font-size:12.5px;align-items:baseline}
.cpv-dk{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.cpv-old{color:var(--text-muted);text-decoration:line-through}
.cpv-new{font-weight:500}
@media (max-width:640px){.cpv-delta{grid-template-columns:1fr}}
.cpv-dupe{display:grid;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cpv-dupe>div{padding:11px 13px;border-right:1px solid var(--border)}
.cpv-dupe>div:last-child{border-right:none}
@media (max-width:640px){.cpv-dupe{grid-template-columns:1fr !important}.cpv-dupe>div{border-right:none;border-bottom:1px solid var(--border)}}
.cpv-dn{font-weight:600;font-size:13px;margin-bottom:5px}
.cpv-dl{font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.cpv-dl b{font-weight:500;color:var(--text)}
.cpv-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px 14px}
.cpv-fl{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.cpva-sec{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-bottom:5px;border-bottom:1px solid var(--border);margin-bottom:8px}
.cpva-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.cpva-tab{color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.cpva-tab.on{color:var(--navy);border-bottom-color:var(--carolina,#4B9CD3);font-weight:600}
.cpva-kind{color:var(--text-muted)}
.cpva-kind.on{background:var(--navy);color:#fff}

/* ══ ORD-0050 slab 4 — ruling 8 (2026-09-03): the template shelf (v=15). Each
   card states what it feeds and where the filled sheet goes, its
   options carry labels, and a press reports on the card that was
   pressed. Shared sheet: the shelf is on the Claims and Underwriting
   Portals alike (one partial, two subtractions). */
#view-templates .ut-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 1000px) { #view-templates .ut-shelf { grid-template-columns: 1fr; } }
#view-templates .ut-shelf > .card { margin: 0 !important; }
#view-templates .ut-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#view-templates .ut-name { font-weight: 700; font-size: 15px; color: var(--navy); }
#view-templates .ut-kind { font-size: 11.5px; letter-spacing: .04em; color: var(--text-muted); }
#view-templates .ut-feeds { font-size: 13px; color: var(--text); margin: 8px 0 0; line-height: 1.5; }
#view-templates .ut-how { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5; }
#view-templates .ut-opts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
#view-templates .ut-opt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 180px; }
#view-templates .ut-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
#view-templates .ut-hint { font-weight: 400; letter-spacing: 0; text-transform: none; }
#view-templates .ut-opt select, #view-templates .ut-opt input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; }
#view-templates .ut-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
#view-templates .ut-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; }
#view-templates .ut-btn-primary { border-color: transparent; background: var(--navy); color: #fff; font-weight: 600; }
#view-templates .ut-note { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; min-height: 1.2em; }
#view-templates .ut-note.ok { color: var(--success); }
#view-templates .ut-note.err { color: var(--danger); }

/* ── ORD-0103: My Profile on every portal (the Waypoint Center's page, mirrored) ── */
#view-profile .prof-avatar { width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0; }
#view-profile .prof-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
#view-profile .prof-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px; }
#view-profile .prof-value { font-size:14px;color:var(--text); }
#view-profile .prof-dot { width:12px;height:12px;border-radius:50%;flex-shrink:0;display:inline-block;position:relative; }
#view-profile .prof-dot.prof-dnd::after { content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:1.8px;background:#fff;border-radius:2px; }
#view-profile .prof-dot.prof-offline { background:#fff;box-shadow:inset 0 0 0 2.5px #9CA3AF; }
#view-profile .prof-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; }
#view-profile .prof-opt:hover { background:var(--blue-pale); }
#view-profile .prof-opt.prof-selected { background:#F0F6FF; }
#view-profile .prof-org-tab { padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; }
#view-profile .prof-org-tab.prof-org-tab-active { color:var(--navy);border-bottom-color:var(--navy); }
#view-profile .prof-ct { display:inline-block;margin-left:6px;font-size:11px;background:#faf8f3;border:1px solid var(--border);border-radius:10px;padding:0 7px;color:var(--text-muted);font-weight:600; }
#view-profile .prof-person { display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff; }
#view-profile .prof-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); }
#view-profile .prof-nm { font-weight:600;font-size:14px;color:var(--text); }
#view-profile .prof-meta { font-size:12px;color:var(--text-muted);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
#view-profile .prof-empid { font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted); }
#view-profile .prof-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); }
#view-profile .prof-grid-people { display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:12px; }
#view-profile .prof-lbl { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin:16px 0 2px; }
#view-profile .prof-link { width:2px;height:20px;background:var(--border);margin-left:34px; }
#view-profile .prof-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; }
#view-profile .prof-org-empty { font-size:13px;color:var(--text-muted);text-align:center;padding:26px 18px;line-height:1.6;border:1px dashed var(--border);border-radius:10px;background:#faf8f3; }
#view-profile .prof-mgr-group { border:1px solid var(--border);border-radius:11px;margin-top:12px;overflow:hidden; }
#view-profile .prof-mgr-head { display:flex;align-items:center;gap:11px;padding:12px 15px;background:#faf8f3;border-bottom:1px solid var(--border);cursor:pointer; }
#view-profile .prof-mgr-body { padding:13px 15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;background:#fff; }
#view-profile .prof-mini { display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:9px; }
#view-profile .prof-mini .prof-av { width:30px;height:30px;font-size:12px; }

/* 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-mid); 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 #admin-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-muted); 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: white on the navy bar, the accent on
   hover, the carolina focus ring. body.sidebar-hidden takes the rail off the
   page and gives the content its width. */
/* ORD-0138 (2026-09-10): the control he sent a picture of — a small round
   white face carrying a chevron pair, centred ON the column's right edge
   below the brand block, so it reads as belonging to the boundary rather
   than sitting inside the panel. Same one button, same token, same spoken
   label; only its face and its place moved. */

/* ORD-0139 (2026-09-10): collapsed is a RAIL THAT KEEPS EVERY ENTRY, drawn
   as its icon alone — not the empty bar ORD-0114 left. A person who
   collapses the column to win screen width keeps every way of navigating.
   A section heading has no icon of its own, so it becomes a rule rather
   than an invented glyph; the entry's own words fly out on hover or focus
   (mcs_sidebar_collapse.js stamps them and draws the flyout on the body,
   because this column scrolls and would clip anything drawn inside it). */
body.sidebar-hidden { --sidebar-w: 64px; }
body.sidebar-hidden .sidebar-header { padding: 14px 6px 12px; }
body.sidebar-hidden .sidebar-brand { justify-content: center; gap: 0; }
body.sidebar-hidden .sidebar-brand-text { display: none; }
body.sidebar-hidden .sidebar-logo img { height: 30px !important; max-width: 46px !important; padding: 3px 5px !important; }
/* ORD-0145 (2026-09-10). HIS WORDS: "After clicking the collapse button, we
   only need to see the icons and not the words because it looks bad. Upon
   expanding the words for each icon can come back."

   MEASURED IN A REAL BROWSER: on the six portals this sheet paints, the rail
   collapsed to 54px and every row still computed at 16px, so each label
   wrapped onto three and four lines inside a 54px column. The cause is one
   missing word: the type floor higher up this sheet ends `font-size: 16px
   !important`, and an ordinary `font-size: 0` cannot beat an !important
   however specific or however late it is written. The Waypoint Center and
   the Operator Portal already said !important here, which is why the rail
   looked right on those two and wrong on his.

   The icon is an <svg> sized by its width and height attributes, so zeroing
   the row's type hides the words and leaves the icon exactly as it was. */
body.sidebar-hidden .sidebar .nav-item { font-size: 0 !important; line-height: 0 !important; justify-content: center; padding: 10px 0; margin: 2px 8px; gap: 0; white-space: nowrap; overflow: hidden; }
body.sidebar-hidden .sidebar .nav-item > svg { flex-shrink: 0; }
body.sidebar-hidden .sidebar .nav-badge { display: none !important; }
body.sidebar-hidden .sidebar .sidebar-section-label { font-size: 0 !important; line-height: 0 !important; height: 1px; padding: 0; margin: 12px 14px; background: rgba(255,255,255,.14); overflow: hidden; }
body.sidebar-hidden .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-hidden .user-info, body.sidebar-hidden .user-name, body.sidebar-hidden .user-role { display: none; }

/* ORD-0146 (2026-09-10). HIS WORDS, with a picture of the Administrator
   Portal collapsed: "The collapes icons look good, but the logo and header
   title do not look good."

   MEASURED IN A REAL BROWSER on all five portals this sheet paints, the rail
   collapsed and the head read element by element: the rail is 54px wide and
   three things stand outside it — an unclassed <div> reaching 77px, the
   <img> inside it reaching 69px, and a .sidebar-brand-tag reaching as far as
   92px. That last one is the portal's name, which was supposed to be gone.
   The logo painting to 77px is what covers the first letters of the page
   title on the bar beside it, exactly as his picture shows.

   THE CAUSE, and it is why the two rules above this one never bit: the head
   in the page's own markup is a .sidebar-logo holding an <img>, with the
   portal name inside .sidebar-brand-text — and both of those rules name
   those classes. But wpBrandApply (mcs_admin_portal.js) replaces the whole
   of .sidebar-brand at run time with markup that carries neither class: a
   bare <div> around an <img style="height:60px;max-width:200px">, and the
   name in a .sidebar-brand-tag standing on its own. The sheet was dressing
   markup that is not on the page by the time a person can click anything.

   Two things are done. The engine now writes the same class names the sheet
   already governs (one head, one set of rules, in mcs_admin_portal.js), and
   the rules below reach the brand by its SHAPE rather than by a class an
   engine may or may not write — any image inside the brand, and the name
   whichever wrapper it arrives in. !important because that engine writes its
   sizes inline, and an inline size beats an ordinary rule.

   The head is also clipped. .sidebar-header, not .sidebar: the collapse
   control is a child of the column and deliberately hangs 13px outside it,
   so clipping the column would cut the control off. Clipping the head means
   nothing in the brand can ever paint across the page again, whatever a
   later engine writes there. */
body.sidebar-hidden .sidebar .sidebar-header { overflow: hidden !important; }
body.sidebar-hidden .sidebar .sidebar-brand { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; }
body.sidebar-hidden .sidebar .sidebar-brand > * { max-width: 46px !important; margin: 0 !important; }
body.sidebar-hidden .sidebar .sidebar-brand img { height: 26px !important; max-width: 38px !important; width: auto !important; padding: 0 !important; display: block !important; }
body.sidebar-hidden .sidebar .sidebar-logo,
body.sidebar-hidden .sidebar .sidebar-brand > div:has(> img) { padding: 3px 4px !important; box-shadow: none !important; }
body.sidebar-hidden .sidebar .sidebar-brand-text,
body.sidebar-hidden .sidebar .sidebar-brand-name,
body.sidebar-hidden .sidebar .sidebar-brand-tag { display: none !important; }

/* 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; }

/* ORD-0116 (2026-09-09): the dashboard boxes as the schema he approved — the
   notice as a banner above the grid, a strip of one-number tiles, rows of
   equal-height cards with the facts above a chart slot at the bottom, a wide
   card for a table with its chart beside it, and words in the slot when there
   is nothing to chart. */
#pdash-grid, #dash-grid { align-items: stretch !important; }
#pdash-grid > .card, #dash-grid > .card { display: flex; flex-direction: column; min-width: 0; }
.pd-card > .card-title { flex: 0 0 auto; }
.pd-body { flex: 1 1 auto; min-width: 0; }
.pd-slot { margin-top: auto; padding-top: 8px; min-width: 0; }
.pd-wide { grid-column: span 2; }
.pd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; flex: 1 1 auto; }
.pd-split > .pd-slot { margin-top: 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-muted); text-align: center; padding: 0 18px; }
.pd-notice { font-size: 12.5px; color: var(--text-muted); background: var(--bg-card, #fff); border: 1px solid var(--border); border-left: 4px solid var(--carolina); border-radius: 8px; padding: 8px 14px; margin: 0 0 12px; }
.pd-notice[hidden], .pd-kpis[hidden] { display: none; }
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.pd-kpi { background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-height: 78px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow); }
.pd-kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pd-kpi .v { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; margin-top: 4px; }
.pd-kpi .s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 900px) { .pd-wide { grid-column: auto; } .pd-split { grid-template-columns: 1fr; } }

/* ─── ORD-0140: A DROPPED-OPEN LIST STATES ITS OWN COLOURS ─────
   HIS WORDS (2026-09-10): "When selecting an option on this page in the
   top blue bar the selected drop down turns navy making it impossible to
   see the box wording. Keep it white ... Check every portal and every
   drop down."

   MEASURED IN A REAL BROWSER before anything was changed: of the 154
   dropdowns on the seven portals, 107 had option lists with no colours
   of their own — every one of them carrying DARK words (navy
   rgb(11,31,58), rgb(26,26,46), #111, black). A browser paints the open
   list, and the chosen row inside it, with the browser's own highlight
   when the page has not said otherwise; a dark word on that dark
   highlight is the wording he could not read.

   The narrow fix was already here for one family (.toolbar
   .filter-select option, ORD-0067). This says it for every select on
   every page, once, WITHOUT !important — so the two families that
   already state their own readable colours keep them. */
select option { background-color: #ffffff; color: #111111; }
select option:checked { background-color: #EEF1F6; color: #0B1F3A; }
select option:disabled { color: #8A93A2; }

/* ─── ORD-0143: THE PORTAL ACCESS CARD IS WIDE, NOT LONG ──────────────
   HIS WORDS (2026-09-10), with a picture of the card open on the
   Administrator Portal: "Change the size of this tile. Make it wider
   instead of longer".

   It was one 520px column carrying eight stacked fields — User, Platform,
   nine portal tick boxes, the switcher line, Role, and a scrolling report
   list — so it ran past the bottom of the window and the report list got
   its own inner scrollbar inside an already-scrolling card. Two scrollbars
   on one card is the tell that a column is doing a page's job.

   The card is now 940px and its body is two columns: the four short
   choices down the left, the two long lists down the right. Nothing moves
   in the markup — the same fields in the same order in the DOM, placed by
   the sheet — so every handler, every id and every save keeps working
   exactly as it did. Below 900px it falls back to the single column it
   was, because two columns in a phone's width is longer, not wider. */
#modal-grant-access .modal { max-width: 940px; }
#modal-grant-access .modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px;
  align-items: start;
}
#modal-grant-access .modal-body > * { min-width: 0; }
#modal-grant-access .modal-body > *:has(> #grant-user)     { grid-column: 1; grid-row: 1; }
#modal-grant-access .modal-body > *:has(> #grant-platform) { grid-column: 1; grid-row: 2; }
#modal-grant-access .modal-body > *:has(> #grant-role)     { grid-column: 1; grid-row: 3; }
#modal-grant-access #grant-switcher-group                  { grid-column: 1; grid-row: 4; }
#modal-grant-access .modal-body > *:has(> #grant-portal-group) { grid-column: 2; grid-row: 1 / 4; }
#modal-grant-access #grant-report-preview                  { grid-column: 2; grid-row: 4; }
#modal-grant-access #grant-no-reports                      { grid-column: 2; grid-row: 4; margin-top: 0; }
/* the report list has a column to itself now, so it can show more of
   itself before it needs a scrollbar of its own */
#modal-grant-access #grant-report-list { max-height: 300px; }
@media (max-width: 900px) {
  #modal-grant-access .modal-body { grid-template-columns: minmax(0, 1fr); }
  #modal-grant-access .modal-body > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ─── ORD-0147: THE INVITE USER BOX IS WIDE, NOT LONG ─────────────────
   HIS WORDS (2026-09-10), with a picture of the box open on the
   Administrator Portal's User Management page: "The invite tile did not
   change shape."

   He is right, and the reason is mine: when he first said "Change the size
   of this tile. Make it wider instead of longer" I read the picture as the
   Grant Access box on the Permissions page and widened that one. The box in
   his hand was this one. The block above stays — it is a real improvement to
   a real box — and this one answers what he actually asked for.

   MEASURED IN A REAL BROWSER before changing anything: the box is 520px
   wide and 810px tall in a 900px window, and its body holds 1,378px of
   content — so a person inviting somebody scrolls the box nearly twice its
   own height, and the Portal Access list at the bottom is out of sight when
   the name at the top is being typed.

   Now 940px, in two columns: the person down the left in the order they are
   already asked for, and the Portal Access list down the right beside them.
   The markup does not move — the same fields in the same order in the DOM,
   placed by the sheet — so every handler, every id and every save keeps
   working exactly as it did. Every child sits in column one by default, so
   anything a script appends to this body later lands under the fields
   instead of colliding with the list. Below 900px it is the single column it
   has always been, because two columns in a phone's width is longer. */
#modal-invite-user .modal { max-width: 940px; }
#modal-invite-user .modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px;
  align-items: start;
}
#modal-invite-user .modal-body > * { min-width: 0; grid-column: 1; }
#modal-invite-user .modal-body > *:has(#u-portal-claims) { grid-column: 2; grid-row: 1 / span 7; }
@media (max-width: 900px) {
  #modal-invite-user .modal-body { grid-template-columns: minmax(0, 1fr); }
  #modal-invite-user .modal-body > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ─── ORD-0142: THE WIDGET BANNER IS A HANDLE ─────────────────────────
   HIS WORDS (2026-09-10): "Make the widget banner grabable so the user can
   change the ordering of the widgets once the widget has been added to
   their dashboard." WIDGETS ONLY — these rules reach a widget card's own
   banner inside the dashboard grid and nothing else.

   The width of a tile is stated by the engine now, not by the class alone:
   a table tile that lands mid-row renders at one column so it leaves no
   hole (the auto-adjustment he asked for), and .pd-wide is written only
   when the tile actually got both columns. */
/* ORD-0152 (2026-09-11), and the reason these selectors changed shape. HIS
   WORDS: "All of the portals click to grab and move work except the Claims
   Portal. You can not grab and move the tiles."

   These rules USED to name `.pd-card > .card-title` on both grids, which on
   the Claims Portal painted a grab cursor on the operations cards while no
   drag listener was ever attached to that grid — the cursor said pick me up
   and nothing happened. The cursor now follows the ONE attribute the engine
   itself picks a card up by, so a band that looks grabbable is a band the
   engine reads, and a card the engine cannot move never claims it can. */
[data-pd-band] { cursor: grab; user-select: none; }
[data-pd-band]:active { cursor: grabbing; }
[data-pd-band]:focus-visible { outline: 2px solid var(--carolina); outline-offset: -2px; }
/* the remove button on the band is a button, not a grip */
[data-pd-band] button { cursor: pointer; }
[data-pd-widget].pd-dragging { opacity: .5; }
[data-pd-widget].pd-drop-before { box-shadow: inset 4px 0 0 0 var(--carolina), var(--shadow); }
[data-pd-widget].pd-drop-after { box-shadow: inset -4px 0 0 0 var(--carolina), var(--shadow); }

/* 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. */
:root { --sb-hide-top: 74px; --sb-hide-top-railed: 60px; }

/* ORD-0212 (2026-09-17), HIS ORDER with two pictures: "on every portal the
   logo is messed up because it sits on top of the page name" and "the
   collapse button on most portals look like this ... check every portal on
   every page". The Operator Portal was his picture of RIGHT: a white logo
   card, the caps portal label beneath it, the round button on the column's
   edge beside the card.

   MEASURED IN A REAL BROWSER at 1440x900 on the six shells that wear this
   sheet (Administrator, Claims, Underwriting, Producer, Billing, Personnel)
   with the brand head as wpBrandApply / applyBranding write it at run time:
   the logo card computed to 36px by 36px with a THEME GRADIENT (the rule
   above at ".sidebar-logo { background: linear-gradient ... !important }",
   the monogram box from before there was an organization logo), while the
   image inside it is 60px tall — so the picture spilled 12px above and 12px
   below its own box, over the portal's name, and the white card was never
   painted. The button's offset was right all along; it looked wrong because
   the head it sits beside was the wrong height. The Waypoint Center and the
   Operator Portal dress the same head with their own sheets and were right.

   ONE rule for the head, whoever writes it: the card sizes to the picture,
   paints white, and the name sits beneath. Specific enough (.sidebar
   .sidebar-brand ...) to beat the theme rule above at equal importance, and
   below the collapsed-rail rules of ORD-0146 in specificity, so the rail
   keeps its 26px mark. */
.sidebar .sidebar-brand { flex-direction: column; align-items: center; gap: 7px; }
.sidebar .sidebar-brand .sidebar-logo,
.sidebar .sidebar-brand > div:has(> img) {
  width: auto !important; height: auto !important;
  background: #fff !important; background-image: none !important;
  border-radius: 8px !important; padding: 6px 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  display: inline-flex !important; align-items: center !important;
  flex-shrink: 0;
}
.sidebar .sidebar-brand img { height: 60px; max-width: 200px; object-fit: contain; display: block; }
.sidebar .sidebar-brand .sidebar-brand-text,
.sidebar .sidebar-brand .sidebar-brand-tag { text-align: center; }