/* Cobalt Intelligence colour system */
:root {
  --primary: #315CF5;
  --primary-hover: #2549D6;
  --navy: #17233C;
  --violet: #7357E8;
  --canvas: #F7F9FC;
  --surface: #FFFFFF;
  --muted: #66738A;
  --border: #E1E7F0;
  --subtle: #F0F4FF;
  --success: #21764A;  --success-bg: #E7F6EE;
  --warning: #9A5B08;  --warning-bg: #FFF4D9;
  --error: #B42332;    --error-bg: #FDEBED;
  --ring: rgba(49, 92, 245, .18);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--navy); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--navy); }
h1 { font-size: 24px; } h2 { font-size: 18px; }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font: 600 14px var(--font); cursor: pointer; text-decoration: none !important; }
.btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--navy); border-color: var(--border); } .btn-secondary:hover { background: var(--canvas); }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-danger { background: var(--surface); color: var(--error); border-color: var(--border); }
.btn:focus-visible, .tab:focus-visible, .nav a:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font: 600 14px var(--font); cursor: pointer; }
.link-btn:disabled { color: var(--muted); cursor: not-allowed; }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--navy); font: 15px var(--font); }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.input.invalid { border-color: var(--error); }
.input-code { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: 8px; height: 52px; }
.hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Alerts (icon + text, never colour alone) */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: 10px; font-size: 14px; }
.alert svg { flex: none; margin-top: 2px; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--success-bg); color: var(--success); }
.field-error { display: flex; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--error); }

/* Auth screen */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-wrap { width: 100%; max-width: 420px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; }
.brand-name { font-weight: 600; line-height: 1.2; } .brand-sub { font-size: 12px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(23, 35, 60, .04); }
.auth .card { padding: 28px; }
.auth h1 { margin-bottom: 4px; } .auth .lead { margin: 0 0 20px; color: var(--muted); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; }
.tab { height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 14px var(--font); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(23, 35, 60, .08); }
.panel[hidden] { display: none; }
.auth-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); }

/* App shell */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; }
.sidebar .brand { margin: 0 8px 24px; }
.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--navy); font-weight: 500; text-decoration: none; border-left: 3px solid transparent; }
.nav a:hover { background: var(--canvas); }
.nav a.active { background: var(--subtle); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.main { min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
.me { display: flex; align-items: center; gap: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--subtle); color: var(--primary); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.content { padding: 32px; max-width: 1480px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 24px; }
.stat .label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stat .value { margin-top: 6px; font-size: 30px; font-weight: 700; }
.insight { background: var(--subtle); border-color: var(--border); border-left: 4px solid var(--violet); }
.tag-ai { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--navy); }

/* Table & badges */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
th, td { padding: 12px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-muted { background: var(--canvas); color: var(--muted); border: 1px solid var(--border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.actions { display: flex; gap: 8px; }
td .actions { flex-wrap: nowrap; }

@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 10px 16px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .brand { margin: 0 0 8px; } .sidebar .brand-sub { display: none; }
  .nav { display: flex; overflow-x: auto; gap: 2px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .nav a { border-left: 0; white-space: nowrap; flex: none; }
  .topbar { flex-wrap: wrap; }
  .topbar { padding: 12px 16px; } .content { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Leads */
.badge-info { background: var(--subtle); color: #2549D6; }
.badge-error { background: var(--error-bg); color: var(--error); }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { padding-right: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters .input { width: auto; min-width: 150px; } .filters .grow { flex: 1; min-width: 220px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.stack { display: grid; gap: 16px; }
.card h2 { margin-bottom: 12px; font-size: 16px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--border); margin-left: 6px; }
.tl:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.tl.call::before { border-color: var(--primary); } .tl.stage::before { border-color: var(--success); }
.tl .meta { font-size: 12px; color: var(--muted); }
.tl .what { font-weight: 600; font-size: 14px; }
.tl .body { margin: 2px 0 0; font-size: 14px; white-space: pre-line; }
.doc { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.doc form { display: contents; }
.overdue { color: var(--error); font-weight: 600; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.funnel { display: grid; gap: 10px; }
.funnel .bar { height: 8px; border-radius: 999px; background: var(--primary); }
.funnel .track { background: var(--canvas); border-radius: 999px; }
.pager { display: flex; justify-content: space-between; margin-top: 16px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.mini { font-size: 12px; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }

/* Lead detail page */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.back { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lead-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lead-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.lead-sub span + span::before { content: '·'; margin-right: 14px; color: var(--border); }
.alert-closed { background: var(--canvas); color: var(--navy); border: 1px solid var(--border); }
.alert-closed svg { color: var(--muted); }

.steps-card { padding: 18px 20px; margin-bottom: 16px; overflow-x: auto; }
.steps { list-style: none; display: flex; margin: 0; padding: 0; min-width: 760px; }
.step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--muted); }
.step::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.step:first-child::before { display: none; }
.step .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 2px solid var(--border); color: var(--muted); }
.step.done .dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.step.done::before, .step.current::before { background: var(--primary); }
.step.current .dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.step.current .lbl { color: var(--navy); font-weight: 700; }

.facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.fact { padding: 14px 16px; }
.fact .label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fact .val { margin: 4px 0 2px; font-size: 20px; font-weight: 700; }
.fact .val-sm { font-size: 14px; font-weight: 600; min-height: 30px; display: flex; align-items: center; }

.tabs-card { padding: 0; overflow: hidden; }
.tabbar { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabbtn { flex: none; position: relative; padding: 14px 12px; border: 0; background: none; color: var(--muted); font: 600 14px var(--font); cursor: pointer; }
.tabbtn[aria-selected="true"] { color: var(--primary); }
.tabbtn[aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.tabbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: 8px; }
.tabbtn .count { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.tabpanel { padding: 20px; }
.tabpanel[hidden] { display: none; }

.logform { padding: 16px; margin-bottom: 24px; background: var(--canvas); border: 1px solid var(--border); border-radius: 12px; }
.logform-title { font-weight: 600; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip input:checked + span { background: var(--subtle); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 1px; }
.logform-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.logform-foot .input { width: auto; }
.sec { font-size: 15px; margin-bottom: 14px; }
.tl.followup::before { border-color: var(--warning); } .tl.assign::before { border-color: var(--navy); }
.tl .what .badge { margin-left: 6px; vertical-align: 1px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.grp { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.body-text { margin: 0; white-space: pre-line; }
.danger-zone { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.doc { padding: 8px 0; border-bottom: 1px solid var(--border); }
.doc .check { width: 100%; cursor: pointer; }
.doc input:disabled + span { color: var(--muted); }

@media (max-width: 1000px) { .steps-card { padding: 14px; } }
@media (max-width: 700px) { .detail-grid, .docs { grid-template-columns: 1fr; } .tabpanel { padding: 16px; } .lead-head .actions { width: 100%; } .lead-head .actions .btn { flex: 1; } }
.cols-single { grid-template-columns: minmax(0, 1fr); }

/* Appointments, calendar, map */
.alert-warn { background: var(--warning-bg); color: var(--warning); margin: 8px 0 0; }
.alert-warn a { color: inherit; text-decoration: underline; }
.alert-warn .check { color: var(--navy); }
.lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.map-search { display: flex; gap: 8px; }
.map-results { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.map-results button { display: block; width: 100%; padding: 8px 10px; border: 0; background: none; text-align: left; font: 14px var(--font); color: var(--navy); border-radius: 8px; cursor: pointer; }
.map-results button:hover, .map-results button:focus-visible { background: var(--subtle); outline: 0; }
.map-msg { margin: 8px 0; }
.map { height: 340px; border: 1px solid var(--border); border-radius: 12px; z-index: 0; }
.appt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.appt-list li { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.appt-now { padding: 12px 14px; background: var(--subtle); border-radius: 10px; }

.cal-title { min-width: 130px; text-align: center; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { padding: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }
.cal-day { min-height: 116px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: var(--canvas); } .cal-day.other .cal-num span:first-child { color: var(--muted); }
.cal-day.today .cal-num span:first-child { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 8px; }
.cal-day.multi { box-shadow: inset 0 3px 0 var(--warning); }
.cal-num { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.cal-chip { display: block; padding: 3px 8px; border-radius: 6px; background: var(--subtle); color: var(--navy); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; }
.cal-chip:hover { background: #E2EAFF; } .cal-chip strong { color: var(--primary); }
.cal-chip.done { background: var(--canvas); color: var(--muted); } .cal-chip.done strong { color: var(--muted); }
.agenda { display: none; margin-top: 16px; gap: 12px; }
.agenda-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--navy); text-decoration: none !important; }
.agenda-row strong { min-width: 70px; color: var(--primary); }
@media (max-width: 800px) { .cal { display: none; } .agenda { display: grid; } .map { height: 280px; } }
[hidden] { display: none !important; }

.conflict-place { margin: 2px 0 6px; font-size: 13px; font-weight: 400; }
.conflict-place a { white-space: nowrap; }

/* Day view & outcomes */
.cal-link { color: inherit; text-decoration: none !important; } .cal-link:hover span { text-decoration: underline; }
.dayplan { display: grid; gap: 0; margin-bottom: 24px; }
.appt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.appt-time { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.appt-time strong { font-size: 20px; }
.appt-body h3 { margin: 0; font-size: 17px; }
.appt-where { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 14px; }
.appt-where a { white-space: nowrap; font-weight: 600; }
.between { margin: 0 0 0 20px; padding: 8px 0 8px 16px; border-left: 2px dashed var(--border); font-size: 13px; color: var(--muted); }
.between.clash { color: var(--warning); font-weight: 600; border-left-color: var(--warning); }
.outcome { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border); font-size: 14px; white-space: pre-line; }
td.wrap { white-space: normal; min-width: 200px; max-width: 340px; }
@media (max-width: 700px) { .appt { grid-template-columns: 1fr; gap: 10px; } .appt-time { flex-direction: row; align-items: center; flex-wrap: wrap; } }

[data-results] { transition: opacity .15s; } [data-results].is-loading { opacity: .5; pointer-events: none; }

/* Dialog, template chips */
.dialog { width: min(560px, 92vw); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--navy); box-shadow: 0 20px 50px rgba(23, 35, 60, .25); }
.dialog::backdrop { background: rgba(23, 35, 60, .45); }
.dialog-body { padding: 24px; }
.chip-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--canvas); color: var(--navy); font: 500 12px ui-monospace, Menlo, monospace; cursor: pointer; }
.chip-btn:hover, .chip-btn:focus-visible { background: var(--subtle); border-color: var(--primary); outline: 0; }
.tl.whatsapp::before { border-color: var(--success); }

/* Analytics: chart colours are validated for colour-blind separation (cobalt, teal, violet) with slate as the quiet context colour. */
:root { --c-primary: #315CF5; --c-teal: #0E8F86; --c-violet: #7357E8; --c-slate: #8A96AB; }
.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 16px; }
.dash-grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 1000px) { .span-4 { grid-column: span 4 !important; } .span-5 { grid-column: span 5 !important; } .span-6 { grid-column: span 6 !important; } .span-7 { grid-column: span 7 !important; } .span-8 { grid-column: span 8 !important; } }
.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.range-bar .input { width: auto; min-width: 150px; }

.attn { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.attn a { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--navy); text-decoration: none !important; }
.attn a:hover { border-color: var(--primary); }
.attn .n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.attn .l { font-size: 13px; font-weight: 600; } .attn .h { font-size: 12px; color: var(--muted); }
.attn a.hot { border-color: #F2B8BE; background: var(--error-bg); } .attn a.hot .n { color: var(--error); }
.attn a.zero .n { color: var(--muted); }

.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.kpi { display: block; padding: 16px 18px; color: var(--navy); text-decoration: none !important; }
a.kpi:hover { border-color: var(--primary); }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { margin: 6px 0 8px; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.kpi-foot { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; align-items: baseline; }
.delta { font-weight: 700; } .delta-good { color: var(--success); } .delta-bad { color: var(--error); } .delta-flat { color: var(--muted); }

.panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.panel-h h2 { margin: 0; } .panel-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.chart .peak { fill: var(--navy); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .bar { fill: var(--c-primary); transition: fill .12s; }
.chart .hit { fill: transparent; }
.chart .mark { outline: 0; } .chart .mark:hover .bar, .chart .mark:focus-visible .bar { fill: #2549D6; }
.chart .mark:focus-visible .hit { stroke: var(--primary); stroke-width: 2; }

.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 150px) 1fr minmax(64px, auto); align-items: center; gap: 12px; padding: 2px 4px; border-radius: 8px; outline: 0; }
.hbar:hover, .hbar:focus-visible { background: var(--canvas); }
.hbar:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.hbar-label { font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; border-radius: 4px; background: var(--canvas); }
.hbar-fill { height: 12px; border-radius: 0 4px 4px 0; background: var(--c-primary); min-width: 0; }
.tone-muted { background: var(--c-slate); } .tone-teal { background: var(--c-teal); } .tone-violet { background: var(--c-violet); }
.hbar-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-size: 13px; }
.hbar-value span { font-size: 11px; color: var(--muted); }
.viewtable { margin-top: 10px; font-size: 13px; } .viewtable summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.viewtable table { margin-top: 6px; font-size: 13px; } .viewtable th, .viewtable td { padding: 6px 8px; }

.tip { position: fixed; z-index: 1000; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff; box-shadow: 0 8px 24px rgba(23, 35, 60, .25); max-width: 280px; }
.tip-v { font-size: 15px; font-weight: 700; } .tip-l { font-size: 12px; color: #C9D3E6; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed .dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--c-slate); }
.feed .dot.call { background: var(--c-primary); } .feed .dot.stage, .feed .dot.appointment { background: var(--c-teal); } .feed .dot.whatsapp { background: var(--success); }
.feed .t { font-size: 12px; color: var(--muted); }
.mini-meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--canvas); vertical-align: middle; margin-left: 6px; }
.mini-meter i { display: block; height: 6px; border-radius: 3px; background: var(--c-primary); }
.report-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* Reports menu & pages */
.navgroup summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; border-left: 3px solid transparent; font-weight: 500; cursor: pointer; }
.navgroup summary::-webkit-details-marker { display: none; }
.navgroup summary::after { content: '›'; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; }
.navgroup[open] summary::after { transform: rotate(90deg); }
.navgroup summary:hover { background: var(--canvas); }
.navgroup summary.active { background: var(--subtle); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.navgroup summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.navsub { display: grid; gap: 2px; margin: 4px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--border); }
.navsub a { padding: 6px 10px; font-size: 14px; border-left: 0 !important; color: var(--muted); }
.navsub a:hover { color: var(--navy); } .navsub a.active { background: var(--subtle); color: var(--primary); font-weight: 600; }
.report-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 20px; }
.report-card { display: grid; gap: 4px; color: var(--navy); text-decoration: none !important; } .report-card:hover { border-color: var(--primary); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }


/* ---- Dashboard redesign: icons, calmer cards ---- */
.ico { flex: none; vertical-align: middle; }
.ico-primary { color: var(--primary); }

/* Sidebar */
.sidebar { padding: 20px 14px; }
.nav { gap: 2px; }
.nav a, .navgroup summary { gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 15px; }
.nav a { display: flex; align-items: center; color: var(--navy); }
.nav a .ico, .navgroup summary .ico { color: #4A5873; }
.nav a:hover, .navgroup summary:hover { background: var(--canvas); }
.nav a.active, .navgroup summary.active { background: var(--subtle); color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.nav a.active .ico, .navgroup summary.active .ico { color: var(--primary); }
.navlabel { display: flex; align-items: center; gap: 12px; }
.navsub a { padding: 7px 10px; font-size: 14px; }
.brand-mark { border-radius: 12px; width: 44px; height: 44px; font-size: 18px; }
.brand-name { font-size: 17px; }

/* Buttons that carry an icon */
.btn { gap: 8px; }
.btn .ico { margin-left: -2px; }
.btn-primary .ico { color: #fff; }

/* Header, period picker */
.lead-line { font-size: 16px; margin-top: 2px; }
.page-head h1 { font-size: 26px; letter-spacing: -.01em; }
.range-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 18px; }
.select-icon { position: relative; display: inline-flex; align-items: center; }
.select-icon > .ico:first-child { position: absolute; left: 12px; color: #4A5873; pointer-events: none; }
.select-icon .caret { position: absolute; right: 12px; color: #4A5873; pointer-events: none; }
.select-icon select.input { appearance: none; -webkit-appearance: none; padding-left: 40px; padding-right: 36px; min-width: 190px; font-weight: 500; }
.range-note { margin: 0; }
.range-note strong { color: var(--navy); }

/* Needs-attention cards */
.attn { gap: 14px; margin-bottom: 14px; }
.attn a { position: relative; padding: 14px 16px 14px; border-radius: 14px; border-color: var(--border); box-shadow: 0 1px 2px rgba(23, 35, 60, .04); }
.attn-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.attn-ico { color: var(--primary); }
.attn .go { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--subtle); color: var(--primary); }
.attn .n { font-size: 26px; }
.attn .l { margin-top: 2px; font-size: 14px; }
.attn a.live { background: var(--subtle); border-color: #D5DFFF; }
.attn a.hot { background: #FFF1F2; border-color: #F2B8BE; }
.attn a.hot .attn-ico { color: var(--error); } .attn a.hot .go { background: #FBD9DD; color: var(--error); }
.attn a.zero .attn-ico { color: #8A96AB; } .attn a.zero .go { background: var(--canvas); color: #8A96AB; }

/* KPI cards */
.kpis { gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 35, 60, .04); }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-label { font-size: 14px; font-weight: 600; color: var(--navy); }
.kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 4px; }
.kpi-value { margin: 0; font-size: 28px; }
.trend { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.trend-good { background: var(--success-bg); color: var(--success); }
.trend-bad { background: var(--error-bg); color: var(--error); }
.trend-flat { background: var(--canvas); color: var(--muted); }
.kpi-foot { flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; line-height: 1.4; }

/* Panels */
.card { border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 35, 60, .04); }
.panel-h { align-items: center; margin-bottom: 10px; }
.ph-title { display: flex; align-items: center; gap: 10px; }
.bubble { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--subtle); color: var(--primary); flex: none; }
.panel-h h2 { font-size: 17px; }
.see-all { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.see-all .ico { margin-top: 1px; }
.person { display: flex; align-items: center; gap: 10px; }
.person .avatar { width: 30px; height: 30px; font-size: 11px; }

@media (max-width: 800px) {
  .nav a, .navgroup summary { padding: 9px 12px; white-space: nowrap; }
  .nav a .ico { display: none; }
  .range-row { flex-direction: column; align-items: flex-start; }
}

/* Card rows: a fixed number of columns per screen size so rows never end in an orphan */
.kpi-label { font-size: 13px; }
.kpi-value { font-size: 26px; white-space: nowrap; }
.trend { width: 30px; height: 30px; }
.attn .l { font-size: 13px; text-wrap: balance; }
@media (min-width: 1280px) { .attn, .kpis { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); } }
@media (min-width: 800px) and (max-width: 1279px) { .attn, .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px) { .attn, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 800px) { .sidebar { padding: 10px 16px 0; } .brand-mark { width: 40px; height: 40px; font-size: 16px; } .brand-name { font-size: 15px; } }
@media (max-width: 800px) { .page-head .actions { flex-wrap: wrap; } .cal-title { min-width: 0; } }


/* ---- Chart kit: area, sparkline, funnel, donut, stacked, segmented bar ---- */
:root { --o1: #84A8FF; --o2: #6691FF; --o3: #4F7AF5; --o4: #3E66DF; --o5: #2D52CA; --o6: #1E3EB4; --o7: #11289F; --o8: #090D8B; --closed: #B8C1D1; }
.o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); } .o4 { background: var(--o4); }
.o5 { background: var(--o5); } .o6 { background: var(--o6); } .o7 { background: var(--o7); } .o8 { background: var(--o8); } .closed { background: var(--closed); }
@media (min-width: 1000px) { .span-7 { grid-column: span 7 !important; } .span-5 { grid-column: span 5 !important; } }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; flex: none; }

/* Area / line */
.chart .aarea { fill: #315CF5; fill-opacity: .10; }
.chart .aline { fill: none; stroke: #315CF5; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .aline.prev { stroke: #8A96AB; stroke-width: 1.75; }
.chart .edot { fill: #315CF5; stroke: #fff; stroke-width: 2; }
.chart .xh { stroke: #B8C1D1; stroke-width: 1; }
.chart .xd { stroke: #fff; stroke-width: 2; }
.chart .xd0 { fill: #315CF5; } .chart .xd1 { fill: #8A96AB; }
.chart .xhit { fill: transparent; cursor: crosshair; outline: 0; }

/* Sparkline inside a KPI card */
.kpi-spark { height: 34px; margin: 2px 0 8px; }
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark path { vector-effect: non-scaling-stroke; }
.spark .sarea { fill: #315CF5; fill-opacity: .10; }
.spark .sline { fill: none; stroke: #315CF5; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark .sline.flat { stroke: #D3DAE6; }

/* Funnel */
.funnel { display: grid; gap: 6px; }
.frow { display: grid; grid-template-columns: minmax(96px, 128px) 1fr 74px 56px; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 8px; outline: 0; }
.frow:hover, .frow:focus-visible { background: var(--canvas); } .frow:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.flabel { font-size: 13px; }
.ftrack { height: 26px; display: flex; justify-content: center; }
.fbar { height: 26px; border-radius: 6px; min-width: 0; transition: filter .12s; }
.frow:hover .fbar { filter: brightness(1.08); }
.fnum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: 13px; }
.fnum span { font-size: 11px; color: var(--muted); }
.fstep { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Donut */
.donut-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 190px; height: 190px; flex: none; }
.dtrack { fill: none; stroke: #EEF2F8; stroke-width: 22; }
.dseg { fill: none; stroke-width: 22; transform: rotate(-90deg); transform-origin: 80px 80px; outline: 0; cursor: default; transition: stroke-width .12s; }
.dseg:hover, .dseg:focus-visible { stroke-width: 26; }
.dcenter { font-size: 24px; font-weight: 700; fill: var(--navy); font-family: var(--font); }
.dsub { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.dlegend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: grid; gap: 8px; }
.dlegend li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.dlegend .key { height: 10px; width: 10px; border-radius: 50%; }
.dl small { display: block; font-size: 11px; color: var(--muted); }
.dv { text-align: right; color: var(--muted); font-size: 12px; } .dv strong { color: var(--navy); font-size: 14px; }

/* Segmented bar */
.segbar { display: flex; gap: 2px; height: 30px; }
.seg { height: 30px; min-width: 6px; border-radius: 4px; outline: 0; transition: filter .12s; }
.seg:first-child { border-radius: 8px 4px 4px 8px; } .seg:last-child { border-radius: 4px 8px 8px 4px; }
.seg:hover, .seg:focus-visible { filter: brightness(1.12); } .seg:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.seglegend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.seglegend li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.seglegend .key { width: 10px; height: 10px; border-radius: 3px; }
.seglegend span { color: var(--muted); } .seglegend strong { color: var(--navy); } .seglegend small { color: var(--muted); font-size: 11px; }
@media (max-width: 700px) { .frow { grid-template-columns: 90px 1fr 56px; } .fstep { display: none; } .donut { width: 160px; height: 160px; } }
.tip-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .tip-row .tip-v { font-size: 14px; font-weight: 700; } .tip-row .key { width: 12px; height: 3px; }

/* Tuning: a roomier funnel, and a legend that doesn't wrap awkwardly */
.funnel { gap: 9px; align-content: start; }
.ftrack, .fbar { height: 32px; }
.fbar { border-radius: 8px; }
.seglegend { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.seglegend li { white-space: nowrap; }


/* ---- Collapsible sidebar ---------------------------------------------------------------------
   Desktop: an icon-only rail (state remembered). Phones: a slide-in drawer. */
.shell { transition: grid-template-columns .2s ease; align-items: start; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 30; }
.main { align-self: stretch; }
.sb-backdrop { display: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-toggle { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--navy); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.sb-toggle:hover { background: var(--canvas); }
.sb-toggle:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.nav-flat { display: none; }
.only-mobile { display: none; }

@media (min-width: 801px) {
  html.sb-collapsed .shell { grid-template-columns: 76px minmax(0, 1fr); }
  html.sb-collapsed .sidebar { padding: 20px 12px; }
  html.sb-collapsed .sidebar .brand { justify-content: center; margin: 0 0 22px; }
  html.sb-collapsed .sidebar .brand > div:last-child { display: none; }
  html.sb-collapsed .nav a, html.sb-collapsed .navgroup summary { justify-content: center; padding: 12px 0; gap: 0; border-left-width: 0; }
  html.sb-collapsed .nav a > span:not(.ico), html.sb-collapsed .navlabel > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.sb-collapsed .navgroup { display: none; }
  html.sb-collapsed .nav-flat { display: flex; }
}

@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr) !important; }
  .only-desktop { display: none; } .only-mobile { display: inline-block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: auto; z-index: 70; padding: 18px 14px; border-right: 1px solid var(--border); border-bottom: 0; background: var(--surface);
             transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html.sb-open .sidebar { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(23, 35, 60, .28); transition: transform .22s ease; }
  .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(23, 35, 60, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  html.sb-open .sb-backdrop { opacity: 1; visibility: visible; transition: opacity .2s ease; }
  html.sb-open body { overflow: hidden; }
  .sidebar .brand { margin: 0 6px 20px; } .sidebar .brand-sub { display: block; }
  .nav { display: grid; overflow: visible; margin: 0; padding: 0; gap: 2px; }
  .nav a, .navgroup summary { padding: 11px 14px; white-space: normal; flex: none; }
  .nav a .ico { display: inline-block; }
  .navgroup { display: block; flex: none; }
  .navsub { display: grid; position: static; margin: 4px 0 6px 18px; padding: 0 0 0 10px; background: none; border: 0; border-left: 1px solid var(--border); box-shadow: none; }
  .nav-flat { display: none !important; }
  .topbar { position: sticky; top: 0; z-index: 20; }
  .welcome { display: none; }
}


/* ---- Sidebar grouping, user menu, sign-out ------------------------------------------------------ */
.nav a.nav-flat { display: none; }                       /* beats ".nav a { display: flex }" so Reports is never listed twice */
.nav-section { margin: 14px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.navbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: none; font: 500 15px var(--font); color: var(--navy); text-align: left; cursor: pointer; }
.navbtn .ico { color: #4A5873; }
.navbtn:hover { background: var(--error-bg); color: var(--error); } .navbtn:hover .ico { color: var(--error); }
.navbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }

.usermenu { position: relative; }
.usermenu-btn { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer; font: inherit; color: var(--navy); }
.usermenu-btn:hover, .usermenu-btn[aria-expanded="true"] { background: var(--canvas); border-color: var(--border); }
.usermenu-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.um-text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.um-text strong { font-size: 14px; } .um-text small { font-size: 12px; color: var(--muted); }
.um-caret { color: var(--muted); transition: transform .15s; } .usermenu-btn[aria-expanded="true"] .um-caret { transform: rotate(180deg); }
.usermenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 230px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 35, 60, .16); }
.um-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.um-head strong { font-size: 14px; } .um-head small { font-size: 12px; color: var(--muted); word-break: break-all; }
.usermenu-list a, .usermenu-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: 500 14px var(--font); color: var(--navy); text-align: left; text-decoration: none; cursor: pointer; }
.usermenu-list a .ico, .usermenu-list button .ico { color: #4A5873; }
.usermenu-list a:hover, .usermenu-list a:focus-visible, .usermenu-list button:focus-visible, .usermenu-list button:hover { background: var(--canvas); outline: 0; }
.usermenu-list a.active { background: var(--subtle); color: var(--primary); } .usermenu-list a.active .ico { color: var(--primary); }
.usermenu-list form button:hover, .usermenu-list form button:focus-visible { background: var(--error-bg); color: var(--error); } .usermenu-list form button:hover .ico, .usermenu-list form button:focus-visible .ico { color: var(--error); }
.um-sep { height: 1px; margin: 6px 4px; background: var(--border); }

@media (min-width: 801px) {
  html.sb-collapsed .nav a.nav-flat { display: flex; }
  html.sb-collapsed .nav-section { height: 1px; margin: 10px 8px; padding: 0; background: var(--border); font-size: 0; overflow: hidden; }
  html.sb-collapsed .nav-section span { display: none; }
  html.sb-collapsed .navbtn { justify-content: center; padding: 12px 0; gap: 0; }
  html.sb-collapsed .navbtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 800px) {
  .nav a.nav-flat { display: none !important; }
  .um-text, .um-caret { display: none; }
  .usermenu-btn { padding: 3px; }
  .sidebar-foot { margin-top: 12px; }
}

.locked { position: relative; } .locked > .ico { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.locked .input { padding-left: 38px; background: var(--canvas); color: var(--muted); cursor: not-allowed; }


/* ---- Lists: one table pattern for every listing page ------------------------------------------- */
.filters { align-items: center; gap: 12px; margin-bottom: 18px; }
.search-box { position: relative; flex: 1; min-width: 240px; }
.search-box > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8A96AB; pointer-events: none; }
.search-box .input { padding-left: 42px; height: 46px; border-radius: 12px; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap select.input { appearance: none; -webkit-appearance: none; height: 46px; border-radius: 12px; padding: 0 38px 0 16px; min-width: 150px; font-weight: 500; }
.select-wrap .caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #4A5873; pointer-events: none; }
.reset { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); white-space: nowrap; padding: 0 6px; }
.reset:hover { text-decoration: none; opacity: .8; }

.listcard { padding: 0; overflow: hidden; margin-bottom: 20px; }
.listbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; flex-wrap: wrap; }
.listbar .count { color: var(--muted); font-size: 15px; }
.sortby { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.sortby .select-wrap select.input { height: 40px; min-width: 190px; border-radius: 10px; }
.listfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--border); font-size: 14px; }

.dt { width: 100%; border-collapse: separate; border-spacing: 0; }
.dt thead th { background: var(--subtle); color: #4A5873; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 13px 16px; text-align: left; border-bottom: 0; white-space: nowrap; }
.dt thead th:first-child { border-radius: 10px 0 0 10px; } .dt thead th:last-child { border-radius: 0 10px 10px 0; }
.dt tbody td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr:hover td { background: #FAFBFE; }
.dt tbody tr.selected td { background: var(--subtle); }
.dt .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dt td .name { font-weight: 600; font-size: 15px; }
.dt .wrap { white-space: normal; }
.dt th.colcheck, .dt td.colcheck { width: 44px; padding-left: 20px; padding-right: 4px; }
.dt th.end, .dt td.end { width: 56px; text-align: right; padding-right: 16px; }
.dt input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }
.tablescroll { overflow-x: auto; padding: 0 12px 4px; }
.th-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none !important; }
.th-sort .ico { color: #8A96AB; } .th-sort:hover { color: var(--navy); } .th-sort.on, .th-sort.on .ico { color: var(--primary); }
.th-sort:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.pill-overdue { background: var(--error-bg); color: var(--error); }
.pill-today { background: var(--subtle); color: var(--primary); }

.kebab-wrap { display: inline-block; }
.kebab { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; background: none; color: #4A5873; cursor: pointer; }
.kebab:hover, .kebab[aria-expanded="true"] { background: var(--canvas); color: var(--navy); }
.kebab:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.kmenu { position: fixed; z-index: 90; min-width: 190px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 35, 60, .16); text-align: left; }
.kmenu a, .kmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: 500 14px var(--font); color: var(--navy); text-align: left; text-decoration: none; cursor: pointer; }
.kmenu .ico { color: #4A5873; }
.kmenu a:hover, .kmenu a:focus-visible, .kmenu button:hover, .kmenu button:focus-visible { background: var(--canvas); outline: 0; text-decoration: none; }
.kmenu .danger, .kmenu .danger .ico { color: var(--error); } .kmenu .danger:hover { background: var(--error-bg); }
.kmenu .ksep { height: 1px; margin: 5px 4px; background: var(--border); }

.pager.numbers { display: inline-flex; gap: 6px; margin: 0; }
.pg { min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none !important; }
a.pg:hover { background: var(--canvas); } a.pg:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.pg.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg.disabled { color: #B8C1D1; background: var(--canvas); } .pg.gap { border: 0; background: none; }

.bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 16px; border: 1px solid #D5DFFF; border-radius: 12px; background: var(--subtle); }
.bulkbar[hidden] { display: none; }
.bulkbar .sel { font-weight: 600; color: var(--primary); margin-right: 4px; }
.bulkbar .select-wrap select.input { height: 38px; min-width: 200px; background: var(--surface); }
.bulkbar form { display: inline-flex; gap: 8px; align-items: center; }

/* The same header style carries over to every other table (reports, follow-ups…) */
.card table:not(.dt) thead th, .table-wrap table:not(.dt) thead th { background: var(--subtle); color: #4A5873; font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 12px 14px; border-bottom: 0; }
.card table:not(.dt) thead th:first-child { border-radius: 10px 0 0 10px; } .card table:not(.dt) thead th:last-child { border-radius: 0 10px 10px 0; }
.card table:not(.dt) td { padding: 14px; }
.card table:not(.dt) tbody tr:hover td { background: #FAFBFE; }
.countchip { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--subtle); color: var(--primary); font-size: 12px; font-weight: 700; vertical-align: 2px; }

@media (max-width: 800px) {
  .filters { flex-direction: column; align-items: stretch; } .select-wrap, .select-wrap select.input { width: 100%; }
  .listbar, .listfoot { padding: 14px 16px; }
}

/* Layout fixes for lists */
.filters .search-box .input { width: 100%; }
.dt thead th, .dt tbody td { padding-left: 14px; padding-right: 14px; }
.dt tbody td { white-space: normal; }
.dt .pill, .dt .badge, .dt .name { white-space: nowrap; }
.dt th.colcheck, .dt td.colcheck { padding-left: 18px; padding-right: 2px; }
.dt th.end, .dt td.end { padding-right: 14px; }

.dt td.nw { white-space: nowrap; }
.tablescroll, .listcard { position: relative; }

@media (max-width: 800px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters .search-box, .filters .reset, .filters noscript { grid-column: 1 / -1; }
  .filters .select-wrap select.input { min-width: 0; }
  .sortby { width: 100%; justify-content: space-between; }
}

/* ---- Calendar redesign: summary, switcher, status colours, week grid, agenda ------------------------ */
:root { --ev-up-bg: #EEF3FF; --ev-up-bd: #315CF5; --ev-up-fg: #1F3FB8; --ev-pend-bg: #FDEBED; --ev-pend-bd: #B42332; --ev-pend-fg: #8F1B28; --ev-met-bg: #E7F6EE; --ev-met-bd: #21764A; --ev-met-fg: #195C39; --ev-no-bg: #FFF4D9; --ev-no-bd: #C98A12; --ev-no-fg: #7A4A05; }
.ev-upcoming { background: var(--ev-up-bg); border-color: var(--ev-up-bd); color: var(--ev-up-fg); }
.ev-pending { background: var(--ev-pend-bg); border-color: var(--ev-pend-bd); color: var(--ev-pend-fg); }
.ev-met { background: var(--ev-met-bg); border-color: var(--ev-met-bd); color: var(--ev-met-fg); }
.ev-noshow { background: var(--ev-no-bg); border-color: var(--ev-no-bd); color: var(--ev-no-fg); }
.ico-bad { color: var(--error); }

.calstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.cs { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--navy); text-decoration: none !important; }
a.cs:hover { border-color: var(--primary); }
.cs .n { font-size: 24px; font-weight: 700; line-height: 1.1; } .cs .n.small { font-size: 16px; line-height: 1.3; }
.cs .l { font-size: 13px; color: var(--muted); }
.cs.hot { background: #FFF1F2; border-color: #F2B8BE; } .cs.hot .n { color: var(--error); }

.caltools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.calnav, .calright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.callabel { margin: 0 0 0 8px; font-size: 20px; letter-spacing: -.01em; }
.btn-icon { width: 40px; padding: 0; }
.switch { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.switch a { padding: 7px 16px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none !important; }
.switch a:hover { color: var(--navy); }
.switch a[aria-current="page"] { background: var(--subtle); color: var(--primary); }
.switch a:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; color: var(--muted); }
.legend-row li { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 22px; height: 22px; border-radius: 6px; border-left: 3px solid; display: inline-grid; place-items: center; }

/* Month */
.cal-head div { background: var(--canvas); }
.cal-day { min-height: 132px; padding: 8px 8px 10px; gap: 5px; }
.cal-day.wknd { background: #FBFCFE; } .cal-day.other { background: var(--canvas); opacity: .75; }
.cal-day.today { background: #F5F8FF; }
.cal-num { margin-bottom: 2px; }
.cchip { display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border-left: 3px solid; border-radius: 6px; font-size: 12px; line-height: 1.3; text-decoration: none !important; min-width: 0; }
.cchip .ico { flex: none; } .cchip b { flex: none; font-weight: 700; }
.cchip .cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cchip:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(23, 35, 60, .12); }
.who { flex: none; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.cmore { font-size: 12px; font-weight: 600; padding: 0 6px; }

/* Week */
.weekgrid { padding: 0; overflow: hidden; }
.wg-row { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); }
.wg-head { border-bottom: 1px solid var(--border); background: var(--canvas); }
.wg-dayhead { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 12px 6px; color: var(--navy); text-decoration: none !important; border-left: 1px solid var(--border); }
.wg-dayhead .dn { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wg-dayhead .dd { font-size: 18px; font-weight: 700; }
.wg-dayhead .dc { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--subtle); color: var(--primary); }
.wg-dayhead.today .dd { background: var(--primary); color: #fff; border-radius: 999px; min-width: 30px; text-align: center; padding: 2px 6px; }
.wg-dayhead:hover { background: var(--subtle); }
.wg-body { position: relative; }
.wg-gutter { position: relative; }
.wg-gutter span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.wg-gutter span:first-child { transform: none; }
.wg-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--px) - 1px), var(--border) calc(var(--px) - 1px), var(--border) var(--px)); }
.wg-col.wknd { background-color: #FBFCFE; } .wg-col.today { background-color: #F5F8FF; }
.wg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--error); z-index: 3; }
.wg-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.wg-ev { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 4px 7px; border-left: 3px solid; border-radius: 7px; overflow: hidden; font-size: 12px; line-height: 1.3; text-decoration: none !important; box-shadow: 0 0 0 1px #fff; }
.wg-ev:hover { z-index: 4; filter: brightness(.97); box-shadow: 0 3px 10px rgba(23, 35, 60, .2); }
.wg-ev .t { display: flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.wg-ev .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-ev .pl { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-ev.tight { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; } .wg-ev.tight .nm { flex: 1; min-width: 0; }

/* Agenda list (also what phones see) */
.agendalist { display: grid; gap: 14px; }
.agenda-day { padding: 0; overflow: hidden; }
.ad-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; background: var(--canvas); border-bottom: 1px solid var(--border); }
.ad-head h3 { margin: 0; font-size: 15px; } .ad-head h3 a { color: var(--navy); }
.arow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border); color: var(--navy); text-decoration: none !important; }
.ad-head + .arow { border-top: 0; }
.arow:hover { background: #FAFBFE; }
.arow .at { font-weight: 700; color: var(--primary); display: flex; flex-direction: column; line-height: 1.25; } .arow .at small, .arow .am small { font-weight: 400; font-size: 12px; color: var(--muted); }
.arow .am { display: flex; flex-direction: column; min-width: 0; } .arow .am small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border-left: 0 !important; font-size: 12px; font-weight: 700; white-space: nowrap; }

.cal-mobile { display: none; }
@media (max-width: 1100px) { .calstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .cal-desktop { display: none; } .cal-mobile { display: block; }
  .calstats { gap: 10px; } .cs { padding: 12px 14px; gap: 10px; }
  .caltools { align-items: stretch; } .calright { width: 100%; justify-content: space-between; } .callabel { font-size: 17px; }
  .arow { grid-template-columns: 74px minmax(0, 1fr); } .arow .ast { grid-column: 2; justify-self: start; }
}

.wg-ev.narrow { padding: 3px 5px; font-size: 11px; } .wg-ev.narrow .ico, .wg-ev.narrow .who { display: none; }
.wg-ev .t { overflow: hidden; text-overflow: ellipsis; }


/* ---- Compact header: the page's title, subtitle and buttons live in the top bar ----------------- */
.topbar { position: sticky; top: 0; z-index: 25; min-height: 60px; padding: 8px 24px; gap: 8px 14px; flex-wrap: wrap; }
.topbar-left { flex: 1 1 320px; min-width: 0; gap: 12px; }
.sb-toggle { width: 36px; height: 36px; border-radius: 9px; }
.hdr-back { flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--navy); text-decoration: none !important; }
.hdr-back:hover { background: var(--canvas); } .hdr-back:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.hdr-titles { min-width: 0; }
.hdr-titles h1 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hdr-sub { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sub .lead-sub { display: inline-flex; flex-wrap: nowrap; gap: 0 12px; margin: 0; }
.hdr-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.hdr-actions:empty { display: none; }
.hdr-actions .btn { height: 38px; padding: 0 14px; font-size: 14px; }
.hdr-actions .btn-sm { height: 36px; }
.hdr-actions form { display: inline-flex; }
.hdr-actions .select-wrap select.input { height: 38px; min-width: 150px; border-radius: 10px; }
.content { padding: 20px 28px 28px; }
@media (max-width: 800px) {
  .topbar { padding: 8px 14px; }
  .topbar-left { flex-basis: 0; }
  .hdr-actions { order: 3; width: 100%; justify-content: flex-start; }
  .hdr-sub { white-space: normal; }
  .content { padding: 16px 14px 24px; }
}


/* Follow-up tabs */
.ftabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ftabs a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--navy); font-weight: 600; text-decoration: none !important; }
.ftabs a .ico { color: #4A5873; } .ftabs a:hover { border-color: var(--primary); }
.ftabs a b { min-width: 26px; padding: 1px 9px; border-radius: 999px; background: var(--canvas); color: var(--muted); font-size: 13px; text-align: center; }
.ftabs a.on { background: var(--subtle); border-color: var(--primary); color: var(--primary); } .ftabs a.on .ico { color: var(--primary); } .ftabs a.on b { background: var(--primary); color: #fff; }
.ftabs a.bad:not(.on) b { background: var(--error-bg); color: var(--error); } .ftabs a.bad:not(.on) .ico { color: var(--error); }
.ftabs a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ---- Import wizard ---------------------------------------------------------------------------- */
.wiz { list-style: none; display: flex; align-items: center; gap: 0; margin: 0 0 18px; padding: 0; }
.wiz li { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.wiz li + li::before { content: ''; flex: 1; height: 2px; margin: 0 16px; background: var(--border); min-width: 20px; }
.wiz li.done + li::before, .wiz li.now::before { background: var(--primary); }
.wiz .dot { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 700; }
.wiz li.now .dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--ring); }
.wiz li.done .dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.wiz .txt { display: flex; flex-direction: column; line-height: 1.25; } .wiz .txt strong { font-size: 15px; } .wiz .txt small { font-size: 12.5px; color: var(--muted); }
.wiz li:not(.now):not(.done) .txt strong { color: var(--muted); }

.imp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; border: 2px dashed #B6C6F7; border-radius: 14px; background: #FAFCFF; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.over { background: var(--subtle); border-color: var(--primary); }
.dropzone.bad { border-color: #E8A3AB; background: #FFF8F9; }
.dropzone:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
.dropzone .dz-ico { color: #5C7CF0; margin-bottom: 4px; } .dropzone strong { font-size: 19px; } .dropzone > span { color: var(--muted); }
.dropzone .btn { margin: 10px 0 6px; pointer-events: none; } .dropzone small { color: var(--muted); } .dropzone small i { font-style: normal; margin: 0 6px; color: var(--border); }
.chosen { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); }
.chosen[hidden] { display: none; } .chosen > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chosen strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.note.info { background: var(--subtle); color: var(--navy); } .note .ico { color: var(--primary); margin-top: 1px; } .note div { display: flex; flex-direction: column; } .note span { color: var(--muted); }
.sect { display: flex; gap: 16px; align-items: flex-start; } .sect h2 { margin: 0 0 2px; font-size: 16px; } .sect p { margin: 0 0 10px; }
.sect-ico { flex: none; margin-top: 2px; color: var(--primary); } .sect-ico.bad { color: var(--error); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 14px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--border); font-size: 14px; color: #3D4C68; }
.tag.req { background: var(--error-bg); border-color: #F2B8BE; color: var(--error); font-weight: 600; } .tag.req b { margin-left: 4px; }
details.sect { display: block; } details.sect > summary { display: flex; gap: 16px; align-items: flex-start; list-style: none; cursor: pointer; } details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary > div { flex: 1; } details.sect .chev { color: var(--muted); transition: transform .15s; margin-top: 4px; } details.sect:not([open]) .chev { transform: rotate(-90deg); }
details.sect[open] > summary { margin-bottom: 4px; } details.sect .tags { margin-left: 38px; }
.tagnote { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0 38px !important; padding-top: 12px; border-top: 1px solid var(--border); }
.tagnote .ico { flex: none; margin-top: 1px; }
.side-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; } .side-h .ico { color: var(--primary); }
.check-list { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 12px; }
.check-list li { counter-increment: c; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.check-list li::before { content: counter(c); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; }
.tipcard { background: #EEF8F4; border-color: #CDE8DC; } .tipcard .side-h .ico { color: #1B8F6A; } .tipcard p { margin: 0; font-size: 14px; color: #3D5A50; }

.imp-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.imp-sum .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; } .imp-sum span { font-size: 13px; color: var(--muted); } .imp-sum strong { font-size: 26px; line-height: 1.2; }
.imp-sum .ok strong { color: var(--success); } .imp-sum .warn strong { color: var(--warning); } .imp-sum .bad strong { color: var(--error); }
.alert-warn { background: var(--warning-bg); color: var(--warning); }
.sect-h { padding: 4px 4px 12px; } .sect-h h2 { margin: 0 0 2px; font-size: 16px; } .sect-h p { margin: 0; }
#map-form .tablescroll { padding: 0; } #map-form .select-wrap select.input { height: 42px; min-width: 200px; }
#map-form select.req { border-color: #B6C6F7; background: var(--subtle); font-weight: 600; }
.badge-error { background: var(--error-bg); color: var(--error); }
.plist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .plist li { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; border-radius: 10px; background: var(--canvas); } .plist li span { color: var(--error); flex-basis: 100%; font-size: 13px; }
details.problems .plist { margin-left: 38px; }
.done-card { text-align: center; padding: 34px 24px; } .done-card h2 { margin: 12px 0 6px; font-size: 22px; } .done-card p { margin: 0; }
.done-ico { width: 72px; height: 72px; border-radius: 50%; display: inline-grid; place-items: center; } .done-ico.ok { background: var(--success-bg); color: var(--success); } .done-ico.none { background: var(--warning-bg); color: var(--warning); }
@media (max-width: 1000px) { .imp-grid { grid-template-columns: minmax(0, 1fr); } .imp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .wiz .txt small { display: none; } .wiz li + li::before { margin: 0 8px; } .wiz .txt strong { font-size: 13px; } }
@media (max-width: 700px) {
  .wiz li { flex: 1 1 0; min-width: 0; } .wiz li.now { flex: 3 1 0; }
  .wiz li:not(.now) .txt { display: none; }
  .wiz .txt { min-width: 0; } .wiz .txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .imp-grid { gap: 14px; } .dropzone { padding: 22px 12px; } .dropzone strong { font-size: 17px; }
  .imp-sum strong { font-size: 22px; }
}

.dropzone .btn.btn-primary { color: #fff; }
@media (max-width: 800px) { .topbar { position: static; } }


/* ---- Import: compact enough to fit one screen -------------------------------------------------- */
.imp-fit { gap: 14px; }
.imp-fit .stack { gap: 14px; }
.wiz { margin-bottom: 14px; }
.dropzone { padding: 16px 14px; gap: 3px; } .dropzone .dz-ico { margin-bottom: 0; } .dropzone strong { font-size: 17px; } .dropzone .btn { margin: 8px 0 4px; height: 38px; }
.imp-fit .card { padding: 16px 20px; }
.imp-fit .note { margin-top: 12px; padding: 10px 14px; }
.colscard { display: grid; gap: 12px; }
.colrow { display: flex; gap: 12px; align-items: flex-start; } .colrow h2 { margin: 0 0 6px; font-size: 15px; } .colrow .tags { align-items: center; }
.colscard .tag { padding: 4px 12px; font-size: 13px; }
.colscard .tagnote { margin: 0 !important; padding-top: 10px; border-top: 1px solid var(--border); }
.imp-fit .side-h { margin-bottom: 10px; } .imp-fit .check-list { gap: 9px; } .imp-fit .check-list li { font-size: 13.5px; }
.imp-fit .tipcard p { font-size: 13.5px; }
.imp-sum { gap: 12px; margin-bottom: 14px; } .imp-sum .card { padding: 9px 16px; } .imp-sum strong { font-size: 21px; }
.imp-review { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.imp-review .stack { gap: 14px; }
.imp-review .card { padding: 14px 18px; } .imp-review .listcard { padding: 0; }
.mapcard .sect-h { padding: 0 0 8px; }
.imp-review .dt tbody td { padding: 9px 12px; } .imp-review .dt thead th { padding: 10px 12px; }
.imp-review #map-form .select-wrap select.input { height: 38px; min-width: 170px; }
.imp-review .listbar { padding: 12px 18px; }
.imp-review .tipcard p { font-size: 13.5px; }
@media (max-width: 1000px) { .imp-review { grid-template-columns: minmax(0, 1fr); } }


/* ---- Follow-ups ---------------------------------------------------------------------------------- */
.avatar.av-0 { background: #E8EEFE; color: #315CF5; } .avatar.av-1 { background: #F1ECFD; color: #7357E8; } .avatar.av-2 { background: #E3F4F2; color: #0E8F86; }
.avatar.av-3 { background: #FDEFE0; color: #B45A0B; } .avatar.av-4 { background: #EAEEF5; color: #4A5873; }
.fu-top { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.fu-top .ftabs { margin: 0; } .fu-top .filters { margin: 0; min-width: 280px; flex: 0 1 380px; }
.ftabs a { padding: 10px 16px; border-radius: 12px; }
.listtools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .listtools .select-wrap select.input { height: 40px; min-width: 150px; }
.pill-later { background: var(--canvas); color: var(--navy); }
.fu-table td { padding-top: 14px; padding-bottom: 14px; } .fu-table .pill { padding: 5px 14px; font-size: 13px; }
.fu-table .person .avatar { width: 40px; height: 40px; font-size: 13px; } .fu-table td:nth-child(5) .person .avatar { width: 34px; height: 34px; font-size: 12px; }
.rowbtns { display: inline-flex; gap: 8px; justify-content: flex-end; } .rowbtns .btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
@media (max-width: 800px) { .fu-top .filters { flex-basis: 100%; } .rowbtns .btn-sm { padding: 0 10px; } }

/* ---- Appointments: day view ------------------------------------------------------------------------ */
.dp-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.dp-bar .dpseg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.dp-bar .dpseg button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.dp-bar .dpseg button.on { background: var(--primary); color: #fff; } .dp-bar .dpseg button:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.dp-mapbox { padding: 0; overflow: hidden; margin-bottom: 18px; } #dp-leaflet { height: min(560px, 62vh); } #dp-nomap { padding: 24px; margin: 0; }
.dp-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(9,13,139,.35); }
.dp-group { margin-bottom: 18px; } .dp-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0 12px; }
.dp-group > summary::-webkit-details-marker { display: none; }
.dp-who { font-size: 18px; font-weight: 700; color: var(--navy); } .dp-who .muted { font-weight: 400; font-size: 16px; }
.dp-group .chev { transition: transform .15s; color: var(--muted); } .dp-group:not([open]) .chev { transform: rotate(-90deg); }
.dayplan { margin-bottom: 0; }
.dp-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; position: relative; }
.dp-item .appt-time { position: relative; padding-left: 22px; padding-top: 4px; }
.dp-item .appt-time::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--subtle); }
.dp-item .appt-time::after { content: ""; position: absolute; left: 4px; top: 26px; bottom: -40px; width: 2px; background: var(--border); }
.dp-item:last-child .appt-time::after { display: none; }
.dp-item .appt { display: block; padding: 18px 20px; } .dp-item .appt-time strong { font-size: 19px; }
.appt-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.appt-head .person .avatar { width: 46px; height: 46px; font-size: 15px; } .appt-head .name { font-size: 17px; }
.appt-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dp-item .appt-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 6px; font-size: 14px; } .dp-item .appt-where .ico { color: var(--muted); }
.dp-item .appt-where a { padding-left: 12px; border-left: 1px solid var(--border); }
.appt-note { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0; } .appt-note .ico { color: var(--muted); }
.appt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip { display: inline-flex; padding: 5px 14px; border-radius: 10px; background: var(--subtle); color: var(--primary); font-weight: 600; font-size: 14px; } .chip-amt { background: #FFF3DC; color: #7A4A00; }
.appt-actions { margin-top: 14px; flex-wrap: wrap; gap: 10px; } .appt-actions .btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-outline { border-color: var(--primary); color: var(--primary); }
.dp-item .outcome { margin-top: 8px; }
.between { border-left: 0; display: flex; align-items: center; gap: 10px; margin: 0 0 12px 172px; padding: 10px 16px; border-radius: 10px; background: var(--subtle); color: #4A5873; font-size: 14px; }
.between > span { flex: 1; } .between a { font-weight: 600; white-space: nowrap; }
.between.clash { background: #FFF3DC; color: #7A4A00; font-weight: 600; } .between.clash .ico { color: #B45A0B; }
.btn-icon { width: 36px; padding: 0; display: inline-grid; place-items: center; }
@media (max-width: 800px) { .dp-item { grid-template-columns: 1fr; gap: 8px; } .dp-item .appt-time { flex-direction: row; flex-wrap: wrap; align-items: center; } .dp-item .appt-time::after { display: none; } .between { margin-left: 0; } .appt-head { flex-direction: column; } }

/* ---- Loan eligibility ------------------------------------------------------------------------------ */
.elig-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.elig-note { margin: 4px 0 14px; } .stale { color: var(--warning); font-weight: 600; }
@media (max-width: 1100px) { .elig-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elig-form { max-width: 980px; } .form-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inline2 { display: grid; grid-template-columns: 1fr 110px; gap: 8px; } .hint.src { color: var(--primary); margin-top: 4px; }
.elig-submit { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.alert-info { background: var(--subtle); color: var(--navy); } [data-cats][hidden] { display: none; }
@media (max-width: 800px) { .form-grid.g3 { grid-template-columns: 1fr; } }
.elig-cols { grid-template-columns: minmax(0, 1fr) 340px; } @media (max-width: 1000px) { .elig-cols { grid-template-columns: minmax(0, 1fr); } }
.alert-warn { background: var(--warning-bg); color: var(--warning); }
.sortlinks { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sortlinks a { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--navy); text-decoration: none; font-weight: 600; } .sortlinks a.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.rcard { scroll-margin-top: 80px; } .rcard-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .rcard-head h3 { margin: 0 0 2px; font-size: 18px; } .rbadges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rcalc { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; } .rcalc > div { background: var(--canvas); border-radius: 10px; padding: 10px 14px; } .rcalc span { display: block; font-size: 12px; color: var(--muted); } .rcalc strong { font-size: 18px; color: var(--navy); }
.rworking { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .rworking > summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 4px 0; } .rworking[open] > summary { margin-bottom: 8px; }
.calc-table td:first-child { color: var(--muted); width: 55%; }
.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { .insights { grid-template-columns: 1fr; } }
.ins { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .ins h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 14px; } .ins h4 b { margin-left: auto; font-size: 12px; background: var(--canvas); border-radius: 999px; padding: 1px 9px; }
.ins.good h4 { color: var(--success); } .ins.bad h4 { color: var(--error); } .ins.warn h4 { color: var(--warning); }
.ins-row { display: grid; gap: 2px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; } .ins-row:first-of-type { border-top: 0; } .ins-row strong em { font-style: normal; font-size: 11px; background: var(--error-bg); color: var(--error); padding: 1px 7px; border-radius: 999px; margin-left: 4px; } .ins-row span { color: var(--muted); } .ins-row .fix { color: var(--primary); }
.kvl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; } .kvl dt { color: var(--muted); } .kvl dd { margin: 0; text-align: right; font-weight: 600; }
.srcchip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 4px; background: var(--canvas); color: var(--muted); } .src-lead { background: var(--subtle); color: var(--primary); } .src-missing { background: var(--warning-bg); color: var(--warning); } .src-derived { background: #E3F4F2; color: #0E8F86; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .hist li { display: grid; padding: 8px 10px; border-radius: 8px; } .hist li.now { background: var(--subtle); } .hist a { font-weight: 600; }
.override .form-grid { grid-template-columns: 220px 1fr; align-items: end; }
.newver { display: flex; gap: 12px; align-items: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }

.elig-cols > .stack { min-width: 0; }

.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 800px) { .methods { grid-template-columns: 1fr; } }
.method { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .method:has(input:checked) { border-color: var(--primary); background: var(--subtle); }
.method small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; } .method em { font-style: normal; color: var(--warning); } .method.off { opacity: .55; cursor: not-allowed; }
.method input { margin-top: 4px; }
.elig-cols > .stack { grid-template-columns: minmax(0, 1fr); }
.elig-cols { grid-template-columns: minmax(0, 1fr) 300px; } .elig-cols .dt th, .elig-cols .dt td { padding-left: 8px; padding-right: 8px; }
.ubar { width: 110px; height: 6px; border-radius: 99px; background: var(--canvas); overflow: hidden; margin-bottom: 4px; } .ubar i { display: block; height: 100%; background: var(--primary); } .ubar i.warm { background: #E8A33D; } .ubar i.hot { background: var(--error); }

/* ---- Eligibility result: comparison list with expandable rows ------------------------------------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border: 1px solid #C9D6FB; background: var(--subtle); border-radius: 12px; font-size: 14px; } .notice[hidden] { display: none; }
.notice > .ico { color: var(--primary); margin-top: 1px; } .notice > div { flex: 1; } .notice .muted { display: block; margin-top: 2px; }
.notice-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 6px; } .notice-x:hover { color: var(--navy); }
.cmp { padding: 0; overflow: hidden; } .cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 10px; } .cmp-head h2 { margin: 0; font-size: 18px; }
.cmp-grid { display: grid; grid-template-columns: minmax(190px, 2.2fr) minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(90px, .8fr) 70px 28px; gap: 12px; align-items: center; padding: 0 20px; width: 100%; }
.cmp-cols { background: var(--canvas); height: 40px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lrow { border-bottom: 1px solid var(--border); } .lrow.open { background: #FAFBFF; box-shadow: inset 3px 0 0 var(--primary); }
.lsum { min-height: 66px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--navy); cursor: pointer; } .lsum:hover { background: var(--canvas); } .lsum:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.lname { display: flex; gap: 12px; align-items: center; min-width: 0; } .lname strong { display: block; } .lname small, .lsum small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; } .lsum .ovr { margin-top: 2px; }
.logo { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.logo.t0 { background: #E8EEFE; color: #315CF5; } .logo.t1 { background: #F1ECFD; color: #7357E8; } .logo.t2 { background: #E3F4F2; color: #0E8F86; } .logo.t3 { background: #FDEFE0; color: #B45A0B; } .logo.t4 { background: #EAEEF5; color: #4A5873; }
.lsum .num { font-weight: 600; white-space: nowrap; } .lsum .chev { color: var(--muted); transition: transform .15s; } .lrow.open .chev { transform: rotate(180deg); }
.ldetail { padding: 6px 20px 20px 70px; } .ldetail[hidden] { display: none; }
.dtl-meta { display: grid; gap: 2px; margin-bottom: 12px; } .dtl-h { margin: 16px 0 8px; font-size: 14px; }
.verifybox { border: 1px solid #F0D9A8; background: #FFF8E8; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; } .verifybox h4 { margin: 0 0 4px; display: flex; gap: 6px; align-items: center; color: var(--warning); font-size: 13px; } .verifybox ul { margin: 0; padding-left: 20px; }
.factors { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .factors thead th { background: var(--canvas); } .factors td { padding-top: 9px; padding-bottom: 9px; font-size: 13px; vertical-align: top; }
.res { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; } .res.yes { color: var(--success); } .res.no { color: var(--error); } .res.miss { color: var(--warning); } .res.info { color: var(--muted); }
.factors .sub.bad { color: var(--error); } .factors .fix { color: var(--primary); margin-top: 2px; }
.cmp-foot { margin: 0; padding: 12px 20px; }
.side { padding: 16px 20px; } .side h2 { margin: 0 0 12px; font-size: 16px; } .side .kvl { gap: 0; } .side .kvl dt, .side .kvl dd { padding: 9px 0; border-top: 1px solid var(--border); } .side .kvl dt:first-of-type, .side .kvl dd:first-of-type { border-top: 0; }
@media (max-width: 800px) { .cmp-cols { display: none; } .cmp-grid { grid-template-columns: 1fr auto; padding: 12px 16px; row-gap: 6px; } .lsum .num:nth-of-type(n) { grid-column: auto; } .ldetail { padding: 6px 16px 16px; } }

.inputs { list-style: none; margin: 0; padding: 0; } .inputs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; } .inputs li:first-child { border-top: 0; padding-top: 0; }
.inputs .k { color: var(--muted); } .inputs .v { text-align: right; display: grid; justify-items: end; gap: 1px; } .inputs .v b { color: var(--navy); font-weight: 600; }
.inputs .v small { font-size: 11px; line-height: 1.3; white-space: nowrap; color: var(--muted); }
.inputs .from-lead { color: var(--primary) !important; } .inputs .from-derived { color: #0E8F86 !important; }
.inputs li.miss .v b { color: var(--warning); font-weight: 600; font-size: 13px; }

.left { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 11px; font-weight: 700; } .btn-secondary .left { background: var(--subtle); color: var(--primary); }
.elig-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.side-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; } .side-top h2 { margin: 0 !important; }
.editnote { margin: -4px 0 12px; font-size: 13px; color: var(--primary); } .editnote.off { color: var(--muted); }
.hist .chg { color: var(--navy); margin-top: 2px; }
.chglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; } .chglist .arrow { color: var(--primary); }

/* ---- Add / edit lead ------------------------------------------------------------------------------ */
.lead-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .lead-cols > .stack { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 1000px) { .lead-cols { grid-template-columns: minmax(0, 1fr); } }
.lf { padding: 22px 24px; } .lf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; } .lf-head h2 { margin: 0; font-size: 18px; }
.lf-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .lf-sub { margin: 0 0 12px; font-size: 15px; } .lf-sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.lf .form-grid { gap: 0 18px; } .lf .form-grid.g2 { grid-template-columns: 1fr 1fr; gap: 0 12px; }
.iconfield { position: relative; } .iconfield > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .iconfield .input { padding-left: 40px; }
.iconfield.money .rs { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; } .iconfield.money .input { padding-left: 32px; }
.select-wrap.full { display: flex; } .select-wrap.full select.input { width: 100%; height: 42px; border-radius: 10px; font-weight: 400; } .lf .select-wrap { display: flex; } .lf .select-wrap select.input { width: 100%; height: 42px; border-radius: 10px; font-weight: 400; }
.scorebox { position: relative; } .scorebox .input { padding-right: 112px; } .scorebox .band { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .scorebox .band[hidden] { display: none; }
.band.good { background: var(--success-bg); color: var(--success); } .band.ok { background: #E3F4F2; color: #0E8F86; } .band.fair { background: var(--warning-bg); color: var(--warning); } .band.low { background: var(--error-bg); color: var(--error); }
.prio-high select.input { background: var(--error-bg); border-color: #F2B8BE; color: var(--error); font-weight: 600; } .prio-medium select.input { background: var(--warning-bg); border-color: #F0D9A8; color: var(--warning); font-weight: 600; } .prio-low select.input { background: var(--subtle); color: var(--primary); font-weight: 600; }
.lf-actions { display: flex; gap: 10px; }

/* ---- Lead page ------------------------------------------------------------------------------------ */
.lead-contact { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin: -4px 0 16px; font-size: 14px; color: var(--navy); } .lead-contact > span { display: inline-flex; align-items: center; gap: 7px; } .lead-contact .ico { color: var(--muted); }
.lead-contact .assignee .avatar { width: 26px; height: 26px; font-size: 10px; }
.stepno { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: -4px; } .step.current .stepno { color: var(--primary); }
.btn-wa { color: #128C4A; } .btn-wa .ico { color: #25D366; }
.keymetas { padding: 20px 24px; margin-bottom: 16px; } .keymetas h2 { margin: 0 0 14px; font-size: 18px; }
.km-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 28px; } .km-grid .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .km-grid .val { font-size: 24px; font-weight: 700; color: var(--navy); margin: 3px 0 1px; }
.km-foot { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; } .km-foot .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 6px; } .km-pill { display: inline-block; }
.sched { padding: 20px 22px; } .sched > h2 { margin: 0 0 6px; font-size: 18px; }
.sch-sec { padding: 14px 0; border-top: 1px solid var(--border); } .sch-sec:first-of-type { border-top: 0; }
.sch-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: 14px; } .sch-h .small { font-weight: 600; }
.sch-row { display: flex; gap: 10px; align-items: flex-start; } .sch-row > .ico { color: var(--muted); margin-top: 2px; } .sch-row .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.locchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px; border-radius: 10px; background: var(--subtle); color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none !important; max-width: 100%; } .locchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .assign-row .input { height: 40px; } .assign-row .btn-sm { height: 40px; }
.mini-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mini-tl li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; font-size: 13px; position: relative; } .mini-tl time { color: var(--muted); font-size: 12px; padding-top: 1px; }
.mini-tl li > span { padding-left: 14px; position: relative; } .mini-tl li > span::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); } .mini-tl em { display: block; font-style: normal; color: var(--muted); margin-top: 1px; }
.km-foot .band { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-left: 4px; }

/* ---- Eligibility form ----------------------------------------------------------------------------- */
.eform { padding-bottom: 8px; } .eform .alert + .alert { margin-top: 0; }
.cmpstrip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 22px; margin-bottom: 16px; } @media (max-width: 800px) { .cmpstrip { grid-template-columns: minmax(0, 1fr); } }
.cs-left { display: flex; gap: 12px; align-items: center; padding-right: 20px; border-right: 1px solid var(--border); } .cs-left > .ico { color: var(--primary); } .cs-left h2 { margin: 0; font-size: 16px; } @media (max-width: 800px) { .cs-left { border-right: 0; padding-right: 0; } }
.cs-mid p { margin: 8px 0 0; font-size: 13px; color: var(--muted); } .cs-mid p strong { color: var(--navy); }
.bchips { display: flex; flex-wrap: wrap; gap: 6px; } .bchip { padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.bchip.t0 { background: #E8EEFE; color: #315CF5; } .bchip.t1 { background: #F1ECFD; color: #7357E8; } .bchip.t2 { background: #E3F4F2; color: #0E8F86; } .bchip.t3 { background: #FDEFE0; color: #B45A0B; } .bchip.t4 { background: #EAEEF5; color: #4A5873; }
.eform-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .eform-cols > .stack { grid-template-columns: minmax(0, 1fr); min-width: 0; } @media (max-width: 1000px) { .eform-cols { grid-template-columns: minmax(0, 1fr); } }
.ef { padding: 20px 22px; } .ef-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ef-head > .ico { color: var(--primary); } .ef-head h2 { margin: 0; font-size: 17px; } .ef-tip { margin-left: auto; padding: 3px 12px; border-radius: 999px; background: var(--canvas); color: var(--muted); font-size: 12px; }
.ef .select-wrap { display: flex; } .ef .select-wrap select.input { width: 100%; height: 42px; border-radius: 10px; font-weight: 400; } .inline2 .select-wrap select.input { min-width: 0; padding-left: 12px; }
.suffixfield { position: relative; } .suffixfield .input { padding-right: 76px; } .suffixfield .sfx { position: absolute; right: 1px; top: 1px; bottom: 1px; display: grid; place-items: center; padding: 0 14px; background: var(--canvas); border-radius: 0 9px 9px 0; color: var(--muted); font-size: 14px; border-left: 1px solid var(--border); }
.chlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .chlog > li { padding-bottom: 12px; border-bottom: 1px solid var(--border); } .chlog > li:last-child { border-bottom: 0; padding-bottom: 0; } .chlog-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.chlog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -6px 18px rgba(23, 35, 60, .08); }
.actionbar .note-field { flex: 1 1 340px; margin: 0; } .actionbar .ab-info { display: grid; gap: 2px; flex: 1 1 280px; } .ab-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ab-right .actions { margin: 0; }
.cmpstrip { margin-top: 12px; }

/* ---- Brand ---------------------------------------------------------------------------------------- */
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; flex: none; background: #fff; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 8px; } .auth-brand img { width: 200px; height: auto; max-width: 70%; }
@media (max-width: 800px) { .brand-logo { width: 40px; height: 40px; } }