:root {
  --hartie: #F2F3F5;
  --card: #FFFFFF;
  --cerneala: #1B2430;
  --sters: #5B6472;
  --linie: #D7DBE2;
  --accent: #2454A6;
  --accent-moale: #E4EBF7;
  --ok: #1E7A4B;
  --ok-moale: #DCF0E5;
  --draft: #96600A;
  --draft-moale: #FBEBD3;
  --lipsa-moale: #EDEFF2;
  --eroare: #B3261E;
  --eroare-moale: #FBE4E2;
  --r: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hartie: #12161D; --card: #1A2029; --cerneala: #E7EAEF; --sters: #93A0B4;
    --linie: #2A3240; --accent: #6FA0E8; --accent-moale: #1E2E47;
    --ok: #6BCF9B; --ok-moale: #17301F; --draft: #E0A542; --draft-moale: #2E2717;
    --lipsa-moale: #1E242D; --eroare: #F2B8B5; --eroare-moale: #33201F;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hartie);
  color: var(--cerneala);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-variant-numeric: tabular-nums; }
code { font-size: 0.9em; background: var(--lipsa-moale); padding: 1px 5px; border-radius: 3px; }
h1 { font-size: 24px; margin: 0; }
h2.h-sec { font-size: 15px; margin: 0 0 12px; letter-spacing: 0.03em; }

/* bara */
.bara { border-bottom: 1px solid var(--linie); background: var(--card); position: sticky; top: 0; z-index: 10; }
.bara-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.marca-nume { font-weight: 650; letter-spacing: -0.01em; display: inline-flex; vertical-align: middle; }
.marca-nume img.logo { display: block; height: 32px; width: auto; }
.marca-sub { color: var(--sters); font-size: 12px; margin-left: 10px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.cont { display: flex; align-items: center; gap: 10px; color: var(--sters); font-size: 13px; }
.intrare { max-width: 560px; }
/* ca la .banda-stare: display:flex batea atributul hidden (meniul aparea si
   fara proiect deschis, iar pe ecranul de intrare si butonul „Iesi”) */
.nav[hidden], .cont[hidden] { display: none; }

/* subsolul comun si paginile legale (ui/legal.py) */
.subsol { border-top: 1px solid var(--linie); margin-top: 40px; }
.subsol-in { max-width: 1100px; margin: 0 auto; padding: 16px 20px 28px; color: var(--sters); font-size: 13px; }
.subsol a { color: var(--sters); }
.subsol p { margin-top: 6px; }
.subsol .anpc-sal img { display: block; margin-top: 8px; }
.legal { max-width: 820px; line-height: 1.6; }
.legal h2 { font-size: 17px; margin: 26px 0 8px; }
.legal p, .legal li { margin-bottom: 8px; }
.legal ul { padding-left: 22px; }
.legal a, .marca a { color: var(--accent); }
.marca a.marca-nume { color: inherit; text-decoration: none; }
.tabel-legal { border-collapse: collapse; margin: 10px 0 14px; width: 100%; }
.tabel-legal th, .tabel-legal td { border: 1px solid var(--linie); padding: 7px 10px; text-align: left; vertical-align: top; }
.tabel-preturi td:last-child { white-space: nowrap; }
.cont a { color: var(--accent); }
.cont [hidden] { display: none; }
.form-solicitare { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.form-solicitare label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.form-solicitare textarea { font: inherit; padding: 8px; border: 1px solid var(--linie);
  border-radius: var(--r); background: var(--card); color: var(--cerneala); resize: vertical; }
.solicitare { border: 1px solid var(--linie); border-radius: var(--r); padding: 10px 12px; background: var(--card); }
.solicitare-cap { font-size: 13px; color: var(--sters); margin-bottom: 6px; }
.solicitare-text { white-space: pre-wrap; }
.admin ul { padding-left: 20px; }
.admin li { margin-bottom: 8px; }
.admin pre { white-space: pre-wrap; background: var(--card); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 12px; font-size: 13px; }
.admin button { margin-left: 6px; }
.admin input { min-width: 0; }
.comanda-voucher { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.comanda-voucher label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.comanda-voucher input, .comanda-voucher textarea { max-width: 280px; width: 100%; resize: vertical; font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; }
.voucher-cod { border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 12px; }
.voucher-cod code { font-size: 17px; letter-spacing: 1px; }
mark.de-completat { background: #FFE08A; color: #5A3E00; padding: 0 3px; border-radius: 3px; }
.nav-b {
  border: 1px solid transparent; background: none; color: var(--sters);
  padding: 6px 12px; border-radius: var(--r); cursor: pointer; font: inherit; font-size: 14px;
}
.nav-b:hover { background: var(--lipsa-moale); color: var(--cerneala); }
.nav-b.activ { background: var(--accent-moale); color: var(--accent); font-weight: 600; }
.nav-inapoi { margin-left: 8px; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px; }
.cap { margin-bottom: 22px; }
.sub { color: var(--sters); margin: 6px 0 0; font-size: 14px; }
.nota { color: var(--sters); font-size: 13px; margin-top: 10px; }

/* proiecte */
.lista { display: flex; flex-direction: column; gap: 8px; }
.proiect {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--linie); background: var(--card); border-radius: var(--r);
  padding: 14px 16px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
}
.proiect:hover { border-color: var(--accent); }
.proiect-nume { font-weight: 600; }
.proiect-meta { color: var(--sters); font-size: 13px; margin-top: 2px; }
.proiect-fis { color: var(--sters); font-size: 12.5px; white-space: nowrap; }

.rand-nou { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.rand-nou input { flex: 1; min-width: 240px; }

input, select {
  border: 1px solid var(--linie); background: var(--card); color: var(--cerneala);
  border-radius: var(--r); padding: 8px 10px; font: inherit; font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.btn {
  border: 1px solid var(--linie); background: var(--card); color: var(--cerneala);
  border-radius: var(--r); padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primar { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primar:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* formular */
.form { display: flex; flex-direction: column; gap: 18px; }
.sectiune { border: 1px solid var(--linie); background: var(--card); border-radius: var(--r); overflow: hidden; }
.sectiune-cap { padding: 10px 16px; border-bottom: 1px solid var(--linie); background: var(--accent-moale); font-weight: 600; font-size: 14px; }
.sectiune-corp { padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.camp { display: flex; flex-direction: column; gap: 4px; }
.camp label { font-size: 13px; color: var(--sters); }
.camp .ajutor { font-size: 12px; color: var(--sters); }
.camp-lat { grid-column: 1 / -1; }

.niveluri { display: flex; flex-direction: column; gap: 8px; }
/* ultima coloana in rem, nu em: capul de tabel scrie mai mic decat randurile,
   iar cu `em` coloanele nu se mai potriveau intre ele */
.nivel-rand { display: grid; grid-template-columns: 1.4fr 1fr 1fr 4.5rem; gap: 8px; align-items: center; }
.nivel-rand input { width: 100%; }
.nivel-cap { font-size: 12px; color: var(--sters); line-height: 1.3; }
.nivel-cap span { padding: 0 2px; }
/* cotele derivate nu se scriu de mana: pardoseala unui nivel E planseul de dedesubt */
.nivel-rand input[readonly] { background: var(--lipsa-moale); color: var(--sters); }
.nivel-rand input[readonly]:focus { outline: none; border-color: var(--linie); }
.nivel-h { font-size: 13px; color: var(--sters); white-space: nowrap; font-variant-numeric: tabular-nums; }
.regim-sel { max-width: 180px; }

/* secțiunea cu cotele de nivel */
.sect-svg { width: 100%; height: auto; display: block; }
/* liniile de cotă: culoarea spune de unde vine numărul */
.s-cota { stroke: var(--linie); stroke-width: 1; }
.s-cota.s-ales { stroke: var(--accent); }
.s-cota.s-referinta { stroke: var(--cerneala); stroke-width: 1.4; }
.s-cota.s-auto { stroke: var(--draft); stroke-dasharray: 5 4; }
.s-cota.s-derivat, .s-cota.s-constanta { stroke: var(--sters); stroke-dasharray: 2 3; }
.s-marcaj { fill: var(--sters); stroke: none; }
.s-marcaj.s-ales { fill: var(--accent); }
.s-marcaj.s-referinta { fill: var(--cerneala); }
.s-marcaj.s-auto { fill: var(--draft); }
.s-leader { fill: none; stroke: var(--linie); stroke-width: 1; }
.s-et { font-size: 12.5px; fill: var(--sters); font-family: inherit; }
/* silueta — doar cât să se vadă la ce se referă cota */
.s-beton { fill: var(--accent-moale); stroke: var(--accent); stroke-width: 1; }
.s-egalizare { fill: var(--lipsa-moale); stroke: var(--sters); stroke-width: 0.8; }
.s-stalp { fill: var(--accent-moale); stroke: var(--accent); stroke-width: 1; }
.s-teren { stroke: var(--sters); stroke-width: 1.2; }
.s-hasura { stroke: var(--sters); stroke-width: 0.7; }

/* înălțimile derivate din cote — lanțul de derivare, sub desen */
.sect-masuri {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 10px 16px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--sters);
}
.s-masura b { color: var(--cerneala); font-variant-numeric: tabular-nums; margin-left: 4px; }

.s-val { display: flex; justify-content: flex-end; align-items: center; height: 30px; }
.s-in { width: 92px; padding: 4px 7px; font-size: 13px; text-align: right; }
/* AUTO = casetă goală cu valoarea ca sugestie: se vede că n-a ales nimeni */
.s-in.s-auto { border-color: var(--draft); background: var(--draft-moale); }
.s-in.s-auto::placeholder { color: var(--draft); opacity: 1; }
.s-fix {
  font-size: 13px; color: var(--sters); font-variant-numeric: tabular-nums;
  padding: 4px 7px; border: 1px dashed var(--linie); border-radius: var(--r);
  min-width: 92px; text-align: right;
}
.btn-mic { padding: 5px 10px; font-size: 13px; }

.bara-salvare { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; }
.stare { font-size: 13.5px; color: var(--sters); }
.stare.ok { color: var(--ok); }
.stare.eroare { color: var(--eroare); }

/* planse */
.doua-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .doua-col { grid-template-columns: 1fr; } }

.planse { display: flex; flex-direction: column; gap: 5px; }
.plansa {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--linie); background: var(--card);
  border-radius: var(--r); padding: 9px 12px;
}
.plansa.indisponibila { background: var(--lipsa-moale); border-style: dashed; color: var(--sters); }
.plansa.optionala { opacity: 0.72; }
.plansa-nr { font-family: Consolas, monospace; font-size: 12.5px; color: var(--sters); min-width: 34px; }
.plansa-titlu { flex: 1; font-size: 14px; }
.plansa input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

.eticheta {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.et-gata { background: var(--ok-moale); color: var(--ok); }
.et-draft { background: var(--draft-moale); color: var(--draft); }
.et-lipsa { background: var(--lipsa-moale); color: var(--sters); }
.et-in_curs { background: var(--accent-moale); color: var(--accent); }
.et-cond { background: transparent; color: var(--sters); border: 1px solid var(--linie); }
.et-sursa { background: var(--lipsa-moale); color: var(--sters); }

/* randul unui proiect: deschidere + stergere */
.proiect-rand { display: flex; align-items: stretch; gap: 8px; }
.proiect-rand .proiect { flex: 1; }
.proiect-sterge { border: 1px solid var(--linie); background: var(--card);
  color: var(--sters); border-radius: var(--r); padding: 0 14px; font: inherit;
  font-size: 13px; cursor: pointer; white-space: nowrap; }
.proiect-sterge:hover { border-color: var(--eroare, #B3261E);
  color: var(--eroare, #B3261E); }

/* avertisment la regimul de inaltime: P+1E nu e gata */
.avert-regim { margin-top: 7px; padding: 8px 11px; font-size: 12.5px;
  line-height: 1.45; color: var(--sters); background: var(--lipsa-moale);
  border-left: 3px solid var(--linie); border-radius: 0 var(--r) var(--r) 0; }
.avert-regim.tare { color: var(--draft); background: var(--draft-moale);
  border-left-color: var(--draft); font-weight: 500; }

/* comutatoarele „tot / nimic" de pe listele de generare */
.bife { float: right; display: inline-flex; gap: 6px; }
.leg { border: 1px solid var(--linie); background: var(--card); color: var(--sters);
  border-radius: 100px; padding: 2px 10px; font: inherit; font-size: 12px;
  cursor: pointer; }
.leg:hover { border-color: var(--accent); color: var(--accent); }

/* Raspunderea pentru datele introduse — sub formular si pe fisa de generare */
.disclaimer { margin: 14px 0 0; padding: 10px 13px; font-size: 12.5px;
  line-height: 1.5; color: var(--sters); background: var(--lipsa-moale);
  border-left: 3px solid var(--linie); border-radius: 0 var(--r) var(--r) 0; }

/* Fisa de generare: vederea 3D + rezumatul deciziilor, in capul ecranului */
.revizie { display: grid; grid-template-columns: 260px 1fr; gap: 20px;
  border: 1px solid var(--linie); background: var(--card);
  border-radius: var(--r); padding: 16px; margin-bottom: 18px; }
.revizie-3d { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#iso-svg { width: 100%; height: 190px; display: block;
  fill: none; stroke-linecap: round; }
#iso-svg .iso-sol { stroke: var(--linie); stroke-dasharray: 0.12 0.12; }
#iso-svg .iso-grinda { stroke: var(--accent); }
#iso-svg .iso-stalp { stroke: var(--cerneala); }
.btn-mic { padding: 5px 11px; font-size: 12.5px; }

.rezumat { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 22px; align-content: start; }
.rez-grup { break-inside: avoid; }
.rez-titlu { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--sters); margin: 6px 0 3px; }
.rez-rand { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 2px 0; border-bottom: 1px solid var(--linie); }
.rez-rand:last-child { border-bottom: none; }
.rez-et { color: var(--sters); }
.rez-val { font-weight: 600; text-align: right; }
.rez-auto .rez-val { color: var(--draft); }
.rez-indiciu { color: var(--sters); font-size: 12.5px; margin-left: 8px; }

.revizie-blocaj { border: 1px solid var(--draft); background: var(--draft-moale);
  color: var(--draft); border-radius: var(--r); padding: 10px 14px;
  font-size: 13.5px; margin-bottom: 16px; }

/* informari care NU blocheaza: localitatea din afara Tabelului A1 */
.revizie-informari { border: 1px solid var(--linie); background: var(--lipsa-moale);
  color: var(--sters); border-radius: var(--r); padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.revizie-informari a { color: var(--accent); }

@media (max-width: 720px) { .revizie { grid-template-columns: 1fr; } }

/* Valoarea pe care o ia calculul pentru optiunea aleasa */
.implicatie { display: block; margin-top: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.implicatie.rau { color: var(--draft); font-weight: 400; }

/* Tabelul de referinta cu utilele pe categorii (CR 1-1-1) */
.tabel-utile { margin-top: 9px; border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden; }
.utila-rand { display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 10px; font-size: 13px; color: var(--sters);
  border-bottom: 1px solid var(--linie); }
.utila-rand:last-child { border-bottom: none; }
.utila-rand b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.utila-rand.potrivit { background: var(--accent-moale); color: var(--accent); }

/* Camp care nu se aplica la tipul de acoperis ales: blocat, nu ascuns — se
   vede ca exista si de ce nu e al tau acum. */
.camp-blocat label { color: var(--sters); }
.camp-blocat input, .camp-blocat select {
  background: var(--lipsa-moale); color: var(--sters); cursor: not-allowed;
}
.camp-blocat .ajutor { font-style: italic; }

/* Camp read-only: constanta fixa sau valoare derivata din alta */
.camp-fix { padding: 9px 11px; border: 1px dashed var(--linie);
  border-radius: var(--r); background: var(--lipsa-moale); color: var(--sters);
  font-size: 14px; }

/* Panoul "ce a decis programul" (fisa de decizii, pe ecranul de generare) */
.decizii-grup { font-weight: 600; font-size: 13px; color: var(--sters);
  margin: 16px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.decizii-grup:first-child { margin-top: 4px; }
.decizie { display: flex; align-items: baseline; gap: 12px;
  padding: 6px 2px; border-bottom: 1px solid var(--linie); }
.decizie-et { flex: 0 0 auto; min-width: 180px; }
.decizie-val { font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 72px; text-align: right; }
.decizie-motiv { color: var(--sters); font-size: 12.5px; flex: 1; }
.decizie-auto { background: var(--draft-moale); border-radius: var(--r);
  padding-left: 8px; padding-right: 8px; border-bottom-color: transparent; }
.decizie-avert { color: var(--draft); font-size: 13px; margin-top: 10px; }

.calcul { display: flex; flex-direction: column; gap: 5px; }
.calcul-rand { border: 1px solid var(--linie); background: var(--card); border-radius: var(--r); padding: 9px 12px; }
.calcul-sus { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calcul-nume { font-size: 14px; }
.calcul-det { font-size: 12.5px; color: var(--sters); margin-top: 2px; }

.jurnal { margin-top: 22px; border: 1px solid var(--linie); background: var(--card); border-radius: var(--r); overflow: hidden; }
.jurnal-rand { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.jurnal-rand:last-child { border-bottom: none; }
.jurnal-rand.eroare { background: var(--eroare-moale); }
.jurnal-stare { min-width: 62px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.jurnal-rand.ok .jurnal-stare { color: var(--ok); }
.jurnal-rand.eroare .jurnal-stare { color: var(--eroare); }
.jurnal-pas { flex: 1; }
.jurnal-det { color: var(--sters); font-size: 12.5px; margin-top: 2px; word-break: break-word; }

/* rezultate */
.fisiere { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fisier { border: 1px solid var(--linie); background: var(--card); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.fisier-preview { background: #fff; border-bottom: 1px solid var(--linie); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fisier-preview img { width: 100%; height: 100%; object-fit: contain; }
.fisier-preview .gol { color: var(--sters); font-size: 13px; }
.fisier-jos { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fisier-nume { font-size: 13px; word-break: break-all; }
.fisier-kb { color: var(--sters); font-size: 12px; }
.fisier a { color: var(--accent); font-size: 13px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.fisier a:hover { text-decoration: underline; }

.gol-mesaj { color: var(--sters); border: 1px dashed var(--linie); border-radius: var(--r); padding: 22px; text-align: center; }

/* plan interactiv al geometriei */
.plan-geo { border-top: 1px solid var(--linie); background: #FBFCFD; padding: 12px 16px 16px; }
.plan-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.plan-cap > span:first-child { font-size: 12.5px; color: var(--sters); }
.plan-stare { font-size: 12.5px; color: var(--sters); font-variant-numeric: tabular-nums; }
.plan-stare.atentie { color: var(--draft); font-weight: 600; }
.plan-stare.rau { color: var(--eroare); font-weight: 600; }
#plan-svg, #fasii-svg { width: 100%; max-height: 420px; display: block; background: var(--card); border: 1px solid var(--linie); border-radius: var(--r); }
#plan-svg .p-grinda { stroke: var(--cerneala); }
#plan-svg .p-stalp, #fasii-svg .p-stalp { fill: var(--cerneala); }
#fasii-svg .p-balon { fill: var(--card); stroke: var(--sters); stroke-width: 0.02; }
#fasii-svg .p-et { fill: var(--cerneala); text-anchor: middle; dominant-baseline: central; font-weight: 700; }
/* fâșiile de fundație: placa în fundal; pe contur, obligatorii (cerneală);
   interioare alese (accent), scoase (punctat) — ca grinzile scoase de mână */
#fasii-svg .f-placa { fill: var(--accent-moale); }
#fasii-svg .f-fasie { stroke-linecap: square; }
#fasii-svg .f-oblig { stroke: var(--cerneala); stroke-opacity: 0.55; }
#fasii-svg .f-aleasa { stroke: var(--accent); stroke-opacity: 0.75; }
#fasii-svg .f-scoasa { stroke: var(--draft); stroke-dasharray: 0.2 0.16; }
#fasii-svg .f-tinta { stroke: transparent; cursor: pointer; }
#fasii-svg .f-tinta:hover { stroke: var(--accent); stroke-opacity: 0.18; }
/* stâlpii de colț se pot scoate prin clic; cel scos rămâne desenat punctat,
   ca să se vadă ce lipsește. Ținta de clic e mai mare decât stâlpul — 30 cm
   pe un plan de 9 m înseamnă câțiva pixeli. */
#plan-svg .p-colt { cursor: pointer; }
#plan-svg .p-tinta { fill: transparent; cursor: pointer; }
#plan-svg .p-tinta:hover { fill: var(--accent); fill-opacity: 0.14; }
/* stalp care nu e de colt: raspunde la clic cu un mesaj, dar nu se poate scoate */
#plan-svg .p-tinta-nu { cursor: not-allowed; }
#plan-svg .p-tinta-nu:hover { fill: #888; fill-opacity: 0.10; }
#plan-svg .p-stalp.p-scos {
  fill: none; stroke: var(--draft); stroke-width: 0.04; stroke-dasharray: 0.1 0.1;
}
/* grinda scoasă de mână rămâne desenată punctat — se poate pune la loc.
   Cea dispărută odată cu un stâlp nu se desenează deloc: nu există singură. */
#plan-svg .p-grinda-scoasa { stroke: var(--draft); stroke-dasharray: 0.2 0.16; }
#plan-svg .p-tinta-gr { stroke: transparent; cursor: pointer; }
#plan-svg .p-tinta-gr:hover { stroke: var(--accent); stroke-opacity: 0.18; }

/* modul de editare: stâlpi sau grinzi, pe rând */
.plan-moduri { display: flex; align-items: center; gap: 6px; }
.mod-b {
  border: 1px solid var(--linie); background: var(--card); color: var(--sters);
  border-radius: var(--r); padding: 2px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.mod-b:hover { border-color: var(--accent); color: var(--cerneala); }
.mod-b.activ {
  background: var(--accent-moale); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
#plan-svg .p-balon { fill: var(--card); stroke: var(--sters); stroke-width: 0.02; }
#plan-svg .p-et { fill: var(--cerneala); text-anchor: middle; dominant-baseline: central; font-weight: 700; }
#plan-svg .p-cota { fill: var(--sters); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }

/* proces pe etape */
.pasi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pas { display: flex; align-items: center; gap: 7px; border: 1px solid var(--linie); background: var(--card); color: var(--sters); border-radius: 100px; padding: 6px 14px 6px 6px; font: inherit; font-size: 13px; cursor: pointer; }
.pas-nr { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lipsa-moale); color: var(--sters); font-size: 11.5px; font-weight: 700; }
.pas.trecut { color: var(--ok); border-color: var(--ok-moale); }
.pas.trecut .pas-nr { background: var(--ok-moale); color: var(--ok); }
.pas.activ { color: var(--accent); border-color: var(--accent); background: var(--accent-moale); font-weight: 600; }
.pas.activ .pas-nr { background: var(--accent); color: #fff; }
/* pas la care nu se poate ajunge: etapa curenta nu e inca valida */
.pas.blocat { opacity: 0.45; cursor: not-allowed; }
.nav-etape { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.nav-etape .btn-primar { margin-left: auto; }
.nec-mesaj { font-size: 13px; color: var(--sters); }
.nec-mesaj.rau { color: var(--eroare); font-weight: 600; }
.nec { color: var(--eroare); font-weight: 700; }
input.lipsa-nec, select.lipsa-nec { border-color: var(--eroare); background: var(--eroare-moale); }

/* casete de distanta, peste plan */
.plan-cutie { position: relative; }
.plan-casete { position: absolute; inset: 0; pointer-events: none; }
.p-cota-in { position: absolute; transform: translate(-50%, -50%); width: 68px; padding: 3px 5px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; border: 1px solid var(--linie); border-radius: var(--r); background: var(--card); pointer-events: auto; }
.p-cota-in:focus { border-color: var(--accent); outline: 2px solid var(--accent-moale); }

/* setări avansate: câmpurile rămân vizibile, dar blocate pe valorile implicite */
.avansat-bifa { display: flex; gap: 10px; align-items: flex-start; margin: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 13px; color: var(--sters); cursor: pointer; }
.avansat-bifa b { color: var(--cerneala); }
.avansat-bifa input { margin-top: 2px; }
.sectiune-corp.blocat { opacity: 0.55; }

/* documentele proiectului */
.doc-zona { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.buton-fis { display: inline-block; border: 1px solid var(--accent); color: var(--accent); background: var(--card); border-radius: var(--r); padding: 6px 14px; font-size: 13.5px; cursor: pointer; }
.buton-fis:hover { background: var(--accent-moale); }
.doc-lista { display: flex; flex-direction: column; gap: 6px; }
.doc-rand { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--card); font-size: 13.5px; }
.doc-rand a { color: var(--cerneala); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-rand a:hover { color: var(--accent); text-decoration: underline; }
.doc-marime { margin-left: auto; color: var(--sters); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* documentele, pe rubrici */
.doc-rubrica { border: 1px solid var(--linie); border-left: 3px solid var(--lipsa-moale); border-radius: var(--r); padding: 10px 12px; background: var(--card); display: flex; flex-direction: column; gap: 7px; }
.doc-rubrica.are { border-left-color: var(--ok); }
.doc-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-cap b { font-size: 14px; }
.doc-rubrica .doc-rand { border: 0; padding: 0; background: none; }
.doc-nota { margin-top: 10px; }

/* comanda: ce anume se cere inainte de generare */
.comanda { border: 1px solid var(--linie); border-radius: var(--r); background: var(--card); padding: 18px; margin-top: 16px; }
.comanda-optiuni { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.comanda-op { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; border: 1px solid var(--linie); border-radius: var(--r); padding: 12px 14px; cursor: pointer; }
.comanda-op:hover { border-color: var(--accent); }
.comanda-op:has(input:checked) { border-color: var(--accent); background: var(--accent-moale); }
.comanda-op.blocat { opacity: 0.6; cursor: not-allowed; }
.comanda-titlu { font-weight: 600; }
.comanda-pret { grid-column: 2; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.comanda-desc { grid-column: 2; font-size: 13px; color: var(--sters); }
.comanda-disclaimer { margin-top: 14px; font-size: 13px; color: var(--sters); }
.comanda-jos { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.gol-mesaj.rau { color: var(--eroare); border-color: var(--eroare); }

/* proiect comandat: bandă de stare peste formular */
.banda-stare { border: 1px solid var(--draft); border-left: 3px solid var(--draft); background: var(--draft-moale, #FFF8E7); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banda-stare .btn { margin-left: auto; }
/* comanda: cate un buton pe varianta, fara radio-uri */
.comanda-op .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
.comanda-facuta { border: 1px solid var(--linie); border-left: 3px solid var(--ok); border-radius: var(--r); padding: 12px 14px; font-size: 14px; }
.stare-eticheta { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 100px; }
.stare-ciorna { background: var(--lipsa-moale); color: var(--sters); }
.stare-comandat { background: var(--draft-moale, #FFF8E7); color: var(--draft); }
.stare-livrat { background: var(--ok-moale); color: var(--ok); }
/* felul comenzii (3 nov 2026): cele asumate se semneaza, deci se vad primele */
.stare-asumat { background: #EDE7FF; color: #4B2DB5; }
.stare-neasumat { background: transparent; color: var(--sters); border: 1px solid var(--linie); }

/* `display:flex` batea atributul `hidden`: banda aparea goala pe ciorne */
.banda-stare[hidden] { display: none; }

/* indicatorul de lucru: roata, mesajul, secundele scurse */
.lucru { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--card); font-size: 14px; }
.lucru-text { color: var(--cerneala); }
.lucru-timp { margin-left: auto; color: var(--sters); font-variant-numeric: tabular-nums; font-size: 13px; }
.roata { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--accent-moale); border-top-color: var(--accent); animation: roteste 0.8s linear infinite; flex: none; display: inline-block; vertical-align: -4px; }
.roata.mica { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: #fff; margin-right: 6px; }
@keyframes roteste { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roata { animation-duration: 2.4s; } }

/* dialogul aplicatiei */
.dialog { border: 1px solid var(--linie); border-radius: var(--r); padding: 0; max-width: 460px; width: calc(100% - 32px); background: var(--card); color: var(--cerneala); box-shadow: 0 20px 50px -20px rgba(15, 34, 48, .45); }
.dialog::backdrop { background: rgba(15, 34, 48, .35); }
.dialog form { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { margin: 0; font-size: 18px; }
.dialog-text { font-size: 14px; color: var(--sters); display: flex; flex-direction: column; gap: 8px; }
.dialog-text p { margin: 0; }
.dialog-text b { color: var(--cerneala); }
.dialog-jos { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.btn-pericol { background: var(--eroare); border-color: var(--eroare); color: #fff; }

/* comanda facuta, cu butoanele de dupa */
.comanda-facuta .comanda-jos { margin-top: 12px; }
.comanda-facuta.cu-erori { border-left-color: var(--eroare); }

/* previzualizarea */
.previz-grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 22px; }
.previz-cap { border: 1px solid var(--linie); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--card); padding: 14px 16px; }
.previz-cap.rau { border-top-color: var(--eroare); }
.previz-cap h3 { margin: 0 0 8px; font-size: 15px; }
.previz-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.previz-tabel th { text-align: left; font-weight: 400; color: var(--sters); padding: 5px 10px 5px 0; vertical-align: top; width: 46%; }
.previz-tabel td { padding: 5px 0; font-variant-numeric: tabular-nums; }
.previz-tabel tr + tr th, .previz-tabel tr + tr td { border-top: 1px solid var(--linie); }
.previz-detalii { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.previz-detaliu { margin: 0; border: 1px solid var(--linie); border-radius: var(--r); background: var(--card); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.previz-detaliu figcaption { font-size: 13px; color: var(--sters); }
.d-svg { max-width: 100%; height: auto; }
.d-text { font-size: 13px; font-variant-numeric: tabular-nums; }
.d-beton { fill: var(--accent-moale); stroke: var(--cerneala); stroke-width: 1.5; }
.d-etrier { fill: none; stroke: #C2402C; stroke-width: 1.5; rx: 3; }
.d-bara { fill: #C2402C; }
.d-cota { font-size: 11px; fill: var(--sters); text-anchor: middle; }
.previz-planse { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 14px; }
.previz-planse .plansa-nr { display: inline-block; width: 48px; color: var(--accent); font-variant-numeric: tabular-nums; }
.proiect-benef { color: var(--cerneala); font-weight: 600; }

/* P+1E: comutatorul parter / etaj, stalpii opriti peste parter, balcoanele */
.plan-nivel { display: inline-flex; margin-right: 8px; }
.niv-b {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--linie, #ccc); background: transparent; color: inherit;
}
.niv-b:first-child { border-radius: 4px 0 0 4px; }
.niv-b:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.niv-b.activ { background: var(--accent); color: #fff; border-color: var(--accent); }
.balc-adanc { font-size: 12px; margin-left: 4px; }
#plan-svg .p-stalp.p-oprit {
  fill: transparent; stroke: var(--cerneala); stroke-width: 0.03;
  stroke-dasharray: 0.06 0.05;
}
#plan-svg .p-balcon {
  fill: var(--accent); fill-opacity: 0.18; stroke: var(--accent); stroke-width: 0.03;
}
/* balcon pe marginea terasei unei retrageri: ramane doar ca sa fie scos */
#plan-svg .p-balcon.p-balcon-rau { fill: var(--eroare); stroke: var(--eroare); }

/* Configuratorul de scara (P+1E) */
.scara-alegeri { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.scara-alegere { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.scara-rezultat { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.scara-tabel { border-collapse: collapse; font-size: 13px; }
.scara-tabel th { text-align: left; font-weight: 400; opacity: 0.7; padding: 2px 14px 2px 0; }
.scara-tabel td { padding: 2px 0; }
.scara-svg { width: 340px; max-width: 100%; height: auto; }
.scara-svg .sc-gol { fill: none; stroke: var(--cerneala); stroke-width: 0.03; }
.scara-svg .sc-l { stroke: var(--cerneala); stroke-width: 0.015; }
.scara-svg .sc-grinda { fill: var(--cerneala); fill-opacity: 0.25; stroke: none; }
.scara-svg .sc-ochi { fill: var(--cerneala); fill-opacity: 0.12; stroke: none; }
.scara-svg .sc-urcare { fill: none; stroke: var(--accent); stroke-width: 0.03; }
.scara-svg .sc-varf { fill: var(--accent); }

/* Scara in plan (P+1E) */
#plan-svg .p-scara { fill: #e0b400; fill-opacity: 0.18; stroke: #e0b400; stroke-width: 0.04; }
#plan-svg .p-scara-simbol { fill: none; stroke: #e0b400; stroke-width: 0.03; }
#plan-svg .p-tinta-scara { fill: #e0b400; fill-opacity: 0.25; }
#plan-svg .p-tinta-scara:hover { fill: #e0b400; fill-opacity: 0.6; }


/* randul de sub mesajul de dupa comanda: jurnalul si fisierele, doar pentru inginer */
.doar-inginer { margin-top: 12px; font-size: 13px; color: #667; display: flex;
                flex-wrap: wrap; align-items: center; gap: 8px; }
.doar-inginer .btn-mic { padding: 4px 10px; font-size: 13px; }
.doar-inginer .rau { color: #b3261e; font-weight: 600; }

/* variantele de alcatuire (admin, 20 oct 2026): tabelul ocupa tot randul */
#variante { flex-basis: 100%; overflow-x: auto; color: var(--cerneala); }
.var-proprie { display: inline-flex; gap: 6px; align-items: center; }
.var-proprie select, .var-proprie input { font-size: 13px; padding: 2px 4px; }
.var-tabel th { width: auto; white-space: nowrap; }
.var-tabel tr:first-child th { color: inherit; font-weight: 600; padding-right: 18px; }
.var-tabel td { padding-right: 18px; vertical-align: top; color: inherit; }
.var-planuri { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.var-fig { margin: 0; background: var(--card); border: 1px solid var(--linie); border-radius: var(--r);
           padding: 6px; }
.var-fig figcaption { font-size: 12px; color: var(--sters); text-align: center; }
.var-placa { fill: var(--linie); opacity: .45; }
.var-ax { stroke: var(--sters); stroke-width: .6; stroke-dasharray: 6 3 1 3; }
.var-et { font-size: 10px; fill: var(--sters); text-anchor: middle; }
.var-stalp { cursor: pointer; }
.var-stalp rect { stroke: var(--cerneala); stroke-width: .6; }
.var-pica { stroke: #c43c35; stroke-width: 3; }
.var-rap { font-size: 9px; fill: var(--cerneala); }

/* refuzul comenzii si previzualizarea: ce trebuie modificat (16 oct 2026) */
.indicatii { margin: 6px 0 0 18px; padding: 0; text-align: left; }
.indicatii li { margin: 3px 0; line-height: 1.4; }
.previz-indicatii { margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--linie);
  border-radius: var(--r); background: var(--card); }
.gol-mesaj.refuz { text-align: left; }
.gol-mesaj.refuz p { margin: 0 0 4px; }

/* recomandarea de deschideri la P+1E (16 oct 2026) */
.plan-recomandare { margin-top: 8px; font-size: 13px; color: var(--sters); }
.plan-recomandare.atentie { color: var(--draft); }
/* plin si ingrosat: in tema inchisa fondul moale nu se vedea (17 oct 2026) */
.p-cota-in.p-cota-mare { border: 2px solid var(--draft); background: var(--draft);
  color: var(--card); font-weight: 700; }
/* pagina de prezentare (3 nov 2026) */
.prez-lead { font-size: 18px; line-height: 1.5; }
.buton-prez { display: inline-block; background: var(--accent); color: #fff !important; text-decoration: none; padding: 10px 18px; border-radius: 6px; font-weight: 600; margin-right: 10px; }
.prez-mic { font-size: 13px; opacity: .75; }
.prez-exemplu { margin: 14px 0; }
.prez-exemplu img { max-width: 100%; height: auto; border: 1px solid var(--linie); background: #fff; }
.prez-exemplu figcaption { font-size: 13px; opacity: .75; margin-top: 4px; }
/* livrabilele incarcate de inginer (3 nov 2026) */
.titlu-fisiere { font-size: 16px; margin: 22px 0 10px; }
.titlu-fisiere:first-child { margin-top: 0; }
.incarca-livrabile { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; flex-wrap: wrap; }
.incarca-livrabile label.btn { cursor: pointer; }
.fisier-actiuni { display: flex; gap: 12px; }
.fisier a.link-sterge { color: #c62828; font-weight: 400; }

/* schita celor doua variante, pe /prezentare */
.prez-schita { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.prez-drum { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 16px; background: var(--card); }
.prez-drum-asumat { border-color: #B9A8F0; }
.prez-drum-titlu { font-weight: 650; margin: 0 0 6px; }
.prez-drum ol { margin: 0; padding-left: 20px; }
.prez-drum li { margin: 6px 0; }
@media (max-width: 700px) { .prez-schita { grid-template-columns: 1fr; } }

/* pagina de confirmare a comenzii (app.js, _paginaConfirmare) */
.confirmare { border: 1px solid var(--linie); border-radius: 8px; padding: 16px 20px; background: var(--card); }
.confirmare h3 { margin-top: 0; }
.confirmare h4 { margin: 16px 0 6px; }
.confirmare ul { margin: 0; padding-left: 20px; }
.confirmare li { margin: 4px 0; }
.tabel-confirmare td:last-child { text-align: right; }
.tabel-confirmare .ajutor { display: block; }
.tabel-confirmare tr.total td { border-top: 2px solid var(--linie); }
.confirmare-adresa { display: block; margin-top: 16px; font-weight: 600; }
.confirmare-adresa textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; box-sizing: border-box; }
.confirmare-accept { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.confirmare-accept input { margin-top: 4px; flex: none; }
.confirmare-butoane { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* asumarea ceruta dupa o comanda fara asumare (app.js, _casetaAsumare) */
.comanda-asumare { margin-top: 14px; border: 1px solid #B9A8F0; border-radius: 8px; padding: 12px 16px; background: var(--card); }
.comanda-asumare .ajutor { margin: 6px 0; }
.asumare-documente { list-style: none; padding: 0; margin: 8px 0; }
.asumare-documente li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 4px 0; }
.comanda-asumare .btn { margin-top: 8px; }
.proiect-asumare { color: #4B2DB5; }

/* regenerarea inginerului pe proiectul comandat (app.js, regenereaza) */
.comanda-regenerare { margin-top: 14px; border: 1px dashed var(--linie); border-radius: 8px; padding: 12px 16px; }
.comanda-regenerare .btn { margin-top: 8px; }

.fisiere-butoane { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }