:root {
  --bg: #e3e9e1;
  --bg-2: #d6dfd3;
  --antet: #1f4b47;
  --antet-2: #2c6660;
  --card: #f6f3ec;
  --linie: #d9d3c5;
  --text: #22302d;
  --text-slab: #5e6b67;
  --primar: #2d7a72;
  --primar-hover: #245f59;
  --accent: #df7a4e;
  --accent-hover: #c7653b;
  --ok: #3e8e5e;
  --avert: #c98a1b;
  --eroare: #b9473a;
  --energie: #f0b33e;
  --gaz: #4d84c4;
  --internet: #8b6ec0;
  --camp: #fbf9f4;            /* fundal casute de text */
  --bara-fundal: rgba(255,255,255,.35);  /* antetul zonei de continut */
  --sus: 44px;                /* inaltimea barei de sus */
  --progres: 15px;            /* grosimea barei de progres */
  --parcare: #57977a;
  --intretinere: #a4793f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed;
  color: var(--text); font-size: 15px;
  /* pagina e un teanc fix: bara de sus, bara de progres, aplicatia.
     Nimic nu se calculeaza in vh, deci barele de derulare ale sistemului
     nu mai pot impinge continutul in afara ecranului. */
  display: flex; flex-direction: column; overflow: hidden;
}
main { width: min(1680px, 100%); margin: 22px auto; padding: 0 24px 40px; }
.card {
  background: var(--card); border: 1px solid var(--linie); border-radius: 14px;
  padding: 18px 22px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(30,50,45,.06);
}
.card h2 { margin: 0 0 12px; font-size: 16px; color: var(--antet); }
.btn {
  display: inline-block; border: 0; border-radius: 9px; padding: 9px 16px; font-size: 14px;
  font-weight: 600; cursor: pointer; text-decoration: none; background: var(--primar); color: #fff;
}
.btn:hover { background: var(--primar-hover); }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: var(--accent-hover); }
.btn.sec { background: transparent; color: var(--primar); border: 1px solid var(--primar); }
.btn.sec:hover { background: rgba(45,122,114,.08); }
.btn.pericol { background: transparent; color: var(--eroare); border: 1px solid var(--eroare); }
.upload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.upload input[type=file] {
  flex: 1; min-width: 260px; padding: 10px; border: 2px dashed var(--linie); border-radius: 10px;
  background: var(--camp);
}
.mesaje { list-style: none; padding: 0; margin: 0 0 20px; }
.mesaje li { padding: 10px 14px; border-radius: 9px; margin-bottom: 6px; border-left: 4px solid; background: var(--card); }
.mesaje .ok { border-color: var(--ok); }
.mesaje .avertisment { border-color: var(--avert); }
.mesaje .eroare { border-color: var(--eroare); }
.filtre { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; }
.filtre label { font-size: 12px; color: var(--text-slab); display: flex; flex-direction: column; gap: 4px; }
select, input[type=text] {
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--camp);
  font-size: 14px; color: var(--text); min-width: 112px;
}
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
     color: var(--text-slab); padding: 8px 10px; border-bottom: 2px solid var(--linie); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
tr:hover td { background: rgba(45,122,114,.05); }
td.nr, th.nr { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 2px solid var(--linie); border-bottom: 0; }
.neg { color: var(--ok); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }
.badge.energie { background: var(--energie); color: #3b2a05; }
.badge.gaz { background: var(--gaz); }
.badge.internet { background: var(--internet); }
.badge.parcare { background: var(--parcare); }
.badge.intretinere { background: var(--intretinere); }
.badge.alt { background: var(--text-slab); }
.ap { font-weight: 700; color: var(--antet); }
.avert-icon { color: var(--avert); font-weight: 700; cursor: help; }
.gol { text-align: center; color: var(--text-slab); padding: 30px; }
.grid-campuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px 16px; }
.grid-campuri label { font-size: 12px; color: var(--text-slab); display: flex; flex-direction: column; gap: 4px; }
.grid-campuri input { width: 100%; max-width: none; }
/* campuri 40% / preview PDF 60% */
.detaliu { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 20px; }
.detaliu iframe { width: 100%; height: 82vh; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.actiuni { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lista-avert { margin: 0; padding-left: 18px; color: var(--avert); }
@media (max-width: 1000px) { .detaliu { grid-template-columns: 1fr; } }
a { color: var(--primar); }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
main { max-width: 1680px; }
th, td { padding: 8px 7px; }
td { font-size: 14px; }
.slab { color: var(--text-slab); font-size: 12px; }
td.furnizor { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
th, td { padding: 8px 6px; }

/* ---------- structura: meniu lateral + zona de continut ---------- */
.aplicatie { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.lateral {
  width: 232px; flex: 0 0 232px; background: linear-gradient(170deg, var(--antet), var(--antet-2));
  color: #f4efe4; display: flex; flex-direction: column; height: 100%;
  transition: width .18s ease, flex-basis .18s ease;
}
.lateral .marca { display: flex; align-items: center; gap: 12px; padding: 18px 16px; font-size: 17px; font-weight: 700; }
.lateral .logo {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--accent);
  display: grid; place-items: center; font-weight: 700; color: #fff;
}
.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; flex: 1; min-height: 0; overflow-y: auto; }
.lateral nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  color: #e7e0d2; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.lateral nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.lateral nav a.activ { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.lateral svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.steag {
  font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: 20px; margin-left: auto;
}
.lateral .comuta {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; margin: 8px; padding: 10px 12px; border: 0;
  background: rgba(0,0,0,.16); color: #e7e0d2; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap;
}
.lateral .comuta:hover { background: rgba(0,0,0,.28); color: #fff; }
.meniu-restrans .lateral { width: 68px; flex-basis: 68px; }
.meniu-restrans .lateral .marca-text,
.meniu-restrans .lateral nav a span,
.meniu-restrans .lateral .steag,
.meniu-restrans .lateral .comuta span { display: none; }
.meniu-restrans .lateral nav a, .meniu-restrans .lateral .comuta { justify-content: center; }
.meniu-restrans .lateral .comuta svg { transform: rotate(180deg); }

.zona { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zona > header {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  background: var(--bara-fundal); border-bottom: 1px solid var(--linie);
}
.zona > header h1 { font-size: 19px; margin: 0; font-weight: 600; color: var(--antet); }
.zona > header .limbi { margin-left: auto; display: flex; gap: 4px; background: rgba(31,75,71,.1); padding: 4px; border-radius: 10px; }
.zona > header .limbi a {
  padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: var(--antet); text-decoration: none; opacity: .7;
}
.zona > header .limbi a:hover { opacity: 1; background: rgba(255,255,255,.6); }
.zona > header .limbi a.activ { background: var(--accent); color: #fff; opacity: 1; }

/* ---------- paginare ---------- */
.paginare { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.paginare .pag {
  min-width: 34px; text-align: center; padding: 7px 9px; border-radius: 8px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--primar); border: 1px solid var(--linie);
}
.paginare .pag:hover { background: rgba(45,122,114,.08); }
.paginare .pag.activ { background: var(--primar); color: #fff; border-color: var(--primar); }
.paginare .pag.puncte { border: 0; color: var(--text-slab); }
.paginare .btn.inactiv { opacity: .4; pointer-events: none; }
.paginare .slab { margin-left: auto; }

/* ---------- sectiuni in lucru ---------- */
.in-lucru { text-align: center; padding: 50px 22px; }
.in-lucru .eticheta-lucru {
  display: inline-block; margin: 0 0 12px; background: var(--accent); color: #fff; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 4px 12px; border-radius: 20px;
}
.in-lucru h2 { font-size: 20px; margin: 0 0 6px; }
.in-lucru p { color: var(--text-slab); margin: 0; }

@media (max-width: 800px) {
  html, body { height: auto; }
  body { display: block; overflow: visible; }
  .aplicatie { flex-direction: column; height: auto; overflow: visible; }
  .lateral { width: 100%; flex-basis: auto; height: auto; position: static; }
  .lateral nav { flex-direction: row; overflow-x: auto; }
  .lateral .comuta { display: none; }
}

/* ---------- ajustari de spatiu cand meniul lateral ocupa din latime ---------- */
.lateral { flex-basis: 244px; width: 244px; }
.lateral nav a { overflow: hidden; }
.steag {
  font-size: 0; line-height: 0; margin-left: auto; padding: 0; background: none;
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background-color: var(--accent);
}
.lateral nav a { font-size: 14px; }
select, input[type=text] { max-width: 190px; }
main { padding: 0 20px 40px; }
.zona > main { min-width: 0; }
.card { max-width: 100%; }
table { font-size: 13px; }
th { font-size: 11px; }
td { font-size: 13px; }
th, td { padding: 7px 4px; }
td.furnizor { max-width: 100px; }

/* ---------- bara luminoasa de progres (sus de tot, 15px) ---------- */
#bara-progres {
  flex: 0 0 var(--progres); position: relative; height: var(--progres); width: 0;
  z-index: 999; opacity: 0; pointer-events: none;
  transition: width .25s ease, opacity .35s ease;
  border-radius: 0 8px 8px 0; overflow: hidden;
  background: linear-gradient(90deg,
    #2d7a72 0%, #46b3a2 14%, #7fd48a 28%, #f0c04a 42%,
    #e07a4f 56%, #d9548a 70%, #8b6ec0 84%, #2d7a72 100%);
  background-size: 300% 100%;
  animation: curcubeu 2.4s linear infinite;
  box-shadow: 0 0 14px rgba(70, 179, 162, .75), 0 0 28px rgba(224, 122, 79, .45);
}
#bara-progres.activa { opacity: 1; }
#bara-progres.gata { transition: width .2s ease, opacity .5s ease .15s; opacity: 0; }
#bara-progres span {  /* sclipirea care aluneca peste bara */
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  background-size: 180px 100%; background-repeat: repeat-x;
  animation: sclipire 1.1s linear infinite;
}
@keyframes curcubeu { from { background-position: 0 0; } to { background-position: 300% 0; } }
@keyframes sclipire { from { background-position: -180px 0; } to { background-position: 180px 0; } }
@media (prefers-reduced-motion: reduce) {
  #bara-progres, #bara-progres span { animation: none; }
}

/* ---------- zona de incarcare + lista fisierelor ---------- */
.zona-upload {
  border: 2px dashed var(--linie); border-radius: 14px; background: var(--camp);
  padding: 26px 18px; text-align: center; transition: border-color .15s, background .15s;
}
.zona-upload.peste { border-color: var(--primar); background: rgba(45,122,114,.07); }
.zona-upload svg { width: 30px; height: 30px; fill: none; stroke: var(--primar); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zona-upload p { margin: 8px 0 14px; color: var(--text-slab); font-size: 14px; }
.zona-upload label.btn { cursor: pointer; }
.upload-bara-jos { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.upload-bara-jos .slab { margin-right: auto; }

.lista-fisiere { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-fisiere .fisier {
  border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: 10px; padding: 10px 12px; background: var(--camp);
}
.fisier-cap { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fisier-cap .nume { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fisier-cap .marime { color: var(--text-slab); font-size: 12px; }
.fisier-cap .stare { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-slab); white-space: nowrap; }
.fisier .bara { height: 6px; border-radius: 4px; background: var(--linie); margin-top: 8px; overflow: hidden; }
.fisier .bara span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--primar); transition: width .15s ease; }
.fisier .mesaj { margin: 8px 0 0; font-size: 13px; color: var(--text); }
.fisier .mesaj:empty { display: none; }
.fisier.lucreaza { border-left-color: var(--primar); }
.fisier.proceseaza .bara span {
  background: repeating-linear-gradient(90deg, var(--primar) 0 12px, var(--primar-hover) 12px 24px);
  background-size: 24px 100%; animation: dungi .7s linear infinite;
}
@keyframes dungi { from { background-position: 0 0; } to { background-position: 24px 0; } }
.fisier.ok { border-left-color: var(--ok); }
.fisier.ok .bara span { background: var(--ok); }
.fisier.avertisment { border-left-color: var(--avert); }
.fisier.avertisment .bara span { background: var(--avert); }
.fisier.eroare { border-left-color: var(--eroare); }
.fisier.eroare .bara span { background: var(--eroare); width: 100%; }

/* ---------- lista incadrata in pagina (tabelul deruleaza, paginarea ramane jos) ---------- */
html, body { height: 100%; }

.zona { height: 100%; overflow: hidden; }
.zona > main { flex: 1; min-height: 0; overflow-y: auto; }
main.main-lista { display: flex; flex-direction: column; overflow: hidden; }
main.main-lista .card-filtre { flex: 0 0 auto; }
main.main-lista .card-lista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0;
}
main.main-lista .card-lista .tabel-wrap { flex: 1; min-height: 0; overflow: auto; }
main.main-lista .paginare { flex: 0 0 auto; padding-top: 12px; border-top: 1px solid var(--linie); }
/* antetul si randul de total raman vizibile cat timp derulez tabelul */
main.main-lista thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
main.main-lista tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--card); }

/* campuri de data cu calendar */
.camp-data-invelis { position: relative; display: inline-flex; align-items: center; }
input.camp-data { padding-right: 32px; }
input.camp-data.invalid { border-color: var(--eroare); outline: 1px solid var(--eroare); }
.buton-calendar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; padding: 4px; line-height: 0; color: var(--text-slab);
}
.buton-calendar:hover { color: var(--primar); }
.buton-calendar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.calendar {
  position: absolute; z-index: 1002; top: calc(100% + 6px); left: 0; width: 244px; padding: 10px;
  background: var(--card); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.calendar[hidden] { display: none; }
.calendar-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.calendar-cap strong { color: var(--antet); }
:root[data-tema="grafit"] .calendar-cap strong,
:root[data-tema="miezul-noptii"] .calendar-cap strong,
:root[data-tema="cafea"] .calendar-cap strong { color: var(--text); }
.calendar .nav {
  border: 1px solid var(--linie); background: var(--camp); color: var(--text); cursor: pointer;
  width: 26px; height: 26px; border-radius: 7px; font-size: 16px; line-height: 1;
}
.calendar .nav:hover { background: var(--primar); color: #fff; border-color: var(--primar); }
.calendar-zile { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-zile .zi-nume { font-size: 11px; text-align: center; color: var(--text-slab); padding: 4px 0; }
.calendar-zile .zi {
  border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 7px;
  padding: 6px 0; font-size: 13px; font-family: inherit;
}
.calendar-zile .zi:hover { background: rgba(127,127,127,.18); }
.calendar-zile .zi.azi { outline: 1px solid var(--accent); }
.calendar-zile .zi.aleasa { background: var(--primar); color: #fff; font-weight: 700; }
.calendar-jos { display: flex; justify-content: space-between; margin-top: 8px; }
.calendar .legatura {
  border: 0; background: none; color: var(--primar); cursor: pointer; font: 600 12px inherit;
  font-family: inherit; padding: 4px 6px; border-radius: 6px;
}
.calendar .legatura:hover { background: rgba(127,127,127,.15); }
.filtre .camp-data { width: 116px; min-width: 116px; }

/* cautare in rezultate */
.filtre .cautare { position: relative; display: flex; align-items: center; }
.filtre .cautare svg {
  position: absolute; left: 10px; width: 15px; height: 15px; pointer-events: none;
  fill: none; stroke: var(--text-slab); stroke-width: 1.8; stroke-linecap: round;
}
.filtre .cautare input {
  padding: 8px 10px 8px 31px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--camp); color: var(--text); font-size: 14px; width: 186px; max-width: 186px;
}
.filtre .cautare input:focus { outline: 2px solid var(--primar); outline-offset: -1px; }
.card-lista.cauta-in-lucru { opacity: .55; transition: opacity .12s; }

/* buton de export + salt la o anumita pagina */
.filtre .export { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.filtre .export svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paginare .salt { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-slab); }
.paginare .salt input { width: 74px; min-width: 0; text-align: center; }
.paginare .salt input[type=number] {
  padding: 7px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--camp); font-size: 14px;
}

@media (max-width: 800px) {
  .aplicatie, .zona { height: auto; overflow: visible; }
  body { display: block; overflow: visible; }
  .zona > main, main.main-lista { overflow: visible; }
  .filtre .export, .paginare .salt { margin-left: 0; }
}

/* ============ bara de sus: teme + limbi (deasupra barei de progres) ============ */
.bara-sus {
  flex: 0 0 var(--sus); position: relative; z-index: 1000;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px;
  background: linear-gradient(90deg, var(--antet), var(--antet-2));
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.buton-sus {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; cursor: pointer;
  border-radius: 8px; background: rgba(255,255,255,.12); color: #f4efe4;
  font: 600 13px/1 inherit; font-family: inherit;
}
.buton-sus:hover { background: rgba(255,255,255,.22); }
.buton-sus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bara-sus .limbi { display: flex; gap: 4px; background: rgba(0,0,0,.18); padding: 4px; border-radius: 9px; }
.bara-sus .limbi a {
  padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #f4efe4; text-decoration: none; opacity: .75;
}
.bara-sus .limbi a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.bara-sus .limbi a.activ { background: var(--accent); color: #fff; opacity: 1; }

.alege-tema { position: relative; }
.meniu-teme {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1001;
  list-style: none; margin: 0; padding: 6px; min-width: 210px;
  background: var(--card); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.meniu-teme[hidden] { display: none; }
.meniu-teme button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  background: none; cursor: pointer; border-radius: 8px; color: var(--text);
  font: 600 13px/1.2 inherit; font-family: inherit; text-align: left;
}
.meniu-teme button:hover { background: rgba(127,127,127,.12); }
.meniu-teme button[aria-current="true"] { background: rgba(127,127,127,.16); }
.meniu-teme button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--primar); }
.mostra { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; border: 1px solid rgba(0,0,0,.18); }

/* ============ temele ============ */
:root[data-tema="menta"] {
  --bg: #ddefe9; --bg-2: #cbe5dc; --antet: #14463c; --antet-2: #1f6355; --card: #f2faf7;
  --linie: #cde2da; --text: #14302a; --text-slab: #55736b; --primar: #24897a; --primar-hover: #1c6d61;
  --accent: #e28a4a; --camp: #f8fdfb; --bara-fundal: rgba(255,255,255,.4);
}
:root[data-tema="ocean"] {
  --bg: #dfe9f2; --bg-2: #cfe0ee; --antet: #17405e; --antet-2: #255d80; --card: #f3f7fb;
  --linie: #cfdbe6; --text: #16293a; --text-slab: #55697a; --primar: #2b6ea8; --primar-hover: #21567f;
  --accent: #e58a3c; --camp: #f9fbfe; --bara-fundal: rgba(255,255,255,.42);
}
:root[data-tema="padure"] {
  --bg: #e2eadf; --bg-2: #d3e0cf; --antet: #1e4025; --antet-2: #2f6138; --card: #f5f7ee;
  --linie: #d3d9c6; --text: #1e2a1f; --text-slab: #5c6b5c; --primar: #3c7a45; --primar-hover: #2e5f35;
  --accent: #d4703f; --camp: #fbfcf5; --bara-fundal: rgba(255,255,255,.4);
}
:root[data-tema="apus"] {
  --bg: #f6e6dc; --bg-2: #efd7c8; --antet: #6b2f2a; --antet-2: #95463a; --card: #fdf3ec;
  --linie: #e8d2c2; --text: #3a2320; --text-slab: #7b5a50; --primar: #c2562f; --primar-hover: #9d4426;
  --accent: #e0a13c; --camp: #fef8f3; --bara-fundal: rgba(255,255,255,.45);
}
:root[data-tema="prune"] {
  --bg: #e8e2f0; --bg-2: #dbd2e8; --antet: #3c2350; --antet-2: #55366e; --card: #f7f3fb;
  --linie: #ddd3e6; --text: #2b1f36; --text-slab: #6a5b78; --primar: #6b4c9a; --primar-hover: #573c7e;
  --accent: #d96a9b; --camp: #fcfafe; --bara-fundal: rgba(255,255,255,.45);
}
:root[data-tema="nisip"] {
  --bg: #efe7d8; --bg-2: #e5dac6; --antet: #4a3b26; --antet-2: #6b5636; --card: #fbf6ec;
  --linie: #e0d3ba; --text: #33291b; --text-slab: #6f6252; --primar: #8a6d3b; --primar-hover: #6d552d;
  --accent: #bf7f4a; --camp: #fefbf4; --bara-fundal: rgba(255,255,255,.45);
}
:root[data-tema="zmeura"] {
  --bg: #f6e3ea; --bg-2: #eed3dd; --antet: #5d1f36; --antet-2: #832f4e; --card: #fdf2f6;
  --linie: #ecd3dd; --text: #3a1f2a; --text-slab: #7c5c68; --primar: #b03a63; --primar-hover: #8e2d4f;
  --accent: #e0894f; --camp: #fef8fa; --bara-fundal: rgba(255,255,255,.45);
}
:root[data-tema="grafit"] {
  --bg: #23262a; --bg-2: #1a1d20; --antet: #101315; --antet-2: #22282b; --card: #2c3034;
  --linie: #3d4348; --text: #e8eaec; --text-slab: #9aa3aa; --primar: #4d9a8f; --primar-hover: #3f8178;
  --accent: #e0784f; --camp: #23282c; --bara-fundal: rgba(255,255,255,.05);
  --ok: #58b07a; --avert: #d9a441; --eroare: #d4685c;
}
:root[data-tema="miezul-noptii"] {
  --bg: #182337; --bg-2: #111a29; --antet: #0c1524; --antet-2: #1b2a44; --card: #1f2c42;
  --linie: #32415c; --text: #e6ecf5; --text-slab: #98a6bd; --primar: #4a86c8; --primar-hover: #3a6ea8;
  --accent: #e8a33e; --camp: #1a2638; --bara-fundal: rgba(255,255,255,.05);
  --ok: #58b07a; --avert: #d9a441; --eroare: #d4685c;
}
:root[data-tema="cafea"] {
  --bg: #2a211c; --bg-2: #201915; --antet: #17110d; --antet-2: #2e2219; --card: #332822;
  --linie: #4a3a30; --text: #f0e7dd; --text-slab: #b0a094; --primar: #a9754a; --primar-hover: #8b5e3a;
  --accent: #d9a05b; --camp: #2b211b; --bara-fundal: rgba(255,255,255,.05);
  --ok: #6fae72; --avert: #d9a441; --eroare: #cf6d5f;
}

/* mostrele de culoare din dropdown */
.mostra-salvie { background: linear-gradient(135deg, #1f4b47 50%, #df7a4e 50%); }
.mostra-menta { background: linear-gradient(135deg, #14463c 50%, #e28a4a 50%); }
.mostra-ocean { background: linear-gradient(135deg, #17405e 50%, #e58a3c 50%); }
.mostra-padure { background: linear-gradient(135deg, #1e4025 50%, #d4703f 50%); }
.mostra-apus { background: linear-gradient(135deg, #6b2f2a 50%, #e0a13c 50%); }
.mostra-prune { background: linear-gradient(135deg, #3c2350 50%, #d96a9b 50%); }
.mostra-nisip { background: linear-gradient(135deg, #4a3b26 50%, #bf7f4a 50%); }
.mostra-zmeura { background: linear-gradient(135deg, #5d1f36 50%, #e0894f 50%); }
.mostra-grafit { background: linear-gradient(135deg, #101315 50%, #4d9a8f 50%); }
.mostra-miezul-noptii { background: linear-gradient(135deg, #0c1524 50%, #4a86c8 50%); }
.mostra-cafea { background: linear-gradient(135deg, #17110d 50%, #d9a05b 50%); }

/* pe temele inchise, elementele care erau gandite pe fundal deschis */
:root[data-tema="grafit"] .zona > header h1,
:root[data-tema="miezul-noptii"] .zona > header h1,
:root[data-tema="cafea"] .zona > header h1 { color: var(--text); }
:root[data-tema="grafit"] .ap, :root[data-tema="miezul-noptii"] .ap, :root[data-tema="cafea"] .ap { color: var(--primar); }
:root[data-tema="grafit"] .card h2, :root[data-tema="miezul-noptii"] .card h2, :root[data-tema="cafea"] .card h2 { color: var(--text); }
:root[data-tema="grafit"] .badge.energie, :root[data-tema="miezul-noptii"] .badge.energie, :root[data-tema="cafea"] .badge.energie { color: #2b1f05; }

/* extrase bancare: zona de incarcare mai joasa, ca sa incapa si lista */
.zona-upload.mica { padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; }
.zona-upload.mica p { margin: 0; flex: 1; }
.zona-upload.mica svg { flex: 0 0 24px; width: 24px; height: 24px; }
td.detalii { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }


/* ---------- grup expandabil in meniu (Nomenclatoare) ---------- */
.grup-meniu { display: flex; flex-direction: column; gap: 2px; }
.lateral .grup-titlu {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 0;
  background: none; color: #e7e0d2; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer; text-align: left; width: 100%; overflow: hidden;
}
.lateral .grup-titlu:hover { background: rgba(255,255,255,.09); color: #fff; }
.lateral .grup-titlu.activ-grup { color: #fff; }
.lateral .grup-titlu .sageata { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; transition: transform .15s; }
.grup-meniu.deschis .grup-titlu .sageata { transform: rotate(180deg); }
.grup-meniu .submeniu { display: none; flex-direction: column; gap: 2px; }
.grup-meniu.deschis .submeniu { display: flex; }
.lateral nav .submeniu a { padding: 8px 12px 8px 22px; font-size: 13px; font-weight: 500; }
.lateral nav .submeniu a svg { width: 18px; height: 18px; flex-basis: 18px; }
.meniu-restrans .lateral .grup-titlu span,
.meniu-restrans .lateral .grup-titlu .sageata { display: none; }
.meniu-restrans .lateral .grup-titlu { justify-content: center; }
.meniu-restrans .lateral nav .submeniu a { padding: 9px 12px; background: rgba(0,0,0,.12); }
.meniu-restrans .lateral nav .submeniu a.activ { background: rgba(255,255,255,.16); }
@media (max-width: 800px) {
  .grup-meniu, .grup-meniu.deschis .submeniu { flex-direction: row; }
  .lateral nav .submeniu a { padding: 11px 12px; }
}

/* ---------- nomenclatoare ---------- */
.cap-nomenclator { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cap-nomenclator h2 { margin: 0; }
.cap-nomenclator .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cap-nomenclator .btn svg, .buton-icon svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.actiuni-rand { width: 1%; text-align: right; }
.buton-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  color: var(--primar); border: 1px solid var(--linie);
}
.buton-icon:hover { background: var(--primar); border-color: var(--primar); color: #fff; }
.ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-nomenclator { max-width: 980px; }
.form-nomenclator label.lat { grid-column: 1 / -1; }
.form-nomenclator select, .form-nomenclator input, .form-nomenclator textarea { width: 100%; max-width: none; }
.form-nomenclator input[type=email], .form-nomenclator input[type=tel], textarea {
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--camp);
  font-size: 14px; color: var(--text); font-family: inherit;
}
textarea { resize: vertical; min-height: 64px; }
.obligatoriu { color: var(--eroare); font-weight: 700; }
/* butonul de editare ramane vizibil cand tabelul deruleaza pe orizontala */
.tabel-nomenclator .actiuni-rand { position: sticky; right: 0; background: var(--card); box-shadow: -8px 0 8px -8px rgba(0,0,0,.15); }
main.main-lista .tabel-nomenclator thead th.actiuni-rand { z-index: 3; }

/* ---------- taburi in formular (Nomenclatoare · Chiriasi) ---------- */
.taburi { display: flex; gap: 4px; border-bottom: 2px solid var(--linie); margin: 4px 0 18px; }
.taburi .tab {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-slab);
  padding: 9px 16px; margin-bottom: -2px; border-bottom: 2px solid transparent; cursor: pointer;
  border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 7px;
}
.taburi .tab:hover { color: var(--primar); background: rgba(45,122,114,.06); }
.taburi .tab.activ { color: var(--primar); border-bottom-color: var(--accent); }
.numar-tab {
  background: var(--primar); color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px;
  padding: 1px 7px; line-height: 16px;
}
.form-nomenclator label.bifa {
  flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.form-nomenclator label.bifa input { width: 18px; height: 18px; accent-color: var(--primar); margin: 0; }
#panou-documente .zona-upload { margin-bottom: 16px; }
.tabel-documente td { white-space: normal; }
.link-document { display: inline-flex; align-items: center; gap: 10px; }
.eticheta-ext {
  display: inline-block; min-width: 42px; text-align: center; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 3px 6px; border-radius: 6px;
  background: var(--text-slab); color: #fff;
}
.eticheta-ext.ext-pdf { background: var(--eroare); }
.eticheta-ext.ext-jpg, .eticheta-ext.ext-jpeg, .eticheta-ext.ext-png, .eticheta-ext.ext-heic,
.eticheta-ext.ext-gif, .eticheta-ext.ext-webp { background: var(--internet); }
.eticheta-ext.ext-doc, .eticheta-ext.ext-docx, .eticheta-ext.ext-odt, .eticheta-ext.ext-rtf { background: var(--gaz); }
.eticheta-ext.ext-xls, .eticheta-ext.ext-xlsx, .eticheta-ext.ext-ods, .eticheta-ext.ext-csv { background: var(--ok); }
.slab { color: var(--text-slab); }
/* starea Activ / Inactiv in lista */
.stare-activ, .stare-inactiv { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.stare-activ { background: rgba(62,142,94,.15); color: var(--ok); }
.stare-inactiv { background: rgba(94,107,103,.15); color: var(--text-slab); }
tr.rand-inactiv td { opacity: .6; }
tr.rand-inactiv td.actiuni-rand { opacity: 1; }

/* butonul de stergere a unui document */
button.buton-icon { background: none; cursor: pointer; padding: 0; font: inherit; }
.buton-icon.pericol { color: var(--eroare); }
.buton-icon.pericol:hover { background: var(--eroare); border-color: var(--eroare); color: #fff; }
.tabel-documente .actiuni-rand form { margin: 0; }

/* alocarea apartamentului si a locurilor de parcare (Chiriasi · Detalii) */
fieldset.alocare { border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px 16px; margin: 18px 0 0; }
fieldset.alocare legend { font-size: 13px; font-weight: 700; color: var(--antet); padding: 0 6px; }
.alocare-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 16px 24px; align-items: start; }
.alocare-grid > label, .alocare-parcari { font-size: 12px; color: var(--text-slab); display: flex; flex-direction: column; gap: 6px; }
.grup-parcari { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.grup-parcari b { font-size: 12px; color: var(--text); min-width: 74px; }
label.bifa-parcare {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--camp); font-size: 13px; color: var(--text); cursor: pointer;
}
label.bifa-parcare:has(input:checked) { border-color: var(--primar); background: rgba(45,122,114,.1); }
label.bifa-parcare input { width: 16px; height: 16px; accent-color: var(--primar); margin: 0; }
@media (max-width: 800px) { .alocare-grid { grid-template-columns: 1fr; } }

/* ---------- Inchidere / Plati facturi: doua panouri ---------- */
main.main-inchidere .card-filtre .filtre { align-items: center; }
main.main-inchidere .explicatie { flex: 1; min-width: 260px; margin: 0; font-size: 13px; }
.nota-avert { margin: 10px 0 0; padding: 8px 12px; border-left: 4px solid var(--avert); background: rgba(201,138,27,.08); border-radius: 8px; font-size: 13px; }
form.imperechere { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.panouri { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.panou { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.panou-corp { flex: 1; min-height: 0; overflow: auto; }
.grup-cap {
  position: sticky; top: 0; z-index: 2; background: var(--card); padding: 8px 4px 6px;
  font-weight: 700; color: var(--antet); border-bottom: 2px solid var(--linie); font-size: 14px;
}
.tabel-imp { margin-bottom: 10px; }
.tabel-imp td { white-space: normal; vertical-align: top; cursor: pointer; }
.tabel-imp td.bifa-col { width: 28px; }
.tabel-imp td.bifa-col input { width: 17px; height: 17px; accent-color: var(--primar); margin: 2px 0 0; cursor: pointer; }
.tabel-imp tr.ales td { background: rgba(45,122,114,.12); }
.tabel-imp td.detalii { max-width: 220px; }
.tabel-imp small { font-size: 12px; }
.bara-imperechere {
  margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px;
  border-top: 3px solid var(--accent);
}
.totaluri-imp { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.bara-imperechere input[type=text] { flex: 1; min-width: 220px; max-width: none; }
.dif-zero { color: var(--ok); }
.dif-minus { color: var(--eroare); }
.dif-plus { color: var(--avert); }
.marcaj-inchis {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; cursor: help; margin-left: 4px;
}
.tabel-istoric td { white-space: normal; vertical-align: top; }
@media (max-width: 1000px) { .panouri { grid-template-columns: 1fr; } }

/* filtrele de perioada din Inchidere / Plati facturi */
.filtre-inchidere { align-items: end; }
.filtre-inchidere fieldset.perioada {
  display: flex; gap: 8px; align-items: end; border: 1px solid var(--linie); border-radius: 10px;
  padding: 2px 10px 8px; margin: 0;
}
.filtre-inchidere fieldset.perioada legend { font-size: 11px; font-weight: 700; color: var(--antet); padding: 0 4px; text-transform: uppercase; letter-spacing: .4px; }
.filtre-inchidere fieldset.perioada label { font-size: 12px; color: var(--text-slab); display: flex; flex-direction: column; gap: 4px; }
.filtre-inchidere fieldset.perioada input { width: 132px; min-width: 0; }
.filtre-inchidere .istoric-link { margin-left: auto; }
.perioade-rapide { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.perioade-rapide .cip {
  padding: 4px 11px; border-radius: 20px; border: 1px solid var(--linie); text-decoration: none;
  color: var(--primar); font-weight: 600; font-size: 12.5px; background: var(--camp);
}
.perioade-rapide .cip:hover { border-color: var(--primar); }
.perioade-rapide .cip.activ { background: var(--primar); color: #fff; border-color: var(--primar); }
.perioade-rapide .explicatie { margin-left: auto; max-width: 560px; font-size: 12px; }
/* pe ecrane joase panourile pastreaza o inaltime minima, iar pagina deruleaza */
main.main-lista.main-inchidere { overflow-y: auto; }
main.main-inchidere .panouri { min-height: 320px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Refacturare ---------- */
main.main-refacturare .card-filtre .zona-upload { margin-bottom: 0; }
main.main-refacturare .card-filtre .lista-fisiere { max-height: 180px; overflow: auto; }
main.main-refacturare .card-filtre form.filtre { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.tabel-refacturare td { white-space: nowrap; }
.eticheta-tip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; background: var(--text-slab); }
.eticheta-tip.tip-chirie { background: var(--primar); }
.eticheta-tip.tip-administrare { background: var(--intretinere); }
.eticheta-tip.tip-garantie { background: var(--internet); }
.subgrup-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-slab); padding: 8px 4px 2px; }
/* lista de refacturare (incarcarea are pagina ei): filtrele fara separator deasupra */
main.main-refacturare .card-filtre form.filtre { margin-top: 0; padding-top: 0; border-top: 0; }
/* textele lungi din submeniuri trec pe doua randuri, in loc sa fie taiate */
.lateral nav .submeniu a span { white-space: normal; line-height: 1.25; }
/* grupurile din meniu se deschid / inchid lin (acordeon) */
.grup-meniu .submeniu {
  display: flex; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
.grup-meniu.deschis .submeniu {
  max-height: 420px; opacity: 1; visibility: visible;
  transition: max-height .3s ease, opacity .25s ease, visibility 0s;
}

/* ---------- autentificare ---------- */
body.pagina-auth { display: grid; place-items: center; overflow: auto; min-height: 100%; padding: 24px 16px; }
.cutie-auth { width: min(400px, 100%); margin: 0; padding: 0; }
.marca-auth { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px; font-size: 20px; font-weight: 700; color: var(--antet); }
.marca-auth .logo { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.cutie-auth form.card { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; }
.cutie-auth h1 { font-size: 20px; margin: 0; color: var(--antet); }
.cutie-auth p { margin: 0; font-size: 13px; }
.cutie-auth label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-slab); }
.cutie-auth input { width: 100%; max-width: none; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--camp); font-size: 15px; color: var(--text); }
.cutie-auth .btn { padding: 11px 16px; font-size: 15px; margin-top: 4px; }
.cutie-auth .mesaje { margin: 0; }
.limbi-auth { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.limbi-auth a { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--text-slab); padding: 4px 8px; border-radius: 6px; }
.limbi-auth a.activ { background: var(--accent); color: #fff; }
.cont-sus { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; }
.cont-sus form { margin: 0; }
.cont-sus a.buton-sus { text-decoration: none; }
.cont-sus .buton-sus { display: inline-flex; align-items: center; gap: 6px; }
.cont-sus .buton-sus svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-ingust { max-width: 760px; }
/* matricea de drepturi */
fieldset.drepturi .admin-bifa { margin-bottom: 12px; font-size: 14px; color: var(--text); }
.drepturi-rapid { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.drepturi-rapid .cip { cursor: pointer; font-family: inherit; }
.tabel-drepturi { width: auto; min-width: 520px; }
.tabel-drepturi th:not(:first-child), .tabel-drepturi td:not(:first-child) { text-align: center; width: 110px; }
.tabel-drepturi td:first-child { padding-left: 18px; }
.tabel-drepturi tr.rand-grup td { padding-left: 4px; font-weight: 700; color: var(--antet); background: rgba(45,122,114,.06); }
.tabel-drepturi input[type=radio] { width: 17px; height: 17px; accent-color: var(--primar); }
#matrice-drepturi.dezactivat { opacity: .4; pointer-events: none; }
.mic { font-size: 12px; margin: 8px 0 0; }
.drepturi-rapid .cip {
  padding: 4px 11px; border-radius: 20px; border: 1px solid var(--linie); color: var(--primar);
  font-weight: 600; font-size: 12.5px; background: var(--camp);
}
.drepturi-rapid .cip:hover { border-color: var(--primar); }

input[type=password], .form-nomenclator input[type=password] {
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--camp);
  font-size: 14px; color: var(--text); font-family: inherit;
}