@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

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

/* ── Warwickshire Mortgages brand palette ───────────
   Pulled from warwickshiremortgages.co.uk (Divi theme):
   purple #442454, charcoal #303030, white / #fbfbfb.   */
:root {
    --bg-primary:   #fbfbfb;
    --bg-secondary: #f2eff5;
    --bg-card:      #ffffff;
    --border:       #e5e1ea;
    --text:         #303030;
    --text-dim:     #837a8f;
    --accent:       #442454;
    --accent-dark:  #36183f;
    --accent-soft:  #c9a7d8;
    --accent-glow:  rgba(68,36,84,0.10);
    --green:        #2e9e63;
    --amber:        #c0841c;
    --red:          #d24a47;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-primary);
    color: var(--text);
    min-height: 100vh;
}

/* ── Top bar ───────────────────────────────────── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    background: var(--accent);
    border-bottom: 1px solid var(--accent-dark);
}
.topbar h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
    color: #fff;
}
.topbar h1 span { color: var(--accent-soft); }
.topbar-right { display: flex; gap: 10px; align-items: center; }
.user-pill {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    padding: 4px 10px; border-radius: 6px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    color: var(--text-dim);
}
.user-pill .name { color: var(--accent); margin-left: 4px; }
.user-pill.admin .name::after { content: " · ADMIN"; color: var(--amber); font-size: 10px; }

/* Topbar sits on the purple band — invert the pill + ghost button. */
.topbar .user-pill {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
}
.topbar .user-pill .name { color: #fff; }
.topbar .user-pill.admin .name::after { color: var(--accent-soft); }
.topbar .btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.28);
}
.topbar .btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff; color: #fff;
}
.impersonate-select {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    padding: 4px 8px; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
    color: #fff; outline: none;
}
.impersonate-select option { background: var(--bg-secondary); color: var(--text); }
.is-impersonating #user-pill .name::after {
    content: " · VIEWING AS"; color: var(--amber); font-size: 10px;
}

/* ── Tabs ──────────────────────────────────────── */
.tabs {
    display: flex; gap: 2px;
    padding: 0 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.tab {
    padding: 10px 16px; font-size: 13px; font-weight: 600;
    color: var(--text-dim); cursor: pointer; user-select: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* systemadmin-only tabs (Users, Splits) */
.tab.systemadmin-only { display: none; }
body.is-systemadmin .tab.systemadmin-only { display: block; }

/* Leads: an optional per-deployment tab, off unless settings.txt has leads=true
   (app.js adds body.leads-enabled after login). The panel is hidden alongside it
   so the content stays unreachable even if a stale .active class lingers. */
.tab.leads-only { display: none; }
body.leads-enabled .tab.leads-only { display: block; }
body:not(.leads-enabled) #panel-leads { display: none !important; }

/* With leads on, every appointment must originate from a lead: swap the
   "+ New Appointment" button for a line explaining where they come from.
   addAppointment() refuses as well, so this is presentation, not the guard. */
body.leads-enabled #apt-new-btn { display: none; }
.apt-leads-only-hint { display: none; }
body.leads-enabled .apt-leads-only-hint {
    display: flex; align-items: center;
    font-size: 12.5px; color: var(--text-dim); font-style: italic;
}

/* limited-admin role: hide Dashboard, Cases, Anniversaries */
body.is-limited-admin .tab.broker-hidden { display: none; }
/* …but the case-admin DOES get Anniversaries (with per-user pills), so re-show
   just that one. Dashboard and Cases stay hidden for them. */
body.is-limited-admin .tab[data-tab="anniversaries"] { display: block; }

/* brokers see only their own share — nothing to toggle, hide it entirely */
body.is-broker #dash-view-toggle { display: none; }

/* likewise on the Cases tab: brokers only ever see their own (broker) split,
   so hide the whole split toggle and its label */
body.is-broker #cases-split-toggle,
body.is-broker #cases-split-label { display: none; }

/* Cases-tab broker filter — superseded by the per-user pills (#cases-broker-tabs),
   which give systemadmins the same per-broker view. Kept in the DOM (its value is
   read by applyCaseFilters) but hidden for all roles. */
.cases-broker-filter { display: none; align-items: center; gap: 8px; margin-left: 8px; }

/* Cases tab: a fully-paid row (all fees calculate as Paid) is struck through
   so settled cases read at a glance. Applied to the cells too so the line
   carries across the whole row, including frozen columns. */
#cases-table .tabulator-row.row-paid,
#cases-table .tabulator-row.row-paid .tabulator-cell { text-decoration: line-through; }

/* ── Appointments broker sub-tabs (admin view) ─── */
.apt-broker-tabs {
    display: none;                          /* hidden for brokers */
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
body.is-admin .apt-broker-tabs { display: flex; }
/* Case Progression sub-tabs are for the case-admin (admin) role only — not
   systemadmin or brokers. The #id rules override the .apt-broker-tabs ones above. */
#cp-broker-tabs { display: none; }
body.is-limited-admin #cp-broker-tabs { display: flex; }
/* Cases-tab per-user sub-tabs: for both admin roles — systemadmin (Krystle) and
   the case-admin. body.is-admin covers both (see afterLogin). The pills replace
   the old broker dropdown, so that is now hidden for everyone (below). */
#cases-broker-tabs { display: none; }
body.is-admin #cases-broker-tabs { display: flex; }
/* Anniversaries per-user sub-tabs: for the case-admin (admin) role only, like
   Case Progression. Systemadmin keeps the existing pill-less all-brokers view. */
#anniv-broker-tabs { display: none; }
body.is-limited-admin #anniv-broker-tabs { display: flex; }
/* Workflow per-user sub-tabs: for BOTH admin roles (systemadmin + case-admin),
   like the Cases tab. Brokers see only their own (no pills). */
#workflow-broker-tabs { display: none; }
body.is-admin #workflow-broker-tabs { display: flex; }
/* Leads per-broker pills: both admin roles, same rule as the Cases tab. */
#leads-broker-tabs { display: none; }
body.is-admin #leads-broker-tabs { display: flex; }
.apt-broker-tab {
    padding: 7px 14px; font-size: 12px; font-weight: 600;
    color: var(--text-dim); cursor: pointer; user-select: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.apt-broker-tab:hover { color: var(--text); }
.apt-broker-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Buttons ───────────────────────────────────── */
.btn {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    padding: 8px 18px; border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #56305f; }
.btn-ghost {
    background: #fff; color: var(--text-dim);
    border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ── Panels ────────────────────────────────────── */
.panel { padding: 10px 16px 16px; display: none; }
.panel.active { display: block; }

/* ── Tabulator ─────────────────────────────────── */
.tabulator {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px;
    border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; background: var(--bg-card);
}
.tabulator .tabulator-header { background: var(--bg-secondary); border-bottom: 2px solid var(--border); }
.tabulator .tabulator-header .tabulator-col { background: transparent; border-right-color: var(--border); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-weight: 600; font-size: 14px;
    color: var(--text-dim);
}
.tabulator-row { border-bottom-color: var(--border) !important; background: var(--bg-card); }
.tabulator-row.tabulator-row-even { background: #faf9fb; }
.tabulator-row:hover { background: var(--accent-glow) !important; }
.tabulator-row .tabulator-cell { border-right-color: var(--border); color: var(--text); padding: 10px 12px; }
.tabulator-row .tabulator-cell.tabulator-editing {
    border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px;
}
.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px;
    color: var(--text); background: #fff;
}
.tabulator .tabulator-footer { background: var(--bg-secondary); border-top: 1px solid var(--border); }
.tabulator .tabulator-footer .tabulator-page { color: var(--text-dim); border-color: var(--border); font-size: 13px; }
.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}

.cell-currency, .cell-rate { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.cell-status-paid     { color: var(--green); font-weight: 600; }
.cell-status-notpaid  { color: var(--amber); font-weight: 600; }

/* ── Toasts ────────────────────────────────────── */
#toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px;
    padding: 10px 18px; border-radius: 8px; color: var(--text);
    box-shadow: 0 6px 20px rgba(48,28,58,0.12);
    opacity: 0; transform: translateY(12px);
    animation: toastIn 0.25s forwards, toastOut 0.3s 2.8s forwards;
}
.toast.success { background: #eaf6ef; border: 1px solid var(--green); color: #1c5e3a; }
.toast.error   { background: #fbeae9; border: 1px solid var(--red);   color: #8f2b29; }
.toast.info    { background: #f1ebf4; border: 1px solid var(--accent); color: var(--accent); }
@keyframes toastIn  { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ── Modal ─────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(48,28,58,0.45); z-index: 10000;
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; width: 720px; max-width: 90vw;
    max-height: 80vh; display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(48,28,58,0.22);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 700; color: var(--accent);
}
.modal-close {
    background: none; border: none; color: var(--text-dim);
    font-size: 22px; cursor: pointer; padding: 4px 10px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg-secondary); color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }

/* ── Modal inner tabs (e.g. case modal) ────────── */
.modal-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    background: var(--bg-card);
}
.modal-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-dim); font-size: 13px; font-weight: 600;
    padding: 10px 18px; cursor: pointer; margin-bottom: -1px;
    transition: color 0.15s;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── History table ─────────────────────────────── */
.history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.history-table th {
    text-align: left; padding: 8px 10px;
    font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-dim);
    border-bottom: 2px solid var(--border);
}
.history-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.history-old { color: var(--red); text-decoration: line-through; opacity: 0.7; }
.history-new { color: var(--green); font-weight: 600; }
.history-empty, .history-loading { color: var(--text-dim); text-align: center; padding: 32px; }

/* ── Dated comments (reusable thread) ──────────────── */
/* Launcher on the Case Progression modal, in place of the old textarea. */
.cp-comments-launch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-comments-preview { color: var(--text-dim); font-size: 12px; }
/* Variant that previews the newest comment's TEXT rather than a count (the
   Mortgage chase notes). Given its own line and clamped to two, so a long note
   cannot stretch the modal; the full text stays in the element's title. */
.cp-comments-preview--latest {
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

/* Comments column on the Case Progression grid: icon + a count badge. */
.cp-comment-cell { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cp-comment-ico { font-size: 14px; line-height: 1; }
.cp-comment-badge {
    min-width: 20px; padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: 700; background: var(--accent); color: #fff;
}
.cp-comment-badge.zero { background: var(--border); color: var(--text-dim); font-weight: 600; }
.cp-comments-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }

/* Comment list inside the comments modal. */
.comments-list {
    max-height: 46vh; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; margin-bottom: 14px; background: var(--bg-primary);
}
.comments-empty { color: var(--text-dim); text-align: center; padding: 26px 10px; font-size: 12.5px; }
.comment-item {
    padding: 8px 10px; border-radius: 6px; background: var(--bg-card);
    border: 1px solid var(--border); margin-bottom: 6px;
}
.comment-item:last-child { margin-bottom: 0; }
.comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-author { font-weight: 600; font-size: 12px; color: var(--accent); }
.comment-when { font-size: 11px; color: var(--text-dim); }
.comment-del {
    margin-left: auto; border: none; background: none; cursor: pointer;
    color: var(--text-dim); font-size: 16px; line-height: 1; padding: 0 4px;
}
.comment-del:hover { color: var(--red); }
.comment-body { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.comments-new label {
    display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 4px;
}
.comments-new textarea { width: 100%; resize: vertical; }

/* ── Login screen ──────────────────────────────── */
#login-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: linear-gradient(135deg, #442454 0%, #5e3470 100%);
    display: flex; align-items: center; justify-content: center;
}
.login-card {
    width: 380px; max-width: 90vw;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.login-card h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px; font-weight: 800; margin-bottom: 6px;
    letter-spacing: -0.4px; color: var(--text);
}
.login-card h1 span { color: var(--accent); }
.login-card .subtitle {
    font-size: 13px; color: var(--text-dim); margin-bottom: 24px;
}
.field { margin-bottom: 14px; }
.field label {
    display: block; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-dim); margin-bottom: 6px;
}

/* ── Field info tooltip ──────────────────────────────
   A red asterisk that reveals a help bubble on hover or focus:
   <span class="field-info" tabindex="0" data-tip="...">*</span>
   Add the field-info--left modifier when the marker is near the modal's
   left edge, so the bubble extends rightward instead of being clipped.  */
.field-required {
    display: inline-block; margin-left: 2px;
    color: var(--red); font-weight: 700; font-size: 13px; line-height: 1;
    vertical-align: middle;
}

.field-info {
    display: inline-block; margin-left: 3px;
    color: var(--red); font-weight: 700; font-size: 14px; line-height: 1;
    cursor: help; position: relative; vertical-align: middle;
}
.field-info:hover { color: var(--red); }
.field-info:focus {
    outline: none;
    border-radius: 3px; box-shadow: 0 0 0 3px var(--accent-glow);
}
.field-info::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    width: 220px; padding: 8px 10px;
    background: var(--accent-dark); color: #fff;
    border-radius: 8px;
    font-size: 11.5px; font-weight: 500; line-height: 1.45;
    text-transform: none; letter-spacing: 0;
    text-align: left; white-space: normal;
    box-shadow: 0 6px 18px rgba(48,28,58,0.35);
    opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
    z-index: 100001; pointer-events: none;
}
.field-info::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--accent-dark);
    opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
    z-index: 100001; pointer-events: none;
}
.field-info:hover::after,  .field-info:focus::after,
.field-info:hover::before, .field-info:focus::before {
    opacity: 1; visibility: visible;
}
/* Left-anchored variant: bubble's left edge aligns with the icon, so it
   extends rightward and clears the modal's left edge. */
.field-info--left::after  { left: 0; transform: none; }
.field-info--left::before { left: 7px; transform: none; }
.field input {
    width: 100%; padding: 10px 12px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px;
    transition: border-color 0.15s ease;
}
.field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Password show/hide toggle ─────────────────── */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 42px; }   /* room for the eye button */
.pwd-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    font-size: 16px; line-height: 1; border-radius: 6px;
    color: var(--text-dim); opacity: 0.7;
}
.pwd-toggle:hover { opacity: 1; }
.pwd-toggle[aria-pressed="true"] { opacity: 1; color: var(--accent); }  /* password is visible */
.pwd-toggle:focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Date picker ───────────────────────────────── */
input[type="date"] {
    color-scheme: light;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--accent-glow);
}

#login-error {
    color: var(--red); font-size: 12.5px; margin-bottom: 12px;
    min-height: 16px;
}
#login-submit { width: 100%; padding: 11px; }

/* ── Splits + Users + Account ──────────────────── */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--accent);
    margin-bottom: 14px;
}
.section-sub   { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 480px; }
.form-grid.single { grid-template-columns: 1fr; }
.users-actions {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 14px;
}

/* ── Appointment modal ─────────────────────────── */
.apt-form { display: flex; flex-direction: column; gap: 18px; }
.apt-form .field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.apt-form .field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.apt-form .field-row.full  { grid-template-columns: 1fr; }
.apt-checklist {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 14px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px;
}
.apt-checklist-title {
    grid-column: 1 / -1;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-dim); margin-bottom: 4px;
}
.apt-check-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text); cursor: pointer;
    padding: 6px 8px; border-radius: 6px;
    transition: background 0.1s;
}
.apt-check-item:hover { background: var(--accent-glow); }
/* "Protection Required" sits on its own full-width row under the 4-up grid —
   it needs the space for the summary of which products were chosen. */
.apt-check-row {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--border);
}
/* ── Leads ─────────────────────────────────────────────────────────────────── */
/* Radio fields (Lead source / Purpose / Fee period) read as a single line —
   "Lead source  ( ) Self-Gen  ( ) ZLM" — rather than a caption stacked above the
   buttons, so add .field-radio alongside .field on those rows. */
.field.field-radio { display: flex; align-items: center; gap: 14px; }
/* Only the group's own caption, not the per-option labels nested below. */
.field.field-radio > label { margin-bottom: 0; flex: 0 0 auto; }

.lead-radio-group { display: flex; align-items: center; gap: 16px; min-height: 34px; }

/* .field input above sets width:100%, which stretches a radio into a full-width
   box and pushes its text off to the side. Reset it so each button sits tight
   against its own label. (The appointment checkboxes avoid this only because
   they live outside .field.) */
.lead-radio-group input[type="radio"] {
    width: auto; flex: 0 0 auto; margin: 0;
}

/* Each option's <label> also sits inside .field, so the generic ".field label"
   rule would render it as a block-level, uppercase, dimmed field caption. These
   are option text, not captions — put them back to normal. */
.lead-radio-group .apt-check-item {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 0; white-space: nowrap; cursor: pointer;
    font-size: 13px; text-transform: none; letter-spacing: 0;
    color: var(--text);
}

/* Read-only lead block on the appointment modal: label above value, so it reads
   as displayed data rather than an editable field. */
.lead-readonly-grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
}
.lead-readonly-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.lead-ro-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-dim);
}

.apt-protection-summary { font-size: 12px; color: var(--accent); font-weight: 600; }
.apt-protection-summary:empty { display: none; }
.apt-protection-intro { font-size: 12.5px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.5; }
.apt-protection-options { display: flex; flex-direction: column; gap: 2px; }
.apt-check-item input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer; flex-shrink: 0;
}
.apt-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* ── Case edit modal ───────────────────────────── */
.field select, .field textarea {
    -webkit-appearance: none; appearance: none;
    width: 100%; padding: 10px 12px;
    background-color: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px;
    color-scheme: light;
    transition: border-color 0.15s ease;
}
.field select {
    cursor: pointer;
    /* re-add a dropdown caret since appearance:none removes it */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'6'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'%20fill%3D'%23837a8f'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.field textarea { resize: vertical; line-height: 1.4; }
.field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.case-section-head {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--accent);
    margin-top: 6px; padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.case-readonly {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--text-dim);
    padding: 9px 12px; border-radius: 8px;
    background: var(--bg-secondary); border: 1px solid var(--border);
}
.case-readonly b { color: var(--text); font-weight: 600; }

/* ── Read-only fields mirrored from the linked case (Case Progression) ── */
.cp-from-case,
.cp-from-case:focus {
    background: var(--bg-secondary);
    color: var(--text-dim);
    cursor: not-allowed;
    box-shadow: none;
    border-style: dashed;
}
.ro-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-dim);
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px; margin-left: 6px;
    vertical-align: middle;
}

/* ── Inline toolbar select (e.g. Splits broker picker) ──────────── */
.toolbar-select {
    -webkit-appearance: none; appearance: none;
    padding: 6px 28px 6px 10px;
    background-color: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px;
    color-scheme: light; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'6'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'%20fill%3D'%23837a8f'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.toolbar-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ── Cases split toggle (three-way segmented control) ───────────── */
.split-toggle {
    display: inline-flex;
    border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.split-seg {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600;
    padding: 6px 12px;
    background: var(--bg-card); color: var(--text-dim);
    border: none; border-right: 1px solid var(--border);
    cursor: pointer; transition: all 0.15s ease;
}
.split-seg:last-child { border-right: none; }
.split-seg:hover { color: var(--text); }
.split-seg.active { background: var(--accent); color: #fff; }

/* Fee figures shown scaled by an active split — flagged so it's obvious
   the numbers aren't the raw stored values. */
.cell-currency-split { color: var(--amber); }

/* ── Dashboard ─────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 300px;
    gap: 18px; align-items: start;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: 14px; }

.dash-section-head {
    font-family: 'Montserrat', sans-serif;
    background: var(--accent); color: #fff;
    font-weight: 700; font-size: 14px;
    text-align: center; padding: 10px;
    border-radius: 10px;
}

.dash-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; overflow: visible; font-size: 13px;
}
.dash-table th {
    background: var(--bg-secondary); color: var(--text-dim);
    font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
    position: relative;
}
.dash-th-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dash-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    position: relative;
    text-transform: none;
}
.dash-help:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.dash-help::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 8px 10px;
    background: var(--accent-dark);
    color: #fff;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 1002;
    pointer-events: none;
}
.dash-help::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 1002;
    pointer-events: none;
}
.dash-help:hover::after, .dash-help:focus::after,
.dash-help:hover::before, .dash-help:focus::before {
    opacity: 1;
    visibility: visible;
}
.dash-table td {
    padding: 8px 12px; color: var(--text); border-bottom: 1px solid var(--border);
}
.dash-clickable {
    cursor: pointer;
    text-decoration: underline dotted transparent;
    text-underline-offset: 2px;
    transition: color 0.12s ease, background-color 0.12s ease, text-decoration-color 0.12s ease;
}
.dash-clickable:hover {
    color: var(--accent);
    text-decoration-color: var(--accent-soft);
    background: var(--accent-glow);
}
.dash-clickable:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-soft);
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table td:not(:first-child), .dash-table th:not(:first-child) {
    text-align: right; font-family: 'JetBrains Mono', monospace;
}
.dash-table tfoot th, .dash-table tfoot td {
    background: var(--bg-secondary); font-weight: 700; font-size: 13px;
    text-transform: none; letter-spacing: 0;
    border-top: 2px solid var(--border); border-bottom: none;
}
.dash-muted { color: var(--text-dim); }
.dash-kv-blank { height: 12px; padding: 0 !important; }

.dash-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
}
.dash-card .dash-table { border: none; border-radius: 0; }
.dash-card-head {
    background: var(--bg-secondary); color: var(--text);
    font-weight: 700; font-size: 13px;
    padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.dash-card-head-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-head-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid var(--accent-soft);
    background: transparent;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.dash-head-help-btn:hover { background: var(--accent-glow); }
.dash-head-help-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.dash-card-body { padding: 14px 12px; font-size: 14px; color: var(--text); }
.dash-filters { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.dash-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-filter-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim);
}
.dash-filters .toolbar-select { flex: 1; }

#dash-sql-text {
    width: 100%;
    min-height: 320px;
    resize: vertical;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
#dash-sql-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.ytd-help-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.ytd-help-list li { margin-bottom: 8px; }