/* ===========================================================================
   Helmvane — CommercePilot design language
   ===========================================================================
   Same visual system as the CommercePilot CRM: warm-paper ground, white
   surfaces, deep-teal accent, Space Grotesk headings over Public Sans body,
   14px radius, soft two-layer card shadow, tabular numerals on every figure.

   Ported as plain CSS variables rather than Tailwind because this console has
   no build step — the tokens below are the exact rgb triples from the CRM's
   index.css, so the two products read as one family.
   =========================================================================== */

:root {
  /* Brand — deep teal */
  --brand-50: 232 243 242;
  --brand-100: 205 231 229;
  --brand-200: 158 208 205;
  --brand-500: 20 122 122;
  --brand-600: 15 94 96;
  --brand-700: 15 59 61;
  --brand-900: 8 36 38;

  /* Warm-paper light theme */
  --paper: 248 246 241;
  --surface: 255 255 255;
  --raised: 252 251 248;
  --line: 226 221 210;
  --ink: 25 34 38;
  --muted: 92 102 106;
  --faint: 140 149 152;

  --amberx: 190 120 12;
  --successx: 22 121 78;
  --dangerx: 187 51 47;

  /* Legacy aliases — the older rules in this file still reference these, so
     they are remapped onto the new palette instead of being hunted down. */
  --blue: rgb(var(--brand-500));
  --blue-dark: rgb(var(--brand-600));
  --orange: rgb(var(--amberx));
  --bg: rgb(var(--paper));
  --card: rgb(var(--surface));
  --border: rgb(var(--line));
  --txt: rgb(var(--ink));
  --txt-soft: rgb(var(--muted));
  --txt-xsoft: rgb(var(--faint));

  color-scheme: light;
}

[data-theme='dark'] {
  --paper: 12 18 20;
  --surface: 20 27 30;
  --raised: 26 34 37;
  --line: 44 55 59;
  --ink: 233 238 238;
  --muted: 158 170 172;
  --faint: 118 130 133;

  --brand-50: 18 42 43;
  --brand-100: 22 56 57;
  --brand-200: 30 84 85;
  --brand-500: 45 190 180;
  --brand-600: 30 160 155;
  --brand-700: 150 226 219;
  --brand-900: 208 242 238;

  --amberx: 234 170 60;
  --successx: 70 190 135;
  --dangerx: 240 116 110;

  color-scheme: dark;
}

body {
  background: rgb(var(--paper));
  color: rgb(var(--ink));
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv05' 1;
}

h1, h2, h3, h4, .panel-title, .brand, .hstat-value, .hib-val, .pm-v {
  font-family: 'Space Grotesk', 'Public Sans', system-ui, sans-serif;
}

/* Money and counts line up column-to-column instead of jittering. */
.hstat-value, .hib-val, .pm-v, .hc-price, .hi-cell, .hp-amt, .wk-chip.amt, .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

*:focus-visible {
  outline: 2px solid rgb(var(--brand-500));
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--line)); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--faint)); background-clip: content-box; }

/* ---------- shell ---------- */
@media (min-width: 1300px) {
  body {
    background:
      radial-gradient(1200px 800px at 12% -10%, rgb(var(--brand-500) / .07) 0%, transparent 55%),
      radial-gradient(1000px 700px at 100% 110%, rgb(var(--amberx) / .07) 0%, transparent 50%),
      rgb(var(--paper));
  }
  #app-view {
    border-radius: 18px;
    box-shadow: 0 12px 40px -10px rgb(15 34 40 / .28), 0 0 0 1px rgb(var(--line));
  }
}

.topbar {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border-bottom: 1px solid rgb(var(--line));
  box-shadow: none;
  padding: 0 14px;
  height: 56px;
}
.topbar::after { display: none; }
.brand { font-size: 15px; font-weight: 700; color: rgb(var(--ink)); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgb(var(--brand-500)); color: #fff;
  box-shadow: none; font-size: 15px;
}
[data-theme='dark'] .brand-mark { color: rgb(12 18 20); }

.icon-btn {
  background: transparent; color: rgb(var(--muted));
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid transparent;
}
.icon-btn:hover { background: rgb(var(--raised)); color: rgb(var(--ink)); }
.icon-btn:active { background: rgb(var(--line)); }
.bell-badge { border-color: rgb(var(--surface)); }

/* ---------- sidebar nav ---------- */
.main-tabs { background: rgb(var(--surface)); border-color: rgb(var(--line)); }
.main-tab {
  color: rgb(var(--muted));
  border-bottom-color: transparent;
  font-weight: 500;
}
.main-tab.active { color: rgb(var(--brand-700)); border-bottom-color: rgb(var(--brand-500)); }

@media (min-width: 900px) {
  .main-tabs { width: 232px; padding: 12px 10px; gap: 2px; }
  .main-tab {
    border-radius: 10px; padding: 9px 12px; gap: 12px;
    font-size: 13.5px; font-weight: 500;
  }
  .main-tab:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
  .main-tab.active {
    background: rgb(var(--brand-500)); color: #fff; border-bottom-color: transparent;
  }
  [data-theme='dark'] .main-tab.active { color: rgb(12 18 20); }
  .main-tab.active:hover { background: rgb(var(--brand-500)); color: #fff; }
  [data-theme='dark'] .main-tab.active:hover { color: rgb(12 18 20); }
  .main-tab .mt-icon { font-size: 16px; }
}

/* The sidebar's own footer — mirrors the CRM's "Ask your data" card. */
.nav-cta {
  margin: 10px 4px 4px; padding: 12px;
  border-radius: 14px; border: 1px solid rgb(var(--brand-500) / .3);
  background: rgb(var(--brand-500) / .08);
  cursor: pointer; text-align: left; width: calc(100% - 8px);
  font-family: inherit;
}
.nav-cta:hover { background: rgb(var(--brand-500) / .14); }
.nav-cta b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgb(var(--brand-700)); }
.nav-cta span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: rgb(var(--muted)); }
@media (max-width: 899px) { .nav-cta { display: none; } }

/* ---------- surfaces ---------- */
.hstat, .hclient, .prod, .hl, .nfy, .wk-item, .nt, .hinc-box, .hinc-table,
.hrenewal, .hpay, .hsent, .mgmt-section, .hedit, .hset, .hsync-group,
.as-msg.ai .as-body, .conv-item, .lead-detail-card, .renewbox {
  background: rgb(var(--surface));
  border-color: rgb(var(--line));
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(15 34 40 / .04), 0 4px 16px -6px rgb(15 34 40 / .10);
}
[data-theme='dark'] .hstat, [data-theme='dark'] .hclient, [data-theme='dark'] .prod,
[data-theme='dark'] .hl, [data-theme='dark'] .nfy, [data-theme='dark'] .wk-item,
[data-theme='dark'] .nt, [data-theme='dark'] .hinc-box, [data-theme='dark'] .conv-item {
  box-shadow: none;
}

.hstat-label, .hib-label, .hc-k, .pm-l, .hl-src, .hinc-row.head span {
  color: rgb(var(--faint));
}
.hstat-value { font-weight: 700; }

/* form controls */
input, select, textarea, .hosting-searchbar input, .hf input, .hf select, .hf textarea,
.wk-add input, .wk-add select, .hd-add input, .hset-row input, .as-composer textarea,
.hn-body, .nt-body-edit, .pj-status, .wk-date, .hdrow input, .login-card input {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border-color: rgb(var(--line));
  border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: rgb(var(--faint)); }
input:focus, select:focus, textarea:focus { border-color: rgb(var(--brand-500)); }

/* buttons */
.small-btn {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  color: rgb(var(--ink));
  border-radius: 9px; font-weight: 600;
}
.small-btn:hover { background: rgb(var(--raised)); }
.small-btn.primary {
  background: rgb(var(--brand-500)); border-color: rgb(var(--brand-500)); color: #fff;
}
[data-theme='dark'] .small-btn.primary { color: rgb(12 18 20); }
.small-btn.primary:hover { background: rgb(var(--brand-600)); }
.small-btn.danger { color: rgb(var(--dangerx)); }
.small-btn.wa { background: #25D366; border-color: #25D366; color: #fff; }

/* pills */
.pill.ok { background: rgb(var(--successx) / .12); color: rgb(var(--successx)); }
.pill.warn { background: rgb(var(--amberx) / .14); color: rgb(var(--amberx)); }
.pill.hot { background: rgb(var(--dangerx) / .12); color: rgb(var(--dangerx)); }
.pill.over { background: rgb(var(--dangerx)); color: #fff; }
.pill.none { background: rgb(var(--raised)); color: rgb(var(--faint)); }
.wk-chip { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.count { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }

.tab { background: rgb(var(--surface)); border-color: rgb(var(--line)); color: rgb(var(--muted)); }
.tab.active { background: rgb(var(--brand-500)); border-color: rgb(var(--brand-500)); color: #fff; }
[data-theme='dark'] .tab.active { color: rgb(12 18 20); }

.hint, .prod-src, .nfy-m { color: rgb(var(--muted)); }
.hwarn { background: rgb(var(--amberx) / .1); border-color: rgb(var(--amberx) / .35); color: rgb(var(--amberx)); }
.empty { color: rgb(var(--faint)); }

/* overlays */
#conv-view, #lead-view, #blocked-view, #hosting-view, #product-view, #notif-view {
  background: rgb(var(--paper));
}
.conv-header { background: rgb(var(--surface)); border-color: rgb(var(--line)); }
#back-btn, #lead-back-btn, #hosting-back-btn, #product-back-btn, #notif-back-btn {
  background: rgb(var(--raised)); border-color: rgb(var(--line)); color: rgb(var(--ink));
}

/* login */
#login-view { background: rgb(var(--brand-900)); }
.login-card { background: rgb(var(--surface)); border-radius: 18px; }
.login-mark { background: rgb(var(--brand-500)); box-shadow: none; border-radius: 12px; }
.login-card button {
  background: rgb(var(--brand-500)); box-shadow: none; border-radius: 10px;
}
[data-theme='dark'] .login-card button { color: rgb(12 18 20); }

/* assistant bubbles */
.as-msg.me .as-body { background: rgb(var(--brand-500)); color: #fff; }
[data-theme='dark'] .as-msg.me .as-body { color: rgb(12 18 20); }
.as-msg.ai .as-body { color: rgb(var(--ink)); }
.as-chip { background: rgb(var(--surface)); border-color: rgb(var(--line)); color: rgb(var(--muted)); }
.as-composer { background: rgb(var(--surface)); border-color: rgb(var(--line)); }
.as-engine { background: rgb(var(--raised)); border-color: rgb(var(--line)); color: rgb(var(--muted)); }
.as-engine.act { background: rgb(var(--successx) / .1); border-color: rgb(var(--successx) / .35); color: rgb(var(--successx)); }
.as-pending { background: rgb(var(--amberx) / .1); border-color: rgb(var(--amberx) / .35); }
.as-pending-h, .as-act-t { color: rgb(var(--amberx)); }
.as-body code { background: rgb(var(--raised)); }

.hdomain, .prod-metric, .hn-ch { background: rgb(var(--raised)); }
.hinc-row { border-color: rgb(var(--line)); }
.hinc-row.head { background: rgb(var(--raised)); }
.hinc-box.good { background: rgb(var(--successx) / .08); border-color: rgb(var(--successx) / .3); }
.hc-v.good, .hi-cell.good, .pm-s, .hp-amt { color: rgb(var(--successx)); }
.hl.down { background: rgb(var(--dangerx) / .06); border-color: rgb(var(--dangerx) / .3); }
.hl-dot { background: rgb(var(--successx)); }
.hl.down .hl-dot { background: rgb(var(--dangerx)); }
.mgmt-divider { border-color: rgb(var(--line)); }
.wk-item.done { opacity: .5; }

/* ---------- command palette (Ctrl+K) ---------- */
#cmdk {
  position: fixed; inset: 0; z-index: 700; display: none;
  align-items: flex-start; justify-content: center;
  background: rgb(15 34 40 / .45); padding-top: 12vh;
}
#cmdk.open { display: flex; }
.cmdk-box {
  width: min(560px, 92vw);
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
  border-radius: 16px; box-shadow: 0 12px 40px -10px rgb(15 34 40 / .45);
  overflow: hidden;
}
.cmdk-box input {
  width: 100%; border: none; border-bottom: 1px solid rgb(var(--line));
  padding: 15px 18px; font-size: 15px; border-radius: 0; background: transparent;
}
.cmdk-box input:focus { outline: none; }
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: none; background: none;
  font-size: 13.5px; color: rgb(var(--ink)); cursor: pointer; text-align: left;
  font-family: inherit;
}
.cmdk-item:hover, .cmdk-item.sel { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.cmdk-item .k { margin-left: auto; font-size: 10.5px; color: rgb(var(--faint)); }
.cmdk-hint { padding: 9px 14px; border-top: 1px solid rgb(var(--line)); font-size: 11px; color: rgb(var(--faint)); }


/* ---- Overview ---- */
.ov-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ov-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 14px; overflow: hidden; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px 10px; }
.ov-head h3 { margin: 0; font-size: 13.5px; letter-spacing: -.01em; }
.ov-body { padding: 0 15px 13px; }
.ov-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgb(var(--line)); }
.ov-row:first-child { border-top: none; }
.ov-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ov-main b { font-size: 13px; font-weight: 600; }
.ov-main small { font-size: 11px; color: rgb(var(--muted)); }
.ov-amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: rgb(var(--faint)); }
.ov-dot.error { background: rgb(var(--dangerx)); }
.ov-dot.warn { background: rgb(var(--amberx)); }
.ov-dot.info { background: rgb(var(--brand-500)); }
.ov-none { font-size: 12.5px; color: rgb(var(--muted)); margin: 6px 0; line-height: 1.6; }
@media (min-width: 900px) { .ov-grid { grid-template-columns: 1fr 1fr; } }

/* The base sheet hardcodes light tints on these state cards, which makes their
   figures unreadable on the dark ground — restate them as translucent so they
   tint whatever surface they sit on. */
.hstat.warn { background: rgb(var(--amberx) / .1); border-color: rgb(var(--amberx) / .4); }
.hstat.danger { background: rgb(var(--dangerx) / .1); border-color: rgb(var(--dangerx) / .4); }
.wk-item.p-high { border-left-color: rgb(var(--dangerx)); }
.wk-item.p-low { border-left-color: rgb(var(--line)); }
.nt.pinned { background: rgb(var(--amberx) / .07); border-color: rgb(var(--amberx) / .35); }
.hsync-row.stale { background: rgb(var(--amberx) / .1); }
.hsync-row.stale .hsync-detail { color: rgb(var(--amberx)); }
.hsync-row.danger .hsync-label { color: rgb(var(--dangerx)); }
.renewbox.hot { background: rgb(var(--dangerx) / .07); border-color: rgb(var(--dangerx) / .35); }
.renewbox.over { background: rgb(var(--dangerx) / .1); border-color: rgb(var(--dangerx) / .4); }
.renewbox.ok { background: rgb(var(--successx) / .07); border-color: rgb(var(--successx) / .3); }
.nfy.unread { border-left-color: rgb(var(--amberx)); }
.nfy.lv-error.unread { border-left-color: rgb(var(--dangerx)); }
.nfy-b { color: rgb(var(--muted)); }
.nfy-x { background: rgb(var(--dangerx) / .12); color: rgb(var(--dangerx)); }
.conv-item.unread { border-left-color: rgb(var(--amberx)); }
.status-pill.ai { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.status-pill.live { background: rgb(var(--amberx) / .14); color: rgb(var(--amberx)); }
.pill-pro { background: rgb(var(--amberx) / .14); color: rgb(var(--amberx)); }
.mgmt-error { color: rgb(var(--dangerx)); }
.mgmt-loading { color: rgb(var(--muted)); }
.hdr-del, .wk-del, .hp-del, .nfy-x-btn { color: rgb(var(--faint)); }
.slider { background: rgb(var(--line)); }
.switch input:checked + .slider { background: rgb(var(--brand-500)); }

/* ---- Money owed on project work (My Work > Projects) ----
   Tints are translucent rgb(var()) so the block reads on both themes; the
   first version of the renewal boxes hardcoded light tints and went unreadable
   in dark mode. */
.rcv { border: 1px solid rgb(var(--brand-500) / .35); background: rgb(var(--brand-500) / .06); border-radius: 14px; padding: 10px 12px 12px; margin: 4px 0 16px; }
.rcv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: rgb(var(--ink)); margin: 2px 2px 10px; }
.rcv-head b { color: rgb(var(--brand-500)); font-size: 15px; }
.rcv-note { margin-left: auto; font-size: 11px; font-weight: 500; color: rgb(var(--muted)); }
.rcv .wk-item.rcv-item { grid-template-columns: 1fr auto 132px auto; background: rgb(var(--surface)); }
.wk-chip.paid { background: rgb(var(--successx) / .12); color: rgb(var(--successx)); }
.pj-pay-add { margin-top: -4px; }
.pj-pay-add .wk-toggle { margin-bottom: 0; }
.pj-pay-add .wk-toggle input[type="date"] { padding: 7px 9px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 12px; font-family: inherit; }
@media (max-width: 620px) {
  .rcv .wk-item.rcv-item { grid-template-columns: 1fr auto; }
  .rcv .wk-item.rcv-item .rcv-date { grid-column: 1; }
  .rcv-note { margin-left: 0; width: 100%; }
}

/* ---- Money tab ---- every tint is rgb(var() / alpha) so both themes read. */
.mn-month { display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; }
.mn-month input { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 9px; font-family: inherit; font-size: 13px; background: rgb(var(--surface)); color: rgb(var(--ink)); }
.mn-net { border: 1px solid var(--border); background: rgb(var(--surface)); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mn-net > span { color: rgb(var(--muted)); margin-right: 6px; }
.mn-net.muted { color: rgb(var(--muted)); }
.mn-net input { width: 90px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; background: rgb(var(--surface)); color: rgb(var(--ink)); }
.pos { color: rgb(var(--successx)); }
.neg { color: rgb(var(--dangerx)); }
.debt { color: rgb(var(--muted)); }
.mn-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: start; }
.mn-card { border: 1px solid var(--border); background: rgb(var(--surface)); border-radius: 14px; padding: 12px 14px; }
.mn-card h4 { margin: 0 0 10px; font-size: 13px; }
.mn-legend { display: flex; gap: 12px; font-size: 11px; color: rgb(var(--muted)); margin: -4px 0 8px; }
.mn-legend span::before { content: ''; display: inline-block; width: 10px; height: 6px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.mn-legend .in::before { background: rgb(var(--successx)); }
.mn-legend .out::before { background: rgb(var(--dangerx)); }
.mn-days { display: flex; flex-direction: column; gap: 3px; max-height: 460px; overflow: auto; }
.mn-day { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; padding: 2px 4px; border-radius: 6px; }
.mn-day.today { background: rgb(var(--brand-500) / .08); }
.mn-day.empty { opacity: .45; }
.mn-date { font-variant-numeric: tabular-nums; color: rgb(var(--muted)); font-size: 11.5px; }
.mn-bars { display: flex; flex-direction: column; gap: 2px; }
.mn-bars i { display: block; height: 5px; border-radius: 3px; min-width: 0; }
.mn-bars i.in { background: rgb(var(--successx)); }
.mn-bars i.out { background: rgb(var(--dangerx) / .8); }
.mn-vals { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.mn-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.mn-kv span { display: flex; flex-direction: column; }
/* only source/category keys are lowercase words; names and domains keep their own case */
.mn-kv.cap span { text-transform: capitalize; }
.mn-kv small { text-transform: none; color: rgb(var(--muted)); font-size: 11px; }
.mn-kv b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-hint { font-size: 11.5px; color: rgb(var(--muted)); margin: 8px 0 10px; }
.mn-row { grid-template-columns: 44px 1fr auto auto; }
.mn-row b { font-variant-numeric: tabular-nums; }
.mn-lock { font-size: 12px; opacity: .6; }
.mn-debt { border: 1px solid var(--border); background: rgb(var(--surface)); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.mn-debt.closed { opacity: .55; }
.mn-debt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.mn-debt-rem { font-weight: 700; color: rgb(var(--dangerx)); font-variant-numeric: tabular-nums; }
.mn-debt-bar { height: 8px; border-radius: 5px; background: rgb(var(--line)); margin: 8px 0 6px; overflow: hidden; }
.mn-debt-bar i { display: block; height: 100%; background: rgb(var(--successx)); border-radius: 5px; }
.mn-debt-meta { font-size: 11.5px; color: rgb(var(--muted)); }
.mn-pay { margin: 10px 0 0; }
.mn-debt-pays { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mn-debt-pays span { font-size: 11px; background: rgb(var(--successx) / .1); color: rgb(var(--successx)); border-radius: 100px; padding: 2px 4px 2px 9px; }
@media (max-width: 900px) { .mn-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .mn-row { grid-template-columns: 40px 1fr auto; } .mn-row .wk-del, .mn-row .mn-lock { grid-column: 3; } }