/* Fonturile (Google Fonts) se încarcă din <head>-ul fiecărei pagini, cu preconnect — nu prin @import aici, care
   le punea în lanț DUPĂ descărcarea acestui fișier și bloca randarea (performanță, 2026-10-26). */

:root {
  --bg: #F6F1E7; --surface: #FFFFFF; --surface-alt: #EFE7D8;
  --ink: #0E2A35; --ink-soft: #4A5A62; --muted: #7C8D93;
  --border: #E3DCC9; --border-strong: #CBC0A5;
  --accent: #036B76; --accent-strong: #0E3B4A; --accent-soft: #DFF5F6;
  --amber: #C15A34; --amber-soft: #F7E7DD;
  --ok: #05808C; --ok-soft: #DFF5F6;
  --danger: #A23B33; --danger-soft: #F6E4E1;
  --review: #3E5C8A; --review-soft: #E4EAF6;

  --sidebar-bg: #0B2530; --sidebar-active: #123B47; --sidebar-border: #1C3944;
  --sidebar-ink: #F4EEE1; --sidebar-muted: #93ABAE; --sidebar-muted-2: #5E7A7E;
  --cyan: #01C2CE;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--accent); }
a:hover { color: #03C2CE; }

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

/* --- Sidebar (randat de shared/sidebar.js în #sidebar-root) --- */
/* position:sticky — rămâne fix în viewport în timp ce conținutul din dreapta (.main) derulează;
   align-self:flex-start e necesar ca sticky să funcționeze corect într-un părinte flex
   (altfel stretch-ul implicit pe cross-axis anulează efectul). Cerere Costi, 2026-09-10. */
.rail {
  width: 264px; flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  font-family: 'Manrope', sans-serif;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; z-index: 10;
}
.brand { padding: 22px 24px; border-bottom: 1px solid var(--sidebar-border); }
.platform-logo { display: block; width: 176px; height: auto; }
nav { flex: 1; padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; }
.navlabel {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: #F6F1E7; padding: 14px 12px 8px;
}
.item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px;
  color: var(--sidebar-muted); text-decoration: none; font-size: 14px; font-weight: 500;
}
.item:hover { color: #03C2CE; }
.item.active { background: var(--sidebar-active); color: var(--sidebar-ink); }
.item.active:hover { color: var(--sidebar-ink); }
.item .lbl { flex: 1; }
/* Iconițe în meniul lateral (cerere Costi, 2026-10-08). */
.item .nav-ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.item .nav-ico svg { width: 18px; height: 18px; }
.item.active .nav-ico, .item:hover .nav-ico { opacity: 1; }
/* Locul badge-ului de la Aprobare e mereu în meniu (completat după /api/shell) — fără cutie proprie cât e gol. */
.badge-slot { display: contents; }
.badge {
  background: var(--cyan); color: #04333B; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
}
/* Zona utilizatorului, mutată jos în sidebar (cerere Costi, 2026-09-10) — logo/inițiale companie +
   nume companie + prenume utilizator, link direct către Setări brand. */
.tenant-row {
  display: flex; align-items: center; gap: 2px;
  padding: 16px 16px 20px 24px; border-top: 1px solid var(--sidebar-border);
}
.tenant-link {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  flex: 1; min-width: 0; border-radius: 7px; padding: 4px; margin: -4px;
}
.tenant-link:hover { background: var(--sidebar-active); }
/* Buton de deconectare — cerere Costi, 2026-09-22 („nu avem un buton de logout pentru a face switch
   intre conturi"). Ruta backend (POST /api/auth/logout) exista deja din Faza C, doar UI-ul lipsea. */
.logout-btn {
  flex-shrink: 0; background: none; border: none; color: var(--sidebar-muted); cursor: pointer;
  padding: 7px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.logout-btn:hover { color: #03C2CE; background: var(--sidebar-active); }
.logomark {
  width: 34px; height: 34px; border-radius: 8px; object-fit: contain;
  background: var(--sidebar-ink);
  color: #04222A; display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', serif; font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.tenant-info { min-width: 0; }
.tenant-name {
  font-family: 'Newsreader', serif; font-size: 15px; color: var(--sidebar-ink); letter-spacing: .01em;
  line-height: 1.25;
  /* Nume de companie lungi curg pe 2 rânduri, nu se mai taie cu „..." — feedback Costi,
     2026-09-10: numele complet trebuie să rămână vizibil, nu trunchiat. */
}
.user-first-name { font-size: 11.5px; color: var(--sidebar-muted); margin-top: 1px; }

/* --- Conținut principal --- */
.main { flex: 1; min-width: 0; padding: 40px 48px; }
.h1 { font-family: 'Newsreader', serif; font-size: 28px; font-weight: 500; margin: 0; }
.sub { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 70ch; }

/* --- Elemente comune (Aprobare, Setări) --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
@keyframes deep-link-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
  15%, 60% { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
}
.card.deep-link-highlight, .post-card.deep-link-highlight { animation: deep-link-pulse 1.4s ease-in-out 2; }
.card-h {
  font-family: 'Newsreader', serif; font-size: 17px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--accent-strong); margin-bottom: 14px;
}
.field-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field-val, input.field-val, select.field-val {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 7px; padding: 9px 11px;
  font-size: 13px; background: var(--surface-alt); color: var(--ink); font-family: inherit;
}
.btn-primary {
  background: var(--accent); color: #F4EEE1; border: none; border-radius: 8px; padding: 10px 18px;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}
/* Stări de feedback pentru butoanele de salvare (cerere Costi, 2026-10-06: „Salvează setările" părea
   inactiv — singurul semn era textul mic de sub el). Folosite prin `runWithButtonFeedback` (setari.js). */
.btn-primary { transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(3, 107, 118, .28); }
.btn-primary:active:not(:disabled) { transform: scale(.97); }
.btn-primary:disabled { cursor: default; }
.btn-primary.is-busy { opacity: .85; }
.btn-primary.is-busy::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px;
  border: 2px solid rgba(244, 238, 225, .45); border-top-color: #F4EEE1; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.btn-primary.is-done { background: var(--ok); animation: btn-pop .45s ease; }
.btn-primary.is-failed { animation: btn-shake .4s ease; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes btn-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(5, 128, 140, .5); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(5, 128, 140, 0); }
}
@keyframes btn-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-primary.is-done, .btn-primary.is-failed, .btn-primary.is-busy::before { animation: none; transition: none; }
}
/* Salvare per secțiune (cerere Costi, 2026-10-09): la finalul fiecărui card cu câmpuri, starea în stânga
   („Modificări nesalvate" cu punct chihlimbariu / „Salvat la …" / eroarea) și butonul „Salvează" în dreapta.
   Butonul e activ doar cât secțiunea are modificări. Cardurile care se salvează singure au `.autosave-note`. */
.sec-save {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.sec-save .btn-primary { padding: 8px 18px; }
.sec-save .btn-primary:disabled:not(.is-busy):not(.is-done) { background: var(--border-strong); color: var(--surface); box-shadow: none; }
.sec-save-state {
  font-size: 11.5px; color: var(--muted); margin-right: auto; min-width: 0; flex: 1 1 140px;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.4;
}
.sec-save-state:empty { flex-basis: 0; }
.sec-save-state.is-dirty { color: var(--amber); font-weight: 600; }
.sec-save-state.is-saved { color: var(--ok); }
.sec-save-state.is-error { color: var(--danger); }
.unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; box-shadow: 0 0 0 3px var(--amber-soft); }
.autosave-note {
  display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.autosave-note::before {
  content: '✓'; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 10px; font-weight: 700;
}
.autosave-note b { color: var(--ink-soft); font-weight: 600; }
.btn-ghost {
  border: 1px solid var(--accent); color: var(--accent); background: var(--surface); border-radius: 7px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer;
}
/* Aceeași formă ca .btn-ghost, fundal solid în loc de contur — pentru acțiuni care merită să iasă
   mai mult în evidență (cerere Costi, 2026-09-19: butonul „+ Generează" din Aprobare). */
.btn-highlight {
  border: 1px solid var(--accent); color: #F4EEE1; background: var(--accent); border-radius: 7px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer;
}
.btn-danger-line {
  border: 1px solid var(--border-strong); color: var(--danger); background: var(--surface); border-radius: 6px;
  padding: 4px 8px; font-size: 10.5px; font-weight: 600; cursor: pointer;
}

header.page-header { margin-bottom: 26px; }

.icon-label { display: inline-flex; align-items: center; gap: 6px; }
.icon-label svg { color: var(--accent); flex-shrink: 0; }

/* Componente mici, repetate identic în mai multe ecrane — mutate aici (curățenie de cod, zero
   schimbare vizuală, 2026-09-18). Anterior duplicate byte-cu-byte în aprobare.css/performanta.css/
   strategie.css. */
.loading, .empty { color: var(--muted); }
.chantab {
  font-size: 11.5px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent);
  background: var(--surface); border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.chantab.on { background: var(--accent-strong); color: #F4EEE1; border-color: var(--accent-strong); }
/* Canal dezactivat din Strategie & canale — tab-ul rămâne funcțional (tot poți vedea/gestiona
   articolele existente), doar semnalat vizual, ca la `.chan.locked` din strategie.css (cerere
   Costi, 2026-09-20: butoanele/tab-urile rămân, marcate inactiv, nu dispar). */
.chantab.chan-off { opacity: .55; }
.pill {
  font-family: 'JetBrains Mono', monospace; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 2px 9px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10.5px; color: var(--ink-soft);
}
.mini-btn { border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 600; font-family: 'Manrope', sans-serif; border: 1px solid transparent; cursor: pointer; }
.mini-btn.save { background: var(--accent); color: #F4EEE1; }
.mini-btn.cancel { background: var(--surface); border-color: var(--border-strong); color: var(--muted); }

/* Iconițele titlurilor de categorie principală (Companie, Voce & Ton, Bibliotecă de linkuri CTA
   etc.) erau setate la 14-15px direct în markup — mai mici decât textul de lângă ele (16.5-17px,
   serif), ceea ce le făcea să pară o eroare de aliniere, nu un accent vizual intenționat. Un
   singur override, aici (shared, pe toate paginile), acoperă toate variantele de titlu principal
   fără să atingă iconițele mai mici de la etichete de câmp/avertismente, care rămân proporționale
   textului lor mic. */
.card-h.icon-label svg,
.addbox h3.icon-label svg,
.voicecard h3.icon-label svg,
.section-title.icon-label svg {
  width: 20px; height: 20px;
}

/* Titlu de secțiune (cerere Costi, 2026-10-08): mai mare, serif, cu iconiță într-un cerc discret —
   separă vizual secțiunile de conținutul lor (Manrope). */
.sec-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: 'Newsreader', serif; font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--accent-strong);
}
.sec-head .sec-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.sec-head .sec-ico svg { width: 17px; height: 17px; }
/* Variantă de avertizare (ex. ștergerea contului din Facturare). */
.sec-head.sec-head-warn { color: var(--amber); }
.sec-head.sec-head-warn .sec-ico { background: var(--amber-soft); color: var(--amber); }
@media (max-width: 600px) {
  .sec-head { font-size: 18px; gap: 8px; }
  .sec-head .sec-ico { width: 28px; height: 28px; }
}

/* Subsol fix la baza ecranului, pe toată lățimea, în paginile cu meniu lateral (cerere Costi,
   2026-09-25) — doar pe desktop: meniul lateral se scurtează cu înălțimea subsolului, iar conținutul
   primește spațiu jos ca să nu fie acoperit. Sub 861px, subsolul rămâne la finalul paginii. */
@media (min-width: 861px) {
  body.has-app-footer { --app-footer-h: 44px; padding-bottom: var(--app-footer-h); }
  body.has-app-footer > .app-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--app-footer-h);
    box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; border-top: 1px solid var(--sidebar-border);
  }
  body.has-app-footer .app-shell { min-height: calc(100vh - var(--app-footer-h)); }
  body.has-app-footer .rail { height: calc(100vh - var(--app-footer-h)); }
}

/* --- Responsive: platforma e folosită mai ales pe mobil, nu doar desktop --- */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; min-height: 0; }
  /* Logo pe rândul lui, taburile dedesubt (flex-direction:column, nu row) — cerere explicită
     Costi, 2026-09-14: pe mobil, logo-ul + taburile pe același rând se simțeau înghesuite. */
  .rail { width: 100%; height: auto; flex-direction: column; align-items: stretch; }
  .brand {
    padding: 12px 14px; border-bottom: 1px solid var(--sidebar-border); border-right: none;
    display: flex; align-items: center; flex-shrink: 0;
  }
  .platform-logo { width: 128px; }
  /* flex-wrap, nu overflow-x:auto — cu 7 taburi, un singur rând derulabil lăsa ultimele taburi
     (ex. „Documentație") tăiate la marginea ecranului, fără niciun indiciu vizual că mai există
     conținut de derulat pe orizontală (bară de scroll nativă, ușor de ratat pe atingere). Găsit
     prin testare pe tabletă (2026-09-14) — pe 2 rânduri, toate taburile rămân vizibile direct. */
  nav {
    flex: none; flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 8px 10px; gap: 4px 6px;
  }
  .navlabel { display: none; }
  .item { flex-direction: row; padding: 8px 10px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; gap: 6px; }
  .item .nav-ico, .item .nav-ico svg { width: 15px; height: 15px; }
  .tenant-row { display: none; }
  .main { padding: 22px 16px 40px; }
  .h1 { font-size: 22px; }
  .card { padding: 16px 18px; }
}
@media (max-width: 480px) {
  .item { padding: 7px 9px; font-size: 12px; }
}

/* Footer comun, pe toate ecranele (cerere Costi, 2026-09-24): atribuirea RelevantMark ↔ RCC trebuie
   să fie vizibilă oricând, plus link-urile legale — un singur loc de întreținut, nu duplicat per
   pagină. Injectat de shared/sidebar.js pe ecranele din aplicație; adăugat direct în markup pe
   paginile de sine stătătoare (login, onboarding, pricing, documentație), care nu randează sidebar-ul.
   Culori: fundal identic cu sidebar-ul (`--sidebar-bg`), text în cyan-ul de brand RCC — verificat
   live, direct pe relevantcoaching.ro (`--the7-title-color`/culoarea butoanelor reale de-acolo e
   exact #01C2CE, aceeași valoare cu `--cyan` de mai jos — nu o presupunere). */
.app-footer {
  font-size: 11px; text-align: center; padding: 22px 16px 26px;
  background: var(--sidebar-bg); color: var(--cyan);
}
.app-footer a { color: var(--cyan); text-decoration: underline; }
.app-footer .sep { margin: 0 8px; color: var(--sidebar-muted); }

/* Notă „S-a mutat în …", lăsată o versiune acolo unde stătea o secțiune mutată (restructurarea Configurare,
   2026-10-12: Brand / Reglaje / Strategie & canale). */
.moved-note {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: var(--amber-soft);
  border-radius: 8px; padding: 9px 12px; overflow-wrap: anywhere;
}
.moved-note a, .page-header .sub a { color: var(--accent); font-weight: 600; }