@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* QEO brand palette */
  --navy: #034e7b;
  --navy-deep: #023456; /* app shell only -- one notch darker than --navy for a stronger, more premium header */
  --orange: #f07622;
  --light-orange: #ff9b5b;
  --brand-white: #ffffff;
  --brand-gray: #9d9d9d;
  --light-gray: #d8dcd8;
  --pale-peach: #ffcfaf;

  /* app tokens, built from the brand palette */
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #e0e2e7;
  --text: #1f2430;
  --text-muted: #666c7a;
  --accent: var(--orange);

  /* status colors -- consistent meaning throughout the app */
  --green: #1a7d34;
  --green-bg: #dcf3e0;
  --amber: #8a6100;
  --amber-bg: #fff2c9;
  --red: #a4261a;
  --red-bg: #fde2e1;
  --purple: #5b2a9e;
  --purple-bg: #ede4fb;
  --navy-bg: #dbe7f0;

  /* Risk grade scale for the Underwriting Geographic View (A 90+ ... F below
     60, higher is better; web/score-grade.js) -- the state bars and the
     legend. The map's Plotly colours are RISK_GRADE_COLORS in uw-state.js:
     keep the two in sync so a state's bar and its map colour agree. */
  --risk-grade-a: #1a7d34;
  --risk-grade-b: #4d7c0f;
  --risk-grade-c: #a87a00;
  --risk-grade-d: #b45309;
  --risk-grade-f: #a4261a;
  --risk-no-score: #b6bac4;

  /* The Underwriting work-queue cards' accents (underwriting-rework-2026-10-26.md
     7.1): 60-day review, past 30-day window, out of territory, VINs. */
  --queue-review: #0b6e78;
  --queue-past-window: #a33a22;
  --queue-territory: #a87a00;
  --queue-vins: #4a5568;

  --radius: 10px;
}

/* The `hidden` attribute always hides. Without this, any class that sets
   `display` (.filter-field's flex, .drawer-link-btn's block, ...) silently
   beats the browser's own low-specificity [hidden] rule -- why the older
   per-element `X[hidden] { display: none }` rules below exist, and why the
   Reports filters showed on every report (2026-10-20). login.css has the same. */
[hidden] { display: none !important; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--orange);
}

button, input, select, textarea {
  font-family: inherit;
}

/* ---- shared site header / primary application navigation ---- */

.site-header {
  background: var(--navy-deep);
  color: var(--brand-white);
}

/* Local preview only (common.js adds it on localhost): real Prod data,
   read-only. Thin, sticky above everything, never clickable, and visible even
   while body.auth-pending hides the page. */
/* "Updating…" while a page shows its kept copy and waits for the fresh
   answer (common.js page cache, performance-snappy note Phase 6). */
#qc-updating {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #034e7b;
  color: #fff;
  font-size: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
#qc-updating[hidden] { display: none; }

#qc-local-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 24px;
  line-height: 24px;
  padding: 0 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #ffbf00;
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  pointer-events: none;
  visibility: visible;
}

.site-header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-white);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  flex: none;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
  flex: none;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.app-nav-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 7px;
  transition: background 0.12s ease, color 0.12s ease;
}
.app-nav-link:hover {
  color: var(--brand-white);
  background: rgba(255, 255, 255, 0.08);
}
.app-nav-link-active {
  color: var(--brand-white);
  background: rgba(255, 255, 255, 0.14);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

/* Empty for now -- reserved so search / notifications / user profile have
   somewhere to land without needing another header redesign. */
.header-actions:empty {
  display: none;
}

/* ---- page title ---- */

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--navy);
}

.page-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* ---- data sync freshness / health indicator ---- */

.sync-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 12px;
}
.sync-dot { font-size: 0.7rem; line-height: 1; }

.sync-ok { background: var(--green-bg); color: var(--green); }
.sync-warn { background: var(--amber-bg); color: var(--amber); }
.sync-bad { background: var(--red-bg); color: var(--red); }
.sync-unknown { background: #eceef1; color: #565d6b; }

.sync-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Lives on the dark header now -- the default muted gray reads as invisible
   there, so the header context gets its own lighter tone. */
.site-header .sync-detail {
  color: rgba(255, 255, 255, 0.68);
}

main {
  max-width: 1500px;
  margin: 0.9rem auto;
  padding: 0 1.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel, section.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.03);
}

.panel h2, section h2 {
  margin: 0 0 0.9rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.hint-text {
  margin: 0.5rem 0 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.section-header-row h2 {
  /* Some section headers (Needs Your Attention, Portfolio Snapshot) sit
     directly in the page flow rather than inside a .panel/section, so this
     can't rely on the ".panel h2, section h2" rule above to size it. */
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.error-message {
  color: var(--red);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

/* ============================================================
   GLOBAL FILTER BAR
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
  flex: 1 1 160px;
}

.filter-field label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.filter-field select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.88rem;
}

.btn-reset {
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-reset:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* Quiet, non-removable context (e.g. a scoped underwriter's own book) --
   distinct from the removable filter chips below, which the user chose. */
.scope-banner {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: #eef2f6;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
}
.scope-banner[hidden] { display: none; }

/* Active selections as compact chips -- replaces the single-line banner so
   several filters (an underwriter, a state, an action card) stay legible
   together instead of running into one long sentence. */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.active-filters[hidden] { display: none; }

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--navy-bg);
  color: var(--navy);
  border: 1px solid #c7dae8;
  border-radius: 999px;
  padding: 0.22rem 0.35rem 0.22rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.filter-chip-remove {
  border: none;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.05rem 0.3rem;
  border-radius: 50%;
}
.filter-chip-remove:hover {
  background: rgba(3, 78, 123, 0.14);
}

.clear-filters-btn {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}
.clear-filters-btn:hover {
  text-decoration: underline;
}

/* ============================================================
   UNDERWRITING WORK QUEUES AND BOOK HEALTH
   (underwriting-rework-2026-10-26.md 7.1, Phase 3)
   ============================================================ */

.queue-section-header { margin-bottom: -0.25rem; }

.queue-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1100px) {
  .queue-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Each card is a button: a queue, not a metric. The accent is the left
   border and the count only. */
.queue-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  font-family: inherit;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--queue-accent, var(--border));
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.queue-card:hover { border-color: var(--orange); border-left-color: var(--queue-accent); box-shadow: 0 2px 8px rgba(20, 24, 33, 0.08); }
.queue-card-review         { --queue-accent: var(--queue-review); }
.queue-card-past_window    { --queue-accent: var(--queue-past-window); }
.queue-card-radius_review  { --queue-accent: var(--queue-territory); }
.queue-card-leakage_review { --queue-accent: var(--queue-vins); }
.queue-card-active { box-shadow: inset 0 0 0 1px var(--queue-accent); border-color: var(--queue-accent); }

.queue-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.queue-card-title { font-size: 0.88rem; font-weight: 600; }
.queue-card-link { font-size: 0.72rem; font-weight: 600; color: var(--queue-accent); white-space: nowrap; }
.queue-card-subtitle { font-size: 0.74rem; color: var(--text-muted); }
.queue-card-count { margin-top: 0.35rem; font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--queue-accent); }
.queue-card-premium { font-size: 0.8rem; }
.queue-card-secondary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.queue-card-secondary:empty { display: none; }
.queue-card-line strong { color: var(--queue-accent); }
.queue-card-urgent { color: var(--amber); font-weight: 600; }
.queue-card-empty .queue-card-count { color: var(--green); }
.queue-card-empty { opacity: 0.75; }

/* The 60-day card's bar: <=10 days left, 11-30, 31-60. */
.queue-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #eceef1; }
.queue-bar-soon  { background: var(--red); }
.queue-bar-mid   { background: var(--risk-grade-c); }
.queue-bar-early { background: var(--queue-review); }

.book-health-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bh-item { padding: 0.75rem 1rem; border-left: 1px solid var(--border); }
.bh-item:first-child { border-left: 0; }
.bh-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.bh-value { margin-top: 0.3rem; font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.bh-note { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.bh-note-down { color: var(--red); }
@media (max-width: 1100px) {
  .book-health-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-item:nth-child(4) { border-left: 0; }
  .bh-item:nth-child(n + 4) { border-top: 1px solid var(--border); }
}

/* Priority pills (table + drawer) */

.priority-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.priority-pill-critical { background: var(--red-bg); color: var(--red); }
.priority-pill-high { background: var(--pale-peach); color: #a84d05; }
.priority-pill-medium { background: var(--amber-bg); color: var(--amber); }
.priority-pill-low { background: #eceef1; color: #565d6b; }
.priority-pill-none { background: var(--green-bg); color: var(--green); }

/* Drawer action brief */

/* Lives inside the Overview pane now, so no outer margin -- .drawer-section
   owns the spacing. It previously sat above the tabs with its own margins and
   squeezed the tab content into a ~200px strip. */
.action-brief {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: #fcfcfd;
}
.action-brief-critical { border-left-color: var(--red); }
.action-brief-high { border-left-color: var(--orange); }
.action-brief-medium { border-left-color: var(--amber); }
.action-brief-low { border-left-color: var(--light-gray); }
.action-brief-clear { border-left-color: var(--green); background: var(--green-bg); }

.action-brief-headline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.action-brief-headline {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.action-brief-renewal {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber);
}

/* One line per action when collapsed. The full reason and recommended
   action are one click away rather than three paragraphs by default. */
.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.action-row {
  border-left: 2px solid var(--border);
  padding-left: 0.55rem;
}
.action-row-red { border-left-color: var(--red); }
.action-row-amber { border-left-color: var(--amber); }
.action-row-navy { border-left-color: var(--navy); }
.action-row-purple { border-left-color: var(--purple); }

.action-row-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.28rem 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.action-row-toggle:hover { color: var(--navy); }

.action-row-caret {
  font-size: 0.7rem;
  color: var(--text-muted);
  width: 0.8em;
  flex: none;
}

.action-row-detail {
  padding: 0.1rem 0 0.45rem 1.15rem;
}
.action-row-why {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.action-row-do {
  margin: 0.3rem 0 0 0;
  font-size: 0.76rem;
  color: var(--text);
  line-height: 1.45;
}
.action-row-do strong { font-weight: 600; }

.action-row-jump {
  margin-top: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.action-row-jump:hover { border-color: var(--orange); color: var(--orange); }

.radius-outlier-note {
  color: var(--navy);
  font-weight: 600;
}

.kpi-row-secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .kpi-row-secondary { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.kpi-card-sm {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.kpi-value-sm {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.kpi-label-sm {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}
.kpi-hint-sm {
  margin-top: 0.1rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ============================================================
   ACCOUNTS NEEDING ATTENTION
   ============================================================ */

.quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.quick-filter-btn {
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.quick-filter-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.quick-filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

.table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.table-toolbar input[type="text"] {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  min-width: 220px;
}

.checkbox-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#insureds-count {
  margin-top: 0;
}

.table-scroll {
  overflow-x: auto;
  max-height: 620px;
  overflow-y: auto;
}

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

th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.87rem;
  white-space: nowrap;
}

/* Insured/Agency names run long (DBAs, "see Named Insured schedule", etc.)
   and used to push Action/State/Underwriter off the visible table entirely,
   forcing a horizontal scroll to see anything past them. Capped and
   ellipsized instead -- the full name is still there on hover via the
   title attribute, and in the row's own drawer on click. */
.cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.cell-truncate-insured { max-width: 260px; }
.cell-truncate-agency { max-width: 170px; }

th {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
  /* border-collapse hands the border to the table, so a sticky th leaves its
     own border-bottom behind and rows scroll across the bare edge. Draw the
     rule as a shadow, which travels with the pinned header. */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

tbody tr:hover {
  background: #fafbfc;
}

#insureds-tbody tr {
  cursor: pointer;
  border-left: 3px solid transparent;
}
/* A risk score down 15+ points since the period before. */
#insureds-tbody tr.row-sharp-drop { border-left-color: var(--red); }

/* ---- The insured list (Phase 3) ---- */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.list-toolbar-right { display: flex; align-items: center; gap: 0.6rem; }
.list-toolbar-right input[type="text"] { padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.85rem; min-width: 220px; }
.list-views .view-toggle-option.active { background: var(--panel); box-shadow: 0 1px 3px rgba(20, 24, 33, 0.15); }
.view-count { margin-left: 0.2rem; font-weight: 500; color: var(--text-muted); }
.risk-filters-toggle { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: 0.45rem 0.8rem; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text); cursor: pointer; }
.risk-filters-toggle[aria-expanded="true"] { border-color: var(--navy); color: var(--navy); }
.risk-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 0.75rem; padding: 0.65rem 0.85rem; background: #f8f9fb; border: 1px solid var(--border); border-radius: 8px; }
.risk-filter-grades { display: flex; align-items: center; gap: 0.3rem; }
.risk-filter-label, .risk-filter-field { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.risk-filter-field { display: flex; align-items: center; gap: 0.4rem; }
.risk-filter-field select { font: inherit; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.grade-chip { border: 1px solid var(--border); background: var(--panel); border-radius: 999px; min-width: 2rem; padding: 0.15rem 0.55rem; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.grade-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.list-note { margin: 0 0 0.75rem; padding: 0.6rem 0.85rem; background: var(--navy-bg); border-radius: 8px; font-size: 0.8rem; color: var(--text); }
.list-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.list-meta .hint-text { margin: 0; }

.ins-name { font-weight: 600; color: var(--text); }
.ins-pol { font-size: 0.74rem; color: var(--text-muted); }
/* The insured list's Insured cell (uw-insured-column-width-2026-11-01.md): the
   name ellipsizes (full name in its title), the REN / NB tag stays visible. */
.ins-line { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.ins-line .ins-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-line .term-tag { flex: none; margin-left: 0; }
#insureds-table .ins-pol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Column widths (uw-table-headers-2026-11-02.md): a <colgroup> per view from one
   px definition (uw-queues.js columnLayout); Insured takes the rest, at least
   220px (--uw-min-width, set by fitColumns). Optional columns that don't fit
   are hidden (.hide-last_action, then .hide-underwriter) instead of squeezed;
   past that the box scrolls. Headers: short labels on one line, never clipped,
   all the same size and bottom-aligned. Desktop only; phones get the cards. */
@media (min-width: 761px) {
  #insureds-table { table-layout: fixed; min-width: var(--uw-min-width, 1120px); }
  #insureds-table > thead > tr > th,
  #insureds-table > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; padding: 0 0.3rem; }
  #insureds-table > tbody > tr > td { font-size: 0.8rem; }
  #insureds-table > tbody > tr > td:first-child,
  #insureds-table > thead > tr > th:first-child { padding-left: 0.6rem; }
  #insureds-table > thead > tr > th {
    white-space: nowrap; text-overflow: clip; vertical-align: bottom; padding-bottom: 0.5rem;
    line-height: 1.2; font-size: 0.66rem; letter-spacing: 0.03em;
  }
  #insureds-table > thead > tr > th.num { text-align: right; }
  #insureds-table .sort-indicator { margin-left: 0.15rem; }
  /* Secondary lines ellipsize (each has its own title); the primary value stays whole. */
  #insureds-table .cell-sub,
  #insureds-table .lr-secondary { overflow: hidden; text-overflow: ellipsis; }
  #insureds-table td.col-loss_ratio .lr-basis { display: none; }
  #insureds-table .review-cell { min-width: 0; }
  #insureds-table .review-label { font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; }
  /* Text cells (UW, Last action, NOC reason / created / issued) ellipsize inside their own title span. */
  #insureds-table :is(td.col-underwriter, td.col-last_action, td.col-noc_reason, td.col-noc_created, td.col-noc_issued) > span[title] {
    display: block; overflow: hidden; text-overflow: ellipsis;
  }
  #insureds-table .decision-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  /* Two NOC pills (Q Cloud + IMS) stack rather than clip. */
  #insureds-table td.col-noc { white-space: normal; }
  /* The Status chip fits "Non Renewed" in 100px: tighter padding, no dot. A
     past term's longer label ellipsizes (its full text is the title). */
  #insureds-table td.col-current_status .status-badge {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
    white-space: nowrap; padding: 0.1rem 0.4rem; font-size: 0.68rem;
  }
  #insureds-table td.col-current_status .status-dot { display: none; }
  #insureds-table.hide-last_action .col-last_action,
  #insureds-table.hide-underwriter .col-underwriter { display: none; }
}
.term-tag { display: inline-block; margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; }
.term-tag-new { background: var(--navy-bg); color: var(--navy); }
.term-tag-renewal { background: var(--amber-bg); color: var(--amber); }
.cell-muted { color: var(--text-muted); }
.cell-sub { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.cell-sub-alert { color: var(--red); }
.risk-whole { font-weight: 600; }
.risk-trend { margin-left: 0.2rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.risk-trend-down { color: var(--red); }
.risk-trend-up { color: var(--green); }
.risk-trend-flat { color: var(--text-muted); }
.claims-open { font-weight: 700; }
.review-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 7.5rem; }
.review-label { font-size: 0.8rem; white-space: nowrap; }
.review-label-amber { color: var(--amber); font-weight: 600; }
.review-label-red { color: var(--red); font-weight: 600; }
.review-bar { display: block; height: 4px; border-radius: 2px; background: #eceef1; overflow: hidden; }
.review-bar-fill { display: block; height: 100%; }
.review-bar-teal { background: var(--queue-review); }
.review-bar-amber { background: var(--risk-grade-c); }
.review-bar-red { background: var(--red); }
.flag-tag { display: inline-block; padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; cursor: help; }
.flag-tag-radius_review { background: var(--amber-bg); color: var(--amber); }
.flag-tag-leakage_review { background: #e7e9ee; color: var(--queue-vins); }
.reason-chip, .source-chip { display: inline-block; margin: 0.1rem 0; padding: 0.05rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); font-size: 0.74rem; white-space: nowrap; }
.source-chip { border: 0; background: #eceef1; color: var(--text-muted); }
.lc-badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--red-bg); color: var(--red); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.days-past-due { font-weight: 700; color: var(--queue-past-window); }
/* The Missing / Source chips stack, so the row's NOC button stays in view. */
#insureds-table td.col-missing, #insureds-table td.col-source { white-space: normal; min-width: 9rem; }

/* The In review view's decision status (P4a): neutral pills; closed ones muted. */
.decision-pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; background: #eceef1; color: var(--text); }
.decision-pill-info_requested, .decision-pill-rerate_flagged { background: var(--navy-bg); color: var(--navy); }
.decision-pill-approved, .decision-pill-cancel_requested, .decision-pill-auto_kept { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted); }

/* The pop-up's Review tab (P4a). */
.review-band { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.7rem 0.85rem; border-radius: 8px; background: #f2f8f8; border-left: 4px solid var(--queue-review); }
.review-band .review-bar { height: 6px; }
.review-band-closed { background: #f5f6f8; border-left-color: var(--border); color: var(--text-muted); font-weight: 600; }
.review-status { font-weight: 600; color: var(--queue-review); }
.review-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 1rem; margin-top: 0.85rem; }
.review-fact-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.review-fact-value { margin-top: 0.15rem; font-size: 0.88rem; }
.review-camera-line { margin: 0.85rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.decision-buttons { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.decision-btn { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: 0.4rem 0.75rem; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text); cursor: pointer; }
.decision-btn:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.decision-btn:disabled { color: var(--text-muted); background: #f5f6f8; cursor: not-allowed; }
.decision-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.decision-btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.1); }
.decision-hint { margin-top: 0.5rem; }
.decision-form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; }
.decision-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.decision-form textarea, .decision-form select, .decision-form input { font: inherit; font-size: 0.85rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--panel); }
.decision-form-title { font-weight: 600; }
.decision-form-actions { display: flex; gap: 0.5rem; }
.review-timeline { list-style: none; margin: 0; padding: 0; }
.review-timeline-item { padding: 0.55rem 0 0.55rem 0.85rem; border-left: 2px solid var(--border); }
.review-timeline-item + .review-timeline-item { margin-top: 0.15rem; }
.review-timeline-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.review-timeline-head .cell-muted { font-size: 0.76rem; }
.review-timeline-note { margin-top: 0.2rem; font-size: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-timeline-synthetic { border-left-style: dashed; color: var(--text-muted); }
/* The Underwriter Verification Checklist (P4b). */
.ck-version { margin-left: 0.4rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.ck-banner { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: #f5f6f8; font-size: 0.8rem; color: var(--text-muted); }
.ck-header { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 1rem; }
.ck-header input, .ck-header select, .ck-header textarea { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.ck-dot { display: block; margin-top: 0.25rem; width: 9rem; }
.ck-referrals { grid-column: 1 / -1; }
.ck-referrals textarea { width: 100%; margin-top: 0.15rem; }
.ck-header-saved { position: absolute; right: 0; top: 0; }
.ck-progress { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.85rem 0 0.5rem; font-size: 0.82rem; font-weight: 600; }
.ck-progress .review-bar { height: 6px; }
.ck-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.ck-section { border-top: 1px solid var(--border); padding: 0.35rem 0; }
.ck-section > summary { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; cursor: pointer; font-size: 0.85rem; }
.ck-section-count { font-size: 0.76rem; color: var(--text-muted); }
.ck-item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "n body answer" "n body saved"; gap: 0.15rem 0.6rem; padding: 0.45rem 0; border-top: 1px dashed var(--border); }
.ck-n { grid-area: n; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.ck-body { grid-area: body; min-width: 0; }
.ck-label { font-size: 0.85rem; }
.ck-answer { grid-area: answer; display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; align-self: start; }
.ck-ans { border: 0; border-left: 1px solid var(--border); background: var(--panel); padding: 0.25rem 0.6rem; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.ck-ans:first-child { border-left: 0; }
.ck-ans[aria-pressed="true"] { background: var(--navy); color: #fff; }
.ck-ans:disabled { cursor: default; }
.ck-ans:disabled:not([aria-pressed="true"]) { background: #f5f6f8; }
.ck-note { display: block; width: 100%; margin-top: 0.3rem; font: inherit; font-size: 0.82rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
.ck-item-needs-note .ck-note { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.ck-note-link { margin-top: 0.15rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.76rem; color: var(--navy); cursor: pointer; }
.ck-saved { grid-area: saved; justify-self: end; font-size: 0.72rem; color: var(--green); }
.ck-saved-error { color: var(--red); }

@media (max-width: 600px) {
  .review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-item { grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-areas: "n body" "n answer" "n saved"; }
  .ck-ans { min-height: 40px; min-width: 3rem; }
  .decision-btn { min-height: 44px; flex: 1 1 auto; }
}

/* Notice of Cancellation (P5): status pills, the preview letter and its panel. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noc-pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.noc-pill-draft { box-shadow: inset 0 0 0 1px var(--border); border: 1px dashed var(--text-muted); color: var(--text-muted); }
.noc-pill-issued { background: var(--navy-bg); color: var(--navy); }
.noc-pill-sent_to_ims_pending { background: var(--purple-bg); color: var(--purple); }
.noc-pill-ims { background: var(--amber-bg); color: var(--amber); }
.noc-row-btn { padding: 0.25rem 0.6rem; font-size: 0.76rem; white-space: nowrap; }
.noc-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); font-size: 0.85rem; font-weight: 600; }
.noc-panel { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.noc-panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.noc-panel-row label, .noc-note { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.noc-panel select, .noc-note textarea { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--panel); }
.noc-issued { margin: 0; font-weight: 600; }
.noc-warning { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--amber); }
.noc-letter { position: relative; overflow: hidden; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 0.88rem; line-height: 1.5; }
.noc-banner { margin: -1.25rem -1.5rem 1rem; padding: 0.55rem 1.5rem; background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 0.8rem; }
.noc-watermark { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 5rem; font-weight: 800; letter-spacing: 0.4rem; color: rgba(164, 38, 26, 0.07); pointer-events: none; user-select: none; }
.noc-title { margin: 0.25rem 0 0.75rem; font-size: 1.05rem; }
.noc-date { margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.noc-detail { margin: 0 0 0.5rem 1.1rem; padding: 0; }
.noc-notice { margin: 0.75rem 0; padding: 0.65rem 0.85rem; border-radius: 6px; background: #eef0f3; }
.noc-notice p { margin: 0.15rem 0; }
.noc-signature { margin-top: 1.25rem; }
@media print {
  body.printing-noc * { visibility: hidden; }
  body.printing-noc .noc-letter, body.printing-noc .noc-letter * { visibility: visible; }
  body.printing-noc .noc-letter { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
  body.printing-noc .noc-banner, body.printing-noc .noc-watermark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Recent decisions (P6). */
.feed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.feed-toolbar .hint-text { margin: 0; }
#feed-table tbody tr { cursor: pointer; }
#feed-table .feed-note { max-width: 28rem; white-space: normal; font-size: 0.82rem; }
#feed-table tr.feed-row-synthetic td { color: var(--text-muted); }

/* Admin: the IMS outbox (P6). */
.outbox-status { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #eceef1; }
.outbox-status-failed { background: var(--red-bg); color: var(--red); }
.outbox-status-acked { background: var(--green-bg); color: var(--green); }
.outbox-status-sent { background: var(--navy-bg); color: var(--navy); }

/* Loss Control non-compliance flags (P7): the Underwriting bell, the Review tab's box, the LC pill and dialog. */
.uw-bell-wrap { position: relative; }
.uw-bell-wrap[hidden] { display: none; }
.uw-bell { border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.uw-bell:hover { border-color: var(--navy); }
.uw-bell-count:not(:empty) { display: inline-block; min-width: 1.2rem; margin-left: 0.15rem; padding: 0 0.3rem; border-radius: 999px; background: var(--queue-past-window); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
.uw-bell-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 24, 33, 0.16); padding: 6px; }
.uw-bell-menu[hidden] { display: none; }
.uw-bell-head { padding: 4px 8px 8px; font-size: 0.86rem; }
.uw-bell-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; cursor: pointer; }
.uw-bell-item:hover { background: #f2f5f8; }
.uw-bell-unread { box-shadow: inset 3px 0 0 var(--queue-past-window); }
.uw-bell-unread .uw-bell-title { font-weight: 600; }
.uw-bell-title { font-size: 0.84rem; }
.uw-bell-meta { font-size: 0.74rem; color: var(--text-muted); }
.uw-bell-empty { margin: 6px 8px; }
.review-lc-flag { margin-top: 0.75rem; padding: 0.65rem 0.85rem; border-radius: 8px; background: var(--red-bg); border-left: 4px solid var(--queue-past-window); font-size: 0.86rem; }
.review-lc-flag-head { font-weight: 600; color: var(--red); }
.review-lc-flag-notes { margin-top: 0.3rem; white-space: pre-wrap; }
.review-lc-flag-foot { margin-top: 0.35rem; font-size: 0.76rem; color: var(--text-muted); }
.lc-nc-pill { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--queue-past-window); color: #fff; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.lc-flag-slot { margin: 0.4rem 0 0.6rem; }
.lc-flag-slot:empty { display: none; }
.lc-flag-report { margin-left: auto; }
.lc-flag-report[hidden] { display: none; }
.lc-flag-modal { max-width: 520px; }
.lc-flag-form, .lc-flag-clear, .lc-flag-lookup { display: grid; gap: 0.7rem; }
.lc-flag-field { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; font-size: 0.86rem; }
.lc-flag-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.lc-flag-field input[type="date"], .lc-flag-field input[type="text"], .lc-flag-field textarea { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
.lc-flag-radio { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; }
.lc-flag-by { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.lc-flag-effect { margin: 0; padding: 0.6rem 0.75rem; border-radius: 8px; background: #f2f3f5; font-size: 0.8rem; color: var(--text-muted); }
.lc-flag-actions { display: flex; gap: 0.45rem; }
.lc-flag-message { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--green-bg); color: var(--green); font-size: 0.84rem; }
.lc-flag-notes { white-space: pre-wrap; }
.lc-flag-history { margin-top: 0.8rem; font-size: 0.8rem; color: var(--text-muted); }

/* The Geographic View, collapsed by default. */
.geo-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; cursor: pointer; list-style: none; }
.geo-summary::-webkit-details-marker { display: none; }
.geo-summary::before { content: "\25B8"; color: var(--text-muted); }
.geo-panel[open] .geo-summary::before { content: "\25BE"; }
.geo-summary h2 { margin: 0; }
.geo-summary .hint-text { margin: 0; }
.geo-panel[open] .geo-summary { margin-bottom: 0.75rem; }

#insureds-table th.sortable {
  cursor: pointer;
  user-select: none;
}
#insureds-table th.sortable:hover {
  color: var(--text);
}

th.sort-asc,
th.sort-desc {
  color: var(--orange);
}

.sort-indicator {
  display: inline-block;
  margin-left: 0.3rem;
  width: 0.7rem;
}

th.sort-asc .sort-indicator::after {
  content: "\25B2";
  font-size: 0.7rem;
}
th.sort-desc .sort-indicator::after {
  content: "\25BC";
  font-size: 0.7rem;
}

/* ============================================================
   GEOGRAPHIC VIEW
   ============================================================ */

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.map-legend-title { font-weight: 600; }
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.legend-swatch-grade-a { background: var(--risk-grade-a); }
.legend-swatch-grade-b { background: var(--risk-grade-b); }
.legend-swatch-grade-c { background: var(--risk-grade-c); }
.legend-swatch-grade-d { background: var(--risk-grade-d); }
.legend-swatch-grade-f { background: var(--risk-grade-f); }
.legend-swatch-unscored { background: var(--risk-no-score); }
.legend-swatch-none { background: var(--light-gray); }

#geo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
  padding-top: 0.4rem;
}
@media (max-width: 900px) {
  #geo-row { grid-template-columns: 1fr; }
}

#map {
  width: 100%;
  height: 420px;
}

#lc-heatmap {
  width: 100%;
  height: 460px;
  border-radius: 8px;
  overflow: hidden;
}

/* Loss Control's claims geography row -- same shape as Underwriting's
   #geo-row (ranked list beside a map, same data two ways), different id
   since this page has its own claims/zip data model. */
#lc-geo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
  padding-top: 0.4rem;
}
@media (max-width: 900px) {
  #lc-geo-row { grid-template-columns: 1fr; }
}

.lc-geo-subheading {
  margin: 0 0 0.5rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

#lc-zip-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 460px;
  overflow-y: auto;
}

.zip-rank-row {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.zip-rank-row:hover {
  background: #fff2e8;
  border-color: var(--light-orange);
}
/* Loss Control's zip ranking is information only (no link to Claims). */
.zip-rank-row-static { cursor: default; }
.zip-rank-row-static:hover { background: none; border-color: transparent; }

.zip-rank-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zip-rank-label small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.zip-bar-track {
  background: var(--light-gray);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.zip-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--orange);
}

.zip-rank-count {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  color: var(--text-muted);
}

/* Status pills in a Loss Control vehicle row (shared data table). */
.lc-camera-badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

#state-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.state-rank-row {
  display: grid;
  grid-template-columns: 32px 1fr 44px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}
.state-rank-row:hover {
  background: #fafbfc;
}
.state-rank-row-active {
  background: #fff2e8;
}

.state-rank-code {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.state-bar-track {
  background: var(--light-gray);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.state-bar-fill {
  height: 100%;
  border-radius: 4px;
}
/* The grade of the state's average risk score, the map's colours -- see
   --risk-grade-* in :root. A state's bar and its map color must always agree. */
.state-bar-fill-grade-a { background: var(--risk-grade-a); }
.state-bar-fill-grade-b { background: var(--risk-grade-b); }
.state-bar-fill-grade-c { background: var(--risk-grade-c); }
.state-bar-fill-grade-d { background: var(--risk-grade-d); }
.state-bar-fill-grade-f { background: var(--risk-grade-f); }

.state-rank-pct {
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

/* ---- shared badges (status dots / pills) ---- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.82rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.status-green { background: var(--green-bg); color: var(--green); }
.status-green .status-dot { background: var(--green); }

.status-red { background: var(--red-bg); color: var(--red); }
.status-red .status-dot { background: var(--red); }

.status-amber { background: var(--amber-bg); color: var(--amber); }
.status-amber .status-dot { background: var(--amber); }

.status-gray { background: #eceef1; color: #565d6b; }
.status-gray .status-dot { background: #8a909c; }

.status-blue { background: var(--navy-bg); color: var(--navy); }
.status-blue .status-dot { background: var(--navy); }

.status-purple { background: var(--purple-bg); color: var(--purple); }
.status-purple .status-dot { background: var(--purple); }

.status-navy { background: #dbe7f0; color: var(--navy); }
.status-navy .status-dot { background: var(--navy); }

/* ---- leakage review controls (insured detail VIN table) ---- */

.leakage-review-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.leakage-review-form select,
.leakage-review-form input[type="text"] {
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.leakage-review-form input[type="text"] {
  min-width: 160px;
}

.disconnected-miles {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.vin-mileage-btn {
  /* Orange from rest, not just on hover -- a neutral-gray border/text (the
     previous state) reads as disabled until the cursor happens to land on
     it, and this button is the primary thing to click on each VIN card. */
  border: 1px solid var(--orange);
  background: white;
  color: var(--orange);
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.vin-mileage-btn:hover {
  background: var(--orange);
  color: white;
}

input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--light-orange);
  outline-offset: 1px;
  border-color: var(--orange);
}

/* ============================================================
   FLEET TAB: VIN search + status filter
   ============================================================ */

.fleet-search-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.4rem;
}

.fleet-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

#fleet-vin-search {
  width: 100%;
  padding: 0.45rem 1.9rem 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
}

.fleet-search-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0.2rem;
}
.fleet-search-clear:hover { color: var(--text); }
.fleet-search-clear[hidden] { display: none; }

#fleet-status-filter {
  flex: none;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

.fleet-count-line {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem 0;
}

.fleet-count-split {
  opacity: 0.85;
}

/* Bulk VIN-leakage review */

.leakage-bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  background: #fffaf5;
}

.leakage-bulk-text {
  font-size: 0.82rem;
  margin-right: auto;
}

.leakage-bulk-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
}
.leakage-bulk-btn:hover:not(:disabled) { filter: brightness(0.94); }
.leakage-bulk-btn:disabled { opacity: 0.6; cursor: default; }

.leakage-bulk-btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}

/* Power Units: "Download VIN list" (uw-vin-export.js). Neutral outline, like
   the secondary bulk button; on a phone it takes its own line. */
.fleet-download-btn {
  flex: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}
.fleet-download-btn:hover { border-color: var(--navy); }
@media (max-width: 600px) {
  .fleet-search-bar { flex-wrap: wrap; }
  .fleet-download-btn { width: 100%; }
}

/* ============================================================
   DRAWER SUB-VIEWS (in-drawer, no nested modals) -- shared shell for the
   VIN Mileage/Radius-of-Operation view and the Claim Detail view
   ============================================================ */

.drawer-subview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.drawer-back-btn {
  border: none;
  background: none;
  color: var(--navy);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 1.1rem 1.35rem 0 1.35rem;
  text-align: left;
}
.drawer-back-btn:hover { color: var(--orange); }

.drawer-subview-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.35rem 1rem 1.35rem;
  border-bottom: 1px solid var(--border);
}

.drawer-subview-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}
.drawer-subview-title-mono {
  font-family: "SFMono-Regular", Consolas, monospace;
}

.drawer-subview-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.1rem 1.35rem 1.5rem 1.35rem;
}

.mileage-base-line {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.radius-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.radius-btn {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.radius-btn:hover { border-color: var(--orange); }
.radius-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

/* Marks the band the policy is actually rated for, so it stays identifiable
   after the user clicks away to compare against a wider view. */
.radius-btn-rated { border-color: var(--orange); font-weight: 600; }
.radius-btn-rated.active { border-color: var(--orange); }

.radius-rated-note { margin: 0.4rem 0 0 0; }

.mileage-summary-strip {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.mileage-metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.mileage-metric-value.mileage-metric-warning { color: var(--red); }

.mileage-metric-label {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.mileage-compliance-line {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.mileage-compliance-ok { color: var(--green); }
.mileage-compliance-warning { color: var(--red); }

.mileage-map {
  width: 100%;
  height: 420px;
  border-radius: 8px;
  overflow: hidden;
}

.mileage-map-note {
  margin: 0.35rem 0 0 0;
}

.mileage-helper-note {
  margin: -0.2rem 0 0.6rem 0;
  font-style: italic;
}

/* ============================================================
   CLAIMS: clickable list rows + claim detail view
   ============================================================ */

.claims-table tbody tr {
  cursor: pointer;
}
.claims-table tbody tr:hover {
  background: #fafbfc;
}

.claim-map {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   VIEW TOGGLE + SMALL POPUPS -- the sliding view toggle (Admin,
   Reinsurance) and the small centered popup (the Claims tab's video
   dialog and shortcuts, Admin, Reinsurance).
   ============================================================ */

.view-toggle {
  position: relative;
  display: inline-flex;
  background: #eceef1;
  border-radius: 999px;
  padding: 0.2rem;
  gap: 0.2rem;
}

/* Font-size and padding matched to .quick-filter-btn (Underwriting's own
   pill filters, reused as-is on Loss Control's camera filter) -- same
   "row of toggle/filter pills" role, so they should read as the same
   control everywhere, even though the active-state treatment differs
   (sliding pill background here vs. a filled pill there) because a
   segmented either/or toggle and a set of independent filter buttons are
   genuinely different interactions. */
.view-toggle-option {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.view-toggle-option.active {
  color: var(--navy);
}

.view-toggle-slider {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  width: var(--slider-width, 50%);
  background: var(--panel);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20, 24, 33, 0.15);
  transition: transform 0.18s ease;
  transform: translateX(var(--slider-x, 0));
}

/* Small centered popup -- e.g. the Claims tab's video playback.
   Deliberately lighter than the full
   .detail-dialog: the content here is one or two facts, not a whole
   record. Same dim overlay and close behaviour (detail-dialog.js). */

.simple-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.45);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.simple-modal-backdrop[hidden] { display: none; }

.simple-modal {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 24, 33, 0.25);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.5rem 1.35rem;
}

.simple-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.simple-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.simple-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.simple-modal-close:hover { color: var(--text); }

/* Admin page: approve / reject / revoke (admin.html, admin.js DECISIONS) */
.pa-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.pa-danger-btn {
  background: var(--red);
  border-color: var(--red);
}
.pa-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.pa-act-btn { white-space: nowrap; border-color: var(--border); }
.pa-act-approve { color: #fff; background: var(--orange); border-color: var(--orange); }
.pa-act-reject, .pa-act-revoke { color: var(--red); }
.pa-reason-wrap { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); }
.pa-reason-wrap[hidden] { display: none; }
.pa-reason-wrap textarea {
  font: inherit; font-size: 0.86rem; color: var(--text); resize: vertical;
  border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.55rem;
}
.pa-notice {
  margin: 0 0 0.75rem; padding: 0.55rem 0.8rem; border-radius: 6px; font-size: 0.84rem;
  background: #fff4e8; color: #8a4a12; border: 1px solid #ffd2ad;
}
.pa-notice[hidden] { display: none; }

.video-placeholder {
  background: #101418;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
}
.video-placeholder-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder-icon svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  margin-left: 2px;
}
.video-placeholder-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 26rem;
}

/* Real playback, once a claim has video files on record in Blob Storage.
   .video-placeholder above is still used, just for the "nothing on record"
   states now instead of "integration not built yet". */
.video-player-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.video-player-wrap video {
  width: 100%;
  max-height: 360px;
  background: #000;
  border-radius: 8px;
  display: block;
}
.video-player-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.video-player-filename {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.video-nav-btn {
  border: 1px solid var(--orange);
  background: white;
  color: var(--orange);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.video-nav-btn:hover:not(:disabled) {
  background: var(--orange);
  color: white;
}
.video-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.video-nav-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ============================================================
   GPS TRAIL overlay (pilot -- section only renders when a VIN has data)
   ============================================================ */

/* A cold VIN is fetched from TruckerCloud on demand (a few seconds), so the
   trail section has to say it is working -- a blank section reads as "this
   VIN has no trail" rather than "it's on its way". */
.gps-trail-loading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.gps-trail-spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: gps-trail-spin 0.7s linear infinite;
}

@keyframes gps-trail-spin {
  to { transform: rotate(360deg); }
}

.gps-trail-elapsed {
  font-variant-numeric: tabular-nums;  /* so the count doesn't jitter the line */
  font-weight: 600;
  color: var(--text);
}

/* Reduced motion: hide the spinner entirely rather than freezing it. A
   stationary spinner reads as a stalled page, which is worse than no
   spinner -- the ticking elapsed count carries the progress signal instead,
   and it works whether or not motion is allowed. Windows' "Show animations"
   setting being off is enough to land a user here. */
@media (prefers-reduced-motion: reduce) {
  .gps-trail-spinner { display: none; }
}

.gps-trail-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.gps-trail-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.gps-trail-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.gps-trail-swatch-inside { background: #034e7b; }
.gps-trail-swatch-outside { background: #a4261a; }
.action-row-evidence {
  margin: 0.25rem 0 0.5rem 1.1rem;
  padding: 0;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
.gps-trail-swatch-parked { background: #f07622; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c9ced8; }

/* Trail banners (app.js gpsTrailBannersHtml). */
.trail-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.5rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.trail-banner-stationary { background: var(--navy-bg); color: var(--navy); }
.trail-banner-outside {
  background: #fff2e8;
  border-left: 3px solid var(--orange);
  color: #8a4a12;
  font-weight: 600;
}
/* Territory review, states mode (uw-vin-mileage.js renderTerritoryBody). */
.territory-header {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.territory-header-flagged { color: #8a4a12; }
/* Out-of-territory rows: the same orange warning as .trail-banner-outside. */
.territory-states-table tr.territory-row-out td {
  background: #fff2e8;
  color: #8a4a12;
  font-weight: 600;
}
.territory-states-table tr.territory-row-out td:first-child { border-left: 3px solid var(--orange); }
.territory-out-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.territory-states-table tr.territory-row-unmapped td { color: var(--text-muted); font-style: italic; }
@media (max-width: 600px) {
  .territory-states-table th,
  .territory-states-table td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .territory-out-tag { display: block; width: fit-content; margin: 0.2rem 0 0; }
}
.trail-parked-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.trail-coords { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trail-note { margin: 0.25rem 0; }

/* ============================================================
   DETAIL DIALOG -- one centered dialog for row detail on Underwriting
   (insured), Claims (claim) and Loss Control (risk score). Replaced the
   right-hand side drawers 2026-10-05. The backdrop WRAPS the box so the box
   centers in it and a click on the dim area closes it (detail-dialog.js).
   ============================================================ */

.detail-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(20, 24, 33, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.detail-dialog-backdrop[hidden] { display: none; }
.detail-dialog-backdrop.open { opacity: 1; }

.detail-dialog {
  width: 60%;
  min-width: min(680px, 100%);
  max-width: 1120px;
  max-height: 80vh;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(20, 24, 33, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.18s ease;
}
.detail-dialog-backdrop.open .detail-dialog { transform: none; }

@media (max-width: 900px) {
  .detail-dialog { width: 100%; min-width: 0; max-height: 92vh; }
  .detail-dialog-backdrop { padding: 0.75rem; }
}

/* Page behind an open dialog doesn't scroll. */
body.dialog-open { overflow: hidden; }

/* Same flex chain needed by every .detail-dialog body (Underwriting's
   #drawer-body, Loss Control's risk score): without
   display:flex + min-height:0 at every level down to .drawer-content, that
   child's overflow-y:auto has no bounded height to scroll within, so the
   dialog grows past its 80vh cap instead of scrolling inside. */
#drawer-body,
#risk-drawer-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Everything above .drawer-content is fixed chrome, so every pixel here is
   taken straight out of the tab content. Kept deliberately tight. */
.drawer-header {
  flex: none;
  padding: 0.85rem 1.35rem 0.7rem 1.35rem;
  border-bottom: 1px solid var(--border);
}

.drawer-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.drawer-insured-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  flex: none;
  padding: 0 0 0 0.5rem;
}
.drawer-close:hover { color: var(--text); }

/* Labelled status pairs under the insured's name ("Review: 2 actions
   required"); the camera status pair left with camera compliance
   (underwriting-rework-2026-10-26.md section 3). */
.drawer-status {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.drawer-status-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.drawer-status-key {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.drawer-subline {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.drawer-kpi-strip {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-bottom: 1px solid var(--border);
}

.drawer-kpi-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.drawer-kpi-label {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.drawer-kpi-sub {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
}

.drawer-tabs {
  flex: none;
  display: flex;
  gap: 0.25rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--border);
}

.drawer-tab {
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab.active {
  color: var(--navy);
  border-bottom-color: var(--orange);
}

/* A tab's own label communicates COUNT only -- one neutral number, no
   color coding. Any breakdown (camera counts / leakage for Power Units, any
   future claim-status split) lives in that tab's content instead,
   visible only once someone actually opens it -- see fleetStatusHtml. */
.tab-count-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  /* Same neutral gray already used for "no status color" elsewhere
     (.status-gray) -- purely informational, must not compete with the
     tab label or read as a status of its own. */
  background: #eceef1;
  color: #565d6b;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}
/* claims-tab-badge starts empty until loadDrawerClaims resolves -- collapse
   rather than show a hollow, numberless pill for that brief window. */
.tab-count-badge:empty { display: none; }

/* Vertical padding lives on .drawer-pane, not here. A sticky child pins to
   the scroll container's *content* box, so padding-top on the scroll
   container itself parks sticky headers that far down and leaves a strip
   above them where rows scroll past in the open -- which is what put a gap
   over the Claims table header. The panes aren't scroll containers, so the
   same spacing there costs nothing. */
.drawer-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.35rem;
}

.drawer-pane { padding: 1.1rem 0 1.5rem 0; }
.drawer-pane[hidden] { display: none; }

.drawer-section {
  margin-bottom: 1.25rem;
}
.drawer-section:last-child { margin-bottom: 0; }

.drawer-section-title {
  margin: 0 0 0.6rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Policy details two-column grid */

.drawer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.drawer-detail-item dt {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.drawer-detail-item dd {
  margin: 0.15rem 0 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.drawer-detail-item dd small {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.agent-mail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  color: var(--orange);
  vertical-align: -2px;
}
.agent-mail-link:hover { color: var(--navy); }

/* Risk score grades (web/score-grade.js gradeBadgeHtml). The badge is
   coloured by grade, A green through F red (Andre, 2026-10-16, replacing the
   navy-only rule of 10-15); navy is the fallback for a badge with no grade. */
.risk-grade { color: var(--navy); }
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.2em;
  border-radius: 4px;
  background: var(--navy);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.1em;
}
/* A green, B light green, C yellow, D orange, F red: tinted background,
   coloured letter, thin ring (the list mockup's look). */
.grade-badge.grade-a { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1px #9fd3ad; }
.grade-badge.grade-b { background: #ecf6dc; color: #4d7c0f; box-shadow: inset 0 0 0 1px #c2e09a; }
.grade-badge.grade-c { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px #ecd27a; }
.grade-badge.grade-d { background: #fde6d3; color: #b45309; box-shadow: inset 0 0 0 1px #f4bf8f; }
.grade-badge.grade-f { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px #eea8a2; }

.renewal-critical { color: var(--red); }
.renewal-warning { color: var(--amber); }
.renewal-caution { color: #8a7300; }

/* Fleet status (compact, shared by Overview + Fleet tab) */

.fleet-status-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.fleet-status-summary strong { font-weight: 600; }
/* Information only: the camera counts carry no colour
   (underwriting-rework-2026-10-26.md section 3). */
.fleet-camera-counts { color: var(--text-muted); }
.fleet-leakage-count { color: var(--purple); font-weight: 600; }

.drawer-link-btn {
  display: inline-block;
  margin-top: 0.6rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--orange);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.drawer-link-btn:hover { text-decoration: underline; }

.claims-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
}
.claims-summary-row:hover { border-color: var(--orange); }
.claims-summary-count { font-weight: 600; }

/* VIN cards (Fleet tab) */

.vin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.55rem;
}
.vin-card:last-child { margin-bottom: 0; }
/* Only VIN leakage marks a card; the camera is information (uw-detail.js vinCardClass). */
.vin-card-neutral { border-left-color: var(--purple); }

.vin-card-main { min-width: 0; }
.vin-card-vin {
  font-weight: 600;
  font-size: 0.85rem;
  font-family: "SFMono-Regular", Consolas, monospace;
  margin-bottom: 0.3rem;
}

.drawer-empty-state {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.drawer-empty-state strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.2rem;
}


/* ============================================================
   ROLE-BASED VISIBILITY
   ============================================================ */

/* Reveal, don't hide. These elements are hidden by DEFAULT and revealed only
   once /api/me confirms the caller is an admin (or, via .sees-all, sees this
   page's whole area: a team manager) -- hiding-after-load always
   flashes the content first, and the flash is in the static HTML, which
   paints before any script runs. Default-hidden cannot flash.

   This is presentation only. The server scopes every endpoint regardless;
   hiding a chart from someone whose API still returns the whole book would
   protect nothing. */
body:not(.role-admin):not(.sees-all) [data-admin-only] { display: none; }

.access-denied {
  max-width: 34rem;
  margin: 3rem auto;
  text-align: center;
}
.access-denied h2 { margin-top: 0; color: var(--navy); }

.access-warning {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-bg);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Loss Control rep: "Q Cloud" tag and the admin picker for policies IMS
   left without a rep. */
.lc-rep-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--navy-bg);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}
.lc-rep-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem 0.6rem;
}
.lc-rep-edit-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.lc-rep-edit select {
  min-width: 200px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.86rem;
}
.lc-rep-msg { margin: 0; }

/* Risk Score Trends: higher score = better (Andre, 2026-10-15). The change
   is coloured by direction (rising = better = green, falling = worse = red);
   the score itself and its grade stay neutral navy. */
.risk-scale-note { margin: -0.35rem 0 0.75rem; }
.risk-delta-better { color: var(--green); font-weight: 600; }
.risk-delta-worse { color: var(--red); font-weight: 600; }
.risk-delta-same { color: var(--text-muted); }
.risk-score-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.risk-score-num { min-width: 3.4rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.risk-score-track {
  display: inline-block;
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: #eceef1;
  overflow: hidden;
}
.risk-score-fill { display: block; height: 100%; border-radius: 999px; background: var(--navy); }
.risk-sparkline { display: block; }
/* "Safety report ->" on each Risk Score Trends row (opens the same report as
   the row; web/safety-report.js). Orange = brand accent, not a status. */
.safety-report-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--orange);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.safety-report-link:hover { text-decoration: underline; }

/* Breathing room above the Risk Score Trends section when "View trends"
   scrolls to it. */
#lc-risk-section { scroll-margin-top: 1rem; }

.view-trends-link {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
button.view-trends-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--orange);
  cursor: pointer;
}
.view-trends-link:hover { text-decoration: underline; }

/* Reinsurance page: views stack like the rest of <main>; slice bar reuses
   .filter-bar / .filter-field. */
#re-view { display: flex; flex-direction: column; gap: 1rem; }
#re-view.re-loading { opacity: 0.55; transition: opacity 0.15s; }
.re-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.re-kpi-sub { margin-top: 0.3rem; font-size: 0.74rem; color: var(--text-muted); }
.re-reset { align-self: center; }
.re-chart { width: 100%; height: 280px; margin-bottom: 0.75rem; }
/* Charts first, numbers behind "Show table" (reinsurance.js tableToggle). */
.re-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.25rem; }
@media (max-width: 900px) { .re-chart-grid { grid-template-columns: minmax(0, 1fr); } }
.re-chart-title {
  margin: 0.4rem 0 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.re-slice-group + .re-slice-group { margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.4rem; }
.re-chart-auto { margin-bottom: 0.25rem; }
.re-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.78rem; color: var(--text-muted); margin: 0.2rem 0 0.4rem; }
.re-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.re-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.re-footnote { margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--text-muted); }
.re-table-toggle { margin-top: 0.6rem; }
.re-table-toggle > summary {
  cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--navy); width: max-content;
}
.re-table-toggle[open] > summary { margin-bottom: 0.6rem; }
.re-chart-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Fleet | New venture side by side; Industry (5+ slices) gets its own
   full-width row so its slivers and legend have room. */
.re-donut-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "fleet nv" "industry industry"; gap: 1.25rem 1.5rem; align-items: start;
}
.re-donut-cell[data-slice="fleet"] { grid-area: fleet; }
.re-donut-cell[data-slice="nv"] { grid-area: nv; }
.re-donut-cell[data-slice="industry"] { grid-area: industry; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.re-donut-cell[data-slice="industry"] .re-chart.re-donut { height: 360px; }
@media (max-width: 900px) {
  .re-donut-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fleet" "nv" "industry"; }
  .re-chart-grid-even { grid-template-columns: minmax(0, 1fr); }
}
.re-chart.re-donut { height: 300px; margin-bottom: 0; }
/* Basis tag next to the view title ("Auto liability" on Actuarial). */
.re-view-heading { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.re-basis {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--navy);
  background: var(--navy-bg); border-radius: 999px; padding: 0.2rem 0.65rem;
}
.re-basis[hidden] { display: none; }
/* Weight class: inline share-of-premium bar. */
.re-weight-class .re-share-col { width: 26%; }
.re-share { display: inline-block; vertical-align: middle; width: calc(100% - 4.2rem); max-width: 220px; height: 8px;
  margin-right: 0.5rem; border-radius: 4px; background: #eceef1; overflow: hidden; }
.re-share > i { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.re-footnote-top { margin: 0 0 0.5rem; }
/* Average premium year on year (reinsurance.js avgTable). */
.re-avg-compare .re-ty-prior { color: var(--navy); font-weight: 600; }
.re-avg-compare .re-change-up { color: var(--orange); font-weight: 600; }
.re-avg-compare .re-change-down { color: #666c7a; font-weight: 600; }
.re-donut-cell .re-chart-title { text-align: center; }
.re-subhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.re-subtitle { margin: 0.2rem 0 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--navy); }
.re-subtitle-gap { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.re-metric-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: #f2f4f7; }
.re-metric-toggle button {
  border: 0; background: transparent; font: inherit; font-size: 0.76rem; font-weight: 500;
  padding: 0.25rem 0.75rem; border-radius: 999px; color: var(--text-muted); cursor: pointer;
}
.re-metric-toggle button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.data-table .re-group-row > td {
  height: 32px;
  background: #f5f6f8;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.data-table .re-total-row > td { font-weight: 600; border-top: 2px solid var(--border); }
/* Reinsurance > Claims: dashcam footage capture rate (reinsurance-capture.js).
   Brand navy / orange / soft navy / gray only -- no status colors. */
.re-cap-top { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.re-cap-big { border-right: 1px solid var(--border); padding-right: 1.4rem; }
.re-cap-big-value { font-size: 3.1rem; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.re-cap-big-value.is-empty { color: var(--text-muted); }
.re-cap-big-label { margin-top: 0.45rem; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.re-cap-big-sub { margin-top: 0.2rem; font-size: 0.78rem; color: var(--text-muted); }
.re-cap-big-gap { margin-top: 0.55rem; font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.re-cap-big-gap.is-empty { font-weight: 500; color: var(--text-muted); font-size: 0.82rem; }
.re-cap-big-sub em { font-style: normal; font-weight: 600; color: var(--navy); }
.re-cap-ty-line { margin-top: 0.55rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.re-cap-weekly { min-width: 0; }
.re-cap-chart { min-height: 240px; }
.re-cap-legend { margin-top: 0.2rem; }
.re-cap-prelim-key { display: inline-block; width: 12px; height: 10px; margin-right: 0.3rem; vertical-align: -1px; border-radius: 2px;
                     background: repeating-linear-gradient(45deg, rgba(3, 78, 123, 0.45) 0 3px, rgba(3, 78, 123, 0.2) 3px 6px); }
.re-cap-goal-key { display: inline-block; width: 16px; height: 0; margin: 0 0.3rem 0 0.2rem; vertical-align: 3px;
                   border-top: 2px dashed var(--orange); }
.re-cap-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.3rem;
                 padding-top: 1.1rem; border-top: 1px solid var(--border); }
.re-cap-stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin: 0.5rem 0 0.6rem; background: #eef1f5; }
.re-cap-stack i { display: block; height: 100%; }
.re-cap-rows { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.re-cap-rows div { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 0.5rem; align-items: center; }
.re-cap-rows i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.re-cap-rows .n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 2.6rem; }
.re-cap-rows .p { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; min-width: 3.4rem; font-size: 0.78rem; }
.re-cap-failure { background: #f07622; }
.re-cap-not-installed { background: #9ebcda; }
.re-cap-not-applicable { background: #034e7b; }
.re-cap-not-entered { background: #9d9d9d; }
.re-cap-other { background: #dbe7f0; }
.re-cap-ref { margin-top: 0.7rem; }
.re-cap-ty { display: flex; flex-direction: column; gap: 0.42rem; margin-top: 0.5rem; }
.re-cap-ty-row { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 3.2rem; gap: 0.6rem; align-items: center; font-size: 0.82rem; }
.re-cap-ty-track { position: relative; height: 12px; border-radius: 999px; background: #eef1f5; }
.re-cap-ty-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #9ebcda; }
.re-cap-ty-row.cur { font-weight: 600; color: var(--navy); }
.re-cap-ty-row.cur .re-cap-ty-fill { background: var(--orange); }
.re-cap-ty-row.is-empty .re-cap-ty-track { background: transparent; border: 1px dashed var(--navy); }
.re-cap-ty-goal { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--navy); opacity: 0.55; }
.re-cap-ty-row .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.re-cap-ty-row small { font-weight: 400; color: var(--text-muted); }
.re-cap-foot { margin-top: 1rem; }
@media (max-width: 760px) {
  .re-cap-top, .re-cap-bottom { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .re-cap-big { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
  .re-cap-big-value { font-size: 2.6rem; }
}
.re-notes summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.re-notes ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.82rem; }
.re-notes li + li { margin-top: 0.3rem; }

/* Shared date-range filter (date-range.js) -- sits in a .filter-bar like
   the selects around it. */
.date-range-field { position: relative; }
/* Wide enough for "Jan 1, 2026 – Sep 30, 2026" without wrapping. */
.filter-bar .date-range-field { flex: 0 1 260px; min-width: 235px; }
.date-range-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.date-range-btn.date-range-active { border-color: var(--navy); color: var(--navy); font-weight: 600; }
.date-range-caret { color: var(--text-muted); font-size: 0.75rem; }
.date-range-pop {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 80;
  width: 340px;
  max-width: calc(100vw - 2rem);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 24, 33, 0.18);
  padding: 0.85rem;
}
.date-range-pop[hidden] { display: none; }
.date-range-pop.date-range-pop-right { left: auto; right: 0; }
.date-range-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.date-range-preset {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}
.date-range-preset.active { background: var(--navy); border-color: var(--navy); color: white; }
.date-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.date-range-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.date-range-fields input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.date-range-error { margin: 0.5rem 0 0; color: var(--red); font-size: 0.8rem; }
.date-range-error[hidden] { display: none; }
.date-range-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 0.85rem; }
.date-range-apply {
  border: none;
  background: var(--navy);
  color: white;
  border-radius: 6px;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.date-range-apply:hover { filter: brightness(1.1); }
.filter-hint { flex-basis: 100%; margin: 0; }

/* All Policies table (Underwriting): past terms listed under the in-force
   rows, after a group row. Term-status pills for those rows. */
#insureds-table .past-terms-row > td {
  height: 34px;
  background: #f5f6f8;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: default;
}
#insureds-table tr.past-term-row td { color: var(--text-muted); }
#insureds-table tr.past-term-row td:first-child { color: var(--text); }
.past-terms-more { text-align: center; }
/* Loss ratio cell: earned, with written under it. */
#insureds-table .lr-secondary { font-size: 0.85em; color: var(--text-muted); white-space: nowrap; }
.lr-basis { font-size: 0.85em; color: var(--text-muted); }

/* Loss ratio item (insured pop-up, Policy Details grid, next to Risk Score).
   Compact, and neutral grays and navy only, on purpose: figures to read, not
   statuses -- no green/amber/red. */
.lr-item-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.lr-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--brand-gray);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font: italic 600 9px/1 serif;
  text-transform: none;
  cursor: pointer;
}
.lr-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  max-width: 330px;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: var(--navy-deep);
  color: var(--brand-white);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  visibility: hidden;
}
.lr-tip.lr-tip-open { visibility: visible; }
@media (hover: hover) {
  .lr-info:hover ~ .lr-tip { visibility: visible; }
}
.lr-info:focus-visible ~ .lr-tip { visibility: visible; }
.lr-tiles { display: flex; gap: 8px; margin-top: 0.3rem; }
.lr-tile {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.lr-tile-label, .lr-tile-parts { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.lr-tile-parts { min-height: 1.3em; }
.lr-tile-value { margin-top: 1px; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--navy-deep); }
.lr-term-bar { height: 3px; margin-top: 8px; border-radius: 3px; background: var(--border); overflow: hidden; }
.lr-term-fill { height: 100%; background: var(--orange); }
.lr-term-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
/* "Dropped from in-force (unconfirmed)": not a confirmed cancellation, so a
   distinct outlined warning pill rather than the cancelled red. */
.status-dropped { background: #fff6e8; color: #94520a; box-shadow: inset 0 0 0 1px #e0a85a; }
.status-dropped .status-dot { background: #d8891d; }
.status-muted-red { background: #f8ebe9; color: #a2483b; }
.status-muted-red .status-dot { background: #c56a5d; }

/* Pre-mandate policies that must be compliant before they renew. */
.action-before-renewal {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: #fff3e0;
  color: #9a5a0c;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Claim video still converting to MP4 (status "transcoding"). */
.video-preparing { flex-direction: column; gap: 0.6rem; text-align: center; }

/* Admin page (admin.html): nothing page-specific yet -- it uses the shared
   panel, view-toggle and data-table styles. */

/* App pages start hidden and are revealed only after /api/me confirms a
   grant (see each page's init) -- someone without access never sees the
   shell, not even for the moment it takes to check. */
body.auth-pending {
  visibility: hidden;
}

/* ============================================================
   Shared data table -- ONE treatment for the lists on Underwriting,
   Claims and Loss Control. Each page keeps its own columns and data;
   they share header row, row height, type, dividers and the panel
   scrollbar. The list scrolls inside .data-scroll (sticky header), never
   the whole page. Expandable lists (Claims, Loss Control) put a parent
   row per insured and, when open, a child table directly underneath in
   the same panel.
   ============================================================ */
.data-scroll {
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: #c3c8d1 transparent;
}
.data-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.data-scroll::-webkit-scrollbar-track { background: transparent; }
.data-scroll::-webkit-scrollbar-thumb {
  background: #c3c8d1;
  border-radius: 999px;
  border: 3px solid var(--panel);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  height: 42px;
  padding: 0 0.75rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.86rem;
  line-height: 1.3;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table thead th {
  height: 38px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: #f8f9fb;
  position: sticky;
  top: 0;
  z-index: 2;
  /* sticky + border-collapse: draw the rule as a shadow so it travels with
     the pinned header (same fix the Underwriting table always had). */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
.data-table tbody tr:last-child > td { border-bottom: none; }
.data-table tbody tr:hover > td { background: #fafbfc; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .muted { color: var(--text-muted); }

/* Expandable parent row (one per insured) */
.data-row-parent { cursor: pointer; }
.data-row-parent:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.data-row-parent .data-row-title { font-weight: 600; color: var(--navy); }
.data-chevron {
  display: inline-block;
  width: 1.1rem;
  color: var(--navy);
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}
.data-row-parent[aria-expanded="true"] .data-chevron { transform: rotate(90deg); }
.data-row-parent[aria-expanded="true"] > td { background: #f2f5f9; border-bottom-color: transparent; }

/* Child block under an open parent: its own header row, indented */
.data-child-wrap > td {
  height: auto;
  padding: 0 0 0.35rem 2.25rem;
  background: #f2f5f9;
}
.data-table--child {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.data-table--child thead th {
  position: static;
  height: 32px;
  background: transparent;
}
.data-table--child td { height: 38px; }
.data-row-link { cursor: pointer; }
.data-row-link:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.data-child-note { margin: 0; padding: 0.6rem 0.75rem; }
.data-empty { margin: 0; padding: 1rem 0.75rem; }
.data-load-more { margin: 0.6rem 0.75rem; }


/* ============================================================
   MOBILE / TABLET (feat/mobile-responsive, 2026-10-10)
   Phone <= 600px (design target 390px), tablet 601-1024px (768px).
   Desktop (> 1024px) must render exactly as before: every rule below sits
   inside a max-width query, except the "display: none" for elements that
   only exist for phones (the hamburger and the filter-sheet buttons).
   JS side: responsive.js (table labels, filter sheet, Plotly), header.js
   (menu), detail-dialog.js (Back closes, iOS scroll lock).
   ============================================================ */

.nav-toggle,
.filter-sheet-toggle,
.filter-sheet-done,
.drawer-subview-close { display: none; }

/* ---------- phones AND tablets ---------- */
@media (max-width: 1024px) {
  /* Sub-views (VIN radius, claim) get an X next to Back. */
  .drawer-subview { position: relative; }
  .drawer-subview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  /* Tables that stay tables (Reinsurance) scroll sideways inside their panel. */
  .data-scroll, .table-scroll { -webkit-overflow-scrolling: touch; }
}

/* Touch: tap targets at least 44px, and nothing hover-only. */
@media (max-width: 1024px) and (pointer: coarse) {
  .vin-mileage-btn,
  .video-nav-btn,
  .radius-btn,
  .date-range-preset,
  .action-row-toggle,
  .action-row-jump,
  .quick-filter-btn,
  .view-toggle-option,
  .drawer-tab,
  .drawer-back-btn,
  .drawer-link-btn,
  .btn-reset,
  .pa-act-btn,
  .leakage-bulk-btn,
  .fleet-download-btn,
  .fleet-search-clear,
  .re-table-toggle > summary {
    min-height: 44px;
  }
  .drawer-close,
  .simple-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .drawer-back-btn { padding-top: 0.6rem; padding-bottom: 0.4rem; }
  .cell-truncate { cursor: default; }
}

/* ---------- tablet only ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .site-header-inner { gap: 0.75rem; padding: 0 1rem; }
  .app-nav { gap: 0.1rem; }
  .app-nav-link { padding: 0.4rem 0.55rem; font-size: 0.85rem; white-space: nowrap; }
  .site-header .sync-detail { display: none; }
  .site-header .sync-pill { white-space: nowrap; }

  .kpi-row-secondary,
  .re-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .queue-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Real tables, scrolling inside the panel, first column pinned. */
  .data-scroll { max-height: 70vh; }
  /* Underwriting pins Insured, its first column. */
  #insureds-table > tbody > tr > td:first-child,
  #insureds-table > thead > tr > th:first-child,
  :is(#lc-risk-table, #pa-table, #lc-camera-list .data-table) > tbody > tr > td:first-child,
  :is(#lc-risk-table, #pa-table, #lc-camera-list .data-table) > thead > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  #insureds-table > thead > tr > th:first-child,
  :is(#lc-risk-table, #pa-table, #lc-camera-list .data-table) > thead > tr > th:first-child { z-index: 3; background: #f8f9fb; }

  .detail-dialog { width: 90%; min-width: 0; max-height: 90vh; max-height: 90dvh; }
}

/* ---------- narrow: logo + hamburger (the inline nav needs ~720px) ---------- */
@media (max-width: 760px) {
  .site-header { position: relative; z-index: 60; }
  .site-header-inner {
    height: auto;
    min-height: 56px;
    padding: 0 0.5rem 0 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
    flex-wrap: wrap;
    gap: 0;
  }
  .brand { min-height: 56px; }
  .brand-logo { height: 28px; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--brand-white); outline-offset: -4px; }
  .nav-toggle-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-white); transition: transform 0.15s ease, opacity 0.15s ease; }
  .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .app-nav,
  .header-right { display: none; }
  .nav-open .header-right {
    display: flex;
    order: 3;
    flex-basis: 100%;
    margin: 0;
    padding: 0.65rem 0 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-open .app-nav {
    display: flex;
    order: 4;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: 2px;
    padding: 0.25rem 0 0.75rem;
  }
  .nav-open .app-nav-link[hidden] { display: none; }
  .nav-open .app-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.85rem;
    font-size: 1rem;
  }
  .site-header .sync-status { gap: 0.35rem 0.6rem; }
  .site-header .sync-detail { white-space: normal; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  /* -- Page frame -- */
  main {
    padding: 0 1rem 2rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  .page-title { font-size: 1.25rem; }
  .panel, section.panel { padding: 1rem; }
  .hint-text, .kpi-label-sm, .re-kpi-sub, .data-table thead th, .re-footnote, .re-chart-title { font-size: 0.75rem; }

  /* iPhone Safari zooms into any field under 16px. */
  input, select, textarea, .date-range-btn { font-size: 16px; }

  /* -- Filter bar -> "Filters" button + bottom sheet -- */
  .filter-sheet-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--navy);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
  .filter-sheet-toggle::before { content: ""; width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 70% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 40% 2px no-repeat; }
  .filter-sheet-toggle.has-active { border-color: var(--navy); background: var(--navy-bg, #eef2f7); }
  .filter-bar.filter-sheet-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 1.1rem 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 0 0 100vmax rgba(20, 24, 33, 0.45), 0 -8px 24px rgba(20, 24, 33, 0.18);
  }
  body.filter-sheet-active { overflow: hidden; }
  .filter-bar .filter-field,
  .filter-bar .date-range-field { flex: none; min-width: 0; width: 100%; }
  .filter-field select, .date-range-btn { min-height: 44px; }
  .filter-bar .btn-reset, .filter-bar .re-reset { width: 100%; min-height: 44px; align-self: stretch; }
  .filter-sheet-done {
    display: block;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--navy);
    color: white;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  /* The collapsed filter bar itself is hidden via html.qc-phone (below),
     not here: a display rule on .filter-bar inside this query changed text
     antialiasing in the desktop selects (Chrome), breaking pixel parity. */

  /* -- Date range popover -> bottom sheet -- */
  .date-range-pop,
  .date-range-pop.date-range-pop-right {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    z-index: 96;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 0 0 100vmax rgba(20, 24, 33, 0.45);
  }
  .date-range-presets { gap: 0.5rem; }
  .date-range-preset { min-height: 40px; padding: 0 0.9rem; font-size: 0.85rem; }
  .date-range-fields { grid-template-columns: 1fr; }
  .date-range-fields input { width: 100%; min-height: 44px; }
  .date-range-pop .btn-reset, .date-range-pop button[type="submit"], .date-range-apply { width: 100%; min-height: 44px; }

  /* -- KPI and action cards: 2 per row, odd last one spans -- */
  .kpi-row-secondary,
  .re-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  :is(.kpi-row-secondary, .re-kpis) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .queue-card-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .book-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-item { border-left: 0; border-top: 1px solid var(--border); }
  .bh-item:nth-child(-n + 2) { border-top: 0; }
  .bh-item:nth-child(even) { border-left: 1px solid var(--border); }
  .list-toolbar, .list-toolbar-right { align-items: stretch; flex-direction: column; width: 100%; }
  .list-toolbar-right input[type="text"] { min-width: 0; width: 100%; min-height: 44px; }
  .risk-filters-toggle { min-height: 44px; }
  .geo-summary .hint-text { flex-basis: 100%; }
  .kpi-card-sm { padding: 0.65rem 0.75rem; }
  .kpi-value-sm { font-size: 1.06rem; }
  .queue-card { padding: 0.7rem 0.75rem; }
  .drawer-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.6rem 1rem; }

  /* -- Toolbars and inputs -- */
  .table-toolbar { gap: 0.6rem; }
  .table-toolbar input[type="text"],
  .leakage-review-form input,
  .lc-rep-edit select { min-width: 0; width: 100%; }
  #insureds-count { margin-left: 0; }
  .quick-filter-row { gap: 0.4rem; }
  /* Wraps instead of scrolling (Admin has five options); the active option
     is filled directly because the sliding pill only moves sideways. */
  .view-toggle { display: flex; flex-wrap: wrap; width: 100%; border-radius: 16px; }
  .view-toggle-slider { display: none; }
  .view-toggle-option { flex: 1 0 auto; min-height: 44px; padding: 0 0.55rem; white-space: nowrap; }
  .view-toggle-option.active { background: var(--panel); box-shadow: 0 1px 3px rgba(20, 24, 33, 0.15); }

  /* -- List tables -> cards -- */
  .data-scroll, .table-scroll { max-height: none; overflow-y: visible; border: 0; border-radius: 0; }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table),
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody {
    display: block;
    width: 100%;
    border: 0;
    background: none;
  }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > thead { display: none; }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.9rem;
    margin: 0 0 0.6rem;
    padding: 0.75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody > tr > td {
    display: block;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    text-align: left;
  }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* Full-width rows (no data / headers / child blocks) carry no label. */
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody > tr > td[colspan] { grid-column: 1 / -1; }
  :is(#insureds-table, #lc-risk-table, #pa-table, #lc-camera-list .data-table, .claims-table) > tbody > tr > td[colspan]::before { content: none !important; }
  .data-table .num { text-align: left; }
  .cell-truncate, .cell-truncate-insured, .cell-truncate-agency { max-width: none; overflow: visible; text-overflow: clip; }
  /* Cards: no fixed widths, and the whole insured name wraps. */
  #insureds-table > colgroup { display: none; }
  #insureds-table .ins-line .ins-name, #insureds-table .ins-pol { white-space: normal; overflow: visible; }

  /* Primary identifier first, full width, no label: the Insured column. */
  #insureds-table > tbody > tr > td:first-child { order: -1; grid-column: 1 / -1; }
  #insureds-table > tbody > tr > td:first-child::before { content: none !important; }
  #insureds-table > tbody > tr > td:first-child .ins-name { font-size: 1rem; color: var(--navy); }
  #insureds-table > tbody > tr.row-sharp-drop { border-left: 4px solid var(--red); }
  #insureds-table > tbody > tr.past-terms-row,
  #insureds-table > tbody > tr.past-terms-more { display: block; padding: 0.4rem 0; border: 0; background: none; font-weight: 600; color: var(--text-muted); }
  #insureds-table > tbody > tr.past-terms-more button { width: 100%; min-height: 44px; }

  .claims-table > tbody > tr > td:first-child,
  #lc-risk-table > tbody > tr > td:first-child,
  #pa-table > tbody > tr > td:first-child { grid-column: 1 / -1; font-weight: 600; color: var(--navy); }
  .claims-table > tbody > tr > td:first-child::before,
  #lc-risk-table > tbody > tr > td:first-child::before,
  #pa-table > tbody > tr > td:first-child::before { content: none !important; }
  #pa-table .pa-actions { justify-content: stretch; flex-wrap: wrap; }
  #pa-table .pa-actions > * { flex: 1 1 auto; }
  #pa-table > tbody > tr > td:last-child { grid-column: 1 / -1; }

  /* Grouped lists (Loss Control cameras): the parent row
     is a tappable group card; when open, its child rows are sub-cards
     inside it. */
  #lc-camera-list .data-row-parent {
    min-height: 48px;
    cursor: pointer;
  }
  #lc-camera-list .data-row-parent > td:first-child { grid-column: 1 / -1; font-weight: 600; }
  #lc-camera-list .data-row-parent > td:first-child::before { content: none !important; }
  #lc-camera-list .data-row-parent[aria-expanded="true"] {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: #f2f5f9;
  }
  #lc-camera-list .data-child-wrap {
    display: block;
    margin-top: 0;
    padding: 0.2rem 0.6rem 0.6rem;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #f2f5f9;
  }
  #lc-camera-list .data-child-wrap > td { display: block; padding: 0; }
  #lc-camera-list .data-table--child { border: 0; background: none; }
  #lc-camera-list .data-table--child > tbody > tr {
    margin: 0.5rem 0 0;
    border-left: 3px solid var(--orange);
  }
  #lc-camera-list .data-table--child > tbody > tr > td:first-child { grid-column: 1 / -1; font-weight: 600; font-family: "SFMono-Regular", Consolas, monospace; }
  #lc-camera-list .data-table--child > tbody > tr > td:first-child::before { content: none !important; }
  .lc-rep-edit { flex-wrap: wrap; }

  /* Long lists page 50 at a time on phones (responsive.js). */
  .phone-more-hidden { display: none !important; }
  .phone-more { display: block; width: 100%; min-height: 48px; margin: 0.25rem 0 0; }

  /* -- Dialogs -> full-screen sheets -- */
  .detail-dialog-backdrop,
  .simple-modal-backdrop { padding: 0; align-items: stretch; }
  .detail-dialog,
  .simple-modal {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(24px);
  }
  .detail-dialog-backdrop.open .detail-dialog { transform: none; }
  .simple-modal {
    transform: none;
    display: flex;
    flex-direction: column;
    padding: 0 1rem 1.25rem;
    padding-top: env(safe-area-inset-top);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .simple-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    margin: 0 -1rem 0.75rem;
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .drawer-header { padding: 0.5rem 0.5rem 0.6rem 1rem; }
  .drawer-header-top { align-items: center; }
  .drawer-insured-name { font-size: 1.1rem; }
  .drawer-tabs { padding: 0 0.5rem; overflow-x: auto; scrollbar-width: none; }
  .drawer-tab { white-space: nowrap; padding: 0.7rem 0.7rem; }
  .drawer-content { padding: 0 1rem; }
  .drawer-back-btn { padding: 0.75rem 3.5rem 0.4rem 1rem; }
  .drawer-subview-header { padding: 0.4rem 1rem 0.75rem; flex-wrap: wrap; }
  .drawer-subview-content { padding: 0.9rem 1rem 1.25rem; }
  .drawer-subview-close { top: 0.15rem; }
  .drawer-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .pa-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .pa-dialog-actions > * { width: 100%; min-height: 44px; }

  /* -- Video -- */
  .video-player-wrap video { width: 100%; max-height: none; aspect-ratio: 16 / 9; }
  .video-nav-btn { min-height: 44px; padding: 0 1rem; }

  /* -- Maps and charts -- */
  #map { display: none; }                      /* state bars carry the same data */
  #geo-row { padding-top: 0; }
  #lc-heatmap { height: 300px; }
  .mileage-map { height: 60vh; height: 60dvh; min-height: 300px; }
  .claim-map { height: 260px; }
  .re-chart { height: 240px; }
  .re-chart.re-donut,
  .re-donut-cell[data-slice="industry"] .re-chart.re-donut { height: 320px; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .detail-dialog { transform: none; }
}

/* Phones: the filter bar collapses behind its "Filters" button. html.qc-phone
   is set by a one-line script in each page's <head> and kept in sync by
   responsive.js, so the bar never flashes before collapsing. */
html.qc-phone .filter-bar:not(.filter-sheet-open) { display: none; }

/* Admin: Audit Log (admin.js loadAudit / openAuditEntry). */
.audit-filters { margin-bottom: 0.75rem; }
.audit-filters input[type="search"], .audit-filters input[type="date"] { min-height: 2.25rem; }
.audit-row { cursor: pointer; }
.audit-row:hover, .audit-row:focus { background: var(--navy-bg); outline: none; }
.audit-more { margin-top: 0.75rem; }
.audit-modal { max-width: 46rem; width: 100%; }
.audit-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; margin: 0 0 0.9rem; font-size: 0.86rem; }
.audit-facts dt { color: var(--text-muted); }
.audit-facts dd { margin: 0; overflow-wrap: anywhere; }
.audit-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.audit-json { margin: 0.3rem 0 0; padding: 0.6rem; background: #f6f7f9; border-radius: 6px; font-size: 0.78rem;
  max-height: 40vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .audit-compare { grid-template-columns: 1fr; } }

/* ============================================================
   CLAIMS REPORTS (claude-notes/claims-reports-2026-10-27.md, P1; claims-reports.js).
   Shown only with CLAIMS_REPORTS_ENABLED. Layout after the clickable prototype: a views
   rail, the list on the right, a centered claim pop-up. ct- = Claims tab (the Reports
   tab's Claims section uses cr- in reports.css).
   ============================================================ */
.ct-shell { display: flex; min-height: calc(100vh - 64px); }
.ct-shell[hidden] { display: none; }
.ct-rail { width: 232px; flex: none; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 12px; }
.ct-rail-h { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  padding: 14px 10px 6px; }
.ct-rail-h[hidden] { display: none; }
.ct-rail-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; text-align: left; }
.ct-rail-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.4; }
.ct-rail-item:hover { background: #f2f5f8; }
.ct-rail-item:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.ct-rail-item.on { background: var(--navy-bg); color: var(--navy); font-weight: 600; }
.ct-rail-item.on svg { stroke: var(--navy); }
.ct-rail-count { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ct-rail-keys { margin: 22px 10px 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.8; }
.ct-jump { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; font: inherit; font-size: 0.82rem;
  color: var(--text-muted); cursor: pointer; }
.ct-jump:hover { border-color: var(--navy); }
.ct-shell kbd, .ct-popup kbd, .ct-palette kbd, .ct-keys kbd {
  display: inline-block; min-width: 1.4em; padding: 0 4px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--panel); font: 600 0.72rem/1.5 ui-monospace, Consolas, monospace; color: var(--text-muted);
  text-align: center; }
.ct-main { flex: 1; min-width: 0; padding: 0 28px 40px; }
.ct-mobile-pick { display: none; }
.ct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 0 14px; }
.ct-title { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text); }
.ct-sub { margin: 2px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.ct-head-actions, .ct-panel-actions { display: flex; gap: 8px; flex: none; }
.ct-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--text); cursor: pointer; }
.ct-btn:hover { border-color: var(--navy); }
.ct-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-btn-primary:hover { background: var(--navy-deep); }
.ct-link { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 0.84rem; color: var(--navy); cursor: pointer; }
.ct-link:hover { text-decoration: underline; }
.ct-link[disabled] { color: var(--text-muted); cursor: default; text-decoration: none; }
.ct-muted { color: var(--text-muted); font-weight: 400; }
.ct-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ct-toolbar[hidden] { display: none; }
.ct-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); min-width: 260px; }
.ct-search:focus-within { border-color: var(--navy); }
.ct-search input { border: 0; outline: none; font: inherit; font-size: 0.86rem; width: 100%; background: transparent; }
.ct-chips { display: contents; }
.ct-pill-select { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border: 1px dashed #c4cad3;
  border-radius: 999px; font-size: 0.82rem; color: var(--text-muted); background: var(--panel); }
.ct-pill-select select { border: 0; background: transparent; font: inherit; font-size: 0.82rem; color: var(--text); max-width: 220px; cursor: pointer; }
.ct-columns { position: relative; margin-left: auto; }
.ct-columns-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 24, 33, 0.16);
  padding: 8px; }
.ct-col-choice { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 0.84rem; border-radius: 6px; cursor: pointer; }
.ct-col-choice:hover { background: #f2f5f8; }
.ct-selbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--navy-bg); color: var(--navy); font-size: 0.86rem; font-weight: 600; }
.ct-selbar[hidden] { display: none; }
.ct-table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 230px); }
.ct-table .ct-sel { width: 40px; padding-right: 0; position: relative; }
.ct-table .ct-exp { width: 28px; padding: 0; }
.ct-table th.ct-sortable { cursor: pointer; user-select: none; }
.ct-table th.ct-sortable:hover { color: var(--text); }
.ct-row { cursor: pointer; }
.ct-row.is-selected > td { background: #eef4f9; }
.ct-row.is-focus > td { box-shadow: inset 3px 0 0 var(--orange); background: #fafbfc; }
.ct-claim-num { font-weight: 600; color: var(--navy); letter-spacing: 0.02em; }
.ct-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ct-cue { position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--orange); }
.ct-expand { border: 0; background: none; color: var(--navy); font-size: 0.9rem; cursor: pointer; padding: 4px; }
.ct-sub-row > td { height: auto; padding: 4px 12px 12px 76px; background: #f6f8fb; white-space: normal; }
.ct-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.ct-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ct-chip-open { background: var(--green-bg); color: var(--green); }
.ct-chip-closed { background: #eceef1; color: #565d6b; }
.ct-chip-other { background: var(--amber-bg); color: var(--amber); }
.ct-ims-hint { margin-left: 4px; font-size: 0.72rem; color: var(--amber); }
.ct-group-head { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; font-size: 0.85rem; color: var(--navy); }
.ct-empty { padding: 16px 4px; }
.ct-more { margin: 10px 0; }
.ct-notice { padding: 12px 14px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 0.88rem; }
.ct-claimants { white-space: normal; }
.ct-claimants td { height: auto; padding-top: 7px; padding-bottom: 7px; }
.ct-claimant { font-weight: 600; }
.ct-coverage { font-size: 0.76rem; color: var(--text-muted); }
.ct-n { width: 32px; color: var(--text-muted); }

/* Overview (mockup 01) */
.ct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ct-kpi { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--navy); border-radius: var(--radius); padding: 14px 16px; }
.ct-kpi-orange { border-top-color: var(--orange); }
.ct-kpi-green { border-top-color: var(--green); }
.ct-kpi-amber { border-top-color: #d9a441; }
.ct-kpi-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ct-kpi-value { font-size: 1.9rem; font-weight: 600; color: var(--navy); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ct-kpi-sub { font-size: 0.8rem; color: var(--text-muted); }
.ct-section-title { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; }
.ct-section-title .ct-muted { text-transform: none; letter-spacing: 0; font-size: 0.82rem; margin-left: 6px; }
.ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ct-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ct-panel .ct-table-wrap { border: 0; border-radius: 0; max-height: 520px; }
.ct-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.ct-stat-row { cursor: pointer; }
.ct-bar { display: inline-block; height: 7px; border-radius: 4px; background: var(--navy); margin-right: 8px; vertical-align: middle; }
.ct-total > td { font-weight: 700; }

/* The claim pop-up (5.6) */
.ct-popup { width: 1040px; max-width: calc(100vw - 2rem); max-height: 90vh; }
#claim-popup-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ct-popup-head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 22px 12px; border-bottom: 1px solid var(--border); }
.ct-popup-line1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ct-popup-num { font-size: 1.25rem; font-weight: 700; color: var(--navy); letter-spacing: 0.03em; }
.ct-popup-line2 { margin-top: 4px; font-size: 0.86rem; color: var(--text-muted); }
.ct-popup-line2 strong { color: var(--text); }
.ct-popup-nav { display: flex; align-items: center; gap: 6px; flex: none; font-size: 0.84rem; }
.ct-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; margin-left: 8px; }
.ct-popup-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.ct-popup-left { padding: 16px 22px; border-right: 1px solid var(--border); }
.ct-popup-right { padding: 16px 22px; min-width: 0; }
.ct-h { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 8px; }
.ct-h:first-child { margin-top: 0; }
.ct-h strong { color: var(--text); margin-left: 4px; }
.ct-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 6px; background: #eef1f5; font-size: 0.68rem;
  font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ct-adjuster { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: #fafbfc; }
.ct-clip { margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.ct-detail { margin-bottom: 9px; }
.ct-detail-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2px; }
.ct-detail-value { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; background: #fafbfc; white-space: pre-wrap; }
.ct-not-set { color: var(--text-muted); font-style: italic; }
.ct-fact { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.84rem; }
.ct-fact > span:first-child { color: var(--text-muted); flex: none; }
.ct-fact > span:last-child { text-align: right; }
.ct-yes { color: var(--green); font-weight: 600; }
.ct-activity { list-style: none; margin: 0; padding: 0; }
.ct-activity-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 0.86rem; border-bottom: 1px solid #f0f2f5; }
.ct-dot-ims { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 2px solid #7b9cb8; position: relative; top: 1px; }
.ct-activity-text { flex: 1; min-width: 0; }
.ct-activity-when { flex: none; font-size: 0.8rem; color: var(--text-muted); }
.ct-tag { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--navy-bg); color: var(--navy); font-size: 0.68rem; font-weight: 700; }
.ct-history { font-size: 0.78rem; margin: 8px 0 0; }
.ct-popup-foot { flex: none; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 22px;
  border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); }
.ct-popup-loading, .ct-popup-error { padding: 24px; }

/* Ctrl / Cmd K */
.ct-palette-backdrop { align-items: flex-start; padding-top: 12vh; }
.ct-palette { width: 640px; max-width: calc(100vw - 2rem); background: var(--panel); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(20, 24, 33, 0.28); outline: none; }
.ct-palette input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); padding: 14px 18px; font: inherit; font-size: 1rem; outline: none; }
.ct-palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.ct-pal-h { padding: 8px 10px 4px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ct-pal-item { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; text-align: left; }
.ct-pal-item.on, .ct-pal-item:hover { background: var(--navy-bg); }
.ct-pal-empty { padding: 10px; }
.ct-palette-foot { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--text-muted); }
.ct-keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; padding: 4px 4px 8px; font-size: 0.88rem; }
.ct-keys dd { margin: 0; }
.ct-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120; padding: 10px 16px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(20, 24, 33, 0.18); font-size: 0.88rem; }
.ct-toast[hidden] { display: none; }

@media (max-width: 1024px) {
  .ct-shell { display: block; }
  .ct-rail { display: none; }
  .ct-main { padding: 0 16px 32px; }
  .ct-mobile-pick { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; }
  .ct-mobile-pick select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
  .ct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-two { grid-template-columns: 1fr; }
  .ct-popup-body { grid-template-columns: 1fr; }
  .ct-popup-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .ct-head { flex-direction: column; }
  .ct-kpis { grid-template-columns: 1fr; }
  .ct-search { min-width: 0; width: 100%; }
  .ct-columns { margin-left: 0; }
  .ct-table-wrap { max-height: none; }
  .ct-popup { width: 100%; max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  #claim-popup-backdrop { padding: 0; }
  .ct-popup-head { flex-direction: column; }
}

/* Claims reports P2 (CLAIMS_WEEKLY_ENABLED): in-place actions, the pop-up's controls, My desk,
   saved views, notifications. */
.ct-flag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px dashed #c4cad3; border-radius: 999px;
  background: none; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.ct-flag:hover { border-color: var(--navy); color: var(--navy); }
.ct-flag.on { border-style: solid; }
.ct-flag-flash_report.on { background: var(--amber-bg); border-color: #f2c76a; color: var(--amber); }
.ct-flag-potential_qs.on { background: var(--purple-bg); border-color: #cdb6f2; color: var(--purple); }
.ct-flag-dash_cam_event.on { background: var(--navy-bg); border-color: #a9c4da; color: var(--navy); }
span.ct-flag { cursor: default; }
.ct-note-col { max-width: 260px; }
.ct-note-cell { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ct-was { font-size: 0.74rem; }
.ct-assign, .ct-input { font: inherit; font-size: 0.86rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); max-width: 100%; }
.ct-input:focus, .ct-assign:focus { outline: 2px solid var(--navy-bg); border-color: var(--navy); }
.ct-popup-left .ct-input { width: 100%; box-sizing: border-box; }
.ct-popup-left textarea.ct-input { resize: vertical; }
.ct-date { width: auto; }
.ct-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.86rem; }
.ct-small { font-size: 0.76rem; margin-top: 2px; }
.ct-saved { margin-left: 8px; font-size: 0.8rem; font-weight: 600; color: var(--green); }
.ct-saved[hidden] { display: none; }
.ct-view-only { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #eef1f5; color: var(--text-muted); font-size: 0.84rem; }
.ct-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.9rem; }
.ct-switch-end { display: inline-flex; align-items: center; gap: 8px; }
.ct-switch { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: #d4d9e1; position: relative; cursor: pointer;
  transition: background 0.15s ease; margin: 0; }
.ct-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: left 0.15s ease; }
.ct-switch:checked { background: var(--navy); }
.ct-switch:checked::after { left: 17px; }
.ct-switch:disabled { opacity: 0.5; cursor: default; }
.ct-ticket { margin-top: 6px; text-decoration: none; }
.ct-ticket-help { margin-top: 6px; }
@media (max-width: 480px) {
  .ct-ticket { width: 100%; justify-content: center; }
}
.ct-note-box { position: relative; margin: 14px 0 4px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.ct-note-box textarea { width: 100%; box-sizing: border-box; border: 0; resize: vertical; font: inherit; font-size: 0.9rem; outline: none; }
.ct-note-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ct-mention-list { position: absolute; left: 8px; top: 64px; z-index: 5; min-width: 240px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 24, 33, 0.16); padding: 4px; }
.ct-mention-list[hidden] { display: none; }
.ct-seg { display: inline-flex; margin-left: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  text-transform: none; letter-spacing: 0; }
.ct-seg button { border: 0; background: var(--panel); padding: 3px 10px; font: inherit; font-size: 0.76rem; color: var(--text-muted); cursor: pointer; }
.ct-seg button.on { background: var(--navy-bg); color: var(--navy); font-weight: 600; }
.ct-dot-qc { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--navy); position: relative; top: 1px; }
.ct-act-flag_set .ct-dot-qc, .ct-act-flag_clear .ct-dot-qc { background: var(--orange); }
.ct-act-detail_set .ct-dot-qc, .ct-act-undo .ct-dot-qc { background: var(--green); }
.ct-act-video_requested .ct-dot-qc { background: #8a909c; }
.ct-toast { display: flex; align-items: center; gap: 10px; }
.ct-toast[hidden] { display: none; }
.ct-bell-wrap { position: relative; }
.ct-bell-wrap[hidden] { display: none; }
.ct-bell-menu { min-width: 340px; }
.ct-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; font-size: 0.86rem; }
.ct-unread { font-weight: 600; background: #f6f9fc; }
.ct-saved-item { display: flex; align-items: center; }
.ct-saved-item .ct-rail-item { flex: 1; min-width: 0; }
.ct-saved-act { visibility: hidden; padding: 0 3px; }
.ct-saved-item:hover .ct-saved-act, .ct-saved-act:focus { visibility: visible; }
.ct-desk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ct-desk-hello { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.ct-desk-list { list-style: none; margin: 0; padding: 0; }
.ct-desk-item, .ct-desk-mention { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid #f0f2f5; cursor: pointer; font-size: 0.88rem; }
.ct-desk-item:hover, .ct-desk-mention:hover { background: #fafbfc; }
.ct-desk-reason { font-size: 0.8rem; color: var(--orange); margin-top: 2px; }
.ct-desk-empty { padding: 14px; cursor: default; }
.ct-desk-claims { margin-top: 20px; }

/* Claims reports P3 (CLAIMS_CLIP_ENABLED): the TruckerCloud clip check in the pop-up's clip area. */
.ct-tc-box { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 0.86rem; }
.ct-tc-box:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ct-clip-state { margin-top: 4px; }
.ct-err { color: var(--red); }
/* Claim details: accident time and location (PR B) */
.ct-loc-form { display: grid; gap: 6px; }
.ct-loc-field { display: grid; gap: 2px; font-size: 0.8rem; color: var(--muted, #6b7280); }
.ct-time { max-width: 130px; }