/* Ecranele aplicației: shell (meniu lateral + bară de sus pe mobil), titluri cu iconiță, carduri, pastile, tabele adaptive.
   Stilurile comune (tokeni, fonturi, formulare, butoane) sunt în baza.css. Referința vizuală: docs/prototip/relevantcompass-ui-v0.html.
   Grilele și tabelele reacționează la lățimea ZONEI DE CONȚINUT (container queries), nu a ecranului: așa se comportă
   corect și cu meniul lateral deschis. */

html { scrollbar-gutter: stable; }
.shell { display: flex; min-height: 100vh; }

/* ---------- meniul lateral ---------- */
.rail {
  width: 256px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; z-index: 40;
}
.rail .brand { padding: 18px 22px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; text-decoration: none; min-height: 44px; }
/* logo-ul oficial, varianta albă pe navy (docs/marca/); 480 px publicați = @2x pentru 212 px afișați */
.rail .brand picture, .rail .brand img, .bara-sus picture, .bara-sus img { display: block; }
.rail .brand img { width: 212px; max-width: 100%; height: auto; }
.rail .brand:focus-visible, .rail a:focus-visible, .rail button:focus-visible { outline-color: var(--cyan); }
nav.meniu { flex: 1; padding: 10px 14px 14px; }
nav.meniu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.grupa-meniu { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #F6F1E7; opacity: .85; padding: 14px 12px 6px; margin: 0; font-weight: 500; }
.item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 12px; border-radius: 7px; color: var(--sidebar-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.item:hover { color: var(--cyan); }
.item[aria-current=page] { background: var(--sidebar-active); color: var(--sidebar-ink); }
.item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.item[aria-current=page] svg, .item:hover svg { opacity: 1; }
.item .lbl { flex: 1; min-width: 0; }

/* zona firmei / utilizatorului, jos în meniu */
.cont { border-top: 1px solid var(--sidebar-border); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cont-rand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.initiale { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: var(--sidebar-ink); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-titlu); font-weight: 600; font-size: 13px; }
.cont-text { min-width: 0; }
.cont-text .t1 { font-family: var(--font-titlu); font-size: 15px; color: var(--sidebar-ink); line-height: 1.25; overflow-wrap: anywhere; }
.cont-text .t2 { font-size: 12px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
.cont-actiuni { display: flex; gap: 6px; flex-wrap: wrap; }
.cont-actiuni a, .cont-actiuni button {
  margin: 0; min-height: 40px; padding: 6px 10px; font: 600 12.5px var(--font-text); color: var(--sidebar-muted); background: none;
  border: 1px solid var(--sidebar-border); border-radius: 7px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.cont-actiuni a:hover, .cont-actiuni button:hover { color: var(--cyan); background: var(--sidebar-active); border-color: var(--sidebar-active); }
.cont-actiuni svg { width: 15px; height: 15px; }

/* bara de sus (doar pe ecrane înguste) + fundalul care închide meniul */
.bara-sus { display: none; }
.voal { display: none; }

/* ---------- zona de conținut ---------- */
main#continut { flex: 1; min-width: 0; padding: 32px 44px 60px; outline: none; container-type: inline-size; container-name: zona; }
main#continut > * { max-width: 1180px; }
.antet-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.antet-pagina h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 30px; overflow-wrap: anywhere; }
.ico-titlu { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.ico-titlu svg { width: 20px; height: 20px; }
.subtitlu { font-size: 14px; color: var(--muted); margin: 6px 0 0; max-width: 72ch; }
main#continut > p, main#continut > form, main#continut > section, main#continut > .card, main#continut > .bloc { max-width: 860px; }
main#continut > .grila, main#continut > .card-lat, main#continut > .tabel-lat { max-width: 1180px; }

/* ---------- carduri ---------- */
.carduri { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { display: block; padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; margin: 0 0 16px; }
.carduri .card { margin: 0; height: 100%; }
a.card { transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.card .titlu { display: block; font-weight: 700; color: var(--accent-strong); }
.card .detaliu { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }
.card .detaliu .pastila { margin: 6px 6px 0 0; }
.card-titlu { font-family: var(--font-titlu); font-size: 18px; font-weight: 500; color: var(--accent-strong); margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card > :last-child { margin-bottom: 0; }
fieldset.card { margin: 12px 0; min-width: 0; }
fieldset.card legend { font-weight: 700; padding: 0 6px; color: var(--accent-strong); }
.grila { display: grid; gap: 16px; margin-bottom: 16px; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grila > .card { margin: 0; }

/* indicatori (cifre mari) */
.kpi .eticheta-kpi { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpi .valoare-kpi { font-family: var(--font-titlu); font-size: 32px; font-weight: 500; margin: 6px 0 2px; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kpi .nota-kpi { font-size: 13px; color: var(--muted); }
.kpi.rau .valoare-kpi { color: var(--danger); }
.kpi.atent .valoare-kpi { color: var(--amber-text); }
.kpi.bine .valoare-kpi { color: var(--ok-text); }

/* „sursă”: la hover, focus sau atingere apare de unde vine cifra */
.cu-sursa { position: relative; display: inline-flex; }
button.sursa { margin: 0; min-height: 24px; padding: 0 7px; font: 500 10.5px var(--font-mono); color: var(--muted); background: transparent;
  border: 1px dashed var(--border-strong); border-radius: 5px; cursor: help; }
button.sursa:hover, button.sursa[aria-expanded=true] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.nota-sursa { display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(320px, 78vw);
  background: var(--accent-strong); color: #F4EEE1; font: 500 12.5px/1.45 var(--font-text); padding: 9px 11px; border-radius: 8px; box-shadow: 0 6px 20px rgba(10, 47, 89, .2); }
.cu-sursa:hover .nota-sursa, .cu-sursa:focus-within .nota-sursa, .cu-sursa.deschis .nota-sursa { display: block; }
.cu-sursa.ascuns .nota-sursa { display: none; }
/* într-un indicator, nota se așază pe lățimea cardului (nu iese din ecran pe mobil) */
.kpi { position: relative; }
.kpi .cu-sursa { position: static; }
.kpi .nota-sursa { left: 12px; right: 12px; top: 46px; width: auto; max-width: none; }

/* pastile de stare */
.pastila { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap; }
.pastila.bine { background: var(--ok-soft); color: var(--ok-text); }
.pastila.atent { background: var(--amber-soft); color: var(--amber-text); }
.pastila.rau { background: var(--danger-soft); color: var(--danger); }
.pastila.info { background: var(--review-soft); color: var(--review); }
/* nume vechi, păstrate pentru compatibilitate */
.eticheta { display: inline-flex; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-soft); }
.eticheta.intarziata { background: var(--amber-soft); color: var(--amber-text); }

/* „Nu avem încă date” */
.lipsa-date { border: 1px dashed var(--border-strong); background: var(--surface-warm); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.lipsa-date .titlu-lipsa { font-weight: 700; color: var(--accent-strong); margin-bottom: 4px; }
.lipsa-date ul { margin: 6px 0 0; padding-left: 1.2em; }
.lipsa-date li { margin: 4px 0; }

/* liste simple */
.lista-simpla { list-style: none; padding: 0; margin: 0 0 12px; }
.lista { padding-left: 1.2em; }
.lista li { margin: 4px 0; }
ul.lista-facturi { list-style: none; padding: 0; margin: 0; }
.factura { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 10px; }
.factura .rand-sus { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; flex-wrap: wrap; }
.factura .rand-sus .suma { white-space: nowrap; font-variant-numeric: tabular-nums; }
.factura .rand-jos { color: var(--ink-soft); font-size: .92rem; margin: 4px 0 0; }
.rand-importuri { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.rand-importuri:last-child { border-bottom: 0; }
.rand-importuri .ce { font-weight: 600; }
.rand-importuri .cand { display: block; font-size: 12.5px; color: var(--muted); }

/* ---------- tabele ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--surface); }
caption { text-align: left; font-family: var(--font-titlu); font-size: 1.1rem; color: var(--accent-strong); padding: 0 0 10px; }
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
td.suma, th.suma { text-align: right; white-space: nowrap; }
tfoot td, tfoot th { font-weight: 700; border-bottom: 0; }
.card table { background: transparent; }
.card > table:last-child tr:last-child > * { border-bottom: 0; }
.mic { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.tabel-lat { overflow-x: auto; max-width: 100%; }
.tabel-lat table { min-width: 420px; }

/* ---------- formulare și butoane în aplicație ---------- */
main#continut form { max-width: 640px; }
button.principal, a.buton.principal { background: var(--accent); color: #F4EEE1; }
main#continut button[type=submit] { width: auto; min-width: 200px; }
button.candidat { width: 100%; justify-content: flex-start; text-align: left; margin-top: 8px; }
.zona-text { width: 100%; min-height: 160px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-input); border-radius: 8px; }
.optiuni { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; }
.optiune { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .95rem; color: var(--ink); margin: 0; min-height: 44px; }
.optiune input { width: 22px; height: 22px; flex-shrink: 0; }
.validare .valoare { font-weight: 600; margin-bottom: 4px; }
.validare .corectura label, .activitate label { margin-top: 10px; }
.actiuni-pagina { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actiuni-pagina > * { margin-top: 0; }

/* ---------- responsive pe lățimea zonei de conținut ---------- */
@container zona (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container zona (max-width: 640px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .antet-pagina h1 { font-size: 25px; }
  .card { padding: 16px; }
  .kpi .valoare-kpi { font-size: 28px; }
  main#continut button[type=submit], main#continut .principal { width: 100%; }
  /* tabele → carduri: fiecare rând devine un card, eticheta coloanei vine din data-label */
  table.adaptiv, table.adaptiv tbody, table.adaptiv tfoot, table.adaptiv tr, table.adaptiv td, table.adaptiv th[scope=row] { display: block; width: 100%; }
  table.adaptiv { background: transparent; }
  table.adaptiv caption { display: block; width: 100%; }
  table.adaptiv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.adaptiv tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; background: var(--surface); }
  table.adaptiv td, table.adaptiv th[scope=row] { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; text-align: right; }
  table.adaptiv tr > :first-child { display: block; text-align: left; font-weight: 700; }
  table.adaptiv td[data-label]:not(:first-child)::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; }
  table.adaptiv td:empty { display: none; }
  table.adaptiv td.suma { white-space: normal; }
  table.adaptiv .mic { text-align: inherit; }
  .tabel-lat table.adaptiv { min-width: 0; }
  .tabel-lat:has(table.adaptiv) { overflow: visible; }
  /* cardul care ține un tabel adaptiv dispare: rândurile sunt deja carduri */
  .card:has(> table.adaptiv) { padding: 0; border: 0; background: transparent; }
  .card:has(> table.adaptiv) caption { padding: 0 0 10px; }
}

/* ---------- ecrane înguste: meniul devine sertar, cu bară de sus ---------- */
@media (max-width: 900px) {
  .bara-sus {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 30;
    background: var(--sidebar-bg); color: var(--sidebar-ink); padding: 0 12px;
  }
  .bara-sus button { margin: 0; min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 1px solid var(--sidebar-border); color: var(--sidebar-ink); }
  .bara-sus button:hover { background: var(--sidebar-active); }
  .bara-sus button:focus-visible { outline-color: var(--cyan); }
  .bara-sus svg { width: 22px; height: 22px; }
  .bara-sus .logo-bara { flex-shrink: 0; }
  .bara-sus .logo-bara img { width: 160px; height: auto; }
  .bara-sus .pagina-curenta { margin-left: auto; font-size: 12.5px; color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* sertarul se deschide sub bara de sus, ca butonul de închidere să rămână vizibil */
  .rail { position: fixed; left: 0; top: 56px; transform: translateX(-105%); transition: transform .2s ease, visibility 0s linear .2s; height: calc(100% - 56px); width: min(280px, 86vw); visibility: hidden; }
  .rail .brand { display: none; }
  .rail.deschis { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .voal.deschis { display: block; position: fixed; inset: 56px 0 0; z-index: 35; background: rgba(10, 47, 89, .45); }
  main#continut { padding: 76px 20px 40px; }
}
@media (max-width: 420px) { main#continut { padding: 72px 16px 40px; } }
@media (prefers-reduced-motion: reduce) { .rail, a.card { transition: none; } a.card:hover { transform: none; } }

/* ---------- servicii și solicitări (sarcina B) ---------- */
.card.serviciu { display: flex; flex-direction: column; gap: 6px; }
.cap-serviciu { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.ico-cat { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ico-cat svg { width: 19px; height: 19px; }
.ico-cat.implementare { background: var(--amber-soft); color: var(--amber-text); }
.ico-cat.abonament { background: var(--review-soft); color: var(--review); }
.ico-cat.training { background: var(--ok-soft); color: var(--ok-text); }
.card.serviciu .mic { margin-top: 0; }
.rand-kpi { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rand-kpi .et-kpi, .linie-calc .et-kpi { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink-soft); font-weight: 600; font-size: 12.5px; }
.rand-kpi b, .linie-calc b { font-variant-numeric: tabular-nums; }
.bara { height: 8px; background: var(--surface-alt); border-radius: 99px; overflow: hidden; }
.bara i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bara i.atent { background: var(--amber); }
.bara i.rau { background: var(--danger); }
.val-rau { color: var(--danger); font-weight: 700; }
.val-atent { color: var(--amber-text); font-weight: 700; }
.val-bine { color: var(--ok-text); font-weight: 700; }
.legaturi-card { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.legaturi-card .buton { margin-top: 0; }
.pastile { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.etape { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.etape button { margin: 0; min-height: 36px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; border-radius: 999px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border-strong); }
.etape button:hover { background: var(--accent-soft); color: var(--accent-strong); }
.etape button[aria-pressed=true] { background: var(--accent-strong); color: #F4EEE1; border-color: var(--accent-strong); }
.nota-cinstita { font-size: 12.5px; color: var(--review); background: var(--review-soft); border-radius: 8px; padding: 8px 12px; margin: 12px 0 0; }
main#continut > .grila.formular-calcul { max-width: 1180px; }
.grila.formular-calcul { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.grila.formular-calcul form { max-width: none; }
.calcul-live { position: sticky; top: 20px; background: var(--surface-alt); }
.linie-calc { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dashed var(--border-strong); font-size: 13.5px; }
.linie-calc b { text-align: right; margin-left: auto; }
.avertisment-calc { margin: 12px 0 0; font-size: 13px; }
.zona-text.scurta { min-height: 64px; }
.rand-rol { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.rand-rol label { margin-top: 4px; }
@container zona (max-width: 900px) {
  .grila.formular-calcul { grid-template-columns: 1fr; }
  .calcul-live { position: static; }
}
@container zona (max-width: 640px) {
  .rand-rol { grid-template-columns: 1fr; }
  table.adaptiv .pastile { justify-content: flex-end; }
}
details.propuneri summary { cursor: pointer; font-weight: 700; color: var(--accent-strong); min-height: 44px; display: flex; align-items: center; }
details.propuneri[open] summary { margin-bottom: 12px; }
details.propuneri .carduri { margin-bottom: 0; }
main#continut > details.propuneri { max-width: 1180px; }
.pastile .pastila { white-space: normal; }

/* ---------- proiecte în lucru (sarcina D) ---------- */
.alerta { display: flex; gap: 16px; align-items: flex-start; border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; max-width: 1180px; }
.alerta.rau { background: var(--danger-soft); border: 1px solid #E5BDB7; }
.alerta .ico-alerta { color: var(--danger); flex-shrink: 0; }
.alerta .ico-alerta svg { width: 26px; height: 26px; }
.alerta .mare { font-family: var(--font-titlu); font-size: 21px; line-height: 1.3; color: var(--danger); margin: 0 0 6px; overflow-wrap: anywhere; }
.alerta .de-ce { font-size: 13.5px; color: #5B2420; margin: 6px 0 0; }
main#continut > .alerta, main#continut > section.card-fir { max-width: 1180px; }
.nota-separat { margin-top: -4px; }
main#continut > .grila-proiect { max-width: 1180px; }
.grila-proiect { align-items: start; }
.grila-proiect > * { min-width: 0; }
.grila-proiect select, .grila-proiect input { max-width: 100%; min-width: 0; }
ol.fir { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; }
.etapa-fir { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 4px; min-width: 0; }
.etapa-fir + .etapa-fir::before { content: ""; position: absolute; left: -11px; top: 22px; width: 12px; height: 12px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }
.etapa-fir .et { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.etapa-fir .val { font-family: var(--font-titlu); font-size: 21px; line-height: 1.2; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.etapa-fir .nota { font-size: 12px; color: var(--ink-soft); }
.scurgere { display: block; width: 100%; margin-top: 6px; border-radius: 8px; padding: 6px 8px; font-size: 12px; font-weight: 600; }
.scurgere.rau { background: var(--danger-soft); color: var(--danger); }
.scurgere.atent { background: var(--amber-soft); color: var(--amber-text); }
.scurgere.bine { color: var(--ok-text); background: transparent; }
.incredere { margin-top: 14px; }
.progres-livrabil { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.progres-livrabil .bara { width: 100%; }
.progres-livrabil .mic { margin: 0; }
.actiuni-cerere { display: flex; gap: 0 16px; flex-wrap: wrap; font-weight: 400; }
.pastile button.legatura, .actiuni-cerere button.legatura { min-height: 44px; margin: 0; font-size: 12.5px; }
.total-cereri { margin: 12px 0 8px; }
.draft-anexa { margin-top: 16px; border-top: 1px dashed var(--border-strong); padding-top: 8px; }
.draft-anexa .zona-text { font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; }
@container zona (max-width: 900px) {
  ol.fir { grid-template-columns: 1fr; }
  .etapa-fir { display: grid; grid-template-columns: minmax(70px, 96px) minmax(0, 1fr); column-gap: 12px; align-items: baseline; text-align: left; padding: 10px 2px; border-bottom: 1px dashed var(--border); }
  .etapa-fir + .etapa-fir::before { display: none; }
  .etapa-fir .nota, .etapa-fir .scurgere { grid-column: 2; }
  .etapa-fir .val { font-size: 18px; }
  .grila-proiect { grid-template-columns: 1fr; }
}
@container zona (max-width: 640px) {
  .alerta { padding: 14px; gap: 10px; }
  .alerta .mare { font-size: 18px; }
  .progres-livrabil { min-width: 0; width: 55%; }
}
main#continut button > svg { width: 18px; height: 18px; flex-shrink: 0; margin-right: 6px; vertical-align: -3px; }

/* ---------- Status săptămânal pe perspective + Echipă și timp ---------- */
.comutator { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; max-width: 100%; }
.comutator-buton { margin: 0; min-height: 44px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 4px 12px; background: transparent; color: var(--ink); border: 0; border-radius: 9px; font-weight: 400; text-align: left; }
.comutator-buton strong { font-size: 14px; }
.comutator-buton .mic { margin: 0; color: var(--muted); font-size: 11.5px; }
.comutator-buton[aria-pressed="true"] { background: var(--accent-strong); color: #fff; }
.comutator-buton[aria-pressed="true"] .mic { color: #D7E6EA; }
.comutator-buton:hover:not([aria-pressed="true"]) { background: var(--accent-soft); }
.zona-perspectiva { max-width: 1180px; }
.kpi.lipsa-kpi .valoare-kpi { font-size: 20px; color: var(--muted); }
.lista-lipsa { margin: 6px 0 4px; padding-left: 1.1em; }
.lista-lipsa li { margin: 3px 0; }
.kpi.lipsa-kpi a { display: inline-block; margin-top: 6px; min-height: 24px; }
ol.actiuni { list-style: none; margin: 0; padding: 0; }
ol.actiuni .actiune { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
ol.actiuni .actiune:last-child { border-bottom: 0; }
ol.actiuni .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
ol.actiuni .t { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
ol.actiuni .d { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
ol.actiuni .efect { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
ol.actiuni .efect .mic { margin: 0; }
fieldset.rand-sarcina { margin: 10px 0; }
fieldset.rand-sarcina input, fieldset.rand-sarcina select { max-width: 100%; min-width: 0; }
main#continut details.propuneri { margin-top: 10px; }
main#continut section.card-lat h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@container zona (max-width: 640px) {
  ol.actiuni .actiune { grid-template-columns: 28px minmax(0, 1fr); }
  ol.actiuni .efect { grid-column: 2; align-items: flex-start; text-align: left; }
  .comutator { width: 100%; }
  .comutator-buton { flex: 1 1 0; min-width: 0; padding: 4px 8px; }
  .comutator-buton .mic { overflow-wrap: anywhere; }
}
table.adaptiv td.banda-cost { white-space: normal; min-width: 7.5em; }

/* Acordul de încărcare (sarcina F): bifa + cele 4 rânduri despre date, sobru, lizibil pe mobil */
.acord-incarcare { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--accent-soft); }
.acord-incarcare .optiune { align-items: flex-start; min-height: 0; line-height: 1.45; font-size: .9rem; }
.acord-incarcare .optiune input { margin-top: 1px; }
.acord-detalii { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.acord-detalii li { margin: 3px 0; overflow-wrap: anywhere; }
.acord-furnizor { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.acord-furnizor a { white-space: nowrap; }
button.pericol { background: var(--danger); border-color: var(--danger); color: #fff; }
button.pericol:hover { background: #7f2d27; border-color: #7f2d27; color: #fff; }
.confirmare-stergere { border-color: var(--danger); }
.confirmare-stergere h3 { margin-top: 0; }
.doc-inventar .mic { overflow-wrap: anywhere; }

/* ---------- „Cash în 13 săptămâni” și cardul de cash din Status (4 cifre) ---------- */
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container zona (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container zona (max-width: 640px) { .g4 { grid-template-columns: 1fr; } }
main#continut > .zona-prognoza { max-width: 1180px; }
.zona-prognoza > p, .zona-prognoza > .card:not(.card-lat) { max-width: 860px; }
.zona-prognoza > .atentie { margin: 0 0 12px; }
.stare-bine { background: var(--ok-soft); color: var(--ok-text); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-weight: 600; }
button.mic-buton { min-height: 36px; margin: 0; padding: 4px 12px; font-size: 13px; background: var(--surface); color: var(--accent-strong); border: 1px solid var(--border-strong); white-space: normal; text-align: left; }
button.mic-buton:hover, button.mic-buton[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.alerta button.mic-buton { margin-top: 4px; }
.grafic-cash { margin: 4px 0 16px; }
.grafic-cash .suprafata { position: relative; height: 180px; border-bottom: 1px solid var(--border); }
.grafic-cash .bare { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; }
.grafic-cash .coloana-grafic { position: relative; display: flex; flex-direction: column; min-width: 0; }
.grafic-cash .zona-bara { position: relative; flex: 1; }
.grafic-cash .bara-cash { position: absolute; left: 12%; right: 12%; background: var(--accent); border-radius: 3px; }
.grafic-cash .bara-cash.sub { background: var(--danger); }
.grafic-cash .eticheta-bara { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font: 500 11px var(--font-mono); color: var(--muted); }
.grafic-cash .linie-zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ink-soft); z-index: 1; pointer-events: none; }
.grafic-cash .linie-prag { position: absolute; left: 0; right: 0; border-top: 2px dotted var(--danger); z-index: 1; pointer-events: none; }
.grafic-cash figcaption { margin-top: 30px; }
.rand-prognoza { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.rand-prognoza:last-child { border-bottom: 0; }
.rand-prognoza .ce { min-width: 0; flex: 1 1 260px; }
.rand-prognoza .ce .t { font-weight: 600; overflow-wrap: anywhere; }
.rand-prognoza .ce .mic { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rand-prognoza .cat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rand-prognoza .plus { color: var(--ok-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rand-prognoza .minus { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legenda li { margin: 6px 0; }
@container zona (max-width: 640px) {
  .grafic-cash .bare { gap: 2px; }
  .grafic-cash .suprafata { height: 150px; }
}

/* ---------- „Recuperarea banilor” (lista, detaliul clientului, mesajul pregătit) și cardul din Status CFO ---------- */
main#continut > .zona-recuperare { max-width: 1180px; }
.zona-recuperare > p, .zona-recuperare > .card:not(.card-lat), .zona-recuperare > details { max-width: 860px; }
.zona-recuperare > .atentie { margin: 0 0 12px; }
.zona-recuperare .treapta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zona-recuperare .nume-client { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 9em; overflow-wrap: anywhere; }
.zona-recuperare .nume-client a { font-weight: 700; }
.zona-recuperare .treapta-client { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zona-recuperare textarea { min-height: 220px; line-height: 1.5; resize: vertical; font: inherit; }
.zona-recuperare .cu-formula { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.zona-recuperare .eticheta-camp { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin: 16px 0 6px; }
.zona-recuperare .alegeri-mesaj { align-items: end; }
.zona-recuperare .formular-actiuni form { max-width: none; min-width: 0; }
.pasi-apel { margin: 0; padding-left: 22px; }
.pasi-apel li { margin: 6px 0; overflow-wrap: anywhere; }
.rand-istoric { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.rand-istoric:last-child { border-bottom: 0; }
.rand-istoric .t { font-weight: 600; overflow-wrap: anywhere; }
.rand-istoric .nota-istoric { overflow-wrap: anywhere; font-style: italic; }
.card-recuperare.atent { border-left: 4px solid var(--amber); }
/* „sursă” într-o coloană de sume (aliniată la dreapta): explicația se deschide spre stânga, ca să nu iasă din pagină */
.zona-recuperare td.suma .nota-sursa, .zona-recuperare h2 .nota-sursa { left: auto; right: 0; text-align: left; white-space: normal; }

/* ---------- „Profit pe client și proiect” ---------- */
main#continut > .zona-profit, main#continut > .rand-perioada { max-width: 1180px; }
.zona-profit > p, .zona-profit > .card:not(.card-lat), .zona-profit > .lipsa-date, .zona-profit > .alerta { max-width: 860px; }
.zona-profit > .atentie { margin: 0 0 12px; }
.rand-perioada { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 8px; }
.rand-perioada label { margin: 0; }
.rand-perioada select { width: auto; max-width: 100%; min-width: 0; margin: 0; }
.zona-profit .nume-client { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 9em; overflow-wrap: anywhere; }
.zona-profit .nume-client a { font-weight: 700; }
.zona-profit .cifra-cu-nota { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.zona-profit .cifra-cu-nota .mic { white-space: normal; text-align: right; }
.zona-profit td.suma { white-space: normal; }
.zona-profit td.suma .cifra-cu-nota strong, .zona-profit .nowrap { white-space: nowrap; }
.zona-profit .minus { color: var(--danger); }
.zona-profit td.suma .nota-sursa, .zona-profit h2 .nota-sursa { left: auto; right: 0; text-align: left; white-space: normal; }
@container zona (max-width: 640px) {
  .zona-profit td.suma { white-space: normal; }
  .zona-profit td.suma > .cifra-cu-nota, .zona-profit td.suma > .interval { margin-left: auto; text-align: right; align-items: flex-end; }
}