:root {
  --verde: #006030; --lime: #b5bd00; --text: #1a1a1a; --gri: #595959; --linie: #d5dbd5;
  --fond: #f4f6f4; --card: #ffffff; --eroare: #b42318; --avert: #8a6100; --ok: #006030;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--fond); }
main { max-width: 1100px; margin: 0 auto; padding: 28px 16px 16px; }
h1 { font-size: 22px; margin: 8px 0 16px; } h1 small, h2 small { font-weight: 400; color: var(--gri); font-size: 14px; }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--verde); }
a { color: var(--verde); }
/* ── bara de sus ─────────────────────────────────────────────────────────
   ordine: siglă · Lucrări │ acțiuni (Recomandă, Lucrare nouă) │ utilitare (Setări, Ieșire) */
.bara { background: var(--verde); color: #fff; border-bottom: 3px solid var(--lime);
        box-shadow: 0 1px 6px rgba(0,0,0,.18); position: sticky; top: 0; z-index: 20; }
.bara-in { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px; }
.bara a { color: #fff; text-decoration: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
          gap: 7px; min-height: 38px; padding: 0 12px; border-radius: 7px; white-space: nowrap; line-height: 1.2;
          transition: background-color .12s, color .12s, box-shadow .12s; }
.bara a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bara .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bara .sigla { font-weight: 700; font-size: 17px; padding: 0 10px 0 0; margin-right: 8px; letter-spacing: .1px; }
.bara .sigla .ic { width: 22px; height: 22px; color: var(--lime); }
.b-pagini, .b-actiuni, .b-util { display: flex; align-items: center; gap: 6px; }
.b-actiuni { margin-left: auto; }
.b-util { margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); gap: 2px; }
.b-pagini a, .b-util a { color: rgba(255,255,255,.88); }
.b-pagini a:hover, .b-util a:hover { color: #fff; background: rgba(255,255,255,.13); }
.b-pagini a.activ, .b-util a.activ { color: #fff; background: rgba(255,255,255,.2); font-weight: 600; }
.b-util a { font-size: 14px; padding: 0 10px; }
.b-util a.iesire { width: 38px; padding: 0; color: rgba(255,255,255,.75); }
.bara a.actiune { font-weight: 600; padding: 0 14px; border: 1.5px solid var(--lime); }
.bara a.actiune:hover { background: rgba(181,189,0,.22); }
.bara a.actiune.activ { background: rgba(181,189,0,.32); box-shadow: inset 0 -3px 0 var(--lime); }
.bara a.buton-nou { background: var(--lime); color: #1a1a1a; }
.bara a.buton-nou:hover { background: #c9d21a; }
.bara a.buton-nou.activ { background: #c9d21a; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
/* etichete la trecerea cu mouse-ul sau la focus din tastatură; pe ecrane tactile nu apar deloc */
@media (hover: hover) {
  .bara a[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 9px); left: 0; z-index: 30;
    width: max-content; max-width: 270px; padding: 7px 10px; border-radius: 6px; background: #1a1a1a; color: #fff;
    font-size: 12.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; white-space: normal; text-align: left;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; }
  .bara a[data-tip]:hover::after { opacity: 1; visibility: visible; transition-delay: .35s; }
  .bara a[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
  .b-actiuni a[data-tip]::after, .b-util a[data-tip]::after { left: auto; right: 0; }
}
/* ecran scund (telefon culcat): bara nu rămâne lipită, ca să nu ocupe din înălțime */
@media (max-height: 520px) and (pointer: coarse) { .bara { position: static; } }   /* doar telefon culcat, nu fereastră joasă de desktop */
@media (prefers-reduced-motion: reduce) { .bara a, .bara a[data-tip]::after { transition: none; } }
.card { background: var(--card); border: 1px solid var(--linie); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.card.ingust { max-width: 360px; margin: 60px auto; }
.grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; margin-bottom: 10px; }
.grila.culori { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
label { display: block; font-size: 13px; color: var(--gri); margin-bottom: 8px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--text);
  border: 1px solid #b9c2b9; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lime); border-color: var(--verde); }
button, .buton { display: inline-block; background: var(--verde); color: #fff; border: 0; border-radius: 6px; padding: 9px 16px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secundar { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
.actiuni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.dreapta { text-align: right; margin-top: -40px; }
fieldset { border: 1px solid var(--linie); border-radius: 6px; margin: 4px 0 12px; padding: 10px 12px 2px; }
legend { font-size: 13px; color: var(--gri); padding: 0 4px; }
.mesaj { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; border-left: 4px solid; background: #fff; }
.mesaj.eroare { border-color: var(--eroare); color: var(--eroare); } .mesaj.avertizare { border-color: #e0a800; color: var(--avert); }
.mesaj.ok { border-color: var(--ok); color: var(--ok); }
.lista { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); margin-bottom: 12px; }
.lista th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--gri); background: #eef2ee; padding: 8px 10px; }
.lista td { padding: 9px 10px; border-top: 1px solid var(--linie); } .lista tbody tr { cursor: pointer; } .lista tbody tr:hover { background: #f7faf7; }
.lista.mica tbody tr { cursor: default; }
.eticheta { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eef2ee; margin: 1px 4px 1px 0; }
.s-COST { background: #fff4d6; } .s-FISA { background: #dcefe2; } .s-FISA_TRIMISA { background: var(--verde); color: #fff; }
.rand-titlu { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cautare { display: flex; gap: 8px; } .cautare input { margin: 0; min-width: 260px; }
.nr { display: inline-block; width: 24px; height: 24px; border-radius: 12px; background: var(--verde); color: #fff; text-align: center; font-size: 14px; line-height: 24px; margin-right: 6px; }
.sugestie { color: var(--verde); font-size: 13px; margin: 0 0 8px; } .sugestie:empty { display: none; }
.s-NOU { background: #eef2ee; } .s-NOTA { background: #e3ecf7; }
.nota-mica { font-size: 12px; color: var(--gri); } .gol { color: var(--gri); }
.rezultat { font-size: 15px; }
.ascuns { display: none !important; }

input.automat { background: #f3f7e0; }

.documente { white-space: nowrap; }
.doc { display: inline-block; position: relative; margin-right: 6px; }
.doc summary { list-style: none; cursor: pointer; font-size: 13px; padding: 3px 10px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; color: var(--verde); }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: " ▾"; font-size: 11px; }
.doc[open] summary { background: #eef2ee; }
.doc > div { position: absolute; right: 0; top: 110%; z-index: 5; background: #fff; border: 1px solid var(--linie); border-radius: 6px;
             box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: 4px 0; min-width: 150px; }
.doc > div a { display: block; padding: 6px 12px; text-decoration: none; font-size: 13px; } .doc > div a:hover { background: #f4f6f4; }
.rand-pret { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rand-pret input { width: auto; margin: 0; max-width: 160px; }

.tab-uri { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: -4px 0 16px; }
.tab-uri a { padding: 8px 14px; text-decoration: none; color: var(--gri); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-uri a.activ { color: var(--verde); border-color: var(--verde); font-weight: 600; }
input.bifa { width: auto; margin: 0; }
.nom { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; overflow-x: auto; }
.nom h3 { font-size: 14px; color: var(--verde); margin: 14px 0 4px; }
.rand-nom { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.rand-nom input, .rand-nom select { margin: 0; padding: 7px; font-size: 13px; }
.rand-nom label { margin: 0; } .rand-nom label span { display: none; }
.rand-nom .n { width: 66px; flex: none; } .rand-nom .t { width: 135px; flex: none; } .rand-nom select { width: 120px; flex: none; }
.rand-nom .mic { width: 56px; flex: none; font-size: 12px; color: var(--gri); text-align: right; }
.rand-nom button { padding: 5px 10px; font-size: 13px; }
.rand-nom.cap { font-size: 11px; text-transform: uppercase; color: var(--gri); position: sticky; top: 0; background: #fff; }
.rand-nom.cap span:first-child:not(.n) { width: 120px; flex: none; }
.rand-nom:target { background: #f3f7e0; }
.rand-nom button.sterge { color: var(--eroare); border-color: #e3b5b0; }

/* butonul „înapoi” (produs → lucrare, lucrare → listă, client → clienți) */
.fir { margin: 0 0 10px; }
.fir a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; font-size: 14px; font-weight: 600;
         text-decoration: none; color: var(--verde); background: #fff; border: 1px solid var(--verde); border-radius: 6px; }
.fir a:hover { background: #eef2ee; }

.rand-intreg { grid-column: 1 / -1; }
.actiuni > a { padding: 7px 12px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; text-decoration: none; font-size: 14px; }
.actiuni > a:hover { background: #eef2ee; }
.doc summary { padding: 6px 12px; }

/* tabletă: coloana de documente se poate rupe pe două rânduri */
@media (max-width: 900px) {
  .documente { white-space: normal; }
  .doc { margin: 2px 4px 2px 0; }
  .lista td, .lista th { padding: 8px 7px; }
}

/* ecran îngust: nomenclatorul ca fișe cu etichete */
@media (max-width: 900px) {
  .nom { padding: 8px; overflow: visible; }
  .rand-nom.cap { display: none; }
  .rand-nom { flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--linie); border-radius: 6px; margin-bottom: 8px; }
  .rand-nom label span { display: block; font-size: 11px; color: var(--gri); margin-bottom: 2px; }
  .rand-nom label.n { width: calc(33.33% - 6px); } .rand-nom label.t { width: calc(50% - 4px); }
  .rand-nom label input { width: 100%; }
  .rand-nom .mic { width: auto; text-align: left; flex: 1; }
  .rand-nom button { padding: 8px 14px; }
  .rand-nom select { width: 100%; }
}

/* telefon */
@media (max-width: 640px) {
  main { padding: 20px 12px 12px; }
  /* bara: 2 rânduri (siglă + utilitare, apoi Lucrări + cele două acțiuni), ~88px, nelipită */
  .bara { position: static; }
  .bara-in { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 6px; padding: 5px 12px; }
  .bara a { min-height: 36px; font-size: 14px; }
  .bara .sigla { grid-column: 1 / 3; grid-row: 1; justify-self: start; font-size: 16px; margin: 0; }
  .b-util { grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; gap: 4px; }
  .b-util a, .b-util a.iesire { width: 40px; padding: 0; }
  .b-pagini { grid-column: 1; grid-row: 2; }
  .b-pagini a { padding: 0 10px; }
  .b-actiuni { grid-column: 2 / 4; grid-row: 2; margin: 0; }
  .b-actiuni a.actiune { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .bara a[data-tip]::after { max-width: 220px; }
  .cautare { width: 100%; } .cautare input { min-width: 0; flex: 1; }
  .dreapta { margin-top: 0; }
  /* tabelele devin fișe: fiecare rând = un card, fiecare celulă = „etichetă: valoare” */
  .lista, .lista tbody, .lista tr, .lista td { display: block; width: 100%; }
  .lista { border: 0; background: none; }
  .lista thead { display: none; }
  .lista tr { background: #fff; border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 10px; padding: 6px 0; }
  .lista td { border: 0; padding: 4px 12px; display: flex; gap: 10px; align-items: baseline; }
  .lista td::before { content: attr(data-eticheta); flex: none; width: 34%; font-size: 12px; color: var(--gri); }
  .lista td[data-eticheta=""]::before { display: none; }
  .lista td.documente { flex-wrap: wrap; }
  .doc > div { right: auto; left: 0; }
  .lista td form { margin: 0; }
}
@media (max-width: 640px) { .ascuns-mobil { display: none; } }
@media (max-width: 359px) { .b-pagini .ic, .b-actiuni .ic { display: none; } }
.filtru { margin-bottom: 12px; } .filtru .cautare { max-width: 420px; }
@media (max-width: 640px) { .rand-titlu { margin-bottom: 12px; } }
.verif-cod { font-size: 13px; border-radius: 6px; margin: -2px 0 12px; }
.verif-cod:empty { display: none; }
.verif-cod.ok, .verif-cod.info, .verif-cod.rau { padding: 8px 12px; border-left: 4px solid; background: #fff; }
.verif-cod.ok { border-color: var(--ok); color: var(--ok); }
.verif-cod.info { border-color: #e0a800; color: var(--avert); }
.verif-cod.rau { border-color: var(--eroare); color: var(--eroare); background: #fdf3f2; }
.verif-cod ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); }
.bifa-bt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--linie);
           border-radius: 6px; background: #f7faf7; color: var(--text); font-size: 14px; cursor: pointer; }
.bifa-bt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--verde); }
.bifa-bt:has(input:checked) { border-color: var(--verde); background: #e6f2ea; }
.s-BT { background: #d6ecf5; }

/* Secțiunile 1–2 ale produsului: pliabile; strânse arată un rezumat pe un rând */
.pliabil > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pliabil > summary::-webkit-details-marker { display: none; }
.pliabil > summary h2 { margin: 0; }
.pliabil > summary::after { content: "▾ deschide"; margin-left: auto; font-size: 13px; color: var(--verde); white-space: nowrap; }
.pliabil[open] > summary::after { content: "▴ strânge"; }
.pliabil[open] > summary { margin-bottom: 12px; }
.pliabil[open] .rezumat { display: none; }
.pliabil:not([open]) { padding-top: 10px; padding-bottom: 10px; }
.pliabil:not([open]):hover { border-color: var(--verde); }
.rezumat { color: var(--gri); font-size: 14px; }