/* ==========================================================================
   Beacon Dashboard — Design System (shared.css)
   Loaded by every dashboard page. Complete rewrite for Phase 2.3.
   Source of truth: docs/dashboard-design-guide.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* --- Backgrounds --- */
  --bg-page: #f4f6f9;
  --bg-card: #ffffff;
  --bg-sidebar: #111827;
  --bg-input: #ffffff;
  --bg-hover: #f3f4f6;
  --bg-active: #eff6ff;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* --- Text --- */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;

  /* --- Borders --- */
  --border: #e5e7eb;
  --border-hover: #d1d5db;
  --border-focus: #2563eb;

  /* --- Accent --- */
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-active: #1e40af;
  --accent-primary-light: #dbeafe;

  /* Legacy alias (some pages reference --accent-blue) */
  --accent-blue: var(--accent-primary);
  --accent-blue-hover: var(--accent-primary-hover);
  --accent-blue-bg: var(--accent-primary-light);

  /* --- Semantic --- */
  --success: #22c55e;
  --success-hover: #16a34a;
  --success-text: #15803d;
  --success-bg: #dcfce7;

  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-text: #b91c1c;
  --danger-bg: #fee2e2;

  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-text: #a16207;
  --warning-bg: #fef3c7;

  --info: #3b82f6;
  --info-hover: #2563eb;
  --info-text: #1d4ed8;
  --info-bg: #dbeafe;

  --neutral: #6b7280;
  --neutral-text: #4b5563;
  --neutral-bg: #f3f4f6;

  --purple: #a855f7;
  --purple-text: #7e22ce;
  --purple-bg: #f3e8ff;

  --orange: #f97316;
  --orange-text: #c2410c;
  --orange-bg: #ffedd5;

  /* --- Status colors (all 15 Beacon statuses) --- */
  /* new — neutral/gray */
  --status-new: var(--neutral);
  --status-new-bg: var(--neutral-bg);
  --status-new-text: var(--neutral-text);

  /* texting — info/blue */
  --status-texting: var(--info);
  --status-texting-bg: var(--info-bg);
  --status-texting-text: var(--info-text);

  /* waiting — warning/yellow */
  --status-waiting: var(--warning);
  --status-waiting-bg: var(--warning-bg);
  --status-waiting-text: var(--warning-text);

  /* engaged — info/blue */
  --status-engaged: var(--info);
  --status-engaged-bg: var(--info-bg);
  --status-engaged-text: var(--info-text);

  /* booking — purple */
  --status-booking: var(--purple);
  --status-booking-bg: var(--purple-bg);
  --status-booking-text: var(--purple-text);

  /* call_queue — orange */
  --status-call_queue: var(--orange);
  --status-call_queue-bg: var(--orange-bg);
  --status-call_queue-text: var(--orange-text);

  /* scheduled — success/green */
  --status-scheduled: var(--success);
  --status-scheduled-bg: var(--success-bg);
  --status-scheduled-text: var(--success-text);

  /* unassigned — warning/yellow */
  --status-unassigned: var(--warning);
  --status-unassigned-bg: var(--warning-bg);
  --status-unassigned-text: var(--warning-text);

  /* visited_interested — success/green bold */
  --status-visited_interested: var(--success);
  --status-visited_interested-bg: var(--success-bg);
  --status-visited_interested-text: var(--success-text);

  /* visited_not_home — warning/yellow */
  --status-visited_not_home: var(--warning);
  --status-visited_not_home-bg: var(--warning-bg);
  --status-visited_not_home-text: var(--warning-text);

  /* visited_followup — info/blue */
  --status-visited_followup: var(--info);
  --status-visited_followup-bg: var(--info-bg);
  --status-visited_followup-text: var(--info-text);

  /* not_interested — neutral/gray */
  --status-not_interested: var(--neutral);
  --status-not_interested-bg: var(--neutral-bg);
  --status-not_interested-text: var(--neutral-text);

  /* disqualified — danger/red */
  --status-disqualified: var(--danger);
  --status-disqualified-bg: var(--danger-bg);
  --status-disqualified-text: var(--danger-text);

  /* stopped — danger/red */
  --status-stopped: var(--danger);
  --status-stopped-bg: var(--danger-bg);
  --status-stopped-text: var(--danger-text);

  /* closed — success/green */
  --status-closed: var(--success);
  --status-closed-bg: var(--success-bg);
  --status-closed-text: var(--success-text);

  /* Legacy status aliases (old pages may reference these) */
  --status-pending: var(--status-new);
  --status-pending-bg: var(--status-new-bg);
  --status-waiting-reply: var(--status-waiting);
  --status-waiting-reply-bg: var(--status-waiting-bg);
  --status-hot-lead: var(--orange);
  --status-hot-lead-bg: var(--orange-bg);
  --status-contacted: var(--purple);
  --status-contacted-bg: var(--purple-bg);
  --status-visited: #14b8a6;
  --status-visited-bg: #ccfbf1;
  --status-not-interested: var(--danger);
  --status-not-interested-bg: var(--danger-bg);
  --status-done: var(--neutral);
  --status-done-bg: var(--neutral-bg);
  --status-scheduled-bg: var(--success-bg);
  --status-not-interested-bg: var(--danger-bg);

  /* --- Shadows (layered, Stripe-style depth) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);

  /* --- Spacing (8px grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-normal: 200ms ease;

  /* --- Layout --- */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-primary-hover);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--accent-primary-light);
  color: var(--accent-primary-hover);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, .page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h2, .section-heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h3, .card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-primary);
}

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }

/* Tabular numbers for data alignment */
.tnum,
table td,
.stat-value {
  font-feature-settings: 'tnum';
}

/* Small / helper text */
.text-sm {
  font-size: 12px;
  line-height: 16px;
}

/* Uppercase label style (stat cards, table headers, section labels) */
.label-upper {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: var(--space-6);
  min-width: 0;
}

/* Page header */
.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 32px;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: var(--space-1);
}

/* Page content wrapper (for pages that need extra structure) */
.page-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* Section gap utility */
.section-gap {
  margin-top: var(--space-6);
}


/* ==========================================================================
   5. GRID & FLEX UTILITIES
   ========================================================================== */

/* Stat cards grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

/* Generic grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }


/* ==========================================================================
   6. SIDEBAR NAVIGATION
   ========================================================================== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition);
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-inverse);
  text-decoration: none;
}

.sidebar-logo svg {
  width: 28px;
  height: 28px;
  color: #60a5fa;
  flex-shrink: 0;
}

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

/* Section labels inside sidebar (uppercase dividers) */
.nav-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  padding: var(--space-4) var(--space-3) var(--space-1);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: #8b949e;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
  position: relative;
  min-height: 36px;
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  margin-left: -3px;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c9d1d9;
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-inverse);
  border-left-color: #60a5fa;
}

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

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #8b949e;
  flex-shrink: 0;
}

.sidebar-footer a {
  color: #8b949e;
  transition: color var(--transition-fast);
}

.sidebar-footer a:hover {
  color: var(--text-inverse);
}

.sidebar-footer-email {
  margin-bottom: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b949e;
  font-size: 12px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sidebar-footer-logout:hover {
  color: var(--text-inverse);
}

.sidebar-footer-logout svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mobile hamburger button */
.hamburger {
  display: none;
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  cursor: pointer;
  color: var(--text-primary);
  box-shadow: var(--shadow);
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.hamburger:hover {
  background: var(--bg-hover);
}

.hamburger svg {
  width: 24px;
  height: 24px;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 99;
}


/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs), var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Card internal structure */
.card-header {
  margin-bottom: var(--space-4);
}

.card-header .card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-primary);
}

.card-header .card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Stat cards (KPI) */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-xs), var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.stat-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--text-primary);
  font-feature-settings: 'tnum';
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 16px;
}

/* Stat change indicators */
.stat-change {
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.stat-change-up   { color: var(--success); }
.stat-change-down { color: var(--danger); }


/* ==========================================================================
   8. BADGES (Status Indicators)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}

/* Dot indicator before badge text */
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* --- All 15 Beacon status badges --- */

/* new (neutral/gray) */
.badge-new {
  background: var(--neutral-bg);
  color: var(--neutral-text);
}

/* texting (info/blue) */
.badge-texting {
  background: var(--info-bg);
  color: var(--info-text);
}

/* waiting (warning/yellow) */
.badge-waiting {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* engaged (info/blue) */
.badge-engaged {
  background: var(--info-bg);
  color: var(--info-text);
}

/* booking (purple) */
.badge-booking {
  background: var(--purple-bg);
  color: var(--purple-text);
}

/* call_queue (orange) */
.badge-call_queue {
  background: var(--orange-bg);
  color: var(--orange-text);
}

/* scheduled (success/green) */
.badge-scheduled {
  background: var(--success-bg);
  color: var(--success-text);
}

/* unassigned (warning/yellow) */
.badge-unassigned {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* visited_interested (success/green, bold) */
.badge-visited_interested {
  background: var(--success-bg);
  color: var(--success-text);
  font-weight: 600;
}

/* visited_not_home (warning/yellow) */
.badge-visited_not_home {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* visited_followup (info/blue) */
.badge-visited_followup {
  background: var(--info-bg);
  color: var(--info-text);
}

/* not_interested (neutral/gray) */
.badge-not_interested {
  background: var(--neutral-bg);
  color: var(--neutral-text);
}

/* disqualified (danger/red) */
.badge-disqualified {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* stopped (danger/red) */
.badge-stopped {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* closed (success/green) */
.badge-closed {
  background: var(--success-bg);
  color: var(--success-text);
}

/* --- Legacy badge aliases (old pages) --- */
.badge-pending        { background: var(--neutral-bg);  color: var(--neutral-text); }
.badge-waiting_reply  { background: var(--warning-bg);  color: var(--warning-text); }
.badge-hot_lead       { background: var(--orange-bg);   color: var(--orange-text); }
.badge-contacted      { background: var(--purple-bg);   color: var(--purple-text); }
.badge-visited        { background: #ccfbf1;            color: #0f766e; }
.badge-done           { background: var(--neutral-bg);  color: var(--neutral-text); }
.badge-not-interested { background: var(--danger-bg);   color: var(--danger-text); }


/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.btn:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
}

.btn-primary:active {
  background: var(--accent-primary-active);
  border-color: var(--accent-primary-active);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Secondary / Outline */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* Ghost (text-only) */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Danger */
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
}

.btn-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* Success */
.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-inverse);
}

.btn-success:hover {
  background: var(--success-hover);
  border-color: var(--success-hover);
}

.btn-success:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

/* Small button */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Icon-only button */
.btn-icon {
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}


/* ==========================================================================
   10. INPUTS & FORMS
   ========================================================================== */

.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 40px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.input::placeholder {
  color: var(--text-muted);
}

.input:disabled {
  background: #f9fafb;
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Error state */
.input-error,
.input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Select dropdown */
select.input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Textarea */
textarea.input {
  min-height: 80px;
  resize: vertical;
}

/* Labels */
label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Helper text */
.input-helper {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Error text */
.input-error-text {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--danger);
}

/* Form group */
.form-group {
  margin-bottom: var(--space-4);
}

/* Search wrapper with icon */
.search-wrapper {
  position: relative;
}

.search-wrapper svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-wrapper .input {
  padding-left: 36px;
}


/* ==========================================================================
   11. TABLES
   ========================================================================== */

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs), var(--shadow);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

table td {
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
  color: var(--text-primary);
  font-feature-settings: 'tnum';
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover td {
  background: #f3f4f6;
}

table tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

/* Sortable column headers */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  color: var(--text-primary);
}

.sort-icon {
  font-size: 10px;
  opacity: 0.4;
  margin-left: 4px;
}

.sortable.sorted .sort-icon {
  opacity: 1;
  color: var(--accent-primary);
}


/* ==========================================================================
   12. TOGGLE SWITCH
   ========================================================================== */

.toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle:hover::after {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.toggle.active {
  background: var(--success);
}

.toggle.active::after {
  transform: translateX(20px);
}

.toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}


/* ==========================================================================
   13. CHAT BUBBLES
   ========================================================================== */

.chat-bubble {
  max-width: 320px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

/* Outbound (sent by us) — blue, flat bottom-right */
.chat-outbound {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-radius: 16px 16px 4px 16px;
  margin-left: auto;
}

/* Inbound (received) — gray, flat bottom-left */
.chat-inbound {
  background: #f3f4f6;
  color: var(--text-primary);
  border-radius: 16px 16px 16px 4px;
}

/* Timestamp under bubble */
.chat-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Message group alignment */
.message-group {
  display: flex;
  flex-direction: column;
}

.message-group.outbound {
  align-items: flex-end;
}

.message-group.inbound {
  align-items: flex-start;
}


/* ==========================================================================
   14. TOAST NOTIFICATIONS
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-slide-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 360px;
  pointer-events: auto;
}

.toast.toast-exit {
  animation: toast-slide-out 200ms ease-in forwards;
}

.toast-success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success);
}

.toast-error {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger);
}

.toast-info {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info);
}

.toast-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}


/* ==========================================================================
   15. EMPTY STATE
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

.empty-state svg,
.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--text-muted);
  opacity: 0.6;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--neutral-bg);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

.empty-state-icon svg {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  margin: 0;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: 24px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 20px;
  max-width: 320px;
}

.empty-state p {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text-muted);
}


/* ==========================================================================
   16. LOADING & SKELETON STATES
   ========================================================================== */

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

.skeleton-row {
  height: 16px;
  margin-bottom: var(--space-3);
}

.skeleton-bar {
  height: 12px;
  margin-bottom: var(--space-2);
}

/* Skeleton container for grouping skeleton elements */
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Text skeleton: simulates lines of text */
.skeleton-text {
  height: 14px;
  border-radius: var(--radius-sm);
}

.skeleton-text:last-child {
  width: 60%;
}

/* Card skeleton: simulates a full card with padding and shadow */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.skeleton-card .skeleton {
  margin-bottom: var(--space-3);
}

.skeleton-card .skeleton:last-child {
  margin-bottom: 0;
}

/* Stat skeleton: simulates a stat card */
.skeleton-stat {
  height: 88px;
  border-radius: var(--radius-lg);
}

/* Row skeleton: simulates a table row */
.skeleton-row {
  height: 16px;
  margin-bottom: var(--space-3);
}

/* Avatar skeleton: circular placeholder */
.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.skeleton-avatar.skeleton-avatar-sm {
  width: 28px;
  height: 28px;
}

.skeleton-avatar.skeleton-avatar-lg {
  width: 48px;
  height: 48px;
}

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


/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */

/* --- Existing animations --- */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fade-up 0.3s ease-out;
}

/* --- Page transitions --- */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in utility */
.fade-in {
  animation: fadeIn 200ms ease-out both;
}

/* Page enter: combined fade + slide for page content on load */
.page-enter {
  animation: slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --- Micro-animations --- */

/* Pulse animation for notification dots */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Staggered fade-in for list items */
.stagger-in > * {
  opacity: 0;
  animation: slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-in > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-in > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-in > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-in > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-in > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-in > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-in > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-in > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-in > *:nth-child(9)  { animation-delay: 400ms; }
.stagger-in > *:nth-child(10) { animation-delay: 450ms; }
.stagger-in > *:nth-child(n+11) { animation-delay: 500ms; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-up,
  .page-enter,
  .stagger-in > *,
  .card,
  .stat-card,
  .toast {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ==========================================================================
   18. STAT CARD ENHANCEMENTS (Trend Indicators)
   ========================================================================== */

/* Trend indicator: up/down with arrow */
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.stat-trend.up {
  color: var(--success-text);
  background: var(--success-bg);
}

.stat-trend.up::before {
  content: '\2191';  /* up arrow */
  font-size: 11px;
}

.stat-trend.down {
  color: var(--danger-text);
  background: var(--danger-bg);
}

.stat-trend.down::before {
  content: '\2193';  /* down arrow */
  font-size: 11px;
}

/* Sparkline placeholder area inside stat cards */
.stat-sparkline {
  height: 24px;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}


/* ==========================================================================
   19. POLISH UTILITIES
   ========================================================================== */

/* Glassmorphism surface */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Section divider */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--space-6) 0;
  width: 100%;
}

.divider-sm {
  margin: var(--space-4) 0;
}

/* Avatar (circle with initials) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.avatar-md {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* Avatar color palette based on first letter (data-letter attribute or use from JS) */
.avatar[data-color="a"], .avatar[data-color="m"] { background: #3b82f6; }
.avatar[data-color="b"], .avatar[data-color="n"] { background: #8b5cf6; }
.avatar[data-color="c"], .avatar[data-color="o"] { background: #06b6d4; }
.avatar[data-color="d"], .avatar[data-color="p"] { background: #f59e0b; }
.avatar[data-color="e"], .avatar[data-color="q"] { background: #ef4444; }
.avatar[data-color="f"], .avatar[data-color="r"] { background: #22c55e; }
.avatar[data-color="g"], .avatar[data-color="s"] { background: #ec4899; }
.avatar[data-color="h"], .avatar[data-color="t"] { background: #14b8a6; }
.avatar[data-color="i"], .avatar[data-color="u"] { background: #f97316; }
.avatar[data-color="j"], .avatar[data-color="v"] { background: #6366f1; }
.avatar[data-color="k"], .avatar[data-color="w"] { background: #a855f7; }
.avatar[data-color="l"], .avatar[data-color="x"] { background: #0ea5e9; }
.avatar[data-color="y"] { background: #84cc16; }
.avatar[data-color="z"] { background: #e11d48; }

/* Fallback color if no data-color set */
.avatar:not([data-color]) {
  background: var(--accent-primary);
}

/* Notification dot (pulsing) */
.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

.notification-dot-sm {
  width: 6px;
  height: 6px;
}


/* ==========================================================================
   20. RESPONSIVE — TABLET (<1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Sidebar collapses to icon-only */
  .sidebar {
    width: var(--sidebar-collapsed);
    overflow: hidden;
  }

  .sidebar .nav-link span,
  .sidebar .sidebar-footer,
  .sidebar .nav-badge,
  .sidebar .sidebar-logo span,
  .sidebar .nav-section-label {
    display: none;
  }

  .sidebar .sidebar-header {
    padding: var(--space-5) var(--space-3);
  }

  .sidebar .sidebar-nav {
    padding: var(--space-3) 6px;
  }

  .sidebar .nav-link {
    justify-content: center;
    padding: 10px;
    border-left: none;
    margin-left: 0;
  }

  .main-content {
    margin-left: var(--sidebar-collapsed);
  }

  /* Tables must scroll horizontally */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   21. RESPONSIVE — MOBILE (<640px)
   ========================================================================== */

@media (max-width: 640px) {
  /* Sidebar becomes a full-width overlay drawer */
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    overflow: visible;
  }

  /* Restore hidden elements for the mobile drawer */
  .sidebar .nav-link span,
  .sidebar .sidebar-footer,
  .sidebar .nav-badge,
  .sidebar .sidebar-logo span,
  .sidebar .nav-section-label {
    display: unset;
  }

  .sidebar .sidebar-header {
    padding: var(--space-5) var(--space-4);
  }

  .sidebar .sidebar-nav {
    padding: var(--space-3) var(--space-2);
  }

  .sidebar .nav-link {
    justify-content: flex-start;
    padding: 8px var(--space-3);
    border-left: 3px solid transparent;
    margin-left: -3px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .hamburger {
    display: flex;
  }

  /* Main content adjustments */
  .main-content {
    margin-left: 0;
    padding: var(--space-4);
    padding-top: 56px;
  }

  .page-content {
    padding: var(--space-4);
  }

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

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Cards get tighter padding */
  .card {
    padding: var(--space-4);
  }

  .stat-card {
    padding: var(--space-3) var(--space-4);
  }

  /* Typography scales down */
  .page-header h1 {
    font-size: 20px;
  }

  .stat-card .stat-value {
    font-size: 26px;
    line-height: 34px;
  }

  /* Toast spans full width */
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .toast {
    max-width: 100%;
  }

  /* Tables scroll horizontally */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrapper table {
    min-width: 600px;
  }

  /* Buttons adjust */
  .btn {
    font-size: 13px;
    padding: 7px 12px;
  }

  .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Chat bubbles expand */
  .chat-bubble {
    max-width: 85%;
  }

  /* Disable hover lift on touch devices (sticky hover issue) */
  .card:hover,
  .stat-card:hover {
    transform: none;
  }

  /* Toast slides up from bottom on mobile */
  .toast {
    animation: toast-in 300ms ease-out;
  }
}


/* ==========================================================================
   22. PRINT
   ========================================================================== */

@media print {
  .sidebar,
  .hamburger,
  .sidebar-overlay,
  .toast-container {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  body {
    background: white;
  }
}