/* ============================================================
   Unavoidable CRM — App Styles
   Dark space theme: deep navy + purple/blue/pink neon
   Font: Rajdhani (headings) + DM Sans (body)
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────── */
  --bg-base:       #080818;   /* true near-black with blue undertone */
  --bg-surface:    #0e0e24;   /* sidebar + cards: slightly lifted     */
  --bg-card:       #0e0e24;
  --bg-elevated:   #161630;   /* modals, inputs, hover surfaces       */
  --bg-hover:      #1e1e40;
  --bg-input:      #12122a;

  /* ── Borders ─────────────────────────────────── */
  /* Earlybird #4 (calmer palette): borders were purple-tinted across every card
     and panel, contributing to "loud" feel. Switched to near-neutral white-alpha
     so chrome recedes; brand colour appears only on intentional moments
     (active nav, primary CTAs, status indicators). */
  --border:        rgba(255, 255, 255, 0.06);
  --border-hover:  rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  /* ── Brand palette ───────────────────────────── */
  --purple:        #8b5cf6;
  --purple-light:  #a78bfa;
  --purple-dim:    rgba(139,92,246,0.12);
  --blue:          #3b82f6;
  --blue-light:    #60a5fa;
  --pink:          #ec4899;
  --cyan:          #06b6d4;
  --green:         #10b981;
  --amber:         #f59e0b;
  --red:           #ef4444;

  /* ── Typography ──────────────────────────────── */
  --text-primary:   #f0eeff;   /* near-white with warm purple tint     */
  --text-secondary: #b8b4d8;   /* readable secondary                   */
  --text-muted:     #6e6a94;   /* labels, placeholders, timestamps     */
  --text-heading:   #ffffff;

  /* ── Gradients (now solid muted colours; same token names so nothing breaks) ── */
  /* Earlybird #4: gradients were applied to every primary CTA, avatar, badge etc.
     Replaced with solid muted purple. Sweep stays subtle on --grad-surface for
     section dividers but at minimal opacity. */
  --grad-primary:  #6d4ed8;
  --grad-accent:   #6d4ed8;
  --grad-surface:  linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);

  /* ── Shadows ─────────────────────────────────── */
  /* Earlybird #4: removed --shadow-glow from default scale - it was applied as
     a base shadow on many components causing constant purple haze. Kept as
     opt-in (rules that want it can still reference it explicitly, but it no
     longer cascades to every card). */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);
  --shadow-glow:none;

  /* ── Layout ──────────────────────────────────── */
  --sidebar-w:     248px;
  --sidebar-collapsed: 60px;
  --topbar-h:      60px;

  /* ── Radius ──────────────────────────────────── */
  --radius:        10px;
  --radius-lg:     14px;
  --radius-xl:     18px;
  --radius-sm:     7px;

  /* ── Typography ──────────────────────────────── */
  --font-head:     'Rajdhani', sans-serif;
  --font-body:     'Inter', 'DM Sans', sans-serif;

  --transition:    .15s cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

/* ============================================================
   LIGHT MODE — full override of every dark variable
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  /* Earlybird #2 (light mode WCAG): full rebuild to AA strict (4.5:1 normal,
     3:1 large/UI). Every text-on-background pair below verified with a contrast
     calculator before commit. Aesthetic matches calmed dark mode: off-white
     surfaces, near-black text, muted purple accent (no neon, no gradients). */

  --bg-base:       #f7f7fa;   /* off-white page bg */
  --bg-surface:    #ffffff;   /* card/sidebar surface */
  --bg-card:       #ffffff;
  --bg-elevated:   #f0f0f5;   /* inputs, hover surfaces */
  --bg-hover:      #e8e8f0;
  --bg-input:      #ffffff;

  /* Neutral borders - away from purple-tint that fought every card */
  --border:        rgba(0, 0, 0, 0.10);
  --border-hover:  rgba(0, 0, 0, 0.20);
  --border-strong: rgba(0, 0, 0, 0.35);

  /* Brand palette - muted purple matches calmed dark mode aesthetic */
  --purple:        #6d4ed8;   /* 5.26:1 on bg-base - passes UI AA */
  --purple-light:  #5a3fc0;
  --purple-dim:    rgba(109,78,216,0.08);
  --blue:          #2563eb;
  --blue-light:    #1d4ed8;
  --pink:          #db2777;
  --cyan:          #0891b2;
  --green:         #059669;
  --amber:         #b45309;   /* darker amber - passes AA */
  --red:           #b91c1c;   /* darker red - passes AA */

  /* Text - all verified against bg-base (off-white #f7f7fa):
       primary  #1a1a2e → 15.95:1  AAA
       secondary #4a4a68 → 7.95:1  AAA
       muted    #54546e → 6.84:1  AAA (was 4.83 → bumped: 4.83 passes AA but
                reads as faded for body descriptions like the Lead Capture
                step labels and Deals benchmarks. 6.84 is comfortable.)
       heading  #0d0d1e → 17.96:1 AAA */
  --text-primary:   #1a1a2e;
  --text-secondary: #4a4a68;
  --text-muted:     #54546e;
  --text-heading:   #0d0d1e;

  /* Shadows - subtle, no glow (matches calmed dark mode) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-glow:none;

  /* Solid colours instead of gradients - same token names so nothing breaks */
  --grad-primary:  #6d4ed8;
  --grad-accent:   #6d4ed8;
  --grad-surface:  linear-gradient(180deg, rgba(0,0,0,.02) 0%, transparent 100%);
}

/* Smooth theme transition on everything except images */
body, body * {
  transition: background-color .2s ease, border-color .2s ease, color .15s ease, box-shadow .2s ease;
}
body img, body svg { transition: none; }

/* Light mode specific overrides */
[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--text-primary);
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #fafafe 0%, #f5f4ff 100%);
  border-right-color: rgba(109,40,217,.1);
  box-shadow: 4px 0 20px rgba(109,40,217,.06);
}
[data-theme="light"] .nav-item {
  color: #4a4870;
}
[data-theme="light"] .nav-item:hover {
  color: var(--purple);
  background: rgba(124,58,237,.06);
}
[data-theme="light"] .nav-item.active {
  color: var(--purple);
  background: rgba(124,58,237,.1);
}
[data-theme="light"] .nav-item {
  color: #4b5563;
}
[data-theme="light"] .nav-item:hover {
  background: var(--bg-hover);
  color: var(--purple);
}
[data-theme="light"] .nav-item.active {
  background: rgba(124,58,237,.08);
  color: var(--purple);
}
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(109,40,217,.1);
  box-shadow: 0 1px 0 rgba(109,40,217,.06), 0 4px 16px rgba(109,40,217,.05);
}
[data-theme="light"] .page-title {
  background: linear-gradient(135deg, #18183a 0%, #4c1d95 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  border-color: rgba(109,40,217,.1);
  box-shadow: 0 1px 4px rgba(109,40,217,.05), 0 4px 12px rgba(109,40,217,.04);
}
[data-theme="light"] .card::before { background: linear-gradient(180deg, rgba(124,58,237,.02) 0%, transparent 100%); }
[data-theme="light"] .card:hover {
  border-color: rgba(109,40,217,.22);
  box-shadow: 0 4px 20px rgba(109,40,217,.1), 0 1px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .form-control {
  background: #ffffff;
  border-color: rgba(109,40,217,.18);
  color: #18183a;
  box-shadow: inset 0 1px 2px rgba(109,40,217,.04);
}
[data-theme="light"] .form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1), inset 0 1px 2px rgba(0,0,0,.02);
}
[data-theme="light"] .modal {
  background: #ffffff;
}
[data-theme="light"] .modal-overlay {
  background: rgba(30,27,75,.4);
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
  background: #f5f6ff;
  border-color: rgba(109,40,217,.12);
}
[data-theme="light"] table thead tr {
  background: #f5f6ff;
}
[data-theme="light"] table th {
  color: #4b5563;
  border-bottom-color: rgba(109,40,217,.15);
}
[data-theme="light"] table td {
  border-bottom-color: rgba(109,40,217,.06);
}
[data-theme="light"] table tr:hover td {
  background: #f5f6ff;
}
[data-theme="light"] .badge-active {
  background: rgba(5,150,105,.12);
  color: #059669;
}
[data-theme="light"] .empty-state {
  color: #4b5563;
}
[data-theme="light"] .sidebar-footer {
  background: #f5f6ff;
  border-top-color: rgba(109,40,217,.1);
}
[data-theme="light"] .company-switcher {
  background: #f5f6ff;
  border-color: rgba(109,40,217,.12);
}
[data-theme="light"] .kanban-col {
  background: #f5f6ff;
  border-color: rgba(109,40,217,.12);
}
[data-theme="light"] .kanban-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(109,40,217,.06);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,.2);
}
[data-theme="light"] .nav-divider {
  color: #7c6fa0 !important;
  opacity: .85 !important;
}
[data-theme="light"] .page-content {
  background: var(--bg-base);
}
[data-theme="light"] select option {
  background: #ffffff;
  color: #1e1b4b;
}

/* ── Light mode: fix hardcoded white text throughout ───────────────── */

/* Topbar page title */
[data-theme="light"] .topbar-title,
[data-theme="light"] .page-title,
[data-theme="light"] h1:not(.wi-hero h1),
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-primary) !important;
}

/* Card and section headings - common inline style patterns */
[data-theme="light"] .card-title,
[data-theme="light"] .card-header,
[data-theme="light"] .section-title,
[data-theme="light"] .stat-value,
[data-theme="light"] .stat-number,
[data-theme="light"] .metric-value {
  color: var(--text-primary) !important;
}

/* Nav items and labels */
[data-theme="light"] .nav-label {
  color: #4b5563;
}
[data-theme="light"] .nav-divider {
  color: var(--text-primary) !important;
  opacity: .6 !important;
}
[data-theme="light"] .logo-text {
  color: var(--purple) !important;
}

/* Tables */
[data-theme="light"] .table th,
[data-theme="light"] .table td {
  color: var(--text-primary);
}

/* Form labels */
[data-theme="light"] .form-label,
[data-theme="light"] label {
  color: var(--text-secondary);
}

/* Topbar elements */
[data-theme="light"] .topbar-breadcrumb,
[data-theme="light"] .topbar-section {
  color: var(--text-secondary) !important;
}

/* Buttons - ghost buttons need dark text in light mode */
[data-theme="light"] .btn-ghost {
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="light"] .btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--purple);
}

/* Stats / KPI cards */
[data-theme="light"] .kpi-value,
[data-theme="light"] .kpi-label,
[data-theme="light"] .stat-label {
  color: var(--text-secondary) !important;
}

/* Pipeline / kanban card text */
[data-theme="light"] .kanban-card-title,
[data-theme="light"] .kanban-card-meta,
[data-theme="light"] .deal-title {
  color: var(--text-primary) !important;
}

/* Inline styles - broad catch for the most common pattern */
/* Card strong text that was white */
[data-theme="light"] .card strong,
[data-theme="light"] .card b {
  color: var(--text-primary);
}

/* Modal text */
[data-theme="light"] .modal-title {
  color: var(--text-primary);
}
[data-theme="light"] .modal-body {
  color: var(--text-secondary);
}

/* Tab buttons */
[data-theme="light"] .tab-btn {
  color: var(--text-secondary);
}
[data-theme="light"] .tab-btn.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* Empty state */
[data-theme="light"] .empty-title {
  color: var(--text-primary) !important;
}
[data-theme="light"] .empty-desc {
  color: var(--text-secondary) !important;
}

/* Topbar page section label */
[data-theme="light"] .page-section-label {
  color: var(--text-muted) !important;
}

/* Section headers with hardcoded font-weight:600;color:#fff */
[data-theme="light"] [style*="font-weight:600"],
[data-theme="light"] [style*="font-weight: 600"],
[data-theme="light"] [style*="font-weight:700"],
[data-theme="light"] [style*="font-weight: 700"] {
  color: var(--text-primary);
}

/* But keep purple/colored text alone - only override white */
[data-theme="light"] [style*="color:var(--purple"],
[data-theme="light"] [style*="color: var(--purple"],
[data-theme="light"] [style*="color:var(--green"],
[data-theme="light"] [style*="color:var(--red"],
[data-theme="light"] [style*="color:var(--amber"] {
  /* keep as-is - these are intentional colours */
}

/* Topbar title text */
[data-theme="light"] .topbar > *:not(.topbar-right) {
  color: var(--text-primary);
}

/* Sidebar footer user info */
[data-theme="light"] .user-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .user-role {
  color: var(--text-muted) !important;
}

/* Breadcrumb / dashboard link */
[data-theme="light"] .topbar a {
  color: var(--text-secondary);
}
[data-theme="light"] .topbar a:hover {
  color: var(--purple);
}

/* Inline white text override - catch any element with hardcoded white text in
   light mode and flip to readable dark text. The earlier .page-content scope
   was too narrow (missed Lead Capture step boxes, kanban How-it-works tips,
   etc). All inline white formats covered including rgba whites with any alpha. */
[data-theme="light"] [style*="color:#fff"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color: #fff"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color:#ffffff"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color: #ffffff"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color:white"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color: white"]:not(.btn-primary):not(.btn-primary *):not(.avatar),
[data-theme="light"] [style*="color:rgb(255,255,255)"]:not(.btn-primary):not(.avatar),
[data-theme="light"] [style*="color:rgb(255, 255, 255)"]:not(.btn-primary):not(.avatar),
[data-theme="light"] [style*="color:rgba(255,255,255"]:not(.btn-primary):not(.avatar),
[data-theme="light"] [style*="color:rgba(255, 255, 255"]:not(.btn-primary):not(.avatar),
[data-theme="light"] [style*="color: rgba(255,255,255"]:not(.btn-primary):not(.avatar),
[data-theme="light"] [style*="color: rgba(255, 255, 255"]:not(.btn-primary):not(.avatar) {
  color: var(--text-primary) !important;
}

/* Exception: keep white text inside coloured/dark backgrounds.
   IMPORTANT: do NOT use [class*="tag"] - it matches .pc-stage because "stage"
   contains "tag" as a substring. Same trap with [class*="bar"] catching
   "sidebar" etc. Use prefix/suffix matching or explicit classes instead.

   Badges with PALE tinted backgrounds (.badge-cold, .badge-warm etc) need
   DARK text in light mode, not white - white-on-pale-blue is invisible.
   The per-variant dark text colours are defined below this block. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary *,
[data-theme="light"] .progress-bar {
  color: #fff !important;
}

/* Light-mode badge text - dark variants matching each badge's tint.
   All verified ≥6:1 contrast on the 15% tinted background.
   Badges in dark mode keep their bright-on-tint look from the base .badge-* rules. */
[data-theme="light"] .badge-hot,
[data-theme="light"] .badge-lost     { color: #7f1d1d !important; }
[data-theme="light"] .badge-warm,
[data-theme="light"] .badge-paused   { color: #92400e !important; }
[data-theme="light"] .badge-cold     { color: #3730a3 !important; }
[data-theme="light"] .badge-won,
[data-theme="light"] .badge-green    { color: #065f46 !important; }
[data-theme="light"] .badge-active   { color: #1e40af !important; }
[data-theme="light"] .badge-draft    { color: #374151 !important; }
[data-theme="light"] .badge-purple   { color: #5b21b6 !important; }

/* Explainer panels */
[data-theme="light"] #pageExplainer_,
[data-theme="light"] [id^="pageExplainer"] strong {
  color: var(--text-primary) !important;
}

/* Input placeholders */
[data-theme="light"] ::placeholder {
  color: #9ca3af;
}

/* Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f0f2f8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15.5px; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  min-height: 100vh;
  /* NOTE: do NOT set overflow-x on body or html — either breaks position:sticky
     on .topbar in practice. If a horizontal scrollbar appears, find the actual
     overflowing element and constrain it there. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: 1.6;
}
/* Subtle dot-grid texture on page background */
.page-content::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(139,92,246,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.page-content > * { position: relative; z-index: 1; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.5); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(180deg, #0b0b21 0%, #0e0e24 100%);
  border-right: 1px solid rgba(139,92,246,.12);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  transition: width var(--transition);
  overflow: hidden;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .company-switcher,
.sidebar.collapsed .user-info { display: none; }

/* Hide the section headers (MAIN, SALES & CRM, OPERATIONS, etc) when collapsed.
   The actual class is .nav-cat (NOT .nav-category - verified from live DOM). */
.sidebar.collapsed .nav-cat { display: none !important; }

/* The "LIVE" indicator in the sidebar header is a CSS ::before pseudo-element,
   not a real element with a class. It's hidden in collapsed mode via a rule
   in pc-theme.css (.sidebar.collapsed .sidebar-header::before { display: none }). */

/* Logo in collapsed mode: constrain the inline-styled img (which has width:auto;
   max-width:180px - way too wide for a 60px bar) to a small square icon. */
.sidebar.collapsed .logo-mark {
  width: 100%;
  justify-content: center;
}
.sidebar.collapsed .logo-mark img {
  height: 32px !important;
  width: 32px !important;
  max-width: 32px !important;
  object-fit: contain !important;
}

/* Nav items: center the icon, no extra horizontal padding crushing it */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0;
  width: 100%;
}
.sidebar.collapsed .nav-icon {
  margin: 0;
}

/* Sidebar header: just the logo, centered, tight padding.
   Keep some min-height so it doesn't collapse to nothing. */
.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: .9rem .25rem;
  gap: 0;
  min-height: 56px;
}

/* Collapse toggle: hide the inline toggle button entirely when collapsed -
   the separate sidebar-collapsed-handle (#sidebarHandle) is the re-open trigger. */
.sidebar.collapsed .sidebar-toggle { display: none; }

/* Footer user card: hide role text and logout button, just show the avatar centered */
.sidebar.collapsed .sidebar-footer { padding: .5rem; }
.sidebar.collapsed .user-card { justify-content: center; padding: 0; }
.sidebar.collapsed .logout-btn { display: none; }

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--border);
  min-height: 64px;
}

.logo-mark { flex-shrink: 0; }

.logo-text { flex: 1; min-width: 0; }
.logo-primary {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.logo-secondary {
  display: block;
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--text-muted);
  line-height: 1;
}

.sidebar-toggle {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px; border-radius: 4px;
  transition: color var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--purple-light); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.company-switcher {
  margin: .5rem .75rem .25rem;
  padding: .5rem .65rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: default;
  transition: border-color .15s;
}
.cs-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.cs-value  { font-size: .85rem; color: var(--purple-light); font-weight: 500; }

.sidebar-nav {
  flex: 1;
  padding: .5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 .85rem;
  height: 38px;
  text-decoration: none;
  color: rgba(240,238,255,.7);
  font-size: .875rem;
  font-weight: 500;
  border-radius: 0;
  position: relative;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  letter-spacing: .01em;
}
.nav-item:hover {
  color: #fff;
  background: rgba(139,92,246,.08);
}
.nav-item.active {
  color: #fff;
  background: rgba(139,92,246,.15);
}
.nav-item.active .nav-icon {
  color: var(--purple-light);
}
.nav-active-bar {
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  background: linear-gradient(180deg, #a78bfa, #60a5fa);
  border-radius: 0 2px 2px 0;
}
.nav-icon { display: flex; align-items: center; flex-shrink: 0; width: 18px; }
.nav-label { flex: 1; }

.sidebar-footer {
  border-top: 1px solid rgba(139,92,246,.1);
  padding: .75rem;
  background: rgba(0,0,0,.15);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: .4rem .2rem;
}
.user-info {
  /* allow truncation: flex children won't shrink below content unless min-width:0 */
  flex: 1;
  min-width: 0;
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(139,92,246,.3), 0 2px 8px rgba(0,0,0,.3);
}
.user-name { font-size: .85rem; font-weight: 500; color: var(--text-primary); line-height: 1.2; }
.user-role { font-size: .7rem; color: var(--text-muted); text-transform: capitalize; }
.logout-btn {
  margin-left: auto;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
  flex-shrink: 0;
}
.logout-btn:hover { color: var(--red); }

/* ============================================================
   MAIN WRAP
   ============================================================ */
.main-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
}
.sidebar.collapsed ~ .main-wrap { margin-left: var(--sidebar-collapsed); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  height: var(--topbar-h);
  /* Fully opaque background so scrolling content can't bleed through behind it */
  background: var(--bg-surface, #0e0e24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139,92,246,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  /* High z-index so it sits above all page content (tables, kanban, modals' backdrops are 1000+) */
  z-index: 500;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(139,92,246,.08), 0 4px 16px rgba(0,0,0,.2);
}
.topbar-left { display: flex; align-items: center; gap: .75rem; }
.page-title {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .03em;
  background: linear-gradient(135deg, #fff 0%, rgba(200,190,255,.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.topbar-time { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mobile-menu-btn {
  display: none;
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 4px;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  flex: 1;
  padding: 1.75rem 1.75rem 2.5rem;
  max-width: 1600px;
  width: 100%;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: linear-gradient(180deg, rgba(20,20,48,1) 0%, rgba(14,14,36,1) 100%);
  border: 1px solid rgba(139,92,246,.14);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-surface);
  pointer-events: none;
  border-radius: inherit;
}
.card:hover {
  border-color: rgba(139,92,246,.28);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(-1px);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.card-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: linear-gradient(135deg, rgba(20,20,50,.95) 0%, rgba(16,16,38,.95) 100%);
  border: 1px solid rgba(139,92,246,.16);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .8;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(139,92,246,.08) 0%, transparent 70%);
  pointer-events: none;
}
.stat-card:hover {
  border-color: rgba(139,92,246,.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; font-weight: 600; }
.stat-value { font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; color: var(--text-primary); line-height: 1; letter-spacing: -.01em; }
.stat-sub   { font-size: .73rem; color: var(--text-muted); margin-top: .35rem; }
.stat-trend-up   { color: var(--green); }
.stat-trend-down { color: var(--red); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.3), 0 1px 3px rgba(0,0,0,.2);
  font-weight: 600;
  letter-spacing: .01em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8b47ff 0%, #3b72ff 100%);
  box-shadow: 0 4px 16px rgba(124,58,237,.45), 0 2px 6px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--border-hover); background: var(--bg-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(139,92,246,.15);
}
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border); background: var(--bg-elevated); }

.btn-danger {
  background: rgba(239,68,68,.15);
  color: var(--red);
  border: 1px solid rgba(239,68,68,.3);
}
.btn-danger:hover { background: rgba(239,68,68,.25); }

.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-icon { padding: .45rem; border-radius: var(--radius-sm); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: .78rem;
  color: var(--text-secondary);
  margin-bottom: .38rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.form-control {
  width: 100%;
  background: rgba(12,12,32,.6);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: .58rem .85rem;
  font-family: var(--font-body);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  appearance: none;
  line-height: 1.5;
}
.form-control:focus {
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
  background: rgba(16,16,40,.8);
}
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
thead th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
tbody tr {
  border-bottom: 1px solid rgba(139,92,246,.07);
  transition: background var(--transition);
}
tbody tr:hover { background: var(--bg-hover); }
tbody td {
  padding: .7rem 1rem;
  color: var(--text-primary);
  vertical-align: middle;
}
tbody td.muted { color: var(--text-muted); }

.table-check { width: 32px; }
input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--purple);
  cursor: pointer;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .55rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge-hot      { background: rgba(239,68,68,.15);   color: #f87171; }
.badge-warm     { background: rgba(245,158,11,.15);  color: #fbbf24; }
.badge-cold     { background: rgba(99,102,241,.15);  color: #818cf8; }
.badge-won      { background: rgba(16,185,129,.15);  color: #34d399; }
.badge-lost     { background: rgba(239,68,68,.15);   color: #f87171; }
.badge-active   { background: rgba(59,130,246,.15);  color: #60a5fa; }
.badge-paused   { background: rgba(245,158,11,.15);  color: #fbbf24; }
.badge-draft    { background: rgba(107,114,128,.15); color: #9ca3af; }
.badge-purple   { background: rgba(139,92,246,.15);  color: #c4b5fd; }
.badge-green    { background: rgba(16,185,129,.15);  color: #34d399; }

/* Pipeline stage badges */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
}
.stage-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   PIPELINE KANBAN
   ============================================================ */
.kanban-board {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: 1.5rem;
  align-items: flex-start;
  min-height: calc(100vh - 160px);
}
.kanban-col {
  flex: 0 0 240px;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
.kanban-col-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kanban-col-title {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.kanban-col-count {
  font-size: .75rem;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: .1rem .45rem;
  border-radius: 99px;
}
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kanban-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.kanban-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
}
.kanban-card.dragging {
  opacity: .5;
  transform: rotate(2deg);
}
.kanban-col.drag-over {
  border-color: var(--purple);
  background: rgba(139,92,246,.06);
}
.kanban-card-name { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.kanban-card-meta { font-size: .75rem; color: var(--text-muted); }
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
}
.kanban-add-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .8rem;
  padding: .4rem;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.kanban-add-btn:hover {
  border-color: var(--purple);
  color: var(--purple-light);
  background: rgba(139,92,246,.06);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6,6,26,.8);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: linear-gradient(180deg, #181836 0%, #111128 100%);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(.98);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .15s;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
}
.modal-close {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: 4px;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--red); }
.modal-body { padding: 1.4rem; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  min-width: 240px;
  max-width: 380px;
  pointer-events: all;
  transform: translateX(120%);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  font-size: .875rem;
}
.toast.show { transform: translateX(0); }
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--blue); }
.toast.warning { border-left: 3px solid var(--amber); }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.tab-btn {
  background: none; border: none;
  padding: .6rem 1rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--purple-light); border-bottom-color: var(--purple); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .75rem;
  transition: border var(--transition);
}
.search-bar:focus-within { border-color: var(--purple); }
.search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.search-bar input {
  background: none; border: none; outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .875rem;
  width: 220px;
}
.search-bar input::placeholder { color: var(--text-muted); }

/* ============================================================
   FILTER ROW
   ============================================================ */
.filter-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.pagination-btns { display: flex; gap: .3rem; }
.pagination-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: .35rem .65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .8rem;
  transition: all var(--transition);
}
.pagination-btn:hover { border-color: var(--purple); color: var(--purple-light); }
.pagination-btn.active { background: var(--grad-primary); border-color: transparent; color: #fff; }
.pagination-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 2rem;
  text-align: center;
  color: var(--text-muted);
  position: relative;
}
.empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(139,92,246,.07) 0%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: 1.25rem;
  display: block;
  filter: drop-shadow(0 0 20px rgba(139,92,246,.3));
  position: relative;
}
.empty-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: .6rem; letter-spacing: .02em; position: relative; }
.empty-desc  { font-size: .9rem; max-width: 360px; line-height: 1.7; color: var(--text-muted); position: relative; }

/* ============================================================
   ACTIVITY TIMELINE
   ============================================================ */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 1.1rem;
}
.timeline-dot {
  position: absolute;
  left: -1.5rem;
  top: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--purple);
}
.timeline-title { font-size: .875rem; font-weight: 500; margin-bottom: .2rem; }
.timeline-time  { font-size: .75rem; color: var(--text-muted); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  height: 4px;
  background: var(--bg-hover);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--grad-primary);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ============================================================
   UTILITY
   ============================================================ */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: .75rem; }
.gap-3 { gap: 1rem; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: .75rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: .75rem; }
.mb-3 { margin-bottom: 1rem; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: .8rem; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
  top: -200px; left: -100px;
  pointer-events: none;
}
.login-wrap::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 70%);
  bottom: -200px; right: -100px;
  pointer-events: none;
}
.login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.login-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
}
.login-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-sub { font-size: .8rem; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
.login-heading { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 1.5rem; }

.alert {
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  margin-bottom: 1rem;
}
.alert-error   { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.alert-info    { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #93c5fd; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── LIGHT MODE: Override all hardcoded dark values ─────────────────── */

/* Stat cards - replace dark gradient with clean white */
[data-theme="light"] .stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f7ff 100%) !important;
  border-color: rgba(109,40,217,.12) !important;
  box-shadow: 0 1px 4px rgba(109,40,217,.06), 0 2px 8px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .stat-card::before { background: linear-gradient(90deg, var(--purple), var(--blue)) !important; opacity: .6 !important; }
[data-theme="light"] .stat-card::after { background: radial-gradient(circle, rgba(109,40,217,.06) 0%, transparent 70%) !important; }
[data-theme="light"] .stat-card:hover {
  border-color: rgba(109,40,217,.25) !important;
  box-shadow: 0 4px 16px rgba(109,40,217,.1), 0 2px 6px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .stat-value { color: #18183a !important; }
[data-theme="light"] .stat-label { color: #7c6fa0 !important; }

/* Cards - override dark gradient */
[data-theme="light"] .card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%) !important;
}
[data-theme="light"] .card::before { background: linear-gradient(180deg, rgba(124,58,237,.02) 0%, transparent 100%) !important; }
[data-theme="light"] .card:hover {
  transform: translateY(-1px);
  border-color: rgba(109,40,217,.22) !important;
  box-shadow: 0 4px 20px rgba(109,40,217,.1), 0 1px 4px rgba(0,0,0,.05) !important;
}

/* Page title - remove gradient text for light mode */
[data-theme="light"] .page-title {
  background: linear-gradient(135deg, #18183a 0%, #4c1d95 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Form controls - white background */
[data-theme="light"] .form-control {
  background: #ffffff !important;
  border-color: rgba(109,40,217,.18) !important;
  color: #18183a !important;
  box-shadow: inset 0 1px 2px rgba(109,40,217,.04) !important;
}
[data-theme="light"] .form-control:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1) !important;
  background: #ffffff !important;
}

/* Modals - white background */
[data-theme="light"] .modal {
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%) !important;
  border-color: rgba(109,40,217,.15) !important;
  box-shadow: 0 20px 60px rgba(109,40,217,.15), 0 4px 16px rgba(0,0,0,.08) !important;
}
[data-theme="light"] .modal-header {
  background: rgba(124,58,237,.04) !important;
  border-bottom-color: rgba(109,40,217,.1) !important;
}
[data-theme="light"] .modal-footer {
  background: rgba(124,58,237,.03) !important;
  border-top-color: rgba(109,40,217,.1) !important;
}
[data-theme="light"] .modal-title { color: #18183a !important; }
[data-theme="light"] .modal-overlay { background: rgba(24,24,58,.35) !important; }

/* Background dot grid - lighter for light mode */
[data-theme="light"] .page-content::before {
  background-image: radial-gradient(rgba(109,40,217,.05) 1px, transparent 1px) !important;
}

/* Topbar search bar */
[data-theme="light"] .search-bar {
  background: rgba(109,40,217,.04) !important;
  border-color: rgba(109,40,217,.14) !important;
}
[data-theme="light"] .search-bar:focus-within {
  border-color: rgba(109,40,217,.35) !important;
  background: #ffffff !important;
}

/* Sidebar footer */
[data-theme="light"] .sidebar-footer { background: rgba(109,40,217,.03) !important; }

/* Buttons in light mode */
[data-theme="light"] .btn-ghost {
  color: #4a4870 !important;
  border-color: rgba(109,40,217,.18) !important;
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(124,58,237,.07) !important;
  color: var(--purple) !important;
}
[data-theme="light"] .btn-secondary {
  background: #f4f2ff !important;
  border-color: rgba(109,40,217,.18) !important;
  color: #4c1d95 !important;
}

/* Tables in light mode */
[data-theme="light"] .table thead tr { background: rgba(109,40,217,.04) !important; }
[data-theme="light"] .table tr:hover td { background: rgba(109,40,217,.04) !important; }
[data-theme="light"] .table th { color: #7c6fa0 !important; }
[data-theme="light"] .table td { color: #18183a !important; }
[data-theme="light"] .table th, [data-theme="light"] .table td { border-bottom-color: rgba(109,40,217,.08) !important; }

/* Nav dividers in light mode */
[data-theme="light"] .nav-divider { color: #9c88cc !important; opacity: .85 !important; }

/* Empty states */
[data-theme="light"] .empty-state::before { background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(124,58,237,.06) 0%, transparent 70%) !important; }
[data-theme="light"] .empty-icon { filter: drop-shadow(0 0 12px rgba(109,40,217,.2)) !important; }
[data-theme="light"] .empty-title { color: #18183a !important; }
[data-theme="light"] .empty-desc { color: #7c6fa0 !important; }

/* Tab buttons */
[data-theme="light"] .tab-btn { color: #7c6fa0 !important; }
[data-theme="light"] .tab-btn:hover { color: var(--purple) !important; background: rgba(124,58,237,.06) !important; }
[data-theme="light"] .tab-btn.active { color: var(--purple) !important; background: rgba(124,58,237,.08) !important; border-bottom-color: var(--purple) !important; }
[data-theme="light"] .tabs { border-bottom-color: rgba(109,40,217,.15) !important; }

/* Company switcher */
[data-theme="light"] .company-switcher { background: #f4f2ff !important; border-color: rgba(109,40,217,.12) !important; }

/* Page content headings - inline styles with color:#fff */
[data-theme="light"] .page-content [style*="color:#fff"],
[data-theme="light"] .page-content [style*="color: #fff"],
[data-theme="light"] .page-content [style*="color:white"] {
  color: #18183a !important;
}
/* But keep coloured text and button text */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
[data-theme="light"] [style*="color:var(--purple"],
[data-theme="light"] [style*="color:var(--green"],
[data-theme="light"] [style*="color:var(--red"],
[data-theme="light"] [style*="color:var(--amber"] { /* keep intentional colours */ }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(109,40,217,.2) !important; }

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
    transition: transform var(--transition);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-wrap { margin-left: 0 !important; max-width: 100vw; overflow-x: clip; }
  .mobile-menu-btn { display: block; }
  .topbar { padding: 0 1rem; }
  .page-content { padding: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .kanban-board { flex-direction: column; }
  .kanban-col { flex: none; width: 100%; max-height: none; }
}

/* Collapsed sidebar re-open trigger */
.sidebar.collapsed { overflow: visible; }
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar-collapsed-handle {
  display: none;
  position: fixed;
  left: var(--sidebar-collapsed);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 100;
  color: var(--text-muted);
  transition: background .15s;
}
.sidebar-collapsed-handle:hover { background: var(--purple); color: white; }

/* ============================================================
   MOBILE RESPONSIVE — Full pass
   Breakpoints: 900px (tablet), 600px (phone), 400px (small phone)
   ============================================================ */

@media (max-width: 900px) {

  /* Sidebar overlay */
  .sidebar {
    position: fixed !important;
    z-index: 200;
    height: 100dvh;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    backdrop-filter: blur(2px);
  }
  .sidebar.mobile-open ~ .sidebar-overlay,
  .sidebar-overlay.active { display: block; }

  /* Topbar */
  .topbar { gap: .5rem; }
  .topbar-right { gap: .4rem; }
  .topbar-time { display: none; }
  .topbar h1.page-title { font-size: 1rem; }

  /* Company context pill - shorter on mobile */
  .topbar-right > div > div[style*="purple"] span { 
    max-width: 80px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
  }

  /* Page content */
  .page-content { padding: .75rem; }

  /* Cards */
  .card { padding: .85rem; }

  /* Tables - make scrollable */
  .table-wrap, table { 
    display: block; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Modals - full screen on mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto;
  }

  /* Form rows become single column */
  .form-row { grid-template-columns: 1fr !important; gap: .6rem; }

  /* Buttons in topbar */
  .topbar .btn { font-size: .75rem; padding: .3rem .6rem; }

  /* Tabs - scrollable */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Stats grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }

  /* Kanban */
  .kanban-board { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .kanban-col { min-width: 260px; }

  /* Pipeline stages grid on mobile */
  .stage-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 600px) {

  /* Hide less important table columns */
  table th:nth-child(n+4),
  table td:nth-child(n+4) { display: none; }

  /* But keep important cols visible on contacts */
  .contacts-table th,
  .contacts-table td { display: table-cell !important; }
  .contacts-table { font-size: .78rem; }
  .contacts-table th:nth-child(n+5),
  .contacts-table td:nth-child(n+5) { display: none !important; }

  /* Stats - single column */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }

  /* Cards in list - tighter */
  .card { padding: .7rem; border-radius: 8px; }
  .card-header { flex-wrap: wrap; gap: .4rem; }

  /* Page title smaller */
  .topbar h1.page-title { font-size: .95rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Hide topbar action labels - show just icons on very small */
  .topbar .btn span.btn-label { display: none; }

  /* Modal fills more */
  .modal { max-height: 96dvh !important; }
  .modal-body { padding: 1rem; }
  .modal-footer { padding: .75rem 1rem; }

  /* Form controls full width */
  .form-control, .form-group { width: 100%; }

  /* Badge wrapping */
  .badge { font-size: .65rem; }

  /* Empty state */
  .empty-state { padding: 2rem 1rem; }

  /* Company switcher dropdown - full width */
  .topbar select { max-width: 110px !important; font-size: .7rem; }

  /* Plan card grid */
  #planPicker { grid-template-columns: repeat(2,1fr) !important; }

  /* Module toggle grid */
  #moduleToggles { grid-template-columns: repeat(2,1fr) !important; }

  /* Staff KB layout - single column */
  #staffKbLayout { grid-template-columns: 1fr !important; }

  /* Ticket thread */
  .ticket-thread { gap: .5rem; }

  /* Content generate - platform buttons */
  .platform-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* MRR usage grid */
  .mrr-usage-grid { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 400px) {
  .page-content { padding: .5rem; }
  .card { padding: .6rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .modal-body { padding: .75rem; }
  .topbar { padding: 0 .5rem; }
  .topbar h1.page-title { max-width: 90px; }
  .topbar select { max-width: 80px !important; font-size: .68rem; }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

/* ── Extra mobile fixes ─────────────────────────── */
@media (max-width: 700px) {
  /* Dashboard stat strip: 2 per row on phone */
  .stat-strip { grid-template-columns: repeat(2,1fr) !important; gap:.5rem !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .tab-nav { overflow-x:auto; white-space:nowrap; flex-wrap:nowrap !important; }
  .tab-nav .tab-btn { flex-shrink:0; }
  .kanban-board { padding-bottom:.75rem; }
  .kanban-col { min-width:240px !important; }
  .topbar-actions { gap:.25rem !important; }
  .topbar-actions .btn { padding:.25rem .45rem !important; font-size:.72rem !important; }
  .nav-divider { padding:.35rem .6rem .1rem !important; }
}
  .nav-item { min-height: 44px; }
  .form-control { min-height: 44px; font-size: 16px !important; } /* Prevent iOS zoom */
  select.form-control { font-size: 16px !important; }
  .tab-btn { min-height: 40px; padding: .5rem .85rem; }
  input[type=checkbox], input[type=radio] { 
    width: 18px; height: 18px; 
    cursor: pointer; 
  }
}

/* ============================================================
   ONBOARDING TIP CARDS  (Earlybird #7)
   Dismissible per-user; renderable from PHP via render_tip_card().
   ============================================================ */
.tip-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.tip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.tip-card-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: .01em;
}
.tip-card-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 500;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.tip-card-dismiss:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.tip-card-body {
  color: var(--text-secondary);
  font-size: .87rem;
  line-height: 1.65;
}
.tip-card-body ol,
.tip-card-body ul {
  margin: .25rem 0 0;
  padding-left: 1.2rem;
}
.tip-card-body li { margin-bottom: .35rem; }
.tip-card-body li:last-child { margin-bottom: 0; }
.tip-card-body strong { color: var(--text-primary); font-weight: 600; }