/* ================================================================
   CVAI — Global Design System
   Single source of truth for all design tokens and shared components
   ================================================================ */

/* ── 1. DESIGN TOKENS (canonical set — Phase 1) ───────────────── */
:root {
  /* Brand */
  --brand:     #4cc9f0;   /* cyan — links, active states, focus */
  --brand-2:   #f72585;   /* pink — gradient end only */
  --indigo:    #4361ee;   /* gradient start only */
  --gold:      #f59e0b;   /* upgrade accent */
  --grad-cta:  linear-gradient(135deg, var(--indigo), var(--brand-2));
  --grad-gold: linear-gradient(135deg, #f59e0b, #fbbf24);

  /* Surfaces — one background, stepped surfaces */
  --bg:           #080c14;
  --surface-1:    #0d1322;               /* panels, cards, modals */
  --surface-2:    rgba(255, 255, 255, 0.04); /* inputs, raised elements */
  --surface-3:    rgba(255, 255, 255, 0.07); /* hover */
  --border:       rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);

  /* Text — all AA on --bg */
  --text-1:   #f1f5f9;
  --text-2:   #94a3b8;
  /* WCAG-AA: #7c8a9e on #080c14 ≈ 4.6:1 — minimum for readable copy */
  --text-3:   #7c8a9e;
  --text-dim: #475569;    /* decorative only, never body copy */

  /* Status */
  --success: #22c55e;
  --warning: #eab308;
  --danger:  #ef4444;
  --info:    var(--brand);

  /* Type — 2 families + mono, 10-step scale */
  --font-display: 'Syne', 'Outfit', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  /* Steps are sized to the real distribution measured across the templates
     (52 distinct ad-hoc sizes), so adopting the scale moves any given piece
     of text by at most ~8% — no badge or pill reflows. */
  --fs-2xs:  0.65rem;   /* micro badges, count pills */
  --fs-xs:   0.72rem;   /* labels, captions, meta */
  --fs-sm:   0.8rem;    /* secondary UI text */
  --fs-base: 0.875rem;  /* body */
  --fs-md:   0.95rem;   /* emphasised body, card titles */
  --fs-lg:   1.125rem;  /* lead text */
  --fs-xl:   1.35rem;   /* subsection headings */
  --fs-2xl:  1.6rem;    /* panel headings */
  --fs-3xl:  clamp(1.75rem, 3.5vw, 2.75rem);  /* section titles */
  --fs-hero: clamp(2.4rem, 6vw, 4.5rem);      /* landing hero only */
  --lh-tight: 1.1;
  --lh-base:  1.55;
  --lh-loose: 1.7;
  --track-tight: -0.02em;

  /* Space — 4px base scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-pad: clamp(72px, 10vw, 120px);
  /* Content widths — three intents, replacing the per-screen 860/920/1300px */
  --content-narrow: 900px;    /* reading columns: history, profile, legal */
  --content-max:    1200px;   /* standard app + marketing sections */
  --content-wide:   1320px;   /* data-dense screens: dashboard */

  /* Radius — 5 values, nothing else */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Elevation — 1px borders + soft shadows; glow reserved for primary CTA */
  --shadow-1:  0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2:  0 8px 28px -4px rgba(0, 0, 0, 0.45);
  --shadow-3:  0 24px 64px -12px rgba(0, 0, 0, 0.55);
  --glow-cta:  0 8px 32px rgba(67, 97, 238, 0.35);
  --shadow-glow: 0 0 40px rgba(76, 201, 240, 0.15);

  /* Motion */
  --t-fast:  150ms ease-out;                    /* hover, color, borders */
  --t-base:  200ms ease;                        /* transforms, reveals */
  --t-slide: 300ms cubic-bezier(0.22, 1, 0.36, 1); /* drawers, panels */

  /* Brand tints */
  --brand-dim:   rgba(76, 201, 240, 0.12);
  --brand-glow:  rgba(76, 201, 240, 0.25);
  --brand-2-dim: rgba(247, 37, 133, 0.12);
  --brand-3:     #7209b7;   /* deep purple — landing accents only */
}

/* ── 2. RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  font-family: var(--font-body);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 10% 15%, rgba(76, 201, 240, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(247, 37, 133, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
}

/* ── Custom Scrollbar (WebKit) — dark theme ───────────────────────── */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: #1e1e2e; border-radius: 4px; }
::-webkit-scrollbar-thumb        { background: var(--brand); border-radius: 4px;
                                   border: 2px solid #1e1e2e; }
::-webkit-scrollbar-thumb:hover  { background: #3ba0c6; }
::-webkit-scrollbar-corner       { background: #1e1e2e; }

/* Table containers get the same treatment */
.table-responsive::-webkit-scrollbar              { width: 6px; height: 6px; }
.table-responsive::-webkit-scrollbar-track        { background: #12121f; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb        { background: var(--brand); border-radius: 4px;
                                                    border: 1px solid #12121f; }
.table-responsive::-webkit-scrollbar-thumb:hover  { background: #3ba0c6; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--brand) #1e1e2e; }

/* Selection */
::selection { background: rgba(76, 201, 240, 0.25); color: #fff; }

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────── */
.page-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  margin-bottom: 6px;
}

.page-title i {
  color: var(--brand);
}

.page-subtitle {
  font-size: var(--fs-md);
  color: var(--text-3);
  font-weight: 400;
  line-height: var(--lh-base);
  margin-bottom: 0;
}

/* Headings at --fs-xl and above get the tighter tracking/leading that keeps
   large type from looking loose. Applied here once rather than per screen. */
h1, h2, .display-title {
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
}

.section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  font-size: 0.9em;
}

/* Page Header block */
.page-header {
  padding: var(--sp-6) 0 var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: var(--sp-6);
}

/* ── SPACING POLICY ───────────────────────────────────────────────
   --sp-* is a LAYOUT scale: cards, panels, page sections, grid gaps.
   It is deliberately NOT applied to control padding (buttons, pills,
   badges, inputs), whose values are optically tuned to their text —
   snapping those to a 4px grid distorts them for no visual gain. */

/* ── 4. NAVBAR ───────────────────────────────────────────────── */
.navbar-custom {
  padding: 0 24px;
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.logo-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xl);
  background: linear-gradient(90deg, #ffffff, var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.logo-text i {
  -webkit-text-fill-color: var(--brand);
  font-size: var(--fs-lg);
}

/* Nav links */
.nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link-item {
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.nav-link-item:hover {
  color: var(--text-1);
  background: var(--surface-3);
}

.nav-link-item.active {
  color: var(--brand);
  background: var(--brand-dim);
}

/* Generation counter badge */
.gen-counter {
  background: var(--brand-dim);
  border: 1px solid rgba(76, 201, 240, 0.25);
  color: var(--brand);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Upgrade button */
.btn-upgrade {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border: none;
  color: #0a0a0a;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: inline-flex;
  align-items: center;
}

.btn-upgrade:hover {
  transform: translateY(-1px);
  color: #0a0a0a;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

/* User badge */
.user-badge {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.user-badge i {
  color: var(--brand);
}

.user-badge:hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text-1);
}

/* ── 5. HAMBURGER ────────────────────────────────────────────── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}

.hamburger-btn:hover {
  background: var(--surface-3);
}

/* ── 6. MOBILE DRAWER ───────────────────────────────────────── */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 997;
}

.mobile-backdrop.open {
  display: block;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background: rgba(10, 14, 24, 0.99);
  backdrop-filter: blur(30px);
  z-index: 998;
  transition: right 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

.mobile-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.drawer-close-btn {
  background: var(--surface-3);
  border: none;
  color: var(--text-2);
  font-size: var(--fs-md);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.drawer-nav-section {
  padding: 0 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-drawer .nav-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
}

.mobile-drawer .nav-link-item i {
  width: 18px;
  text-align: center;
  opacity: 0.7;
}

.drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.drawer-plan-badge {
  background: var(--brand-dim);
  border: 1px solid rgba(76, 201, 240, 0.2);
  color: var(--brand);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
  margin: 8px 12px;
  font-family: var(--font-mono);
}

/* ── 7. GLASS CARDS ─────────────────────────────────────────── */
.glass-card {
  background: var(--surface-1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76,201,240,0.4), rgba(247,37,133,0.3), transparent);
}

/* Card variants */
.glass-card-sm {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
}

/* Hoverable card */
.card-hoverable {
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.card-hoverable:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-3), var(--shadow-glow);
}

/* ── 8. BUTTONS ─────────────────────────────────────────────── */
/* Primary gradient button */
.btn-primary-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #4361ee, var(--brand-2));
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 13px 28px;
  border-radius: var(--r-lg);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  letter-spacing: 0.3px;
}

.btn-primary-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(67, 97, 238, 0.45);
  color: #fff;
  opacity: 0.92;
}

.btn-primary-grad:active {
  transform: translateY(0);
}

/* Ghost / outline button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 10px 20px;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
  color: var(--text-1);
}

/* Danger/delete button */
.btn-danger-sm {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.btn-danger-sm:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: var(--danger);
}

/* ── 9. FORM CONTROLS ───────────────────────────────────────── */
.form-control,
.form-select {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: var(--text-1) !important;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-control::placeholder {
  color: var(--text-3) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(76, 201, 240, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.10) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  outline: none;
}

.form-label {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}

/* Input with icon */
.input-icon-wrap {
  position: relative;
}

.input-icon-wrap i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: var(--fs-md);
  pointer-events: none;
  transition: color var(--t-fast);
}

.input-icon-wrap .form-control {
  padding-left: 44px;
}

.input-icon-wrap:focus-within i {
  color: var(--brand);
}

/* ── 10. STATUS BADGES ──────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-primary {
  background: var(--brand-dim);
  color: var(--brand);
  border: 1px solid rgba(76, 201, 240, 0.2);
}

.badge-secondary {
  background: var(--brand-2-dim);
  color: var(--brand-2);
  border: 1px solid rgba(247, 37, 133, 0.2);
}

.badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-warning {
  background: rgba(234, 179, 8, 0.1);
  color: var(--warning);
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── 10b. COMPANY AVATAR (local initials — no external image calls) ─── */
.company-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-dim);
  color: var(--brand);
  border: 1px solid rgba(76, 201, 240, 0.2);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-md);
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.company-avatar.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-base); border-radius: var(--r-sm); }
.company-avatar.avatar-lg { width: 50px; height: 50px; font-size: var(--fs-lg); border-radius: var(--r-md); }

/* ── 11. STAT CARDS ─────────────────────────────────────────── */
.stat-card-v2 {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base);
}

.stat-card-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--card-accent, var(--brand));
  opacity: 0.6;
  transition: opacity var(--t-base);
}

.stat-card-v2:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}

.stat-card-v2:hover::after {
  opacity: 1;
}

.stat-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  margin-bottom: 16px;
  background: var(--card-icon-bg, var(--brand-dim));
  color: var(--card-icon-color, var(--brand));
}

.stat-value-v2 {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--card-value-color, var(--brand));
  letter-spacing: -0.02em;
}

.stat-label-v2 {
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* ── 12. ACTIVITY ITEMS ─────────────────────────────────────── */
.activity-item-v2 {
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 6px;
  transition: background var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
}

.activity-item-v2:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

/* ── 13. QUICK ACTION LINKS ──────────────────────────────────── */
.quick-action-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-1);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  margin-bottom: 10px;
}

.quick-action-v2:hover {
  border-color: var(--brand);
  background: var(--brand-dim);
  color: #fff;
  transform: translateX(4px);
}

.quick-action-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

/* Empty-state + toast components are defined once, further down
   ("Empty State Component" and "Global Toast Notifications"). */

/* ── 15b. CONFIRM DIALOG ─────────────────────────────────────── */
.confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(8, 12, 20, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.confirm-overlay.open {
  display: flex;
  animation: fadeSlideUp 0.2s ease both;
}

.confirm-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--sp-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin: 0 auto 16px;
}

.confirm-message {
  color: var(--text-1);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin-bottom: 22px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.confirm-actions button { min-width: 112px; }

#confirmOk.confirm-danger {
  background: linear-gradient(135deg, #ef4444, #f87171) !important;
}

/* ── 16. LOADING OVERLAY ─────────────────────────────────────── */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 12, 20, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  align-items: center;
  justify-content: center;
}

.loading-overlay.active { display: flex; }

/* ── 17. MODAL ───────────────────────────────────────────────── */
.modal-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  color: var(--text-1) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 20px 24px;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 16px 24px;
}

.modal-body {
  padding: 24px;
}

.btn-close { filter: invert(1) !important; }

/* ── 18. ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(76, 201, 240, 0); }
}

/* Animation utilities */
.anim-fade-up {
  animation: fadeSlideUp 0.5s ease both;
}

.anim-delay-1 { animation-delay: 0.06s; }
.anim-delay-2 { animation-delay: 0.12s; }
.anim-delay-3 { animation-delay: 0.18s; }
.anim-delay-4 { animation-delay: 0.24s; }
.anim-delay-5 { animation-delay: 0.30s; }

/* ── 19. UTILITY CLASSES ─────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 20px 0;
}

/* ── 20. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hamburger-btn {
    display: flex !important;
  }

  .desktop-nav,
  .nav-actions {
    display: none !important;
  }

  .navbar-custom {
    padding: 0 16px;
    height: 58px;
  }

  .glass-card {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
  }

  .page-header {
    padding: var(--sp-5) 0 var(--sp-4);
    margin-bottom: var(--sp-5);
  }
}

@media (max-width: 480px) {
  .glass-card {
    padding: var(--sp-4);
  }

  .toast-container {
    right: 12px;
    left: 12px;
    bottom: 16px;
  }

  .toast-item {
    max-width: unset;
  }
}


/* =========================================
   Theme Presets & Custom Sliders
   ========================================= */

/* Theme Presets */
.theme-presets-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.theme-preset-pill {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.theme-preset-pill:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.theme-preset-pill.active {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
}

.theme-preset-pill .split-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

/* Tooltip for preset names */
.theme-preset-pill::after {
  content: attr(title);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 10;
}

.theme-preset-pill:hover::after {
  opacity: 1;
}

/* Custom Range Sliders */
.vs-range {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  outline: none;
  margin: 10px 0;
}

.vs-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3);
}

.vs-range::-webkit-slider-thumb {
  border: 2px solid #fff;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--accent, var(--brand));  /* --accent is studio-local */
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
  box-shadow: 0 0 8px rgba(76,201,240,0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

.vs-range:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(76,201,240,0.8);
}

.vs-range:focus::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.15);
}

/* ── Custom JS Font Dropdown ────────────────────── */
.font-dropdown {
  position: relative;
  width: 100%;
}
.font-dropdown-toggle {
  width: 100%;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: var(--fs-sm);
  padding: 10px 30px 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.font-dropdown-toggle:hover, .font-dropdown-toggle:focus {
  border-color: var(--accent);
  background: rgba(0,0,0,.4);
  outline: none;
}
.font-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--surface-1);
  border: 1px solid rgba(76,201,240,.3);
  border-radius: var(--r-sm);
  margin-top: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 100;
  display: none;
  overflow: hidden;
  animation: fadeInDown 0.2s ease;
}
.font-dropdown.open .font-dropdown-menu {
  display: block;
}
.font-dropdown-option {
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-1);
  transition: background var(--t-fast);
}
.font-dropdown-option:hover {
  background: rgba(76,201,240,.15);
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ── Sticky Form Nav ────────────────────────────── */
.vs-left-nav {
  position: sticky;
  top: 0;
  background: rgba(13,17,32,.95);
  backdrop-filter: blur(8px);
  z-index: 50;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(76,201,240,0.10);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vs-left-nav::-webkit-scrollbar { display: none; }
.vs-left-nav a {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--t-fast);
}
.vs-left-nav a:hover, .vs-left-nav a.active {
  color: #4cc9f0;
  background: rgba(76,201,240,.1);
}

.table-responsive {
    overflow: visible !important;
}
.app-table {
    position: relative;
    z-index: 1;
}

/* ── Accessible Focus (keyboard nav) ─────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* ── Global Toast Notifications ─────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
  min-width: 220px;
  max-width: 380px;
}

.toast-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-item.toast-success { background: rgba(22, 163, 74, 0.92); }
.toast-item.toast-danger  { background: rgba(220, 38, 38, 0.92); }
.toast-item.toast-warning { background: rgba(202, 138, 4, 0.92); }
.toast-item.toast-info    { background: rgba(14, 116, 144, 0.92); }

.toast-item i { font-size: var(--fs-md); flex-shrink: 0; }

/* ── Empty State Component ───────────────────────────────────── */
.empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 48px;
  gap: 0;
}

.empty-icon-box {
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  background: var(--brand-dim);
  border: 1px solid rgba(76,201,240,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  margin-bottom: 20px;
}

.empty-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}

.empty-desc {
  font-size: var(--fs-base);
  color: var(--text-3);
  line-height: 1.65;
  max-width: 340px;
  margin-bottom: 24px;
}

/* Kanban empty column state */
.kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  gap: 8px;
  opacity: 0.55;
}
.kanban-empty i  { font-size: var(--fs-2xl); color: var(--text-3); }
.kanban-empty p  { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }

/* ── 20. LUXURY SAAS DESIGN UTILITIES ───────────────────────── */
.glass-panel {
  background: rgba(16, 22, 40, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.glass-panel:hover {
  border-color: var(--border-hover);
}

.glow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--brand-dim);
  border: 1px solid rgba(76, 201, 240, 0.3);
  color: var(--brand);
  box-shadow: 0 0 16px rgba(76, 201, 240, 0.15);
}

.shimmer-badge {
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(76,201,240,0.2), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  animation: shimmer-swipe 4s infinite linear;
}
@keyframes shimmer-swipe {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}