/* CanAlt CRM — minimalistic ultra-modern design system
 *
 * Refreshed 2026-05-24 for a Linear/Stripe/Notion-feel:
 *   - Pure off-white surface, near-black text, monochrome with brand accents
 *   - Borders quieter (1px hairlines), shadows almost invisible at rest
 *   - Lots of whitespace, tighter typography, subtler colour use
 *   - Brand colours (navy #12334B, red #9A3324, teal #215157) reserved
 *     for emphasis only — surfaces stay neutral
 *   - All existing class names preserved so no page breaks
 */

/* ── Typography ────────────────────────────────────────────────── */

@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayLight.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayRoman.ttf')      format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayMedium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayBold.ttf')       format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('/static/fonts/NeueHaasDisplayBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  /* surface scale — neutral, almost-monochrome */
  --bg:        #FAFAF9;   /* page background */
  --surface:   #FFFFFF;   /* cards, sidebars, dialogs */
  --surface-2: #F4F4F2;   /* subdued surface — toolbar, hover */
  --surface-3: #ECECEA;   /* dividers in grids */
  --line:      #E8E6E1;   /* hairline borders */
  --line-soft: #F0EEEA;   /* even quieter dividers in long lists */

  /* text scale */
  --ink:       #0F1115;   /* primary text */
  --ink-dim:   #4B4F55;   /* secondary */
  --ink-mute:  #7C8088;   /* tertiary / labels */
  --ink-faint: #9CA0A8;   /* placeholder, microcopy */

  /* brand accents — used as accent only, never as a surface */
  --navy:      #12334B;
  --navy-h:    #0E2A3F;
  --red:       #9A3324;
  --red-h:     #7E2A1E;
  --teal:      #215157;

  /* Brand tokens in var() form — mirror the Tailwind `canalt-*` color
     classes (defined in base.html) so templates that write
     `var(--canalt-…)` render identically to those using the
     `text-canalt-…` / `border-canalt-…` utility classes. These custom
     properties were previously undefined, so ~118 var() usages across 25
     templates silently fell back to inherited/initial values (dropped
     navy emphasis, currentColor hairlines, transparent cream tints). */
  --canalt-navy:      #12334B;  /* = text-canalt-navy  */
  --canalt-line:      #E8E2D7;  /* = border-canalt-line */
  --canalt-paper:     #F7F4EE;  /* = bg-canalt-paper   */
  --canalt-charcoal:  #595959;  /* = text-canalt-charcoal */
  --canalt-sand-soft: #FBF9F4;  /* soft warm cream highlight (chips, tints) */

  /* semantic — desaturated, more refined than the old neon */
  --ok:        #047A52;
  --ok-bg:     #EAF6F1;
  --warn:      #A6620A;
  --warn-bg:   #FDF4E3;
  --danger:    #B23838;
  --danger-bg: #FBEDED;
  --info:      #2864A5;
  --info-bg:   #ECF2F9;

  --radius:    8px;
  --radius-sm: 6px;
  --shadow-1:  0 1px 2px rgba(15,17,21,0.04);
  --shadow-2:  0 4px 16px rgba(15,17,21,0.06), 0 1px 2px rgba(15,17,21,0.03);
  --duration:  140ms;
}

html { font-feature-settings: "cv11", "ss01"; }
body {
  color: var(--ink);
  font-family: 'Neue Haas Grotesk Display', 'Inter', Helvetica, system-ui, sans-serif;
  background: var(--bg);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — tight tracking, modern weight */
.display {
  font-family: 'Neue Haas Grotesk Display', 'Inter', Helvetica, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* Microcopy / labels */
.label {
  font-family: 'Inter', 'Neue Haas Grotesk Display', Helvetica, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Tags — smaller, quieter, monochrome by default */
.tag {
  font-family: 'Inter', 'Neue Haas Grotesk Display', Helvetica, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0.12rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-block;
  color: var(--ink-dim);
  line-height: 1.55;
}
.tag-ok      { background: var(--ok-bg);     color: var(--ok);     }
.tag-warn    { background: var(--warn-bg);   color: var(--warn);   }
.tag-danger  { background: var(--danger-bg); color: var(--danger); }
.tag-info    { background: var(--info-bg);   color: var(--info);   }
.tag-muted   { background: var(--surface-2); color: var(--ink-mute); }
.tag-org     { background: #ECF2F9; color: #1F4F8B; }
.tag-contact { background: #EAF6F1; color: #056647; }
.tag-order   { background: #F1ECFB; color: #5D45A1; }
.tag-invoice { background: #FDF4E3; color: #8A560B; }
.tag-task    { background: #ECF2F9; color: #2864A5; }

/* Status helpers — keep names, refine palette */
.status-draft     { background: var(--surface-2); color: var(--ink-mute); }
.status-received  { background: #ECF2F9; color: #1F4F8B; }
.status-in_lab    { background: #EDE9FE; color: #4C3796; }
.status-reported  { background: var(--ok-bg);     color: var(--ok); }
.status-closed    { background: var(--surface-2); color: var(--ink-dim); }
.status-cancelled { background: var(--danger-bg); color: var(--danger); }
.status-sent      { background: #ECF2F9; color: #1F4F8B; }
.status-partial   { background: var(--warn-bg);   color: var(--warn); }
.status-paid      { background: var(--ok-bg);     color: var(--ok); }
.status-overdue   { background: var(--danger-bg); color: var(--danger); }
.status-void      { background: var(--surface-2); color: var(--ink-mute); }
.status-prospect  { background: var(--warn-bg);   color: var(--warn); }
.status-active    { background: var(--ok-bg);     color: var(--ok); }
.status-dormant   { background: var(--surface-2); color: var(--ink-mute); }
.status-churned   { background: var(--danger-bg); color: var(--danger); }

/* Links */
a.subtle {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration), color var(--duration);
}
a.subtle:hover { border-bottom-color: var(--navy); color: var(--navy); }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration);
}
.card.hover\:border-canalt-navy:hover,
a.card:hover {
  box-shadow: var(--shadow-2);
  border-color: #D6D2CC;
  transform: translateY(-1px);
}

/* ── Stat tiles — quieter accent rail, more typographic ───────── */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--duration), border-color var(--duration);
}
.stat::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--ink);
  opacity: .85;
  border-radius: 2px;
}
.stat:hover { box-shadow: var(--shadow-2); border-color: #D6D2CC; }

.stat.accent::before     { background: #C44A4A; }
.stat.success::before    { background: #1B9469; }
.stat.warn::before       { background: #C58018; }
.stat.info::before       { background: #2E73C2; }
.stat.marketing::before  { background: #6E59B8; }
.stat.sales::before      { background: #C58018; }
.stat.services::before   { background: #1B9469; }

.stat .stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.stat .stat-value {
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0.35rem;
}
.stat .stat-sub { font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.3rem; }

/* ── Cloud hero — neutral surface, small coloured chip ────────── */
.cloud-hero {
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Use a tiny accent strip per cloud rather than gradient washes */
.cloud-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.cloud-hero.marketing::before { background: #6E59B8; }
.cloud-hero.sales::before     { background: #C58018; }
.cloud-hero.services::before  { background: #1B9469; }
.cloud-hero.analytics::before { background: #2864A5; }

.cloud-hero .cloud-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.cloud-hero.marketing .cloud-label { color: #6E59B8; }
.cloud-hero.sales     .cloud-label { color: #C58018; }
.cloud-hero.services  .cloud-label { color: #1B9469; }
.cloud-hero.analytics .cloud-label { color: #2864A5; }

/* Lifecycle stage pills — same refined palette */
.lc {
  font-size: 0.66rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-weight: 500;
  display: inline-block;
  line-height: 1.5;
  border: 0;
}
.lc-lead     { background: #F1ECFB; color: #5D45A1; }
.lc-prospect { background: var(--warn-bg);   color: var(--warn); }
.lc-active   { background: var(--ok-bg);     color: var(--ok); }
.lc-retained { background: #ECF2F9; color: #1F4F8B; }
.lc-dormant  { background: var(--surface-2); color: var(--ink-mute); }
.lc-churned  { background: var(--danger-bg); color: var(--danger); }

/* ── Buttons — calmer shadows, tighter weight ───────────────── */
.btn-primary, .btn-accent, .btn-ghost {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.1;
  transition: background var(--duration), color var(--duration),
              border-color var(--duration), box-shadow var(--duration), transform 60ms;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover  { background: #1A1D22; }
.btn-primary:active { transform: translateY(1px); }

.btn-accent  { background: var(--red); color: #fff; }
.btn-accent:hover   { background: var(--red-h); }
.btn-accent:active  { transform: translateY(1px); }

.btn-ghost   { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover    { background: var(--surface-2); border-color: #D6D2CC; }
.btn-ghost:active   { transform: translateY(1px); }

/* ── Forms — clean, quiet, modern ──────────────────────────────
   Selector strategy: BLACKLIST the input types that need their own
   visual treatment (checkbox / radio / file / button-like / hidden /
   image / color / range) and apply the shared styling to everything
   else. This covers:
     · `text`, `email`, `tel`, `url`, `search`, `number`, `password`,
       `date`, `datetime-local`, `time`, `month`, `week`
     · inputs with NO `type=` attribute (HTML defaults to text, but a
       whitelist attribute selector misses these — the original bug)
   Previously this rule was a whitelist of 6 types; templates using
   `<input name="...">` (no type), `<input type="tel">`,
   `<input type="search">`, etc. fell through to browser defaults
   (often white-on-white) and rendered invisible. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]),
select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color var(--duration), box-shadow var(--duration), background var(--duration);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,17,21,0.08);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]):disabled,
select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-mute);
  cursor: not-allowed;
}

/* Safety net — guarantees any text-like input is visible against
   the page, even if a future template adds a type we haven't
   accounted for in the main rule (e.g. type="email" inside a
   third-party widget). Doesn't touch checkbox/radio/file/etc. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]) {
  color: var(--ink);
  background: var(--surface);
}
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* ── Tables — generous spacing, hairline dividers ─────────── */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
table.data td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--ink);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--surface-2); }
table.data tfoot td { border-top: 1px solid var(--line); font-weight: 500; }

/* Brand-icon container */
.test-icon { width: 56px; height: 56px; flex-shrink: 0; }
.test-icon img { width: 100%; height: 100%; display: block; }

/* ── Sidebar nav icons — same SVG mask system, inherit colour ─ */
.nav-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: contain;      mask-size: contain;
  opacity: .85;
}
.nav-icon-home     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.nav-icon-building { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M9 22v-4h6v4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M9 22v-4h6v4'/></svg>"); }
.nav-icon-users    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/></svg>"); }
.nav-icon-package  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/></svg>"); }
.nav-icon-kanban   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='5' height='14'/><rect x='10' y='3' width='5' height='18'/><rect x='17' y='3' width='4' height='10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='5' height='14'/><rect x='10' y='3' width='5' height='18'/><rect x='17' y='3' width='4' height='10'/></svg>"); }
.nav-icon-star     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><polygon points='12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5 12 2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><polygon points='12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5 12 2'/></svg>"); }
.nav-icon-invoice  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>"); }
.nav-icon-calendar { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
.nav-icon-mail     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 6l-10 7L2 6'/><rect x='2' y='4' width='20' height='16' rx='2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 6l-10 7L2 6'/><rect x='2' y='4' width='20' height='16' rx='2'/></svg>"); }
.nav-icon-check    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>"); }
.nav-icon-megaphone{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>"); }
.nav-icon-flask    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2v6L4 21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1L15 8V2'/><path d='M9 2h6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2v6L4 21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1L15 8V2'/><path d='M9 2h6'/></svg>"); }
.nav-icon-chart    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>"); }

.nav-icon-search   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>"); }
.nav-icon-upload   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>"); }
.nav-icon-image    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/></svg>"); }

/* ── Kanban — tighter, calmer ───────────────────────────────── */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.kanban-col-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  display: flex; justify-content: space-between;
}
.kanban-col-body { flex: 1; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; }
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  cursor: grab;
  transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration);
}
.kanban-card:hover { box-shadow: var(--shadow-2); border-color: #D6D2CC; }
.kanban-card.dragging { opacity: 0.5; transform: rotate(-1deg); }
.kanban-col.drag-over { background: var(--surface-2); }
.kanban-card .km-num    { font-family: 'Inter', monospace; font-size: 0.68rem; color: var(--ink-mute); letter-spacing: 0.06em; }
.kanban-card .km-name   { color: var(--ink); margin-top: 0.2rem; }
.kanban-card .km-amount { font-weight: 500; margin-top: 0.25rem; font-size: 0.8rem; }

/* ── Cookie banner ──────────────────────────────────────────── */
.consent-banner {
  position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: 0 12px 32px rgba(15,17,21,0.10);
  z-index: 100;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
}
.consent-banner h3 { font-weight: 500; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--ink); letter-spacing: -0.02em; }
.consent-banner .actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.consent-banner button { padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; border: 0; }
.consent-banner .accept-all { background: var(--ink); color: white; }
.consent-banner .essentials { background: transparent; color: var(--ink-mute); border: 1px solid var(--line); }

/* ── Scrollbars (Webkit) — quiet, modern ──────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(15,17,21,0.10);
  border-radius: 99px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15,17,21,0.20); }

/* ── Selection ─────────────────────────────────────────────── */
::selection { background: rgba(18,51,75,0.16); color: var(--ink); }

/* ── Sidebar (uses utility classes; override colours in base) ─ */
.nav-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: background var(--duration), color var(--duration);
  position: relative;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.active { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.nav-link.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px;
  background: var(--ink); border-radius: 2px;
}

/* ── Colour-coded nav groups (2026-06-06) ──────────────────────
   Each labelled group gets a coloured dot + uppercase label and a
   thin left rail in the group colour, so the sidebar reads as
   distinct, identifiable zones rather than one flat list. */
.nav-group-head {
  display: flex; align-items: center; gap: 7px;
  padding: 0.85rem 0.7rem 0.3rem;
}
.nav-group-dot {
  width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0;
}
.nav-group-label {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700;
}
.nav-group-railed {
  margin-left: 0.55rem;
  padding-left: 0.45rem;
  border-left: 2px solid color-mix(in srgb, var(--group-color) 22%, transparent);
}
/* Active item's left bar + tint pick up the group colour so you can
   tell which zone you're in even from the highlighted row. */
.nav-group-railed .nav-link.active::before { background: var(--group-color); }
.nav-group-railed .nav-link.active {
  background: color-mix(in srgb, var(--group-color) 9%, var(--surface-2));
  color: var(--ink);
}
.nav-group-railed .nav-link:hover {
  background: color-mix(in srgb, var(--group-color) 6%, var(--surface-2));
}
/* Fallback for engines without color-mix(): a neutral rail still
   groups the items visually. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .nav-group-railed { border-left-color: var(--line); }
  .nav-group-railed .nav-link.active { background: var(--surface-2); }
}

/* ── Top navigation bar (2026-06-06) ───────────────────────────
   Horizontal section tabs across the top with a drop-down ribbon
   per section. Replaces the left sidebar on >= md (the sidebar is
   kept only as the mobile drawer). Section colour flows in via the
   inline --group-color custom property on each trigger/menu. */
.topnav {
  position: sticky; top: 56px;          /* sits directly under the 56px header */
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topnav-inner {
  display: flex; align-items: stretch; gap: 1px;
  min-height: 46px; padding: 0 0.5rem;
  overflow: visible;                    /* let ribbons escape downward */
}
.topnav-link, .topnav-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 46px; padding: 0 0.75rem;
  font-size: 0.82rem; font-weight: 500; line-height: 1;
  color: var(--ink-dim); background: transparent;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration), background var(--duration), border-color var(--duration);
}
.topnav-link:hover, .topnav-trigger:hover { color: var(--ink); background: var(--surface-2); }
.topnav-link.active, .topnav-trigger.active {
  color: var(--ink);
  border-bottom-color: var(--group-color, var(--ink));
  background: color-mix(in srgb, var(--group-color, #888) 7%, transparent);
}
.topnav-trigger .tn-dot {
  width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0;
  background: var(--group-color, var(--ink));
}
.topnav-trigger .tn-caret {
  width: 11px; height: 11px; opacity: .45; flex-shrink: 0;
  transition: transform var(--duration);
}
.topnav-item { position: relative; display: flex; }
.topnav-item:hover .topnav-trigger .tn-caret,
.topnav-item.open .topnav-trigger .tn-caret { transform: rotate(180deg); }

/* drop-down ribbon panel */
.topnav-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--group-color, var(--ink));
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 32px rgba(15,17,21,0.14), 0 2px 6px rgba(15,17,21,0.05);
  padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 50;
}
.topnav-menu.tn-right { left: auto; right: 0; }
.topnav-item:hover > .topnav-menu,
.topnav-item:focus-within > .topnav-menu,
.topnav-item.open > .topnav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.topnav-menu-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--ink-dim); font-size: 0.85rem; white-space: nowrap;
  transition: background var(--duration), color var(--duration);
}
.topnav-menu-link:hover {
  background: color-mix(in srgb, var(--group-color, #888) 9%, var(--surface-2));
  color: var(--ink);
}
.topnav-menu-link.active {
  background: color-mix(in srgb, var(--group-color, #888) 13%, var(--surface-2));
  color: var(--ink); font-weight: 500;
}
/* right cluster: search shortcut + admin + system status */
.topnav-status {
  margin-left: auto; display: flex; align-items: center; gap: 0.6rem;
  padding-right: 0.35rem;
}
.topnav-search {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-dim); font-size: 0.76rem; cursor: pointer;
  transition: background var(--duration), border-color var(--duration);
}
.topnav-search:hover { background: var(--surface-3); border-color: #D6D2CC; }
.topnav-search kbd {
  font-size: 0.66rem; padding: 0 0.3rem; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-mute);
}
/* Wider "search bar" variant used beside the logo (there's room). */
.topnav-search-bar {
  min-width: 360px; justify-content: flex-start; border-radius: 8px;
  padding: 0.4rem 0.7rem;
}
.topnav-search-bar .topnav-search-ph { color: var(--ink-mute); font-weight: 400; }
.topnav-search-bar kbd { margin-left: auto; }
@media (max-width: 1000px) { .topnav-search-bar { min-width: 200px; } }
@media (max-width: 640px)  { .topnav-search-bar { min-width: 0; } }

/* ── Inline global search (header, beside the logo) ────────────── */
.gsearch { position: relative; display: flex; align-items: center; }
.gsearch-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); pointer-events: none; display: flex;
}
#gsearch-input {
  width: 400px; max-width: 46vw; height: 38px;
  padding: 0 0.6rem 0 30px;
  border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--surface-2); color: var(--ink);
  font-size: 0.85rem; outline: none;
  transition: background var(--duration), border-color var(--duration);
}
#gsearch-input::placeholder { color: var(--ink-mute); }
#gsearch-input:focus { background: var(--surface); border-color: #C9C4BC; }
.gsearch-go {
  height: 38px; padding: 0 0.95rem;
  border: 1px solid var(--ink); border-radius: 0 8px 8px 0;
  background: var(--ink); color: #fff; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.gsearch-go:hover { background: #000; }
.gsearch-results {
  position: absolute; top: 44px; left: 0; right: 0; min-width: 360px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15,17,21,0.16), 0 2px 6px rgba(15,17,21,0.05);
  max-height: 62vh; overflow-y: auto; z-index: 60; padding: 4px;
}
.gsearch-results[hidden] { display: none; }
.gsearch-sec {
  padding: 8px 10px 2px; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.gsearch-row {
  display: block; padding: 7px 10px; border-radius: 6px;
  text-decoration: none; color: var(--ink);
}
.gsearch-row:hover, .gsearch-row.active { background: var(--surface-2); }
.gsearch-row .t { font-size: 0.86rem; color: var(--ink); }
.gsearch-row .s { font-size: 0.74rem; color: var(--ink-mute); margin-top: 1px; }
.gsearch-empty { padding: 18px; text-align: center; color: var(--ink-mute); font-size: 0.82rem; }
@media (max-width: 760px) {
  #gsearch-input { width: 150px; }
  .gsearch-results { position: fixed; left: 8px; right: 8px; top: 56px; min-width: 0; }
}
.topnav-sys {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
@media (max-width: 1100px) { .topnav-sys { display: none; } }
@supports not (background: color-mix(in srgb, red, blue)) {
  .topnav-link.active, .topnav-trigger.active { background: var(--surface-2); }
  .topnav-menu-link:hover, .topnav-menu-link.active { background: var(--surface-2); }
}

/* ── Misc utility ──────────────────────────────────────────── */
.text-ok      { color: var(--ok); }
.text-danger  { color: var(--danger); }
.text-warn    { color: var(--warn); }
.text-info    { color: var(--info); }
.text-mute    { color: var(--ink-mute); }

hr, .divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.25rem 0;
}

kbd {
  font-family: 'Inter', 'Neue Haas Grotesk Display', system-ui, sans-serif;
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-dim);
}

code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.82em;
  background: var(--surface-2);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

/* ── Mobile responsiveness pass ─────────────────────────────────────
   The CRM is desktop-first but needs to remain usable on phones.
   Below the md breakpoint (768px):
     - Tables scroll horizontally instead of breaking layout
     - Cards get tighter padding
     - Page-header H1s shrink to fit
     - Folder-card grids stack to single column
     - Stat strips collapse to 2-column on phones
     - Sidebar drawer is full-screen instead of 240px
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 14px; }

  /* Display H1s at the top of every page — shrink */
  h1.display          { font-size: 1.5rem !important; }
  h2.display          { font-size: 1.2rem !important; }

  /* Cards — tighter padding, less corner */
  .card               { border-radius: var(--radius-sm); }
  .card.p-6, .card.p-5  { padding: 1rem !important; }

  /* Stats — 2-up, smaller numbers */
  .stat               { padding: 0.7rem 0.9rem; }
  .stat .stat-value   { font-size: 1.4rem; }
  .stat .stat-label   { font-size: 0.6rem; }
  .stat .stat-sub     { font-size: 0.68rem; }

  /* Tables — wrap in horizontal scroll, smaller text */
  table.data          { font-size: 0.82rem; }
  table.data th, table.data td { padding: 0.55rem 0.6rem; }

  /* Wrap every .card containing a wide table so it scrolls inside */
  .card > table.data,
  .card > div > table.data {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Page header rows that put title + action buttons on same line —
     stack vertically on phones for breathing room. */
  .flex.items-end.justify-between { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  /* Sidebar drawer fills the screen so menu items are tap-friendly */
  aside#sidebar       { width: 84vw !important; }

  /* Top utility bar shows fewer chips — hide "Dashboards" / labels on phones,
     keep the icons. */
  header .hidden\:md\:inline-flex,
  header .hidden\:md\:inline,
  header .hidden\:lg\:inline { display: none !important; }

  /* Buttons — slightly bigger tap target */
  .btn-primary, .btn-accent, .btn-ghost { padding: 0.55rem 0.85rem; }
}

/* Very small phones */
@media (max-width: 380px) {
  h1.display { font-size: 1.3rem !important; }
  .stat .stat-value { font-size: 1.2rem; }
}