/* Astranode CRM theme — "Signal": blue-black layers, ice-blue light, amber for things that need you. */
@font-face { font-family: Geist; src: url(../fonts/Geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: GeistMono; src: url(../fonts/GeistMono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --canvas: #07090E; --sunk: #05070B; --surface: #0D1119; --raised: #141A25; --overlay: #1A2230;
  --line: rgba(148, 163, 184, .10); --line-2: rgba(148, 163, 184, .17); --line-3: rgba(148, 163, 184, .28);
  --text: #E6EBF2; --text-2: #B4BECC; --text-3: #8A94A6;
  --gold: #6FD3FF; --gold-hi: #9BE3FF; --gold-soft: rgba(111, 211, 255, .12); --gold-glow: rgba(111, 211, 255, .30); --on-gold: #06121A;
  --ember: #FFB86B; --ember-deep: #B9772E; --indigo: #9DB4FF; --clay: #8FB3A8;
  --ok: #3DD68C; --ok-soft: rgba(61, 214, 140, .13); --warn: #FFB86B; --warn-soft: rgba(255, 184, 107, .14); --bad: #FF7A6B; --bad-soft: rgba(255, 122, 107, .14);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .04); --grid-line: rgba(148, 163, 184, .07);
  --f-display: Geist, system-ui, sans-serif; --f-ui: Geist, system-ui, sans-serif; --f-mono: GeistMono, ui-monospace, monospace;
}
:root[data-theme="light"] {
  --canvas: #EEF1F5; --sunk: #E4E8EE; --surface: #FFFFFF; --raised: #FFFFFF; --overlay: #FFFFFF;
  --line: rgba(15, 23, 42, .08); --line-2: rgba(15, 23, 42, .14); --line-3: rgba(15, 23, 42, .24);
  --text: #0E1320; --text-2: #3B4556; --text-3: #5B6474;
  --gold: #0A7FB8; --gold-hi: #0B6E9E; --gold-soft: rgba(10, 127, 184, .10); --gold-glow: rgba(10, 127, 184, .20); --on-gold: #FFFFFF;
  --ember: #C2620E; --ok: #16A34A; --warn: #B45309; --bad: #DC2626; --grid-line: rgba(15, 23, 42, .06);
}
body { font-family: var(--f-ui); }
.page-head h2, .panel-h h3, .login-card h1, .drawer-h h3, .modal-h h3, .kpi .v, h2, h3 { font-weight: 600 !important; letter-spacing: -.025em; }
.kpi .v { font-variant-numeric: tabular-nums; }
.num, .mono { font-variant-numeric: tabular-nums; }
.login-fallback { background: radial-gradient(80% 60% at 30% 20%, rgba(111, 211, 255, .18), transparent 60%), radial-gradient(60% 50% at 90% 90%, rgba(255, 184, 107, .10), transparent 60%), var(--canvas) !important; }

/* ── pipeline board ─────────────────────────────────────────────────────────── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 420px; max-height: calc(100vh - 210px); scroll-snap-align: start; transition: border-color var(--dur-f), background var(--dur-f); }
.col.over { border-color: var(--gold); background: color-mix(in srgb, var(--surface) 88%, var(--gold) 12%); }
.col-h { padding: 14px 14px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.col-h b { font-weight: 600; font-size: 14px; }
.col-h .n { font-size: 12px; color: var(--text-3); background: var(--raised); border-radius: 999px; padding: 1px 8px; }
.col-h .v { margin-left: auto; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.col-h i { width: 8px; height: 8px; border-radius: 50%; }
.col-b { padding: 10px; display: grid; gap: 8px; overflow-y: auto; align-content: start; flex: 1; }
.dcard { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 12px; cursor: grab; box-shadow: var(--hi); transition: transform var(--dur-f) var(--ease), border-color var(--dur-f), opacity var(--dur-f); }
.dcard:hover { border-color: var(--line-3); }
.dcard.dragging { opacity: .45; transform: scale(.98); }
.dcard .t { font-weight: 550; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.dcard .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .s { color: var(--text-3); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .f { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--text-3); }
.dcard .f .val { margin-left: auto; color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }
.late { color: var(--warn) !important; }
.src { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); background: var(--sunk); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc, var(--gold)); }

/* stage dots */
.sd-new { --sc: #6FD3FF; } .sd-contacted { --sc: #9DB4FF; } .sd-demo { --sc: #B7A4F0; } .sd-quote { --sc: #FFB86B; } .sd-won { --sc: #3DD68C; } .sd-lost { --sc: #8A94A6; }
.stage-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--sc); white-space: nowrap; }
.stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
:root[data-theme="light"] .stage-pill { color: color-mix(in srgb, var(--sc) 70%, #000); }

/* stage stepper in drawer */
.stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 18px; }
.stepper button { height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--sunk); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; transition: background var(--dur-f), color var(--dur-f), border-color var(--dur-f); }
.stepper button.done { background: color-mix(in srgb, var(--sc) 14%, transparent); border-color: color-mix(in srgb, var(--sc) 30%, transparent); color: var(--text); }
.stepper button.on { background: var(--sc); color: #06121A; border-color: var(--sc); font-weight: 600; }
.stepper button:disabled { cursor: default; }

/* contact buttons + timeline */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.quick a, .quick button { justify-content: center; }
.tl { display: grid; gap: 0; margin-top: 6px; }
.tl-i { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-i:last-child { border-bottom: 0; }
.tl-i .ic-w { width: 28px; height: 28px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--gold); }
.tl-i .ic-w svg { width: 14px; height: 14px; }
.tl-i .tx { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.tl-i .mt { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.composer { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--sunk); padding: 10px; margin-top: 6px; }
.composer textarea { width: 100%; min-height: 70px; border: 0; background: transparent; color: var(--text); font: inherit; resize: vertical; outline: none; }
.composer .row { flex-wrap: wrap; }
.kinds { display: flex; gap: 4px; flex-wrap: wrap; }
.kinds button { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.kinds button.on { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-glow); }
.kinds button svg { width: 13px; height: 13px; }

/* home */
.funnel { display: grid; gap: 10px; padding: 6px 18px 18px; }
.funnel-r { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 12px; font-size: 13.5px; }
.funnel-r .bar { height: 10px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.funnel-r .bar i { display: block; height: 100%; border-radius: 999px; background: var(--sc); transform-origin: left; animation: grow .9s var(--ease) both; }
.funnel-r .n { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
@keyframes grow { from { transform: scaleX(0); } }
.due-l { display: grid; }
.due-i { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); cursor: pointer; transition: background var(--dur-f); }
.due-i:hover { background: var(--raised); }
.due-i .grow { min-width: 0; }
.due-i b { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-i span.s { font-size: 12.5px; color: var(--text-3); }
.dropzone { border: 1.5px dashed var(--line-3); border-radius: var(--r-md); padding: 22px; text-align: center; color: var(--text-2); cursor: pointer; transition: border-color var(--dur-f), background var(--dur-f); }
.dropzone.over, .dropzone:hover { border-color: var(--gold); background: var(--gold-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } .stepper { grid-template-columns: repeat(3, 1fr); } .board { grid-auto-columns: 84%; } .col { max-height: none; } }