/* ==========================================================
   PARC AUTO v6 - Design System
   Palette: anthracite + warm bronze/copper · Inter font
   ========================================================== */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  --radius-xs: calc(var(--radius-base, 18px) * 0.33);
  --radius-sm: calc(var(--radius-base, 18px) * 0.55);
  --radius-md: var(--radius-base, 18px);
  --radius-lg: calc(var(--radius-base, 18px) * 1.4);
  --radius-xl: calc(var(--radius-base, 18px) * 2);
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: calc(140ms * var(--motion-scale, 1));
  --dur: calc(220ms * var(--motion-scale, 1));
  --dur-slow: calc(420ms * var(--motion-scale, 1));

  --density-pad: 14px;
  --density-row: 56px;
  --density-gap: 16px;

  --sidebar-w: 232px;
  --sidebar-collapsed: 72px;
}

[data-density="compact"]    { --density-pad: 10px; --density-row: 44px; --density-gap: 12px; }
[data-density="comfortable"]{ --density-pad: 14px; --density-row: 56px; --density-gap: 16px; }
[data-density="spacious"]   { --density-pad: 18px; --density-row: 68px; --density-gap: 22px; }

/* ── DARK (default) ── */
[data-theme="dark"] {
  --bg:        oklch(0.155 0.006 60);
  --bg-deep:   oklch(0.12 0.005 60);
  --surface:   oklch(0.205 0.008 55);
  --surface-2: oklch(0.245 0.010 55);
  --surface-3: oklch(0.285 0.012 55);
  --border:    oklch(0.32 0.010 55 / 0.65);
  --border-strong: oklch(0.40 0.012 55);
  --text:      oklch(0.96 0.005 80);
  --text-2:    oklch(0.72 0.012 70);
  --muted:     oklch(0.55 0.012 60);

  --accent:      oklch(0.72 0.13 55);
  --accent-2:    oklch(0.82 0.09 60);
  --accent-deep: oklch(0.55 0.13 45);
  --accent-soft: oklch(0.72 0.13 55 / 0.14);
  --accent-glow: oklch(0.72 0.13 55 / 0.35);

  --ok:   oklch(0.74 0.14 145);
  --warn: oklch(0.78 0.14 80);
  --err:  oklch(0.68 0.18 25);
  --info: oklch(0.70 0.10 230);

  --glass-bg:          oklch(0.205 0.008 55 / 0.62);
  --glass-bg-strong:   oklch(0.225 0.010 55 / 0.86);
  --glass-border:      oklch(0.42 0.012 55 / 0.35);
  --glass-blur:        22px;

  --shadow-sm: 0 2px 8px oklch(0 0 0 / 0.35);
  --shadow-md: 0 8px 28px oklch(0 0 0 / 0.42);
  --shadow-lg: 0 18px 60px oklch(0 0 0 / 0.55);
  --shadow-glow: 0 0 0 4px var(--accent-soft);

  /* legacy compat */
  --bg2: var(--surface); --bg3: var(--surface-2);
  --text2: var(--text-2);
  --green: var(--ok); --yellow: var(--warn); --red: var(--err); --purple: var(--info);
  --orange: oklch(0.72 0.16 45); --cyan: var(--info);
  --radius: var(--radius-md); --shadow: var(--shadow-md);
  --shadow-glow-legacy: var(--shadow-glow);

  color-scheme: dark;
}

/* ── LIGHT ── */
[data-theme="light"] {
  --bg:        oklch(0.965 0.005 75);
  --bg-deep:   oklch(0.94 0.007 70);
  --surface:   oklch(0.99 0.003 80);
  --surface-2: oklch(0.97 0.006 75);
  --surface-3: oklch(0.94 0.008 70);
  --border:    oklch(0.86 0.010 70 / 0.85);
  --border-strong: oklch(0.78 0.012 65);
  --text:      oklch(0.22 0.008 50);
  --text-2:    oklch(0.42 0.010 55);
  --muted:     oklch(0.58 0.010 60);

  --accent:      oklch(0.56 0.14 45);
  --accent-2:    oklch(0.66 0.13 50);
  --accent-deep: oklch(0.42 0.14 40);
  --accent-soft: oklch(0.56 0.14 45 / 0.10);
  --accent-glow: oklch(0.56 0.14 45 / 0.25);

  --ok:   oklch(0.55 0.16 145);
  --warn: oklch(0.62 0.16 75);
  --err:  oklch(0.55 0.20 25);
  --info: oklch(0.55 0.13 230);

  --glass-bg:        oklch(1 0 0 / 0.68);
  --glass-bg-strong: oklch(1 0 0 / 0.88);
  --glass-border:    oklch(0.78 0.010 65 / 0.55);
  --glass-blur:      22px;

  --shadow-sm: 0 2px 6px oklch(0.30 0.02 50 / 0.08);
  --shadow-md: 0 10px 30px oklch(0.30 0.02 50 / 0.10);
  --shadow-lg: 0 20px 56px oklch(0.30 0.02 50 / 0.14);
  --shadow-glow: 0 0 0 4px var(--accent-soft);

  --bg2: var(--surface); --bg3: var(--surface-2);
  --text2: var(--text-2);
  --green: var(--ok); --yellow: var(--warn); --red: var(--err); --purple: var(--info);
  --orange: oklch(0.60 0.18 50); --cyan: var(--info);
  --radius: var(--radius-md); --shadow: var(--shadow-md);

  color-scheme: light;
}

/* ── Spalatorie compat aliases ── */
[data-theme="dark"], [data-theme="light"] {
  --bg-card:      var(--surface);
  --bg-primary:   var(--bg);
  --bg-secondary: var(--surface-2);
  --bg-input:     var(--surface-3);
  --text-primary: var(--text);
  --text-muted:   var(--text-2);
  --border-light: var(--border);
  --hover:        var(--surface-3);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  overflow: hidden;
  max-width: 100%;
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* Warm gradient overlay */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1500px 950px at 92% -10%,  oklch(0.72 0.13 55 / 0.13),  transparent 54%),
    radial-gradient(1200px 850px at -14% 110%, oklch(0.60 0.12 280 / 0.08), transparent 64%),
    radial-gradient(900px 600px at 48% 100%,   oklch(0.68 0.10 45 / 0.06),  transparent 72%);
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Disable transitions during theme switch */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}

/* ==========================================================
   APP SHELL
   ========================================================== */
#app { display: none; position: relative; z-index: 1; }
#app.visible { display: block; }

.layout {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  transition: grid-template-columns var(--dur) var(--ease);
}
.layout[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-collapsed) 1fr; }

.sidebar-slot { position: relative; padding: 12px 0 12px 12px; height: 100vh; overflow: hidden; }
[data-sidebar="collapsed"] .sidebar-slot { padding: 12px 6px; }

.main-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding: 12px 12px 12px 6px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ==========================================================
   SIDEBAR (floating glass) - v6 design
   ========================================================== */
.sidebar {
  position: relative;
  height: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-md), inset 0 1px 0 oklch(1 0 0 / 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Head ── */
.sidebar-head {
  padding: 18px 16px 14px;
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
[data-sidebar="collapsed"] .sidebar-head {
  flex-direction: column; align-items: center;
  justify-content: center; gap: 0;
  padding: 18px 0 8px;
}

/* ── Wordmark ── */
.wordmark { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-sidebar="collapsed"] .wordmark { justify-content: center; gap: 0; }
.wordmark-mark {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-2), var(--accent-deep));
  display: grid; place-items: center;
  box-shadow: 0 6px 24px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.28);
  flex-shrink: 0; overflow: hidden;
}
.wordmark-mark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, oklch(1 0 0 / 0.25), transparent 55%);
}
.wordmark-mark svg { width: 22px; height: 22px; position: relative; z-index: 1; color: oklch(0.99 0 0); }
.wordmark-text {
  display: flex; flex-direction: column; min-width: 0;
  transition: opacity var(--dur) var(--ease), width var(--dur) var(--ease);
  overflow: hidden;
}
.wordmark-text .top {
  font-size: 14px; font-weight: 690; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.1; white-space: nowrap;
  /* app_title vine din config si poate fi lung (ex. "Țiriac Auto Rulate BV"):
     fara ellipsis textul iese taiat brut din caseta wordmark. */
  overflow: hidden; text-overflow: ellipsis;
}
.wordmark-text .bot {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--muted);
  text-transform: uppercase; margin-top: 3px;
}
[data-sidebar="collapsed"] .wordmark-text { opacity: 0; width: 0; pointer-events: none; }

/* ── Toggle button ── */
.sidebar-toggle {
  position: absolute; right: 12px; top: 22px;
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.sidebar-toggle svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
/* Colapsat: butonul iese din flow și apare centrat sub mark */
[data-sidebar="collapsed"] .sidebar-toggle {
  position: static;
  margin: 8px auto 0;
  color: var(--text);
}
/* Chevron: stânga când expanded, dreapta când collapsed */
.sidebar-toggle .icon-chevron-right { display: none; }
[data-sidebar="collapsed"] .sidebar-toggle .icon-chevron-left  { display: none; }
[data-sidebar="collapsed"] .sidebar-toggle .icon-chevron-right { display: block; }

/* ── Nav ── */
.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-sidebar="collapsed"] .sidebar-nav { padding: 12px 10px; align-items: center; }

/* Nav item */
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer;
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
  user-select: none; border: 1px solid transparent;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
  color: var(--text); border-color: var(--accent-soft);
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active::before {
  content: ''; position: absolute;
  left: -4px; top: 25%; bottom: 25%;
  width: 3px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: navPop var(--dur-slow) var(--ease-spring);
}
@keyframes navPop { from { transform: scaleY(0.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
/* Colapsat: doar iconița, 40×40, centrată */
[data-sidebar="collapsed"] .nav-item {
  justify-content: center; padding: 10px;
  width: 40px; height: 40px; gap: 0;
}
[data-sidebar="collapsed"] .nav-item.active::before { left: -10px; }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-2); transition: color var(--dur-fast); }
.nav-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.75; fill: none; }
.nav-text { flex: 1; transition: opacity var(--dur) var(--ease); }
[data-sidebar="collapsed"] .nav-text { display: none; }

.nav-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: oklch(0.99 0 0);
  letter-spacing: 0.04em;
  animation: badgePulse 2.4s ease-in-out infinite;
}
.nav-badge-alert {
  background: #c62828;
  color: #fff;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 5px transparent; }
}
[data-sidebar="collapsed"] .nav-badge {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; padding: 1px 5px;
  margin-left: 0;
}

/* ── Footer ── */
.sidebar-foot {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, transparent, oklch(0 0 0 / 0.05));
}
[data-sidebar="collapsed"] .sidebar-foot { justify-content: center; padding: 12px 0; }

.sidebar-foot .avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center;
  font-weight: 600; color: oklch(0.99 0 0); font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent-soft);
  cursor: default;
}
.user-meta { flex: 1; min-width: 0; overflow: hidden; }
.user-meta .name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta .role { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
[data-sidebar="collapsed"] .user-meta { display: none; }

/* Butoane footer: schimbă parola + logout */
.foot-btns { display: flex; gap: 4px; flex-shrink: 0; }
[data-sidebar="collapsed"] .foot-btns { display: none; }
.sidebar-foot .logout {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2);
  width: 32px; height: 32px; border-radius: var(--radius-xs);
  display: grid; place-items: center; cursor: pointer;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.sidebar-foot .logout:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.sidebar-foot .logout.logout-danger:hover { color: var(--err); border-color: var(--err); background: oklch(0.68 0.18 25 / 0.08); }
.sidebar-foot .logout svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; }

/* ==========================================================
   TOPBAR
   ========================================================== */
.topbar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0; margin-bottom: 10px;
}
.topbar .crumbs { display: flex; align-items: center; gap: 6px; }
.topbar .crumb { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.topbar .crumb.current { color: var(--text); font-weight: 600; }
.topbar .crumb-sep { color: var(--muted); opacity: 0.5; font-size: 12px; }

.topbar .search-wrap {
  flex: 1; max-width: 440px; position: relative; margin-left: auto;
}
.topbar .search-wrap .search-icon-inner {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
.topbar .search-wrap input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 40px 7px 34px;
  color: var(--text); font-size: 13px; outline: none;
  transition: all var(--dur-fast);
}
.topbar .search-wrap input:focus {
  background: var(--surface-3); border-color: var(--accent); box-shadow: var(--shadow-glow);
}
.topbar .search-wrap input::placeholder { color: var(--muted); }
.topbar .kbd-hint {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; }

/* Banner licență (F14-T3): read-only, ascuns implicit, populat din loadConfig() */
.license-banner {
  flex-shrink: 0;
  margin-bottom: 10px;
  padding: 9px 16px;
  border-radius: var(--radius-lg);
  background: oklch(0.78 0.14 80 / 0.12);
  border: 1px solid oklch(0.78 0.14 80 / 0.3);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.license-banner[hidden] { display: none; }

.icon-btn {
  position: relative; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: transparent;
  border: 1px solid transparent; color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; transition: all var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.icon-btn .count-badge {
  position: absolute; top: 2px; right: 0;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 999px;
  background: var(--accent); color: oklch(0.99 0 0);
  min-width: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.sep-v { width: 1px; height: 20px; background: var(--border); }

/* Theme toggle pill */
.theme-toggle {
  display: inline-flex; background: var(--surface-2) !important;
  border: 1px solid var(--border); border-color: var(--border) !important; border-radius: 999px;
  padding: 3px; cursor: pointer; position: relative; gap: 0;
}
.theme-toggle .seg {
  position: relative; z-index: 1;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px; color: var(--text-2);
  transition: color var(--dur-fast);
}
.theme-toggle .seg.active { color: oklch(0.99 0 0); }
.theme-toggle .seg svg { width: 12px; height: 12px; }
.theme-toggle .pill {
  position: absolute; top: 3px; bottom: 3px; width: 26px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  transition: left var(--dur) var(--ease-spring);
  z-index: 0; box-shadow: 0 2px 8px var(--accent-glow);
}

/* ==========================================================
   MAIN area
   ========================================================== */
.main {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px;
  scroll-behavior: smooth;
}
.page { display: none; }
.page.active { display: block; animation: pageFadeIn var(--dur) var(--ease); }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 6px 4px 20px; flex-wrap: wrap;
}
.page-head h1 {
  font-size: 34px; font-weight: 760; letter-spacing: -0.03em;
  color: var(--text); line-height: 1.1;
}
.page-head .sub { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.page-head .sub .em { font-family: var(--font-mono); color: var(--accent); font-size: 12px; }
/* Legacy page-header alias */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-header h1 { font-size: 30px; font-weight: 740; letter-spacing: -0.025em; color: var(--text); }
.page-header p { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: 8px; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 550;
  letter-spacing: -0.005em; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--text);
  transition: all var(--dur-fast) var(--ease); white-space: nowrap; text-decoration: none;
}
.btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.ui-ic { display: inline-block; vertical-align: -0.16em; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: oklch(0.99 0.005 80);
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.22);
}
.btn-primary:hover { box-shadow: 0 8px 26px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.26); filter: brightness(1.08); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-favorit--activ { background: oklch(0.88 0.12 85 / 0.18); color: oklch(0.68 0.16 75); border-color: oklch(0.78 0.14 80 / 0.4); }
.btn-favorit--activ:hover { background: oklch(0.88 0.12 85 / 0.28); }
.btn-quiet { color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: oklch(0.68 0.18 25 / 0.10); color: var(--err); border-color: oklch(0.68 0.18 25 / 0.25); }
.btn-danger:hover { background: oklch(0.68 0.18 25 / 0.20); }
.btn-success { background: oklch(0.74 0.14 145 / 0.10); color: var(--ok); border-color: oklch(0.74 0.14 145 / 0.25); }
.btn-success:hover { background: oklch(0.74 0.14 145 / 0.20); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn-block { width: 100%; justify-content: center; }
/* Bară acțiuni detaliu mașină - glow la hover (fără expand de text) */
#detail-actions .btn:hover { box-shadow: 0 0 0 1px var(--accent-glow), 0 6px 18px var(--accent-glow); }

/* Dropdown-uri Print / Cereri */
.detail-menu { position: relative; display: inline-flex; }
.detail-menu-caret { opacity: 0.65; transition: transform 0.2s var(--ease); }
.detail-menu.open .detail-menu-caret { transform: rotate(180deg); }
.detail-menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: none; flex-direction: column; gap: 2px; min-width: 210px;
  padding: 6px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 14px 34px oklch(0 0 0 / 0.3);
}
.detail-menu.open .detail-menu-panel { display: flex; }
.detail-menu-panel--right { left: auto; right: 0; }
.detail-menu-item { justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; }
.detail-menu-item:hover { background: var(--surface-3); box-shadow: none; }
.detail-menu-item:disabled:hover { background: transparent; }

/* ==========================================================
   CARDS
   ========================================================== */
.card {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 55%); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
.card:not(.card-no-hover):hover { border-color: var(--border-strong); }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.card-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.card-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.notif-card-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.notif-card-copy { min-width: 0; display: grid; gap: 4px; }
.notif-card-copy .card-title { margin: 0; }
.notif-card-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text2);
  overflow-wrap: anywhere;
}
.notif-card-chevron {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-right: 1.8px solid var(--text2);
  border-bottom: 1.8px solid var(--text2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex-shrink: 0;
}
.notif-card:not(.is-collapsed) .notif-card-chevron { transform: rotate(-135deg); }
.notif-card-body { margin-top: 14px; }
.notif-card.is-collapsed .notif-card-body { display: none; }
.notif-card-meta {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.notif-card-meta strong {
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}
/* Grupare pe modul (accordion) - refolosibil oriunde o listă lungă de
   evenimente de notificare trebuie împărțită pe module (sediu-detaliu.js și,
   ulterior, ecranul global de notificări). */
.notif-group-search {
  width: 100%;
  margin-bottom: 14px;
}
.notif-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.notif-group.notif-group-nomatch { display: none; }
.notif-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notif-group-label { flex: 1; }
.notif-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.notif-group-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.8px solid var(--text2);
  border-bottom: 1.8px solid var(--text2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}
.notif-group:not(.is-collapsed) .notif-group-chevron { transform: rotate(-135deg); }
.notif-group-body { padding: 14px; }
.notif-group.is-collapsed .notif-group-body { display: none; }
.notif-group-row.notif-row-hidden { display: none; }
/* Stilul mesajului "Niciun eveniment gasit" - fara `display`, ascunderea o
   face exclusiv JS prin `style.display` inline (regula `display:none` de
   aici a fost bugul reparat: ascundea mesajul necondiționat). */
.notif-group-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
}
.notif-group-override-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--warn);
  background: oklch(0.78 0.14 80 / 0.12);
  border: 1px solid oklch(0.78 0.14 80 / 0.25);
  border-radius: 999px;
  padding: 1px 8px;
  text-transform: none;
  letter-spacing: normal;
}
.notif-state-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.notif-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
}
.notif-state-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.notif-state-badge--on {
  background: oklch(0.74 0.14 145 / 0.13);
  border-color: oklch(0.74 0.14 145 / 0.28);
  color: var(--ok);
}
.notif-state-badge--off {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
.notif-switch-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.notif-switch-row.is-disabled {
  opacity: .58;
}
.email-pref-row {
  min-height: 34px;
  padding: 6px 10px;
  gap: 8px;
}
.email-pref-row .notif-switch-label {
  font-size: 12px;
}
.email-pref-row .notif-switch-state {
  font-size: 9px;
}
.email-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.notif-mele-card {
  background: linear-gradient(155deg, var(--accent-soft) 0%, var(--surface) 55%, var(--surface) 100%);
  border-color: var(--border-strong);
}
.notif-switch-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.notif-switch-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.notif-switch-state {
  color: var(--text-2);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.notif-section-title {
  font-size: 15.2px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in oklch, var(--info) 78%, var(--text) 22%);
}
.notif-section-title::before {
  background: color-mix(in oklch, var(--info) 78%, var(--text) 22%);
}

/* ==========================================================
   BADGES
   ========================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; font-size: 11.5px; font-weight: 550;
  border-radius: 999px; border: 1px solid transparent;
  letter-spacing: 0.005em; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.badge-ok      { background: oklch(0.74 0.14 145 / 0.12); color: var(--ok);   border-color: oklch(0.74 0.14 145 / 0.25); }
.badge-warn    { background: oklch(0.78 0.14 80  / 0.12); color: var(--warn); border-color: oklch(0.78 0.14 80  / 0.25); }
.badge-err     { background: oklch(0.68 0.18 25  / 0.12); color: var(--err);  border-color: oklch(0.68 0.18 25  / 0.25); }
.badge-info    { background: oklch(0.70 0.10 230 / 0.12); color: var(--info); border-color: oklch(0.70 0.10 230 / 0.25); }
.badge-accent  { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.72 0.13 55 / 0.30); }
.badge-muted   { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
/* Aliases folosite de status In/Out - mapate pe paleta de mai sus */
.badge-blue    { background: oklch(0.70 0.10 230 / 0.12); color: var(--info); border-color: oklch(0.70 0.10 230 / 0.25); }
.badge-yellow  { background: oklch(0.78 0.14 80  / 0.12); color: var(--warn); border-color: oklch(0.78 0.14 80  / 0.25); }
.badge-green   { background: oklch(0.74 0.14 145 / 0.12); color: var(--ok);   border-color: oklch(0.74 0.14 145 / 0.25); }

/* Status-specific badge aliases */
.badge-disponibil { background: oklch(0.74 0.14 145 / 0.12); color: var(--ok);   border-color: oklch(0.74 0.14 145 / 0.22); }
.badge-pregatire  { background: oklch(0.78 0.14 80  / 0.12); color: var(--warn); border-color: oklch(0.78 0.14 80  / 0.22); }
.badge-service    { background: oklch(0.68 0.18 25  / 0.12); color: var(--err);  border-color: oklch(0.68 0.18 25  / 0.22); }
.badge-tranzit    { background: oklch(0.70 0.10 230 / 0.12); color: var(--info); border-color: oklch(0.70 0.10 230 / 0.22); }
.badge-comanda    { background: oklch(0.70 0.14 270 / 0.12); color: oklch(0.70 0.14 270); border-color: oklch(0.70 0.14 270 / 0.22); }
.badge-vandut     { background: oklch(0.68 0.18 25  / 0.07); color: oklch(0.75 0.10 25);  border-color: oklch(0.68 0.18 25  / 0.18); }
.badge-inmatriculare { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.72 0.13 55 / 0.2); font-size: 10.5px; padding: 2px 8px; letter-spacing: .04em; }
.badge-inmatriculare::before { display: none; }

/* Marker sediu pe detalii mașină - mare, culoare distinctă per sediu (16 nuanțe
   pe cerc, hue injectat prin --sediu-hue de sediuMarker() în app.js). Separat
   de .badge-muted (sediuBadge), care rămâne neschimbat pentru dashboard/tabel. */
.sediu-marker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; font-size: 13px; font-weight: 650;
  border-radius: 999px; border: 1px solid transparent;
  letter-spacing: 0.005em; white-space: nowrap;
  background: oklch(0.72 0.14 var(--sediu-hue) / 0.16);
  color: oklch(0.42 0.14 var(--sediu-hue));
  border-color: oklch(0.72 0.14 var(--sediu-hue) / 0.35);
}
.sediu-marker::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: oklch(0.62 0.16 var(--sediu-hue)); flex-shrink: 0; }
.status-pack { display: inline-flex; align-items: center; flex-wrap: nowrap; vertical-align: middle; }
.status-pack .status-pack-main {
  min-width: 21ch;
  justify-content: center;
  text-align: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.status-pack .status-pack-warn { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600; border-radius: 5px; letter-spacing: 0.02em;
}
.chip svg { width: 10px; height: 10px; }
.chip-yes { background: oklch(0.74 0.14 145 / 0.13); color: var(--ok); }
.chip-no  { background: oklch(0.68 0.18 25  / 0.10); color: var(--err); opacity: 0.7; }
/* Badge CPO/Certified (backlog #001) - auriu, distinct de chip-urile de stare. */
.chip-certified { background: oklch(0.78 0.13 85 / 0.16); color: oklch(0.62 0.12 80); }
.chip-certified img { height: 14px; max-width: 72px; object-fit: contain; display: block; }
/* Legacy doc-chips */
.doc-chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* Role badges */
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.role-admin    { background: oklch(0.70 0.14 270 / 0.14); color: oklch(0.70 0.14 270); }
.role-logistica{ background: oklch(0.70 0.10 230 / 0.14); color: var(--info); }
.role-user     { background: var(--surface-2); color: var(--text-2); }
.role-achizitor{ background: oklch(0.70 0.14 145 / 0.14); color: oklch(0.55 0.14 145); }
.role-manager_achizitii{ background: oklch(0.70 0.14 40 / 0.14); color: oklch(0.55 0.14 40); }

/* Culoare chip */
.culoare-chip { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; border:1px solid oklch(1 0 0 / 0.12); }

/* ==========================================================
   TABLE (cars)
   ========================================================== */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); cursor: pointer;
  transition: all var(--dur-fast); white-space: nowrap;
  font-family: inherit;
}
.filter-pill:hover { color: var(--text); border-color: var(--border-strong); }
.filter-pill.active { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.72 0.13 55 / 0.35); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
table.cars thead th {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); text-align: left;
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
/* Legacy table (non-cars class) */
thead th {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.10em; color: var(--muted); text-align: left;
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.cars tbody tr, tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
table.cars tbody tr:hover, tbody tr:hover { background: var(--surface-2); }
table.cars tbody tr.row-vandut { background: oklch(0.68 0.18 25 / 0.05) !important; }
table.cars tbody tr.row-vandut:hover { background: oklch(0.68 0.18 25 / 0.09) !important; }
table.cars tbody tr.row-vandut td { color: oklch(0.72 0.08 30); }
table.cars tbody td {
  padding: 14px 12px; font-size: 13.5px;
  border-bottom: 1px solid oklch(0.32 0.010 55 / 0.3);
  vertical-align: middle; white-space: nowrap;
}
table.cars tbody tr:last-child td { border-bottom: none; }
tbody td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }

.car-vin { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.02em; }
.serie-text { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; }
.car-model-cell { display: flex; align-items: center; gap: 10px; }
.car-thumb {
  width: 70px; height: 52px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border); position: relative;
  overflow: hidden; flex-shrink: 0; display: grid; place-items: center;
}
.car-thumb::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, oklch(0.72 0.13 55 / 0.07) 5px, oklch(0.72 0.13 55 / 0.07) 6px);
}
.car-thumb svg { width: 22px; height: 22px; color: var(--muted); position: relative; z-index: 1; stroke: currentColor; stroke-width: 1.5; fill: none; }
.car-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.car-name { font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; }
.car-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }

/* Legacy thumb */
.thumb-cell { display: flex; align-items: center; gap: 10px; }
.thumb-mini { width: 44px; height: 33px; border-radius: 5px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.thumb-placeholder { width: 44px; height: 33px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.thumb-placeholder .ui-ic { color: var(--text-2); }

.docs { display: flex; gap: 3px; flex-wrap: nowrap; }
.row-actions { display: flex; gap: 3px; opacity: 0; transition: opacity var(--dur-fast); }
tr:hover .row-actions { opacity: 1; }
.row-actions .icon-btn { width: 26px; height: 26px; }
.row-actions .icon-btn svg { width: 12px; height: 12px; }

/* Pagination (table-card) */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.pager .info { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.pager .pages { display: flex; gap: 3px; }
.pager .page-btn {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px;
  cursor: pointer; transition: all var(--dur-fast); display: grid; place-items: center;
}
.pager .page-btn:hover { color: var(--text); border-color: var(--border-strong); }
.pager .page-btn.active { background: var(--accent); color: oklch(0.99 0 0); border-color: var(--accent); }
.pager .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Full-page masini pagination (old) */
.masini-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; padding: 10px; flex-wrap: wrap; }
.masini-pagination .pg-info { font-size: 12px; color: var(--text-2); margin-right: 8px; }
.masini-pagination button { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 5px 11px; border-radius: var(--radius-xs); cursor: pointer; font-size: 12.5px; min-width: 34px; transition: background var(--dur-fast); }
.masini-pagination button:hover:not(:disabled) { background: var(--surface-2); }
.masini-pagination button.active { background: var(--accent); color: oklch(0.99 0 0); border-color: var(--accent); font-weight: 600; }
.masini-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.masini-pagination .pg-ellipsis { color: var(--text-2); padding: 0 3px; }

/* ==========================================================
   FILTER BAR + PANEL (masini page)
   ========================================================== */
.filter-bar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.search-input-wrap { flex: 1; min-width: 200px; position: relative; }
.search-input-wrap .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.search-input-wrap .icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.search-input-wrap input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 9px 14px 9px 34px; font-size: 13px; outline: none;
  transition: border-color var(--dur-fast);
}
.search-input-wrap input:focus { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.filter-select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 9px 14px; font-size: 13px; outline: none; cursor: pointer;
}
.filter-select-full { width: 100%; }
.btn-filter-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast);
}
.btn-filter-toggle:hover { border-color: var(--accent); color: var(--accent); }
.btn-filter-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: oklch(0.99 0 0);
  border-radius: 99px; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; line-height: 1;
}
.btn-clear-filters {
  display: none; align-items: center; gap: 5px; padding: 7px 11px;
  border-radius: var(--radius-sm); font-size: 12px; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast);
}
.btn-clear-filters:hover { background: var(--err); color: oklch(0.99 0 0); border-color: var(--err); }
.btn-clear-filters svg { width: 12px; height: 12px; }

/* Filter panel */
.filter-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden;
}
.filter-panel-inner { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }
.filter-section { min-width: 100px; }
.filter-section-dropdown { flex: 0 0 auto; min-width: 150px; max-width: 210px; }
.filter-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-2); margin-bottom: 5px;
}
.filter-range-row { display: flex; align-items: center; gap: 5px; }
.filter-input-num {
  width: 66px; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 13px; font-family: inherit; outline: none;
  transition: border-color var(--dur-fast);
}
.filter-input-num:focus { border-color: var(--accent); }
.filter-range-sep { color: var(--text-2); }
.filter-panel-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 8px 14px; border-top: 1px solid var(--border);
  background: var(--bg);
}
/* Active filter chips */
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.afc {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.afc-x {
  cursor: pointer; opacity: .65; border: none; background: none;
  color: inherit; padding: 0; font-family: inherit; font-size: 15px; line-height: 1;
}
.afc-x:hover { opacity: 1; }

/* ==========================================================
   KPI GRID (dashboard)
   ========================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }

.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px;
  position: relative; overflow: hidden;
  display: grid; gap: 12px; min-height: 150px;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
}
.kpi:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface-2); }
.kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent); opacity: 0.85;
}
.kpi.kpi-red::before { background: var(--err); }
.kpi.kpi-yellow::before { background: var(--warn); }
.kpi.kpi-muted::before { background: var(--muted); }
.kpi-head { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.kpi-head-spread { justify-content: space-between; }
.kpi-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--accent); flex-shrink: 0;
}
.kpi-red .kpi-icon { color: var(--err); }
.kpi-yellow .kpi-icon { color: var(--warn); }
.kpi-muted .kpi-icon { color: var(--muted); }
.kpi-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.kpi-print-btn { flex-shrink: 0; }
.kpi-label { font-size: 12px; color: var(--text-2); font-weight: 650; margin-top: -4px; }
.kpi-value {
  font-family: var(--font-mono); font-size: clamp(32px, 3.2vw, 44px); font-weight: 680;
  letter-spacing: -0.04em; color: var(--text); line-height: 0.95;
  display: flex; align-items: baseline; gap: 6px; position: relative; z-index: 1;
}
.kpi-value .unit { font-family: var(--font-sans); font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; width: max-content;
  position: relative; z-index: 1;
}
.kpi-trend.up   { background: oklch(0.74 0.14 145 / 0.14); color: var(--ok); }
.kpi-trend.down { background: oklch(0.68 0.18 25  / 0.14); color: var(--err); }
.kpi-trend.flat { background: var(--surface-2); color: var(--muted); }
.kpi-trend svg { width: 10px; height: 10px; }
.kpi-spark { height: 24px; position: relative; z-index: 1; color: var(--accent); opacity: 0.68; }

/* Legacy KPI card */
.kpi-card {
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--surface) 65%); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px 24px;
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kpi-gradient, var(--border)); }
.kpi-num { font-family: var(--font-mono); font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 5px; letter-spacing: -0.03em; }
.kpi-label-old { font-size: 13px; color: var(--text-2); font-weight: 500; }
.kpi-sub { font-size: 11px; color: var(--text-2); margin-top: 4px; opacity: 0.8; }
.kpi-card.blue   { --kpi-gradient: linear-gradient(90deg, var(--info), oklch(0.75 0.08 240)); } .kpi-card.blue   .kpi-num { color: var(--info); }
.kpi-card.green  { --kpi-gradient: linear-gradient(90deg, var(--ok),   oklch(0.80 0.12 145)); } .kpi-card.green  .kpi-num { color: var(--ok); }
.kpi-card.red    { --kpi-gradient: linear-gradient(90deg, var(--err),  oklch(0.72 0.14 30)); }  .kpi-card.red    .kpi-num { color: var(--err); }
.kpi-card.yellow { --kpi-gradient: linear-gradient(90deg, var(--warn), oklch(0.82 0.12 80)); }  .kpi-card.yellow .kpi-num { color: var(--warn); }
.kpi-card.gray   { --kpi-gradient: linear-gradient(90deg, var(--muted), var(--border-strong)); } .kpi-card.gray  .kpi-num { color: var(--text-2); }

.dashboard-shell { display: flex; flex-direction: column; gap: 14px; }
.dashboard-page-header { margin-bottom: 10px; align-items: flex-end; }
.dashboard-page-header h1 { font-size: 34px; }
.dashboard-command {
  display: grid; grid-template-columns: minmax(310px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px; align-items: stretch;
  padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.dashboard-command-copy { min-width: 0; align-self: center; }
.dashboard-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 7px; color: var(--accent);
  font-size: 10px; font-weight: 750; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dashboard-command-title { font-size: 24px; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 7px; }
.dashboard-command-copy p { max-width: 54ch; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.dashboard-hero-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-meta-card {
  min-width: 0; padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.dashboard-meta-label {
  display: block; margin-bottom: 7px;
  color: var(--text-2); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
}
.dashboard-meta-value {
  display: block; font-family: var(--font-mono);
  font-size: 28px; line-height: 1; letter-spacing: -0.04em;
}
.dashboard-meta-note {
  display: block; margin-top: 6px;
  color: var(--muted); font-size: 11px;
}

.dashboard-quick-actions {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  padding: 4px 0 2px;
}
.dashboard-quick-actions > * { grid-column: span 2; }
.dashboard-quick-actions > :nth-child(4):nth-last-child(2),
.dashboard-quick-actions > :last-child:nth-child(5) { grid-column: span 3; }
.dashboard-action-chip,
.dash-link-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.dashboard-action-chip {
  width: 100%; justify-content: space-between;
  min-height: 38px; padding: 8px 12px;
  font-size: 12px; font-weight: 650;
}
.dashboard-action-chip strong {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
}
.dashboard-action-chip.is-hot {
  border-color: color-mix(in oklch, var(--warn) 42%, var(--border));
  color: var(--text);
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
}
.dashboard-action-chip:hover,
.dash-link-btn:hover {
  transform: translateY(-1px);
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.dash-link-btn {
  flex-shrink: 0;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-workbench {
  display: flex; flex-direction: column; gap: 14px;
}
.dashboard-priority { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dashboard-priority .kpi-grid { margin-bottom: 0; }
.dashboard-rail {
  display: grid; gap: 14px;
  position: sticky; top: 14px;
}
.dash-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.dash-card-hot { border-color: color-mix(in oklch, var(--warn) 32%, var(--border)); }
.dash-rail-card { min-height: 0; }
.dash-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; min-height: 28px;
}
.dash-kicker {
  color: var(--muted); font-size: 10px; font-weight: 750;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-card-title,
.dash-card .card-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-transform: none;
}
.dash-card .card-title::before { display: none; }
.dash-print-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); cursor: pointer;
  font-size: 11px; font-weight: 600; line-height: 1;
  transition: all var(--dur-fast);
}
.dash-print-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

.dashboard-alert-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: stretch;
}
.dashboard-bottom-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

/* QR logs */
.qr-logs-page { display: grid; gap: 14px; }
.qr-logs-hero,
.qr-panel {
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.qr-logs-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.qr-logs-copy { align-self: center; min-width: 0; }
.qr-logs-copy h2 { margin: 0 0 7px; font-size: 26px; line-height: 1.08; letter-spacing: -0.03em; }
.qr-logs-copy p { max-width: 58ch; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.qr-metric-grid { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, .85fr)); gap: 10px; }
.qr-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: color-mix(in oklch, var(--surface) 82%, white 18%);
}
.qr-metric-main { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 32%, var(--border)); }
.qr-metric span,
.qr-metric small {
  display: block;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}
.qr-metric span { margin-bottom: 8px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.qr-metric strong {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qr-logs-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; }
.qr-panel { padding: 16px; }
.qr-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.qr-source-card {
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
}
.qr-source-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
}
.qr-source-card strong {
  display: block;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qr-source-card span { display: block; margin: 5px 0 10px; color: var(--text-2); font-size: 12px; }
.qr-source-card svg:not(.ui-ic) { width: 100%; height: 30px; display: block; }
.qr-panel-section { padding-top: 4px; }
.qr-trend-grid {
  display: grid;
  grid-template-columns: repeat(30, minmax(10px, 1fr));
  gap: 7px;
  align-items: end;
  min-height: 102px;
  padding-top: 8px;
}
.qr-trend-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.qr-trend-day span { color: var(--text-2); font-size: 10px; line-height: 1; }
.qr-trend-bar {
  width: 100%;
  max-width: 16px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, transparent));
}
.qr-trend-bar-1 { height: 14px; }
.qr-trend-bar-2 { height: 20px; }
.qr-trend-bar-3 { height: 26px; }
.qr-trend-bar-4 { height: 32px; }
.qr-trend-bar-5 { height: 40px; }
.qr-trend-bar-6 { height: 48px; }
.qr-trend-bar-7 { height: 56px; }
.qr-trend-bar-8 { height: 64px; }
.qr-trend-bar-9 { height: 72px; }
.qr-trend-bar-10 { height: 80px; }
.qr-insight-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.qr-insight-panel h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.qr-insight-number {
  font-family: var(--font-mono);
  font-size: 54px;
  line-height: .9;
  font-weight: 750;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.qr-insight-panel p { color: var(--text-2); font-size: 13px; line-height: 1.55; }
.qr-insight-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
}
.qr-insight-row strong { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.qr-table-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.qr-table-wrap table { min-width: 680px; }
.qr-table-wrap td,
.qr-table-wrap th { vertical-align: middle; }
.table-empty { padding: 28px 14px !important; text-align: center; color: var(--text-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--density-gap); }
.grid-3 { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--density-gap); }

/* Status row */
.status-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 38px; padding: 8px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.status-row:last-child { border-bottom: none; }
.status-row:hover { opacity: 0.8; transform: translateX(2px); }
.status-row-name { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-bar-bg { width: 84px; height: 6px; background: var(--surface-3); border-radius: 999px; flex-shrink: 0; overflow: hidden; }
.status-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.85; transition: width var(--dur-slow) var(--ease); }
.status-row-count { font-family: var(--font-mono); font-size: 14px; font-weight: 700; min-width: 24px; text-align: right; flex-shrink: 0; }

/* Dashboard list items */
.dash-list { display: flex; flex-direction: column; }
.dash-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 9px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.dash-item:last-child { border-bottom: none; }
.dash-item:hover { opacity: 0.82; transform: translateX(2px); }
.dash-item-main { min-width: 0; flex: 1; }
.dash-item-title {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.dash-item-vin { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.dash-item-sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; color: var(--text-2); font-size: 11px;
}
.dash-item-side {
  text-align: right; white-space: nowrap; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.dash-side-value { font-size: 12.5px; font-weight: 750; }
.dash-side-note { color: var(--text-2); font-size: 11px; }
.doc-missing { font-size: 11px; color: var(--err); font-weight: 700; white-space: nowrap; }
.dash-more {
  padding: 10px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}
.empty-ok {
  padding: 18px 0; color: var(--ok); font-size: 13px;
  border-top: 1px solid var(--border);
}

/* Pas 4: secțiune informativă gri, vizibilă doar pe chip-ul COC din pagina
   Documente incomplete (coc_an_necunoscut) - vocabular vizual gri existent, fără
   culoare nouă. */
.doc-an-necunoscut-section { opacity: .75; border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 12px; }

/* Dashboard pagination */
.dash-pagination { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.dash-page-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); font-size: 12px;
  cursor: pointer; transition: all var(--dur-fast); font-family: inherit;
}
.dash-page-btn:hover { background: var(--surface-3); color: var(--text); }
.dash-page-btn.active { background: var(--accent); color: oklch(0.99 0 0); border-color: var(--accent); font-weight: 700; }

/* Activity */
.activitate-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 16px; align-items: start; }
.activity-list { display: flex; flex-direction: column; gap: 1px; }
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid oklch(0 0 0 / 0.04);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.document-nr-dot { background: var(--info); }
.activity-text { font-size: 12.5px; }
.activity-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* Activity row (new design) */
.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.activity-row:hover { background: var(--surface-2); }
.activity-row .activity-dot { margin-top: 0; box-shadow: 0 0 0 3px oklch(0.72 0.13 55 / 0.18); }
.activity-row .desc { flex: 1; font-size: 13px; }
.activity-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* Stats list */
.stat-list { display: flex; flex-direction: column; gap: 3px; }
.stat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); transition: background var(--dur-fast);
}
.stat-row:hover { background: var(--surface-3); }
.stat-row .nm { flex: 1; font-size: 13px; }
.stat-row .ct { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; }
.stat-bar { flex-basis: 90px; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.stat-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width var(--dur-slow) var(--ease); }

/* ==========================================================
   FORMS
   ========================================================== */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text);
  padding: 9px 12px; font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-glow); outline: none; }
.field textarea { resize: vertical; min-height: 80px; }
/* Câmpuri needitabile in modul "Moștenește de la grup" (sediu-detaliu.js) -
   arată clar ce se moștenește, fără să lase impresia unui câmp editabil. */
.field input:disabled, .field textarea:disabled { opacity: .6; cursor: not-allowed; }
.field input.vin-invalid { border-color: var(--err) !important; }
.field input.vin-valid { border-color: var(--ok) !important; }
.vin-hint { font-size: 11px; margin-top: 3px; display: none; }
.vin-hint.show { display: block; }
/* F04-T4: marcaj vizual pentru câmpurile marcate obligatorii din campuri-config
   (metadate standard) - validarea reală rămâne server-side. */
.f-obligatoriu-marker::after { content: ' *'; color: var(--err); font-weight: 700; }
.vin-hint.err { color: var(--err); }
.vin-hint.ok { color: var(--ok); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.check-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; user-select: none;
  transition: border-color var(--dur-fast);
}
.check-item:hover { border-color: var(--accent); }
.check-item input[type=checkbox], .check-item input[type=radio] { display: none; }
.check-item .ui-ic { width: 13px; height: 13px; }
.check-box {
  width: 17px; height: 17px; border-radius: 4px; border: 2px solid var(--border);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--dur-fast); font-size: 10px;
}
.check-item input:checked ~ .check-box { background: var(--accent); border-color: var(--accent); }
.check-item input:checked ~ .check-box::after { content: '✓'; color: oklch(0.99 0 0); }

/* ==========================================================
   MODAL
   ========================================================== */
.modal-backdrop { display: none; position: fixed; inset: 0; background: oklch(0 0 0 / 0.6); z-index: 100; align-items: flex-start; justify-content: center; padding: 36px 20px; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
@media(min-width:769px){ .modal-backdrop.open { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 620px; box-shadow: var(--shadow-lg), inset 0 1px 0 oklch(1 0 0 / 0.08); animation: slideDown var(--dur) var(--ease); }
@keyframes slideDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.modal-close { width: 28px; height: 28px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; font-family: inherit; transition: all var(--dur-fast); }
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-close .ui-ic { width: 14px; height: 14px; }
.modal-body { padding: 22px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ==========================================================
   PRINT TEMPLATE EDITOR
   ========================================================== */
.pt-edit-modal { max-width: min(1180px, calc(100vw - 32px)); max-height: 92vh; overflow: hidden; }
.pt-edit-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(92vh - 132px); overflow: auto; }
.pt-template-meta { display: grid; grid-template-columns: minmax(220px, 1fr) 110px 110px 130px; gap: 12px; align-items: end; }
.pt-template-meta .field { margin-bottom: 0; }
.pt-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pt-stage, .pt-inspector {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pt-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 10px; border-bottom: 1px solid var(--border);
}
.pt-toolbar .btn { min-height: 32px; }
.pt-snap {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); font-size: 12px; user-select: none;
}
.pt-page-wrap {
  overflow: auto; padding: 18px; max-height: min(70vh, 780px);
  background: var(--bg-deep);
}
.pt-canvas-page {
  position: relative; margin: 0 auto; overflow: hidden; background-color: #fff; color: #111;
  background-image:
    linear-gradient(to right, rgba(17,17,17,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,.08) 1px, transparent 1px);
  background-size: 15px 15px;
  box-shadow: 0 18px 40px oklch(0 0 0 / .35);
  transform-origin: top left;
}
.pt-canvas-block {
  position: absolute; display: block; padding: 0;
  border: 1px dashed rgba(17,17,17,.32); overflow: hidden; cursor: move;
  box-sizing: border-box; user-select: none; white-space: pre-wrap; line-height: 1.05;
}
.pt-canvas-content { width: 100%; height: 100%; padding: 0 4px; overflow: hidden; box-sizing: border-box; }
.pt-canvas-block.selected { outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(245, 184, 74, .08); }
.pt-canvas-qr_intern, .pt-canvas-logo_brand, .pt-canvas-image {
  color: #333; background: #f2f2f2; font-size: 12px;
}
.pt-canvas-qr_intern .pt-canvas-content, .pt-canvas-logo_brand .pt-canvas-content, .pt-canvas-image .pt-canvas-content {
  display: flex; align-items: center; justify-content: center;
}
.pt-canvas-line { padding: 0; border: 0; background: currentColor; }
.pt-canvas-border { padding: 0; background: transparent; border-style: solid; }
.pt-resize {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  background: var(--accent); border: 1px solid #fff; cursor: nwse-resize; display: none;
}
.pt-canvas-block.selected .pt-resize { display: block; }
.pt-inspector { padding: 12px; position: sticky; top: 0; }
.pt-inspector-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.pt-inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-inspector-grid .field { margin-bottom: 0; }
.pt-inspector-grid .full { grid-column: 1 / -1; }
.pt-block-style-wrap, .pt-advanced { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-toggle-row { display: flex; gap: 6px; }
.pt-toggle {
  width: 34px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface-3); color: var(--text); cursor: pointer; font-weight: 800;
}
.pt-toggle.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.pt-empty { color: var(--text-2); font-size: 13px; padding: 12px 4px; }

/* ==========================================================
   LOGIN
   ========================================================== */
#login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100dvh;
  padding: 32px 20px;
  background:
    radial-gradient(ellipse 110% 80% at 8% 4%,   oklch(0.72 0.13 55 / 0.17),  transparent 64%),
    radial-gradient(ellipse 80% 110% at 92% 96%,  oklch(0.68 0.14 270 / 0.14), transparent 64%),
    radial-gradient(ellipse 160% 80% at 50% 50%,  oklch(0.185 0.008 55), var(--bg-deep));
}
.auth-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 22px;
  align-items: stretch;
}
.auth-showcase,
.login-box {
  border-radius: 32px;
  background: oklch(0.205 0.008 55 / 0.80);
  backdrop-filter: blur(52px) saturate(190%);
  -webkit-backdrop-filter: blur(52px) saturate(190%);
  border: 1px solid oklch(0.46 0.012 55 / 0.58);
  box-shadow:
    0 48px 110px oklch(0 0 0 / 0.62),
    0 16px 40px  oklch(0 0 0 / 0.42),
    inset 0 1.5px 0 oklch(1 0 0 / 0.13),
    inset 0 -1px 0   oklch(0 0 0 / 0.22);
}
.auth-showcase {
  position: relative;
  overflow: hidden;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 88%, transparent), color-mix(in oklch, var(--bg-deep) 92%, transparent));
}
.auth-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, oklch(1 0 0 / 0.08), transparent 42%),
    radial-gradient(circle at 18% 18%, oklch(1 0 0 / 0.10), transparent 28%);
}
.auth-showcase-copy,
.auth-showcase-grid,
.login-box > * { position: relative; z-index: 1; }
.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(1 0 0 / 0.12);
  background: oklch(1 0 0 / 0.06);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.auth-showcase h1 {
  max-width: 10ch;
  margin-top: 18px;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.auth-showcase-copy p {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}
.auth-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.auth-showcase-card {
  min-width: 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid oklch(1 0 0 / 0.10);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.08), oklch(1 0 0 / 0.03));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
}
.auth-showcase-label {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-showcase-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.auth-showcase-card p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.login-box {
  width: 100%;
  padding: 36px 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-kicker-panel { margin-bottom: 16px; }
.login-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.login-logo-copy { min-width: 0; }
.login-logo-copy h2 {
  font-size: 28px;
  font-weight: 760;
  letter-spacing: -0.04em;
}
.login-logo-copy p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.login-error {
  background: oklch(0.68 0.18 25 / 0.10); border: 1px solid oklch(0.68 0.18 25 / 0.3);
  color: var(--err); padding: 10px 14px; border-radius: var(--radius-md);
  font-size: 13px; margin-bottom: 14px; display: none;
}
.login-form-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.login-form-meta span {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.login-help {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.account-page-header {
  padding: 22px 24px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 12%, transparent), transparent 36%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.account-hero-copy { min-width: 0; }
.account-page-header h1 { font-size: 34px; letter-spacing: -0.04em; }
.account-page-header p {
  max-width: 60ch;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.account-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.account-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border));
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.account-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.account-table-card {
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 8%, transparent), transparent 28%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.account-table-card tbody tr { cursor: default; }
.account-table-card tbody tr:hover { background: color-mix(in oklch, var(--accent) 6%, var(--surface-2)); }
.account-table-card thead th {
  background: color-mix(in oklch, var(--surface-2) 82%, var(--accent) 8%);
}

.account-modal {
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 10%, transparent), transparent 34%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.account-modal-header {
  align-items: flex-start;
  gap: 16px;
}
.account-modal-kicker {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.account-modal-subtitle,
.account-modal-lead {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}
.account-modal-subtitle { margin-top: 6px; max-width: 46ch; }
.account-modal-lead { margin: 0 0 16px; }
.account-inline-note {
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--border));
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-2);
}

/* ==========================================================
   DETAIL page
   ========================================================== */
.detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.detail-serie { font-family: var(--font-mono); font-size: 22px; color: var(--accent); letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.detail-name-row { align-items: flex-start; justify-content: space-between; }
.detail-name-content { flex: 1; min-width: 0; }
.detail-km { font-size: 14px; font-weight: 400; color: var(--text2); margin-left: 8px; }
.detail-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.detail-grid-legacy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.detail-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

.detail-photo-wrap { width: 150px; height: 112px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.detail-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }

.detail-price-block { text-align: right; flex-shrink: 0; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.detail-price-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.detail-price-card--campanie { border-color: rgba(230,57,70,.35); background: rgba(230,57,70,.06); }
.detail-price-card--expired { opacity: .65; }
.detail-price-value { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; line-height: 1.1; }
.detail-price-tva { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.detail-price-tva .tva-type { font-weight: 600; }
.detail-price-tva .tva-type.deductibil { color: var(--ok); }
.detail-price-tva .tva-type.nedeductibil { color: var(--warn); }
.detail-meta-dates { font-size: 11px; color: var(--text-2); margin-top: 12px; text-align: right; line-height: 1.7; }

.ro-plate { display: inline-flex; align-self: flex-end; align-items: stretch; height: 38px; border: 2px solid #111; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ro-plate-eu { width: 24px; background: #039; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; }
.ro-plate-eu svg { display: block; }
.ro-plate-eu-ro { font-size: 8px; font-weight: 700; line-height: 1; margin-top: 1px; }
.ro-plate-num { padding: 0 8px; display: flex; align-items: center; font-family: Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1px; color: #111; white-space: nowrap; }

/* New detail grid */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* Bandă rezumat „Gata de vânzare” (summary read-only peste cardurile editabile) */
.readiness-strip {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 20px; margin-bottom: 16px;
  min-height: 58px;
}
.readiness-strip .rs-score { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.readiness-strip .rs-score-head { display: flex; align-items: baseline; gap: 12px; }
.readiness-strip .rs-verdict { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.readiness-strip .rs-num { font-size: 26px; font-weight: 800; line-height: 1; }
.readiness-strip .rs-num-total { font-size: 15px; font-weight: 700; opacity: 0.55; }
.readiness-strip .rs-bar { width: 150px; height: 7px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.readiness-strip .rs-bar-fill { height: 100%; border-radius: 999px; transition: width 0.35s ease; }
.readiness-strip .rs-blockers {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1; min-width: 0; padding-left: 22px; border-left: 1px solid var(--border);
}
.readiness-strip .rs-blockers-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 2px; }
.readiness-strip .rs-chip {
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.12); color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.3);
}
.readiness-strip .rs-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
@media (max-width: 720px) {
  .readiness-strip .rs-blockers { padding-left: 0; border-left: none; flex-basis: 100%; }
}
.hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.hero-img {
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.45)), linear-gradient(135deg, oklch(0.30 0.020 50), oklch(0.20 0.020 50));
  position: relative; overflow: hidden; display: grid; place-items: center;
}
[data-theme="light"] .hero-img { background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.18)), linear-gradient(135deg, oklch(0.78 0.020 60), oklch(0.65 0.020 50)); }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img .placeholder-icon { color: oklch(1 0 0 / 0.4); width: 70px; height: 70px; position: relative; z-index: 1; }
.hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 22px; display: flex; align-items: flex-end; justify-content: space-between;
  color: oklch(0.99 0 0); gap: 14px; z-index: 2;
}
.hero-overlay h2 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.hero-overlay .meta { margin-top: 5px; font-family: var(--font-mono); font-size: 11.5px; color: oklch(1 0 0 / 0.7); letter-spacing: 0.04em; }
.hero-overlay .price { font-family: var(--font-mono); font-size: 30px; font-weight: 600; text-align: right; letter-spacing: -0.01em; }
.hero-overlay .price .cur { font-size: 13px; color: oklch(1 0 0 / 0.6); margin-right: 3px; }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; }
.g-thumb {
  aspect-ratio: 4/3; border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border); cursor: pointer;
  transition: all var(--dur-fast); overflow: hidden; position: relative;
}
.g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.g-thumb.active { border-color: var(--accent); box-shadow: var(--shadow-glow); }

/* Tabs */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 9px 13px; font-size: 13px; font-weight: 550; color: var(--text-2); background: transparent; border: none; cursor: pointer; position: relative; transition: color var(--dur-fast); font-family: inherit; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); }
.tab.active::after { content: ''; position: absolute; bottom: -1px; left: 10px; right: 10px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; animation: tabIn var(--dur) var(--ease); }
.media-tab { padding: 5px 13px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: all var(--dur-fast); }
.media-tab.active { background: var(--accent); color: oklch(0.99 0 0); border-color: var(--accent); }
@keyframes tabIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.media-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
/* Pas 6: chip-bar-uri de sediu ascunse când userul are sub 2 sedii vizibile -
   fără regula explicită, `.media-tabs{display:flex}` (specificitate egală, origine
   author) câștigă în fața UA-ului `[hidden]{display:none}`. Pattern identic cu
   `.topbar-sediu[hidden]` de mai jos. */
.media-tabs[hidden] { display: none; }
/* Banda de taburi a unui CONTAINER de navigație (#005, pliere sidebar).
   Deliberat NU e `.media-tabs`: e navigație între PAGINI, alt nivel decât
   sub-taburile care comută panouri în interiorul unui ecran. Pe
   `#page-locatii-config` cele două benzi stau una peste alta, iar cu același
   stil de pastilă erau indescifrabile. Aici: underline ancorat de header. */
.nav-container-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.nav-container-tab { padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 550; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.nav-container-tab:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 3px 10px oklch(0 0 0 / 0.15); }
.nav-container-tab:active { transform: translateY(0); box-shadow: none; }
.nav-container-tab.active { color: oklch(0.99 0.005 80); background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: var(--accent); font-weight: 650; box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.22); }
/* F05-T5: rând „+ Adaugă" fără fișiere din tab-ul Doc. Oficiale - hover doar CSS
   (CSP script-src blochează onmouseover/onmouseout inline). */
.doc-tab-add-row:hover { background: var(--surface-2); }

/* Specs list */
.specs-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; }
.specs-list .spec { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid oklch(0.32 0.010 55 / 0.3); font-size: 13px; }
.specs-list .spec:nth-last-child(-n+2) { border-bottom: none; }
.specs-list .spec .k { color: var(--text-2); }
.specs-list .spec .v { color: var(--text); font-weight: 550; font-family: var(--font-mono); font-size: 12px; }

/* ==========================================================
   MEDIA (photos/files)
   ========================================================== */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.photo-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur); }
.photo-item:hover img { transform: scale(1.04); }
.photo-delete { position: absolute; top: 5px; right: 5px; background: oklch(0 0 0 / 0.8); border: none; border-radius: 4px; color: oklch(0.99 0 0); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 700; }
.photo-delete:hover { background: var(--err); }
.photo-star { position: absolute; bottom: 5px; left: 5px; background: oklch(0 0 0 / 0.7); border: none; border-radius: 4px; color: var(--text-2); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); font-family: inherit; }
.photo-item:hover .photo-star { opacity: 1; }
.photo-star.is-principal { opacity: 1 !important; color: var(--warn); }
.photo-download { position: absolute; bottom: 5px; right: 5px; background: oklch(0 0 0 / 0.7); border: none; border-radius: 4px; color: var(--text-2); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); font-family: inherit; text-decoration: none; }
.photo-item:hover .photo-download { opacity: 1; }

.file-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 5px; }
.file-icon { font-size: 20px; flex-shrink: 0; }
.file-name { font-size: 12.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-actions { display: flex; gap: 3px; flex-shrink: 0; }
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 22px; text-align: center; cursor: pointer; transition: all var(--dur); color: var(--text-2); display: block; }
.upload-zone:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.upload-zone input { display: none; }
.upload-zone .ui-ic { width: 28px; height: 28px; margin-bottom: 8px; }

/* ==========================================================
   LIGHTBOX
   ========================================================== */
#lightbox { display: none; position: fixed; inset: 0; background: oklch(0 0 0 / 0.92); z-index: 200; align-items: center; justify-content: center; cursor: zoom-out; flex-direction: column; gap: 10px; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); }
#lightbox video { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); cursor: default; }
#lightbox-name { color: oklch(1 0 0 / 0.5); font-size: 13px; }
#lightbox-counter { color: oklch(1 0 0 / 0.4); font-size: 12px; }

/* ==========================================================
   IMPORT / EXPORT
   ========================================================== */
.import-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.import-export-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.import-export-grid > .card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.import-result { border-radius: var(--radius-sm); padding: 14px; margin-top: 10px; }
.import-result.success { background: oklch(0.74 0.14 145 / 0.08); border: 1px solid oklch(0.74 0.14 145 / 0.2); }
.import-result.warning { background: oklch(0.78 0.14 80 / 0.08); border: 1px solid oklch(0.78 0.14 80 / 0.2); }
.import-result h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.import-result p { font-size: 13px; color: var(--text-2); margin-bottom: 3px; }
.import-risk-box { padding: 13px 14px; margin-bottom: 16px; border-radius: var(--radius-sm); background: oklch(0.68 0.18 25 / 0.08); border: 1px solid oklch(0.68 0.18 25 / 0.24); }
.import-risk-box strong { display: block; color: var(--err); font-size: 13px; margin-bottom: 7px; }
.import-risk-box p { margin: 6px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.skip-list { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); margin-top: 6px; max-height: 120px; overflow-y: auto; }
.doc-reconcile-preview { display: flex; flex-direction: column; gap: 12px; }
.doc-reconcile-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.doc-reconcile-kpi { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; }
.doc-reconcile-kpi strong { display: block; font-size: 20px; line-height: 1.1; margin-bottom: 4px; }
.doc-reconcile-kpi span { color: var(--text-2); font-size: 12px; }
.doc-reconcile-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doc-reconcile-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.doc-reconcile-table th, .doc-reconcile-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-reconcile-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.doc-reconcile-table code { font-size: 12px; }
.doc-reconcile-muted { color: var(--text-2); font-size: 12px; line-height: 1.45; }

/* ==========================================================
   PROGRAM (calendar)
   ========================================================== */
.prog-luna-nav { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; }
.prog-luna-arrow {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--dur-fast); font-family: inherit;
  flex: 0 0 auto;
}
.prog-luna-arrow svg { width: 12px; height: 12px; }
.prog-luna-arrow:hover { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); }

.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.cal-month { display: flex; align-items: center; gap: 10px; }
.cal-month-name { font-size: 22px; font-weight: 650; letter-spacing: -0.015em; }
.cal-month-name .year { color: var(--muted); font-weight: 500; margin-left: 5px; }
.cal-nav { display: flex; gap: 3px; }

.calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-weekdays .wd { padding: 9px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.cal-weekdays .wd.weekend { color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(100px, 1fr); }
.cal-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 7px 8px; position: relative; cursor: pointer; transition: background var(--dur-fast); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.other-month { opacity: 0.3; pointer-events: none; }
.cal-cell.sunday { background: oklch(0.12 0.005 60 / 0.5); cursor: not-allowed; }
.cal-cell.sunday:hover { background: oklch(0.12 0.005 60 / 0.5); }
[data-theme="light"] .cal-cell.sunday { background: oklch(0.94 0.007 70 / 0.5); }
.cal-cell.today { background: oklch(0.72 0.13 55 / 0.05); }
.cal-cell.today .cal-day { background: var(--accent); color: oklch(0.99 0 0); }
.cal-day { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: var(--text-2); flex-shrink: 0; }
.cal-cell.saturday .cal-day::after { content: '½'; position: absolute; top: 7px; right: 8px; font-size: 10px; color: var(--accent); font-weight: 700; background: var(--accent-soft); padding: 1px 5px; border-radius: 999px; }
.cal-entry { display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 7px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-entry.parc { background: oklch(0.72 0.13 55 / 0.08); border-color: oklch(0.72 0.13 55 / 0.25); }
.cal-entry.cc   { background: oklch(0.70 0.10 230 / 0.08); border-color: oklch(0.70 0.10 230 / 0.20); }
.cal-entry.empty { color: var(--muted); border-style: dashed; font-style: italic; }
.cal-entry .cal-entry-icon { width: 11px; height: 11px; flex-shrink: 0; color: var(--accent); }
.cal-entry.cc .cal-entry-icon { color: var(--info); }
.cal-entry .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Legacy program grid */
.prog-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.prog-dow { text-align: center; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); padding: 8px 4px; }
.prog-dow-we { color: var(--accent); opacity: .8; }
.prog-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px; min-height: 100px; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--dur-fast); position: relative; }
.prog-empty { background: transparent; border-color: transparent; pointer-events: none; }
.prog-editable { cursor: pointer; }
.prog-editable:hover { border-color: var(--accent); background: oklch(0.72 0.13 55 / 0.05); }
.prog-we { background: oklch(0.72 0.13 55 / 0.06); border-color: oklch(0.72 0.13 55 / 0.18); }
.prog-today { border-color: var(--accent); border-width: 2px; background: oklch(0.72 0.13 55 / 0.10); box-shadow: inset 0 0 0 1px var(--accent); }
.prog-past { opacity: .62; }
.prog-daynum { font-size: 1.1rem; font-weight: 700; color: var(--text-2); line-height: 1; }
.prog-we .prog-daynum { color: var(--accent); opacity: .85; }
.prog-today-num { background: var(--accent); color: oklch(0.99 0 0); border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; box-shadow: 0 0 10px var(--accent-glow); }
.prog-role { display: flex; align-items: center; gap: 4px; font-size: 1rem; line-height: 1.3; min-height: 20px; }
.prog-role-ico { font-size: 1rem; flex-shrink: 0; }
.prog-role-ico .ui-ic { width: 14px; height: 14px; vertical-align: 0; }
.prog-role-txt { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.prog-role-empty { color: var(--text-2); font-style: italic; font-weight: 400; }
.prog-role-parc .prog-role-txt { color: oklch(0.75 0.10 210); }
.prog-role-cc   .prog-role-txt { color: oklch(0.75 0.12 280); }
.prog-sat-badge { font-size: .6rem; font-weight: 800; color: var(--warn); background: oklch(0.78 0.14 80 / 0.15); border: 1px solid oklch(0.78 0.14 80 / 0.35); border-radius: 4px; padding: 0 3px; line-height: 1.4; flex-shrink: 0; margin-left: 2px; }
.prog-sunday { background: oklch(0.12 0.005 60 / 0.06); border-color: oklch(0.32 0.010 55 / 0.20); }
[data-theme="light"] .prog-sunday { background: oklch(0.94 0.007 70 / 0.4); }
.prog-sunday .prog-daynum { color: var(--text-2); opacity: .55; }
.prog-dow-sunday { opacity: .45; }
.prog-role-sunday-closed { opacity: .45; }
.prog-edit-hint { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; background: var(--accent); border-radius: 3px; display: none; align-items: center; justify-content: center; font-size: .6rem; color: oklch(0.99 0 0); }
.prog-editable:hover .prog-edit-hint { display: flex; }
.prog-holiday { background: oklch(0.82 0.08 25 / 0.10); border-color: oklch(0.60 0.16 25 / 0.35); }
[data-theme="light"] .prog-holiday { background: oklch(0.96 0.04 25 / 0.5); border-color: oklch(0.60 0.16 25 / 0.30); }
.prog-holiday-badge { display: block; font-size: .6rem; font-weight: 700; color: oklch(0.52 0.18 25); letter-spacing: .02em; line-height: 1.2; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Calendar stats */
.cal-stats { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Summary panels */
.prog-summaries-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prog-summary-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.prog-summary-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--text); gap: 7px; }
.prog-email-btn.is-active svg { color: var(--green); stroke: var(--green); }
.prog-summary-sub { font-size: .76rem; font-weight: 400; color: var(--text-2); }
.prog-copy-btn { white-space: nowrap; flex-shrink: 0; font-size: .76rem; padding: 3px 9px; }
.prog-summary-textarea { width: 100%; box-sizing: border-box; min-height: 120px; background: var(--surface); color: var(--text); border: none; outline: none; resize: vertical; font-family: var(--font-mono); font-size: .8rem; line-height: 1.65; padding: 10px 13px; cursor: text; }
.prog-summary-textarea:focus { background: oklch(0.72 0.13 55 / 0.04); }

/* Program stats table */
.prog-stats-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 500px; }
.prog-stats-table th { background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 9px 13px; text-align: center; border: 1px solid var(--border); }
.prog-stats-table td { padding: 9px 13px; border: 1px solid var(--border); text-align: center; background: var(--surface); }
.prog-stat-eff  { color: var(--ok); font-weight: 600; }
.prog-stat-prog { color: var(--accent); font-weight: 600; }
.prog-stats-table tr:hover td { filter: brightness(1.06); }

/* ==========================================================
   TICHETE
   ========================================================== */
.tichete-list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.tichet-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; cursor: pointer; transition: all var(--dur); }
.tichet-card:hover { border-color: oklch(0.72 0.13 55 / 0.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tichet-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tichet-subject { font-weight: 600; font-size: 14px; color: var(--text); }
.tichet-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.tichet-preview { font-size: 12px; color: var(--text-2); margin-top: 7px; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.t-status-deschis { background: oklch(0.68 0.18 25 / 0.14); color: var(--err); }
.t-status-inlucru { background: oklch(0.78 0.14 80 / 0.14); color: var(--warn); }
.t-status-rezolvat { background: oklch(0.74 0.14 145 / 0.14); color: var(--ok); }
.tichet-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.tichet-detail-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tichet-thread { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 3px 2px; margin-bottom: 14px; }
.tichet-reply { border-top: 1px solid var(--border); padding-top: 12px; }
.mesaj-bubble { padding: 11px 14px; border-radius: var(--radius-sm); max-width: 90%; }
.mesaj-user  { background: var(--surface-2); border: 1px solid var(--border); align-self: flex-start; }
.mesaj-admin { background: oklch(0.72 0.13 55 / 0.10); border: 1px solid oklch(0.72 0.13 55 / 0.25); align-self: flex-end; }
.mesaj-header { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 11.5px; color: var(--text-2); flex-wrap: wrap; }
.mesaj-header strong { color: var(--text); font-size: 12.5px; }
.mesaj-role-badge { padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 600; }
.mesaj-time { margin-left: auto; }
.mesaj-body { font-size: 13px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }

/* ==========================================================
   UPLOAD BULK VIN
   ========================================================== */
.vin-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.vin-preview-table th { background: var(--surface-2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-2); border-bottom: 2px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.vin-preview-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vin-preview-table tr:last-child td { border-bottom: none; }
.vin-preview-table tr.matched   { background: oklch(0.74 0.14 145 / 0.06); }
.vin-preview-table tr.unmatched { background: oklch(0.68 0.18 25  / 0.06); }
.vin-preview-table tr.pending td:last-child { animation: vin-pulse 1.4s ease-in-out infinite; }
@keyframes vin-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.vin-preview-table tr.uploading { opacity: .6; }
.vin-preview-table tr.done td:last-child { color: var(--ok); font-weight: 600; }
.vin-preview-table tr.failed td:last-child { color: var(--err); font-weight: 600; }
.vin-fname { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
.vin-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.vin-badge.ok  { background: oklch(0.74 0.14 145 / 0.14); color: var(--ok); }
.vin-badge.err { background: oklch(0.68 0.18 25  / 0.14); color: var(--err); }
.vin-progress-bar  { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.vin-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }

/* ==========================================================
   MISC / UTILITIES
   ========================================================== */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13.5px; }
.alert-ok  { background: oklch(0.74 0.14 145 / 0.12); border: 1px solid oklch(0.74 0.14 145 / 0.30); color: var(--ok); }
.alert-warn { background: oklch(0.78 0.14 80 / 0.12); border: 1px solid oklch(0.78 0.14 80 / 0.30); color: var(--warn); }
.alert-err { background: oklch(0.68 0.18 25  / 0.12); border: 1px solid oklch(0.68 0.18 25  / 0.30); color: var(--err); }
.invite-result-card {
  display: grid;
  gap: 8px;
}
.invite-result-card strong { color: currentColor; }
.invite-result-meta {
  color: var(--text-2);
  line-height: 1.7;
}
.invite-result-creds {
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--bg-deep) 88%, transparent);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
}

.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-2); gap: 10px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-2); }
.empty-state .big { font-size: 38px; margin-bottom: 10px; }
.empty-state h3 { font-size: 15px; font-weight: 500; margin-bottom: 5px; color: var(--text); }

.divider { height: 1px; background: var(--border); margin: 10px 0; }
.spacer { flex: 1; }

/* Toast */
#toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 16px;
  color: var(--text); font-size: 13px; z-index: 9999;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px);
  transition: all var(--dur); max-width: 320px; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.success { border-left: 3px solid var(--ok); }
#toast.error   { border-left: 3px solid var(--err); }

/* #007-B2/B3: intrare de navigație "locked" (modul nepermis de pachet, upsell) -
   sidebar + bottom-nav, gri/blocată, fără să dispară din meniu. */
.nav-item.nav-locked, .bottom-nav-item.nav-locked { opacity: 0.55; }
.nav-item.nav-locked:hover { background: var(--surface-2); }
.nav-item.nav-locked .nav-icon, .bottom-nav-item.nav-locked .bn-icon { color: var(--text-2); }
.nav-item.nav-locked::after, .bottom-nav-item.nav-locked::after {
  /* lacăt SVG prin mask (currentColor), fără emoji - regula "zero emoji în UI" */
  content: ''; display: inline-block; width: 11px; height: 11px; margin-left: auto; opacity: 0.8;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/contain no-repeat;
}
.bottom-nav-item.nav-locked::after { position: absolute; top: 2px; right: 18%; margin-left: 0; }

/* Panou nemodal, deschis la click pe o intrare "locked" - fără backdrop, nu
   întrerupe niciun flux de lucru existent (poate rămâne deschis oricât). */
.module-locked-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 9998;
  width: 300px; max-width: calc(100vw - 40px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 16px 18px; color: var(--text);
}
.module-locked-panel h4 { margin: 0 6px 8px 0; font-size: 14px; font-weight: 600; }
.module-locked-panel p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.module-locked-panel .module-locked-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
}
.module-locked-panel .module-locked-close:hover { color: var(--text); }
.module-locked-panel .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Bell / topbar notifications (legacy) */
.main-topbar { display: none; } /* hidden - replaced by new topbar */
.bell-btn { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); transition: all var(--dur-fast); }
.bell-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bell-img { width: 20px; height: 20px; object-fit: contain; }
.bell-badge { position: absolute; top: -5px; right: -5px; background: var(--err); color: oklch(0.99 0 0); font-size: 10px; font-weight: 700; border-radius: 10px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--bg); }

/* Author watermark */
.by-author { position: fixed; bottom: 10px; right: 14px; z-index: 999; font-size: 10px; color: oklch(1 0 0 / 0.18); font-family: var(--font-mono); letter-spacing: .04em; pointer-events: none; user-select: none; }
[data-theme="light"] .by-author { color: oklch(0 0 0 / 0.15); }

/* Mobile cards (cars list) */
.masini-mobile-cards { display: none; }
.igien-mobile-cards { display: none; }
.igien-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; }
.igien-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.igien-card-masina { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; text-align: left; }
.igien-card-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.igien-card-row span { color: var(--text2); }
.igien-card-row:last-of-type { border-bottom: none; }
.igien-card-status { margin-top: 8px; width: 100%; font-size: 13px; padding: 6px 8px; border-radius: 6px; }
.masina-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; transition: background var(--dur-fast); -webkit-tap-highlight-color: transparent; }
.masina-card:active { background: var(--surface-2); }
.masina-card-thumb { width: 68px; height: 51px; border-radius: var(--radius-xs); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.masina-card-placeholder { width: 68px; height: 51px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.masina-card-placeholder .ui-ic { color: var(--text-2); }
.masina-card-body { flex: 1; min-width: 0; }
.masina-card-serie { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); letter-spacing: .04em; }
.masina-card-name { font-size: 13.5px; font-weight: 600; margin: 2px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masina-card-badges { display: flex; flex-wrap: wrap; gap: 3px; }

/* Bottom nav (mobile) */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--glass-bg-strong); border-top: 1px solid var(--glass-border); z-index: 50; padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.bottom-nav-inner { display: flex; height: 54px; }
.bottom-nav-item { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--text-2); font-size: 9.5px; font-weight: 500; border: none; background: transparent; font-family: inherit; padding: 0; -webkit-tap-highlight-color: transparent; transition: color var(--dur-fast); }
.bottom-nav-item .bn-icon { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.bottom-nav-item .bn-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav-badge {
  position: absolute; top: 5px; left: 50%; transform: translateX(4px);
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: #c62828; color: #fff; border: 1px solid var(--surface);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 14px;
  text-align: center; letter-spacing: 0;
}

/* ==========================================================
   NAV SHEET (mobil, F34) - sheet full-screen deschis din butonul
   „Meniu" al bottom-nav-ului. Ascuns implicit pe desktop; sub 768px
   devine full-screen când are clasa `.open`. z-index peste .bottom-nav
   (50) și peste orice overlay relevant, sub valorile foarte mari
   folosite de elementele flotante (upload-tray, tweaks-toggle).
   ========================================================== */
.nav-sheet { display: none; }
.nav-sheet-overlay {
  display: none; position: fixed; inset: 0; background: oklch(0 0 0 / 0.35);
  z-index: 2000;
}
.nav-sheet-overlay.open { display: block; }
body.nav-sheet-lock { overflow: hidden; }
@media (max-width: 768px) {
  .nav-sheet {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 2001;
    background: var(--surface); border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-sheet.open { transform: translateY(0); }
  .nav-sheet-header {
    display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .nav-sheet-search {
    flex: 1; min-width: 0; padding: 8px 12px; border-radius: var(--radius-xs);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    font-family: inherit; font-size: 16px;
  }
  .nav-sheet-close {
    flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-2); cursor: pointer;
  }
  .nav-sheet-close:hover { background: var(--surface-3); color: var(--text); }
  .nav-sheet-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
  .nav-sheet-grup { margin-bottom: 12px; }
  .nav-sheet-grup-title {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted); padding: 6px 8px;
  }
  .nav-sheet-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px;
    border-radius: var(--radius-xs); color: var(--text-2); cursor: pointer;
    font-size: 13.5px; font-weight: 500;
  }
  .nav-sheet-item:hover, .nav-sheet-item.active { background: var(--surface-2); color: var(--text); }
  .nav-sheet-item.active { color: var(--accent); }
  .nav-sheet-item .nav-icon svg { width: 18px; height: 18px; stroke: currentColor; }
  .bottom-nav-item.bottom-nav-menu.active { color: var(--accent); }
}

/* ==========================================================
   TWEAKS PANEL
   ========================================================== */
.tweaks-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 280px;
  background: var(--glass-bg-strong); border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  z-index: 200; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.tweaks-panel.open { transform: translateX(0); }
.tweaks-header { padding: 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.tweaks-header span { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.tweaks-body { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.tweak-section { display: flex; flex-direction: column; gap: 7px; }
.tweak-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.tweak-val { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.tweak-radio-group { display: flex; gap: 4px; flex-wrap: wrap; }
.tweak-radio-opt {
  flex: 1; min-width: 60px; padding: 6px 8px; font-size: 11.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
  text-align: center; transition: all var(--dur-fast); white-space: nowrap;
}
.tweak-radio-opt:hover { color: var(--text); border-color: var(--border-strong); }
.tweak-radio-opt.active { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.72 0.13 55 / 0.35); font-weight: 600; }
.tweak-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.tweak-color { width: 34px; height: 34px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: all var(--dur-fast); }
.tweak-color:hover { transform: scale(1.12); }
.tweak-color.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }

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

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .dashboard-command,
  .dashboard-workbench,
  .dashboard-alert-grid,
  .dashboard-bottom-grid,
  .activitate-grid { grid-template-columns: 1fr; }
  .dashboard-rail { position: static; }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body { overflow: auto; }
  .detail-km { display: block; margin-left: 0; margin-top: 6px; text-align: center; }
  .layout { grid-template-columns: 1fr !important; }
  .sidebar-slot { display: none !important; }
  /* safe-area-inset-top: împinge topbar-ul sub Dynamic Island / notch în PWA standalone iOS */
  .main-wrap { padding: calc(8px + env(safe-area-inset-top)) 8px 8px 8px; height: auto; overflow: visible; }
  .topbar .search-wrap { display: none; }
  .topbar .kbd-hint { display: none; }
  /* padding-bottom pe .main acoperă universal toate paginile - meniul fix (54px)
     + safe-area iPhone (notch/home bar) + 16px respiro */
  .main { overflow: visible; padding-bottom: calc(54px + env(safe-area-inset-bottom) + 16px); }
  .bottom-nav { display: block; }
  .tweaks-panel { width: 100%; transform: translateX(100%); }
  .tweaks-panel.open { transform: translateX(0); }
  /* iOS PWA standalone: viewportul nu se micșorează la tastatură + body{overflow:hidden}
     împiedică scroll-in-view → tastatura nu apare. Fix: pagina login scrollabilă, dvh,
     safe-area. Inputuri 16px previn zoom-ul/focus-ul ciudat iOS la focus. */
  input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 16px !important; }
  #login-page { min-height: 100dvh; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .auth-shell { grid-template-columns: 1fr; gap: 0; }
  /* Pe mobil formularul stă primul: altfel logarea cere scroll peste tot showcase-ul. */
  .login-box { order: -1; }
  .auth-showcase {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 28px 20px 22px;
  }
  .auth-showcase h1 { max-width: 12ch; font-size: 34px; }
  .auth-showcase-grid { grid-template-columns: 1fr; margin-top: 18px; }
  .login-box {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    min-height: auto;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
  }
  .login-logo { align-items: flex-start; }
  .login-logo-copy h2 { font-size: 24px; }
  .account-page-header { padding: 18px; }
  .account-hero-actions { width: 100%; justify-content: stretch; }
  .account-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-head { flex-direction: column; align-items: flex-start; }
  /* Nu se mai forteaza column: baza (linia ~1006) are deja flex-wrap, e
     suficient sa nu mai fortam directia, ca Filtreaza si Sortarea sa imparta
     un rand (#465). align-items:stretch ramane (nu mai e legat de column):
     pe randul lor comun selectul e mai inalt decat butonul (regula de mai
     jos forteaza font-size 16px pe select, ca sa nu faca zoom iOS la focus),
     iar stretch aduce ambele la aceeasi inaltime de rand, deci acelasi y. */
  .filter-bar { align-items: stretch; }
  .filter-bar .search-input-wrap { flex: 1 1 100%; }
  .filter-bar .btn-filter-toggle, .filter-bar .filter-select { flex: 1 1 0; width: auto; justify-content: center; }
  .filter-bar .btn-clear-filters { flex: 1 1 100%; justify-content: center; }
  .filter-select { width: 100%; }
  .filter-panel-inner { flex-direction: column; gap: 14px; }
  .filter-section { min-width: 0; }
  .table-wrap.cu-card-mobil { display: none !important; }
  /* Pe mobil cutiile pachetului de status se dizolva (display: contents):
     badge-urile devin copii directi ai containerului si primesc toate acelasi
     gap, altfel pachetul se distanteaza si se sparge ca unitate separata
     (min-width 21ch + nowrap + colturi lipite sunt gandite pentru tabel). */
  .status-pack, .status-pack .status-pack-main { display: contents; }
  .status-pack .status-pack-warn { margin-left: 0; border-radius: 999px; }
  /* Plasa de siguranta: un element care depaseste latimea nu mai impinge
     pagina in scroll/bounce orizontal. Simptomul unui overflow ascuns de
     regula asta: textul apare taiat la marginea din dreapta. */
  body { overflow-x: clip; }
  .masini-mobile-cards { display: block; }
  .igien-mobile-cards { display: block; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .import-export-grid { grid-template-columns: 1fr; }
  .dashboard-shell { gap: 12px; }
  .dashboard-command { padding: 14px; }
  .dashboard-command-title { font-size: 22px; }
  .dashboard-hero-meta { grid-template-columns: 1fr; }
  .dashboard-quick-actions { grid-template-columns: 1fr; }
  .dashboard-quick-actions > * { grid-column: span 1 !important; }
  .dashboard-alert-grid,
  .dashboard-bottom-grid,
  .dashboard-workbench { gap: 12px; }
  .qr-logs-hero,
  .qr-logs-grid,
  .qr-table-grid { grid-template-columns: 1fr; }
  .qr-metric-grid { grid-template-columns: 1fr; }
  .qr-source-grid { grid-template-columns: 1fr; }
  .qr-trend-grid { gap: 5px; overflow-x: auto; padding-bottom: 4px; }
  .dash-card { padding: 16px; }
  .dash-card-head { margin-bottom: 12px; }
  .dashboard-meta-card { padding: 12px 14px; }
  /* Detail page - centrare mobil */
  .detail-header { flex-direction: column; align-items: center; text-align: center; }
  .detail-photo-wrap { width: 100%; height: 200px; }
  .detail-info-col { width: 100%; }
  .detail-name-row { flex-direction: column; align-items: center; gap: 6px; }
  .detail-name-content { width: 100%; text-align: center; }
  .detail-badges-row { justify-content: center; }
  .detail-achizitor-row { justify-content: center; }
  .detail-nr-block { justify-content: center; }
  .detail-price-block { text-align: center; min-width: 0; width: 100%; }
  .detail-price-card { text-align: center; }
  .detail-campanie-row { justify-content: center; }
  .detail-meta-dates { text-align: center; }
  #page-detail .page-header { justify-content: center; flex-wrap: wrap; gap: 8px; }
  #detail-actions { justify-content: center; flex-wrap: wrap; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; max-height: 94vh; }
  .modal-body { max-height: calc(94vh - 130px); }
  .pt-edit-modal { max-width: 100%; max-height: 94vh; }
  .pt-edit-body { max-height: calc(94vh - 132px); padding: 12px; }
  .pt-template-meta, .pt-editor { grid-template-columns: 1fr; }
  .pt-inspector { position: static; }
  .pt-toolbar .btn { flex: 1 1 120px; justify-content: center; }
  .pt-snap { margin-left: 0; width: 100%; }
  .pt-page-wrap { padding: 12px; }
  .pt-canvas-page { transform: scale(.72); transform-origin: top left; margin: 0; }
  .prog-summaries-row { grid-template-columns: 1fr; }
  .prog-grid { gap: 2px; }
  .prog-cell { min-height: 58px; padding: 5px 4px; gap: 2px; }
  .prog-daynum { font-size: .75rem; }
  .prog-today-num { width: 20px; height: 20px; font-size: .72rem; }
  .prog-holiday-badge { font-size: .5rem; }
  .prog-dow { font-size: .62rem; padding: 6px 2px; }
  .prog-role { font-size: 0; }
  .prog-role::after { font-size: .68rem; font-weight: 700; content: attr(data-init); }
  .prog-role-parc::after { color: oklch(0.75 0.10 210); }
  .prog-role-cc::after   { color: oklch(0.75 0.12 280); }
  .prog-role-ico, .prog-role-txt { display: none; }
  .prog-edit-hint { display: none !important; }
  .by-author { display: none; }
  .cal-grid { grid-auto-rows: minmax(80px, 1fr); }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 34px; }
  .field input, .field select, .field textarea { min-height: 42px; }
  /* Fișiere (tab PDF + Doc. Oficiale): rândurile nu încap pe mobil → wrap + scoate lățimile fixe */
  .file-item { flex-wrap: wrap; }
  [id^="tab-pdf-"] .file-name { flex: 1 1 100% !important; width: auto !important; }
  [id^="tab-doc-"] > div, [id^="tab-doc-"] > label { flex-wrap: wrap; }
  .file-actions { flex-wrap: wrap; margin-left: 0 !important; }
  .doc-tip-select { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .main-wrap { padding: 6px; }
  .kpi-grid { grid-template-columns: 1fr; gap: 8px; }
  #page-dashboard .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-dashboard .kpi { min-height: 118px; padding: 12px; gap: 8px; }
  #page-dashboard .kpi-icon { width: 30px; height: 30px; }
  #page-dashboard .kpi-value { font-size: 30px; }
  #page-dashboard .kpi-spark { height: 18px; }
  .kpi { min-height: 128px; }
  .dashboard-command-title { font-size: 20px; }
  .dashboard-page-header .page-actions,
  .dashboard-page-header .btn { width: 100%; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   v6 PATCH - clase noi adăugate de redesign
   ========================================================== */

/* (sidebar styles consolidated in main sidebar section) */

/* Topbar layout */
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.topbar-center { flex: 1; display: flex; justify-content: center; padding: 0 16px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.topbar-sediu { display:flex; align-items:center; gap:6px; }
.topbar-sediu[hidden] { display:none; }
.topbar-sediu label { font-size:11px; color:var(--text-2); }
.topbar-sediu select { max-width:180px; min-height:34px; padding:5px 28px 5px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); }

.account-sedii { margin-top:24px; }
.sediu-modal { max-width:520px; }
.account-section-header { margin-bottom:12px; }
.account-section-header h2 { font-size:20px; }
.sediu-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.bulk-sediu-field { margin:14px 0; }
.user-access-fieldset { border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; min-width:0; }
.user-access-fieldset legend { padding:0 6px; font-size:12px; font-weight:650; color:var(--text); }
.user-sedii-membership { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; }
.field-help { color:var(--text-2); font-size:12px; margin-bottom:12px; }
.capability-overrides { display:grid; gap:14px; }
.capability-group { min-width:0; }
.capability-group h4 { margin-bottom:7px; font-size:12px; color:var(--accent); }
.capability-row { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(110px,150px); align-items:center; gap:10px; margin-bottom:6px !important; text-transform:none !important; letter-spacing:0 !important; font-size:12px !important; }
.capability-row select { width:100%; min-width:0; }

/* Topbar hamburger (mobil) */
.topbar-menu-btn {
  display: none; width: 32px; height: 32px;
  border-radius: var(--radius-xs); background: transparent; border: none;
  color: var(--text-2); cursor: pointer; place-items: center;
  transition: all var(--dur-fast);
}
.topbar-menu-btn:hover { background: var(--surface-2); color: var(--text); }
/* hamburger inutil pe mobil (bara navigare jos) + colaps sidebar = doar desktop */

/* Breadcrumbs */
.crumbs { display: flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; }
.crumb-root { font-size: 12px; color: var(--muted); }
.crumb-sep  { font-size: 11px; color: var(--muted); opacity: 0.5; }
.crumb-current { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }

/* Topbar search */
.search-wrap { flex: 1; max-width: 440px; position: relative; }
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
  stroke: currentColor; stroke-width: 1.75; fill: none;
}
.search-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 7px 16px 7px 34px;
  color: var(--text); font-size: 13px; outline: none; font-family: inherit;
  transition: all var(--dur-fast);
}
.search-input:focus { background: var(--surface-3); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.search-input::placeholder { color: var(--muted); }

/* Topbar icon buttons */
.topbar-btn {
  position: relative; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  transition: all var(--dur-fast);
}
.topbar-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.mob-only { display: none; }
@media (max-width: 768px) { .mob-only { display: grid; } .btn.mob-only { display: inline-flex; } }
@media (max-width: 768px) {
  .topbar-sediu label { display:none; }
  .topbar-sediu select { max-width:126px; width:126px; }
  .account-section-header { align-items:flex-start; gap:10px; }
  .account-section-header .btn { width:100%; justify-content:center; }
  .capability-row { grid-template-columns:1fr; gap:4px; }
  .capability-row select { min-height:42px; }
}
@media (max-width: 768px) { .desk-only { display: none !important; } }
@media (max-width: 768px) { #tweaks-toggle-btn { display: none !important; } }
#sp-bell-btn { display: none !important; }
.mob-logout-danger:hover { color: var(--err) !important; border-color: var(--err) !important; }
.topbar-badge {
  position: absolute; top: 2px; right: 1px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 999px; min-width: 16px; text-align: center;
  background: var(--accent); color: oklch(0.99 0 0);
  box-shadow: 0 0 0 2px var(--bg);
  animation: badgePulse 2.4s ease-in-out infinite;
}

/* Indentarea intrărilor sub headerul de grup (F13: aplicată tuturor grupurilor
   prin .nav-subitem în navigatie.js; restul stilurilor de accordion fix
   Cereri/Administrare au fost eliminate - grupurile sunt acum dinamice). */
.nav-subitem {
  margin-left: 6px;
  padding-left: 10px;
  font-size: 13px;
}
[data-sidebar="collapsed"] .nav-subitem { margin-left: 0; padding-left: 10px; }

/* KPI color variants */
.kpi-blue   { border-top: 2px solid var(--info); }
.kpi-blue   .kpi-value { color: var(--info); }
.kpi-blue   .kpi-spark { color: var(--info); }
.kpi-yellow { border-top: 2px solid var(--warn); }
.kpi-yellow .kpi-value { color: var(--warn); }
.kpi-yellow .kpi-spark { color: var(--warn); }
.kpi-red    { border-top: 2px solid var(--err); }
.kpi-red    .kpi-value { color: var(--err); }
.kpi-red    .kpi-spark { color: var(--err); }
.kpi-muted  { border-top: 2px solid var(--muted); }
.kpi-muted  .kpi-value { color: var(--text-2); }
.kpi-muted  .kpi-spark { color: var(--muted); }
.kpi-green  { border-top: 2px solid var(--ok); }
.kpi-green  .kpi-value { color: var(--ok); }
.kpi-green  .kpi-spark { color: var(--ok); }

/* ITP necompletat */
.itp-row-saved { background: color-mix(in oklch, var(--ok, #2e7d32) 12%, transparent); transition: background 0.4s; }
.itp-row-error { background: color-mix(in oklch, var(--red, #c62828) 10%, transparent); }

/* Tweaks panel extras */
.tweaks-title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.tweaks-close {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  transition: all var(--dur-fast);
}
.tweaks-close:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.tweaks-reset {
  padding: 7px 12px; border-radius: var(--radius-xs); font-size: 12px; font-family: inherit;
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; width: 100%; transition: all var(--dur-fast); text-align: center;
  margin-top: 4px;
}
.tweaks-reset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.tweaks-reset .ui-ic { width: 14px; height: 14px; }
.tweak-row { display: flex; gap: 4px; flex-wrap: wrap; }
.tweaks-overlay {
  position: fixed; inset: 0; background: oklch(0 0 0 / 0.25);
  z-index: 199; display: none; backdrop-filter: blur(2px);
}
.tweaks-overlay.open { display: block; }

/* Theme toggle button - simple icon toggle */
.theme-toggle:hover { background: var(--surface-3) !important; }

/* ── Brand logos ─────────────────────────────────────────── */
/* Logo mic în tabelul desktop (coloana Marcă Model) */
.brand-cell { display: flex; align-items: center; gap: 8px; }
.brand-logo-icon {
  width: 24px; height: 24px;
  object-fit: contain; flex-shrink: 0;
  border-radius: 3px;
}
/* Logo mare în pagina de detalii - dreapta VIN/Marcă Model */
.detail-brand-logo {
  width: 52px; height: 52px;
  object-fit: contain; flex-shrink: 0;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 768px) {
  .detail-brand-logo { display: none !important; }
}

/* ── Print support ──────────────────────────────────────────── */
@page { size: A4 landscape; margin: 10mm; }

@media print {
  /* Ascunde chrome-ul aplicației și meniul mobil de jos */
  .sidebar-slot, #topbar, .tweaks-panel, .tweaks-overlay, .modal-backdrop,
  #bottom-nav { display: none !important; }

  body, #app, .layout, .main-wrap, #main-scroll { overflow: visible !important; height: auto !important; }
  .page { display: none !important; }
  #page-program { display: block !important; }
  .prog-summaries-row, #prog-stats-section, #prog-stats-an-section { display: none !important; }
  body, .card { background: white !important; color: black !important; box-shadow: none !important; }
  #prog-edit-btn, #prog-print-btn, .prog-luna-arrow, .prog-edit-hint { display: none !important; }

  /* Celule calendar */
  .prog-cell { border: 1px solid #ccc !important; min-height: 72px !important; background: white !important; padding: 5px !important; }
  .prog-cell.prog-empty { border: none !important; }
  .card.card-no-hover { border: 1px solid #ccc !important; padding: 6px !important; background: white !important; }
  .prog-grid { break-inside: avoid; }

  /* Resetează layout-ul mobil - forțează versiunea desktop */
  .prog-role { font-size: 0.78rem !important; display: flex !important; align-items: center !important; gap: 3px !important; }
  .prog-role-ico { display: inline-block !important; font-size: 0.78rem !important; }
  /* Ascunde numele scurt, afișează numele complet din data-fullname */
  .prog-role-txt { display: none !important; }
  .prog-role::after {
    content: attr(data-fullname) !important;
    font-size: 0.78rem !important;
    font-weight: 500;
    color: #222 !important;
    white-space: normal !important;
  }
  .prog-role-parc::after { color: oklch(0.35 0.12 210) !important; }
  .prog-role-cc::after   { color: oklch(0.35 0.14 280) !important; }
  .prog-role-sunday-closed::after { opacity: 0.5 !important; font-style: italic; }
  .prog-sat-badge { display: none !important; }

  /* Quote la final */
  #prog-print-quote {
    display: block !important;
    margin-top: 16px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
  }
  .prog-print-quote-text {
    display: block;
    font-style: italic;
    font-size: 0.8rem;
    color: #444;
  }
  .prog-print-quote-author {
    display: block;
    font-size: 0.72rem;
    color: #777;
    margin-top: 3px;
  }
}

/* ─── SPALATORIE BASE ───────────────────────────────────────────── */
.sp-viz-page { padding: 0; background: var(--bg-secondary); min-height: 100vh; }
.sp-viz-header { background: var(--accent); color: white; padding: 16px 20px;
                 display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-viz-title { font-size: 18px; font-weight: 700; flex: 1; }
.sp-viz-locatie { font-size: 13px; opacity: 0.85; }
.sp-viz-date { font-size: 13px; opacity: 0.85; margin-left: auto; }
.sp-viz-nav { display: flex; gap: 8px; padding: 12px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
.sp-viz-nav button { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border);
                     background: var(--bg-card); cursor: pointer; font-size: 14px; color: var(--text-primary); }
.sp-viz-nav button:hover { background: var(--hover); }
.sp-viz-nav .btn-today { background: var(--accent) !important; color: white !important; border-color: var(--accent) !important; }
.sp-viz-cards { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.sp-viz-refresh-info { text-align: center; font-size: 11px; color: var(--text-muted); padding: 8px; }

.sp-card { background: var(--bg-card); border-radius: 12px; padding: 16px;
           border-left: 5px solid var(--border); box-shadow: var(--shadow-sm); }
.sp-card--asteptare { border-left-color: #f59e0b; }
.sp-card--in_lucru  { border-left-color: #3b82f6; }
.sp-card--finalizat { border-left-color: #10b981; }
.sp-card--anulat    { border-left-color: #9ca3af; opacity: 0.6; }

.sp-card-time    { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.sp-card-vehicul { font-size: 16px; margin-bottom: 4px; color: var(--text-primary); }
.sp-card-vin     { font-size: 15px; color: var(--text-primary); font-family: monospace; display: block;
                   letter-spacing: 0.05em; font-weight: 600; cursor: pointer; margin-top: 4px; }
.sp-card-vin:hover { text-decoration: underline; }
.sp-card-program { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.sp-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-incepe   { flex: 1; padding: 12px; background: #2563eb; color: white;
                border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-finalizat { flex: 1; padding: 12px; background: #047857; color: white;
                 border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-incepe:hover   { background: #1d4ed8; }
.btn-finalizat:hover { background: #065f46; }

.sp-card-status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px;
                        font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.sp-status--asteptare { background: #fef3c7; color: #92400e; }
.sp-status--in_lucru  { background: #dbeafe; color: #1e40af; }
.sp-status--finalizat { background: #d1fae5; color: #065f46; }
.sp-status--anulat    { background: #f3f4f6; color: #4b5563; }

/* ─── SPALATORIE CALENDAR TIMELINE ──────────────────────────────── */
.sp-admin-layout { display: flex; gap: 20px; padding: 20px; }
.sp-calendar-wrap { flex: 1; min-width: 0; }
.sp-sidebar-admin { width: 300px; flex-shrink: 0; }
.sp-section-title { font-size: 14px; font-weight: 700; color: var(--text-secondary);
                    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; margin-top: 20px; }
.sp-section-title:first-child { margin-top: 0; }

.sp-locatii-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sp-locatie-tab { padding: 6px 14px; border-radius: 20px; border: 2px solid var(--border);
                  background: var(--bg-card); font-size: 13px; font-weight: 500;
                  cursor: pointer; color: var(--text-primary); transition: all .15s; }
.sp-locatie-tab.active { color: white; border-color: transparent; }
.sp-locatie-tab:hover { border-color: var(--accent); }

/* Nivelul de sediu din spălătorie (#444): spălătoriile fiecărui sediu, cu
   crearea în capul grupului. Cardul e ținta de navigare spre pagina bay-ului. */
.sp-locatii-grid { padding: 12px 20px 24px; }
.sp-grup-sediu { margin-bottom: 22px; }
.sp-grup-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px; }
.sp-grup-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.sp-grup-count { font-size: 12px; color: var(--text2); flex: 1; }
.sp-grup-carduri { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sp-bay-card { display: flex; align-items: stretch; gap: 4px;
  border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-card); padding: 10px 12px; }
.sp-bay-card-open { flex: 1; display: flex; flex-direction: column; gap: 3px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit;
  color: var(--text); }
.sp-bay-card-open:hover .sp-bay-card-nume { color: var(--accent); }
.sp-bay-card-nume { font-size: 14px; font-weight: 600; }
.sp-bay-card-stari { font-size: 11px; color: var(--text2); }
.sp-bay-card-actiuni { display: flex; flex-direction: column; gap: 4px; }
/* Antetul paginii unei spălătorii: de unde vii, unde ești, al cui e. */
.sp-bay-breadcrumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px 0; }
.sp-bay-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.sp-bay-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sp-bay-sediu { font-size: 12px; color: var(--text2); }
.sp-lista-tab.active { background: var(--accent); border-color: transparent; color: white; }
.sp-live-tab { border-color: oklch(0.72 0.13 55 / 0.5); color: oklch(0.72 0.13 55); }
.sp-live-tab.active { background: oklch(0.72 0.13 55); border-color: transparent; color: white; }
.sp-live-tab:hover { border-color: oklch(0.72 0.13 55); }

/* ── Live view ── */
.sp-live-stats { display: flex; gap: 12px; padding: 16px 0 8px; flex-wrap: wrap; }
.sp-live-kpi { display: flex; align-items: center; gap: 10px; padding: 14px 20px;
               border-radius: var(--radius-sm); border: 1px solid var(--border);
               background: var(--surface); flex: 1; min-width: 140px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.sp-live-kpi-num { font-size: 28px; font-weight: 700; line-height: 1; }
.sp-live-kpi--lucru .sp-live-kpi-num { color: #3b82f6; }
.sp-live-kpi--asteptare .sp-live-kpi-num { color: #f59e0b; }
.sp-live-group-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
                       color: var(--text-2); margin: 16px 0 8px; }
.sp-live-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
                padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 8px; }
.sp-live-card:hover { border-color: var(--accent); background: var(--surface-2); }
.sp-live-card--in_lucru { border-left: 3px solid #3b82f6; }
.sp-live-card--asteptare { border-left: 3px solid #f59e0b; }
.sp-live-card-time { font-size: 11px; color: var(--text-2); margin-bottom: 4px; font-family: var(--font-mono); }
.sp-live-card-vehicul { font-size: 14px; margin-bottom: 3px; }
.sp-live-card-vehicul code { font-size: 11px; color: var(--text-2); font-family: var(--font-mono); cursor: pointer; margin-left: 6px; }
.sp-live-card-vehicul code:hover { color: var(--accent); }
.sp-live-card-meta { font-size: 12px; color: var(--text-2); }
.sp-live-card-note { font-size: 12px; color: var(--text-2); font-style: italic; margin-top: 4px; }

.sp-live-columns { display: flex; gap: 16px; padding: 8px 0 16px; align-items: flex-start; }
.sp-live-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.sp-live-col-header { border-top: 4px solid #3b82f6; border-radius: 4px 4px 0 0; background: var(--surface);
                      padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
                      font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.sp-live-col-count { background: var(--surface-2); border-radius: 12px; padding: 1px 8px; font-size: 12px; color: var(--text-2); }
.sp-live-col-empty { font-size: 12px; color: var(--text-2); text-align: center; padding: 20px 0; font-style: italic; }

.sp-week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sp-week-nav button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
                      background: var(--bg-card); cursor: pointer; font-size: 13px; color: var(--text-primary); }
.sp-week-nav button:hover { background: var(--hover); }
.sp-week-label { font-size: 14px; font-weight: 600; flex: 1; text-align: center; color: var(--text-primary); }

.sp-timeline { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
/* #410: numarul de coloane vine din JS (`--sp-cols`, pus inline pe
   `.sp-timeline`), fiindca sunt zilele LUCRATOARE ale bay-ului, 1..7, si
   trebuie sa fie acelasi numar cu cel din formulele de pozitionare absoluta a
   blocurilor (`(100% - 52px) / nrCol`). Implicitul 5 pastreaza cazul vechi. */
.sp-timeline-header { display: grid; grid-template-columns: 52px repeat(var(--sp-cols, 5), 1fr);
                      background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.sp-timeline-col-header { padding: 8px 4px; text-align: center; font-size: 12px;
                           font-weight: 600; border-right: 1px solid var(--border); color: var(--text-secondary); }
.sp-timeline-col-header:last-child { border-right: none; }
.sp-timeline-col-header.today { color: var(--accent); }
.sp-timeline-body { position: relative; }
.sp-slot-row { display: grid; grid-template-columns: 52px repeat(var(--sp-cols, 5), 1fr);
               border-bottom: 1px solid var(--border-light); height: 20px; overflow: hidden; }
.sp-slot-row.sp-pausa-row { background: var(--bg-secondary); }
.sp-slot-time { font-size: 10px; color: var(--text-muted); padding: 2px 4px;
                border-right: 1px solid var(--border); line-height: 1; white-space: nowrap; overflow: hidden; }
.sp-slot-cell { border-right: 1px solid var(--border-light); position: relative; cursor: pointer; height: 20px; overflow: hidden; }
.sp-slot-cell:last-child { border-right: none; }
.sp-slot-cell:hover { background: var(--hover); }
.sp-pausa-row .sp-slot-cell { background: var(--bg-secondary); cursor: default; }
.sp-pausa-label { font-size: 10px; color: var(--text-muted); padding: 6px; grid-column: 1/-1; text-align: center; }
.sp-slot-cell.sp-blocat-cell { background: rgba(239,68,68,0.08); cursor: not-allowed; }
.sp-zi-blocata .sp-timeline-col-header { color: #dc2626; }

.sp-block { position: absolute; left: 2px; right: 2px; border-radius: 5px; padding: 2px 5px;
            font-size: 11px; overflow: hidden; z-index: 1; cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,.2); color: white; }
.sp-block-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-block-time  { opacity: .85; font-size: 10px; }

.sp-gol { position: absolute; left: 2px; right: 2px; border-radius: 3px; z-index: 0;
          pointer-events: none; display: flex; align-items: center; justify-content: center;
          font-size: 9px; color: var(--warn); overflow: hidden;
          background: repeating-linear-gradient(45deg, rgba(217,119,6,.10),
            rgba(217,119,6,.10) 4px, transparent 4px, transparent 8px); }

/* ─── SPALATORIE FORMULAR WIZARD ─────────────────────────────────── */
.sp-wizard { max-width: 540px; margin: 0 auto; padding: 20px 16px; }
.sp-wizard-card { background: var(--bg-card); border-radius: 12px; padding: 24px;
                  border: 1px solid var(--border); margin-bottom: 16px; }
.sp-step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.sp-step-dot { width: 10px; height: 10px; border-radius: 50%;
               background: var(--border); transition: background .2s; }
.sp-step-dot.active { background: var(--accent); }
.sp-step-label { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 6px; margin-bottom: 20px; }

.sp-field { margin-bottom: 16px; }
.sp-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
                  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.sp-field input, .sp-field select, .sp-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-primary); font-size: 14px;
  box-sizing: border-box; }
.sp-field input:focus, .sp-field select:focus { outline: none; border-color: var(--accent); }
/* rând de bifă în modalele de spălătorie: eticheta stă lângă checkbox, nu deasupra lui,
   iar checkbox-ul scapă de `width:100%` moștenit de la inputurile de text */
.sp-field-check label { display: flex; align-items: center; gap: 8px; margin-bottom: 0;
                        text-transform: none; letter-spacing: 0; font-size: 13px;
                        color: var(--text-primary); cursor: pointer; }
.sp-field-check input[type="checkbox"] { width: auto; margin: 0; flex: none; }

.sp-vin-result { background: #d1fae5; border: 1px solid #10b981; border-radius: 8px;
                 padding: 10px 14px; margin: 8px 0; font-size: 14px; color: #065f46; }
.sp-vin-not-found { background: #fef3c7 !important; border-color: #f59e0b !important; color: #92400e !important; }
.sp-vin-suggestions { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 6px 0; }
.sp-vin-sugg-item { padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--text-primary);
                    background: var(--bg-card); border-bottom: 1px solid var(--border); }
.sp-vin-sugg-item:last-child { border-bottom: none; }
.sp-vin-sugg-item:hover { background: var(--hover); }
.sp-vin-sugg-item code { font-size: 12px; color: var(--accent); }

.sp-calendar-mini { user-select: none; }
.sp-cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sp-cal-nav button { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
                     background: var(--bg-card); cursor: pointer; font-size: 13px; color: var(--text-primary); }
.sp-cal-title { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sp-cal-dow  { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted);
               padding: 4px 2px; }
.sp-cal-day  { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
               border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent;
               transition: all .12s; color: var(--text-primary); }
.sp-cal-day:hover:not(.disabled):not(.weekend) { border-color: var(--accent); background: var(--hover); }
.sp-cal-day.selected { background: var(--accent); color: white; border-color: var(--accent); }
.sp-cal-day.today { font-weight: 700; }
.sp-cal-day.disabled, .sp-cal-day.past { opacity: .3; cursor: not-allowed; pointer-events: none; }
.sp-cal-day.weekend { opacity: .2; cursor: not-allowed; pointer-events: none; }
.sp-cal-day.blocat  { background: rgba(239,68,68,.1); color: #3a0000; cursor: not-allowed; pointer-events: none; }
.sp-cal-day.alt-month { opacity: .35; }

.sp-sloturi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
                   gap: 8px; margin: 12px 0; }
.sp-slot-btn { padding: 10px 6px; border-radius: 8px; font-size: 13px; font-weight: 600;
               text-align: center; border: 2px solid transparent; cursor: pointer; transition: all .15s; }
.sp-slot-btn.liber  { background: #d1fae5; color: #065f46; border-color: #10b981; }
.sp-slot-btn.liber:hover  { background: #047857; color: white; }
.sp-slot-btn.liber.recomandat { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.sp-slot-btn.ocupat { background: var(--bg-secondary); color: var(--text-muted);
                      cursor: not-allowed; text-decoration: line-through; }
.sp-slot-btn.selected { background: var(--accent); color: white; border-color: var(--accent); }

.sp-btn-row { display: flex; gap: 10px; margin-top: 20px; }
.sp-btn-row .btn { flex: 1; }

.sp-confirmare-sumar { background: var(--bg-secondary); border-radius: 8px; padding: 16px;
                       margin-bottom: 16px; border: 1px solid var(--border); }
.sp-confirmare-sumar p { margin: 6px 0; font-size: 14px; color: var(--text-primary); }

/* ─── SPALATORIE LISTA PROGRAMARI ────────────────────────────────── */
.sp-programari-table { width: 100%; border-collapse: collapse; }
.sp-programari-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted);
                           padding: 8px 12px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
.sp-programari-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light);
                           font-size: 14px; color: var(--text-primary); vertical-align: middle; }
.sp-programari-table tr:hover td { background: var(--hover); }

/* ─── SPALATORIE ADMIN SIDEBAR ───────────────────────────────────── */
.sp-prog-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
                border-radius: 8px; border: 1px solid var(--border); margin-bottom: 8px;
                background: var(--bg-card); }
.sp-prog-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sp-prog-info { flex: 1; min-width: 0; }
.sp-prog-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sp-prog-meta { font-size: 11px; color: var(--text-muted); }
.sp-prog-actions { display: flex; gap: 4px; }
.sp-prog-actions button { padding: 4px 8px; border-radius: 5px; border: 1px solid var(--border);
                           background: var(--bg-secondary); cursor: pointer; font-size: 12px; color: var(--text-primary); }
.sp-prog-actions button:hover { background: var(--hover); }

.sp-blocate-list { max-height: 200px; overflow-y: auto; }
.sp-blocata-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                   padding: 6px 10px; border-radius: 6px; margin-bottom: 4px;
                   background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.15); }
.sp-blocata-data { font-size: 13px; font-weight: 600; color: #dc2626; }
.sp-blocata-motiv { font-size: 11px; color: var(--text-muted); }
.sp-blocata-del { padding: 2px 7px; border-radius: 4px; border: none; background: rgba(239,68,68,.15);
                  color: #3a0000; cursor: pointer; font-size: 12px; }
.sp-blocata-del:hover { background: rgba(239,68,68,.3); }

/* ─── SPALATORIE PAGE HEADER ─────────────────────────────────────── */
.sp-page-header { padding: 20px 20px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-page-header h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
.sp-page-header .sp-page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-admin-layout  { flex-direction: column; padding: 12px; }
  .sp-sidebar-admin { width: 100%; }
  .sp-live-columns { overflow-x: auto; }
  .sp-live-column { flex: 0 0 260px; }
  /* Pe mobil se afiseaza fix 2 coloane de zi (regulile de mai jos ascund
     restul), deci grila are 2 piste, nu una, indiferent de `--sp-cols`.
     NEDOVEDIT: alinierea blocurilor pozitionate absolut ramane calculata pe
     `nrCol` (toate zilele), deci pe mobil blocurile stau in continuare peste
     alte coloane decat celulele; e un defect mai vechi decat #410 si o probă
     reală cere Playwright pe viewport îngust. */
  .sp-timeline-header { grid-template-columns: 42px repeat(2, 1fr); }
  .sp-slot-row { grid-template-columns: 42px repeat(2, 1fr); }
  .sp-timeline-col-header:not(.today-col):not(.today):not(:nth-child(2)) { display: none; }
  .sp-slot-cell:not(:nth-child(2)):not(:nth-child(3)) { display: none; }
  .sp-viz-nav { flex-wrap: nowrap; }
  .sp-card-time { font-size: 18px; }
  .btn-incepe, .btn-finalizat { padding: 14px; font-size: 16px; }
  .sp-locatii-tabs { gap: 4px; }
  .sp-locatie-tab { padding: 5px 10px; font-size: 12px; }
}

/* ==========================================================
   LOGIN - extra (light theme overrides, logo, login button)
   ========================================================== */
[data-theme="light"] #login-page {
  background:
    radial-gradient(ellipse 110% 80% at 8% 4%,   oklch(0.56 0.14 45 / 0.11),  transparent 64%),
    radial-gradient(ellipse 80% 110% at 92% 96%,  oklch(0.60 0.14 270 / 0.09), transparent 64%),
    oklch(0.952 0.005 75);
}
[data-theme="light"] .auth-showcase,
[data-theme="light"] .login-box {
  background: oklch(1 0 0 / 0.84);
  border-color: oklch(0.88 0.010 70 / 0.75);
  box-shadow:
    0 48px 110px oklch(0.30 0.02 50 / 0.28),
    0 16px 40px  oklch(0.30 0.02 50 / 0.16),
    inset 0 1.5px 0 oklch(1 0 0 / 1.00);
}
[data-theme="light"] .auth-showcase {
  background:
    radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 12%, transparent), transparent 32%),
    linear-gradient(180deg, oklch(1 0 0 / 0.92), oklch(0.99 0.004 75 / 0.88));
}
/* Logo image - overriding inline styles */
.login-logo-img {
  width: 82px; height: 82px;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  box-shadow:
    0 16px 50px oklch(0 0 0 / 0.48),
    0 0 0 1px oklch(1 0 0 / 0.14);
}
[data-theme="light"] .login-logo-img {
  box-shadow:
    0 16px 50px oklch(0.30 0.02 50 / 0.24),
    0 0 0 1px oklch(0 0 0 / 0.07);
}
#login-btn {
  padding: 13px 20px;
  font-size: 14.5px;
  font-weight: 660;
  border-radius: var(--radius-md);
  margin-top: 8px;
  box-shadow: 0 8px 30px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.26);
}
#login-btn:hover {
  box-shadow: 0 14px 40px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.30);
  filter: brightness(1.09);
}

/* ── MODUL IN / OUT ─────────────────────────────────────── */
#in-out-content { padding-bottom: 96px; }   /* loc pentru bara sticky */

.io-actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 8px; align-items: center;
  padding: 10px; margin-top: 12px;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.io-search-input {
  flex: 1; min-width: 0;
  padding: 11px 14px; font-size: 15px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.io-save-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.io-save-btn.full { flex: 1 1 auto; width: 100%; }

.io-records-embed { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Iconițe SVG inline */
.io-ic { flex: 0 0 auto; vertical-align: -0.18em; }

.io-empty { padding: 18px; text-align: center; color: var(--text2); }

.io-result {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 11px 14px; margin-top: 6px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer;
}
.io-result:hover { border-color: var(--accent); }
.io-result-vin { font-family: monospace; font-size: 13px; font-weight: 600; }
.io-result-name { font-size: 12px; color: var(--text2); }

.io-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; margin-top: 8px;
}
.io-selected { display: flex; flex-direction: column; gap: 2px; position: relative; }
.io-selected-vin { font-family: monospace; font-size: 16px; font-weight: 700; }
.io-selected-name { font-size: 13px; color: var(--text2); }
.io-change {
  position: absolute; top: 0; right: 0;
  background: none; border: none; color: var(--accent);
  font-size: 13px; cursor: pointer; padding: 2px 4px;
}

.io-segment { display: flex; gap: 8px; margin: 16px 0 4px; }
.io-seg {
  flex: 1; padding: 12px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.io-seg.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.io-section-label { font-size: 12px; color: var(--text2); margin: 16px 0 6px; font-weight: 600; }

.io-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.io-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 14px;
  background: var(--surface-2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-pill); cursor: pointer;
}
.io-chip.on { border-color: var(--green); background: oklch(0.72 0.13 145 / 0.14); color: var(--green); }
.io-chip-ic { display: inline-flex; align-items: center; }

@media (max-width: 768px) {
  .io-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .io-chip {
    justify-content: center;
    text-align: center;
    min-width: 0;
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
  }
}

.io-photo {
  display: block; padding: 16px; text-align: center; cursor: pointer;
  background: var(--surface-2); color: var(--text2); font-size: 14px;
  border: 2px dashed var(--border); border-radius: var(--radius-md);
}
/* #460: adaugă poze + captură ghidată pe același rând, aceeași lățime */
.io-photo-row { display: flex; gap: 8px; }
.io-photo-row .io-photo { flex: 1; min-width: 0; }
.io-photo:hover { border-color: var(--accent); }
.io-photo-lbl { display: inline-flex; align-items: center; gap: 8px; }

/* Preview poze selectate (acumulate) */
.io-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; margin-top: 10px;
}
.io-thumb { position: relative; aspect-ratio: 1; }
.io-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.io-thumb-x {
  position: absolute; top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  color: #fff; background: var(--danger);
  border: 2px solid var(--surface); border-radius: 50%;
}
.io-upload-progress {
  position: absolute; left: 6px; right: 6px; bottom: 7px; height: 5px;
  background: oklch(0 0 0 / 0.35); border-radius: 999px; overflow: hidden;
}
.io-upload-progress > div { height: 100%; background: var(--green); transition: width .15s linear; }
.io-upload-pct {
  position: absolute; left: 6px; bottom: 15px; padding: 1px 5px;
  color: #fff; background: oklch(0 0 0 / 0.55); border-radius: 999px; font-size: 10px; font-weight: 700;
}
.io-upload-note { margin-top: 8px; font-size: 12px; color: var(--text2); }
.io-upload-pct.io-upload-failed { background: var(--err, #c81e1e); }
.io-thumb.io-thumb-failed img { outline: 2px solid var(--err, #c81e1e); outline-offset: -2px; }

.io-obs {
  width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); resize: vertical;
}
.io-save-top {
  width: 100%; margin: 14px 0 4px; padding: 14px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* Card istoric In/Out (detaliu mașină) */
.io-hist-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.io-hist-row:last-child { border-bottom: none; padding-bottom: 0; }
.io-hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.io-hist-tip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.io-hist-tip.in { color: var(--green); background: oklch(0.72 0.13 145 / 0.14); }
.io-hist-tip.out { color: var(--accent); background: var(--accent-soft); }
.io-hist-meta { font-size: 12px; color: var(--text2); }
.io-hist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.io-hist-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.io-hist-obs {
  margin-top: 8px; font-size: 13px; color: var(--text2);
  white-space: pre-wrap; padding: 8px 11px;
  background: var(--surface-2); border-radius: var(--radius-md);
}

/* Toate înregistrările In/Out - card per eveniment */
.ior-card{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:14px;margin-bottom:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color .12s,background .12s;}
.ior-card:hover{border-color:var(--accent);background:var(--surface-2);}
.ior-head{display:flex;gap:14px;align-items:flex-start;flex:1;min-width:0;}
.ior-thumb-wrap{cursor:pointer;flex:0 0 auto;}
.ior-thumb{width:64px;height:64px;flex:0 0 64px;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-2);}
.ior-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--text2);}
.ior-head-text{flex:1;min-width:0;}
.ior-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.ior-title{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;cursor:pointer;}
.ior-vin{color:var(--text2);font-weight:500;font-size:13px;}

.ior-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:0 0 auto;min-width:220px;}
.ior-actions-select{width:100%;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:13px;}

/* Rând compact: Editează (etichetat) + acțiuni link (doar iconițe, lățime fixă - nu se mai ciocnesc textele) */
.ior-actions-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.ior-edit-btn{flex:0 1 auto;}
.ior-icon-btn{
  display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;padding:0;
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-2);
  border:1px solid var(--border);cursor:pointer;transition:all var(--dur-fast);
}
.ior-icon-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong);transform:translateY(-1px);}
.ior-icon-btn:active{transform:translateY(0);}
.ior-icon-btn svg{width:15px;height:15px;}
.ior-icon-btn--danger{color:var(--err);border-color:oklch(0.68 0.18 25 / 0.25);background:oklch(0.68 0.18 25 / 0.08);}
.ior-icon-btn--danger:hover{background:oklch(0.68 0.18 25 / 0.18);border-color:oklch(0.68 0.18 25 / 0.4);}

/* Ștergerea evenimentului stă izolată, pe rândul ei - nu lângă alte acțiuni, ca să nu fie atinsă din greșeală */
.ior-delete-btn{width:100%;justify-content:center;margin-top:2px;padding-top:10px;border:none;border-top:1px dashed var(--border);border-radius:0;background:transparent;}
.ior-delete-btn:hover{background:oklch(0.68 0.18 25 / 0.08);border-top-color:oklch(0.68 0.18 25 / 0.3);}
.ior-actions-note{font-size:11px;color:var(--text2);text-align:right;}

@media (max-width:768px){
  .ior-card{flex-direction:column;align-items:stretch;padding:12px;gap:10px;}
  .ior-actions{width:100%;min-width:0;gap:8px;padding-top:10px;border-top:1px solid var(--border);}
  .ior-actions-row{justify-content:stretch;}
  .ior-edit-btn{flex:1 1 auto;justify-content:center;}
  .ior-icon-btn{width:38px;height:38px;}
  .ior-icon-btn svg{width:16px;height:16px;}
  .ior-actions-note{text-align:left;}
  /* select-ul de status de mai jos deja afișează/editează statusul - bifa din antet devine duplicat pe ecran îngust */
  .ior-card:has(.ior-actions-select) .ior-top .badge{display:none;}
}
@media (max-width:480px){
  .ior-thumb{width:52px;height:52px;flex:0 0 52px;}
}

/* Upload tray */
#upload-tray{position:fixed;bottom:20px;right:20px;width:340px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:9999;font-size:12px;max-height:420px;display:flex;flex-direction:column;}
.ut-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text);gap:8px;flex-shrink:0;}
.ut-btn{background:none;border:none;cursor:pointer;color:var(--text-2);padding:2px 5px;border-radius:var(--radius-xs);font-size:11px;line-height:1;}
.ut-btn:hover{background:var(--surface-2);color:var(--text);}
.ut-list{overflow-y:auto;flex:1;min-height:0;}
.ut-row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--border);}
.ut-row:last-child{border-bottom:none;}
.ut-fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.ut-right{display:flex;align-items:center;gap:5px;min-width:110px;justify-content:flex-end;flex-shrink:0;}
.ut-progress{flex:1;height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:55px;}
.ut-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s ease;}
.ut-pct{font-size:10px;color:var(--text-2);min-width:28px;text-align:right;white-space:nowrap;}
.ut-status{font-size:11px;}
.ut-queued{color:var(--text-2);}
.ut-done{color:var(--green);font-weight:600;}
.ut-err{color:var(--red);font-weight:600;}

/* Push preferences */
.push-settings{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
.push-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.push-settings-title{font-size:14px;font-weight:700;color:var(--text);}
.push-settings-note{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.35;}
.push-pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.push-pref-row:last-child{border-bottom:none;}
.push-pref-label{font-size:13px;font-weight:600;color:var(--text);}
.ios-switch{position:relative;display:inline-flex;width:50px;height:30px;flex:0 0 auto;}
.ios-switch input{opacity:0;width:0;height:0;}
.ios-switch span{position:absolute;inset:0;cursor:pointer;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-strong);transition:background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);}
.ios-switch span:before{content:"";position:absolute;width:24px;height:24px;left:2px;top:2px;border-radius:50%;background:var(--surface);box-shadow:0 1px 4px oklch(0 0 0 / .28);transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.ios-switch input:checked + span{background:var(--ok);border-color:var(--ok);}
.ios-switch input:checked + span:before{transform:translateX(20px);}
.ios-switch input:focus-visible + span{box-shadow:0 0 0 3px oklch(0.74 0.14 145 / .18);}
.ios-switch input:disabled + span{opacity:.55;cursor:not-allowed;}
.ios-switch--sm{width:32px;height:19px;}
.ios-switch--sm span:before{width:13px;height:13px;left:2px;top:2px;}
.ios-switch--sm input:checked + span:before{transform:translateX(13px);}

/* ── Cereri RAR - KPI compact ── */
.rar-status-row > td {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rar-status) 11%, transparent),
      color-mix(in srgb, var(--rar-status) 4%, transparent) 58%,
      transparent 100%);
  border-bottom-color: color-mix(in srgb, var(--rar-status) 22%, var(--border));
}
.rar-status-row > td:first-child {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--rar-status) 70%, transparent);
}
.rar-status-row:hover > td {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rar-status) 16%, transparent),
      color-mix(in srgb, var(--rar-status) 7%, transparent) 58%,
      color-mix(in srgb, var(--rar-status) 3%, transparent) 100%);
}
.rar-status-card {
  border-color: color-mix(in srgb, var(--rar-status) 34%, var(--border));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rar-status) 12%, transparent),
      color-mix(in srgb, var(--rar-status) 4%, transparent) 46%,
      var(--surface) 100%);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--rar-status) 72%, transparent);
}
.rar-status-card .igien-card-row {
  border-bottom-color: color-mix(in srgb, var(--rar-status) 18%, var(--border));
}
.rar-status-card .igien-card-status {
  background: color-mix(in srgb, var(--rar-status) 8%, var(--surface));
}
.rar-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .rar-kpi-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .rar-kpi-grid .kpi { min-height: 0; padding: 10px 8px; gap: 4px; }
  .rar-kpi-grid .kpi-head { display: none; }
  .rar-kpi-grid .kpi-value { font-size: 20px; }
  .rar-kpi-grid .kpi-label { font-size: 10px; }
}
@media (max-width: 480px) {
  .rar-kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rar-kpi-grid .kpi { min-height: 0; padding: 8px 4px; text-align: center; }
}

/* ── RAR - modal detaliu cerere (click pe rând/card) ── */
.rar-row-clickable { cursor: pointer; }
.rar-detail-section { margin-bottom: 16px; }
.rar-detail-section:last-child { margin-bottom: 0; }
.rar-detail-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text2); font-weight: 600; margin-bottom: 6px; }
.rar-detail-note { font-size: 13px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }

/* ── CERERI - search + grupare collapsible Active/Finalizate (detailing, nr. roșii, înmatriculare, RAR) ── */
.cereri-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cereri-filters input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.cereri-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 6px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; user-select: none; }
.cereri-group:hover { background: var(--surface-2); }
.cereri-group-caret { flex: 0 0 auto; transition: transform 0.15s var(--ease, ease); transform: rotate(-90deg); }
.cereri-group.open > .cereri-group-caret { transform: rotate(0deg); }
.cereri-group-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text2); }

/* ── VANDUTE - listă carduri + explorer documente ─────────────────────────── */
.vandute-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.vandute-filters input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.vandute-filters select { padding: 8px 10px; font-size: 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ── ACHIZIȚIE - bară de filtre (stare/lună/achizitor/căutare) ── */
.achizitie-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.achizitie-filters input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.achizitie-filters select, .achizitie-filters input[type="month"] { padding: 8px 10px; font-size: 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); }

.vandute-tree { display: flex; flex-direction: column; gap: 2px; }
.vandute-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; user-select: none; }
.vandute-group:hover { background: var(--surface-2); }
.vandute-group-caret { flex: 0 0 auto; transition: transform 0.15s var(--ease, ease); transform: rotate(-90deg); }
.vandute-group.open > .vandute-group-caret { transform: rotate(0deg); }
.vandute-group-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text2); }
.vandute-group--year { font-size: 15px; }
.vandute-group--month { font-size: 13.5px; margin-left: 18px; font-weight: 500; }
.vandute-seller-label { font-size: 12px; font-weight: 600; color: var(--text2); margin: 10px 0 6px 36px; }
.vandute-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-left: 36px; margin-bottom: 10px; }
.vandute-card { cursor: pointer; margin-bottom: 0; }
.vandute-card:hover { border-color: var(--primary); }
.vandute-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vandute-explorer { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.vandute-folders { border-right: 1px solid var(--border); padding-right: 12px; }
.vandute-folder { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.vandute-folder:hover { background: var(--surface-2); }
.vandute-folder.active { background: var(--surface-2); font-weight: 600; }
.vandute-folder-nume { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vandute-folder-count { font-size: 11px; color: var(--text2); }
.vandute-folder .btn { padding: 2px 4px; }
.vandute-folder input { flex: 1; min-width: 0; font-size: 13px; padding: 4px 6px; }
.vandute-folders > div > input { flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px; }
.vandute-file { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--border); font-size: 13px; }
.vandute-file:last-of-type { border-bottom: none; }
.vandute-file a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vandute-file-size { font-size: 11px; color: var(--text2); white-space: nowrap; }
@media (max-width: 800px) {
  .vandute-detail-grid { grid-template-columns: 1fr; }
  .vandute-explorer { grid-template-columns: 1fr; }
  .vandute-folders { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 12px 0; }
}

/* F13: sidebar grupuri dinamice */
/* Container unic (#nav-groups) - un bloc .nav-meniu-grup per grup, TOATE cu
   header propriu colapsabil (inclusiv fostul grup „Principal" fără header -
   schimbare intenționată). Randat integral de renderNav() în navigatie.js. */
.nav-meniu-grup { margin: 4px 0; }
.nav-meniu-grup-title {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 0; padding: 8px 12px 6px 12px;
  background: none; border: none; appearance: none; -webkit-appearance: none;
  font: inherit; text-align: left; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.nav-meniu-grup-title:hover { color: var(--text); }
.nav-meniu-grup-chevron {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-meniu-grup-chevron svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }
.nav-meniu-grup.collapsed .nav-meniu-grup-chevron { transform: rotate(-90deg); }
.nav-meniu-grup-items { display: flex; flex-direction: column; gap: 2px; }
.nav-meniu-grup.collapsed .nav-meniu-grup-items { display: none; }
/* Colapsat la nivel de sidebar (rail cu doar iconițe): headerele dispar,
   toate intrările rămân vizibile plat, indiferent de starea din localStorage. */
[data-sidebar="collapsed"] .nav-meniu-grup-title { display: none; }
[data-sidebar="collapsed"] .nav-meniu-grup.collapsed .nav-meniu-grup-items { display: flex; }

/* F13: admin navigatie DnD ─────────────────────────────────────────
   Layout „oglindă sidebar": coloană centrată cu un card per grup de meniu,
   drag-and-drop pentru pagini (între carduri) și pentru carduri (reordonare
   grupuri). Autosave total - fără buton Salvează. */
.f13-nav-admin { max-width: 440px; margin: 0 auto; }
.f13-nav-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.f13-nav-cards { display: flex; flex-direction: column; gap: 12px; }

.f13-grup-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.f13-grup-card.f13-tombstone { opacity: 0.62; border-style: dashed; }

.f13-grup-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.f13-grup-nume { font-weight: 600; font-size: 14px; color: var(--text); flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.f13-grup-count {
  font-size: 11px; color: var(--muted); background: var(--surface-3);
  border-radius: var(--radius-pill); padding: 1px 8px; min-width: 20px; text-align: center;
}
.f13-grup-actions { display: flex; align-items: center; gap: 2px; }

.f13-grup-body { padding: 8px; }
.f13-grup-card.collapsed .f13-grup-body { display: none; }
.f13-grup-card.collapsed .f13-grup-chevron { transform: rotate(-90deg); }
.f13-grup-chevron { transition: transform var(--dur) var(--ease); }

.f13-pagini { display: flex; flex-direction: column; gap: 6px; min-height: 32px; }
.f13-pagina-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.f13-pagina-row:hover { border-color: var(--border-strong); }
.f13-pagina-eticheta { flex: 1; min-width: 0; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.f13-pagina-actions { display: flex; align-items: center; gap: 2px; }
.f13-pagina-goala {
  padding: 10px; font-size: 12px; color: var(--muted);
  text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-xs);
}

/* Container de taburi: rândul de meniu + taburile lui, cuibărite. Pagina admin
   trebuie să arate ca meniul livrat, nu ca o listă plată în care containerul
   stă pierdut printre propriile taburi (#005). */
.f13-container-bloc { display: flex; flex-direction: column; gap: 6px; }
.f13-container-toggle {
  display: flex; align-items: center; gap: 6px;
  margin-left: 22px; padding: 3px 6px;
  background: transparent; border: none; border-radius: var(--radius-xs);
  font-size: 11px; color: var(--muted); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.f13-container-toggle:hover { color: var(--text-2); background: var(--surface-3); }
.f13-container-toggle svg { transform: rotate(-90deg); transition: transform var(--dur) var(--ease); }
.f13-container-bloc.is-open .f13-container-toggle svg { transform: rotate(0deg); }
/* Închis implicit: scopul plierii e un ecran scurt, iar cardul „Administrare"
   ar redeveni un perete de 18 rânduri dacă s-ar deschide singur. */
.f13-container-taburi { display: none; flex-direction: column; gap: 6px; }
.f13-container-bloc.is-open .f13-container-taburi { display: flex; }
/* Indentare + linie de legătură: taburile aparțin vizual rândului de deasupra. */
.f13-container-taburi {
  margin-left: 22px; padding-left: 12px;
  border-left: 2px solid var(--border);
}
.f13-container-taburi .f13-pagina-row { background: var(--surface); }

/* Mânere de drag */
.f13-drag, .f13-grup-drag {
  display: inline-flex; align-items: center; color: var(--muted);
  cursor: grab; flex-shrink: 0; touch-action: none;
}
.f13-drag:active, .f13-grup-drag:active { cursor: grabbing; }

/* Butoane iconiță (creion / coș / chevron) - consecvent cu restul admin-ului */
.f13-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--text-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.f13-icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.f13-icon-danger:hover { color: var(--err); border-color: oklch(0.68 0.18 25 / 0.4); background: oklch(0.68 0.18 25 / 0.12); }
.f13-icon-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.f13-icon-btn.is-disabled:hover { background: transparent; color: var(--text-2); border-color: transparent; }

/* Input de editare inline (redenumire grup/pagină + adăugare grup) */
.f13-inline-input {
  flex: 1; min-width: 0; width: 100%;
  font-size: 13px; padding: 5px 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--accent); border-radius: var(--radius-xs);
}
.f13-inline-input:focus { outline: none; box-shadow: var(--shadow-glow); }

/* Adăugare grup */
.f13-nav-add { margin-top: 12px; }
.f13-add-btn { width: 100%; justify-content: center; }
.f13-add-form { display: flex; }
.f13-add-hint { font-size: 12px; color: var(--muted); text-align: center; padding: 8px; }

/* Bara mobila (F34, Pas 4): lista de pin-uri + selector de adaugare, in pagina
   admin Navigatie. Reutilizeaza .f13-pagina-row/.f13-pagini/.f13-drag/
   .f13-icon-btn/.f13-grup-nume/.f13-grup-count/.f13-pagina-goala/.f13-add-hint
   existente; doar containerul si select-ul sunt clase noi. */
.f34-bara-mobila { margin-bottom: 16px; }
.f34-bara-mobila-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.f34-bara-mobila-select {
  width: 100%; margin-top: 8px;
  font-size: 13px; padding: 7px 8px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.f34-bara-mobila-select:focus { outline: none; box-shadow: var(--shadow-glow); }
.f34-bara-mobila-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Badge-uri */
.f13-badge-custom { font-size: 10px; }
.f13-badge-tomb {
  font-size: 10px; background: var(--surface-3);
  color: var(--muted); border-color: var(--border);
}

/* Stări SortableJS (clase implicite ale librăriei) */
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { border-color: var(--accent) !important; }
.sortable-drag { box-shadow: var(--shadow-md); }

/* === Tur ghidat (driver.js skin + prompt) === */

/* Popover-ul driver.js restilizat peste design tokens (dark + light). */
.driver-popover {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  max-width: 320px;
}
.driver-popover-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.driver-popover-description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text2);
}
.driver-popover-progress-text {
  font-size: 12px;
  color: var(--text2);
}
/* Sageata: doar latura vizibila preia culoarea popover-ului (app.css e incarcat
   dupa vendor-driver.css → castiga la specificitate egala). */
.driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover-arrow-side-right { border-right-color: var(--surface); }
.driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }
/* Butoanele popover in stilul .btn din aplicatie. */
.driver-popover-navigation-btns button.driver-popover-next-btn,
.driver-popover-navigation-btns button.driver-popover-prev-btn,
.driver-popover-close-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 6px 14px;
  text-shadow: none;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.driver-popover-navigation-btns button.driver-popover-next-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.driver-popover-navigation-btns button.driver-popover-prev-btn:hover,
.driver-popover-close-btn:hover { filter: brightness(1.06); }

/* Widget prompt: card mic fix dreapta-jos, ascuns implicit. */
#tour-prompt {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  display: none;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
  padding: 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
#tour-prompt.open { display: flex; }
#tour-prompt .tour-prompt-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
#tour-prompt .tour-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Lista de repornire tururi din panoul Personalizare. */
.tour-reset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.tour-reset-name {
  font-size: 13px;
  color: var(--text);
}
@media (max-width: 480px) {
  #tour-prompt { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================
   FORMULARE - EDITOR PAGINĂ WYSIWYG (plan 2, F09)
   Simulare vizuală A4/A5 în browser. LIMITARE DOCUMENTATĂ
   (risc #1 din plan): previzualizarea din editor NU e
   niciodată identică pixel-perfect cu PDF-ul generat prin
   WeasyPrint - conținutul poate depăși vizual o "pagină" fără
   să se rupă automat pe pagini multiple, spre deosebire de
   tipărirea efectivă.
   Geometrie identică cu `@page` din rute/formulare_html_pdf.py:
   antetul/subsolul NU sunt copii normali în fluxul cutiei de
   conținut (asta ar împinge corpul cu încă o bandă de margine,
   ca și cum marginea ar fi dublă) - sunt poziționate absolut
   PESTE banda de margine (înălțime = margine_sus_mm/margine_jos_mm),
   exact ca `@top-center`/`@bottom-center` din motorul PDF (verificat
   în `weasyprint/layout/page.py::make_margin_boxes` - lățimea
   cutiei de margine sus/jos e egală cu lățimea cutiei de conținut,
   nu cu lățimea întregii pagini). Corpul ocupă doar cutia dintre
   margini. Dimensiunile MM exacte (width/height + poziția celor
   3 zone) se calculează din format_pagina/orientare/margini și se
   setează inline din `updateFhPageCanvas()`
   (static/js/formulare-html-editor.js) - regulile de mai jos oferă
   doar aspectul static (font, overflow, contur la focus).
   ========================================================== */

.fh-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Sticky în interiorul containerului de scroll (`#main-scroll`, clasa
     `.main`), NU în viewport - pagina A4 simulată e mult mai înaltă decât
     ecranul (`.fh-page`), iar la editarea unui bloc din pagina 4 bara de
     unelte trebuia reajunsă printr-un scroll complet până sus de fiecare
     dată când vrei să inserezi un câmp. `top: 0` e relativ la marginea de
     sus a lui `#main-scroll` (fără header fix suprapus peste el), deci nu
     cere niciun offset. `z-index` peste `.fh-page-fantoma`/`#fh-page-canvas`
     (1), altfel foile desenate ar acoperi bara la scroll. Fundalul e opac -
     altfel textul paginii ar transparea prin butoane la scroll. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.fh-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 13px;
}

.fh-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto; /* împinse în dreapta barei de unelte */
}

/* Controalele reiau exact stilul inputurilor din `.field`, ca pagina să nu
   arate cu inputuri native în restul unei aplicații cu design propriu. */
.fh-meta-row input[type="text"],
.fh-meta-row input[type="number"],
.fh-meta-row select,
.fh-toolbar select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast);
}
.fh-meta-row input:focus,
.fh-meta-row select:focus,
.fh-toolbar select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.fh-meta-row input[type="number"] { width: 64px; }
.fh-meta-row input[type="text"] { min-width: 220px; }
.fh-toolbar .btn { padding: 6px 11px; }
.fh-toolbar > button[data-cmd],
.fh-toolbar > button[data-action="fh-align"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 6px 11px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.fh-toolbar > button[data-cmd]:hover,
.fh-toolbar > button[data-action="fh-align"]:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

/* Teancul de foi al editorului (backlog #191) - foaia 1 (`#fh-page-canvas`,
   editabilă) plus foile desenate 2..N, una sub alta, cu spațiu vizibil între
   ele, ca într-un cititor PDF. Distanța dintre foi e scrisă din JS
   (`_GAP_FOI_PX`), pentru că exact aceeași valoare intră în pasul dintre
   foi (`pas = inaltimea foii + gap`) folosit de `_recalculeazaFoile` la
   calculul țintelor de împingere - două surse de adevăr ar desincroniza
   desenul de conținut. */
.fh-page-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* Corpul care nu încape în foaia 1 se revarsă peste foile de dedesubt
   (`overflow: visible`), deci foaia editabilă trebuie să picteze DEASUPRA
   foilor desenate, altfel textul de pe pagina 2 ar dispărea sub fundalul alb
   al foii 2 (care vine după ea în DOM). */
#fh-page-canvas { z-index: 1; }
.fh-page-fantoma { z-index: 0; }

/* Benzile de antet/subsol copiate pe foile 2..N: pur decorative, nu se
   selectează și nu prind click-uri (click-ul trebuie să ajungă la zona
   editabilă reală, care se revarsă peste ele). Înălțimea fixă și
   `overflow: visible` vin din `.fh-zone-antet`/`.fh-zone-subsol` - benzile
   NU cresc nici pe foile desenate, exact ca `make_margin_boxes`. */
.fh-zona-fantoma {
  user-select: none;
  pointer-events: none;
}

/* Împingerea de rupere de pagină (`_recalculeazaFoile`/`_impingeLaTinta`) nu
   introduce niciun element nou în fluxul contenteditable - scrie direct
   `margin-top` pe blocul real care trebuie să înceapă foaia nouă (atribut
   `data-fh-page-push`), ca Backspace/Delete să poată uni în continuare
   blocurile de la granița de pagină. Atributul `style` propriu al blocului e
   memorat întreg în `data-fh-style-orig` înainte de prima scriere și
   restaurat verbatim la curățare. Niciunul dintre cele două atribute nu
   ajunge în HTML-ul salvat: `_htmlZonaCurata` le scoate dintr-o copie a zonei
   înainte de POST/PUT (vezi comentariul din
   static/js/formulare-html-editor.js). Fără CSS dedicat - marginea e scrisă
   inline, calculată la fiecare relayout. */

.fh-page {
  background: #fff;
  color: #1a1a1a;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  overflow: visible;
  position: relative;
  /* Bază tipografică identică motorului PDF (rute/formulare_html_pdf.py:61,
     `* { font-family: Arial, 'Liberation Sans', sans-serif }`, dimensiune
     implicită WeasyPrint 12pt/line-height normal - vezi html5_ua.css). Fără
     asta, pagina simulată moștenește reset-ul global `*{margin:0;padding:0}`
     și `body{font-family:var(--font-sans);font-size:14.5px;line-height:1.55}`
     (mai sus în acest fișier) - editorul ar minți despre densitatea reală a
     textului din PDF. */
  font-family: Arial, 'Liberation Sans', sans-serif;
  font-size: 12pt;
  line-height: normal;
}

/* Restaurează marginile/dimensiunile implicite de user-agent pe care
   resetul global `*{margin:0;padding:0}` (mai sus) le anulează - valori
   identice cu UA-ul WeasyPrint (html5_ua.css), care coincid cu UA-ul
   browserelor pentru aceste elemente. */
.fh-page p,
.fh-page ul,
.fh-page ol {
  margin: 1em 0;
}
.fh-page ul,
.fh-page ol {
  padding-left: 40px;
}
.fh-page h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}
.fh-page h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}
.fh-page h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

.fh-zone {
  outline: none;
  outline-offset: -1px;
  position: absolute;
}
.fh-zone:focus {
  outline: 1px dashed color-mix(in oklch, var(--accent) 45%, transparent);
}

.fh-zone-antet {
  top: 0;
  /* overflow: visible (implicit) - reproduce intenționat comportamentul
     WeasyPrint: cutia de margine NU crește dacă antetul e mai înalt decât
     margine_sus_mm, conținutul depășește vizual banda alocată. Admin vede
     în editor exact riscul care se materializează în PDF, nu o pagină care
     minte prin creștere automată. */
  /* Oglinda TAMPON_ZONA_NEPRINTABILA_MM din rute/formulare_html_pdf.py -
     text lipit de limita benzii poate cădea în zona ne-printabilă fizică a
     imprimantei; editorul trebuie să arate același risc evitat ca PDF-ul.
     La generare tamponul e plafonat la jumătate din marginea configurată, deci
     pe șabloanele cu margine sub 8mm editorul arată un tampon mai mare decât
     cel real - direcția sigură (previzualizarea e mai strâmtă, nu mai largă).
     `tests/test_formulare_pdf_tampon.py` pinuiește valoarea comună. */
  padding-top: 4mm;
}
.fh-zone-subsol {
  bottom: 0;
  padding-bottom: 4mm;
}
.fh-zone-corp {
  overflow: visible;
}

.camp-marker {
  background: color-mix(in oklch, var(--accent) 22%, transparent);
  cursor: default;
}

/* Câmp de sistem (F16 plan 3, Etapa 3) - diferențiere vizuală obligatorie
   față de un câmp liber `.camp-marker`, ca adminul să vadă din priviri ce
   se precompletează automat din mașină la generare. */
.camp-marker-sistem {
  background: color-mix(in oklch, var(--warn) 30%, transparent);
  border-bottom: 1px dashed var(--warn);
}

/* Separator de sfârșit de pagină (`insertFhPageBreak`, plan #003 E6) - în
   HTML-ul salvat e un `<div class="fh-page-break" style="page-break-before:
   always">` GOL, fără text. Eticheta de mai jos vine EXCLUSIV din
   `content` CSS (pseudo-element), deci nu ajunge niciodată în PDF-ul
   randat de WeasyPrint - acela construiește documentul din HTML-ul salvat
   fără să încarce acest fișier (vezi și `.fh-logo-img` mai jos, același
   raționament). Doar aspect vizual din editor. */
.fh-page-break {
  position: relative;
  height: 0;
  margin: 22px 0;
  border-top: 2px dashed var(--warn);
  cursor: default;
}
.fh-page-break::before {
  content: "✂ Sfârșit de pagină";
  position: absolute;
  top: -9px;
  left: 8px;
  background: #fff;
  padding: 0 6px;
  font-size: 11px;
  color: var(--warn);
  font-family: var(--font-sans);
}

/* Logo inserat în antet/subsol (`insertFhLogo`, formulare-html-editor.js) -
   plafon vizual în `mm`, ca să nu deformeze o zonă cu înălțime fixă
   (`margine_sus_mm`/`margine_jos_mm`, vezi `.fh-zone-antet`/`.fh-zone-subsol`
   mai sus). Poziționarea stânga/centru/dreapta rămâne exclusiv prin
   butoanele existente `data-action="fh-align"` - fără motor de poziționare
   nou. */
.fh-logo-img {
  /* Doar plasa de siguranță vizuală din editor. Valorile care contează sunt
     puse INLINE de `insertFhLogo()`, fiindcă WeasyPrint nu încarcă app.css. */
  max-height: 15mm;
  max-width: 60mm;
  vertical-align: middle;
}

/* Widget admin logo organizație (`#br-logo-row`, pagina Branding - mutat acolo
   din editorul de formulare, backlog #064) - preview live din endpoint,
   distinct de `.fh-logo-img` de mai sus (acolo e `data:` URI în HTML-ul salvat
   al șablonului, aici e un `<img>` normal din HTML-ul aplicației). */
.branding-logo-img {
  height: 40px;
  max-width: 120px;
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}

/* Tipurile de documente atașate automat la un șablon de solicitare (#448).
   Casetele stăteau strâmb pentru că sunt `<label>`-uri și `<input>`-uri într-un
   `.field`: regula generală le face eticheta bloc/uppercase și întinde inputul
   pe toată lățimea, deci checkboxul ieșea uriaș, iar denumirea ajungea pe rândul
   ei. Aici sunt etichete de checkbox, nu etichete de câmp, deci se resetează
   explicit. Denumirile sunt create de client, de lungimi imprevizibile: grilă
   `auto-fill` (nu `auto-fit`, care întinde ultimele casete când rândul nu e
   plin) și text care se rupe pe mai multe rânduri. */
.sol-doc-tipuri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.field .sol-doc-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg2);
}
.field .sol-doc-tip:hover { border-color: var(--accent); }
.field .sol-doc-tip input {
  width: auto;
  flex: 0 0 auto;
  margin: 2px 0 0;
  padding: 0;
}
.sol-doc-tip span { overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════
   ACHIZIȚIE - fișa ca pagină întreagă (F30)
   Înlocuiește modalul de 640px: antet lipit sus, coloană lată cu
   secțiunile de lucru și un rail lipit în dreapta care ține poarta
   de aprobare vizibilă cât timp se încarcă poze și acte în stânga.
   ══════════════════════════════════════════════════════════════ */
#page-achizitie-fisa { --ach-head-h: 132px; }

.ach-fisa-head {
  position: sticky; top: 0; z-index: 5;
  margin: 0 0 4px;
  padding: 12px 16px 14px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ach-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ach-head-id { min-width: 0; }
.ach-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 8px 4px 0;
  color: var(--text-2); font: inherit; font-weight: 500; cursor: pointer;
  border-radius: var(--radius-sm);
}
.ach-back:hover { color: var(--accent); }
.ach-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ach-numar { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.ach-head-sub { color: var(--text-2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.ach-head-sub .ach-vin { font-family: var(--font-mono); font-size: 12px; }
.ach-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ach-head-actions:empty { display: none; }

/* Al doilea „Salvează", vizibil doar cât antetul are modificări netrimise. */
.ach-dirty-slot { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ach-dirty-slot[hidden] { display: none; }
.ach-dirty-note { color: var(--warn); font-size: 12px; font-weight: 500; }

.ach-fisa-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px; align-items: start; margin-top: 12px;
}
.ach-col { display: grid; gap: 16px; min-width: 0; }
.ach-rail { position: sticky; top: calc(var(--ach-head-h) + 12px); display: grid; gap: 16px; }

.ach-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ach-card--rail { border-color: oklch(0.72 0.13 55 / 0.30); box-shadow: var(--shadow-md); }
.ach-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.ach-card-head h3 {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-2); font-weight: 700;
}
.ach-card-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ach-card-body { padding: 16px; }
.ach-badge-auto {
  font-size: 11px; color: var(--muted); font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 9px;
}
.ach-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ok); }
.ach-saved:empty { display: none; }
.ach-saved svg { width: 13px; height: 13px; stroke-width: 2.4; fill: none; }
.ach-saved.is-lucru { color: var(--text-2); font-weight: 500; }
.ach-saved.is-eroare { color: var(--err); }

/* Subsolul cardului de antet: butonul e ULTIMUL lucru din card, ca sub el
   să nu mai rămână niciun câmp pe care butonul l-ar salva. */
.ach-card-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px -16px -16px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.ach-foot-note { font-size: 12px; color: var(--text-2); }

.ach-rail-note { font-size: 12px; color: var(--text-2); margin-top: 8px; }
.ach-lipsuri { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ach-lipsuri li {
  display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--err);
}
.ach-lipsuri li::before { content: '✕'; flex: none; font-size: 11px; line-height: 1.45; }

@media (max-width: 1000px) {
  .ach-fisa-grid { grid-template-columns: 1fr; }
  /* Poarta de aprobare urcă prima: pe telefon e primul lucru de văzut. */
  .ach-rail { position: static; order: -1; }
  .ach-numar { font-size: 18px; }
}