/* Adminul Leapr: sistemul de design (tokenuri, componente, layout). Ecranele adauga doar css/views/<ecran>.css.
   Directia (docs/admin-frontend.md): unealta de lucru calma si densa, pe culorile brandului. Tema deschisa implicit
   (se citeste ore intregi), bara laterala bleumarin in ambele teme, tema inchisa la cerere. Montserrat, un singur font.
   Miscare: rapida si discreta (emil-design-eng): sub 300 ms, ease-out puternic, fara animatie la actiunile de tastatura,
   apasare cu scale(0.97). CSP-ul site-ului e strict: fara stiluri inline, totul e aici. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* brandul */
  --navy: #0B1638;
  --navy-2: #111F4A;
  --navy-3: #182A61;
  --blue: #0866FF;
  --blue-hover: #0760F0; /* hover-ul butonului principal, mai inchis decat albastrul de baza; albul pe el 5.33 la 1 (#2B7BFF avea 3.90), fondul pe tema inchisa 3.10 la 1 */
  --blue-ink: #0760F0;   /* albastrul pentru text pe deschis (contrast AA) */
  --sky: #4D9BFF;
  /* suprafete si text (tema deschisa) */
  --bg: #F4F7FD;
  --surface: #FFFFFF;
  --surface-2: #F8FAFE;
  --surface-hover: #F1F5FC;
  --border: #D9DEE8;
  --border-strong: #B9C2D3;
  --text: #0B1638;
  --text-2: #3A4459;
  --text-3: #5B6478;
  --accent: var(--blue);
  --accent-ink: var(--blue-ink);
  --accent-tint: #E3EEFF;
  --choice-bg: #E3EEFF;   /* optiunea aleasa din controalele segmentate: text 5.5:1, contur accent peste 3:1 */
  --choice-ink: #0655D6;
  --focus: #0866FF;
  --on-accent: #FFFFFF;  /* textul pe fond --accent (tema firmei, docs/crm-theme.md): 4.82:1 pe #0866FF */
  /* stari */
  --success: #157A3A;   /* 4.7:1 pe --success-tint */
  --success-tint: #E2F4E8;
  --warning: #9A5B00;
  --warning-tint: #FFF1D6;
  --danger: #C8102E;
  --danger-tint: #FDE6EA;
  --on-danger: #FFFFFF;  /* textul pe fond --danger */
  --chip-on: var(--navy);
  --chip-on-ink: #FFFFFF;
  --neutral-tint: #EDF1F7;
  /* bara laterala (bleumarin in ambele teme) */
  --side-bg: #0B1638;
  --side-text: rgba(255, 255, 255, 0.74);
  --side-text-strong: #FFFFFF;
  --side-hover: rgba(255, 255, 255, 0.07);
  --side-active: rgba(77, 155, 255, 0.16);
  --side-line: rgba(255, 255, 255, 0.1);
  /* forma si miscare */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 22, 56, 0.06);
  --shadow: 0 1px 2px rgba(11, 22, 56, 0.06), 0 4px 16px rgba(11, 22, 56, 0.06);
  --shadow-lg: 0 24px 64px rgba(11, 22, 56, 0.18), 0 2px 8px rgba(11, 22, 56, 0.08);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --side-w: 240px;
  --top-h: 64px;
}

/* TEMA INCHISA: aleasa explicit (data-theme="dark") sau din sistem, daca nu s-a ales "light". */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08112C;
  --surface: #0F1C44;
  --surface-2: #0C1839;
  --surface-hover: #142454;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.78);
  --text-3: rgba(255, 255, 255, 0.6);
  --accent: var(--sky);
  --accent-ink: var(--sky);
  --accent-tint: rgba(77, 155, 255, 0.16);
  --choice-bg: #1D3A73;   /* opac: tinta translucida pe sina translucida dadea 3.66:1; asa textul are 6.7:1 */
  --choice-ink: #A8CDFF;
  --focus: #4D9BFF;
  --on-accent: #0B1638;  /* bleumarin pe #4D9BFF: 6.28:1 */
  --success: #4ADE80;
  --success-tint: rgba(74, 222, 128, 0.14);
  --warning: #FBBF5A;
  --warning-tint: rgba(251, 191, 90, 0.14);
  --danger: #FF8A96;
  --danger-tint: rgba(255, 138, 150, 0.14);
  --on-danger: #0B1638;  /* bleumarin pe roz: 7.9:1 (albul avea 2.25:1) */
  --chip-on: var(--sky);
  --chip-on-ink: var(--navy);
  --neutral-tint: rgba(255, 255, 255, 0.08);
  --side-bg: #060D24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #08112C; --surface: #0F1C44; --surface-2: #0C1839; --surface-hover: #142454;
    --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2);
    --text: #FFFFFF; --text-2: rgba(255, 255, 255, 0.78); --text-3: rgba(255, 255, 255, 0.6);
    --accent: var(--sky); --accent-ink: var(--sky); --accent-tint: rgba(77, 155, 255, 0.16); --focus: #4D9BFF; --on-accent: #0B1638;
    --choice-bg: #1D3A73; --choice-ink: #A8CDFF;
    --success: #4ADE80; --success-tint: rgba(74, 222, 128, 0.14);
    --warning: #FBBF5A; --warning-tint: rgba(251, 191, 90, 0.14);
    --danger: #FF8A96; --danger-tint: rgba(255, 138, 150, 0.14); --on-danger: #0B1638; --chip-on: var(--sky); --chip-on-ink: var(--navy);
    --neutral-tint: rgba(255, 255, 255, 0.08); --side-bg: #060D24;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 8px); }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 14px; line-height: 20px; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
.icon { flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
/* Bara laterala, bara de jos si notificarile sunt bleumarin in ambele teme: inelul de focus ia --sky, care trece pe bleumarin
   (6.28:1 la Leapr; la tema unei firme --sky e varianta ei inchisa, verificata la 4.5:1 pe bara). docs/crm-theme.md, revizia M2. */
.side, .dock, .toast:not(.toast--error) { --focus: var(--sky); }
::selection { background: var(--accent-tint); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.num, .money { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 8px 16px; border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.skip:focus { top: 12px; }

/* MODUL DE CONFIDENTIALITATE: la partajarea ecranului, datele personale (data-pii) se estompeaza. */
body.is-private [data-pii] { filter: blur(6px); transition: filter 160ms var(--ease-out); }
body.is-private [data-pii]:hover { filter: none; }

/* LAYOUT */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  background: var(--side-bg); color: var(--side-text); overflow-y: auto; z-index: 30;
}
.side__brand { display: flex; align-items: center; gap: 12px; padding: 8px 8px 24px; color: var(--side-text-strong); text-decoration: none; }
.side__brand img { width: 74px; height: auto; }
.side__brand span { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.side__label { padding: 16px 12px 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--r);
  color: var(--side-text); text-decoration: none; font-weight: 500; transition: background-color 160ms ease, color 160ms ease;
}
.nav-item:hover { background: var(--side-hover); color: var(--side-text-strong); }
.nav-item[aria-current="page"] { background: var(--side-active); color: var(--side-text-strong); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sky); }
.nav-item__label { flex: 1; min-width: 0; }
/* "Close the browser to sign out": text, nu link (parola Caddy nu are deconectare; PERF-06). Fara efectul de hover. */
.nav-item--note { margin: 0; cursor: default; }
.nav-item--note:hover { background: none; color: var(--side-text); }
.nav-item .count { margin-left: auto; }
.side__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--side-line); display: grid; gap: 4px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--top-h); padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.top__search { position: relative; flex: 1; max-width: 420px; }
.top__search .icon { position: absolute; left: 12px; top: 10px; color: var(--text-3); pointer-events: none; }
.top__search input { width: 100%; padding-left: 40px; }
.top__spacer { flex: 1; }
.content { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 24px 24px 64px; }
.demo-flag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--warning-tint); color: var(--warning); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }

/* CAPUL DE PAGINA */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.page-head h1:focus { outline: none; }
.page-head p { margin-top: 4px; color: var(--text-3); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* BUTOANE */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 16px; border: 1px solid transparent;
  border-radius: var(--r); background: none; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--blue); color: #FFFFFF; }
.btn--primary:hover:not(:disabled) { background: var(--blue-hover); }
.btn--secondary { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn--secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.btn--ghost { color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.btn--danger { background: var(--danger); color: var(--on-danger); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn--sm { min-height: 32px; padding: 4px 12px; font-size: 12px; line-height: 16px; }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }
.side .btn--ghost { color: var(--side-text); }
.side .btn--ghost:hover { background: var(--side-hover); color: var(--side-text-strong); }
.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-color: #FFFFFF #FFFFFF transparent transparent; border-radius: 50%; animation: spin 600ms linear infinite; }
.btn--secondary.is-busy::after, .btn--ghost.is-busy::after { border-color: var(--text) var(--text) transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* CAMPURI */
.input, .select, .textarea {
  width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  font-size: 14px; line-height: 20px; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 88px; resize: vertical; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='none' stroke='%235B6478' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m19 9-7 6-7-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.field { display: grid; gap: 4px; align-content: start; }
.field__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-2); }
.field__hint { font-size: 12px; line-height: 16px; color: var(--text-3); }
.field__error { font-size: 12px; line-height: 16px; color: var(--danger); }
.field__error:empty { display: none; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--blue); }

/* CARDURI SI SECTIUNI */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
.card__title { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; }
.card__body { padding: 16px; }
.card__foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.section-title { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* CIFRE (KPI) */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
a.kpi { transition: border-color 160ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.kpi:hover { border-color: var(--border-strong); } }
a.kpi:active { transform: scale(0.98); }
.kpi__label { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.kpi__value { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: 12px; line-height: 16px; color: var(--text-3); }
.kpi--alert .kpi__value { color: var(--danger); }

/* PASTILE DE STARE SI NUMARATOARE */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; background: var(--neutral-tint); color: var(--text-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.pill--plain::before { display: none; }
.pill--blue { background: var(--accent-tint); color: var(--accent-ink); }
.pill--green { background: var(--success-tint); color: var(--success); }
.pill--amber { background: var(--warning-tint); color: var(--warning); }
.pill--red { background: var(--danger-tint); color: var(--danger); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.count--alert { background: var(--danger); color: var(--on-danger); }
.tag { display: inline-flex; padding: 2px 8px; border-radius: var(--r-sm); background: var(--neutral-tint); color: var(--text-2); font-size: 12px; line-height: 16px; }

/* AVATAR (initiale) */
.avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-size: 12px; line-height: 16px; font-weight: 600; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; line-height: 24px; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person__text { min-width: 0; display: grid; }
.person__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__meta { color: var(--text-3); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* TABELE */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; }
.table th { position: sticky; top: 0; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .is-right { text-align: right; }
.table tbody tr.is-link { cursor: pointer; transition: background-color 120ms ease; }
.table tbody tr.is-link:hover { background: var(--surface-hover); }
.table tbody tr.is-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.table th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.table th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* BARA DE UNELTE (cautare, filtre) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.toolbar .input { max-width: 320px; }
.toolbar__spacer { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lost-form { display: grid; gap: 16px; }
.lost-form__deal { font-weight: 600; overflow-wrap: anywhere; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
.chip .count { background: var(--neutral-tint); color: inherit; }
.chip[aria-pressed="true"] .count { background: rgba(255, 255, 255, 0.2); }

/* TABURI */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 12px 12px; border: 0; background: none; color: var(--text-3); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 160ms ease; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* LISTE DEFINITIE (detalii) */
.dl { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--text-3); font-size: 12px; line-height: 20px; font-weight: 600; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* STARI GOALE SI INCARCARE */
.empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--text-3); }
.empty .icon { color: var(--border-strong); }
.empty__title { color: var(--text); font-weight: 600; }
.empty .btn { margin-top: 8px; }
.skeleton { display: block; height: 16px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--neutral-tint) 25%, var(--surface-hover) 50%, var(--neutral-tint) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton--block { height: 96px; border-radius: var(--r-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }
.error-box { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--danger-tint); color: var(--danger); }

/* ISTORIC (timeline) */
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline__item { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding-bottom: 16px; }
.timeline__item::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.timeline__item:last-child::before { display: none; }
.timeline__dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutral-tint); color: var(--text-2); }
.timeline__dot--blue { background: var(--accent-tint); color: var(--accent-ink); }
.timeline__dot--green { background: var(--success-tint); color: var(--success); }
.timeline__title { font-weight: 600; }
.timeline__meta { color: var(--text-3); font-size: 12px; line-height: 16px; }
.timeline__body { margin-top: 4px; color: var(--text-2); white-space: pre-wrap; }

/* SERTAR (drawer) SI DIALOG */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(6, 13, 36, 0.4); opacity: 0; transition: opacity 220ms ease; }
.overlay.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; display: flex; flex-direction: column; width: min(560px, 100vw);
  background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 280ms var(--ease-drawer);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--border); }
.drawer__title { flex: 1; min-width: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); }
.modal {
  position: fixed; left: 50%; top: 50%; z-index: 51; display: flex; flex-direction: column; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%) scale(0.96); opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.modal--wide { width: min(760px, calc(100vw - 32px)); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.modal__title { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.modal__body { padding: 16px 24px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; }

/* MENIU (dropdown) */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; padding: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform-origin: top right; transform: scale(0.96); opacity: 0; visibility: hidden;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out), visibility 0s linear 160ms;
}
.menu.is-open { transform: scale(1); opacity: 1; visibility: visible; transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out), visibility 0s; }
.menu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; }
.menu__item:hover { background: var(--surface-hover); }
.menu__item:focus-visible { background: var(--surface-hover); outline: 2px solid var(--focus); outline-offset: -2px; }
.menu__sep { height: 1px; margin: 4px 0; background: var(--border); }

/* NOTIFICARI (toast) */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--navy); color: #FFFFFF; box-shadow: var(--shadow-lg);
  transform: translateY(16px); opacity: 0; transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.toast.is-open { transform: translateY(0); opacity: 1; }
.toast--error { background: var(--danger); color: var(--on-danger); --focus: var(--on-danger); }
.toast.toast--error .btn--ghost { color: var(--on-danger); }
.toast--error .btn--ghost:hover { background: rgba(11, 22, 56, 0.12); }
.toast__text { flex: 1; }
.toast .btn--ghost { color: #FFFFFF; }
.toast .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Notificarile stau deasupra barei de actiuni a sertarului deschis (71 px). */
body:has(.drawer.is-open .drawer__foot) .toasts { bottom: 88px; }

/* BARA DE JOS PE TELEFON */
.dock { display: none; }
/* "More" copiaza linkurile barei laterale intr-o fereastra (--surface, deschis in tema deschisa): bara si fondul sectiunii
   curente iau culoarea de pe suprafete (--accent, macar 4.5:1 pe --surface), nu --sky si --side-active, facute pentru
   bleumarin. La Leapr, bara devine #0866FF pe alb (4.82:1, inainte #4D9BFF, 2.82:1). docs/crm-theme.md, "Regulile pentru ecrane". */
.sheet { --sky: var(--accent); --side-active: var(--accent-tint); }
.sheet .nav-item { color: var(--text); }
.sheet .nav-item:hover { background: var(--surface-hover); color: var(--text); }

@media (max-width: 1100px) {
  :root { --side-w: 72px; }
  .side { padding: 16px 12px; align-items: center; }
  .side__brand { padding: 8px 0 24px; }
  .side__brand img, .side__brand span, .side__label { display: none; }
  /* Etichetele raman pentru cititoarele de ecran (doar ascunse vizual), si doar in bara ingusta, nu si in foaia "More". */
  .side .nav-item__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .side__brand::before { content: ""; width: 32px; height: 32px; border-radius: 8px; background: url("/favicon.svg") center / contain no-repeat; }
  .side .nav-item { justify-content: center; width: 48px; padding: 8px; }
  .side .nav-item .count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .side .nav-item[aria-current="page"]::before { left: -12px; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .top { padding: 0 16px; }
  .top__search { max-width: none; }
  .top__spacer, .top .demo-flag { display: none; }
  html { scroll-padding-bottom: 96px; }
  .content { padding: 16px 16px 96px; }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 4px 4px max(4px, env(safe-area-inset-bottom)); background: var(--side-bg); border-top: 1px solid var(--side-line);
  }
  .dock__item { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: var(--r); background: none; color: var(--side-text); font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .dock__item[aria-current="page"] { color: var(--side-text-strong); background: var(--side-active); }
  .dock__item .count { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .drawer { width: 100vw; }
  .hide-sm { display: none !important; }
  .toasts { right: 16px; bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .side, .top, .dock, .toasts, .page-head__actions, .no-print { display: none !important; }
  .app { display: block; }
  .content { padding: 0; max-width: none; }
  body { background: #FFFFFF; }
}

/* In bara ingusta (doar iconite, 761-1100 px) nota "Close the browser to sign out" ar ramane o iconita fara text care
   arata ca un link: se ascunde (PERF-06). In meniul de telefon (sub 761 px) ramane cu text. */
@media (min-width: 761px) and (max-width: 1100px) {
  .side .nav-item--note { display: none; }
}