/* INTACT Sales CRM. Tokens follow three layers: primitive -> semantic -> component.
   Palette and type are taken from the INTACT barcode dashboard (portal.css) so the tools match. */

@font-face { font-family:"Geist"; src:url("fonts/geist-latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  /* primitive */
  --navy-950:#052139; --navy-900:#0a2d4a; --navy-800:#0e3a5d; --navy-700:#123f60; --navy-600:#285271;
  --sky-100:#f0f6ff; --sky-200:#dce8f5; --sky-300:#c8d9ea; --sky-400:#b8cddd;
  --slate-300:#9fb6c9; --slate-600:#526c82;
  --blue-500:#287ed6; --blue-300:#8fc1ff; --red-600:#d42020; --green-500:#22c55e; --amber-500:#f59e0b;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;

  /* semantic (dark is the default) */
  color-scheme: dark;
  --bg:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-800); --surface-3:var(--navy-700);
  --line:var(--navy-600); --ink:#ffffff; --ink-2:var(--slate-300); --link:var(--blue-300);
  --accent:var(--blue-500); --danger:var(--red-600); --success:var(--green-500);
  --shadow:0 18px 52px rgba(0,0,0,.22); --focus:#72aef2;
  --font:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* component */
  --btn-bg:var(--surface-2); --btn-fg:var(--ink); --btn-border:var(--line);
  --input-bg:var(--bg); --card-bg:color-mix(in srgb, var(--surface) 94%, transparent);
  --th-bg:var(--surface-2); --row-hover:color-mix(in srgb, var(--surface-2) 55%, transparent);
}
[data-theme="light"] {
  color-scheme: light;
  --bg:var(--sky-100); --surface:#ffffff; --surface-2:var(--sky-200); --surface-3:var(--sky-300);
  --line:var(--sky-400); --ink:var(--navy-950); --ink-2:var(--slate-600); --link:#1c64b4;
  --shadow:0 18px 42px rgba(4,34,58,.12); --focus:#1c64b4;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; color:var(--ink); font:15px/1.5 var(--font);
  background:radial-gradient(circle at top right, var(--surface-3), var(--bg) 52%) fixed; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
h1, h2, h3 { margin:0; }

/* ---------- layout ---------- */
.shell { width:min(1280px, 100%); margin:0 auto; padding:var(--space-4) var(--space-5) 48px; }
.topbar { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-3) 0 var(--space-4); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { width:104px; height:auto; background:var(--navy-950); border-radius:var(--radius-sm); padding:5px 9px; display:block; }
.brand-title { font-weight:700; font-size:1.05rem; line-height:1.2; }
.brand-sub { color:var(--ink-2); font-size:.78rem; }
.nav { display:flex; gap:var(--space-1); padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.nav a { padding:6px 16px; border-radius:999px; color:var(--ink-2); font-weight:600; font-size:.88rem; }
.nav a:hover { color:var(--ink); }
.nav a.on { background:var(--accent); color:#fff; }
.actions { margin-left:auto; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.actions form { margin:0; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin:var(--space-2) 0 var(--space-4); flex-wrap:wrap; }
.page-head h1 { font-size:1.55rem; font-weight:750; letter-spacing:-.01em; }
.page-head p { margin:2px 0 0; color:var(--ink-2); font-size:.9rem; }

/* ---------- controls ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:8px 14px;
  border:1px solid var(--btn-border); border-radius:var(--radius-sm); background:var(--btn-bg); color:var(--btn-fg); font-weight:650; font-size:.88rem; white-space:nowrap; }
.btn:hover { filter:brightness(1.12); }
.btn.primary { border-color:transparent; background:var(--accent); color:#fff; }
.btn.danger { border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); background:transparent; color:color-mix(in srgb, var(--danger) 70%, var(--ink)); }
.btn.quiet { background:transparent; }
.btn.small { min-height:30px; padding:4px 10px; font-size:.8rem; }
.icon-btn { width:38px; padding:0; }
label { display:block; margin:0 0 6px; color:var(--ink-2); font-size:.8rem; font-weight:500; }
input, select, textarea { width:100%; min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input-bg); color:var(--ink); }
textarea { min-height:76px; resize:vertical; display:block; }
input[type=date] { color-scheme:inherit; }
.errorlist { margin:4px 0 0; padding:0; list-style:none; color:#fca5a5; font-size:.8rem; }
[data-theme="light"] .errorlist { color:#b42318; }

/* ---------- cards, stats ---------- */
.card { background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow); }
.card h2 { font-size:1rem; margin-bottom:var(--space-3); }
.card-note { margin:-6px 0 var(--space-4); color:var(--ink-2); font-size:.82rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--space-3); margin-bottom:var(--space-4); }
.stat { padding:var(--space-4) var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card-bg); }
.stat-label { color:var(--ink-2); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
.stat-value { margin-top:6px; font-size:1.9rem; font-weight:750; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-note { margin-top:4px; color:var(--ink-2); font-size:.78rem; }
.cols-2 { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:var(--space-4); align-items:start; }

/* ---------- tables ---------- */
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card-bg); }
table { width:100%; border-collapse:collapse; }
th, td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--th-bg); color:var(--ink-2); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; position:sticky; top:0; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--row-hover); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.muted { color:var(--ink-2); }
.empty { padding:28px; text-align:center; color:var(--ink-2); }
.name-link { font-weight:650; }
.name-link:hover { color:var(--link); }

/* ---------- tags ---------- */
.tag { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:.76rem; font-weight:600; white-space:nowrap; }
.tag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--dot, var(--ink-2)); }
.tag.plain::before { display:none; }
[data-stage="lead"]             { --dot:#8aa0b2; }
[data-stage="qualified"]        { --dot:#287ed6; }
[data-stage="samples-sent"]     { --dot:#9b8bf0; }
[data-stage="loi-shared"]       { --dot:#2fb3a3; }
[data-stage="quotation-shared"] { --dot:#e0689a; }
[data-stage="proposal"]         { --dot:#f59e0b; }
[data-stage="negotiation"]      { --dot:#f97316; }
[data-stage="won"]              { --dot:#22c55e; }
[data-stage="lost"]             { --dot:#d42020; }

/* ---------- inline dropdown pills (customer table) ---------- */
.pill-wrap { position:relative; display:inline-flex; align-items:center; }
.pill-wrap::before { content:""; position:absolute; left:11px; width:8px; height:8px; border-radius:50%; background:var(--dot, var(--ink-2)); pointer-events:none; }
.pill-wrap.plain::before { display:none; }
.pill-select { width:auto; min-height:30px; padding:3px 26px 3px 28px; border-radius:999px; background-color:var(--surface-2); font-size:.78rem; font-weight:600; cursor:pointer; }
.pill-wrap.plain .pill-select { padding-left:12px; }
.pill-select:hover { border-color:var(--accent); }
.pill-wrap.saving { opacity:.55; pointer-events:none; }
.pill-wrap.saved .pill-select { border-color:var(--success); }

/* ---------- filters ---------- */
.filters { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-4); }
.filters input[type=search] { max-width:320px; }
.filters select { max-width:200px; }

/* ---------- stage chart (single series, horizontal bars) ---------- */
.chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); }
.bars { display:grid; gap:10px; }
.bar-row { display:grid; grid-template-columns:130px minmax(0, 1fr) 34px; align-items:center; gap:var(--space-3); font-size:.85rem; }
.bar-label { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { height:14px; border-radius:7px; background:color-mix(in srgb, var(--ink-2) 14%, transparent); position:relative; }
.bar-fill { position:absolute; inset:0 auto 0 0; min-width:0; border-radius:0 4px 4px 0; background:var(--accent); transition:width .35s ease; }
.bar-row[data-kind="won"] .bar-fill { background:var(--success); }
.bar-row[data-kind="lost"] .bar-fill { background:var(--danger); }
.bar-row[data-kind="none"] .bar-fill { background:var(--ink-2); }
.bar-count { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.bar-row:hover .bar-fill { filter:brightness(1.15); }
.bar-row:hover .bar-track { outline:1px solid var(--line); }
.chart-table { display:none; }
.chart-table.show { display:block; }
.bars.hide { display:none; }

/* ---------- pipeline board ---------- */
.board { display:flex; gap:var(--space-3); overflow-x:auto; align-items:flex-start; padding-bottom:var(--space-4); }
.col { flex:0 0 272px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--line); border-radius:var(--radius-md); padding:10px; }
.col-head { display:flex; align-items:center; justify-content:space-between; margin:2px 4px 10px; }
.col-count { color:var(--ink-2); font-size:.8rem; font-variant-numeric:tabular-nums; }
.cards { min-height:44px; }
.col.over { outline:2px dashed var(--accent); outline-offset:2px; }
.kcard { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; cursor:grab; }
.kcard:hover { border-color:var(--accent); }
.kcard.dragging { opacity:.45; }
.kcard b { display:block; margin-bottom:3px; }
.kcard small { color:var(--ink-2); display:block; }
.kcard .tag { margin-top:8px; }

/* ---------- forms / detail ---------- */
.grid-2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-4); align-items:start; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.fields .wide { grid-column:1 / -1; }
.section-title { margin:var(--space-5) 0 var(--space-3); color:var(--ink-2); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; display:flex; align-items:center; gap:10px; }
.section-title::after { content:""; flex:1; height:1px; background:var(--line); }
.inline-form { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1.4fr auto; gap:var(--space-2); margin-top:var(--space-3); }
.note { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; }
.note-text { white-space:pre-wrap; }
.note-meta { margin-top:6px; color:var(--ink-2); font-size:.76rem; display:flex; align-items:center; gap:10px; white-space:normal; }
.note-meta form { display:inline; }
.back { color:var(--ink-2); font-size:.85rem; }
.back:hover { color:var(--ink); }
.contact-row { display:flex; justify-content:space-between; gap:var(--space-3); padding:10px 0; border-bottom:1px solid var(--line); }
.contact-row:last-child { border-bottom:0; }
.row-actions { display:flex; gap:6px; align-items:center; }

/* ---------- business card photos ---------- */
.card-slots { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.card-slot { display:grid; gap:8px; align-content:start; }
.card-slot-title { color:var(--ink-2); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.card-thumb { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
.card-thumb.small { width:150px; aspect-ratio:16/10; }
.card-thumb:hover { border-color:var(--accent); }
.card-drop { margin:0; }
.card-drop-label { display:grid; place-items:center; gap:2px; aspect-ratio:16/10; border:1px dashed var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--surface-2) 40%, transparent); color:var(--ink-2); cursor:pointer; font-size:.85rem; margin:0; text-align:center; }
.card-drop-label:hover { border-color:var(--accent); color:var(--ink); }
.card-drop-plus { font-size:1.6rem; line-height:1; }
.replace-form label.btn { margin:0; cursor:pointer; }
.review-row { padding:12px 0; border-bottom:1px solid var(--line); display:grid; gap:6px; }
.review-row:last-of-type { border-bottom:0; }
.review-row .check { display:flex; align-items:center; gap:8px; margin:0; color:var(--ink); font-size:.9rem; font-weight:600; }
.review-row input[type=checkbox] { width:auto; min-height:0; }
.review-row .now { font-size:.78rem; }

/* ---------- messages ---------- */
.msg { padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:var(--space-2); border:1px solid color-mix(in srgb, var(--success) 40%, var(--line)); background:color-mix(in srgb, var(--success) 12%, var(--surface)); font-size:.88rem; }
.msg.warning { border-color:color-mix(in srgb, var(--amber-500) 45%, var(--line)); background:color-mix(in srgb, var(--amber-500) 12%, var(--surface)); }
.msg.error { border-color:color-mix(in srgb, var(--danger) 50%, var(--line)); background:color-mix(in srgb, var(--danger) 14%, var(--surface)); }

@media (max-width:900px) {
  .cols-2, .grid-2 { grid-template-columns:1fr; }
  .shell { padding:var(--space-3) var(--space-3) 40px; }
  .inline-form { grid-template-columns:1fr 1fr; }
  .bar-row { grid-template-columns:100px minmax(0,1fr) 28px; }
}
@media (prefers-reduced-motion:reduce) { .bar-fill { transition:none; } }