/* ==========================================================================
   CPG Sales CRM design system — theme layer (added 2026-09-29)
   Loaded AFTER the <style> block in index.html, so it only re-points the app's
   existing variables (--bg, --ink, --accent, ...) at the new design system and
   restyles a few shapes. Nothing in index.html's own CSS was changed.
   To undo: delete the two <link> lines marked "design system" in index.html.
   Full spec: design-system/README.md and design-system/tokens.json.
   ========================================================================== */

:root{
  /* Surfaces and text */
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8f9fa; --surface-3:#eeeeee;
  --border:#e8e8e8; --ink:#202020; --ink-muted:#646464; --ink-faint:#737373;
  /* Primary action: near-black, never violet */
  --accent:#202020; --accent-ink:#ffffff; --accent-soft:#eeeeee; --accent-hover:#090c1d;
  --link:#006fcc; --focus:#006fcc;
  /* Shape and depth: flat first, pills everywhere interactive */
  --radius:12px; --radius-sm:9px; --radius-lg:16px; --radius-pill:9999px;
  --shadow: rgba(13,21,48,0.04) 0px 4px 4px 0px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px;
  --shadow-lg: rgba(18,43,165,0.04) 0px 1px 1px -0.5px, rgba(18,43,165,0.04) 0px 3px 3px -1.5px, rgba(18,43,165,0.04) 0px 6px 6px -3px, rgba(18,43,165,0.04) 0px 12px 12px -6px, rgba(0,0,0,0.08) 0px 1px 3px 0px;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #006fcc;
  /* Type */
  --font-display:'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --font-ui:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Sometype Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* Status tones (pills, funnel bars, dashboard dots) */
  --info:#0066bb; --info-soft:#e6f2ff; --teal:#0a7a68; --teal-soft:#dff7f2;
  --good:#0b7a4f; --good-soft:#dcf8ec; --warn:#8a5700; --warn-soft:#faf0da;
  --bad:#b8128f; --bad-soft:#fde8f7; --lost:#646464; --lost-soft:#eeeeee;
  --on-bad:#ffffff; --on-good:#ffffff; --hover-wash:rgba(0,0,0,0.04);
  --gradient-rainbow: conic-gradient(from var(--glow-angle, 90deg), rgb(125,91,231) 19%, rgb(188,63,218) 28%, rgb(250,36,206) 37%, rgb(251,73,165) 45%, rgb(252,109,123) 52%, rgb(253,132,97) 55%, rgb(253,154,70) 58%, rgb(246,135,198) 65%, rgb(163,160,224) 80%, rgb(79,185,250) 95%, rgb(0,145,255) 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111111; --surface:#161616; --surface-2:#1f1f1f; --surface-3:#262626;
    --border:#2a2a2a; --ink:#f8f9fa; --ink-muted:#b3b3b3; --ink-faint:#8a8a8a;
    --accent:#f8f9fa; --accent-ink:#202020; --accent-soft:#262626; --accent-hover:#ffffff;
    --link:#4fb9fa; --focus:#4fb9fa;
    --shadow: rgba(0,0,0,0.4) 0px 4px 4px 0px;
    --shadow-lg: rgba(0,0,0,0.6) 0px 1px 3px 0px, rgba(0,0,0,0.5) 0px 12px 28px -6px;
    --focus-ring: 0 0 0 2px #111111, 0 0 0 4px #4fb9fa;
    --info:#4fb9fa; --info-soft:#0f2a3f; --teal:#3fd9bd; --teal-soft:#0f2e29;
    --good:#6ee7b7; --good-soft:#0f2e22; --warn:#d9a441; --warn-soft:#392e12;
    --bad:#ff6ad5; --bad-soft:#3a1030; --lost:#b3b3b3; --lost-soft:#262626;
    --on-bad:#090c1d; --on-good:#090c1d; --hover-wash:rgba(255,255,255,0.06);
  }
}
:root[data-theme="dark"]{
  --bg:#111111; --surface:#161616; --surface-2:#1f1f1f; --surface-3:#262626;
  --border:#2a2a2a; --ink:#f8f9fa; --ink-muted:#b3b3b3; --ink-faint:#8a8a8a;
  --accent:#f8f9fa; --accent-ink:#202020; --accent-soft:#262626; --accent-hover:#ffffff;
  --link:#4fb9fa; --focus:#4fb9fa;
  --shadow: rgba(0,0,0,0.4) 0px 4px 4px 0px;
  --shadow-lg: rgba(0,0,0,0.6) 0px 1px 3px 0px, rgba(0,0,0,0.5) 0px 12px 28px -6px;
  --focus-ring: 0 0 0 2px #111111, 0 0 0 4px #4fb9fa;
  --info:#4fb9fa; --info-soft:#0f2a3f; --teal:#3fd9bd; --teal-soft:#0f2e29;
  --good:#6ee7b7; --good-soft:#0f2e22; --warn:#d9a441; --warn-soft:#392e12;
  --bad:#ff6ad5; --bad-soft:#3a1030; --lost:#b3b3b3; --lost-soft:#262626;
  --on-bad:#090c1d; --on-good:#090c1d; --hover-wash:rgba(255,255,255,0.06);
}

body{letter-spacing:-0.01em; font-feature-settings:"calt" 0;}

/* Headings: heavy and tightly tracked */
h1,h2,h3{font-weight:700; letter-spacing:-0.03em;}
.topbar-title{font-size:22px; font-weight:800; letter-spacing:-0.035em;}
.auth-title{font-size:24px; font-weight:800; letter-spacing:-0.035em;}
.brand-text b{font-weight:800; letter-spacing:-0.02em;}

/* Buttons and nav: full pills, bold 14px-style labels */
.btn{border-radius:var(--radius-pill); padding:8px 16px; font-family:var(--font-display); font-weight:700;}
.btn.sm{padding:5px 12px;}
.btn.primary:hover{opacity:.88; background:var(--accent); border-color:var(--accent);}
.nav-item{border-radius:var(--radius-pill);}
.nav-item.active{font-weight:700;}
.seg{border-radius:var(--radius-pill);}
.seg button{font-family:var(--font-display); font-weight:700;}
#sidebarToggle{border-radius:var(--radius-pill);}

/* Filters are pills; form inputs keep the 9px input radius */
select.pill, input.pill, .ms-dd>summary{border-radius:var(--radius-pill); padding-left:14px; padding-right:14px;}
.fu-ctrl input.pill{padding:5px 10px;}
label.f input, label.f select, label.f textarea{border-radius:var(--radius-sm); background:var(--surface);}
.role-select{border-radius:var(--radius-pill);}

/* Tags, chips, stage pickers */
.pill-tag, .chip, .nav-badge, .notif-count{border-radius:var(--radius-pill);}

/* KPIs: big bold numbers, mono uppercase labels */
.kpi{padding:20px 22px;}
.kpi .value{font-size:32px; font-weight:800; letter-spacing:-0.04em; line-height:1.1;}
.kpi .label{
  font-family:var(--font-mono); font-weight:500; letter-spacing:.07em;
}

/* Focus: solid blue ring instead of the old accent outline */
.btn:focus-visible, .nav-item:focus-visible,
select.pill:focus-visible, input.pill:focus-visible, .ms-dd>summary:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
select.pill:focus, input.pill:focus, textarea:focus{border-color:var(--focus);}
label.f input:focus, label.f select:focus, label.f textarea:focus{border-color:var(--focus); outline:2px solid var(--focus); outline-offset:1px;}
input[type=checkbox]{accent-color:var(--ink);}

/* Surfaces */
.modal{border-radius:var(--radius-lg);}
.board-col{border-radius:var(--radius);}
.board-card{border-radius:var(--radius);}
.toast{border-radius:var(--radius-pill);}
.readonly-banner, .auth-error, .auth-ok{border-radius:var(--radius-sm);}
.auth-card{border-radius:var(--radius-lg);}
.auth-foot button{color:var(--link);}

/* ---- Round 2 (2026-09-29) ---------------------------------------------- */

/* Logo mark: a black circle instead of the navy square */
.brand-mark{border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:800;}

/* Filters that are switched on turn blue so they stand out */
.ms-dd>summary.on{background:var(--info-soft); border-color:var(--info); color:var(--info);}
.ms-dd>summary.on::after{border-right-color:var(--info); border-bottom-color:var(--info);}

/* Badges on colour: text colour that stays readable in both themes */
.nav-badge, .notif-count{color:var(--on-bad);}
.task-check.done{color:var(--on-good);}

/* Coloured initials circles (same person, same colour) */
.avatar.av-1{background:#6647f0; color:#ffffff;}
.avatar.av-2{background:#0091ff; color:#090c1d;}
.avatar.av-3{background:#16c0a4; color:#090c1d;}
.avatar.av-4{background:#6ee7b7; color:#090c1d;}
.avatar.av-5{background:var(--surface-3); color:var(--ink);}
.avatar.sm{width:22px; height:22px; font-size:9.5px; letter-spacing:.02em; box-shadow:0 0 0 2px var(--surface);}
.who .avatar{font-size:10px; letter-spacing:.02em;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .avatar.av-1{background:#9d8bff; color:#111111;} }
:root[data-theme="dark"] .avatar.av-1{background:#9d8bff; color:#111111;}

/* Tables: mono uppercase headers, a little more room, soft hover */
th{font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.07em; color:var(--ink-muted);}
td{padding-top:13px; padding-bottom:13px;}
tbody tr:hover{background:var(--hover-wash);}
@media (max-width:520px){ td{padding-top:10px; padding-bottom:10px;} }

/* Pipeline chart: round-ended bars */
.funnel-track, .funnel-fill{border-radius:var(--radius-pill);}

/* Dashboard cards: the status dot replaces the old coloured stripe */
.card-head h3{font-size:16px;}

/* Login: bold headline and the rotating rainbow border on the Microsoft button
   (the one animated element in the whole app). Stops for reduced motion. */
.auth-title{font-size:30px; line-height:1.1; margin-bottom:8px;}
@property --glow-angle{syntax:'<angle>'; inherits:false; initial-value:90deg;}
#msSignInBtn{
  border:2px solid transparent;
  background:linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-rainbow) border-box;
  animation:cpg-glow 4s linear infinite;
}
#msSignInBtn:hover{background:linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--gradient-rainbow) border-box;}
@keyframes cpg-glow{to{--glow-angle:450deg;}}
@media (prefers-reduced-motion: reduce){ #msSignInBtn{animation:none;} }

/* Phones: keep the filter row tidy with the rounder, bolder controls */
@media (max-width:520px){
  .btn{padding-left:14px; padding-right:14px;}
  select.pill, input.pill, .ms-dd>summary{padding-left:12px; padding-right:12px;}
  .topbar-title{font-size:20px;}
  .kpi .value{font-size:26px;}
}

/* ---- Round 3 (2026-09-30): calmer structure --------------------------------
   Section headings are plain sentence-case text, not mono uppercase labels: a
   heading should read as a heading. Mono stays for table headers and KPI labels. */
section.block > h2, section.block .collapse > summary > h2, .task-group > h2, .subform-title{
  font-family:var(--font-ui); font-size:15px; font-weight:650; letter-spacing:-0.01em;
  text-transform:none; color:var(--ink);
}
.section-count{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 7px;
  margin-left:8px; border-radius:var(--radius-pill); background:var(--surface-3); color:var(--ink-muted); font-size:12px; font-weight:600; vertical-align:1px;}
.section-help{font-size:13px; color:var(--ink-muted); margin:-4px 0 10px;}

/* ---- Touch screens (2026-11-10, UI review) ---------------------------------- */
@media (pointer:coarse){
  /* iPhone Safari zooms the whole page into any field under 16px. !important beats
     the inline font sizes scattered through index.html. */
  input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px !important;}
  /* Thumb-size targets (~44px) without drawing bigger icons: an invisible ring
     around each one, kept narrower sideways so Call and WhatsApp don't overlap. */
  .contact-link, .icon-btn{position:relative;}
  .contact-link{width:28px; height:28px;}
  .contact-link + .contact-link{margin-left:8px;}
  .contact-link::after{content:''; position:absolute; inset:-8px -4px;}
  .icon-btn::after{content:''; position:absolute; inset:-8px;}
  input[type=checkbox]{width:22px; height:22px;}
}

/* Phone setting "Reduce motion": no animations or transitions anywhere. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---- Leads list as cards on phones (2026-11-10) -----------------------------
   The table scrolled sideways on a phone and cut off Status. Under 640px each row
   becomes a card: checkbox, name and status pill on top, then the chosen columns
   (View > Columns) as small labelled pairs, two per line. Same HTML as desktop. */
@media (max-width:640px){
  .leads-table thead{display:none;}
  .leads-table, .leads-table tbody{display:block;}
  .leads-table tr{display:flex; flex-wrap:wrap; align-items:flex-start; padding:14px 14px 12px; border-bottom:1px solid var(--border);}
  .leads-table tr:last-child{border-bottom:none;}
  .leads-table td{border:none; padding:0;}
  .leads-table td[data-col="select"]{flex:0 0 36px;}
  .leads-table td[data-col="lead"]{flex:1 1 0; min-width:0;}
  .leads-table td[data-col="stage"]{flex:none; max-width:50%; margin-left:8px;}
  /* An invisible full-width break, so the labelled pairs always start on a new line
     below the name instead of squeezing in beside it. */
  .leads-table tr::after{content:''; flex-basis:100%; order:1;}
  .leads-table td[data-label]{order:2; flex:0 0 50%; min-width:0; margin-top:10px; padding-right:8px; font-size:13px; text-align:left; white-space:normal;}
  .leads-table td[data-label]::before{content:attr(data-label); display:block; margin-bottom:2px; font-size:11.5px; color:var(--ink-muted);}
  .leads-table .note-under-name{max-width:none;}
}