/*
 * DialClient — business theme (Odoo-style).
 * Loaded after every other stylesheet. Flat surfaces, small radius, system font, Odoo purple + teal,
 * no gradients or glows.
 */
:root {
  --bg: #f9fafb;
  --bg-soft: #f1f3f5;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --ink: #1f2328;
  --ink-2: #374151;
  --muted: #6b7280;
  --faint: #9ca3af;
  --border: #dee2e6;
  --border-strong: #ced4da;
  --primary: #714b67;
  --primary-hover: #5d3d55;
  --primary-ink: #ffffff;
  --primary-soft: #f3edf2;
  --primary-text: #714b67;
  --teal: #017e84;
  --teal-soft: #e6f2f3;
  --accent: #017e84;
  --success: #1e7e34;
  --success-soft: #e9f5ec;
  --warn: #9a6700;
  --warn-soft: #fff6dd;
  --danger: #c0392b;
  --danger-soft: #fbeceb;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .04);
  --shadow: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);
  --hero-glow: none;
  --radius: 6px;
  --radius-sm: 4px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1d26; --bg-soft: #242733; --surface: #262a36; --surface-2: #2b2f3c;
    --ink: #e9ecef; --ink-2: #c9cdd4; --muted: #9aa0ab; --faint: #6e7480;
    --border: #3a3e4c; --border-strong: #4a4f5f;
    --primary: #8c6283; --primary-hover: #a1749a; --primary-soft: rgba(140, 98, 131, .22); --primary-text: #d4b3cc;
    --teal: #1ba8ad; --teal-soft: rgba(27, 168, 173, .16); --accent: #1ba8ad;
    --success: #4caf6a; --success-soft: rgba(76, 175, 106, .15); --warn: #e0a83a; --warn-soft: rgba(224, 168, 58, .15);
    --danger: #e5675a; --danger-soft: rgba(229, 103, 90, .15);
    --shadow-sm: none; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
    --hero-glow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1d26; --bg-soft: #242733; --surface: #262a36; --surface-2: #2b2f3c;
  --ink: #e9ecef; --ink-2: #c9cdd4; --muted: #9aa0ab; --faint: #6e7480;
  --border: #3a3e4c; --border-strong: #4a4f5f;
  --primary: #8c6283; --primary-hover: #a1749a; --primary-soft: rgba(140, 98, 131, .22); --primary-text: #d4b3cc;
  --teal: #1ba8ad; --teal-soft: rgba(27, 168, 173, .16); --accent: #1ba8ad;
  --success: #4caf6a; --success-soft: rgba(76, 175, 106, .15); --warn: #e0a83a; --warn-soft: rgba(224, 168, 58, .15);
  --danger: #e5675a; --danger-soft: rgba(229, 103, 90, .15);
  --shadow-sm: none; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
  --hero-glow: none;
}

/* ---------- type ---------- */
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: auto; }
h1, h2, h3, h4, .page-head h1 { letter-spacing: normal !important; font-weight: 600 !important; }
h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
h2 { font-size: clamp(24px, 2.6vw, 30px); }
.page-head h1 { font-size: 22px; }
.page-head p { color: var(--muted); }
b, strong { font-weight: 600; }
.grad { background: none !important; color: var(--primary) !important; -webkit-text-fill-color: currentColor; }

/* ---------- brand ---------- */
.logo { font-weight: 700 !important; letter-spacing: normal !important; font-size: 18px; }
.logo b { color: var(--primary); font-weight: 700; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 6px; background: var(--primary) !important; box-shadow: none !important;
  font-size: 0 !important; position: relative;
}
.logo-mark::after { content: none; }

/* ---------- buttons ---------- */
.btn { height: 34px; padding: 0 14px; border-radius: 4px; font-weight: 500; font-size: 14px; box-shadow: none; }
.btn:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.btn-primary, .btn.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none !important; }
.btn-primary:hover, .btn.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: none; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 4px; }
.btn-lg { height: 42px; padding: 0 20px; font-size: 15px; border-radius: 4px; }
.btn-ghost:hover { background: var(--bg-soft); }
a.link, .link { color: var(--teal); }

/* ---------- form controls ---------- */
.input, .select, .textarea { border-radius: 4px; border-color: var(--border-strong); height: 34px; }
.textarea { height: auto; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

/* ---------- badges / chips ---------- */
.chip { height: 22px; padding: 0 8px; border-radius: 3px; font-weight: 500; font-size: 12px; border-color: transparent; background: var(--bg-soft); }
.chip.ok { background: var(--success-soft); color: var(--success); }
.chip.hot { background: var(--danger-soft); color: var(--danger); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.on { background: var(--primary); color: #fff; }

/* ---------- surfaces ---------- */
.card, .pcard, .chat, .brow, .cat-pop, .lead-pop, .biz-table-wrap, .kpi, .plan, .feature, .step, .aud, .faq details, .dlg, .auth-card {
  border-radius: var(--radius) !important; box-shadow: none !important;
}
.chat { border: 1px solid var(--border); }
.pcard { border-radius: 4px !important; }
.brow:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.cat-pop, .lead-pop, .dlg { box-shadow: var(--shadow-lg) !important; }

/* ---------- web app shell (Odoo-like: white sidebar, teal active marker) ---------- */
.side { background: var(--surface); }
.side-nav a { border-radius: 4px; font-weight: 500; }
.side-nav a.active { background: var(--primary-soft); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.side-nav a .count { border-radius: 10px; }
.me-av, .avatar, .pc-av { background: var(--primary) !important; }
.bar span { background: var(--primary) !important; }
.seg { border-radius: 4px; padding: 2px; }
.seg button { border-radius: 3px; font-weight: 500; }
.seg button.on { box-shadow: none; border: 1px solid var(--border); }

/* tables: Odoo list-view feel */
.biz-table th, .cmp th, table th { background: var(--surface-2); font-weight: 600; text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; color: var(--ink-2) !important; }
.biz-table td, .cmp td { font-size: 13px; }
.biz-table tbody tr:nth-child(even) { background: var(--surface-2); }
.biz-table tbody tr:hover { background: var(--teal-soft); }

/* numbers and scores: plain, not shouty */
.kpi b, .price, .bill-plan .price, .hero-proof b, .mock-kpis b, .run-top > b { letter-spacing: normal !important; font-weight: 600 !important; }
.score, .pc-score, .mp, .trow i.times, .sim-score, .cat-open i { font-weight: 600 !important; border-radius: 3px !important; }
.verdict { font-weight: 600; letter-spacing: normal; }

/* ---------- agent feed: quieter, chatter-like ---------- */
.agent-av { background: var(--teal) !important; box-shadow: none !important; border-radius: 4px !important; font-size: 0 !important; }
.agent-av::after { content: ''; width: 72%; height: 72%; background: url(/img/mark-white.svg) center / contain no-repeat; }
.contact-pill { border-radius: 3px; font-weight: 500; }
.contact-pill.link { background: var(--teal-soft); color: var(--teal); }
.pc-acts .act { border-radius: 4px; font-weight: 500; }
.pc-acts .act.primary { background: var(--primary); color: #fff; }
.pc-more, .br-why, .biz-table td.req small { color: var(--teal) !important; }

/* ---------- marketing pages ---------- */
.hero, .page-hero, .auth-wrap { background: var(--bg) !important; }
.cta-in { background: var(--primary) !important; border-radius: 8px !important; }
.cat-own { background: var(--surface) !important; }
.num, .step > .num { border-radius: 4px !important; font-weight: 600 !important; background: var(--primary-soft); color: var(--primary); }
.plan li::before, .perks li::before { font-weight: 600 !important; color: var(--teal) !important; }
.cmp td.y { color: var(--teal) !important; font-weight: 600 !important; }
.aud > span:first-child { display: none; }
.nav a:hover { color: var(--primary); }

/* category marks: a letter in a flat colour tile (no emoji) */
.cat-icon, .pack-icon { width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; font-size: 16px !important; font-weight: 700; color: #fff; background: var(--c, var(--primary)) !important; }
.cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; font-style: normal; }
.kpi > span:first-child:empty, .kpi .kpi-ic:empty { display: none; }
.empty .big:empty { display: none; }
.kpi .ico:empty { display: none; }
.agent-av svg { display: none; }
.eyebrow { border-radius: 3px !important; font-weight: 500 !important; }
.logo-mark svg { display: block; width: 20px; height: 20px; }
.logo-mark { display: grid; place-items: center; }

/* purple text: lighter shade in dark mode for contrast */
.grad, .logo b { color: var(--primary-text) !important; }
.num, .step > .num, .side-nav a.active, .seg button.on, .pc-acts .act.primary-soft, .btn.primary-soft, .chip.cat { color: var(--primary-text) !important; }
/* category cards: one calm style, colour only in the small letter tile */
.cat::before { display: none; }
.cat { padding: 18px; }
.cat:hover { transform: none; box-shadow: none; border-color: var(--border-strong); background: var(--surface-2); }
.cat-go { color: var(--teal) !important; font-weight: 500; }
.cat-own { border-style: dashed !important; border-color: var(--border-strong) !important; }
.cat-icon { opacity: .92; }
/* subtle hover on cards everywhere, no lifting */
.feature:hover, .step:hover, .aud:hover, .plan:hover { transform: none !important; box-shadow: none !important; }
.legal-note a { color: var(--teal); }
/* dashboard top bar: fits a 375px phone */
.top .search { min-width: 0; border-radius: 4px; }
.top .search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
@media (max-width: 860px) {
  .top { padding: 0 12px; gap: 6px; }
  .top .btn-primary { padding: 0 10px; flex: none; }
  .top .theme-toggle { flex: none; }
}
.auth-card { width: 100%; max-width: 440px; box-sizing: border-box; }
.demo-btns { flex-wrap: wrap; }
.auth-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.auth-card { min-width: 0; }
.auth-card .btn { white-space: normal; text-align: center; }
@media (max-width: 480px) { .auth-card { padding: 20px 16px; } }
#install .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { #install .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #install .steps { grid-template-columns: minmax(0, 1fr); } }
/* "already signed in on another device" dialog: always fits the screen, buttons stay visible */
.dlg-bg { overflow-y: auto; align-items: start; padding: 4vh 16px; }
.dlg { max-height: 92vh; display: flex; flex-direction: column; padding: 20px; border-radius: 8px; }
.dlg .dv-list { overflow-y: auto; max-height: 34vh; flex: 0 1 auto; margin-bottom: 14px; }
.dv-list li { padding: 8px 10px; border-radius: 4px; }
.dlg-ic { width: 40px; height: 40px; border-radius: 6px; margin-bottom: 8px; }
.dlg h2 { font-size: 18px; }
.dlg-btns { flex: none; }
.dlg-btns .btn { height: 38px; }
/* Leads: My leads / Global leads tabs */
.lead-tabs { display: inline-flex; margin: 0 0 14px; }
.lead-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 3px; font-weight: 500; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.lead-tabs a.on { background: var(--surface); color: var(--primary-text); border: 1px solid var(--border); }
.lead-tabs a i { font-style: normal; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 9px; background: var(--bg-soft); color: var(--muted); }
.match-tg { white-space: nowrap; font-size: 13px; }
.mp.sc { background: var(--success-soft); color: var(--success); }
/* business profile */
.setup h3 { margin: 18px 0 4px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.setup h3:first-child { margin-top: 0; }
.setup .muted { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.cat-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cat-tick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; font-size: 13px; }
.cat-tick input { accent-color: var(--primary); margin: 0; }
.cat-tick.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.locked { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 6px; background: var(--surface-2); }
.locked p { margin: 4px 0 10px; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .cat-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-ticks { grid-template-columns: minmax(0, 1fr); } }
.learn-note { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
.learn-note.on { color: var(--teal); }
.buy-terms { max-width: 820px; margin: 18px auto 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; color: var(--ink-2); }
.buy-terms ul { margin: 6px 0 8px; padding-left: 18px; line-height: 1.6; }
.buy-terms p { margin: 0; color: var(--muted); }
.buy-terms a { color: var(--teal); }