/* 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;
  /* Iconițe (cerere Costi, 2026-10-29): o culoare mai contrastantă, aceeași pentru toți utilizatorii — coral pe
     fundal deschis (≥3:1 pe alb și crem), coral deschis în meniul închis la culoare; activul din meniu rămâne turcoaz. */
  --icon: #D9572A; --icon-soft: #FBE6DC; --icon-on-dark: #F29A73;
  /* Culorile de brand ale canalelor (revamp 2026-10-29) — fundalul miniaturilor de postare și al iconițelor de
     canal, aceleași pentru toți utilizatorii. Instagram e un gradient → se folosește cu `background`, nu `color`. */
  --ch-linkedin: #0A66C2; --ch-facebook: #1660C9; --ch-x: #141414;
  --ch-instagram: linear-gradient(135deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  --ch-instagram-solid: #B4307A; /* text / contur pe fundal deschis, unde un gradient nu se poate folosi */
  --ch-email: #0E3B4A; --ch-blog: #036B76;
  /* Forma cardurilor (revamp 2026-10-29): colțuri mai rotunde, umbră discretă. */
  --radius-card: 18px; --radius-inner: 14px;
  --shadow-card: 0 1px 2px rgba(11, 37, 48, .04), 0 6px 20px rgba(11, 37, 48, .05);
}

* { 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; }
.rail 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; color: var(--icon-on-dark); }
.item .nav-ico svg { width: 18px; height: 18px; }
.item.active .nav-ico, .item:hover .nav-ico { color: var(--cyan); }
/* 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: var(--radius-card); padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
/* Cifră mare, serif (revamp 2026-10-29) — pentru „stat”-uri: <span class="big-num">16</span>. */
.big-num {
  font-family: 'Newsreader', serif; font-weight: 600; line-height: 1; color: var(--accent-strong);
  font-size: clamp(34px, 5vw, 56px); font-variant-numeric: lining-nums tabular-nums;
}
@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: 1.5px solid var(--field-border); border-radius: 7px; padding: 9px 11px;
  font-size: 13px; background: var(--field-bg); color: var(--ink); font-family: inherit;
}
.btn-primary {
  background: var(--accent); color: #F4EEE1; border: none; border-radius: 10px; 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(--icon); flex-shrink: 0; }
/* Orice iconiță de linie din conținut primește culoarea iconițelor. :where() ține specificitatea la zero, așa că
   regulile cu sens (avertizare, eroare, stare) și iconițele din butoane își păstrează culoarea. */
:where(.main) svg:where([stroke="currentColor"]):not(:where(button *, .btn *, .badge *, .chantab *, .mini-btn *)) { color: var(--icon); }

/* 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(--icon-soft); color: var(--icon);
}
.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. */
  .rail 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; }

/* Câmpurile editabile se văd ca editabile (cerere Costi, 2026-10-29): pe toate paginile, orice câmp în care poți scrie sau
   alege are un fundal turcoaz foarte deschis și un contur turcoaz; la trecerea cu mouse-ul conturul se închide, la scriere
   devine alb cu inel de focus. Câmpurile blocate (disabled / readonly) rămân neutre, ca să nu pară editabile.
   :where() ține specificitatea mică — regulile proprii ale unei pagini (dimensiuni, colțuri) rămân valabile. */
:root { --field-bg: #F2FAFA; --field-border: #8EC5C9; --field-ring: rgba(1, 194, 206, .28); }
:where(.main) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  background-color: var(--field-bg); border: 1.5px solid var(--field-border);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
:where(.main) :where(input, select, textarea):where(:hover):not(:disabled, [readonly]) { border-color: var(--accent); }
:where(.main) :where(input, select, textarea):where(:focus) {
  background-color: #FFFFFF; border-color: var(--accent); box-shadow: 0 0 0 3px var(--field-ring); outline: none;
}
:where(.main) :where(input, select, textarea):where(:disabled, [readonly]) {
  background-color: transparent; border-style: dashed; border-color: var(--border-strong); color: var(--ink-soft);
}