/**
 * ClientFinder Design System
 * Charcoal + Teal — Operative. Dense. Relentless.
 *
 * One file. One source of truth. No conflicts.
 * Fonts: Titillium Web (display) + Chivo (body/data)
 * Palette: OKLCH cool charcoal base, electric teal accent
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Palette primitives (OKLCH) --- */
  --_bg:         oklch(0.12 0.006 220);   /* page background */
  --_surface:    oklch(0.16 0.007 220);   /* sidebar, panels */
  --_elevated:   oklch(0.20 0.008 220);   /* dropdowns, modals, cards */
  --_border:     oklch(0.24 0.006 220);   /* default border */
  --_border-em:  oklch(0.32 0.008 220);   /* hover/focus border */

  --_amber:      oklch(0.74 0.18 195);    /* primary accent (teal) */
  --_amber-lo:   oklch(0.64 0.16 195);    /* pressed/active (darker teal) */
  --_amber-bg:   oklch(0.17 0.07 195);    /* teal tint background */

  --_warm:       oklch(0.82 0.17 88);     /* WARM score badge — actual amber-yellow */
  --_warm-bg:    oklch(0.19 0.06 88);     /* warm tint bg */

  --_text:       oklch(0.95 0.006 220);   /* primary text */
  --_text2:      oklch(0.62 0.006 220);   /* secondary text */
  --_text3:      oklch(0.42 0.005 220);   /* muted/tertiary */

  --_hot:        oklch(0.65 0.22 28);    /* HOT score / danger */
  --_hot-bg:     oklch(0.20 0.06 28);    /* hot tint bg */
  --_mild:       oklch(0.70 0.14 155);   /* MILD score / success */
  --_mild-bg:    oklch(0.20 0.05 155);   /* mild tint bg */
  --_cold:       oklch(0.42 0.015 220);    /* COLD score / disabled */

  /* --- Semantic aliases (design-system.css naming) --- */
  --color-bg-primary:     var(--_bg);
  --color-bg-secondary:   var(--_surface);
  --color-bg-tertiary:    oklch(0.18 0.007 220);
  --color-bg-elevated:    var(--_elevated);
  --color-text-primary:   var(--_text);
  --color-text-secondary: var(--_text2);
  --color-text-tertiary:  var(--_text3);
  --color-text-muted:     oklch(0.32 0.004 220);
  --color-border:         var(--_border);
  --color-border-hover:   var(--_border-em);
  --color-border-focus:   var(--_amber);
  --color-primary-400:    oklch(0.82 0.16 195);
  --color-primary-500:    var(--_amber);
  --color-primary-600:    var(--_amber-lo);
  --color-primary-700:    oklch(0.56 0.14 195);
  --color-success:        var(--_mild);
  --color-warning:        var(--_amber);
  --color-danger:         var(--_hot);
  --color-gray-600:       oklch(0.40 0.005 220);
  --color-gray-700:       oklch(0.32 0.004 220);

  /* --- Semantic aliases (leads-page.css naming — keeps those components working) --- */
  --bg-primary:       var(--_bg);
  --bg-secondary:     var(--_surface);
  --bg-tertiary:      oklch(0.18 0.007 220);
  --bg-elevated:      var(--_elevated);
  --text-primary:     var(--_text);
  --text-secondary:   var(--_text2);
  --text-tertiary:    var(--_text3);
  --text-disabled:    oklch(0.35 0.004 220);
  --text-inverse:     var(--_bg);
  --border-light:     var(--_border);
  --border-medium:    oklch(0.28 0.007 220);
  --border-strong:    var(--_border-em);

  /* Blue primary → amber (keeps leads-page.css components correct) */
  --primary-50:       var(--_amber-bg);
  --primary-100:      oklch(0.20 0.08 195);
  --primary-400:      oklch(0.82 0.16 195);
  --primary-500:      var(--_amber);
  --primary-600:      var(--_amber-lo);
  --primary-700:      oklch(0.56 0.14 195);

  /* Gray scale → dark (inverted for dark theme) */
  --gray-0:     var(--_text);
  --gray-50:    var(--_elevated);
  --gray-100:   oklch(0.24 0.006 220);
  --gray-200:   var(--_border);
  --gray-300:   oklch(0.30 0.006 220);
  --gray-400:   var(--_text3);
  --gray-500:   var(--_text3);
  --gray-600:   var(--_text2);
  --gray-700:   var(--_text2);
  --gray-800:   var(--_text);
  --gray-900:   var(--_text);

  /* Score / semantic colors */
  --success-50:  var(--_mild-bg);
  --success-100: oklch(0.26 0.06 155);
  --success-500: var(--_mild);
  --success-600: oklch(0.62 0.12 155);
  --warning-50:  var(--_amber-bg);
  --warning-100: oklch(0.22 0.09 195);
  --warning-500: var(--_amber);
  --warning-600: var(--_amber-lo);
  --error-50:    var(--_hot-bg);
  --error-100:   oklch(0.24 0.08 28);
  --error-500:   var(--_hot);
  --error-600:   oklch(0.56 0.19 28);
  --error-700:   oklch(0.48 0.17 28);

  /* --- Typography --- */
  --font-display: 'Titillium Web', system-ui, sans-serif;
  --font-body:    'Chivo', system-ui, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* --- Spacing (4pt scale) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --- Radius --- */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   7px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-3xl:  14px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.5);
  --shadow-sm: 0 1px 4px oklch(0 0 0 / 0.5), 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 10px oklch(0 0 0 / 0.55), 0 2px 4px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 10px 24px oklch(0 0 0 / 0.55), 0 4px 8px oklch(0 0 0 / 0.3);
  --shadow-xl: 0 20px 48px oklch(0 0 0 / 0.65), 0 10px 20px oklch(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px oklch(0.74 0.18 195 / 0.20);

  /* --- Transitions --- */
  --transition-fast:   120ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   150ms ease;     /* intentionally short — fast tool */
  --transition-normal: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-Index --- */
  --z-dropdown: 1000;
  --z-sticky:    200;
  --z-fixed:    1030;
  --z-overlay:   700;
  --z-panel:     600;
  --z-modal:    1040;
  --z-popover:  1050;
  --z-toast:    1060;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--_bg);
  color: var(--_text);
  min-height: 100vh;
  font-size: var(--text-sm);
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; }

/* Global dark inputs — overrides browser light defaults */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
  background: var(--_elevated);
  color: var(--_text);
  border: 1px solid var(--_border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--_amber);
  box-shadow: 0 0 0 2px oklch(0.74 0.18 195 / 0.15);
}
input::placeholder, textarea::placeholder { color: var(--_text3); }
select option { background: var(--_elevated); color: var(--_text); }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: 240px;
  background: var(--_surface);
  border-right: 1px solid var(--_border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: var(--z-fixed);
}

.sidebar-header {
  height: 60px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--_border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  background: var(--_amber-bg);
  border: 1px solid oklch(0.74 0.18 195 / 0.35);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.sidebar-brand {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--_text);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--_text2);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-link:hover {
  background: var(--_elevated);
  color: var(--_text);
}

.nav-link.active {
  background: var(--_amber-bg);
  color: var(--_amber);
  border: 1px solid oklch(0.74 0.18 195 / 0.25);
}

.nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--_border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  max-width: calc(100vw - 240px);
}

.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
}

.content-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--_border);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--_text);           /* solid — no gradient text */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.page-subtitle {
  color: var(--_text3);
  font-size: var(--text-sm);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.card:hover {
  border-color: var(--_border-em);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--_border);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--_text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  /* NO ::before stripe — removed */
}

.stat-card:hover {
  border-color: var(--_border-em);
  background: var(--_elevated);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.stat-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--_text3);
  margin-bottom: var(--space-1);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--_text);
  letter-spacing: -0.01em;
  line-height: 1;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 1rem;
}

.stat-icon.hot     { background: var(--_hot-bg);   color: var(--_hot);   }
.stat-icon.total   { background: var(--_amber-bg);  color: var(--_amber); }
.stat-icon.live    { background: var(--_mild-bg);   color: var(--_mild);  }
.stat-icon.contacted { background: var(--_elevated); color: var(--_text2); }
.stat-icon.favorites { background: var(--_amber-bg); color: var(--_amber); }
.stat-icon svg { width: 18px; height: 18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  height: 36px;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--_amber);
  color: var(--_bg);
  border-color: var(--_amber);
}

.btn-primary:hover:not(:disabled) {
  background: var(--_amber-lo);
  border-color: var(--_amber-lo);
}

.btn-primary:active:not(:disabled) {
  opacity: 0.8;
}

.btn-secondary {
  background: var(--_elevated);
  color: var(--_text2);
  border-color: var(--_border);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--_border-em);
  color: var(--_text);
}

.btn-secondary:active:not(:disabled) {
  background: var(--_border);
}

.btn-ghost {
  background: transparent;
  color: var(--_text2);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--_elevated);
  color: var(--_text);
}

.btn-ghost:active:not(:disabled) {
  background: var(--_border);
}

.btn-danger {
  background: oklch(0.65 0.22 28 / 0.15);
  color: var(--_hot);
  border-color: oklch(0.65 0.22 28 / 0.3);
}

.btn-danger:hover:not(:disabled) {
  background: oklch(0.65 0.22 28 / 0.25);
}

.btn-warning {
  background: var(--_amber);
  color: var(--_bg);
  border-color: var(--_amber);
}

.btn-warning:hover:not(:disabled) {
  background: var(--_amber-lo);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  height: 28px;
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  height: 44px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--_text3);
  border-color: transparent;
}

.btn-icon:hover:not(:disabled) {
  background: var(--_elevated);
  color: var(--_text);
  border-color: var(--_border);
}

.w-full { width: 100%; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--_text2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--_elevated);
  border: 1px solid var(--_border);
  border-radius: var(--radius-md);
  color: var(--_text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--_amber);
  box-shadow: 0 0 0 2px oklch(0.74 0.18 195 / 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--_text3); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}

.form-select option {
  background: var(--_surface);
  color: var(--_text);
}

.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--_amber);
  cursor: pointer;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.badge-primary {
  background: var(--_amber-bg);
  color: var(--_amber);
  border: 1px solid oklch(0.74 0.18 195 / 0.3);
}

.badge-gray {
  background: var(--_elevated);
  color: var(--_text2);
  border: 1px solid var(--_border);
}

.badge-success {
  background: var(--_mild-bg);
  color: var(--_mild);
  border: 1px solid oklch(0.70 0.14 155 / 0.3);
}

.badge-warning {
  background: var(--_warm-bg);
  color: var(--_warm);
  border: 1px solid oklch(0.82 0.17 88 / 0.3);
}

.badge-danger {
  background: var(--_hot-bg);
  color: var(--_hot);
  border: 1px solid oklch(0.65 0.22 28 / 0.3);
}

/* HTTP status semantic badges */
.badge-http-ok       { background: var(--_mild-bg);  color: var(--_mild);  border: 1px solid oklch(0.70 0.14 155 / 0.3); }
.badge-http-redirect { background: var(--_amber-bg); color: oklch(0.78 0.15 215); border: 1px solid oklch(0.74 0.18 195 / 0.3); }
.badge-http-client   { background: var(--_warm-bg);  color: var(--_warm);  border: 1px solid oklch(0.82 0.17 88 / 0.3); }
.badge-http-server   { background: var(--_hot-bg);   color: var(--_hot);   border: 1px solid oklch(0.65 0.22 28 / 0.3); }
.badge-http-none     { background: transparent;      color: var(--_text3); border: 1px solid var(--_border); }

/* TTFB performance badges */
.badge-ttfb-fast   { background: var(--_mild-bg);  color: var(--_mild); border: 1px solid oklch(0.70 0.14 155 / 0.3); }
.badge-ttfb-medium { background: var(--_warm-bg);  color: var(--_warm); border: 1px solid oklch(0.82 0.17 88 / 0.3); }
.badge-ttfb-slow   { background: var(--_hot-bg);   color: var(--_hot);  border: 1px solid oklch(0.65 0.22 28 / 0.3); }

/* ============================================================
   SCORE BADGES — semantic, corrected heat semantics
   ============================================================ */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 44px;
  cursor: help;
}

/* HOT (7-10) — vermillion, urgent */
.score-hot, .score-high {
  background: var(--_hot-bg);
  color: var(--_hot);
  border: 1px solid oklch(0.65 0.22 28 / 0.35);
}

/* WARM (4-6.9) — amber-yellow, interesting */
.score-warm, .score-medium {
  background: var(--_warm-bg);
  color: var(--_warm);
  border: 1px solid oklch(0.82 0.17 88 / 0.35);
}

/* MILD (1-3.9) — sage, low priority */
.score-mild {
  background: var(--_mild-bg);
  color: var(--_mild);
  border: 1px solid oklch(0.70 0.14 155 / 0.35);
}

/* COLD (0-0.9) — muted gray */
.score-cold, .score-low {
  background: oklch(0.18 0.003 220);
  color: var(--_cold);
  border: 1px solid oklch(0.42 0.03 60 / 0.35);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--_border);
  border-radius: var(--radius-lg);
  background: var(--_surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.data-table th {
  background: var(--_elevated);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  color: var(--_text2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--_border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table th:first-child { padding-left: var(--space-5); }
.data-table th:last-child  { padding-right: var(--space-5); }

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--_border);
  color: var(--_text2);
  vertical-align: middle;
}

.data-table td:first-child { padding-left: var(--space-5); }
.data-table td:last-child  { padding-right: var(--space-5); }

.data-table tbody tr { transition: background var(--transition-fast); cursor: pointer; }
.data-table tbody tr:hover { background: var(--_elevated); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  color: var(--_bg);
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xl);
  animation: toastEnter 0.2s ease-out;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@keyframes toastEnter {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.toast-success { background: var(--_mild);  }
.toast-error   { background: var(--_hot);   }
.toast-info    { background: var(--_amber); }
.toast-warning { background: var(--_amber); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.65);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--_surface);
  border: 1px solid var(--_border);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-xl);
}

.modal-overlay.active .modal { transform: scale(1); }

.modal-sm { width: 400px; }
.modal-md { width: 600px; }
.modal-lg { width: 900px; max-width: 95vw; }

.modal-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--_border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--_text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.modal-body { padding: var(--space-5); }

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--_border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ============================================================
   LOADING STATES
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--_elevated) 25%,
    oklch(0.24 0.008 220) 50%,
    var(--_elevated) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--_border-em);
  border-top-color: var(--_amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   UTILITIES
   ============================================================ */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap     { flex-wrap: wrap; }
.grid          { display: grid; }
.grid > *      { min-width: 0; }
.grid-cols-1   { grid-template-columns: 1fr; }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
@media (min-width: 1024px) {
  .lg\:grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
  .lg\:col-span-2    { grid-column: span 2; }
  .lg\:col-span-1    { grid-column: span 1; }
}
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg  { font-size: var(--text-lg); }
.font-medium  { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold    { font-weight: var(--font-bold); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-muted   { color: var(--_text3); }
.text-amber   { color: var(--_amber); }
.hidden       { display: none; }
.block        { display: block; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--_bg); }
::-webkit-scrollbar-thumb   { background: oklch(0.30 0.005 220); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.38 0.006 220); }

/* ============================================================
   SELECTION & FOCUS
   ============================================================ */
::selection {
  background: oklch(0.74 0.18 195 / 0.35);
  color: var(--_text);
}

:focus-visible {
  outline: 2px solid var(--_amber);
  outline-offset: 2px;
}

/* ============================================================
   DARK THEME INPUT OVERRIDE
   Higher specificity via [data-theme] to beat UA stylesheet on all pages
   ============================================================ */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--_elevated) !important;
  color: var(--_text) !important;
  border: 1px solid var(--_border) !important;
  border-radius: var(--radius-md);
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  outline: none !important;
  border-color: var(--_amber) !important;
  box-shadow: 0 0 0 2px oklch(0.74 0.18 195 / 0.15) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--_text3) !important; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .sidebar.mobile-open { transform: translateX(0); }
  .main-content        { margin-left: 0; max-width: 100vw; overflow-x: hidden; }
  .main-scroll         { padding: var(--space-3); overflow-x: hidden; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Prevent any card or grid item from exceeding viewport */
  .card, .grid > * { max-width: 100%; min-width: 0; }

  /* Chart containers: cap height on small screens */
  .chart-wrap { height: 220px !important; }
}

@media (max-width: 480px) {
  .stats-grid   { grid-template-columns: 1fr; }
  .main-scroll  { padding: var(--space-2); overflow-x: hidden; }
}

/* ============================================================
   ICON HELPERS (layout.php)
   ============================================================ */
.icon    { width: 16px; height: 16px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }

/* ============================================================
   STATS HEADER STRIP (leads page)
   ============================================================ */
.stats-header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}