/* Leadmanage workspace — shared by admin and staff */
:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #233247;
  --heading: #15243b;
  --mut: #5b6b80;
  --mut-soft: #66758a;
  --line: #dbe4ed;
  --line-soft: #eef3f8;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-deep: #14263f;
  --brand-pale: #e9f5f2;
  --red: #b4233c;
  --red-pale: #fff0f2;
  --green: #147d52;
  --green-pale: #eaf7f0;
  --amber: #925c0b;
  --amber-pale: #fff5df;
  --blue: #2563ab;
  --blue-pale: #edf4ff;
  --surface-subtle: #f8fafc;
  --sidebar: #14263f;
  --sidebar-muted: #b8c6d8;
  --focus: #2563ab;
  --violet: #6d48a3;
  --violet-pale: #f2edfb;
  --preview-bg: #eef3f8;
  --message-out-bg: #e0f2e9;
  --switch-off: #a8b6c6;
  --brand-border: #bad9d1;
  --amber-border: #e6c98e;
  --focus-ring: #0f766e40;
  --focus-soft: #0f766e1a;
  --overlay: #14263f80;
  --overlay-soft: #14263f24;
  --shadow-xs: 0 1px 2px rgba(12, 47, 42, .04);
  --shadow-sm: 0 8px 26px rgba(15, 55, 49, .07);
  --shadow-lg: 0 24px 60px rgba(8, 35, 31, .18);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--brand); }
svg { display: block; }

/* Application frame */
.app-shell { display: flex; min-height: 100vh; }
.side { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 248px; flex-direction: column; padding: 0 14px 16px; overflow-y: auto; color: var(--card); background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar) 100%); box-shadow: 12px 0 35px rgba(5, 45, 42, .08); }
.brand { position: sticky; top: 0; z-index: 2; display: flex; min-height: 82px; align-items: center; gap: 11px; padding: 15px 8px; background: var(--sidebar); }
.brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; color: var(--card); background: linear-gradient(145deg, var(--brand), var(--brand)); box-shadow: 0 8px 22px rgba(19, 180, 152, .25); }
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark svg path + path { fill: currentColor; stroke: none; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: -.2px; }
.brand small { margin-top: -2px; color: var(--sidebar-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.side-nav { flex: 1; padding: 2px 0 20px; }
.nav-label { margin: 20px 11px 7px; color: var(--sidebar-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 42px; margin: 2px 0; padding: 9px 11px; border: 1px solid transparent; border-radius: 11px; color: var(--sidebar-muted); font-size: 13px; font-weight: 570; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-link:hover { color: var(--card); background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav-link.on { color: var(--card); border-color: rgba(93, 220, 196, .2); background: linear-gradient(90deg, rgba(28, 183, 155, .25), rgba(28, 183, 155, .1)); box-shadow: inset 3px 0 #30c5aa; }
.nav-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: var(--sidebar-muted); font-size: 17px; font-weight: 400; }
.nav-link.on .nav-icon { color: #5fe1c8; }
.icon-home::before { content: "⌂"; }.icon-board::before { content: "▦"; }.icon-users::before { content: "♙"; }.icon-bell::before { content: "◷"; }.icon-chart::before { content: "⌁"; }
.icon-link::before { content: "↗"; }.icon-send::before { content: "➤"; }.icon-bot::before { content: "◇"; }.icon-settings::before { content: "⚙"; }.icon-cloud::before { content: "☁"; }
.icon-code::before { content: "‹›"; font-size: 13px; font-weight: 700; }.icon-team::before { content: "♙"; }.icon-activity::before { content: "≋"; }
.side-account { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; align-items: center; gap: 9px; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: var(--heading); background: var(--brand-pale); font-weight: 800; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #eefaf8; font-size: 12px; }
.account-copy small { color: var(--sidebar-muted); font-size: 11px; }
.icon-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: var(--sidebar-muted); background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--card); background: rgba(255,255,255,.08); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-close { display: none; margin-left: auto; border: 0; color: var(--card); background: transparent; font-size: 26px; cursor: pointer; }
.sidebar-overlay { display: none; }

.main { width: calc(100% - 248px); min-width: 0; margin-left: 248px; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: 70px; align-items: center; gap: 14px; padding: 10px 32px; border-bottom: 1px solid rgba(215, 228, 225, .9); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.topbar-title { display: flex; flex-direction: column; }
.topbar-title strong { color: var(--heading); font-size: 16px; line-height: 1.2; }
.eyebrow { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar-user { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--mut); background: var(--card); font-size: 11px; font-weight: 650; }
.role-dot { width: 7px; height: 7px; border-radius: 50%; background: #23b987; box-shadow: 0 0 0 3px #dff8ee; }
.menu-toggle { display: none; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--ink); }
.content-area { width: 100%; max-width: 1510px; margin: 0 auto; padding: 30px 32px 48px; }
.main.wide .content-area { max-width: none; padding: 18px 20px 32px; }
body.nosb .side { display: none; }
body.nosb .main { width: 100%; margin-left: 0; }

/* Typography and page structure */
h1, h2, h3, h4 { color: var(--heading); line-height: 1.25; }
h2 { margin: 0 0 20px; font-size: 25px; letter-spacing: -.035em; }
h3 { font-size: 17px; letter-spacing: -.015em; }
h4 { font-size: 14px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading h2 { margin: 4px 0 4px; font-size: clamp(24px, 3vw, 32px); }
.page-heading p { margin: 0; color: var(--mut); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.card-heading h3 { margin: 3px 0 0; font-size: 19px; }

/* Surfaces */
.card { margin-bottom: 18px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-xs); }
.card:hover { border-color: var(--line); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scroll { max-width: 100%; overflow: auto; }
hr { border-color: var(--line-soft) !important; }

/* Dashboard */
.dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.dashboard-stats .card { margin: 0; }
.stat { position: relative; display: flex; min-height: 148px; align-items: flex-start; gap: 15px; overflow: hidden; }
.stat::after { position: absolute; right: -25px; bottom: -35px; width: 100px; height: 100px; border-radius: 50%; background: var(--brand-pale); content: ""; opacity: .55; }
.stat > div { position: relative; z-index: 1; min-width: 0; }
.stat-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-pale); font-size: 22px; }
.stat b { display: block; margin: 5px 0 1px; font-size: 31px; line-height: 1.1; letter-spacing: -.04em; }
.stat > div > span:first-child { color: var(--mut); font-size: 12px; font-weight: 650; }
.stat small, .stat a { display: block; margin-top: 6px; color: var(--mut); font-size: 11px; }
.stat a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.stat-danger .stat-icon { color: var(--red); background: var(--red-pale); }
.stat-danger::after { background: var(--red-pale); }
.stat-warning .stat-icon { color: var(--amber); background: var(--amber-pale); }
.stat-primary { color: var(--card); border-color: var(--brand-dark); background: linear-gradient(145deg, var(--brand-dark), var(--brand-dark)); }
.stat-primary > div > span:first-child, .stat-primary small { color: #d7eee7; }
.stat-primary b { color: var(--card); }
.stat-primary > .title-icon { background: #ffffff1a; color: var(--card); }
.stat-primary .stat-icon { color: var(--card) !important; background: rgba(255,255,255,.13); }
.stat-primary::after { background: rgba(255,255,255,.12); }
.status-copy { margin-top: 10px !important; font-size: 13px !important; }
.pipeline-summary { padding: 24px; }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; }
.stage-card { display: flex; min-height: 112px; flex-direction: column; padding: 14px; border: 1px solid var(--line-soft); border-radius: 13px; color: var(--ink); background: var(--surface-subtle); text-decoration: none; transition: border .18s, box-shadow .18s, transform .18s; }
.stage-card:hover { color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.stage-card-top { display: flex; align-items: center; justify-content: space-between; }
.stage-card-top > i { width: 9px; height: 9px; border-radius: 50%; background: var(--stage-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 16%, white); }
.stage-card-top b { font-size: 23px; }
.stage-card > strong { margin-top: auto; color: var(--mut); font-size: 12px; }
.stage-bar { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 9px; background: var(--line-soft); }
.stage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--stage-color); }

/* Forms and buttons */
label { display: block; margin: 14px 0 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--card); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--mut-soft); }
input:hover, textarea:hover, select:hover { border-color: var(--brand-border); }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(17, 135, 118, .12); }
input[type="checkbox"], input[type="radio"] { width: 16px; min-height: 16px; accent-color: var(--brand); }
input[type="file"] { padding: 7px 9px; }
textarea { min-height: 120px; resize: vertical; }
.btn { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--brand); border-radius: 10px; color: var(--card); background: var(--brand); box-shadow: 0 4px 12px rgba(17, 135, 118, .12); font-size: 12px; font-weight: 750; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { color: var(--card); border-color: var(--brand-dark); background: var(--brand-dark); box-shadow: 0 7px 17px rgba(17, 135, 118, .18); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn.ghost { color: var(--ink); border-color: var(--line); background: var(--card); box-shadow: none; }
.btn.ghost:hover { color: var(--brand-dark); border-color: var(--brand-border); background: var(--brand-pale); }
.btn.red { border-color: var(--red); background: var(--red); box-shadow: none; }
.filters { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.filters input, .filters select { width: auto; min-width: 150px; }
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.bar h2 { margin: 0 12px 0 0; }
.bar form { display: flex; flex: 1; gap: 8px; margin: 0; flex-wrap: wrap; }
.bar input, .bar select { width: auto; min-width: 0; }
.bar input[name="q"] { width: min(320px, 100%); flex: 1; }

/* Tables and data */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 11px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
th { color: var(--mut-soft); background: var(--surface-subtle); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
th:first-child { border-radius: 9px 0 0 9px; }
th:last-child { border-radius: 0 9px 9px 0; }
tbody tr, table tr { transition: background .15s; }
table tr:hover td { background: var(--surface-subtle); }
table tr:last-child td { border-bottom: 0; }
.mini td, .mini th { padding: 8px 9px; font-size: 12px; }
.pager { margin-top: 18px; }
.pager nav > div:first-child { display: none; }
.pager nav > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pager nav span, .pager nav a { font-size: 12px; }
.pager svg { width: 16px; }

/* Feedback and utility */
.pill, .stagepill { display: inline-flex; align-items: center; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.pill { padding: 3px 9px; }
.stagepill { padding: 4px 9px; color: var(--card); }
.ok { color: var(--green); background: var(--green-pale); }.bad { color: var(--red); background: var(--red-pale); }.warn { color: var(--amber); background: var(--amber-pale); }
.flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid; border-radius: 12px; font-weight: 600; }
.flash > span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; color: var(--card); font-size: 11px; }
.flash.success { color: var(--green); border-color: #c9ebdf; background: var(--green-pale); }.flash.success > span { background: var(--green); }
.flash.error { color: var(--red); border-color: #f1cfd4; background: var(--red-pale); }.flash.error > span { background: var(--red); }
.err { margin-top: 6px; color: var(--red); font-size: 11px; font-weight: 650; }
.badge { display: none; min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 99px; color: var(--card); background: var(--red); text-align: center; font-size: 10px; font-weight: 800; }.badge.on { display: inline-block; }
code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--brand-dark); background: var(--surface-subtle); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { padding: 16px; overflow: auto; border: 1px solid #173e38; border-radius: 11px; color: #ccede7; background: var(--sidebar); font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qr { text-align: center; }.qr img { width: 300px; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow-sm); }
details { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 10px; } summary { font-weight: 700; }

/* Pipeline board: four large stages per row keeps all eight stages visible */
.board-toolbar { min-height: 50px; }
.board-heading { min-width: 145px; margin-right: 8px; }
.board-heading h2 { margin: 0; }
.board-heading span { display: block; margin-top: 1px; color: var(--mut); font-size: 10px; white-space: nowrap; }
.board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 12px; align-items: stretch; }
.col { display: flex; height: clamp(270px, calc((100dvh - 205px) / 2), 360px); min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line-soft); box-shadow: 0 5px 18px rgba(10, 45, 39, .05); container-type: inline-size; }
.col-h { display: flex; min-height: 53px; align-items: center; gap: 8px; padding: 11px 14px; border-top: 5px solid var(--c); border-radius: 15px 15px 0 0; background: var(--card); font-size: 13px; line-height: 1.2; }
.col-h b { flex: 1; min-width: 0; }.col-h .n { min-width: 27px; padding: 3px 8px; border-radius: 99px; color: var(--card); background: var(--c); text-align: center; font-size: 11px; font-weight: 800; }
.col-b { min-height: 0; padding: 10px; overflow-y: auto; scrollbar-color: #bdcfcb transparent; scrollbar-width: thin; flex: 1; }
.col-b.over { outline: 2px dashed var(--brand); outline-offset: -4px; background: #cfe9e3; }
.col-b:empty::after { display: block; padding: 28px 4px; color: var(--mut-soft); text-align: center; font-size: 10px; content: "Drop here"; }
.lead { margin-bottom: 9px; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; background: var(--card); box-shadow: 0 2px 8px rgba(10,45,39,.07); font-size: 12px; cursor: grab; transition: box-shadow .15s, transform .15s; }
.lead:hover { box-shadow: 0 8px 20px rgba(8,45,39,.13); transform: translateY(-1px); }.lead:active { cursor: grabbing; }.lead.drag { opacity: .35; }
.lead .top { display: flex; align-items: center; gap: 10px; }.lead .nm { min-width: 0; }.lead b { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.35; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.av { display: flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 11px; color: var(--card); background: var(--c); font-size: 12px; font-weight: 800; }
.lead .sub { overflow: hidden; color: var(--mut); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.lead .msg { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--mut); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lead .chat-go { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green-pale); text-decoration: none; font-size: 14px; }.lead .chat-go:hover { background: var(--brand); }
.lead .chips { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }.chip { padding: 3px 7px; border-radius: 7px; font-size: 10px; font-weight: 700; line-height: 1.4; }.chip.rem { color: var(--amber); background: var(--amber-pale); }.chip.who { color: var(--brand-dark); background: var(--brand-pale); }
.more { padding: 7px; color: var(--mut); text-align: center; font-size: 10px; }
@container (max-width: 245px) { .av { width: 30px; height: 30px; flex-basis: 30px; }.lead { padding: 9px; }.col-h { padding-inline: 10px; }.col-b { padding: 7px; } }

/* Dialogs, timelines and notifications */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(5, 30, 27, .62); backdrop-filter: blur(5px); }.modal.on { display: flex; }
.modal .box { width: 100%; max-width: 540px; max-height: 90vh; padding: 23px; overflow: auto; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-lg); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.tl { margin: 12px 0 0 6px; padding-left: 15px; border-left: 2px solid var(--line); }.tl div { margin-bottom: 11px; font-size: 12px; }.tl small { color: var(--mut); }
#toasts { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; width: min(380px, calc(100vw - 32px)); flex-direction: column; gap: 10px; }
.toast { padding: 15px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-lg); }.toast-meta { color: var(--mut); font-size: 11px; }.toast-note { margin-top: 5px; }.toast .btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }.toast .btns .btn { min-height: 30px; padding: 5px 9px; font-size: 10px; }

/* Login */
.auth-page { min-height: 100vh; background: var(--sidebar); }
.login { display: grid; min-height: 100vh; grid-template-columns: minmax(400px, .95fr) minmax(460px, 1.05fr); }
.login-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px clamp(40px, 7vw, 100px); overflow: hidden; color: var(--card); background: radial-gradient(circle at 15% 85%, rgba(37,188,160,.24), transparent 33%), radial-gradient(circle at 90% 15%, rgba(35,170,147,.15), transparent 28%), var(--sidebar); }
.login-intro::after { position: absolute; right: -100px; bottom: -130px; width: 380px; height: 380px; border: 1px solid rgba(111,231,210,.16); border-radius: 50%; box-shadow: 0 0 0 55px rgba(111,231,210,.04), 0 0 0 115px rgba(111,231,210,.025); content: ""; }
.login-brand { display: flex; align-items: center; gap: 12px; }.login-brand strong, .login-brand small { display: block; }.login-brand strong { font-size: 18px; }.login-brand small { color: var(--sidebar-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.login-kicker { display: inline-block; margin-bottom: 15px; color: #60d6c0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-intro h1 { max-width: 570px; margin: 0; color: var(--card); font-size: clamp(38px, 5vw, 62px); letter-spacing: -.055em; line-height: 1.03; }
.login-intro p { max-width: 520px; margin: 22px 0 0; color: var(--sidebar-muted); font-size: 16px; }
.login-proof { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: var(--sidebar-muted); font-size: 11px; }.login-proof span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: var(--heading); background: #5ed4be; font-weight: 900; }
.login-panel { display: grid; place-items: center; padding: 40px; background: #f6f9f8; }
.login-card { width: 100%; max-width: 420px; padding: 40px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 22px 65px rgba(17,56,49,.1); }
.login-card h2 { margin: 6px 0 6px; font-size: 27px; }.form-intro { margin: 0 0 24px; color: var(--mut); }
.login-card input { min-height: 48px; }.login-card label { margin-top: 17px; }
.check-row { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 550; cursor: pointer; }
.login-submit { width: 100%; min-height: 47px; margin-top: 7px; justify-content: space-between; padding-inline: 18px; }
.login-help { margin: 25px 0 0; color: var(--mut-soft); text-align: center; font-size: 11px; }
.mobile-login-brand { display: none; }

/* Responsive behavior */
@media (max-width: 1250px) { .board { grid-template-columns: repeat(4, minmax(190px, 1fr)); }.stage-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) {
  .side { transform: translateX(-102%); transition: transform .23s ease; }
  .menu-open .side { transform: translateX(0); }
  .menu-open { overflow: hidden; }
  .menu-open .sidebar-overlay { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(5,30,27,.48); backdrop-filter: blur(3px); }
  .sidebar-close, .menu-toggle { display: block; }
  .main, body.nosb .main { width: 100%; margin-left: 0; }
  .topbar { padding-inline: 20px; }
  .content-area { padding: 25px 20px 40px; }
  .login { grid-template-columns: 1fr; }.login-intro { display: none; }.login-panel { min-height: 100vh; }.mobile-login-brand { display: block; margin-bottom: 25px; color: var(--brand-dark); font-size: 19px; font-weight: 800; }
}
@media (max-width: 760px) {
  .topbar { min-height: 62px; }.topbar-user { display: none; }.content-area, .main.wide .content-area { padding: 20px 14px 34px; }
  h2 { font-size: 22px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }.page-heading .btn { width: 100%; }
  .row { grid-template-columns: 1fr; }.grid { grid-template-columns: 1fr 1fr; gap: 11px; }.dashboard-stats { grid-template-columns: 1fr 1fr; }.stage-grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 17px; border-radius: 14px; }.stat { min-height: 132px; padding: 16px; }.stat-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 18px; }.stat b { font-size: 26px; }
  .filters { align-items: stretch; flex-direction: column; }.filters input, .filters select, .filters .btn { width: 100% !important; }
  .bar form { flex-basis: 100%; }.bar form input, .bar form select { flex: 1 1 140px; }.bar > .btn { flex: 1; }
  .board-toolbar { align-items: stretch; }.board-heading { width: 100%; }.board-heading span { white-space: normal; }
  .board { grid-template-columns: repeat(2, minmax(145px, 1fr)); }.col { height: 420px; }
  th, td { padding: 10px 8px; font-size: 11px; }.modal { align-items: flex-end; padding: 8px; }.modal .box { max-height: 92vh; padding: 18px; border-radius: 18px 18px 10px 10px; }
}
@media (max-width: 520px) {
  .grid, .dashboard-stats { grid-template-columns: 1fr; }.stage-grid { grid-template-columns: 1fr 1fr; }.stage-card { min-height: 100px; }.board { grid-template-columns: 1fr; }.col { height: 430px; }
  .login-panel { padding: 18px; }.login-card { padding: 26px 21px; box-shadow: none; }.login-card h2 { font-size: 23px; }
  .side { width: min(288px, 88vw); }.topbar-title .eyebrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Date & time picker (enhances input[type=datetime-local] – see pages/_when_picker) */
.wp { display: grid; gap: 10px; margin: 6px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--card), var(--brand-pale)); }
.wp-label { margin: 0 0 4px; color: var(--mut); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--card); font-size: 12px; font-weight: 650; cursor: pointer; transition: all .15s; }
.wp-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.wp-chip.on { border-color: var(--brand); color: var(--card); background: var(--brand); box-shadow: 0 4px 10px rgba(17, 135, 118, .22); }
.wp-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.wp-row input { margin: 0; border-radius: 10px; font-weight: 650; }
.wp-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--brand-deep); background: var(--card); border: 1px dashed var(--brand); font-size: 13px; font-weight: 750; }
.wp-sum.empty { border-color: var(--line); color: var(--mut); font-weight: 600; }

/* Staff chat inbox */
.icon-chat::before { content: "✉"; }
.chat-badge { background: var(--brand); }
.toast.chat-toast { border-left-color: var(--brand); background: #f1fbf5; animation: chatpulse 1.2s ease-out 3; }
.toast.chat-toast .cnt { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--card); font-size: 10px; text-align: center; }
@keyframes chatpulse { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.55); } 100% { box-shadow: 0 0 0 16px rgba(31,168,85,0); } }
.chat-app { --wa-green: var(--brand); --wa-out: var(--message-out-bg); --wa-bg: var(--preview-bg); --wa-panel: var(--surface-subtle); --wa-line: var(--line); --wa-ink: var(--ink); --wa-mut: var(--mut); display: grid; grid-template-columns: 30% 1fr; height: calc(100vh - 150px); min-height: 440px; border: 1px solid var(--wa-line); border-radius: 0; background: var(--card); overflow: hidden; color: var(--wa-ink); }
.chat-list { display: flex; flex-direction: column; border-right: 1px solid var(--wa-line); min-height: 0; background: var(--card); }
.chat-search { padding: 8px 12px; background: var(--card); }.chat-search input { width: 100%; border: 0; border-radius: 8px; background: var(--wa-panel); padding: 8px 14px; font-size: 14px; outline: 0; box-shadow: none; }
.chat-items { overflow-y: auto; flex: 1; }
.chat-item { display: flex; gap: 14px; padding: 0 15px; align-items: center; cursor: pointer; }.chat-item:hover { background: var(--wa-panel); }.chat-item.on { background: var(--surface-subtle); }
.chat-item.unread { background: transparent; box-shadow: none; }.chat-item.unread:hover { background: var(--wa-panel); }.chat-item.unread b { color: var(--wa-ink); }.chat-item.unread .l { color: var(--wa-ink); font-weight: 500; }.chat-item.unread .t { color: var(--wa-green); }
.chat-item .av, .chat-head .av { flex: none; width: 49px; height: 49px; border-radius: 50%; background: var(--line); color: var(--card); display: grid; place-items: center; font-size: 20px; font-weight: 500; }
.chat-item .ci { min-width: 0; flex: 1; padding: 12px 0; border-bottom: 1px solid var(--wa-line); }.chat-item:last-child .ci { border-bottom: 0; }
.chat-item .r1, .chat-item .r2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 400; color: var(--wa-ink); }
.chat-item .t { color: var(--wa-mut); font-size: 12px; white-space: nowrap; }.chat-item .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-mut); font-size: 14px; }
.chat-item .cnt { flex: none; min-width: 20px; height: 20px; padding: 0 6px; line-height: 20px; border-radius: 99px; background: var(--brand); color: var(--card); font-size: 12px; font-weight: 600; text-align: center; }
.chat-empty { padding: 24px; color: var(--wa-mut); text-align: center; }.chat-empty.big { margin: auto; max-width: 360px; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; background: var(--wa-bg); border-left: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 59px; background: var(--wa-panel); border-bottom: 1px solid var(--wa-line); }.chat-head > div { flex: 1; min-width: 0; }.chat-head #cBack { display: none; }
.chat-head .av { width: 40px; height: 40px; font-size: 17px; }.chat-head b { display: block; font-size: 16px; font-weight: 400; color: var(--wa-ink); }.chat-head .sub { color: var(--wa-mut); font-size: 13px; }
.chat-head .btn.ghost { border: 0; background: transparent; color: var(--wa-green); font-weight: 600; box-shadow: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 8%; display: flex; flex-direction: column; gap: 2px; background-color: var(--wa-bg); background-image: radial-gradient(rgba(11,20,26,.045) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.chat-msgs .day { align-self: center; margin: 10px 0; padding: 5px 12px; border-radius: 8px; background: var(--card); color: var(--wa-mut); font-size: 12.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-msgs .b { position: relative; max-width: 65%; padding: 6px 7px 6px 9px; border-radius: 8px; background: var(--card); box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14.2px; line-height: 19px; align-self: flex-start; margin-top: 4px; }
.chat-msgs .b.out { align-self: flex-end; background: var(--wa-out); }
.chat-msgs .b.in::before, .chat-msgs .b.out::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.chat-msgs .b.in { border-top-left-radius: 0; }.chat-msgs .b.in::before { left: -8px; background: var(--card); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.chat-msgs .b.out { border-top-right-radius: 0; }.chat-msgs .b.out::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.chat-msgs .bt { white-space: pre-wrap; word-break: break-word; display: inline; }
.chat-msgs .bm { float: right; margin: 6px 0 -3px 12px; color: var(--wa-mut); font-size: 11px; line-height: 15px; white-space: nowrap; }
.chat-msgs .tk { display: inline-block; margin-left: 4px; vertical-align: -3px; line-height: 0; }.chat-msgs .tk svg { width: 16px; height: 15px; fill: currentColor; }
.chat-msgs .tk .tkg, .chat-msgs .tk .tk0 { color: #667781; }.chat-msgs .tk .tkr { color: var(--blue); }.chat-msgs .tk .tkf { color: var(--red); }.chat-msgs .tk .tk0 { width: 14px; height: 14px; }
.chat-send { display: flex; gap: 10px; padding: 10px 16px; background: var(--wa-panel); align-items: center; }
.chat-send textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; border: 0; border-radius: 8px; background: var(--card); padding: 11px 12px; font-size: 15px; line-height: 20px; outline: 0; box-shadow: none; }
.chat-send .btn { flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut); display: grid; place-items: center; box-shadow: none; transition: color .15s; }.chat-send .btn:hover { background: rgba(11,20,26,.06); }.chat-send .btn.ready { color: var(--wa-green); }.chat-send .btn svg { width: 26px; height: 26px; fill: currentColor; }
.chat-pane > .err { padding: 0 16px 8px; background: var(--wa-panel); color: var(--red); }.chat-pane > .err:empty { display: none; }
@media (max-width: 760px) {
  .chat-app { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .chat-msgs { padding: 12px 10px; }.chat-msgs .b { max-width: 82%; }
  .chat-pane { display: none; }.chat-app.open .chat-pane { display: flex; }.chat-app.open .chat-list { display: none; }
  .chat-head #cBack { display: inline-flex; }
}

/* chats: tabs (all staff / mine), "who owns it" tag, read-only note */
.chat-tabs { display: flex; gap: 6px; padding: 0 12px 8px; background: var(--card); }
.chat-tabs button { flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--mut); font-weight: 600; font-size: 13px; cursor: pointer; }
.chat-tabs button.on { border-color: var(--brand); background: var(--brand-pale); color: var(--brand-dark); }
.chat-item .who { flex: none; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--line-soft); color: var(--mut); font-size: 11px; white-space: nowrap; }
.chat-pane .ro { display: block; padding: 10px 14px; background: var(--amber-pale); color: var(--amber); font-size: 13px; text-align: center; }

/* dashboard: today cards + Praxi today */
.today-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 18px; gap: 14px; }
.today-card { position: relative; margin: 0; display: flex; flex-direction: column; gap: 3px; min-height: 142px; }
.today-card.warn { border-color: #f0c36d; background: #fffaf0; }
.today-label { color: var(--mut); font-size: 12.5px; font-weight: 650; }
.today-num { font-size: 36px; line-height: 1.1; letter-spacing: -.04em; color: var(--heading); }
.today-delta { display: inline-block; width: fit-content; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; background: var(--line-soft); color: var(--mut); }
.today-delta.up { background: var(--green-pale); color: var(--green); }.today-delta.down { background: var(--red-pale); color: var(--red); }
.today-card small { color: var(--mut); font-size: 12px; margin-top: auto; }
.today-bar { display: block; height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; margin: 4px 0; }.today-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.asha-today { margin-bottom: 18px; }
.asha-status { display: flex; align-items: center; gap: 10px; }.asha-status small { color: var(--mut); }
.asha-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.asha-chips > div { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }.asha-chips b { display: block; font-size: 22px; }.asha-chips span { color: var(--mut); font-size: 12px; }
.asha-chips .warn { border-color: #f0c36d; background: #fffaf0; }
.asha-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.asha-sub { display: block; margin-bottom: 8px; font-size: 13px; }
.asha-hours { display: flex; align-items: flex-end; gap: 3px; height: 90px; }.asha-hours i { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); opacity: .85; }
.asha-hours i.future { background: var(--line); opacity: .6; }.asha-hours i.now { background: var(--amber); }
.asha-axis { display: flex; justify-content: space-between; color: var(--mut); font-size: 11px; margin-top: 4px; }
.asha-q { padding: 8px 10px; border-radius: 10px; background: var(--amber-pale); margin-bottom: 6px; font-size: 13px; }.asha-q small { display: block; color: var(--mut); }
.asha-empty { color: var(--mut); font-size: 13px; padding: 8px 0; }.asha-teach { font-size: 13px; font-weight: 600; }
@media (max-width: 860px) { .asha-cols { grid-template-columns: 1fr; } }

.praxi-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.praxi-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;background:var(--brand-pale);color:var(--brand-dark,var(--brand));font-size:13px;font-weight:700;border:1px solid #bfe0d9}
.praxi-badge i{width:8px;height:8px;border-radius:50%;background:#9ca3af}.praxi-badge i.on{background:#16a34a}.praxi-badge i.off{background:#ef4444}

/* Workspace foundation: clear hierarchy, readable controls, and consistent states. */
html { scroll-padding-top: 76px; }
body { line-height: 1.55; }
::selection { background: #c7e9e2; color: var(--heading); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 150; padding: 10px 16px; border-radius: 8px; color: var(--card); background: var(--brand-deep); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.svg-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.side { background: var(--sidebar); box-shadow: none; }
.brand { min-height: 72px; background: var(--sidebar); }
.brand-mark { border-radius: 12px; background: var(--brand); box-shadow: none; }
.brand small, .account-copy small { color: #adbed0; }
.nav-label { color: #a6b9ce; font-size: 11px; letter-spacing: .075em; }
.nav-link { color: var(--sidebar-muted); min-height: 42px; font-weight: 550; }
.nav-link:hover { transform: none; color: var(--card); background: #20364e; }
.nav-link.on { color: var(--card); border-color: #275363; background: #193e4b; box-shadow: inset 3px 0 #5cd2bb; }
.nav-icon, .nav-link.on .nav-icon { color: #abc9d6; }
.nav-link.on .nav-icon { color: #77ddc7; }
.nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.avatar { color: #123c3a; background: #bde7de; }
.icon-button, .sidebar-close { min-width: 32px; min-height: 32px; }
.topbar { min-height: 60px; padding: 8px 24px; background: var(--card); border-color: var(--line); backdrop-filter: none; }
.topbar-title h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.topbar-title > .eyebrow { font-size: 10px; letter-spacing: .06em; }
.topbar-user { border-color: var(--line); color: var(--mut); background: var(--surface-subtle); }
.role-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-pale); }
.content-area { max-width: none; padding: 22px 24px 32px; }
.main.wide .content-area { padding: 16px 20px 24px; }
.page-heading { align-items: center; gap: 18px; margin-bottom: 20px; }
.page-heading h2 { font-size: clamp(23px, 2.5vw, 29px); }
.eyebrow { font-size: 11px; color: var(--brand-dark); letter-spacing: .075em; }
.card-heading { gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.card { border-color: var(--line); box-shadow: 0 1px 3px #14263f05; }
.card:hover { border-color: #cbd8e4; }
.grid > *, .row > *, .card-heading > *, .page-heading > * { min-width: 0; }
label { color: var(--ink); font-size: 13px; font-weight: 650; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]), select { min-height: 42px; }
input, select, textarea { color: var(--ink); border-color: #8292a6; background: var(--card); font-size: 14px; }
input::placeholder, textarea::placeholder { color: var(--mut-soft); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #0f766e15; }
input[type=checkbox], input[type=radio] { width: 18px; min-height: 18px; flex-shrink: 0; }
input:disabled, select:disabled, textarea:disabled { background: var(--line-soft); color: var(--mut); cursor: not-allowed; }
.btn { min-height: 40px; font-size: 13px; font-weight: 650; border-radius: 9px; background: var(--brand); box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn.ghost { color: var(--ink); border-color: #c7d3df; background: var(--card); }
.btn.ghost:hover { color: var(--brand-dark); background: var(--brand-pale); border-color: #89bcb1; }
.btn.warning { color: var(--amber); border-color: #e6c98e; background: var(--amber-pale); }
.btn.red { color: var(--card); background: var(--red); border-color: var(--red); }
.btn.red:hover { background: #8f1c30; border-color: #8f1c30; }
.btn.danger-text { color: var(--red); border-color: #edc9d0; }
.btn.danger-text:hover { color: var(--red); background: var(--red-pale); border-color: var(--red); }
.btn:disabled { transform: none; box-shadow: none; }
.filters { flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.filters input, .filters select { min-width: 130px; margin: 0; }
.filters input[name=q] { flex: 1 1 220px; }
.bar { gap: 10px; }
.bar form input, .bar form select { margin: 0; }
.action-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.action-toolbar form { margin: 0; }
.scroll { border: 1px solid var(--line); border-radius: 10px; overflow: auto; scrollbar-color: #b5c5d3 transparent; }
.scroll > table { min-width: 620px; }
th { color: #526379; background: var(--preview-bg); font-size: 11px; letter-spacing: .035em; }
th, td { padding: 12px; }
td { font-size: 13px; font-variant-numeric: tabular-nums; }
table tr:hover td { background: var(--surface-subtle); }
td .btn { min-height: 32px; font-size: 12px; }
.mini td, .mini th { font-size: 13px; }
.pill, .stagepill, .chip { font-size: 11px; font-weight: 650; }
.chip { background: var(--blue-pale); color: var(--blue); }
.stagepill { color: var(--heading); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--stage-color, var(--brand)); }
.empty-state { padding: 32px 20px; text-align: center; color: var(--ink); }
.empty-state small { display: block; max-width: 440px; margin: 6px auto 0; color: var(--mut); font-size: 13px; }
.err { font-size: 12px; }
.error-list { margin: 5px 0 0; padding-left: 18px; font-size: 13px; }
.badge { background: var(--red); font-size: 11px; }
.pager nav a, .pager nav span[aria-current] { min-width: 32px; min-height: 32px; }
.col { border-color: var(--line); background: #edf2f7; box-shadow: none; }
.col-h { font-size: 14px; }
.col-h .n { color: var(--heading); background: var(--preview-bg); border: 1px solid var(--line); }
.col-b:empty::after { content: 'No leads in this stage'; color: var(--mut); font-size: 12px; }
.lead { border-color: var(--line); box-shadow: 0 1px 3px #14263f08; }
.lead:hover { box-shadow: 0 4px 12px #14263f12; transform: none; }
.lead b { font-size: 14px; }
.lead .sub, .lead .msg { font-size: 12px; color: var(--mut); }
.lead .av { color: var(--heading); background: #e7eef7; border: 1px solid #d8e3f0; }
.lead .chat-go { width: 32px; height: 32px; }
.more { font-size: 12px; }
.stat-primary { color: var(--card); border-color: var(--brand-dark); background: var(--brand-dark); }
.stat-primary > div > span:first-child, .stat-primary small { color: #d7eee7 !important; }
.stat-primary b { color: var(--card); }
.today-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.today-card { min-height: 160px; border-top: 3px solid var(--brand); }
.today-card.metric-ai { border-top-color: var(--blue); }
.today-card.metric-share { border-top-color: var(--green); }
.today-card.metric-attention { border-top-color: var(--amber); }
.today-card.warn { background: var(--amber-pale); border-color: #e7d2a4; border-top-color: var(--amber); }
.today-label { color: var(--mut); font-size: 13px; }
.today-num { font-size: 34px; font-variant-numeric: tabular-nums; }
.today-delta { font-size: 12px; }
.asha-chips > div, .stage-card { background: var(--surface-subtle); }
.stage-card > strong { font-size: 13px; color: var(--ink); }
.stage-card-top b { font-variant-numeric: tabular-nums; }
.praxi-badge { padding: 5px 10px; border-color: #bad9d1; color: var(--brand-dark); font-size: 12px; }
.praxi-badge i.on { background: var(--green); }.praxi-badge i.off { background: var(--red); }
.modal .box { padding: 24px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.modal .box > div:first-child { gap: 10px; }
.modal .box > div:first-child > .btn { min-width: 32px; min-height: 32px; }
dialog { color: var(--ink); border-color: var(--line); }
.login-intro { background: radial-gradient(circle at 15% 85%, #187a782e, transparent 38%), var(--sidebar); }
.login-panel { background: var(--bg); }
.login-card { border-radius: 18px; box-shadow: 0 16px 50px #14263f0d; }
.login-help { color: var(--mut); font-size: 12px; }
.chat-app { --wa-green: var(--brand); --wa-out: var(--message-out-bg); --wa-bg: var(--preview-bg); --wa-panel: var(--surface-subtle); --wa-line: var(--line); --wa-ink: var(--ink); --wa-mut: var(--mut); border-color: var(--line); border-radius: 12px; }
.chat-item.on { background: var(--brand-pale); box-shadow: inset 3px 0 var(--brand); }
.chat-item b { font-weight: 550; font-size: 15px; }
.chat-item .cnt, .toast.chat-toast .cnt { background: var(--brand); color: var(--card); }
.chat-search input:focus-visible, .chat-send textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.chat-msgs { background-image: none; }
.chat-tabs button { min-height: 36px; border-radius: 8px; }
.chat-head b { font-weight: 650; }
.chat-head #cBack { min-width: 36px; min-height: 36px; }
.chat-empty.big { line-height: 1.7; }
.chat-pane .ro { color: var(--amber); border-block: 1px solid #e7d2a4; }
.inbox-screen .content-area { padding: 12px; }
.inbox-screen .chat-app { height: calc(100dvh - 86px); min-height: 0; }
.toast { border-color: var(--line); border-left-color: var(--amber); }
.toast.chat-toast { border-left-color: var(--brand); background: var(--brand-pale); }
@media (max-width: 1100px) {
  .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .content-area, .main.wide .content-area { padding: 16px 12px 24px; }
  .topbar { min-height: 60px; padding-inline: 12px; }
  .card { padding: 16px; }
  .page-heading { align-items: stretch; gap: 12px; }
  .page-heading .praxi-top .btn { width: auto; }
  .card-heading { align-items: flex-start; }
  .btn, .filters .btn { min-height: 44px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]), select, textarea { min-height: 44px; font-size: 16px; }
  .filters { padding: 10px; }
  .filters input, .filters select { min-width: 0 !important; }
  .action-toolbar .btn { flex: 1 1 auto; }
  .board { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 84vw); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; }
  .board .col { height: max(390px, calc(100dvh - 260px)); scroll-snap-align: start; }
  .lead { padding: 13px; }
  .lead .chat-go { width: 36px; height: 36px; }
  .today-grid, .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-card { min-height: 155px; }
  .today-num { font-size: 30px; }
  .today-delta { font-size: 11px; }
  .inbox-screen .content-area { padding: 6px; }
  .inbox-screen .chat-app { height: calc(100dvh - 74px); }
  .chat-send { padding: 8px; gap: 6px; }
  .chat-send textarea { font-size: 16px; }
  .chat-item { padding-inline: 12px; gap: 10px; }
  .chat-msgs .b { max-width: 88%; }
  .modal .box { padding: 18px; }
}
@media (max-width: 390px) {
  .today-grid, .dashboard-stats { grid-template-columns: 1fr; }
}

.pill.neutral { color: var(--blue); background: var(--blue-pale); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--red); }
.board-heading span { font-size: 12px; }
.mobile-board-hint { display: none; font-style: normal; }
.lead-title { display: -webkit-box; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--heading); text-align: left; font-size: 14px; font-weight: 700; line-height: 1.4; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer; }
.lead-title:hover { color: var(--brand-dark); }
@media (max-width: 760px) { .mobile-board-hint { display: block; margin-top: 3px; color: var(--brand-dark); }.lead-title { min-height: 28px; } }
input[type=file]::file-selector-button { min-height: 32px; margin-right: 10px; padding: 5px 10px; border: 1px solid #b4c8d7; border-radius: 6px; background: var(--blue-pale); color: var(--blue); font: inherit; cursor: pointer; }
.ac-chip button, .am-chip, .cs-chip, .ms-chip, .wp-chip { min-height: 28px; }
.rp-pre a { display: inline-flex; align-items: center; min-height: 32px; }
.udlg { max-height: 85dvh; overflow-y: auto; }
summary { min-height: 32px; cursor: pointer; }

/* Colour accents belong to page content; navigation stays neutral. */
.tone-teal { --tone-ink: var(--brand); --tone-pale: var(--brand-pale); }
.tone-blue { --tone-ink: var(--blue); --tone-pale: var(--blue-pale); }
.tone-amber { --tone-ink: var(--amber); --tone-pale: var(--amber-pale); }
.tone-violet { --tone-ink: var(--violet); --tone-pale: var(--violet-pale); }
.tone-rose { --tone-ink: var(--red); --tone-pale: var(--red-pale); }
.section-title { display: flex; align-items: center; gap: 11px; }
.title-icon { display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; color: var(--tone-ink, var(--brand)); background: var(--tone-pale, var(--brand-pale)); vertical-align: middle; }
.title-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.section-heading { display: flex; align-items: center; gap: 9px; }
.section-heading .title-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }
.section-heading .title-icon svg { width: 19px; height: 19px; }
.page-intro { margin: -10px 0 18px; color: var(--mut); max-width: 800px; }
.side { overflow: hidden; }
.brand, .side-account { flex-shrink: 0; }
.side-nav { min-height: 0; overflow-y: auto; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: #486079 transparent; }
.side-nav .nav-label:first-child { margin-top: 10px; }
.nav-link { gap: 11px; padding: 9px 11px; }
.nav-link .nav-icon { width: 22px; height: 22px; flex-basis: 22px; border-radius: 0; color: #adbed0; background: transparent; }
.nav-link.on { border-color: #3b6075; background: #1d3a50; }
.nav-link:hover .nav-icon, .nav-link.on .nav-icon { color: var(--card); }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.summary-tile { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--tone-ink); border-radius: 12px; background: var(--card); }
.summary-tile > div { min-width: 0; }
.summary-tile span:not(.title-icon) { display: block; color: var(--mut); font-size: 12px; }
.summary-tile b { display: block; color: var(--tone-ink); font-size: 28px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.setup-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.setup-steps li > div { min-width: 0; }
.setup-steps b { display: block; font-size: 14px; }
.setup-steps small { display: block; margin-top: 4px; color: var(--mut); font-size: 12px; line-height: 1.6; }
.connection-panel > p:first-child { margin-top: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.mobile-login-brand img { display: block; max-width: 100%; height: auto; }
.ms-prev, .cs-prev, .am-bub-wrap { background-color: var(--preview-bg); background-image: none; }
.ms-bubble, .cs-bubble, .am-bubble { background: var(--message-out-bg); color: var(--ink); }
.rp-grid > .rp-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 218px; }
.rp-grid .rp-card em { margin-top: auto; padding-top: 16px; }
.rp-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 960px) { .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.setup-steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .section-title { gap: 9px; }.title-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }.title-icon svg { width: 21px; height: 21px; }.summary-tile { padding: 12px; gap: 9px; }.summary-tile b { font-size: 25px; }.rp-grid > .rp-card { min-height: 190px; } }

/* profile menu (top right) */
.profile-menu { position: relative; margin-left: auto; }
.profile-menu > summary { list-style: none; cursor: pointer; margin-left: 0; user-select: none; }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu .caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.profile-menu[open] .caret { transform: rotate(180deg); }
.wallet-chip { background: var(--green-pale, #dff8ee); color: var(--green, #0f8a5f); border-radius: 999px; padding: 2px 8px; font-weight: 750; }
.wallet-chip.low { background: #fde8e8; color: #c0392b; }
.profile-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 270px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.14)); padding: 6px; }
.profile-pop .pp-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; gap: 2px; }
.profile-pop .pp-head small { color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.profile-pop .pp-head em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--green, #0f8a5f); }
.profile-pop a, .profile-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 9px; color: inherit; font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.profile-pop a:hover, .profile-pop button:hover { background: var(--surface-subtle, #f3f5f7); }
.profile-pop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.profile-pop .pp-val { margin-left: auto; font-size: 11.5px; color: var(--mut); }
.profile-pop form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .topbar-user { display: flex !important; padding: 6px 9px; } .topbar-user > span:nth-child(2) { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-pop { right: -6px; width: min(270px, 88vw); } }
/* wallet / billing pages */
.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.money-grid .card { margin: 0; }
.money { font-size: 28px; font-weight: 800; letter-spacing: -.02em; display: block; margin: 4px 0; }
.money-label { font-size: 12px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plan-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; background: var(--card); display: grid; gap: 6px; }
.plan-card.pick { border-color: var(--green, #0f8a5f); box-shadow: 0 0 0 3px var(--green-pale, #dff8ee); }
.plan-card h4 { margin: 0; }
.plan-card .big { font-size: 26px; font-weight: 800; }
.plan-card .rate { color: var(--green, #0f8a5f); font-weight: 750; }
.tx-in { color: #0f8a5f; font-weight: 700; } .tx-out { color: #c0392b; font-weight: 700; }
.pwd-box { font-family: ui-monospace, monospace; font-size: 17px; background: #fff8e1; border: 1px dashed #e0a800; border-radius: 10px; padding: 10px 14px; display: inline-block; margin: 6px 0; user-select: all; }

/* channel tabs + badges */
.chan-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chan-tabs a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; font-size: 13px; font-weight: 650; }
.chan-tabs a b { margin-left: 4px; color: var(--mut); font-weight: 700; }
.chan-tabs a.on { background: var(--green, #0f8a5f); border-color: var(--green, #0f8a5f); color: #fff; }
.chan-tabs a.on b { color: #fff; }
.ch-badge { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; letter-spacing: .02em; }
.ch-badge.instagram { background: #fde7f1; color: #c2185b; } .ch-badge.facebook { background: #e7efff; color: #1456c9; } .ch-badge.whatsapp { background: #dff8ee; color: #0f8a5f; }
/* small "lead came from" icon */
.ch-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex: none; vertical-align: middle; margin-right: 5px; }
.ch-ico svg { width: 14px; height: 14px; }
.ch-ico.whatsapp { background: #dff8ee; color: #0f8a5f; } .ch-ico.instagram { background: #fde7f1; color: #c2185b; } .ch-ico.facebook { background: #e7efff; color: #1456c9; }
.lead .nm { min-width: 0; } .lead .lead-title { text-align: left; }
.chan-tabs.small a { padding: 4px 11px; font-size: 12px; } .chan-tabs.small .ch-ico { width: 16px; height: 16px; margin-right: 4px; } .chan-tabs.small .ch-ico svg { width: 11px; height: 11px; } .chan-tabs a.on .ch-ico { background: #fff; }
.numbox { background: #fff8e1; border: 1px dashed #e0a800; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.numbox .row { align-items: end; }

/* ===== Lead outcomes chart (dashboard) ===== */
.oc { --s-pending:#eda100; --s-accepted:#2a78d6; --s-won:#008300; --s-failed:#e34948; --s-fake:#6250d6; --oc-grid:#e9e8e4; --oc-ink:#0b0b0b; --oc-mut:#52514e; --oc-surface:#fcfcfb;
  position: relative; margin: 0 0 22px; padding: 22px; border-radius: 22px; border: 1px solid var(--line, #e6e9ed); color: var(--oc-ink);
  background: radial-gradient(1200px 300px at 0% -10%, rgba(42,120,214,.07), transparent 60%), radial-gradient(900px 300px at 100% 0%, rgba(98,80,214,.07), transparent 55%), var(--oc-surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.18); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .oc { --s-pending:#c98500; --s-accepted:#3987e5; --s-won:#008300; --s-failed:#e66767; --s-fake:#9085e9; --oc-grid:#2b2b29; --oc-ink:#f0efec; --oc-mut:#c3c2b7; --oc-surface:#1a1a19; } }
:root[data-theme="dark"] .oc { --s-pending:#c98500; --s-accepted:#3987e5; --s-won:#008300; --s-failed:#e66767; --s-fake:#9085e9; --oc-grid:#2b2b29; --oc-ink:#f0efec; --oc-mut:#c3c2b7; --oc-surface:#1a1a19; }
.oc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.oc-head h3 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.02em; } .oc-head h3 em { font-style: normal; color: var(--oc-mut); font-weight: 600; font-size: 15px; }
.oc-head p { margin: 4px 0 0; color: var(--oc-mut); font-size: 13px; }
.oc-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--oc-grid); }
.oc-seg button { border: 0; background: none; color: var(--oc-mut); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.oc-seg button[aria-pressed="true"] { background: var(--oc-surface); color: var(--oc-ink); box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.oc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.oc-kpi { position: relative; padding: 14px 16px 16px; border-radius: 16px; border: 1px solid var(--oc-grid); background: color-mix(in srgb, var(--oc-surface) 70%, transparent); overflow: hidden; }
.oc-kpi span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--oc-mut); }
.oc-kpi b { display: block; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.oc-kpi small { color: var(--oc-mut); font-size: 12px; }
.oc-kpi i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); border-radius: 0 4px 4px 0; background: var(--oc-mut); opacity: .55; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.oc-kpi.accepted i { background: var(--s-accepted); opacity: 1; } .oc-kpi.failed i { background: var(--s-failed); opacity: 1; } .oc-kpi.fake i { background: var(--s-fake); opacity: 1; }
.oc-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(250px, 1fr); gap: 22px; align-items: start; }
.oc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.oc-legend button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--oc-grid); background: none; color: var(--oc-ink); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: opacity .15s, background .15s; }
.oc-legend button i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .oc-legend button b { color: var(--oc-mut); font-variant-numeric: tabular-nums; }
.oc-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; } .oc-legend button:hover { background: var(--oc-grid); }
.oc-plot { position: relative; width: 100%; } .oc-plot svg { display: block; width: 100%; overflow: visible; }
.oc-ax { font-size: 11px; fill: var(--oc-mut); font-variant-numeric: tabular-nums; }
.oc-col { transition: opacity .15s; } .oc-col.dim { opacity: .38; } .oc-hit { outline: none; cursor: crosshair; } .oc-hit:focus-visible { stroke: var(--s-accepted); stroke-width: 2; }
.oc-tip { position: absolute; z-index: 5; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--oc-ink); color: var(--oc-surface); font-size: 12.5px; box-shadow: 0 10px 28px -8px rgba(0,0,0,.45); pointer-events: none; }
.oc-tip b { display: block; margin-bottom: 6px; font-size: 12px; } .oc-tip div { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; } .oc-tip div i { width: 8px; height: 8px; border-radius: 2px; }
.oc-tip div span { margin-left: auto; padding-left: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .oc-tip .t { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.25); font-weight: 700; }
.oc-side { display: grid; gap: 14px; }
.oc-donut { position: relative; width: 168px; height: 168px; margin: 0 auto; } .oc-donut svg { width: 100%; height: 100%; }
.oc-donut circle { transition: stroke-dasharray .6s cubic-bezier(.2,.8,.2,1); }
.oc-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .oc-donut-c b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .oc-donut-c small { color: var(--oc-mut); font-size: 12px; }
.oc-split { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.oc-split li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 9px; font-size: 13.5px; } .oc-split i { width: 10px; height: 10px; border-radius: 3px; }
.oc-split b { font-variant-numeric: tabular-nums; } .oc-split em { font-style: normal; color: var(--oc-mut); text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.oc-fake { padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--s-fake) 35%, var(--oc-grid)); background: color-mix(in srgb, var(--s-fake) 7%, transparent); }
.oc-fake h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; } .oc-fake h4 b { margin-left: auto; font-size: 18px; }
.oc-chan-row { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 6px; } .oc-chan-row span { display: flex; align-items: center; }
.oc-chan-row i { height: 8px; border-radius: 99px; background: var(--oc-grid); overflow: hidden; } .oc-chan-row u { display: block; height: 100%; border-radius: 99px; background: var(--s-fake); text-decoration: none; }
.oc-chan-row em { font-style: normal; text-align: right; color: var(--oc-mut); font-variant-numeric: tabular-nums; }
.oc-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; } .oc-reasons span { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; background: var(--oc-grid); color: var(--oc-ink); } .oc-reasons b { margin-left: 3px; }
.oc-fake a { font-size: 12.5px; font-weight: 700; color: var(--s-fake); text-decoration: none; }
.oc-empty { text-align: center; padding: 34px 10px; border: 1px dashed var(--oc-grid); border-radius: 16px; } .oc-empty b { display: block; font-size: 16px; } .oc-empty small { color: var(--oc-mut); }
.oc-table { margin-top: 16px; } .oc-table summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--oc-mut); }
.oc-tscroll { overflow: auto; margin-top: 8px; } .oc-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.oc-table th, .oc-table td { padding: 6px 10px; border-bottom: 1px solid var(--oc-grid); text-align: right; } .oc-table th:first-child, .oc-table tbody th { text-align: left; font-weight: 600; }
@media (max-width: 980px) { .oc-grid { grid-template-columns: 1fr; } .oc-side { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .oc { padding: 16px; border-radius: 18px; } .oc-kpis { grid-template-columns: 1fr 1fr; } .oc-kpi b { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .oc *, .oc-donut circle { transition: none !important; } }
/* fake lead board */
.fake-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.fake-card { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 6px; }
.fake-card .why { font-size: 12px; font-weight: 700; color: #6250d6; } .fake-card small { color: var(--mut); }
.chan-fake { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; font-size: 12px; font-weight: 650; white-space: nowrap; } .chan-fake b { color: #6250d6; margin-left: 3px; } .chan-fake.on { background: #6250d6; border-color: #6250d6; color: #fff; } .chan-fake.on b { color: #fff; }
.fake-intro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; background: #f0eeff; color: #3b2fa0; } .fake-intro span { flex: 1; min-width: 200px; font-size: 13px; }
.board-toolbar form input[name="q"] { min-width: 210px; }
.board-toolbar .chan-tabs.small { flex-wrap: nowrap; }

/* ===== compact Lead Board toolbar ===== */
.bt { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.bt-title { display: flex; align-items: center; gap: 8px; margin: 0 6px 0 0; font-size: 18px; white-space: nowrap; }
.bt-title .title-icon, .bt-title > span.icon-badge { transform: scale(.8); }
.bt-n { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--surface-subtle, #eef1f4); color: var(--mut); }
.bt-search { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 260px; max-width: 460px; margin: 0; min-width: 0; }
.bt-search input[name="q"] { width: 100%; min-width: 0; height: 38px; margin: 0; padding: 0 30px 0 34px; border-radius: 999px; font-size: 13.5px; }
.bt-ic { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--mut); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.bt-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--mut); text-decoration: none; font-size: 11px; background: var(--surface-subtle, #eef1f4); }
.bt-staff { height: 38px; margin: 0; padding: 0 28px 0 12px; border-radius: 999px; width: auto; max-width: 150px; font-size: 13px; }
.bt-search .bt-staff { position: static; }
.bt-search:has(.bt-x) input[name="q"] { padding-right: 34px; }
.bt-go { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
.bt-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-subtle, #eef1f4); }
.bt-seg a { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; color: var(--mut); text-decoration: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s; }
.bt-seg a .ch-ico { margin: 0; width: 18px; height: 18px; } .bt-seg a b { font-weight: 800; font-variant-numeric: tabular-nums; }
.bt-seg a:hover { background: rgba(255,255,255,.7); color: var(--text, #1c2430); }
.bt-seg a.on { background: var(--card, #fff); color: var(--text, #1c2430); box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.bt-seg a.bt-fk.on { background: #6250d6; color: #fff; }
.bt-sp { flex: 1; }
.bt-new { height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 750; white-space: nowrap; }
.bt-ib { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--mut); cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.bt-ib:hover, .bt-ib.on { background: var(--surface-subtle, #eef1f4); color: var(--text, #1c2430); }
.bt-ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) { .bt-title .bt-n { display: none; } .bt-search { max-width: 320px; } }
@media (max-width: 900px) { .bt-search { flex-basis: 100%; max-width: none; order: 3; } .bt-seg { order: 4; } .bt-sp { display: none; } .bt-new { margin-left: auto; } .bt-title { margin-right: auto; } .bt-staff { max-width: 120px; } }
@media (max-width: 520px) { .bt-new span { display: none; } .bt-new { width: 38px; padding: 0; } .bt-seg a { padding: 0 8px; } .bt-seg { flex: 1; justify-content: space-between; } }
.bt-in { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.bt-search { gap: 8px; }

/* ===== responsive pass: tablets, phones ===== */
@media (max-width: 1100px) {
  .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(258px, 31vw); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; align-items: start; }
  .board .col { height: max(420px, calc(100dvh - 230px)); scroll-snap-align: start; }
}
@media (max-width: 760px) { .board { grid-auto-columns: minmax(270px, 84vw); } }
@media (max-width: 900px) {
  .filters { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; gap: 8px; }
  .filters input, .filters select { flex: 1 1 150px; height: auto; min-height: 42px; }
  .filters input[name="q"] { flex: 1 1 100%; }
  .stagesel { min-width: 120px; }
  .scroll, .card[style*="overflow"] { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .content-area { padding-left: 12px; padding-right: 12px; }
  .money-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .money { font-size: 22px; }
  .plan-grid { grid-template-columns: 1fr; }
  table { font-size: 13px; }
  .modal .box { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
  .row { grid-template-columns: 1fr !important; }
  .page-heading { flex-direction: column; align-items: flex-start; }
}
@supports (padding: max(0px)) { .topbar, .content-area { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } }
table select[name="user_id"] { min-width: 112px; }
/* Lead Journey: slim save bar on phones (map tools are for bigger screens) */
@media (max-width: 640px) {
  .lj-map-actions .btn.ghost, .lj-hint, .lj-map-status { display: none !important; }
  .lj-save, .lj-enhanced .lj-save { padding: 8px 12px; border-radius: 12px; gap: 8px; }
  .lj-save .lj-map-actions { flex: 1; } .lj-save .lj-map-actions .btn { width: 100%; }
}
@media (max-width: 760px) {
  .bs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bs-card .bs-stage { flex-wrap: wrap; gap: 8px 10px; }
  .bs-card .bs-stage .bs-name { flex: 1 1 130px; }
  .bs-card .bs-stage .bs-n { margin-left: auto; }
  table input:not([type=checkbox]):not([type=radio]) { min-width: 96px; }
}
li > .btn, li > a.btn, li > form .btn { display: inline-flex; align-items: center; margin: 4px 4px 4px 0; line-height: 1.2; }
.side-nav { padding-bottom: 56px; }

.plan-card.pick { position: relative; } .plan-card.pick::after { content: '✓ Selected'; position: absolute; right: 12px; top: 12px; font-size: 11px; font-weight: 800; color: var(--green, #0f8a5f); }