/* ===== BROKERSPHERE — DARK THEME =====
   Source palette: BrokerSphere_Brand_Guidelines_Updated.pdf (v1.0, 2026),
   adapted for a dark shell — Sphere Navy is now the page itself, not just
   the nav bar, with cards as a lighter "surface" tone above it rather
   than white. Aptos isn't on Google Fonts — Arial is the brand guide's
   own stated fallback. Most VCIB staff are on Windows/Microsoft 365 so
   will see real Aptos. */
:root {
  --bg-page: #050A14;         /* Sphere Navy — the page itself */
  --bg-surface: #111B2E;      /* cards, tables, panels — one step up from the page */
  --bg-surface-2: #182740;    /* modals, hovered rows, dropdown surfaces — one step further up */
  --bg-input: #0C1524;        /* recessed fields (inputs/selects/textareas) */
  --border: #223049;          /* default hairline border on dark surfaces */
  --border-strong: #2E3F5C;   /* more visible border — inputs, header underlines */

  --text: #E9EEF6;            /* primary text on dark */
  --text-soft: #93A1B7;       /* secondary text / labels */
  --text-faint: #6C7A91;      /* timestamps, disabled, placeholders */

  --accent: #087EF5;          /* Sphere Blue — primary action */
  --accent-hover: #2E93FF;    /* brighter on hover, not darker — standard for dark UI */
  --accent-tint: rgba(8, 126, 245, 0.16);
  --accent-tint-text: #7CB8FF;

  --success: #2FD9A2;
  --success-tint: rgba(47, 217, 162, 0.14);
  --amber: #F6C567;
  --amber-tint: rgba(246, 197, 103, 0.16);
  --alert: #F1726F;
  --alert-tint: rgba(241, 114, 111, 0.16);

  --font-display: Aptos, "Aptos Display", Arial, sans-serif;
  --font-body: Aptos, Arial, sans-serif;

  --shadow-card: 0 0 0 1px var(--border);
  --shadow-modal: 0 0 0 1px var(--border-strong), 0 24px 60px rgba(0, 0, 0, 0.45);
  --radius-card: 12px;
  --radius-control: 8px;

  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text);
  margin: 0;
}
/* The nav bar is a direct child of body (unconstrained, full viewport width);
   everything else lives inside this centered column. Deliberately NOT done
   by constraining body itself and bleeding the nav bar back out with a
   calc(50% - 50vw) trick — that only works when the constrained element's
   width tracks the viewport 1:1, which breaks the moment max-width actually
   kicks in (any screen wider than ~1150px): "50%" of the capped column and
   "50vw" of the real viewport diverge, producing a large wrong offset that
   shoved the nav bar's logo and first buttons off-screen. Keeping body
   itself unconstrained sidesteps the whole class of bug. */
.pageContent {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

/* The client self-service page (client.html) has no nav bar — narrower and
   centered, with the logo standing in for the chrome the internal app gets
   from the nav bar. */
.clientPageContent {
  max-width: 720px;
}
.clientLogo {
  display: block;
  height: 48px;
  margin: 24px auto 8px;
}
h1 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
}
h2 {
  font-family: var(--font-display);
  color: var(--text);
}

label {
  display: inline-block;
  width: 140px;
  font-weight: bold;
}
input {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  width: 220px;
  background-color: var(--bg-input);
  color: var(--text);
}
button {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 15px;
  font-family: var(--font-body);
}
/* :where() keeps this at zero specificity so any styled button class
   (.linkBtn, .analysisChoiceCard, .backBtn, ...) can set its own hover
   instead of being overridden by this default blue. */
:where(button):hover {
  background-color: var(--accent-hover);
}

#leadsList p {
  background-color: var(--bg-surface);
  color: var(--text);
  padding: 12px;
  border-radius: var(--radius-card);
  border-left: 4px solid var(--border-strong);
  margin: 8px 0;
}
.leadCard {
  background-color: var(--bg-surface);
  color: var(--text);
  padding: 14px;
  border-radius: var(--radius-card);
  border-left: 4px solid var(--text-soft);
  margin: 10px 0;
  line-height: 1.6;
}
.statusTag {
  background-color: var(--text-soft);
  color: var(--bg-page);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
}
.deleteBtn {
  background-color: var(--alert);
  color: #2A0806;
  border: none;
  padding: 4px 12px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.deleteBtn:hover {
  background-color: #f58e8b;
}

.analysisBtn {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 13px;
}
.analysisBtn:hover {
  background-color: var(--accent-hover);
}

.analysisBox {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  margin: 20px 0;
  box-shadow: var(--shadow-card);
}

.answerBox {
  width: 320px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  background-color: var(--bg-input);
  color: var(--text);
}
.answerBox:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.analysisBox label {
  font-weight: bold;
  width: auto;
}
.analysisBox hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.analysisProgress {
  display: inline-block;
  background-color: var(--accent-tint);
  color: var(--accent-tint-text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  margin-top: 6px;
}

.analysisSection {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.analysisSection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.analysisQuestion {
  margin: 14px 0;
}

.followUpQuestion {
  margin-left: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--border);
}

.saveAnalysisBtn {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 11px 20px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}
.saveAnalysisBtn:hover {
  background-color: var(--accent-hover);
}
.savedMsg {
  color: var(--text-soft);
  font-weight: bold;
  margin-top: 10px;
}

.scheduleTableWrap {
  overflow-x: auto;
  margin: 10px 0;
}

.scheduleTable {
  border-collapse: collapse;
  width: 100%;
}

.scheduleTable th,
.scheduleTable td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.scheduleTable th {
  background-color: var(--bg-surface-2);
  color: var(--text);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.scheduleTable .answerBox {
  min-width: 130px;
}

.addRowBtn {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 6px;
}
.addRowBtn:hover {
  background-color: var(--accent-hover);
}

.removeRowBtn {
  background-color: transparent;
  color: var(--alert);
  border: 1px solid var(--alert);
  padding: 4px 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 12px;
}
.removeRowBtn:hover {
  background-color: var(--alert-tint);
}

/* ---- Insurer Settings: Insurer -> Product drill-down ---- */
.binderProductList {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.binderProductList li {
  padding: 4px 0;
}

/* The one style for every "click this name to open it" link — a soft
   blue chip that fills solid on hover, matching the other buttons. */
.linkBtn {
  background-color: var(--accent-tint);
  color: var(--accent-tint-text);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 3px 12px;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.linkBtn:hover {
  background-color: var(--accent);
  color: white;
}

.binderEmptyHint {
  color: var(--text-soft);
  font-size: 13px;
  margin: 4px 0;
}

.binderRuleList {
  list-style: disc;
  padding-left: 20px;
  margin: 4px 0 8px;
}
.binderRuleList li {
  margin-bottom: 4px;
}

.binderRuleListDimmed {
  color: var(--text-soft);
}

.binderInheritedLabel {
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 10px 0 2px;
}

/* ---- Insurer Settings: grid, back button, summary card ---- */
/* Used together with .backBtn (the shared look) — only adds spacing. */
.binderBackBtn {
  margin: 4px 0 14px;
}

.binderPageTitle {
  margin: 0 0 12px;
}

.binderSummaryCard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 24px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 14px 18px;
  margin: 0 0 12px;
}
.binderSummaryItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.binderSummaryLabel {
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.binderSummaryValue {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.binderCheckGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 14px;
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 12px;
}
.binderCheckItem input,
.binderReviewCheck input {
  width: auto;
  padding: 0;
  margin: 0;
}
.binderCheckItem,
.binderReviewCheck {
  width: auto;
}
.binderCheckItem,
.modalBox .binderCheckItem,
.formGrid .field .binderCheckItem {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.binderReviewCheck {
  display: block;
  margin: 12px 0 18px;
  font-size: 14px;
}

.binderEditBtn {
  margin-bottom: 18px;
}

.binderMuted {
  color: var(--text-soft);
}

.binderGrid .binderInsurerRow td {
  background-color: var(--bg-surface-2);
  font-weight: 600;
}
.binderGrid .binderInsurerRow td.binderMuted {
  font-weight: 400;
}
.binderGrid .binderProductRow td {
  background-color: var(--bg-surface);
}
.binderGrid .binderProductRow:hover td {
  background-color: var(--bg-surface-2);
}
.binderGrid .binderProductCell {
  padding-left: 28px;
}
.binderGrid td,
.binderGrid th {
  white-space: nowrap;
}

/* ---- Plain Section/Status/Detail table (still used a couple of places) ---- */
.summaryList {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}
.summaryList th,
.summaryList td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  text-align: left;
}
.summaryList th {
  background-color: var(--bg-surface-2);
  color: var(--text);
}
.summaryTaken td:nth-child(2) {
  color: var(--success);
  font-weight: bold;
}
.summaryNotTaken td:nth-child(2) {
  color: var(--text-faint);
}

/* ---- Needs Analysis Summary: disclosure block + combined financial table
   (mirrors the Excel Summary sheet — same shared buildFinancialSummary()/
   disclosureRows() data from questionSets.js) ---- */
.summaryDisclosureTable {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0 22px;
  font-size: 14px;
}
.summaryDisclosureTable td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--border);
  /* middle (not top) keeps a short value like "Yes" level with its label
     even when the label itself wraps to two lines — top-alignment left a
     block of dead space under short values, which read as misaligned. */
  vertical-align: middle;
  line-height: 1.35;
  color: var(--text);
}
.summaryDisclosureTable td:first-child {
  color: var(--text-soft);
  font-weight: 600;
  width: 48%;
}
.summaryDisclosureTable tr:last-child td {
  border-bottom: none;
}

.summaryFinancialTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.summaryFinancialTable th {
  background-color: var(--bg-page);
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
}
.summaryFinancialTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.4;
  vertical-align: top;
  /* Section/Status/money/Excess are short values — nowrap keeps "R" from
     splitting onto its own line above the amount, and "✓ Taken" from
     splitting across two lines, which is what made rows look cramped and
     uneven height. .wrap (Risk/Description and Detail — the only columns
     that genuinely need to wrap, e.g. a full address or claims sentence)
     opts back in below. Keyed off an explicit class, not nth-child — a
     section-total row's colspan='2' placeholder collapses two logical
     columns into one DOM cell, so positional selectors don't land on the
     same columns there as they do in an item row. */
  white-space: nowrap;
}
.summaryFinancialTable td.wrap {
  white-space: normal;
}
.summaryFinancialTable td.num,
.summaryFinancialTable th:nth-child(5),
.summaryFinancialTable th:nth-child(6) {
  text-align: right;
}
.summarySectionRow {
  font-weight: 700;
  background-color: var(--bg-surface-2);
}
.summarySectionRow.summaryTaken td:first-child {
  color: var(--text);
}
.summarySectionRow.summaryNotTaken {
  font-weight: 600;
  color: var(--text-faint);
  background-color: transparent;
}
.summarySectionRow.summaryExpandable {
  cursor: pointer;
}
.summarySectionRow.summaryExpandable:hover {
  background-color: var(--bg-surface-3, var(--bg-surface-2));
}
.summaryToggleIcon {
  display: inline-block;
  width: 14px;
  color: var(--text-soft);
  font-size: 11px;
}
.summaryItemRow td {
  color: var(--text-soft);
}
.summaryTotalRow td {
  font-weight: 700;
  color: var(--text);
  border-top: 2px solid var(--border-strong);
  border-bottom: none;
  padding-top: 10px;
}
.summaryTableActions {
  text-align: right;
  margin-bottom: 6px;
  font-size: 12.5px;
}

/* ---- Client self-service form: POPIA/consent notice above Submit ---- */
.disclosureBox {
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.disclosureBox h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 13.5px;
}
.disclosureBox h4:not(:first-child) {
  margin-top: 14px;
}
.disclosureBox p {
  margin: 0;
}

.analysedTag {
  display: inline-block;
  background-color: var(--success-tint);
  color: var(--success);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  margin-top: 6px;
}

#statsStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
}

.statCard {
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--accent);
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.statNum {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: bold;
  color: var(--text);
}

.statLbl {
  font-size: 13px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.toggleFormBtn {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0;
}
.toggleFormBtn:hover {
  background-color: var(--accent-hover);
}

#formArea {
  background-color: var(--bg-surface);
  padding: 20px;
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

#filterBar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
  align-items: center;
}
#filterBar h2 {
  margin: 0;
  white-space: nowrap;
}
#filterBar input, #filterBar select {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--bg-input);
  color: var(--text);
}
#searchBox {
  flex: 1;
  min-width: 180px;
}

.clearBtn {
  background-color: var(--text-soft);
  color: var(--bg-page);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 600;
}
.clearBtn:hover {
  background-color: #a9b6c8;
}

#leadsTable {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}

#leadsTable th {
  background-color: var(--bg-surface);
  color: var(--text-soft);
  text-align: left;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-strong);
}
#leadsTable th.sortableHeader {
  cursor: pointer;
  user-select: none;
}
#leadsTable th.sortableHeader:hover {
  color: var(--text);
}

#leadsTable td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
#leadsTable tbody tr:hover {
  background-color: var(--bg-surface-2);
}
#leadsTable select {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text);
}
#leadsTable .analysisBtn,
#leadsTable .deleteBtn {
  margin: 2px;
  white-space: nowrap;
}

/* Generic data table — used by Binder Rules, Support Requests, Underwriting
   Tools, and anywhere else that needs a plain "rows of records" table
   without #leadsTable's lead-specific extras (sortable headers, status
   selects). Never had its own styling before, so every one of those
   screens was rendering with the browser's unstyled default table look. */
.dataTable {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 14px;
  box-shadow: var(--shadow-card);
  margin: 12px 0 20px;
}
.dataTable th {
  background-color: var(--bg-surface);
  color: var(--text-soft);
  text-align: left;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-strong);
}
.dataTable td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.dataTable tbody tr:last-child td {
  border-bottom: none;
}
.dataTable tr.clickableRow {
  cursor: pointer;
}
.dataTable tr.clickableRow:hover {
  background-color: var(--bg-surface-2);
}

.breadcrumb {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.leadRow {
  cursor: pointer;
}
.detailRow td {
  background-color: var(--bg-surface-2);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-soft);
  padding: 14px 16px;
}

/* ---- Status pills (leads table dropdown + badges) ---- */
.status-progress {
  background-color: var(--amber-tint);
  color: var(--amber);
  font-weight: bold;
  border: 1px solid rgba(246, 197, 103, 0.35);
  border-radius: 20px;
  padding: 6px 10px;
}
.status-won {
  background-color: var(--success-tint);
  color: var(--success);
  font-weight: bold;
  border: 1px solid rgba(47, 217, 162, 0.35);
  border-radius: 20px;
  padding: 6px 10px;
}
.status-lost {
  background-color: var(--alert-tint);
  color: var(--alert);
  font-weight: bold;
  border: 1px solid rgba(241, 114, 111, 0.35);
  border-radius: 20px;
  padding: 6px 10px;
}

.stat-won {
  border-top-color: var(--success);
}
.stat-won .statNum {
  color: var(--success);
}

.modalOverlay {
  position: fixed;
  inset: 0;            /* exactly the visible screen — was width/height 100% + padding, i.e. taller and wider than the screen */
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 40px 16px;
}

/* Every .modalOverlay shares z-index 1000, so which one paints on top of
   another comes down to DOM order — #confirmModalOverlay is declared near
   the top of index.html, so without this it rendered BEHIND a
   later-declared modal (e.g. New Lead) left open underneath it, making a
   validation popup triggered mid-form invisible. This needs to win
   against every other modal it can be triggered on top of, but still sit
   below the toast stack (z-index 2000). */
#confirmModalOverlay {
  z-index: 1500;
}
.modalBox {
  box-sizing: border-box;   /* width:100% + padding used to overflow the overlay on narrow screens */
  background-color: var(--bg-surface-2);
  border-radius: var(--radius-card);
  padding: 24px;
  width: 100%;
  max-width: 808px;
  box-shadow: var(--shadow-modal);
  color: var(--text);
}
.confirmModalBox {
  max-width: 420px;
}
.confirmModalBox p {
  margin: 0 0 20px;
  line-height: 1.5;
}
.confirmModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.modalHeader h2 {
  margin: 0;
}
.modalClose {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0 6px;
}
.modalClose:hover {
  color: var(--text);
}

.modalBox input[type="text"],
.modalBox select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  margin-top: 4px;
  background-color: var(--bg-input);
  color: var(--text);
}

/* A clear highlight when the field is clicked into */
.modalBox input[type="text"]:focus,
.modalBox select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.modalBox label {
  display: block;
  font-weight: bold;
  color: var(--text);
  margin-top: 14px;
  font-size: 14px;
}

.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px 20px;
}

.field {
  display: flex;
  flex-direction: column;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  margin-top: 0;
  margin-bottom: 4px;
}

.modalBox textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  margin-top: 4px;
  resize: vertical;
  background-color: var(--bg-input);
  color: var(--text);
}
.modalBox textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Labels — smaller, calmer, more refined */
.formGrid .field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

/* Inputs — a touch softer and more even */
.modalBox input[type="text"],
.modalBox select,
.modalBox textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  background-color: var(--bg-input);
}
.modalBox input[type="text"]:focus,
.modalBox select:focus,
.modalBox textarea:focus {
  background-color: #0F1A2E;
}

/* Header — a little more presence */
.modalHeader {
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.modalHeader h2 {
  font-size: 22px;
}

/* Save button — give it room, pin it tidily below the grid */
.modalBox > button[onclick="saveLead()"] {
  margin-top: 24px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-control);
}

.analysisTopBar {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.backBtn {
  background-color: var(--bg-surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 9px 16px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.backBtn:hover {
  background-color: #1F3050;
  border-color: var(--accent);
}
.editBtn {
  background-color: var(--text-soft);
  color: var(--bg-page);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.editBtn:hover {
  background-color: #a9b6c8;
}

/* ===== NAV BAR =====
   Now that the page itself is Sphere Navy, the nav bar no longer needs to
   be a separate floating card to read as "dark" — instead it becomes a
   true full-width header (edge-to-edge, no rounding) with just a hairline
   underneath to separate it from content. The logo is used exactly as
   supplied — the sphere mark with "BrokerSphere" and the tagline baked
   into one image, not split into a separate HTML wordmark. */
.navBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background-color: var(--bg-page);
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.navBrand {
  display: inline-flex;
  align-items: center;
  margin-right: 26px;
}
.navLogo {
  height: 76px;
  width: auto;
}
.navBtn {
  background-color: transparent;
  color: var(--text-soft);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.navBtn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.navBtn.active {
  background-color: var(--accent);
  color: white;
}
.navRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.navUserName {
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
}
.navLogoutBtn {
  border: 1px solid var(--border);
}

/* ===== TOAST NOTIFICATIONS ===== */
#toastStack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.toast {
  background-color: var(--bg-surface-2);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-modal);
  padding: 12px 14px 12px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 4px solid var(--accent);
  font-size: 13.5px;
  color: var(--text);
  animation: toastIn 0.18s ease-out;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error { border-left-color: var(--alert); }
/* A "loading" toast represents an actual wait (schedule reading, quote
   submission) rather than a quick success/error blip — centering it makes
   that wait state hard to miss, instead of a small corner card that's easy
   to look past while something's actually processing. Its own entrance
   animation (toastInCenter, below) keeps the centering transform in place
   throughout — reusing the default toastIn's translateY would fight with
   translate(-50%,-50%) and make it visibly jump into place. */
.toast.toast-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  min-width: 280px;
  justify-content: center;
  text-align: center;
  padding: 16px 24px;
  animation: toastInCenter 0.18s ease-out;
}
@keyframes toastInCenter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.toast .toastSpinner {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--accent-tint);
  border-top-color: var(--accent);
  animation: toastSpin 0.7s linear infinite;
}
.toast .toastIcon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1;
}
.toast.toast-success .toastIcon { color: var(--success); }
.toast.toast-error .toastIcon { color: var(--alert); }
@keyframes toastSpin {
  to { transform: rotate(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#usersTable {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}
#usersTable th {
  background-color: var(--bg-surface);
  color: var(--text-soft);
  text-align: left;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-strong);
}
#usersTable td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
#usersTable select {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text);
}

#activityFeed {
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  padding: 6px 16px;
  box-shadow: var(--shadow-card);
}
.activityItem {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.activityItem:last-child {
  border-bottom: none;
}
.activityUser {
  font-weight: bold;
  color: var(--text);
}
.activityDetail {
  color: var(--text-soft);
}
.activityTime {
  color: var(--text-faint);
  font-size: 12.5px;
  float: right;
}

.dashboardColumns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.dashboardCol h2 {
  margin-top: 0;
}

/* ---- To Do list — pending Needs Analysis reviews + open Support Requests ---- */
#toDoList {
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  padding: 6px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.toDoItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.toDoItem:last-child {
  border-bottom: none;
}
.toDoMain {
  flex: 1;
  min-width: 0;
}
.toDoTag {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-right: 6px;
}
.toDoTag-analysis {
  background-color: var(--accent-tint);
  color: var(--accent-tint-text);
}
.toDoTag-support {
  background-color: var(--amber-tint);
  color: var(--amber);
}
.toDoTag-newlead {
  background-color: var(--success-tint);
  color: var(--success);
}
.toDoTag-reminder {
  background-color: var(--alert-tint);
  color: var(--alert);
}
.toDoLabel {
  color: var(--text);
}
.toDoAssignee {
  color: var(--text-soft);
  font-size: 12.5px;
  margin-left: 4px;
}
.toDoTime {
  color: var(--text-faint);
  font-size: 12.5px;
  float: right;
}
.toDoActionBtn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12.5px;
}

/* ---- Atlas — the Dashboard chat assistant ---- */
.assistantCard {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.assistantHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.assistantAvatar {
  background-color: var(--accent-tint);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: atlasSway 3.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.atlasFigure {
  width: 34px;
  height: 34px;
}
.atlasGlobeGroup {
  transform-origin: 22px 22px;
  animation: atlasGlobeSpin 7s linear infinite;
}
.atlasGlobe {
  fill: var(--accent);
}
.atlasMeridian {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.1;
  opacity: 0.75;
}
.atlasEye {
  fill: var(--text);
  transform-origin: center;
  animation: atlasBlink 4.5s ease-in-out infinite;
}
.atlasMouth {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.atlasArm {
  transform-origin: 33px 28px;
  animation: atlasWave 12s ease-in-out infinite;
}
.atlasArmLine {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.atlasHand {
  fill: var(--accent-hover);
}
@keyframes atlasSway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-2px); }
}
@keyframes atlasGlobeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes atlasBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.15); }
}
@keyframes atlasWave {
  0%, 78%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-16deg); }
  86% { transform: rotate(12deg); }
  90% { transform: rotate(-10deg); }
  94% { transform: rotate(6deg); }
  97% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .assistantAvatar, .atlasGlobeGroup, .atlasEye, .atlasArm { animation: none; }
}
.assistantName {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 14.5px;
}
.assistantTagline {
  color: var(--text-faint);
  font-size: 12px;
}
.assistantLog {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.assistantMsg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}
.assistantMsg-user {
  align-self: flex-end;
  background-color: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}
.assistantMsg-bot {
  align-self: flex-start;
  background-color: var(--bg-surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.assistantMsg-thinking {
  padding: 12px 14px;
}
.thinkingDots {
  display: inline-flex;
  gap: 4px;
}
.thinkingDots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-faint);
  animation: thinkingBounce 1.2s infinite ease-in-out both;
}
.thinkingDots span:nth-child(2) { animation-delay: 0.15s; }
.thinkingDots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkingBounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .thinkingDots span { animation: none; opacity: 0.6; }
}
.assistantConfirmRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.assistantConfirmRow button {
  padding: 5px 12px;
  font-size: 12.5px;
}
.assistantInputRow {
  display: flex;
  gap: 8px;
}
.assistantInputRow input {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}
.assistantInputRow button {
  padding: 9px 18px;
}

.subNav {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--border);
  margin: 10px 0 20px;
}
.subNavBtn {
  background-color: transparent;
  color: var(--text-soft);
  border: none;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.subNavBtn:hover {
  background-color: var(--bg-surface-2);
  color: var(--text);
}
.subNavBtn.active {
  background-color: var(--accent);
  color: white;
}

.avatarThumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
}
.logoThumb {
  /* Logos are usually wide rectangles, not square headshots — fit the
     whole thing in without cropping, sized by height with the width
     following naturally, instead of forcing a cropped square. */
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  vertical-align: middle;
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px;
}

.dashboardWelcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.welcomeText {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.dashboardLogo {
  height: 48px;
  width: auto;
  max-width: 160px;
  margin-left: 8px;
}

#permissionMatrix table, #brokeragesList table, #userBrokerageLinks table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
#permissionMatrix th, #brokeragesList th, #userBrokerageLinks th {
  background-color: var(--bg-surface);
  color: var(--text-soft);
  text-align: left;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-strong);
}
#permissionMatrix td, #brokeragesList td, #userBrokerageLinks td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
#permissionMatrix td.checkCol {
  text-align: center;
}
#permissionMatrix input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

.fscaChip {
  display: inline-block;
  background-color: var(--accent-tint);
  color: var(--accent-tint-text);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  margin: 2px 4px 2px 0;
}

.checklistItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.disclosureNoticeCurrentFile {
  color: var(--text-soft);
  font-size: 13px;
  margin-bottom: 6px;
}

.analysisChoiceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 16px;
  margin-top: 20px;
}
.analysisChoiceCard {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}
.analysisChoiceCard:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.analysisChoiceCard h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-display);
}
.analysisChoiceCard p {
  margin: 0;
  color: var(--text-soft);
}
.analysisChoiceCard:disabled {
  background-color: var(--bg-surface-2);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.analysisChoiceCard:disabled h3 {
  color: var(--text-faint);
}

/* ===== Needs Analysis: schedule cards + step-by-step pop-up ===== */
.analysisInfo {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  margin: 10px 0;
}

.groupCardList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}
.groupEmptyHint {
  color: var(--text-soft);
  font-size: 13.5px;
  margin: 4px 0;
}
.groupCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.groupCardMain {
  min-width: 0;
}
.groupCardTitle {
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.groupCardDetail {
  color: var(--text-soft);
  font-size: 13px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.groupCardActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

body.groupWizardOpen {
  overflow: hidden;
}
.groupWizardOverlay:empty {
  display: none;
}
.groupWizardOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(3, 7, 14, 0.72);
  padding: 16px;
}
.groupWizardBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.groupWizardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
}
.groupWizardTitle {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
}
.groupWizardStepLabel {
  color: var(--text-soft);
  font-size: 13px;
  margin-top: 2px;
}
.groupWizardClose {
  background: transparent;
  color: var(--text-soft);
  font-size: 28px;
  line-height: 1;
  padding: 0 6px;
}
.groupWizardClose:hover {
  background: transparent;
  color: var(--text);
}
.groupWizardProgress {
  height: 4px;
  background-color: var(--border);
}
.groupWizardProgressBar {
  height: 100%;
  background-color: var(--accent);
  transition: width 0.2s;
}
.groupWizardBody {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 20px 12px;
}
.groupWizardFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.groupWizardNext {
  min-width: 140px;
  font-weight: 600;
}

.groupWizardBox .wizField {
  margin: 14px 0;
}
.groupWizardBox .wizLabel {
  display: block;
  width: auto;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.groupWizardBox .wizInput {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--bg-input);
  color: var(--text);
  font-family: var(--font-body);
}
.groupWizardBox .wizInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.groupWizardBox .wizChoiceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.groupWizardBox .wizChoice {
  flex: 1 1 0;
  min-width: 90px;
  padding: 11px 12px;
  font-size: 15px;
  background-color: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.groupWizardBox .wizChoice:hover {
  border-color: var(--accent);
}
.groupWizardBox .wizChoice.selected {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}

@media (max-width: 640px) {
  .groupWizardOverlay {
    padding: 0;
    align-items: stretch;
  }
  .groupWizardBox {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: none;
  }
  .groupWizardBody {
    padding: 4px 16px 12px;
  }
  .groupWizardHeader,
  .groupWizardFooter {
    padding-left: 16px;
    padding-right: 16px;
  }
  .groupWizardFooter {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .groupWizardFooter button {
    flex: 1;
  }
  .groupCard {
    flex-direction: column;
    align-items: stretch;
  }
  .groupCardActions {
    justify-content: flex-end;
  }
}

/* ===== Yes / No as a tick and a cross on the same line as the question ===== */
.yesNoQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.yesNoQuestion .yesNoLabel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
}
.yesNoToggle {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.yesNoBtn {
  width: 42px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  background-color: var(--bg-input);
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}
.yesNoBtn.yes:hover {
  border-color: var(--success);
  color: var(--success);
  background-color: var(--success-tint);
}
.yesNoBtn.no:hover {
  border-color: var(--alert);
  color: var(--alert);
  background-color: var(--alert-tint);
}
.yesNoBtn.yes.selected,
.yesNoBtn.yes.selected:hover {
  background-color: var(--success);
  border-color: var(--success);
  color: #04251A;
  font-weight: 700;
}
.yesNoBtn.no.selected,
.yesNoBtn.no.selected:hover {
  background-color: var(--alert);
  border-color: var(--alert);
  color: #2A0806;
  font-weight: 700;
}
.groupWizardBox .wizYesNo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.groupWizardBox .wizYesNo .wizLabel {
  flex: 1;
  margin: 0;
}

.groupWizardBox .wizFixed {
  padding: 11px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background-color: var(--bg-surface);
}
.groupWizardBox .wizFixedNote {
  color: var(--text-soft);
  font-size: 12.5px;
}

/* Lead Sources editor inside the brokerage modal */
.leadSourceRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.leadSourceRow input[type="text"] {
  flex: 1;
  min-width: 0;
}


/* ===== Adaptive layout =====
   Breakpoints: 900px (tablet / small laptop), 640px (phone), plus a
   short-screen rule for laptops with little vertical room. */

/* Short screens (e.g. 1366x768 at browser zoom, or small laptops): pop-ups use
   less padding so more of the form fits, and they scroll inside the overlay. */
@media (max-height: 760px) {
  .modalOverlay { padding: 12px 16px; }
  .modalBox { padding: 18px 20px; }
  .formGrid { gap: 12px 16px; }
}

@media (max-width: 900px) {
  .pageContent { padding: 16px; }
  .navBar { padding: 12px 16px; }
  .formGrid { grid-template-columns: 1fr 1fr; }
  /* Wide data tables scroll sideways inside themselves instead of
     stretching the whole page (the schedule tables already have a wrapper). */
  table:not(.scheduleTable) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .pageContent { padding: 12px; }
  .navBar { padding: 10px 12px; gap: 8px; }
  .formGrid { grid-template-columns: 1fr; }
  .formGrid .field.full { grid-column: auto; }
  /* Pop-ups become full-screen sheets; the content scrolls, header and
     buttons are never off-screen. */
  .modalOverlay { padding: 0; }
  .modalBox {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 16px;
  }
  .confirmModalBox {
    min-height: 0;
    margin: auto 16px;
    border-radius: var(--radius-card);
  }
  .subNav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .subNavBtn { white-space: nowrap; flex-shrink: 0; }
  h1 { font-size: 24px; }
}

/* Tick-box above Submit for Quoting: should the client get a confirmation email? */
.sendClientCopyOption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  margin: 12px 0;
  font-weight: normal;
  font-size: 14px;
}
.sendClientCopyOption input {
  width: auto;
  margin-top: 3px;
}

/* Brokerage page (Settings > Brokerages > a brokerage): fields sit on the page,
   not in a pop-up, so they get the same input look the pop-up fields have. */
#brokerageDetailView .formGrid input[type="text"],
#brokerageDetailView .formGrid select,
#brokerageDetailView #workflowCategoriesBox input[type="text"],
#brokerageDetailView #otherProcessEmailsBox input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}
#brokerageDetailView .formGrid .field,
#workflowCategoriesBox .field,
#otherProcessEmailsBox .field {
  margin-bottom: 4px;
}
#workflowCategoriesBox .field,
#otherProcessEmailsBox .field {
  max-width: 560px;
}
#brokerageDetailView .brokerageSaveBtn,
#brokerageUsersPanel .saveAnalysisBtn {
  margin-top: 18px;
}

/* Workflows (Settings > Brokerages > Workflows) */
.workflowCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  margin-bottom: 8px;
  max-width: 760px;
}
.workflowCardTitle { font-weight: 700; color: var(--text); }
.workflowCardDetail { color: var(--text-soft); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.workflowCardActions { display: flex; gap: 6px; flex-shrink: 0; }
.workflowBadge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.workflowBadge.on { background-color: var(--success-tint); color: var(--success); }
.workflowBadge.off { background-color: var(--border); color: var(--text-soft); }

.workflowBlock {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 18px 16px;
  margin-bottom: 14px;
  max-width: 760px;
}
.workflowBlockHead {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.workflowStep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--accent);
  color: white;
  font-size: 13px;
}
.workflowBlock .field input[type="text"],
.workflowBlock textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}
.workflowBlock .field label { width: auto; display: block; margin-bottom: 4px; }
.workflowBlock .binderCheckItem { margin: 6px 0; }
.workflowBlock .binderCheckItem input { width: auto; }
.binderCheckDisabled { opacity: 0.6; cursor: not-allowed; }
.placeholderChips { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholderChip {
  background-color: var(--accent-tint);
  color: var(--accent-tint-text);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 3px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.placeholderChip:hover { background-color: var(--accent); color: white; }
.workflowPreview {
  background-color: var(--bg-input);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.workflowActions { margin: 6px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .workflowCard { flex-direction: column; align-items: stretch; }
  .workflowCardActions { justify-content: flex-end; }
}

/* Lead document archive (Needs Analysis screens) */
.leadDocuments { margin: 14px 0; }
.leadDocuments h4 { margin: 0 0 4px; font-family: var(--font-display); }
.leadDocuments ul { list-style: none; margin: 8px 0 0; padding: 0; }
.leadDocuments li { margin: 8px 0; padding: 8px 12px; background-color: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.leadDocuments li a { font-weight: 600; }
.docMeta { display: block; color: var(--text-soft); font-size: 12.5px; margin-top: 2px; }
span.docMeta { display: inline; margin: 0; }
.leadDocuments li .docMeta { display: block; }
.documentsPanel input[type="file"] { display: block; margin: 10px 0 8px; max-width: 100%; }

.workflowBlock .field select {
  box-sizing: border-box;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}

/* ===== Quotes (comparison of insurer quotes on a lead) =====
   Follows the brand guide: Aptos, bold page title, semibold section titles with a
   blue marker, bold tracked labels, engineered rounded corners, generous space,
   and the shared palette tokens. Sizes are deliberately larger than the rest of
   the app's tables because this screen is read side by side. */

/* The comparison needs width: let the page column grow while this screen is open. */
.pageContent:has(.quotesScreen) { max-width: min(1680px, 100%); }

.quotesScreen { padding: 28px 32px 34px; font-size: 16px; line-height: 1.5; }
.quotesScreen h2 { font-size: 32px; line-height: 1.15; margin: 14px 0 8px; }
.quotesScreen h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 38px 0 14px;
  padding-left: 12px; border-left: 4px solid var(--accent); line-height: 1.2;
}
.quotesScreen h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.quotesScreen .docMeta { font-size: 14.5px; color: var(--text-soft); }
.quotesScreen .binderEmptyHint { font-size: 15px; line-height: 1.5; margin: 6px 0; }
.quotesScreen textarea, .quotesScreen select { font-size: 16px; }
.quotesScreen a { color: var(--accent-tint-text); }

/* small labels and values used in cards and tables */
.qLabel { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; }
.qMuted { color: var(--text-faint); font-size: 15px; }
.qVal { font-weight: 700; font-size: 17px; }
.qUnit { color: var(--text-soft); font-size: 14px; }
.qBig { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; }
.qSub { display: block; color: var(--text-soft); font-size: 14px; line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere; }
.qTag { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.qTag.good { background-color: var(--success-tint); color: var(--success); }

/* one button family for the whole screen */
.qBtn {
  background: transparent; color: var(--text); border: 1px solid var(--border-strong);
  padding: 9px 18px; border-radius: var(--radius-control); font-size: 15px; font-weight: 600;
  font-family: var(--font-body); cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.qBtn:hover { background-color: var(--bg-surface-2); border-color: var(--accent); }
.qBtn.primary { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.qBtn.primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.qBtn.danger { color: var(--alert); border-color: var(--border-strong); }
.qBtn.danger:hover { background-color: var(--alert-tint); border-color: var(--alert); }
.qBtn.big { padding: 12px 26px; font-size: 16px; }
.qBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.quoteBadges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.quoteBadge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.quoteBadge.good { background-color: var(--success-tint); color: var(--success); }
.quoteBadge.warn { background-color: var(--amber-tint); color: var(--amber); }
.quoteBadge.bad { background-color: var(--alert-tint); color: var(--alert); }
.quoteBadge.info { background-color: var(--accent-tint); color: var(--accent-tint-text); }
.quoteBadge.muted { background-color: var(--border); color: var(--text-soft); }

.quoteNote {
  border-left: 4px solid var(--amber); background-color: var(--amber-tint);
  border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: 12px 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; margin: 10px 0;
}
.needsCheck { background-color: var(--amber-tint); }

/* ---- add quotes ---- */
.quoteUpload {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-card);
  padding: 22px 26px 24px; margin: 22px 0;
}
.quoteUpload h3 { margin-top: 0; }
.quoteUpload.over { border-color: var(--accent); background-color: var(--accent-tint); }
.quoteUploadRow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.quoteUpload input[type="file"] {
  width: auto; max-width: 100%; padding: 8px 10px; font-size: 14.5px; color: var(--text-soft);
  background-color: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
}
.quoteUpload input[type="file"]::file-selector-button {
  background-color: var(--bg-surface-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 6px 14px; margin-right: 10px; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.quoteUploadList { list-style: none; margin: 16px 0 0; padding: 0; font-size: 15px; }
.quoteUploadList li { margin: 6px 0; overflow-wrap: anywhere; }
.quoteWarn { color: var(--alert); }

/* ---- the insurer cards ---- */
.quoteCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 20px; align-items: start; margin: 16px 0; }
.quoteCards > p { grid-column: 1 / -1; }
.quoteCard {
  background-color: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px 24px; margin: 0; display: flex; flex-direction: column; gap: 14px;
}
.quoteCard.recommended { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.quoteCard.expired { opacity: 0.85; }
.quoteCardHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.quoteInsurer, .qInsurer { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.quoteProduct, .qProduct { font-size: 15px; color: var(--text-soft); margin-top: 3px; overflow-wrap: anywhere; }
.quotePremium { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; }
.quotePremium small { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--text-soft); }
.quotePremiumSub { color: var(--text-soft); font-size: 15px; margin-top: 4px; }
.quoteFacts { display: flex; gap: 6px 26px; flex-wrap: wrap; font-size: 15px; }
.quoteDocs { font-size: 15px; overflow-wrap: anywhere; }
.quoteCardActions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.quoteCardActions .qPushRight { margin-left: auto; }
.quoteDetail { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.quoteMiniTable { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
.quoteMiniTable th, .quoteMiniTable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.quoteMiniTable th { color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.quoteTerms { margin: 4px 0 8px; padding-left: 20px; font-size: 15px; }
.quoteTerms li { margin: 5px 0; overflow-wrap: anywhere; }

/* ---- the comparison ---- */
.quoteCompare { margin-top: 12px; }
.quoteCompareHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.quoteCompareHead h3 { margin-bottom: 14px; }
.quoteTabs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; margin-top: 24px; }
.quoteTabs button { background: transparent; color: var(--text-soft); border: none; padding: 10px 24px; border-radius: 0; font-size: 15px; font-weight: 600; }
.quoteTabs button:hover { background-color: var(--bg-surface-2); color: var(--text); }
.quoteTabs button.on { background-color: var(--accent); color: #fff; }

.quoteTableWrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background-color: var(--bg-surface); margin-top: 8px; }
.quoteTableWrap table.quoteTable { display: table; max-width: none; overflow: visible; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; min-width: 760px; }
.quoteTable th, .quoteTable td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--border); vertical-align: top; }
.quoteTable tbody tr:last-child td { border-bottom: none; }
.quoteTable th.qHead { background-color: var(--bg-surface-2); border-bottom: 1px solid var(--border-strong); min-width: 280px; padding: 20px 22px; }
.quoteTable th.qHead .qBadges { justify-content: flex-start; margin-top: 10px; }
.quoteTable td.rowLabel, .quoteTable th.qCorner {
  width: 240px; min-width: 220px; font-weight: 700; color: var(--text); background-color: var(--bg-surface-2);
  position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--border);
}
.quoteTable td.rowLabel .qSub { font-weight: 400; }
.quoteTable td.rowLabel.indent { padding-left: 34px; font-weight: 400; }
.quoteTable .qItemTitle { font-weight: 600; overflow-wrap: anywhere; }
.quoteTable tr.sectionHead td {
  background-color: var(--bg-page); color: var(--accent-tint-text); font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 22px; position: static;
  border-top: 1px solid var(--border-strong);
}
.quoteTable td.best { background-color: var(--success-tint); }
.quoteTable td.gap { background-color: rgba(147, 161, 183, 0.05); }
.quoteTable td.needsCheck, .quoteTable li.needsCheck, .quoteTable .qItem.needsCheck { background-color: var(--amber-tint); }
.quoteTable tr.totalRow td { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-strong); }
.qList { margin: 4px 0 0; padding-left: 18px; }
.qList li { margin: 3px 0; }
.qItem { padding: 10px 0; border-bottom: 1px solid var(--border); }
.qItem:first-child { padding-top: 0; }
.qItem:last-child { border-bottom: none; padding-bottom: 0; }

/* ---- recommendation ---- */
.quoteRecommend { margin-top: 16px; }
.quotePanel { background-color: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px 28px; max-width: 900px; }
.quotePanel .field { margin: 16px 0; }
.quotePanel .field label { display: block; width: auto; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.quotePanel textarea, .quotePanel select { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background-color: var(--bg-input); color: var(--text); font-family: var(--font-body); }
.quoteReason { font-size: 17px; line-height: 1.6; margin: 14px 0; }

/* ---- the add / edit form (unchanged layout) ---- */
.quoteFormGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 16px; }
.quoteFormGrid .field input, .quoteFormGrid .field select { width: 100%; box-sizing: border-box; }
.quoteFormGrid .field label { width: auto; display: block; margin-bottom: 3px; }
.quoteEditTable { width: 100%; border-collapse: collapse; min-width: 640px; }
.quoteEditTable td, .quoteEditTable th { padding: 4px 6px; text-align: left; vertical-align: top; }
.quoteEditTable input, .quoteEditTable select { width: 100%; box-sizing: border-box; }
.quotesScreen textarea { width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  .quotesScreen { padding: 18px 16px 24px; }
  .quotesScreen h2 { font-size: 26px; }
  .quoteTable td.rowLabel, .quoteTable th.qCorner { width: 150px; min-width: 150px; }
  .quoteTable th, .quoteTable td { padding: 12px 14px; }
}

/* ---- sending the recommendation / the client's own page (public/proposal.html) ---- */
.quoteClient { margin-top: 12px; }
.quoteClient .quotePanel { margin-top: 18px; }
.quoteHistory td.quoteHistoryActions { white-space: nowrap; }
.quoteHistory td.quoteHistoryActions .qBtn { padding: 6px 12px; font-size: 14px; text-decoration: none; display: inline-block; }
.quoteNote.good { border-left-color: var(--success); background-color: var(--success-tint); }
.notifyRow { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; width: auto; font-weight: 400; }
.notifyRow input { width: auto; margin-top: 5px; }
.proposalTerms { background-color: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 18px; margin: 8px 0; }
.proposalTerms summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.pageContent.proposalPageContent:has(.quotesScreen) { max-width: 1000px; }
.proposalScreen { padding: 8px 4px; }
.proposalScreen label { width: auto; display: block; font-weight: 600; margin-bottom: 6px; }
.proposalScreen .quoteTableWrap { margin-top: 0; }
.proposalScreen a.qBtn { display: inline-block; text-decoration: none; }
.proposalScreen details.qSub summary { cursor: pointer; color: var(--accent-tint-text); }
.proposalChoices { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.quoteHistory { min-width: 0 !important; }
.quoteHistory th.qHead { min-width: 0; padding: 14px 16px; }
.quoteHistory td { padding: 14px 16px; }
.proposalScreen table.quoteTable { min-width: 0; }
.proposalScreen .quoteTable th.qHead { min-width: 0; padding: 14px 16px; }
.proposalScreen .quoteTable td { padding: 14px 16px; }
.proposalScreen .quoteTable td.rowLabel { width: 150px; min-width: 120px; position: static; }

/* ---- AI review window and document categories ---- */
.quoteReview { margin-top: 12px; }
.reviewItem { background-color: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 22px; margin: 12px 0; }
.reviewItem.dim { opacity: 0.6; }
.reviewHead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.reviewTitle { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.reviewText { margin: 10px 0 6px; font-size: 16px; line-height: 1.55; }
.reviewControls { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin: 14px 0 8px; }
.reviewControls label { width: auto; font-weight: 600; }
.reviewControls select { margin-left: 8px; padding: 8px 10px; }
.reviewTick input { width: auto; margin-right: 8px; }
.reviewItem .field { margin: 10px 0; }
.reviewItem .field label { display: block; width: auto; margin-bottom: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.reviewDraft { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.quoteCatLabel { width: auto; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.quoteCatLabel select { padding: 9px 10px; font-size: 15px; }
.docCheck { font-size: 15px; margin: 2px 0; }
.docCheck.ok { color: var(--success); }
.docCheck.missing { color: var(--amber); }

.docCategory { margin-left: 10px; padding: 4px 8px; font-size: 13.5px; max-width: 100%; }
/* AI review: one row per item, detail opens underneath */
.reviewItem { padding: 0; }
.reviewItem > summary { list-style: none; cursor: pointer; }
.reviewItem > summary::-webkit-details-marker { display: none; }
.reviewRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.reviewCaret::before { content: "▸"; color: var(--text-soft); display: inline-block; width: 14px; transition: transform 0.15s; }
.reviewItem[open] .reviewCaret::before { transform: rotate(90deg); }
.reviewRow .reviewTitle { flex: 1 1 320px; font-size: 16.5px; }
.reviewBadges { display: flex; gap: 6px; flex-wrap: wrap; }
.reviewStatus { padding: 7px 10px; font-size: 14.5px; }
.reviewRow .reviewTick { font-weight: 600; font-size: 14.5px; white-space: nowrap; width: auto; }
.reviewStatic { color: var(--text-soft); font-size: 14.5px; }
.reviewBody { border-top: 1px solid var(--border); padding: 6px 22px 18px 44px; }
.reviewGroup { margin: 16px 0; }
.reviewGroup > summary { cursor: pointer; padding: 10px 0; font-size: 16px; }
.reviewTally { font-size: 15px; margin: 14px 0 4px; }
.reviewItem .field label { display: block; width: auto; }

/* ---- the Record of Advice ---- */
.roaChoices { display: grid; gap: 10px; margin: 12px 0; }
.roaChoice { display: inline-flex; align-items: center; gap: 8px; width: auto; font-weight: 600; margin-right: 18px; }
.roaChoice input { width: auto; }
.roaConsent { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; width: auto; font-weight: 400; line-height: 1.5; }
.roaConsent input { width: auto; margin-top: 5px; flex: 0 0 auto; }
.roaSub { display: block; margin: 6px 0 0 4px; color: var(--text-soft); font-size: 15px; }
.roaSigWrap { border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background-color: #ffffff; margin: 8px 0; max-width: 640px; touch-action: none; }
.roaSigWrap canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }

.quoteCompareTools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.quoteCompareTools .quoteTabs { margin-top: 0; }
.quoteCompareTools a.qBtn { text-decoration: none; display: inline-block; }

/* ---- Submit for Quoting: choose the insurers, refer to the Underwriting Manager ---- */
.submitTargetsBox { background-color: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 18px; margin: 12px 0; }
.submitTargetsBox h4 { margin: 0 0 6px; font-size: 15px; }
.submitTarget { display: flex; gap: 12px; align-items: flex-start; width: auto; font-weight: 400; margin: 10px 0; cursor: pointer; }
.submitTarget input { width: auto; margin-top: 4px; flex: 0 0 auto; }
.submitTarget .docMeta { display: block; }
.submitTargetLabel { display: block; width: auto; font-weight: 600; margin: 8px 0 4px; }

/* the "Stop" button on an AI pop-up */
.toast .toastAction {
  flex: none;
  margin-left: 6px;
  padding: 5px 14px;
  border: 1px solid var(--alert);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--alert);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.toast .toastAction:hover { background: var(--alert); color: #fff; }

/* the broker notes shown on the Submit for Quoting screen */
.submitNotesPreview {
  margin: 8px 0 0;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-control);
  color: var(--text);
}

/* the load-in-order steps above the quote upload */
.quoteSteps { margin: 6px 0 12px 22px; padding: 0; color: var(--text-muted, var(--text)); font-size: 14px; line-height: 1.5; }
.quoteSteps li { margin: 3px 0; }

/* the "what are you looking at" scenario choice on the Quotes screen */
.quoteScenario { margin: 18px 0 8px; padding: 12px 14px; border: 1px solid var(--border, #d5dbe5); border-radius: var(--radius-control); }
.quoteScenario label { font-weight: 700; margin-right: 8px; }
.quoteScenario select { min-width: 280px; }

/* the Add quotes panel as numbered steps */
.quoteStep { display: flex; gap: 14px; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--border, #d5dbe5); border-radius: var(--radius-control); background: var(--bg-surface-2, transparent); }
.quoteStepNum { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.quoteStepBody { flex: 1; min-width: 0; }
.quoteStepBody h4 { margin: 2px 0 6px; font-size: 16px; }
.quoteStepOpt { font-weight: 400; font-size: 13px; opacity: .75; margin-left: 6px; }
.quoteStepBody .quoteUploadRow { margin: 8px 0 0; }
.quoteStepAny { margin: 8px 0 0 44px; }
.quoteStepAny summary { cursor: pointer; font-size: 14px; opacity: .85; }

/* ===== Dashboard insights (charts) ===== */
#insightsArea { margin: 26px 0 8px; }
.insightsHeader { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.insightsHeader h2 { margin: 0; }
.insightsPeriod { color: var(--text-soft); font-size: 14px; }
.insightsPeriod select { margin-left: 6px; }
.insightTiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0; }
.insightTile {
  background-color: var(--bg-surface); border-radius: var(--radius-card); border-top: 3px solid var(--accent);
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.insightTileNum { font-family: var(--font-display); font-size: 30px; font-weight: bold; color: var(--text); }
.insightTileLbl { font-size: 13px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.insightTileNote { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.insightGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.insightCard { background-color: var(--bg-surface); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-card); min-width: 0; }
.insightCard h3 { margin: 0 0 14px; font-size: 15px; color: var(--text); }
.insightWide { grid-column: 1 / -1; }
.insightEmpty { color: var(--text-faint); font-size: 14px; margin: 6px 0; }
.insightBarRow { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; margin-bottom: 9px; }
.insightBarLabel { font-size: 13px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insightBarTrack { background-color: var(--bg-input); border-radius: 6px; height: 14px; overflow: hidden; }
.insightBarFill { height: 100%; border-radius: 6px; }
.insightBarValue { font-size: 13px; color: var(--text); white-space: nowrap; }
.insightColumns { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 200px; padding-top: 4px; }
.insightColumn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.insightColumnNum { font-size: 12px; color: var(--text-soft); margin-bottom: 4px; }
.insightColumnBar { width: 100%; max-width: 44px; background-color: #087EF5; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.insightColumnWon { width: 100%; background-color: #2FD9A2; }
.insightColumnLabel { font-size: 12px; color: var(--text-soft); margin-top: 6px; }
.insightLegend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.insightLegend i, .insightDonutRow i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.insightDonut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.insightDonutLegend { flex: 1; min-width: 180px; }
.insightDonutRow { display: flex; align-items: center; font-size: 13px; color: var(--text-soft); margin-bottom: 7px; }
.insightDonutName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insightDonutVal { color: var(--text); margin-left: 8px; white-space: nowrap; }
@media (max-width: 900px) {
  .insightTiles { grid-template-columns: repeat(2, 1fr); }
  .insightGrid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .insightBarRow { grid-template-columns: 1fr auto; }
  .insightBarTrack { grid-column: 1 / -1; order: 3; }
}

/* ===== Team Report ===== */
.trControls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trNote { background-color: var(--accent-tint); border-radius: var(--radius-card); padding: 12px 16px; margin: 12px 0; color: var(--text); }
.trNote ul { margin: 6px 0 0 18px; padding: 0; }
.trNote p { margin: 6px 0; }
.trNote a { color: var(--accent-tint-text); }
.trFaint { color: var(--text-faint); font-size: 12px; }
.trTiny { font-size: 11px; }
.trGood { color: var(--success); }
.trBad { color: var(--alert); }
.trNum { text-align: right; white-space: nowrap; }
.trScroll { overflow-x: auto; }
.trSub td { color: var(--text-soft); font-size: 13px; }
.trSub td:first-child { padding-left: 22px; }
.trSingle { grid-template-columns: 1fr; }
.trChart { height: 230px; }
.trMonthCol { min-width: 0; }
.trPair { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 150px; }
.trBar { width: 14px; border-radius: 4px 4px 0 0; }
.trBarNew { background-color: #2FD9A2; }
.trBarCanc { background-color: #F1726F; }
.trBtn { background-color: var(--bg-surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 5px 10px; cursor: pointer; font-size: 12px; margin: 2px 4px 2px 0; }
.trBtn:hover { background-color: var(--accent-tint); }
.trReviewTable td { vertical-align: top; font-size: 13px; }
.trWhy { max-width: 320px; color: var(--text-soft); }
.trActions { white-space: nowrap; }
@media (max-width: 700px) { .trPair { gap: 1px; } .trBar { width: 8px; } }

/* Back arrow next to a page title (replaces a separate "All ..." button and heading line) */
.detailHeader { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.detailHeader .binderPageTitle { margin: 0; }
.backBtnSmall { padding: 6px 12px; font-size: 18px; line-height: 1; }

/* Tick boxes in a checklist sit right next to their label (the generic 220px input width made a big gap) */
.checklistItem input[type="checkbox"] { width: auto; padding: 0; margin: 0; flex: none; }
.detailContext { color: var(--text-faint); font-size: 13px; margin-top: 2px; }
.detailHeader h2 + .detailContext { margin-top: 0; }

/* Insights: one small chart per account executive */
.aeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 10px; }
.aeCard { background-color: var(--bg-input); border-radius: var(--radius-card); padding: 12px 14px; min-width: 0; }
.aeCardTitle { font-weight: bold; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aeCardSub { font-size: 12px; color: var(--text-faint); margin: 2px 0 10px; }
.aeCols { display: flex; gap: 16px; align-items: flex-end; justify-content: space-around; height: 190px; }
.aeCol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; }
.aeColNum { font-size: 13px; color: var(--text); margin-bottom: 4px; font-weight: bold; }
.aeStack { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; }
.aeColLabel { font-size: 12px; color: var(--text-soft); margin-top: 6px; text-align: center; }

/* Reports */
.trSoon { opacity: 0.45; cursor: not-allowed; }
.trSoonTag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; background-color: var(--bg-surface-2); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.trAmber { color: var(--amber); }
.trSortable { cursor: pointer; white-space: nowrap; user-select: none; }
.trSortable:hover { color: var(--accent-tint-text); }
.trTableControls { margin-bottom: 10px; }
.trTableControls input[type="search"] { padding: 8px; }
.trTermRow td { color: var(--text-faint); }
.trStatusTable td { vertical-align: top; font-size: 13px; }

.trCountNote { margin: 4px 0 10px; }

/* ===== Styling pass for Reports and the new Underwriting tools ===== */
/* the page-wide label rule (140px, bold) is for form rows; radio and tick-box lines need their own look */
.trCheckLabel { display: flex; align-items: center; gap: 8px; width: auto; font-weight: normal; margin: 6px 0; color: var(--text); }
.trCheckLabel input { width: auto; margin: 0; padding: 0; flex: none; }
.trCheckLabel.trWrap { flex-wrap: wrap; }
.trRadioRow { display: flex; gap: 22px; flex-wrap: wrap; }
/* drop-downs and fields on these screens match the dark theme */
#teamReportArea select, #reportSettingsArea select, #underwritingArea select, #insightsArea select {
  background-color: var(--bg-input); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  padding: 7px 10px; font-size: 14px; font-family: var(--font-body); max-width: 100%;
}
#underwritingArea .insightCard label, #underwritingArea .insightCard .trCheckLabel { width: auto; }
#underwritingArea .insightCard label:not(.trCheckLabel) { display: block; margin-bottom: 4px; }
#underwritingArea .insightCard select, #underwritingArea .insightCard input[type="text"] { min-width: 260px; max-width: 100%; box-sizing: border-box; }
#reportSettingsArea .insightCard label:not(.trCheckLabel) { width: auto; }
.insightGrid { align-items: start; }
.trChartsGrid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* the filter row above the details table */
.trTableControls { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.trTableControls label.insightsPeriod { display: flex; flex-direction: column; gap: 4px; width: auto; font-size: 12px; font-weight: normal; color: var(--text-soft); }
.trTableControls label.insightsPeriod select { margin-left: 0; min-width: 130px; }
.trControls label.insightsPeriod { display: flex; flex-direction: column; gap: 4px; width: auto; font-size: 12px; font-weight: normal; }
.trControls label.insightsPeriod select { margin-left: 0; }
.insightsHeader .insightsPeriod { display: flex; flex-direction: column; gap: 4px; width: auto; font-size: 12px; font-weight: normal; }
.insightsHeader .insightsPeriod select { margin-left: 0; }
/* numbers and tables */
.trSub td:first-child { white-space: nowrap; }
.dataTable th.trNum { text-align: right; }
.trBizTable td:nth-child(1), .trBizTable td:nth-child(2), .trBizTable td:nth-child(3) { white-space: nowrap; }
.trBizTable td:nth-child(4) { min-width: 210px; }
.trBizTable td:nth-child(6) { min-width: 150px; }
/* compact details table so it fits a laptop screen without sideways scrolling */
.trBizTable th, .trBizTable td { padding: 8px 8px; font-size: 13px; }
.trBizTable td:nth-child(4) { min-width: 170px; }
.trBizTable td:nth-child(5) { min-width: 130px; }
.trBizTable td:nth-child(6) { min-width: 100px; }
/* green / red on numbers inside tables (a table cell's own colour was winning) */
.dataTable td.trGood { color: var(--success); }
.dataTable td.trBad { color: var(--alert); }
@media (max-width: 520px) {
  .insightTileNum { font-size: 22px; }
  .trTableControls label.insightsPeriod select { min-width: 0; width: 100%; }
  .trTableControls label.insightsPeriod { flex: 1 1 140px; }
  .trTableControls input[type="search"] { min-width: 0 !important; width: 100%; }
}

/* Workflow editor: search, sort and "only ticked" above the insurer list */
.workflowInsurerTools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.workflowInsurerTools input[type="text"] { flex: 1 1 220px; min-width: 0; }
.workflowInsurerTools select { width: auto; }
.workflowInsurerOnlyTicked { margin: 0 !important; }
.workflowInsurerUnsure { margin-top: 10px; }
.workflowInsurerUnsure summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }