/* ═══════════════════════════════════════════════════════════════
   AUTORENT EUROPE — Design System v2.0
   ═══════════════════════════════════════════════════════════════
   Reset 2026-04-26: Stripe / Linear / Vercel-inspired B2B mature.

   Principles:
     - Restraint over expression: limited palette, no decorative gradients
     - Tabular numerals for financial data
     - Generous whitespace — content density via layout, not via cramming
     - Status conveyed by uppercase badges, NOT emoji
     - Border radius medium (8-12px), shadows subtle
     - Inter system stack, no decorative serifs in UI chrome

   Backwards-compatibility:
     - Existing CSS variables (--navy-*, --copper-*, --paper, etc.) preserved
       and remapped to the new palette so existing templates continue to render
     - Existing classes (.btn-primary, .pill-*, .card, etc.) preserved with
       updated visual definitions
     - New tokens added under the gray-* / blue-* / etc. namespace + new
       semantic aliases for new components

   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── New design system: Gray scale (neutrals) ── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ── New design system: Semantic colors ── */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;   /* Primary action */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-500: #10b981;  /* Success */
  --green-700: #047857;
  --green-900: #064e3b;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;  /* Warning */
  --amber-700: #b45309;
  --amber-900: #78350f;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;    /* Danger */
  --red-700: #b91c1c;
  --red-900: #7f1d1d;

  /* ── Backwards-compat aliases (existing template inline-styles depend on these) ── */
  /* Map legacy navy-* to new gray-* (the new "primary text" color) */
  --navy-50:  var(--gray-50);
  --navy-100: var(--gray-100);
  --navy-200: var(--gray-200);
  --navy-300: var(--gray-300);
  --navy-400: var(--gray-400);
  --navy-500: var(--gray-500);
  --navy-600: var(--gray-600);
  --navy-700: var(--gray-700);
  --navy-800: var(--gray-800);
  --navy-900: var(--gray-900);
  --navy-950: var(--gray-900);

  /* Copper scale — restored Sprint 4a (S4.6) după Sprint 2 colaps.
     Folosirea corectă pe context:
       --copper-500 = BRAND PRIMARY (#f47c48) — AR titles, primary buttons,
                      .btn-primary background. ÎNTOTDEAUNA pentru references
                      brand-visible (consistency garantată).
       --copper-700 = darker emphasis / hover state — link:hover, accent
                      pe context unde 500 ar fi prea bright (NICIODATĂ
                      pentru AR titles default — vezi pre-flight C3.5).
       50/100/300 = light backgrounds, badges, alert tints.
       900 = dark text accent, footers cu copper hint.
     Pre-flight C3.5 a migrat toate references --copper-700 → --copper-500
     pentru AR titles, asigurând că restore scale nu sparge brand vizual. */
  --copper-50:  #fef3ec;
  --copper-100: #fde0cd;
  --copper-200: #fcc8a8;
  --copper-300: #fab089;
  --copper-400: #f79669;
  --copper-500: #f47c48;  /* BRAND PRIMARY */
  --copper-600: #e16236;
  --copper-700: #c4612e;  /* darker emphasis / hover */
  --copper-800: #8e4520;
  --copper-900: #6b2e0f;

  /* Legacy neutrals → new neutrals.
     Sprint 5a (C7) rename: --cream/--mist → --cream-cool/--mist-cool
     pentru claritate semantică vs warm AR palette (--cream-warm,
     --mist-warm definite mai jos). Toate consumatorii au fost migrați. */
  --paper:      #ffffff;
  --cream-cool: var(--gray-50);    /* cool neutral, modal partials Sprint 4 */
  --stone:      var(--gray-200);
  --mist-cool:  var(--gray-300);   /* cool border, modal partials Sprint 4 */
  --smoke:      var(--gray-500);
  --charcoal:   var(--gray-700);
  --ink:        var(--gray-900);

  /* Semantic (legacy names, new values) */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  /* AR brand red — warm cărămiziu, distinct de --danger (Tailwind red-500 #ef4444 cool).
     Folosit pentru error messages business (overdue, _delRow buttons, .tr-btn-danger).
     Sprint 5a (P2) consolidare token; migrare graduală inline → var() în PR-5d. */
  --danger-brand: #c23b3b;

  /* ── AR warm palette (Sprint 5a P3) ────────────────────────────────────
     Identitate vizuală AR = warm copper/amber tonalitate.
     Distinct de --cream/--mist (cool gray-50/300, folosite în Sprint 4
     partials — modale, deal_new dropdown-uri).
     Migrare graduală inline → var() eșalonată: cream + mist completat
     în PR-5b (2026-04-29), navy planificat în PR-5c. */
  --cream-warm: #faf8f3;   /* warm cream tint, identitate AR */
  --mist-warm:  #e8e3d8;   /* warm gold-cast border tint */
  --navy-deep:  #1f2b3c;   /* deep AR navy text + accents */

  /* Input field background — ultra-light warm cream, distinct de --paper white.
     Sprint 5a (P5) consolidare token; folosit la input[type=search],
     .field input, .toolbar input pe admin pages + transport_new + transports. */
  --input-bg: #fcfbf8;

  /* ── Data quality semantic palette (Sprint 6e PR-6e) ──────────────────
     Vezi /vehicles list și deal_detail.html VIN audit trail badges.
     Distincte pentru a comunica gradul de încredere în audit data:
       verified  = manual reviewed → Tailwind green-600 (high confidence)
       partial   = derivat operational, NU verified → amber-600 (moderate)
       estimated = backfilled cu FX rate sau heuristic → orange-500 (low)
       missing   = NU populat → AR brand red (alarm)
     Estimated folosește Tailwind orange-500 — în token, NU inline,
     așa evită forbidden test din test_color_consistency_audit
     (test scanează inline hex în static assets, exempt token declarations
     pe pattern --data-quality-*). */
  --data-quality-verified:  #059669;  /* Tailwind green-600 */
  --data-quality-partial:   #d97706;  /* Tailwind amber-600 (consistent CMR alert) */
  --data-quality-estimated: #f97316;  /* Tailwind orange-500 */
  --data-quality-missing:   var(--danger-brand);  /* alias AR cărămiziu */

  /* ── Responsive breakpoints (Sprint 3 mobile redesign) ──
     Vars sunt pentru reference — @media queries folosesc literal values
     (CSS custom properties don't work în media query expressions). */
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
  --bp-desktop: 1280px;

  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Inter', -apple-system, sans-serif;  /* No more decorative serif — title via Inter weight */
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Spacing system: Tailwind-compatible 4/8/12/16/24/32/48/64 ── */
  /* New canonical names */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Backwards-compat: legacy --sp-N (Fibonacci-ish) mapped to closest new step */
  --sp-1: 4px;     /* was 2px */
  --sp-2: 8px;     /* was 6px */
  --sp-3: 12px;    /* was 10px */
  --sp-4: 16px;    /* was 16px (unchanged) */
  --sp-5: 24px;    /* was 24px (unchanged) */
  --sp-6: 32px;    /* was 40px */
  --sp-7: 48px;    /* was 64px */
  --sp-8: 64px;    /* was 96px */

  /* ── Radius: medium-rounded modern look ── */
  --radius-sm: 4px;
  --radius:    8px;     /* default */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Backwards-compat */
  --r-sm: 4px;     /* was 2px */
  --r-md: 8px;     /* was 4px */
  --r-lg: 12px;    /* was 6px */
  --r-xl: 16px;    /* was 10px */

  /* ── Shadow: subtle, layered ── */
  --shadow-xs:  0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm:  0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow:     0 4px 6px -1px rgba(17, 24, 39, 0.07), 0 2px 4px -2px rgba(17, 24, 39, 0.05);
  --shadow-md:  0 10px 15px -3px rgba(17, 24, 39, 0.08), 0 4px 6px -4px rgba(17, 24, 39, 0.05);
  --shadow-lg:  0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 8px 10px -6px rgba(17, 24, 39, 0.05);

  /* Backwards-compat */
  --sh-subtle: var(--shadow-xs);
  --sh-low:    var(--shadow-sm);
  --sh-med:    var(--shadow);
  --sh-high:   var(--shadow-lg);

  /* ── Transitions ── */
  --t-fast:   100ms ease-out;
  --t-normal: 150ms ease-out;
  --t-slow:   250ms ease-out;

  /* ── Focus ring (accessibility) ── */
  --ring: 0 0 0 3px rgba(59, 130, 246, 0.20);  /* blue-500 @ 20% */
}

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

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--gray-50);
  min-height: 100vh;
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--blue-700); }
a:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Tabular numerals for any element with numeric content */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

h1 { font-size: 32px; font-weight: 600; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.font-serif { font-family: var(--font-serif); }
.font-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.text-xs    { font-size: 11px; }
.text-sm    { font-size: 12px; }
.text-base  { font-size: 14px; }
.text-lg    { font-size: 16px; }
.text-xl    { font-size: 18px; }
.text-2xl   { font-size: 24px; }
.text-3xl   { font-size: 32px; }

.text-dim     { color: var(--gray-500); }
.text-muted   { color: var(--gray-400); }
.text-copper  { color: var(--blue-600); }   /* legacy alias */
.text-navy    { color: var(--gray-900); }   /* legacy alias */
.text-success { color: var(--green-700); }
.text-warning { color: var(--amber-700); }
.text-danger  { color: var(--red-700); }

.tracking-wide  { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — App shell, sidebar, topbar
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--gray-900);
  color: var(--gray-300);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--gray-800);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-brand {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--gray-800);
}

.sidebar-brand-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.sidebar-brand-link:hover {
  opacity: 0.85;
}

.brand-logo {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.brand-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
}

.nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.nav-section {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: var(--space-4) var(--space-3) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  color: var(--gray-300);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: 2px;
  position: relative;
}

.nav-item:hover {
  background: var(--gray-800);
  color: #ffffff;
}

.nav-item.active {
  background: var(--gray-800);
  color: #ffffff;
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--blue-500);
  border-radius: var(--radius-full);
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--gray-800);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-600);
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  overflow-y: auto;
  margin-left: 240px;
}

.topbar {
  height: 56px;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--gray-700);
}

/* User info link → /account. Stil neutru: dark name + gray email,
   hover bg gri light. NU folosi --blue-* aici (era albastru anterior). */
.topbar-user-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease;
}
.topbar-user-link:hover { background: var(--gray-100); }
.topbar-user-name { font-weight: 600; color: #231f20; }
.topbar-user-email { font-size: 11px; color: var(--gray-500); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: #231f20;            /* brand dark — was --blue-500 */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Logout button — danger styling: red text + bg, log-out icon */
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--red-100);
  background: var(--red-50);
  color: var(--red-700);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-logout:hover {
  background: var(--red-100);
  border-color: #fecaca;
  color: var(--red-700);
}
.btn-logout svg, .btn-logout .lucide { width: 14px; height: 14px; }

.content {
  flex: 1;
  padding: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Mobile + tablet (Sprint 3): hide sidebar, full-width content,
   reserve space for fixed bottom nav. Hamburger drawer + bottom nav
   adăugate prin _mobile_nav.html partial included în base.html. */
@media (max-width: 1023.98px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; }
  /* Reserve 64px pentru .bottom-nav fixed bottom (M2). */
  body { padding-bottom: 64px; }
  .content {
    padding: var(--space-4);    /* 16px pe mobile */
    max-width: 100%;
  }
}

/* Tablet only — slightly more breathing space */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .content {
    padding: var(--space-5);    /* 24px tablet */
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.page-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: var(--space-2);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

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

.card-title {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--gray-900);
  font-weight: 600;
  letter-spacing: -0.005em;
  /* legacy support — old uppercase mono look removed */
  text-transform: none;
}

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

/* ═══════════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  gap: var(--space-4);
}

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

/* Tablet (640..1023.98px): 4-col → 2-col, 3-col → 2-col */
@media (max-width: 1023.98px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Phone (<640px): toate stack vertical 1 col (Sprint 3 spec) */
@media (max-width: 639.98px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   STATS / KPI CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  position: relative;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.stat-value {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.stat-delta {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-delta.positive { color: var(--green-700); }
.stat-delta.negative { color: var(--red-700); }

.stat-icon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--gray-300);
  width: 20px;
  height: 20px;
}

/* Mobile KPI cards — slight padding reduction + label 12px (Sprint 3 spec). */
@media (max-width: 639.98px) {
  .stat { padding: var(--space-4); }
  .stat-label { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--t-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

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

/* Lucide icons inside buttons */
.btn svg, .btn .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary — filled brand orange (verified din .cls-2 în logo-brandsheet.svg) */
.btn-primary {
  background: #f47c48;
  color: #ffffff;
  border-color: #f47c48;
}
.btn-primary:hover {
  background: #d96d3e;
  border-color: #d96d3e;
}
.btn-primary:active {
  background: #c4612e;
  border-color: #c4612e;
}

/* Secondary — outlined neutral (white bg + gray-300 border, ink text) */
.btn-secondary {
  background: #ffffff;
  color: #231f20;
  border-color: #d1d5db;
}
.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.btn-secondary:active {
  background: var(--gray-100);
}

/* Dark — filled brand dark (.cls-3 #231f20) — folosit la "Pachet SK" etc. */
.btn-dark {
  background: #231f20;
  color: #ffffff;
  border-color: #231f20;
}
.btn-dark:hover {
  background: #0f0c0d;
  border-color: #0f0c0d;
}
.btn-dark:active {
  background: #000000;
  border-color: #000000;
}

/* Slate — distinct secondary action (Tailwind slate-800/700/900). Folosit
   pentru acțiuni "secondary-but-prominent" care nu se potrivesc nici la
   .btn-secondary (white outline) nici la .btn-primary (orange CTA):
   ex Bulk add, Pachet SK. Vizibilă dar nu domină primary-ul orange. */
.btn-slate {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}
.btn-slate:hover {
  background: #334155;
  border-color: #334155;
}
.btn-slate:active {
  background: #0f172a;
  border-color: #0f172a;
}

/* Ghost — transparent text-only */
.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Danger — filled red */
.btn-danger {
  background: var(--red-500);
  color: #ffffff;
  border-color: var(--red-500);
}
.btn-danger:hover {
  background: var(--red-700);
  border-color: var(--red-700);
}

/* Sizes */
.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.btn-sm svg, .btn-sm .lucide { width: 14px; height: 14px; }

.btn-lg {
  height: 44px;
  padding: 0 var(--space-5);
  font-size: 15px;
}

.btn-block { width: 100%; }

/* Icon-only button */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
}
.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

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

.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
  margin-bottom: var(--space-2);
  text-transform: none;        /* override legacy uppercase */
  letter-spacing: 0;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-900);
  transition: all var(--t-fast);
  font-family: inherit;
}

.form-textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring);
}

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

.form-input:disabled {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

.form-helper {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: var(--space-2);
}

.form-error {
  display: block;
  font-size: 12px;
  color: var(--red-700);
  margin-top: var(--space-2);
}

.form-input.is-error,
.form-select.is-error {
  border-color: var(--red-500);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert svg, .alert .lucide {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-danger {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-700);
}

.alert-success {
  background: var(--green-50);
  border-color: var(--green-100);
  color: var(--green-700);
}

.alert-warning {
  background: var(--amber-50);
  border-color: var(--amber-100);
  color: var(--amber-700);
}

.alert-info {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}

/* ═══════════════════════════════════════════════════════════════
   DEAL DETAIL ACCORDION — Sprint 4d S4.4 (mobile-only, R3 protected)
   Wrapper post-render JS adaugă .card-collapsible + .is-collapsed.
   Desktop ≥1024px: clase scoase de JS, zero schimbare vizuală.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  .card-collapsible .card-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 36px;  /* loc pentru chevron */
  }
  .card-collapsible .card-header::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gray-700);
    border-bottom: 2px solid var(--gray-700);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .card-collapsible.is-collapsed .card-header::after {
    transform: translateY(-50%) rotate(-45deg);
  }
  .card-collapsible.is-collapsed .card-body {
    display: none;
  }
  .card-collapsible .card-header:focus-visible {
    outline: 2px solid var(--copper-500);
    outline-offset: -2px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEALS FILTERS — Sprint 4c S4.10 mobile bottom sheet
   Desktop ≥1024px: filtrele inline grid (5 fields + reset).
   Mobile <1024px: trigger button "Filtre (N)" → bottom sheet slide-up.
   ═══════════════════════════════════════════════════════════════ */

/* Filter card grid — desktop default. */
.deals-filter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.deals-filter-mobile-header { display: none; }
.deals-filter-mobile-actions { display: none; }
.deals-filter-mobile-trigger { display: none; }
.deals-filter-backdrop { display: none; }

@media (max-width: 1023.98px) {
  /* Hide reset button în grid (mobile uses Apply/Reset row instead). */
  .deals-filter-reset { display: none; }

  /* Trigger button — full-width, vizibil înlocuind cardul de pe desktop. */
  .deals-filter-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-700);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .deals-filter-mobile-trigger:hover { background: var(--gray-50); }
  .deals-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--copper-500);
    color: #fff;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
  }
  .deals-filter-count-badge[hidden] { display: none; }

  /* Card hidden by default pe mobile — devine bottom sheet când .is-open. */
  .deals-filter-card {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
  }
  .deals-filter-card.is-open {
    display: block;
    transform: translateY(0);
  }

  /* Mobile sheet header (drag handle + close). */
  .deals-filter-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
  }
  .deals-filter-mobile-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
  }
  .deals-filter-mobile-close {
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--gray-700);
    border-radius: 50%;
  }
  .deals-filter-mobile-close:hover { background: var(--gray-100); }

  /* Vertical stack pe mobile — fiecare field full-width. */
  .deals-filter-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 6px;
  }

  /* Apply/Reset row — sticky bottom in sheet. */
  .deals-filter-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 14px 0 8px;
    border-top: 1px solid var(--gray-200);
    margin-top: 14px;
    position: sticky;
    bottom: 0;
    background: #fff;
  }

  /* Backdrop — visible doar când e open. */
  .deals-filter-backdrop {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }
  .deals-filter-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OVERDUE ALERT — Sprint 4c S4.9
   Vertical stack mobile-first: row1 (icon + title), chips wrap, CTA button.
   Desktop ≥1024px: horizontal layout aerated (chips inline cu titlu).
   ═══════════════════════════════════════════════════════════════ */
.overdue-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--danger-brand);
  border-radius: var(--radius);
  align-items: stretch;
}
.overdue-alert-row1 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.overdue-alert-icon {
  flex-shrink: 0;
  color: var(--danger-brand);
  margin-top: 2px;
}
.overdue-alert-text { flex: 1; min-width: 0; }
.overdue-alert-title {
  font-weight: 600;
  font-size: 14px;
  color: #991b1b;
  line-height: 1.3;
}
.overdue-alert-summary {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gray-700);
}
.overdue-alert-count {
  font-weight: 700;
  color: var(--danger-brand);
}
.overdue-alert-suffix { color: var(--gray-700); }
.overdue-alert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.overdue-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.overdue-alert-cta {
  width: 100%;
  justify-content: center;
}

@media (min-width: 1024px) {
  /* Desktop: horizontal aerated — title + chips inline, CTA right edge */
  .overdue-alert {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 20px;
  }
  .overdue-alert-row1 { flex: 0 1 auto; }
  .overdue-alert-chips { flex: 1; }
  .overdue-alert-cta { width: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES — pills colorate uppercase
   New API: .badge .badge-{success|warning|danger|info|neutral}
   Legacy:  .pill .pill-{success|warning|danger|navy|copper}
   ═══════════════════════════════════════════════════════════════ */
.badge,
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  line-height: 1;
  white-space: nowrap;
}

.badge-success, .pill-success {
  background: var(--green-100);
  color: var(--green-900);
}

.badge-warning, .pill-warning {
  background: var(--amber-100);
  color: var(--amber-900);
}

.badge-danger, .pill-danger {
  background: var(--red-100);
  color: var(--red-900);
}

.badge-info {
  background: var(--blue-100);
  color: var(--blue-700);
}

.badge-neutral, .pill-navy {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* Legacy: copper now == info (blue) */
.pill-copper {
  background: var(--blue-100);
  color: var(--blue-700);
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #ffffff;
}

.table th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-900);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--t-fast);
}
.table tbody tr:hover {
  background: var(--gray-50);
}

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

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--gray-600);
}

.table-pagination-buttons {
  display: flex;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE SPECIFIC
   ═══════════════════════════════════════════════════════════════ */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  padding: var(--space-5);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.login-header {
  padding: var(--space-6) var(--space-6) var(--space-5);
  text-align: center;
}

.login-logo {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: var(--space-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

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

.login-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN V2 — Split-screen B2B layout (2026-04-26)
   ═══════════════════════════════════════════════════════════════
   Architecture: 50/50 desktop, stack mobile <768px.
   Left:  brand panel (dark gradient) cu logo SVG variant + tagline
   Right: form panel (white) cu input fields + sign-in button
   Brand: #f47c48 orange (signature), #231f20 black (text/symbol)
   ─────────────────────────────────────────────────────────────── */
.login-split {
  min-height: 100vh;
  display: flex;
  background: #ffffff;
  /* Override default body bg from .login-shell context */
}

.login-split-visual {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7) var(--space-7);
  background: linear-gradient(135deg, #231f20 0%, #2a1f1c 50%, #f47c48 130%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative element — orange accent dot top-right */
.login-split-visual::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(244, 124, 72, 0.18), transparent 70%);
  pointer-events: none;
}

.login-split-logo {
  width: 320px;
  max-width: 70%;
  height: auto;             /* preserve viewBox aspect ratio */
  object-fit: contain;      /* never crop on width-constrained parents */
  margin-bottom: var(--space-7);
  display: block;
}

.login-split-h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: var(--space-3);
  max-width: 480px;
}

.login-split-tagline {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: var(--space-6);
  max-width: 480px;
}

.login-split-meta {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.login-split-form {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-7) var(--space-6);
  background: #ffffff;
  position: relative;
}

.login-split-form-inner {
  width: 100%;
  max-width: 400px;
  text-align: center;          /* cascade center la toate child-urile text */
  animation: login-fade-in 240ms ease-out;
}

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

.login-split-form-h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
  text-align: center;
}

.login-split-form-subtitle {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* Form labels centered (matches global "tot conținutul centered" intent).
   În mod normal labels stau left pentru ușurință scan, dar pe login
   pagina B2B mature toate elementele aliniate central pentru visual
   simetric. */
.login-split-form-inner .form-label {
  text-align: center;
}

/* Input field text rămâne LEFT — utilizatorul tastează stânga la dreapta;
   centrarea textului în input ar fi ne-natural. Defensive override
   contra cascade din .login-split-form-inner text-align:center. */
.login-split-form-inner .login-input,
.login-split-form-inner .form-input {
  text-align: left;
}

/* Input with icon — matches Stripe/Linear pattern */
.login-input-wrap {
  position: relative;
}

.login-input-wrap .lucide,
.login-input-wrap [data-lucide] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  pointer-events: none;
  z-index: 1;
}

.login-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 44px;        /* room for left icon */
  font-size: 14px;
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-900);
  font-family: inherit;
  transition: all var(--t-fast);
}

.login-input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring);
}

.login-input::placeholder {
  color: var(--gray-400);
}

.login-input.with-toggle {
  padding-right: 44px;            /* room for eye toggle */
}

.login-pwd-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--gray-500);
  transition: all var(--t-fast);
  z-index: 2;                     /* above input */
}

.login-pwd-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.login-pwd-toggle .lucide,
.login-pwd-toggle [data-lucide] {
  position: static;
  transform: none;
  width: 18px;
  height: 18px;
  color: inherit;
}

/* Brand colors — verified din /static/img/logo-brandsheet.svg
   .cls-2 = #f47c48 (orange), .cls-3 = #231f20 (dark). NU folosi
   --blue-* aici — sign-in button e brand-aligned. */
.login-submit {
  width: 100%;
  height: 44px;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #f47c48;
  color: #ffffff;
  border: 1px solid #f47c48;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.login-submit:hover:not(:disabled) {
  background: #d96d3e;
  border-color: #d96d3e;
}

.login-submit:active:not(:disabled) {
  background: #c4612e;
  border-color: #c4612e;
}

.login-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-submit .spinner {
  width: 16px;
  height: 16px;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}

.login-submit svg, .login-submit [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.login-extras {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}

.login-extras a {
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
}
.login-extras a:hover { color: var(--gray-900); text-decoration: underline; }

/* "Remember me" checkbox row — sub password, aliniat stânga */
.login-remember {
  display: flex;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  text-align: left;
}
.login-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.login-remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #f47c48;
  cursor: pointer;
}

/* Inline error banner — afișat sub h2/subtitle, deasupra form */
.login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: var(--space-4);
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-left: 3px solid var(--red-500);
  border-radius: var(--radius);
  color: var(--red-700);
  font-size: 13px;
  text-align: left;
  line-height: 1.4;
}
.login-error[hidden] { display: none; }
.login-error .lucide,
.login-error [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--red-500);
}

/* Trust signals — single thin row la baza panoului drept, sub copyright */
.login-trust {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--gray-400);
  text-align: center;
  letter-spacing: 0.01em;
}

.login-bottom {
  display: block;
  width: 100%;
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  /* line-height ample so wrapped text on narrow viewports stays readable */
  line-height: 1.5;
}

/* Responsive: stack vertical pe mobile */
@media (max-width: 768px) {
  .login-split {
    flex-direction: column;
  }
  .login-split-visual {
    flex: 0 0 auto;
    padding: var(--space-6) var(--space-5);
    min-height: 240px;
  }
  .login-split-logo {
    width: 220px;
    margin: 0 auto var(--space-4);   /* centrat orizontal pe mobile */
  }
  .login-split-h1 {
    font-size: 20px;        /* 1.25rem — încape pe 375x667 fără overflow */
    line-height: 1.25;
  }
  .login-split-tagline {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: var(--space-3);
  }
  .login-split-meta {
    display: none;          /* save vertical space on mobile */
  }
  .login-split-form {
    flex: 1 1 auto;
    padding: var(--space-5) var(--space-4);
  }
  .login-split-form-h2 {
    font-size: 20px;
  }
  .login-split-form-subtitle {
    font-size: 13px;
    margin-bottom: var(--space-4);
  }
  /* Sprint 3 C8: input + button height 48px touch-friendly pe mobile
     (era 44px). Login formul nu are bottom-nav — body padding-bottom:64px
     adăugat la C1 NU se aplică pe /login (no user/auth → mobile_nav nu
     e inclus în partial). */
  .login-input { height: 48px; }
  .login-submit { height: 48px; }
}

/* Extra-small phones (iPhone SE 320×568): tighter spacing pentru
   ca form + footer + trust signals to fit fără scroll inutil. */
@media (max-width: 360px) {
  .login-split-visual {
    min-height: 200px;
    padding: var(--space-5) var(--space-4);
  }
  .login-split-logo {
    width: 180px;
    margin-bottom: var(--space-3);
  }
  .login-split-h1 { font-size: 18px; }
  .login-split-tagline { font-size: 12px; }
  .login-split-form-inner {
    padding: 0;
    max-width: 100%;
  }
  .login-split-form-h2 { font-size: 18px; margin-bottom: var(--space-2); }
  .login-split-form-subtitle { margin-bottom: var(--space-3); }
  .login-bottom { padding-top: var(--space-3); margin-top: var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--gray-500);
}

.empty-state-icon {
  font-size: 24px;
  color: var(--gray-300);
  margin-bottom: var(--space-3);
}
.empty-state-icon svg, .empty-state-icon .lucide {
  width: 24px;
  height: 24px;
  color: var(--gray-300);
}

.empty-state-text {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.empty-state-hint {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════════ */
.divider {
  height: 1px;
  background: var(--gray-200);
  margin: var(--space-5) 0;
  border: none;
}

.divider-accent {
  height: 2px;
  width: 32px;
  background: #f47c48;            /* brand orange (was --blue-500 — visual
                                     inconsistency: liniile decorative sub
                                     page-title pe TOATE paginile apăreau
                                     albastre vs brand orange CTAs) */
  margin: var(--space-3) 0 var(--space-4);
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES — Flex / Spacing
   ═══════════════════════════════════════════════════════════════ */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end  { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 32px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ═══════════════════════════════════════════════════════════════
   LUCIDE ICON UTILITIES
   ═══════════════════════════════════════════════════════════════ */
[data-lucide], .lucide {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 2;
}

/* Default icon size — overridable per context */
.lucide-sm { width: 14px; height: 14px; }
.lucide-md { width: 16px; height: 16px; }
.lucide-lg { width: 20px; height: 20px; }
.lucide-xl { width: 24px; height: 24px; }

/* ═══════════════════════════════════════════════════════════════
   LOADING / SPINNERS
   ═══════════════════════════════════════════════════════════════ */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--blue-500);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

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

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — hamburger drawer + bottom nav (Sprint 3 C2)
   Drawer + bottom nav vizibile DOAR pe <1024px. Pe desktop hidden
   complet ca să nu afecteze layout existing.
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav, .m-drawer { display: none; }

/* Topbar mobile/desktop split — Sprint 3 C3.
   Default (desktop ≥1024px): topbar-mobile-* hidden; desktop sections
   visible as before. */
.topbar-mobile { display: none; }
@media (max-width: 1023.98px) {
  .topbar-desktop { display: none !important; }
  .topbar { padding: 0 var(--space-3); }
  .topbar-mobile-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--gray-700);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .topbar-mobile-hamburger:hover { background: var(--gray-100); color: var(--gray-900); }
  .topbar-mobile-brand {
    display: inline-flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 44px;
    color: var(--copper-500);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: opacity 0.15s ease;
  }
  .topbar-mobile-brand:hover { opacity: 0.85; }
  .topbar-mobile-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .topbar-mobile-icon-btn {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
    border-radius: 8px;
    text-decoration: none;
  }
  .topbar-mobile-icon-btn:hover { background: var(--gray-100); }
  .topbar-mobile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #231f20;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
  }
}

@media (max-width: 1023.98px) {
  /* Bottom nav — fix la baza viewport */
  .bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: #ffffff;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: stretch;
    z-index: 200;
    /* Safe area iPhone X+ — extra padding under home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--gray-500);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.12s ease;
    /* Touch target ≥44px (Apple HIG) */
    min-height: 44px;
  }
  .bottom-nav-item .lucide,
  .bottom-nav-item [data-lucide] { width: 22px; height: 22px; }
  .bottom-nav-item.active { color: #f47c48; }

  /* Drawer overlay */
  .m-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 250;
  }
  .m-drawer[hidden] { display: none; }
  .m-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .m-drawer.open .m-drawer-backdrop { opacity: 1; }
  .m-drawer-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #ffffff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .m-drawer.open .m-drawer-panel { transform: translateX(0); }
  .m-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
  }
  .m-drawer-brand {
    font-size: 18px;
    font-weight: 700;
    color: var(--copper-500);
    letter-spacing: -0.02em;
  }
  .m-drawer-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    border-radius: 8px;
  }
  .m-drawer-close:hover { background: var(--gray-100); color: var(--gray-900); }
  .m-drawer-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
  }
  .m-drawer-section {
    padding: 16px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
  }
  .m-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #231f20;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
  }
  .m-drawer-item:hover { background: var(--gray-50); }
  .m-drawer-item .lucide,
  .m-drawer-item [data-lucide] { width: 18px; height: 18px; color: var(--gray-600); }
  .m-drawer-logout { color: var(--red-700); border-top: 1px solid var(--gray-200); margin-top: 8px; }
  .m-drawer-logout .lucide,
  .m-drawer-logout [data-lucide] { color: var(--red-500); }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP-REQUIRED OVERLAY — Sprint 3 C9
   Pages cu form-uri lungi (deal_new, deal_edit, daily_import etc) sunt
   greu de folosit pe mobile. CSS-only viewport guard: overlay full-screen
   "Folosește desktop". Markup-ul .desktop-only-warning e adăugat în
   fiecare template afectat. Pe desktop e display:none.
   ═══════════════════════════════════════════════════════════════ */
.desktop-only-warning { display: none; }
@media (max-width: 1023.98px) {
  body:has(.desktop-only-warning) { overflow: hidden; }
  .desktop-only-warning {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 20px;
    text-align: center;
  }
  .desktop-only-warning-icon {
    width: 64px; height: 64px;
    color: #f47c48;
    margin-bottom: 8px;
  }
  .desktop-only-warning-title {
    font-size: 20px;
    font-weight: 700;
    color: #231f20;
    line-height: 1.3;
    max-width: 320px;
  }
  .desktop-only-warning-body {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
    max-width: 360px;
    margin-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEAL DETAIL MOBILE — Sprint 3 C7 (CSS-only, zero JS risk per R3)
   Accordion sections deferred — keep renderDeal()'s DOM intact pe mobile.
   Mobile improvements: action buttons stack vertical, KPI grid 2x2,
   Documente tab buttons stack vertical, card-body padding reduced.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  /* Page-header action button row — stack vertical full-width on mobile.
     Targets <div style="display:flex; gap:8px;"> înăuntrul page-header
     din deal_detail.html (rendered via JS).
     Selector specific la deal page: .page-header > div > div containing
     buttons. Folosim atributul "display:flex" din inline style ca anchor —
     fragile dar single-page-impact (deal_detail mobile only). */
  .page-header [style*="gap:8px"] {
    flex-direction: column;
    width: 100%;
    align-items: stretch !important;
  }
  .page-header [style*="gap:8px"] > .btn {
    width: 100%;
    justify-content: center;
    height: 48px;            /* touch-friendly height pe mobile (era 40px) */
  }

  /* Vehicule card "+ Adaugă" button — already btn-sm, mobile stays as-is. */

  /* Documente tab buttons row — same flex pattern. Wrapper uses
     overflow-x:auto pe orig (scroll horizontal); on mobile preferăm
     stack vertical. Inline style "flex-wrap:nowrap" identifică acel row. */
  .card-header + div [style*="flex-wrap:nowrap"] {
    flex-direction: column;
    overflow-x: visible !important;
  }
  .card-header + div [style*="flex-wrap:nowrap"] > .btn {
    width: 100%;
    justify-content: center;
  }

  /* Card-body padding mai compact pe mobile */
  .card-body { padding: var(--space-4); }

  /* Grid de KPI Vehicule/Volum/Cost/Net Total: 2×2 (era grid-4 → 2 cols
     deja prin regula generală @media 1024). Forțează 2 cols pe phone (sub
     640px ar fi devenit 1 col, dar pentru KPI dorim 2×2 always). */
  .deal-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE-AS-CARDS — Sprint 3 C6 mobile responsive lists
   Activă pe <1024px. Tabela aplicată CSS class .table-as-cards collapsing
   to vertical card stack: thead hidden, tr → block card, td → block row
   cu pseudo-element ::before content: attr(data-label).
   JS render-ul pe template-uri trebuie să adauge data-label="X" pe TD.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  .table-as-cards { width: 100%; border-collapse: collapse; }
  .table-as-cards thead { display: none; }
  .table-as-cards tbody, .table-as-cards tr { display: block; width: 100%; }
  .table-as-cards tr {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 14px;
  }
  .table-as-cards tr:hover { background: var(--gray-50); }
  .table-as-cards td {
    display: block;
    padding: 4px 0;
    border: 0;
    text-align: left !important;     /* override inline align right */
    font-size: 13px;
  }
  .table-as-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 2px;
  }
  /* Skip ::before label dacă td nu are data-label (e.g. action button cell). */
  .table-as-cards td:not([data-label])::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE KANBAN (drag-drop deals across status columns)
   ═══════════════════════════════════════════════════════════════ */

/* View toggle (Pipeline ↔ Tabel) — folosit pe pipeline.html și deals_list.html */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--gray-700);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.view-toggle-btn:not(:last-child) {
  border-right: 1px solid var(--gray-200);
}
.view-toggle-btn:hover { background: var(--gray-50); }
.view-toggle-active,
.view-toggle-active:hover {
  background: var(--blue-500);
  color: var(--paper);
  cursor: default;
}

/* Board: orizontal scroll cu coloane de lățime fixă */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: start;
}

.kanban-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
}

/* Column */
.kanban-column {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 300px;
}
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.kanban-column-title { flex: 1; }
.kanban-column-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper);
  border: 1px solid var(--gray-200);
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--gray-700);
  font-weight: 600;
}

/* Color accents per column */
.kanban-column-gray   .kanban-column-header { color: var(--gray-700); }
.kanban-column-amber  .kanban-column-header { color: var(--amber-700); }
.kanban-column-blue   .kanban-column-header { color: var(--blue-700); }
.kanban-column-green  .kanban-column-header { color: var(--green-700); }
.kanban-column-red    .kanban-column-header { color: var(--red-700); }
.kanban-column-amber  { border-top: 3px solid var(--amber-500); }
.kanban-column-blue   { border-top: 3px solid var(--blue-500); }
.kanban-column-green  { border-top: 3px solid var(--green-500); }
.kanban-column-red    { border-top: 3px solid var(--red-500); }
.kanban-column-gray   { border-top: 3px solid var(--gray-400); }

.kanban-column-body {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 120ms ease;
}
.kanban-column-drag-over {
  background: var(--blue-50);
  outline: 2px dashed var(--blue-500);
  outline-offset: -4px;
}

.kanban-column-empty {
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  padding: 16px 0;
  font-style: italic;
}

/* Card */
.kanban-card {
  background: var(--paper);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px;
  cursor: grab;
  user-select: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kanban-card:hover {
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1);
  border-color: var(--gray-300);
}
.kanban-card-dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: rotate(1.5deg);
}

.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.kanban-card-ar {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--blue-700);
  text-decoration: none;
}
.kanban-card-ar:hover { text-decoration: underline; }

.kanban-card-entity {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 1px 6px;
  border-radius: 4px;
}

.kanban-card-client {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-600);
}
.kanban-card-units { font-family: var(--font-mono); }
.kanban-card-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.kanban-card-days {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
}
.kanban-days-fresh { color: var(--gray-500); }
.kanban-days-warn  { color: var(--amber-700); font-weight: 600; }
.kanban-days-stale { color: var(--red-700);   font-weight: 600; }
.kanban-card-seller {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

/* Toast feedback */
.kanban-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  z-index: 9000;
}
.kanban-toast[hidden] { display: none; }
.kanban-toast-success { background: var(--green-700); }
.kanban-toast-error   { background: var(--red-700); }

/* ═══════════════════════════════════════════════════════════════
   COMMAND PALETTE (Cmd+K)
   ═══════════════════════════════════════════════════════════════ */
.cmdk-palette {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.cmdk-palette[hidden] { display: none; }

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cmdk-modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  margin: 0 16px;
  background: var(--paper);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25),
              0 8px 16px -8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans);
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.cmdk-input-icon {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.cmdk-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  height: 100%;
}
.cmdk-input::placeholder { color: var(--gray-400); }
.cmdk-esc-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
}

.cmdk-body {
  overflow-y: auto;
  padding: 8px 0;
  flex: 1;
}

.cmdk-empty-section,
.cmdk-section { padding: 4px 0; }

.cmdk-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 6px 16px 4px;
}

.cmdk-results { display: flex; flex-direction: column; }

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  user-select: none;
}
.cmdk-item-selected {
  background: var(--blue-50);
  border-left-color: var(--blue-500);
}
.cmdk-item-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.cmdk-item-selected .cmdk-item-icon { color: var(--blue-600); }

.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-item-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-item-match {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cmdk-status {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}
.cmdk-status kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
}

.cmdk-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
}
.cmdk-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-600);
}
.cmdk-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--gray-300);
  min-width: 14px;
  text-align: center;
}
.cmdk-hint-shortcut { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar { display: none; }
  .main-area { margin-left: 0; }
  .content { padding: 0; max-width: none; }
  .btn { display: none; }
  .cmdk-palette { display: none !important; }
}