/* STT - stylesheet. Theme system: body.theme-* classes redefine the same set
   of CSS variables (--bg/--panel/--border/--text/--muted/--accent/...), used
   unchanged everywhere else. Default (no class / :root) = theme-dark-green. */
:root {
  --bg: #101922;
  --panel: #182430;
  --panel-2: #1f2e3b;
  --border: #2c3e4c;
  --text: #eaf0f4;
  --muted: #8ca0ac;
  --accent: #4caf7d;
  --accent-text: #08150f;
  --blue: #4a90d9;
  --green: #4caf7d;
  --red: #e5534b;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --disp: 'Oswald', sans-serif;
}

/* Theme 1 (default): dark, green accent. Same neutrals as the old dark-orange. */
body.theme-dark-green {
  --bg: #101922;
  --panel: #182430;
  --panel-2: #1f2e3b;
  --border: #2c3e4c;
  --text: #eaf0f4;
  --muted: #8ca0ac;
  --accent: #4caf7d;
  --accent-text: #08150f;
  --blue: #4a90d9;
  --green: #6fcf9c;
  --red: #e5534b;
}

/* Theme 2: light, blue accent (unchanged, kept as-is per spec). */
body.theme-light-blue {
  --bg: #f2f6fa;
  --panel: #ffffff;
  --panel-2: #edf3f8;
  --border: #d1dde6;
  --text: #12222f;
  --muted: #4f6879;
  --accent: #1f7ae0;
  --accent-text: #ffffff;
  --blue: #1f7ae0;
  --green: #2e9e6b;
  --red: #d5453d;
}

/* Theme 3: dark, cyan accent. Same neutrals as the old dark-orange. */
body.theme-dark-cyan {
  --bg: #101922;
  --panel: #182430;
  --panel-2: #1f2e3b;
  --border: #2c3e4c;
  --text: #eaf0f4;
  --muted: #8ca0ac;
  --accent: #3fb8d6;
  --accent-text: #051619;
  --blue: #4a90d9;
  --green: #4caf7d;
  --red: #e5534b;
}

/* Theme 4: dark, coral accent. Same neutrals as the old dark-orange. */
body.theme-dark-coral {
  --bg: #101922;
  --panel: #182430;
  --panel-2: #1f2e3b;
  --border: #2c3e4c;
  --text: #eaf0f4;
  --muted: #8ca0ac;
  --accent: #e5534b;
  --accent-text: #ffffff;
  --blue: #4a90d9;
  --green: #4caf7d;
  --red: #ff7a70;
}

/* Theme 5: light, green accent. Same neutrals as the old light-orange. */
body.theme-light-green {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #eef1f4;
  --border: #d6dde2;
  --text: #16222b;
  --muted: #5c6b74;
  --accent: #4caf7d;
  --accent-text: #ffffff;
  --blue: #2e6da4;
  --green: #2f8a5b;
  --red: #d5453d;
}

/* Theme 6: light, cyan accent. Same neutrals as the old light-orange. */
body.theme-light-cyan {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #eef1f4;
  --border: #d6dde2;
  --text: #16222b;
  --muted: #5c6b74;
  --accent: #3fb8d6;
  --accent-text: #052226;
  --blue: #2e6da4;
  --green: #3f9d6b;
  --red: #d5453d;
}

/* Theme 7 - "C01 Gri-albastru rece": neutral office look, one cool blue used
   for the active cell and the primary button. Chosen from the UI direction
   review together with C03. */
body.theme-gri-albastru {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #eaeff3;
  --border: #d6dde3;
  --text: #16212b;
  --muted: #6b7a88;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --blue: #2f6fed;
  --green: #0f6e56;
  --red: #c0392b;
}

/* Theme 8 (default) - "C03 Alb curat, doar linii": no coloured fills at all.
   Structure comes from rule weight and bold text, which keeps very dense
   tables readable and prints cleanly. The extra rules under
   `body.theme-alb-linii` further down remove panel fills and thicken the
   separating rules; without them this would just be a pale theme. */
body.theme-alb-linii {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f2f2f2;
  --border: #c9c9c9;
  --border-strong: #111111;
  --text: #111111;
  --muted: #5a5a5a;
  --accent: #0033cc;
  --accent-text: #ffffff;
  --blue: #0033cc;
  --green: #00522e;
  --red: #a01818;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}

#app { max-width: min(1800px, 96vw); margin: 0 auto; padding: 14px clamp(20px, 3vw, 48px) 60px; }

/* Antetul, pe UN rând.
   Erau cinci etaje până la primul rând de date: numele firmei, blocul cu
   ceasul, rândul cu clopoțelul și tema, bara de file, apoi „Adaugă rapid" cu
   căutarea - 353 px pe un ecran de 918. Numele, data, ceasurile și colțul din
   dreapta încap pe aceeași linie; ce dispare e aerul dintre ele, nu
   informația. */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hero h1 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .4px;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero p { color: var(--muted); margin: 0; font-size: 13px; }

/* Colțul din dreapta sus al hero-ului: selectorul de temă, iar sub el linkul
   de Logout (injectat din auth.js). */
/* Tema și Logout una lângă alta, nu una sub alta: pe verticală adăugau un
   etaj întreg antetului. */
.hero-right {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  margin-left: auto;
}
/* Butoanele din coltul din dreapta sus. Stilul sta aici, nu pe `style=` in
   HTML: pe telefon trebuie stranse (gap mai mic), iar un stil scris in atribut
   nu poate fi schimbat dintr-un `@media`. */
.hero-controls { display: flex; align-items: center; gap: 8px; }

/* Titlurile de sectiune din meniul „...” (Tema, Cont). */
.antet-meniu-titlu {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px;
  font-size: 10px; color: var(--muted); padding: 8px 12px 3px;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.antet-meniu { max-height: 80vh; overflow-y: auto; }

.theme-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--sans);
}
.theme-select:hover, .theme-select:focus { border-color: var(--accent); outline: none; }

/* Small red counter pastille shown on tab buttons (e.g. overdue deadlines). */
.tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Toolbar controls for list sorting (Proiecte / Echipe). */
.list-sort-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.list-sort-controls select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 6px 8px; font-size: 12px; font-family: var(--sans);
}
.list-sort-controls select:focus { outline: none; border-color: var(--accent); }

/* Sticky/z-index stau pe CONTAINER, nu pe lista de tab-uri: derularea
   laterală a tab-urilor pe telefon (overflow-x) taie orice element poziționat
   absolut din interiorul ei, iar meniul "+ Adaugă rapid" era exact asta - se
   vedea doar primul rând din el. Acum meniul e în afara zonei care derulează. */
.tabs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  padding: 4px 0;
  margin-bottom: 14px;
  transition: padding .12s ease, box-shadow .12s ease;
}

/* Cât timp citești un tabel lung, rama nu mai are de ce să ocupe cât la
   început: bara lipită de sus se strânge, iar sub ea rămâne o linie care arată
   că plutește peste conținut. Antetul (siglă, ceasuri, temă) iese oricum din
   ecran la derulare - aici se câștigă restul. Se pornește abia după 80px, ca
   să nu tresară la cea mai mică mișcare. */
body.is-scrolled .tabs-bar {
  padding: 1px 0;
  box-shadow: 0 1px 0 var(--border), 0 6px 12px -10px rgba(0, 0, 0, .5);
}
body.is-scrolled .tab { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
body.is-scrolled .tabs-bar .tab-home svg { width: 15px; height: 15px; }
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.tab {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 14px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tab.active { color: var(--accent-text); background: var(--accent); }
.tab:hover:not(.active) { color: var(--text); background: var(--panel-2); }
/* Acasă e doar pictograma: e prima filă și e universal recunoscută, iar un
   cuvânt lângă ea ar fi singurul din bară care nu numește un modul. Casa e
   desenată mai mare decât înălțimea literelor vecine pentru că o formă plină
   are nevoie de mai mult loc ca să pară la fel de „grea” ca un cuvânt scris
   cu majuscule. */
.tab-home { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; }
.tab-home svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.tab-home .tab-badge { position: static; }

/* Quick Add + global search: pushed to the right end of the .tabs row. */
.tabs-right {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; flex-wrap: wrap;
}
.quick-add-wrap { position: relative; }
.quick-add-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
.quick-add-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--border);
  min-width: 160px; z-index: 60; display: flex; flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.quick-add-menu.collapsed { display: none; }
.quick-add-menu button {
  background: none; border: none; color: var(--text); text-align: left;
  padding: 9px 12px; font-size: 13px; font-family: var(--sans); cursor: pointer;
}
.quick-add-menu button:hover { background: var(--panel-2); color: var(--accent); }

/* Căutarea: goală, cu o lupă mică, discretă. Textul lung din placeholder
   („Caută proiecte, echipe, angajați...") cerea o casetă lată, care pe telefon
   mânca un rând întreg - iar odată ce știi la ce folosește caseta, textul nu-ți
   mai spune nimic. Se lățește singură când scrii în ea. */
.global-search-wrap { position: relative; display: flex; align-items: center; }
.global-search-wrap::before {
  content: "🔍";
  position: absolute; left: 8px; font-size: 11px; opacity: .5;
  pointer-events: none;
}
.global-search-wrap input {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px 7px 26px; font-family: var(--sans); font-size: 12px;
  width: 148px; border-radius: 6px;
  transition: width .15s ease, background-color .15s ease, border-color .15s ease;
}
.global-search-wrap input:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg); width: 230px;
}
.global-search-results {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--border);
  min-width: 300px; max-width: 430px; width: max-content; max-height: min(70vh, 520px); overflow-y: auto;
  z-index: 60; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.global-search-results.collapsed { display: none; }
.global-search-group-title {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px;
  font-size: 10px; color: var(--muted); padding: 8px 10px 4px;
}
/* Un rand de rezultat: eticheta tipului, numele, iar dedesubt ce-l deosebeste
   (rolul si echipa unui om, numarul lucrarii, soferul masinii). Fara ele,
   trei randuri cu acelasi nume nu se puteau deosebi intre ele. */
.global-search-item {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline;
  padding: 7px 10px; font-size: 13px; cursor: pointer; color: var(--text);
  border-top: 1px solid transparent;
}
.global-search-item:hover,
.global-search-item.is-active { background: var(--panel-2); }
.global-search-item.is-active { border-top-color: var(--accent); }
.gs-chip {
  grid-row: 1; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 1px 6px; white-space: nowrap;
}
.gs-label { grid-row: 1; font-weight: 600; overflow-wrap: anywhere; }
.global-search-item:hover .gs-label { color: var(--accent); }
.gs-sub, .gs-why {
  grid-column: 2; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere;
}
.gs-why { font-style: italic; }
/* Chipsurile de tip, deasupra rezultatelor: „Toate 11 · Angajați 1 · Lucrări 6". */
.gs-filters {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--panel); z-index: 1;
}
.gs-filter {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
.gs-filter:hover { color: var(--text); }
.gs-filter.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.global-search-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); text-align: center; }

.panel { display: none; }
.panel.active { display: block; }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar h2 {
  font-family: var(--disp);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}

button.primary {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .2px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
button.primary:hover { filter: brightness(1.1); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
button.primary:active { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
button.ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--sans);
}
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
button.ghost.danger { color: var(--red); border-color: var(--red); }
button.ghost.danger:hover { filter: brightness(1.15); }
button.small {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--sans);
}
button.small:hover { color: var(--text); border-color: var(--text); }
button.small.danger:hover { color: var(--red); border-color: var(--red); }

/* Cap de coloană pe care se poate apăsa ca să sorteze. Se vede că e apăsabil
   înainte de a-l apăsa - altfel nimeni n-ar ghici că tabelul se sortează. */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--accent); }
.sortable-th.sorted { color: var(--accent); }

/* Butonul „Înapoi", peste tot la fel.

   Era un link mic, subliniat, în culoarea textului șters - se pierdea în
   pagină exact în momentul în care omul îl caută. Acum are aceeași greutate
   ca celelalte butoane, cu o săgeată care spune singură ce face. Se pune și
   pe <a>, ca ieșirea dintr-o pagină să rămână un link adevărat (deschis în
   filă nouă, cu clic pe rotiță). */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 15px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.back-btn::before { content: "←"; font-size: 15px; line-height: 1; }
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Same look as button.small, for the "Editează" link in the Proiecte list
   (a real link so ctrl/middle-click-to-new-tab still works). */
a.small-link-btn {
  display: inline-block; background: none; border: 1px solid var(--border);
  color: var(--muted); padding: 4px 9px; font-size: 11px; font-family: var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
a.small-link-btn:hover { color: var(--accent); border-color: var(--accent); }

table { width: 100%; border-collapse: collapse; background: var(--panel); }
th {
  text-align: left;
  font-family: var(--disp);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }

/* Rânduri strânse: același text, fără aerul de deasupra și dedesubt. La 45 de
   proiecte înseamnă opt rânduri în plus pe ecran. Se aprinde din butonul de
   lângă selectorul de temă și se ține minte în browserul fiecăruia — ține de
   ochiul omului, nu de firmă. */
body.dense td { padding: 3px 10px; }
body.dense th { padding: 4px 10px; }
body.dense .note-row { padding-top: 2px; padding-bottom: 2px; }
body.dense .notif-row { padding-top: 3px; padding-bottom: 3px; }
.density-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  font-size: 14px; line-height: 1; padding: 8px 10px; cursor: pointer;
}
.density-btn:hover { color: var(--text); }
.density-btn.active { color: var(--accent); border-color: var(--accent); }
tr:hover td { background: var(--panel-2); }
/* Rândul care duce undeva arată că duce undeva. */
tbody tr:has(a.row-link) { cursor: pointer; }
/* Mesajul cu „Anulează": stă lângă text, nu sub el, ca să se apese fără
   să cauți. Dispare singur după zece secunde. */
#sttUndoToast { display: flex; align-items: center; gap: 14px; }
.undo-btn {
  background: none; border: 0; color: inherit; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0;
}
.undo-btn:disabled { opacity: .6; cursor: default; }

/* Numărul de rezultate al grupului: fără el, „am găsit" și „mai sunt încă
   unsprezece" arată la fel. */
.global-search-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.global-search-count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px;
}
.global-search-more { padding: 4px 12px 8px; font-size: 11px; color: var(--muted); font-style: italic; }

/* ---------- Tabel lat, cu prima coloană fixă ----------
   Tabelul de cazări are 14 coloane și iese din ecran chiar și la 1440 px. Cât
   timp iese, măcar să știi la ce rând te uiți: prima coloană stă lipită în
   stânga, restul alunecă pe sub ea.

   `position: sticky` are nevoie de un părinte care derulează (nu `overflow:
   hidden` pe drum) și de un fundal opac pe celulă — altfel textul de dedesubt
   se vede prin ea. */
.table-scroll-frozen { overflow-x: auto; }
.table-frozen-first td.col-frozen,
.table-frozen-first th.col-frozen {
  position: sticky; left: 0; z-index: 2;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--border);
}
.table-frozen-first tr:hover td.col-frozen { background: var(--panel-2); }
.table-frozen-first td.nowrap, .table-frozen-first th.nowrap { white-space: nowrap; }
.stay-table-tools { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 6px; }
.table-hidden-note { margin: 6px 0 0; }
.columns-menu-head {
  padding: 7px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border);
}

/* Pe telefon, cazările rămân TABEL, nu cartonașe: se derulează lateral, cu
   numele fix în stânga. Cerut explicit - un cartonaș pe cazare cerea un ecran
   întreg de derulat pentru un singur rând. */
@media (max-width: 720px) {
  .table-frozen-first { display: table; }
  .table-frozen-first thead { display: table-header-group; }
  .table-frozen-first tr { display: table-row; }
  .table-frozen-first td, .table-frozen-first th { display: table-cell; }
  .table-frozen-first td::before { content: none; }
  .table-frozen-first td.col-frozen { max-width: 130px; min-width: 110px; }
  .table-frozen-first td, .table-frozen-first th { font-size: 11.5px; padding: 4px 6px; }
  /* Coloanele își iau lățimea de care au nevoie și tabelul se derulează, în
     loc să se îndese în lățimea telefonului: îndesat, „14/09/2026" se rupe pe
     trei rânduri și rândul devine mai înalt decât un cartonaș. */
  .table-frozen-first { width: max-content; min-width: 100%; }
  .table-frozen-first td, .table-frozen-first th { white-space: nowrap; }
  .table-frozen-first td.cell-title { white-space: normal; }
}

/* ---------- Bara de modul: titlu + actiuni + filtre pe UN rand ----------
   (varianta A, aleasa pentru calculator)

   Cele trei randuri de sub bara de file - titlu, actiuni, filtre - se aseaza pe
   orizontala. Pe monitor lipsa de spatiu e pe verticala; lateral era loc
   nefolosit. Nu se ascunde nimic: tot ce era la vedere ramane la vedere.

   `position: sticky` (varianta D): bara ramane pe ecran cat derulezi lista, ca
   sa nu urci in varf pentru un filtru sau pentru butonul de adaugare. Antetul
   cu ceasul pleaca - nu e nevoie de el in timpul lucrului. */
.module-header {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 18;
  background: var(--bg); padding: 4px 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* `display: contents` scoate cutiile intermediare din calcul, ca toate
   controalele - titlu, butoane, selectoare - sa devina copii directi ai barei
   si sa curga pe aceeasi linie. Ca elemente separate, fiecare rand ar fi fost
   un bloc care se muta intreg pe randul urmator. */
.module-header > .toolbar,
.module-header > .filter-bar-row { display: contents; }
/* Separatorul dintre actiuni si filtre: fara el, butoanele si selectoarele
   arata ca un singur sir de controale fara inteles. */
.module-sep {
  width: 1px; align-self: stretch; min-height: 20px;
  background: var(--border); margin: 0 2px; flex: 0 0 1px;
}

/* ---------- Capul de modul ----------
   Butonul „Filtre" si pastilele cu filtrele puse. Pe calculator butonul e
   ascuns (filtrele se vad oricum, e loc); pe telefon el e singurul care le
   arata. Pastilele se vad PE AMANDOUA: „ce filtre sunt puse" e o intrebare la
   fel de valabila pe monitor, iar acum o lista filtrata arata identic cu una
   goala. */
.module-filters-toggle {
  display: none; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
}
.module-filters-toggle.has-filters { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.module-filters-toggle.is-open { background: var(--panel-2); }
.module-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.module-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
}
.module-chip:hover { background: var(--panel-2); }

/* Titlul care strange sectiunea de sub el. Sageata sta in fata numelui, ca la
   celelalte capete pliabile din program (istoricul notitelor, "In ofertare"). */
.section-title.collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; }
.section-title.collapsible:hover { color: var(--accent); }
.collapse-arrow { color: var(--muted); font-size: 11px; line-height: 1; }
.section-title.is-collapsed { opacity: .8; }
.section-count { font-weight: 400; color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }

/* ---------- Evidenta certificatelor A1 ----------
   Trei cifre sus (fara certificat / expirate / expira curand) si o insigna pe
   fiecare rand. Culoarea urmeaza aceeasi regula ca in tot programul: rosu doar
   pentru ce e deja depasit sau lipseste cu totul, portocaliu pentru ce se
   intampla in 30 de zile, verde pentru ce e in regula. */
.a1-stat {
  font-size: 12px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--muted);
}
.a1-stat b { color: var(--text); font-family: var(--mono); }
.a1-stat.bad { border-color: var(--red); color: var(--red); }
.a1-stat.bad b { color: var(--red); }
.a1-stat.warn { border-color: #b8741a; color: #b8741a; }
.a1-stat.warn b { color: #b8741a; }
.a1-badge {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
  white-space: nowrap; border: 1px solid;
}
.a1-badge.ok { color: #2e7d55; border-color: #2e7d55; background: rgba(46,125,85,.10); }
.a1-badge.warn { color: #b8741a; border-color: #b8741a; background: rgba(184,116,26,.12); }
.a1-badge.bad { color: var(--red); border-color: var(--red); background: rgba(192,57,43,.10); }

/* Lista de la incarcare: un rand per fisier, cu angajatul ghicit din numele
   fisierului si schimbabil. Numele lung al fisierului se taie, nu rupe randul. */
.a1-upload-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 320px; overflow-y: auto; }
.a1-upload-row { display: flex; align-items: center; gap: 8px; }
.a1-upload-file {
  flex: 1 1 45%; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.a1-upload-row select { flex: 1 1 45%; min-width: 0; }

/* Mesajul pentru cine a intrat pe adresa veche din tailnet: sus, pe toata
   latimea, pana apasa „Am inteles" - e singurul lucru care repara definitiv
   eroarea de conexiune pe telefonul lui. */
.tailnet-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 10px 14px; margin: 0 0 8px; font-size: 13px; line-height: 1.4;
  background: rgba(184,116,26,.12); border: 1px solid #b8741a; color: var(--text);
}

/* Bulina echipei: mică, lângă nume, nu în locul lui. */
/* Totalul de sub tabel: se citește ca un total, nu ca încă un rând de date. */
tfoot td {
  border-top: 2px solid var(--border); border-bottom: 0;
  font-weight: 600; font-family: var(--mono); color: var(--text);
}

/* Pe telefon, cartonașul arată doar ce trebuie: coloanele secundare se ascund,
   ca un rând să nu ocupe un ecran întreg de derulat. Pe desktop rămân toate -
   acolo e loc. */
@media (max-width: 720px) {
  .table-cards td.col-secondary { display: none; }
}

.team-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
            margin-right: 6px; vertical-align: baseline; flex: 0 0 auto; }
a.row-link { color: var(--text); text-decoration: none; display: block; }
a.row-link:hover { color: var(--accent); }

/* Proiecte list: incomplete Equipment/Network pair indicator. */
.pair-incomplete-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-left: 6px; vertical-align: middle;
}
tr.row-pair-incomplete td:first-child { border-left: 3px solid var(--red); }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
}
.empty b { display: block; color: var(--text); font-family: var(--disp); text-transform: uppercase; margin-bottom: 6px; }

.code-chip {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 3px 8px;
  display: inline-block;
}
.badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; font-weight: 600; display: inline-block; }
.mono { font-family: var(--mono); }

.overlay {
  position: fixed; inset: 0; background: rgba(6, 10, 14, .7);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow: auto; z-index: 50;
}
.overlay.active { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--border); max-width: 680px; width: 100%; padding: 24px; }
/* Wider variant for forms with many short fields (e.g. project form), so the
   auto-fit grid can actually lay out 3-4 columns instead of collapsing to 2. */
.modal-wide { max-width: 960px; }
.modal h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 16px;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
/* auto-fit: short fields (numbers, dates, dropdowns) wrap into 2/3/4 columns
   depending on available width; long fields opt into full width via .full. */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 12px; }
/* Trei coloane fixe: formularele lungi (fișa angajatului, vehicul) au câmpuri
   scurte care, lăsate pe auto-fit, ajung să sară de la 2 la 4 coloane de la un
   rând la altul și rup alinierea pe verticală. */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
@media (max-width: 720px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Câmpurile late își cer locul cu `grid-column:span 2/3`, pus inline în JS.
   Când grila se strânge, un `span 3` într-o grilă de 2 (sau un `span 2` într-o
   grilă de 1) NU se taie la numărul de coloane existente: CSS Grid creează
   coloane implicite în plus, iar formularul iese din ecran - câmpurile din
   dreapta rămân tăiate la margine, iar cele de dată ajung unul peste altul.
   Aici orice câmp care cerea mai mult decât există trece pe toată lățimea.
   `!important` fiindcă regula pe care o bate vine dintr-un atribut `style`. */
@media (max-width: 720px) { .grid3 > [style*="span 3"] { grid-column: 1 / -1 !important; } }
@media (max-width: 480px) {
  .grid3 { grid-template-columns: 1fr; }
  .grid3 > * { grid-column: 1 / -1 !important; }
}

/* Scadențe: culoarea spune cât de aproape e data, ca tabelul să se citească
   dintr-o privire, nu rând cu rând. */
.exp-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-ok { color: var(--muted); }
.exp-soon { background: #f5a62322; color: #b8791a; border: 1px solid #f5a62355; }
.exp-urgent { background: #f2711c22; color: #c8551a; border: 1px solid #f2711c55; }
.exp-over { background: #db283322; color: #c0212c; border: 1px solid #db283355; font-weight: 600; }
/* `hidden` trebuie să învingă orice. Regula implicită a browserului
   ([hidden] { display: none }) e mai slabă decât o clasă proprie, așa că un
   element cu `display: flex` pe clasă rămânea vizibil deși era marcat ascuns -
   exact cum se întâmpla cu cartonașele din Economic pe care un utilizator
   n-avea dreptul să le vadă. */
[hidden] { display: none !important; }

/* Butonul „Filtre” din Planning, când chiar filtrează ceva. Panoul stă
   închis la deschiderea paginii, așa că butonul e singurul loc din care se
   poate afla că lista e restrânsă. */
.weekday-toggle.has-filters {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Fișa angajatului: grupuri de câmpuri cu titlu, în loc de o listă lungă
   nediferențiată - identitatea, adresa și actul se caută separat. */
.worker-fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px 4px; margin-bottom: 10px; }
.worker-fieldset-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.worker-value { padding: 4px 0; min-height: 20px; }

.field { margin-bottom: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); margin-bottom: 3px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 6px 8px; font-family: var(--sans); font-size: 13px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 60px; }
/* Dropdowns auto-size to their content (selected option text) instead of
   stretching across the whole empty grid cell — applies to every <select>
   in the app since they all share this rule. */
.field select { width: auto; min-width: 90px; max-width: 100%; }
/* Fields with a known/expected character count (phone numbers, Equipment/
   Network Number): sized to fit that count via the HTML "size" attribute
   set where used, not stretched to the full grid cell. */
.field input.char-fit { width: auto; }

/* Money input widget (see api.js renderMoneyInputHtml): digits push in from
   the right like a POS numpad, so right-aligned matches how it fills.
   Compact fixed width by default (table cells etc.) - only stretches to
   fill its container inside a ".field" (project form), where the wrap
   flexes and the currency suffix (€ / lei, per currencyForCountry) sits
   right after it. */
.money-input { text-align: right; font-variant-numeric: tabular-nums; width: 120px; }
.money-input-wrap { display: inline-flex; align-items: center; gap: 6px; }
.field .money-input-wrap { display: flex; width: 100%; }
.field .money-input-wrap .money-input { width: auto; flex: 1; min-width: 0; }
.money-currency-suffix { color: var(--muted); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* Editable tier tables (Finance price lists: Stații/Etaje/praguri de
   greutate) - a small, low-emphasis "+" to extend the list and a subtle "x"
   per row to remove it. Removing an unsaved row is instant; removing a
   saved price still asks for confirmation in JS (see finance.js), the muted
   styling here just keeps the control from competing visually with the
   money input next to it. */
.tier-remove-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 7px; border-radius: 3px; line-height: 1.6;
}
.tier-remove-btn:hover { color: var(--red); background: var(--bg); }
.tier-add-btn {
  border: 1px dashed var(--border); background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px; padding: 5px 10px; border-radius: 4px;
}
.tier-add-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Rândul de sub tabelul Stații -> Preț: „+ Stație" (buton punctat) și
   „Salvează tabelul" (buton plin) stau unul lângă altul, deci trebuie să aibă
   exact aceeași înălțime - altfel se vede o treaptă de câțiva pixeli, pe care
   scripts/verifica_aspect.py o raportează ca „butoane decalate". */
.tier-table-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.tier-table-actions .tier-add-btn,
.tier-table-actions button.primary.small { padding: 6px 12px; font-size: 12px; border-radius: 4px; }
/* Același lucru pe rândurile de adăugare cu câmpuri (interval km, capacitate,
   model): pe telefon câmpurile trec pe rândul lor, butonul rămâne întreg. */
.tier-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Modal title row with a total badge pinned to the opposite side (Ofertă de
   preț: "Total ofertă" must stay visible next to the title at all times,
   never requiring a scroll down to the bottom of the form - see
   finance_oferte.js::openPriceOfferForm). h3 keeps its own border-bottom, so
   it's set to flex:1 here to still span the full row width. */
.modal-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.modal-title-row h3 { flex: 1; }
.pof-grand-total-badge { font-family: var(--disp); font-size: 13px; white-space: nowrap; padding-bottom: 12px; color: var(--muted); }
.pof-grand-total-badge b { color: var(--accent); font-size: 17px; margin-left: 6px; }
.pof-grand-total-inline { margin-right: auto; font-size: 13px; color: var(--muted); }
.pof-grand-total-inline b { color: var(--text); }

/* Ofertă de preț: Excel-like lift lines table (finance_oferte.js) - one main
   row per lift (Descriere -> Preț unitar, with a Categorie -> Model ->
   Floors -> Capacitate cascade of dropdowns) plus a secondary row
   underneath for Opțiuni suplimentare + alt-code checkbox + Total rând +
   Buget 35/40%, since that content doesn't fit as its own column without
   the table becoming unreadably wide. No "+ Adaugă lift" button - a blank
   row is always kept at the bottom instead (see
   ensurePriceOfferTrailingEmptyRow). */
.pof-lines-table { margin-bottom: 10px; }
.pof-lines-table th, .pof-lines-table td { padding: 4px 6px; vertical-align: top; text-align: left; }
.pof-lines-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid var(--border); }
.pof-lines-table td select, .pof-lines-table td input { width: 100%; min-width: 84px; }
/* Fiecare lift = un BLOC vizual: rândul principal + sub-rândul lui au același
   chenar (sus pe rândul principal, jos pe sub-rând, lateral pe prima/ultima
   celulă), ca sub-rândul să nu pară că plutește singur. Culoarea chenarului
   arată starea liniei: galben = linia la care se lucrează acum, verde =
   validată (vezi finance_oferte.js::applyPriceOfferLineStates). */
.pof-lines-table { --pof-line-border: var(--border); --pof-line-bg: transparent; --pof-warn: #d9a521; }
.pof-lines-table .pof-line-row > td,
.pof-lines-table .pof-line-subrow > td {
  border-top: 0; border-bottom: 0;
  border-left: 0; border-right: 0;
  background: var(--pof-line-bg);
}
.pof-lines-table .pof-line-row > td { padding-top: 10px; border-top: 2px solid var(--pof-line-border); }
.pof-lines-table .pof-line-subrow > td { padding-top: 2px; padding-bottom: 12px; border-bottom: 2px solid var(--pof-line-border); }
.pof-lines-table .pof-line-row > td:first-child,
.pof-lines-table .pof-line-subrow > td:first-child { border-left: 3px solid var(--pof-line-border); }
.pof-lines-table .pof-line-row > td:last-child,
.pof-lines-table .pof-line-subrow > td:last-child { border-right: 2px solid var(--pof-line-border); }
/* Validată: verde discret. Activă: galben, are prioritate (e linia curentă). */
.pof-lines-table tr.pof-line-ok { --pof-line-border: var(--green); --pof-line-bg: rgba(76, 175, 125, .07); }
.pof-lines-table tr.pof-line-active { --pof-line-border: var(--pof-warn); --pof-line-bg: rgba(217, 165, 33, .08); }
.pof-lines-table .pof-subrow-flex { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pof-lines-table .pof-options-field { flex: 1; min-width: 240px; margin-bottom: 0; }
/* Numele lucrării (identificarea de șantier a acestei instalări). Cât
   conținutul, nu cât rândul: un „Bloc A - Scara 2" nu are nevoie de toată
   lățimea, iar detalierea prețului de lângă are nevoie de a ei. */
.pof-lines-table .pof-site-field { flex: 0 1 260px; min-width: 180px; margin-bottom: 0; }
.pof-lines-table .pof-site-field input { width: 100%; }
.pof-lines-table .pof-line-total { text-align: right; min-width: 150px; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Totalul rândului rămâne cifra dominantă, peste sumele din defalcare. */
.pof-lines-table .pof-line-total b { color: var(--text); font-size: 15px; }

/* Defalcarea liniei: prețul de bază al liftului + câte o SUB-LINIE per opțiune
   suplimentară și pentru travel cost (nume stânga / sumă dreapta / × discret),
   apoi controalele de adăugare. Vezi
   finance_oferte.js::renderPriceOfferLineBreakdown. */
.pof-breakdown { display: flex; flex-direction: column; max-width: 560px; }
.pof-subline {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0; font-size: 12px; color: var(--muted);
  border-bottom: 1px dotted var(--border);
}
/* Ultima sub-linie (controalele de adăugare sunt mereu ultimul copil). */
.pof-breakdown .pof-subline:nth-last-child(2) { border-bottom: 0; }
/* Numerotarea sub-liniilor (1.1, 1.2, ...) - aceeași ca în PDF. */
.pof-subline-nr {
  width: 30px; flex: 0 0 30px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px;
}
.pof-subline-base .pof-subline-nr { color: var(--text); font-weight: 600; font-size: 12px; }
.pof-subline-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Cantitatea sub-liniei: câmp compact, în același registru cu select-ul de km. */
.pof-subline-qty { width: 56px; flex: 0 0 56px; }
.pof-lines-table td .pof-subline-qty-input {
  width: 100%; font-size: 12px; padding: 1px 4px; text-align: right;
}
.pof-subline-note { font-size: 11px; opacity: .8; }
.pof-subline-amount {
  text-align: right; white-space: nowrap; min-width: 100px;
  font-variant-numeric: tabular-nums; color: var(--text);
}
/* Prețul de bază: reperul de la care pleacă restul sumelor, deci mai apăsat. */
.pof-subline-base { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border); }
.pof-subline-actions { width: 18px; text-align: center; }
.pof-subline-remove {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.pof-subline-remove:hover { color: var(--red); }
/* Specificitate peste ".pof-lines-table td select { width:100% }" de mai sus. */
.pof-lines-table td .pof-subline-select { width: auto; min-width: 140px; font-size: 12px; padding: 1px 6px; }
.pof-line-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pof-lines-table td .pof-line-controls select { width: auto; min-width: 150px; font-size: 12px; }

/* Validare pe linie: eticheta "nevalidat" + butonul Validează / Validat ✓. */
.pof-line-check { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pof-unvalidated-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 1px 7px;
}
.pof-validate-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.pof-validate-btn:hover { color: var(--green); border-color: var(--green); }
.pof-validate-btn.is-ok { color: var(--green); border-color: var(--green); font-weight: 600; }
/* .checkbox-inline itself is already defined elsewhere (shared with the
   Project form's own alt-code checkbox, see api.js) - only override the
   checkbox's width here, since '.field input' above forces width:100% on
   every input inside a .field, which would otherwise stretch it full-width. */
.field .checkbox-inline input[type="checkbox"] { width: auto; }

/* Finance price lists: collapsible group headers (model / capacitate cards),
   suggestion chips for previously-used kg intervals, and inline title rename. */
/* flex-wrap + min-width:0 sunt esențiale aici, nu cosmetice: fără ele, patru
   butoane cu text lung ies din card pe telefon, iar ultimul ("Șterge model")
   ajunge în afara ecranului, imposibil de apăsat. */
.group-toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; cursor: pointer; user-select: none;
}
.group-toggle-title { min-width: 0; overflow-wrap: anywhere; }
.group-toggle-row > div { flex-wrap: wrap; }
.group-toggle-row:hover .group-toggle-title { color: var(--accent); }
.collapse-chevron { display: inline-block; margin-right: 8px; transition: transform .15s ease; color: var(--muted); }
.collapse-chevron.open { transform: rotate(90deg); }
.capacity-chip { padding: 3px 10px; font-size: 12px; }
.rename-input { font-size: 14px; font-weight: 600; padding: 2px 6px; width: 200px; }

/* Finance: cross-country comparison report */
.compare-up { color: var(--red); }
.compare-down { color: var(--green); }

/* Date field widget: always-DD/MM/YYYY text box + a calendar-icon button that
   opens a hidden native <input type="date"> for picking (see api.js
   renderDateFieldHtml). The native input's own text is never shown. */
.date-field-wrap { position: relative; display: flex; }
.date-field-wrap .date-text { padding-right: 30px; }
.date-pick-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 4px 6px; line-height: 1; color: var(--muted);
}
.date-pick-btn:hover { color: var(--accent); }
.date-native-hidden {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; border: none; padding: 0;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.form-msg { font-size: 12px; margin-bottom: 10px; padding: 8px 10px; display: none; }
.form-msg.error { display: block; background: rgba(229, 83, 75, .12); color: var(--red); border-left: 3px solid var(--red); }
.form-msg.success { display: block; background: rgba(76, 175, 125, .12); color: var(--green); border-left: 3px solid var(--green); }

.detail-box { background: var(--panel); border: 1px solid var(--border); padding: 20px; margin-bottom: 16px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
/* Antetul proiectului: Țară · Regiune · Nume · Adresă · Corespondent, toate
   pe un rând. Lățimile sunt explicite (nu auto-fit) pentru că adresa e mult
   mai lungă decât restul și, lăsată să dicteze, împinge câmpurile scurte pe
   al doilea rând și lasă jumătate din lățime goală. Pe ecran de telefon
   coloanele se strâng singure la două, apoi la una. */
.detail-header-grid { grid-template-columns: 0.7fr 0.9fr 1.4fr 1.8fr 1.1fr; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
@media (max-width: 1000px) { .detail-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Pe telefon: țara și regiunea sunt scurte și stau una lângă alta, iar numele,
   adresa și corespondentul iau toată lățimea - o adresă ruptă pe jumătate de
   ecran se citește prost. */
@media (max-width: 560px) {
  .detail-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-header-grid .detail-item:nth-child(n+3) { grid-column: 1 / -1; }
}
.detail-item { min-width: 0; }
.detail-item label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; letter-spacing: .4px; }
.detail-item div.value { font-size: 14px; overflow-wrap: anywhere; }

.section-title {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px;
  font-size: 14px; margin: 24px 0 10px; color: var(--muted);
}

/* Subtitlu ușor, sub un .section-title deja pus (ex. "Activitate" -> "Salarii
   în curs" / "Proiecte") - nu duplică stilul de secțiune, doar îl împarte. */
.section-subtitle {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px;
  font-size: 12px; margin: 18px 0 8px; color: var(--muted);
}

/* ---------- Fișa echipei: rezumat sus, permis vizibil, activitate separată ----------
   Mașina (cu link GPS) și cardurile de firmă stau alături, sus, ca prime
   lucruri văzute. Pe telefon devin stivă, nu coloane înghesuite. */
.team-summary-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .team-summary-grid { grid-template-columns: 1fr; } }
.team-summary-label {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px;
  font-size: 11px; color: var(--muted); margin-bottom: 6px;
}

.team-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
@media (max-width: 900px) { .team-secondary-grid { grid-template-columns: 1fr; } }

/* Separator vizual clar între fișa "statică" a echipei și ce se plătește /
   lucrează acum. */
.activity-separator { margin-top: 30px; padding-top: 16px; border-top: 2px solid var(--border); }

/* Permis de conducere: badge, nu text simplu Da/Nu - trebuie să se vadă
   dintr-o privire într-un tabel de membri, nu citit rând cu rând. */
.badge-licence-yes { background: rgba(76, 175, 125, .15); color: var(--green); border: 1px solid var(--green); }
.badge-licence-no { background: rgba(148, 163, 184, .16); color: var(--muted); border: 1px solid var(--border); }

/* Project form: Nume proiect (wide) + Adresa (narrow) forced onto one row,
   distinct from the auto-fit .grid2 used elsewhere in the same form. */
.name-address-row { display: grid; grid-template-columns: 2fr 1fr; gap: 6px 12px; margin-bottom: 6px; }
@media (max-width: 560px) { .name-address-row { grid-template-columns: 1fr; } }

/* Compact "Zile active in saptamana" toggle, nested under Durata estimata
   in the Timeline row instead of taking its own full-width grid row. */
.weekday-compact { margin-top: 6px; }

/* Subtler Status/Prioritate labels on the Timeline row 2 (same info,
   slightly less visual weight than the rest of the form). */
.label-subtle { opacity: .75; font-size: 10px; }

/* Generic red-highlight for a single invalid/incomplete input, reused for:
   the bidirectional-timeline "start in <3 days" warning and the Equipment/
   Network incomplete-pair warning. */
.input-danger { border-color: var(--red) !important; background: rgba(229, 83, 75, .10); }
.field-warning-text { color: var(--red); font-size: 11px; margin-top: 3px; }

/* Equipment/Network number soft-format hint (never blocks saving). */
.equip-hint { font-size: 11px; margin-top: 3px; min-height: 14px; }
.equip-hint-ok { color: var(--green); }
.equip-hint-neutral { color: var(--muted); }
.equip-hint-error { color: var(--red); }

/* Equipment/Network Number fields: label stacked as "short title" + smaller
   sub-line, forced to the same 2-line height (min-height) so the two input
   boxes stay perfectly aligned regardless of how long either label's text is.
   The label stays a block: an inline mark such as the red asterisk of a
   required field must stay on the title line, not drop to a line of its own. */
.equip-field label { min-height: 26px; }
.label-note {
  display: block; text-transform: none; letter-spacing: 0;
  font-size: 9px; opacity: .7;
}
/* Asterisc pe eticheta unui câmp obligatoriu (Network Number). */
.req-star { color: var(--red); font-weight: 700; margin-left: 2px; }

.equip-alt-code-field { margin-top: 2px; }

.discount-note-field { margin-top: 4px; }

/* Live-computed 35% threshold info row under Costuri (client-side only). */
.finance-info-row { font-size: 13px; color: var(--text); padding-top: 4px; }
/* ==================== Stările: o culoare = un înțeles ====================

   Până acum verdele, portocaliul și roșul apăreau în șase locuri diferite, cu
   nuanțe diferite și cu înțelesuri care nu se potriveau între ele: verdele era
   și „proiect finalizat", și „PO acoperit", și „plată validată", dar nuanța
   diferea de la un ecran la altul. Cine se uită la un tabel trebuie să învețe
   culoarea o dată, nu de fiecare dată.

   Cinci stări, atât:
     ok     verde      - gata, acoperit, validat, în regulă
     work   albastru   - se lucrează ACUM la el
     wait   gri        - așteaptă ceva (planificat, nealocat, netrimis)
     warn   portocaliu - cere atenție în curând (expiră, lipsește ceva, parțial)
     bad    roșu       - expirat, lipsă, greșit; trebuie făcut ceva azi

   Regula de citire: gri = n-ai nimic de făcut încă, portocaliu = ai de făcut
   ceva săptămâna asta, roșu = ai de făcut ceva acum. Verdele și albastrul
   spun că e bine.

   Se folosesc DOAR prin `.state` (vezi mai jos) sau prin variabilele astea -
   nu se mai scriu culori direct în cod. */
:root {
  --st-ok: var(--green);
  --st-work: var(--accent);
  --st-wait: var(--muted);
  --st-warn: #f2994a;
  --st-bad: var(--red);
}

/* Eticheta de stare. Are și bulină, și text: culoarea singură nu e suficientă
   (daltonism, imprimare alb-negru, ecran prost la soare), iar textul singur nu
   se vede dintr-o privire pe un tabel de două sute de rânduri. */
.state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.3; white-space: nowrap;
  padding: 2px 9px 2px 7px; border-radius: 99px;
  border: 1px solid var(--st-c, var(--border));
  background: color-mix(in srgb, var(--st-c, var(--border)) 12%, transparent);
  color: var(--text);
}
.state::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: var(--st-c, var(--border));
}
.state-ok   { --st-c: var(--st-ok); }
.state-work { --st-c: var(--st-work); }
.state-wait { --st-c: var(--st-wait); }
.state-warn { --st-c: var(--st-warn); }
.state-bad  { --st-c: var(--st-bad); }

/* Varianta APĂSABILĂ: aceeași etichetă, dar se vede că poate fi schimbată.
   Nu arată ca un câmp de formular tocmai ca să nu fie schimbată din greșeală -
   vezi comentariul de la projectStatusSelectHtml din projects.js. */
button.state {
  cursor: pointer; font-family: var(--sans);
}
button.state::after {
  content: "\25be"; font-size: 9px; color: var(--muted); margin-left: 1px;
}
button.state:hover { filter: brightness(1.08); }
button.state:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.diff-badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; font-weight: 600; display: inline-block; }
.diff-badge-ok { background: rgba(76, 175, 125, .15); color: var(--green); border: 1px solid var(--green); }
.diff-badge-over { background: rgba(229, 83, 75, .15); color: var(--red); border: 1px solid var(--red); }

/* Coloana PO din lista de proiecte: doar semnul, textul complet stă în tooltip
   (vezi api.js::poCoverageIconHtml). Bifă verde = acoperit, X roșu = fără PO,
   X portocaliu = are PO dar suma nu corespunde. */
.po-icon { font-size: 16px; font-weight: 700; line-height: 1; cursor: help; }
.po-icon-ok { color: var(--green); }
.po-icon-bad { color: var(--red); }
.po-icon-warn { color: #f2994a; }

/* Settings buttons menu (Setari > Configurare generala) — generic pattern,
   reused by any future settings section, see settingsMenu.js. */
.settings-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.settings-menu-btn {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  color: var(--text); padding: 18px 16px; font-family: var(--disp); text-transform: uppercase;
  letter-spacing: .4px; font-size: 13px; text-align: left; cursor: pointer;
}
.settings-menu-btn:hover { border-color: var(--accent); color: var(--accent); }

.list-wrap { display: flex; flex-direction: column; gap: 10px; }
.subcard, .price-block { background: var(--panel); border: 1px solid var(--border); padding: 12px 14px; }
/* .price-block = o SECȚIUNE dintr-o listă de prețuri (ex. „Preț modernizare"
   și „Travel cost" la MONOMods), nu un cartonaș de date de pe telefon. Arată
   la fel ca .subcard, dar numele nu conține „card" tocmai ca verificarea de
   aspect să nu-i ceară butoanele dintr-un tabel întreg pe un singur rând
   (regula „spațiu pierdut în cartonașe" din scripts/verifica_aspect.js). */
.subcard-row { display: flex; justify-content: space-between; align-items: center; }
.subcard-row .mono { white-space: nowrap; }

.footnote { color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.6; }
.footnote b { color: var(--text); }

/* Collapsible "zile active" widget: a small toggle button showing a summary
   ("Luni-Sambata (implicit)" or "Personalizat"), expanding to the 7 checkboxes. */
.weekday-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: auto; max-width: 220px; background: transparent; border: 1px solid transparent;
  color: var(--muted); padding: 3px 4px; font-family: var(--sans); font-size: 10.5px;
  cursor: pointer; text-align: left;
}
.weekday-toggle:hover { border-color: var(--border); color: var(--accent); }
.weekday-toggle .disclosure { font-size: 9px; color: var(--muted); }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 2px; }
.weekday-picker.collapsed { display: none; }
.weekday-picker label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text); }
.checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 0; }
.option-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 6px 3px 12px;
  font-size: 12px; color: var(--text);
}
.option-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1;
  padding: 2px 6px; border-radius: 50%;
}
.option-chip-remove:hover { color: #3b82f6; }
.upload-disabled-note { font-size: 12px; color: var(--muted); padding: 8px 0; }
/* Salariu pe lucrare: afișarea din listă + ✎, chipul „stabilit manual" și ↺
   (api.js::syncProjectSalaryMode). */
.salary-display-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.salary-edit-btn { padding: 1px 6px; line-height: 1.3; }
.salary-manual-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.badge-salary-manual {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue); border: 1px solid var(--blue); font-weight: 600;
}
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-row-label { font-size: 13px; }
.doc-row-actions { display: flex; align-items: center; gap: 8px; }

a.link-inline { color: var(--blue); text-decoration: none; }
a.link-inline:hover { text-decoration: underline; }

/* Copy button sits on the label row, to the right - stays put next to the
   field regardless of how long the value below it wraps. */
.detail-item-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.detail-item-label-row label { margin-bottom: 0; }
.copy-btn-subtle {
  background: none; border: none; color: var(--muted);
  padding: 0 2px; font-size: 12px; line-height: 1; cursor: pointer;
  opacity: .65; flex-shrink: 0;
}
.copy-btn-subtle:hover { color: var(--accent); opacity: 1; }

/* Peste galeria de previzualizare și editorul de semnături (9999-10050):
   altfel mesajele de eroare apăreau în spatele lor și nu se vedeau deloc. */
.toast {
  position: fixed; top: 16px; right: 16px; z-index: 10100;
  max-width: 360px; padding: 12px 16px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }

/* Floating autosave confirmation bar (project detail edit mode): fixed to
   the bottom of the viewport so it's always visible, no scrolling needed to
   find it, regardless of how long the form is or where the field left was. */
.autosave-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--accent);
  padding: 12px 16px; font-size: 13px; color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  z-index: 150; max-width: 90vw;
}
.autosave-bar.collapsed { display: none; }

/* ---------- Country filter buttons (Planning + Proiecte tabs) ---------- */
.country-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Filtre cascadate (Tip -> Țară -> Categorie) puse pe UN singur rând cu
   select-uri compacte, în loc de câte o bară de butoane pe rând - vezi
   Liste de prețuri (Economic). */
.filter-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
/* Identice cu .list-sort-controls select, ca toate select-urile de filtrare
   din program (Liste de prețuri, Proiecte, Echipe) să aibă exact aceeași
   înălțime - altfel apar "nealiniate" unele față de altele pe același rând. */
.filter-select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 6px 8px; font-size: 12px; font-family: var(--sans); cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-bar-row .footnote { margin: 0; white-space: nowrap; }
/* Cheia alinierii: aceste wrappere nu mai există ca boxuri proprii (deci nu
   mai introduc un flex-în-flex cu altă înălțime decât frații lor) - copiii
   lor sunt tratați ca itemi direcți ai .filter-bar-row. */
#priceListsMainFilters, #priceListsExtraFilters { display: contents; }

/* Rând unic de filtre pentru liste (Proiecte): grupurile de pilule stau unul
   lângă altul, despărțite de o linie subțire, nu pe rânduri separate.
   #projectsCountryWrap e "display:contents" din același motiv ca la Liste de
   prețuri - altfel ar fi un flex imbricat cu altă înălțime decât frații lui. */
.list-filter-row #projectsCountryWrap { display: contents; }
.list-filter-row .country-filter-bar { display: contents; }
.filter-row-sep {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--border); margin: 0 4px;
}
@media (max-width: 720px) { .filter-row-sep { display: none; } }
button.filter-select.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }

/* Bifa "EQ/Net indisponibil" din rândul de lift: era un .field cu etichetă pe
   240px, ocupa cât o coloană întreagă. Acum e doar o bifă mică, inline. */
.pof-altcode-toggle {
  flex: 0 0 auto; gap: 5px; padding: 0; font-size: 11px;
  color: var(--muted); white-space: nowrap; cursor: pointer;
}
.pof-altcode-toggle input { margin: 0; }

/* Bara de acțiuni a paginii de ofertă (echivalentul .modal-actions, dar
   pentru pagina stand-alone /price-offers/new). */
.offer-page-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.offer-page-actions .pof-grand-total-inline { margin-right: auto; }
/* Fișa ofertei doar de citit (?vezi=1): fără butoane de lucru, câmpuri lizibile. */
.pof-view-mode #app button:disabled { display: none; }
.pof-view-mode #app :is(input, select, textarea):disabled { opacity: 1; color: var(--text); cursor: default; -webkit-text-fill-color: var(--text); }
/* button.small e mai scund decât un <select> (padding/font mai mici) - când
   stau pe același rând (ex. "Sortează după" + "Crescător"), diferența de
   înălțime se vede. Corectat doar în acest context, ca să nu umflăm
   button.small peste tot unde e folosit (rânduri de tabel, acțiuni mici). */
.list-sort-controls button.small { padding: 7px 12px; font-size: 12px; }
.country-filter-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 6px 16px; font-size: 13px; font-family: var(--sans); cursor: pointer;
  border-radius: 4px; transition: background .15s ease, border-color .15s ease;
}
.country-filter-btn:hover { border-color: var(--accent); }
.country-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 600; }

/* ---------- Calendar / Gantt tab ---------- */
.cal-filters { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-bottom: 16px; }
.cal-filter-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.cal-filter-item select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 4px 6px; font-size: 12px; font-family: var(--sans);
}
.cal-filter-item select[multiple] { min-width: 140px; min-height: 72px; }

/* Collapsible Planning filters panel (country/team/export controls), collapsed
   by default so the Gantt chart is reachable without scrolling past it. */
.cal-filters-panel { margin-top: 6px; }
.cal-filters-panel.collapsed { display: none; }
#calFiltersSummary { color: var(--muted); font-weight: 400; }

.cal-scroll { overflow-x: auto; border: 1px solid var(--border); background: var(--panel); margin-bottom: 20px; }
/* Zoom-ul din Planning + perioada aflata in cadru, pe acelasi rand cu
   „Filtre" si „Perioada". Data se scrie apasat, restul discret: intrebarea e
   „ce vad acum", nu „cati pixeli are o zi". */
/* Titlurile categoriilor din Economic („Angajați", „Clienți", „Companie",
   „Rapoarte"). Unsprezece carduri egale nu spuneau nimic despre ce ține de
   oameni, ce de clienți și ce de firmă. */
/* Pozitiile unui PO, bifabile la crearea facturii. Randuri, nu cartonase:
   un PO poate avea zece pozitii si trebuie sa incapa toate in fereastra. */
.billing-num { font-size: 12px; white-space: nowrap; }
.project-po-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 0; }
/* „Type" langa descriere: mic, ca linia de lift sa nu se lateasca. */
/* Casuta care inlocuieste EQ / Network cand sunt indisponibile. */
.pof-altvalue { width: 100%; margin-top: 4px; }
.pof-eqnet:disabled { background: var(--panel-2); cursor: not-allowed; }
.offer-tr-table input { width: 100%; }
.pof-install-type { width: auto; min-width: 64px; margin-top: 4px; }
.pof-description-field { margin-top: 12px; }
.pof-description-field textarea { width: 100%; }
/* Zile pierdute: bare orizontale simple, o culoare pe tip de problemă (din
   list_options.issue_type). */
.lost-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lost-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.lost-bar-label { flex: 0 0 190px; min-width: 0; }
.lost-bar-track { flex: 1; height: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.lost-bar-fill { display: block; height: 100%; }
.lost-bar-value { flex: 0 0 auto; white-space: nowrap; }
.project-issue-form { align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 720px) {
  .lost-bar-row { flex-wrap: wrap; gap: 4px 10px; }
  .lost-bar-label { flex: 1 0 100%; }
}
.inv-lines { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); }
.inv-line {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer;
}
.inv-line:last-child { border-bottom: 0; }
.inv-line:hover { background: var(--panel-2); }
.inv-line input[type="checkbox"] { width: auto; margin: 0; }
.inv-line-text { flex: 1; min-width: 0; }
.inv-line-amount { white-space: nowrap; }

/* „fără echipă": atenționare blândă, nu alarmă - proiectul e planificat,
   doar încă n-are cine să-l facă. */
.badge-warn-soft { background: #f2994a22; color: #a35c12; border: 1px solid #f2994a88; }

.finance-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 18px 0 8px;
}
.finance-group-title:first-child { margin-top: 0; }

.cal-zoom-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-zoom-wrap button { min-width: 30px; }

/* ---------- Marirea graficelor cu zile (zoom_grafic.js) ----------
   Aceleasi butoane in Planning si in Cazari: minus, plus, „Potriveste".
   Pe telefon sunt mari cat sa se apese cu degetul si stau deasupra graficului,
   nu ascunse intr-un meniu - un gest pe care nu-l stii nu exista, deci pinch-ul
   si dublu-tap-ul trebuie sa aiba si un echivalent vizibil. */
/* Graficul cu bare culcate (telefon): nume - bara - cifra, pe un rand.
   Se citeste fara marire, fiindca literele raman de marimea obisnuita. */
.bar-chart-h { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.bch-row { display: grid; grid-template-columns: minmax(64px, 88px) 1fr auto; align-items: center; gap: 8px; }
.bch-label {
  font-size: 11px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.bch-track { background: var(--panel-2); border-radius: 3px; height: 16px; overflow: hidden; }
.bch-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bch-val { font-size: 12px; font-weight: 600; white-space: nowrap; }

.zoom-grafic-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zoom-grafic-btn { min-width: 34px; font-weight: 700; }
/* Gesturile se scriu doar pe telefon: pe calculator nu exista degete, iar
   randul de butoane e deja plin. */
.zoom-grafic-hint { display: none; }
@media (max-width: 720px) {
  .zoom-grafic-hint {
    display: block; flex-basis: 100%; font-size: 10.5px; color: var(--muted);
    margin-top: -2px;
  }
}
/* Cu doua degete pe grila marim GRAFICUL, nu pagina: fara `touch-action`,
   telefonul mareste tot ecranul peste el. Tragerea laterala ramane. */
.cal-scroll { touch-action: pan-x pan-y; }
/* Sub 16px pe zi, numarul zilei nu mai incape: doua cifre intr-o coloana de
   sase pixeli se suprapun si fac o mazgalitura. Randul ramane, ca rigla -
   duminicile si ziua de azi se vad in continuare - dar fara cifre. Lunile de
   deasupra spun unde esti. */
.cal-grid.cal-zile-mici .cal-day-cell { font-size: 0; padding: 0; height: 7px; }
/* Litera zilei (28.10.2026) nu încape nici ea: doar culoarea weekendului. */
.cal-grid.cal-zile-mici .cal-day-wd, .mini-cal-grid .cal-day-wd { display: none; }
.cal-grid.cal-zile-mici .cal-month-cell { font-size: 9px; padding: 2px 0 1px 2px; }
/* Sub 8px pe zi, numele scris in bara nu mai e nume, ci doua litere si trei
   puncte - zgomot peste singurul lucru care conteaza la treapta asta: unde sunt
   barele si unde se suprapun. Numele ramane la apasare (`title`) si revine de
   la treapta urmatoare. */
.cal-grid.cal-zile-micute .cal-bar-text,
.cal-grid.cal-zile-micute .cal-bar > span { display: none; }

@media (max-width: 720px) {
  /* Toate butoanele de marire au ACEEASI inaltime (40px, cat se cere pentru
     deget): altfel „Potriveste" statea cu 4px mai jos decat „+" si randul
     arata strambat. */
  .cal-zoom-wrap button, .zoom-grafic-wrap button {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .zoom-grafic-btn { min-width: 44px; font-size: 16px; padding: 4px 10px; }
  /* Numele echipei intra intr-o coloana ingusta: doua randuri mici, taiate cu
     puncte. Fara asta se revarsa peste randul de dedesubt (numele au si cod,
     si tara, si montator). */
  #calendarWrap .cal-label-cell, #accommodationsCalendarWrap .cal-label-cell {
    font-size: 10.5px; line-height: 12px; padding: 2px 6px; overflow: hidden;
  }
  #calendarWrap .cal-label-cell > span, #calendarWrap .cal-label-cell {
    min-width: 0;
  }
  #calendarWrap .cal-label-cell .cal-label-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word; white-space: normal;
  }
  #calendarWrap .cal-label-cell.cal-label-2l { padding-top: 0; padding-bottom: 0; gap: 0; }
  /* Cu oamenii dedesubt, echipa pe un singur rând: altfel rândul crește peste bară. */
  #calendarWrap .cal-label-cell.cal-label-2l .cal-label-text { -webkit-line-clamp: 1; line-height: 13px; }
  /* 28.10.2026: același pas ca pe calculator (13px + 10,5px pe om), ca rândul să rămână 34px. */
  #calendarWrap .cal-label-people { font-size: 9.5px; line-height: 10.5px; }
}
.cal-visible-range { font-size: 12px; color: var(--text); white-space: nowrap; }
.cal-zoom-note { color: var(--muted); font-size: 11.5px; }
.cal-grid { position: relative; }

.cal-header-row { display: flex; border-bottom: 1px solid var(--border); }
/* Latimea coloanei cu nume vine din JS (`--cal-label` pe `.cal-grid`): pe
   telefon se strange, ca graficul sa aiba mai mult loc. 160px ramane valoarea
   de rezerva, pentru orice grila desenata inainte de a fi pusa variabila. */
.cal-label-cell {
  width: var(--cal-label, 160px); min-width: var(--cal-label, 160px); flex-shrink: 0;
  display: flex; align-items: center; padding: 6px 10px;
  font-size: 12px; font-weight: 600; border-right: 1px solid var(--border);
  background: var(--panel); position: sticky; left: 0; z-index: 1;
}
.cal-label-header { background: var(--panel-2); }
.cal-label-unassigned { color: var(--red); border-left: 3px solid var(--red); }

.cal-days-cell { position: relative; }
.cal-month-row { display: flex; }
.cal-month-cell {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px;
  font-size: 10px; color: var(--muted); padding: 4px 0 2px 4px;
  border-right: 1px solid var(--border); box-sizing: border-box;
  /* O luna din care se vad trei zile are o casuta de cativa pixeli: fara
     taiere, numele ei se revarsa peste luna urmatoare si se citesc doua
     cuvinte unul peste altul. */
  overflow: hidden; white-space: nowrap;
}
.cal-day-row { display: flex; }
.cal-day-cell {
  text-align: center; font-size: 11px; color: var(--muted);
  padding: 3px 0; border-right: 1px solid var(--border); box-sizing: border-box;
}
/* Weekend „stil 3 · cap colorat" (28.10.2026): litera zilei deasupra
   numărului; sâmbăta cap chihlimbar, duminica cap roșu + linia de sfârșit de
   săptămână (continuă pe rânduri prin `.cal-sunday-col`). Culorile din
   variabile: temele întunecate le au mai jos, exportul PNG le pune pe cele
   deschise (calendar.js::exportCalendarImage). */
.cal-day-wd { display: block; font-size: 9px; line-height: 10px; font-weight: 500; opacity: .85; }
.cal-day-cell.cal-saturday { background: var(--cal-sat-bg, #FAEEDA); color: var(--cal-sat-fg, #854F0B); }
.cal-day-cell.cal-sunday {
  background: var(--cal-sun-bg, #FCEBEB); color: var(--cal-sun-fg, #A32D2D); font-weight: 600;
  border-right: 1.5px solid #E24B4A;
}
/* Implicit (:root) = temă închisă; temele deschise revin la culorile pale. */
:root, body.theme-dark-green, body.theme-dark-cyan, body.theme-dark-coral {
  --cal-sat-bg: rgba(186, 117, 23, .24); --cal-sat-fg: #F2B866;
  --cal-sun-bg: rgba(226, 75, 74, .24); --cal-sun-fg: #FF9A96;
}
body.theme-light-blue, body.theme-light-green, body.theme-light-cyan, body.theme-gri-albastru, body.theme-alb-linii {
  --cal-sat-bg: #FAEEDA; --cal-sat-fg: #854F0B;
  --cal-sun-bg: #FCEBEB; --cal-sun-fg: #A32D2D;
}

.cal-row { display: flex; border-bottom: 1px solid var(--border); transition: background-color .1s ease; }
.cal-row-drop-target { background: rgba(76, 175, 125, .12); }
.cal-track { position: relative; }
.cal-sunday-col {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  /* 28.10.2026: nuanță slabă + linia de sfârșit de săptămână pe marginea dreaptă. */
  background: rgba(226, 75, 74, .06);
  box-shadow: inset -1.5px 0 0 #E24B4A;
}

/* ===== Ziua de azi, reper în grafic (25.09.2026) =====
   „Unde suntem acum" e prima întrebare la deschiderea Planningului. Azi are
   numărul încercuit în cap și o dungă verticală peste toate rândurile - se
   vede dintr-o privire ce a trecut și ce urmează, fără să numărăm zilele.
   Până pe 28.10.2026 dunga stătea SUB bare (z-index 0). */
/* 28.10.2026: mai vizibilă - sub bare se pierdea. Acum trece PESTE bare, dar
   doar cu două linii subțiri și o nuanță slabă: textul lucrării rămâne citibil,
   iar clicurile trec prin ea. */
.cal-today-col {
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  box-sizing: border-box;
  background: rgba(31, 122, 224, .10);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
/* Numărul de azi: scris cu culoarea de accent, într-un chenar. NU cerc plin
   cu text alb - culoarea textului pe accent diferă de la o temă la alta și
   numărul ajungea alb pe alb. */
.cal-day-cell.cal-today {
  color: var(--accent); font-weight: 800;
  background: rgba(31, 122, 224, .26);
  box-shadow: inset 0 0 0 2.5px var(--accent);
  border-radius: 4px;
}
.cal-day-cell.cal-today .cal-day-wd { font-weight: 800; opacity: 1; }
/* Weekendul de azi: reperul de azi are întâietate asupra capului colorat. */
.cal-day-cell.cal-today.cal-sunday,
.cal-day-cell.cal-today.cal-saturday { color: var(--accent); background: rgba(31, 122, 224, .26); }

.cal-bar {
  position: absolute; height: 24px; line-height: 24px; padding: 0 6px;
  font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  cursor: grab;
}
.cal-bar:active { cursor: grabbing; }
.cal-bar:hover { filter: brightness(1.15); z-index: 3; }
/* Suprapunere reală (28.10.2026): contur roșu PE INTERIOR - bara nu se mai
   lărgește și nu mai acoperă vecinii. */
.cal-bar-conflict { border: none; box-shadow: inset 0 0 0 2px var(--red); }
.cal-bar.cal-bar-inset.cal-bar-conflict, .cal-bar.cal-bar-inset.cal-bar-conflict:hover {
  box-shadow: inset 0 0 0 2px var(--red), 0 0 0 2px var(--panel), 0 1px 4px rgba(0, 0, 0, .45);
}
/* Exportul PNG (calendar.js::exportCalendarImage): html2canvas desenează umbra
   „inset" ca umplere plină - acolo conturul și linia de duminică sunt borduri. */
.cal-export .cal-sunday-col { box-shadow: none; border-right: 1.5px solid #E24B4A; }
.cal-export .cal-bar.cal-bar-conflict, .cal-export .cal-bar.cal-bar-inset.cal-bar-conflict {
  box-shadow: none; border: 2px solid var(--red);
}

/* Ziua de predare (28.10.2026, calendar.js::calIsHandover): A se termină și B
   începe în aceeași zi, pe aceeași linie; fiecare are jumătate din zi, cu
   capătul tăiat oblic. „⇄" deasupra, la mijlocul zilei. */
.cal-bar.cal-bar-ho-end {
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.cal-bar.cal-bar-ho-start {
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 10px;
}
.cal-bar.cal-bar-ho-start.cal-bar-ho-end {
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.cal-handover {
  position: absolute; z-index: 5; transform: translate(-50%, -55%);
  font-size: 11px; line-height: 11px; font-weight: 700; color: #BA7517;
  background: var(--panel); border-radius: 6px; padding: 0 2px;
  cursor: help; white-space: nowrap;
}
/* Progresul în bară (28.10.2026): umbră de la stânga cât procentul executat, sub text. */
.cal-bar-progress {
  position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none;
  background: rgba(0, 0, 0, .16);
}
/* Zi liberă a echipei (28.10.2026): între lucrările ei, zi de lucru neacoperită. */
.cal-free-day {
  position: absolute; top: 2px; bottom: 2px; z-index: 0; border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(99, 153, 34, .55) 0 3px, transparent 3px 7px);
}

/* Bara unei oferte: contur și fundal în dungi, nu culoare plină. E o lucrare
   care poate să nu vină - trebuie să se vadă din prima că nu e zi ocupată,
   chiar dacă stă în același desen cu lucrările adevărate. */
.cal-bar-tender {
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.45) 0 5px, rgba(255,255,255,0) 5px 10px);
  border: 1px dashed rgba(255,255,255,.85);
  opacity: .85;
}

.cal-unscheduled-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cal-unscheduled-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); padding: 8px 12px; font-size: 13px;
}
/* Numele pe primul rând, sub el liftul / clientul / codurile: rândul avea doar
   numele, iar lățimea rămasă stătea goală pe tot ecranul. */
.cal-unscheduled-main { flex: 1; min-width: 0; }
.cal-unscheduled-detail { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* Codul EQ/Net nu se rupe în două: un număr tăiat pe două rânduri nu mai poate
   fi citit dintr-o privire și nici comparat cu PO-ul. */
.cal-unscheduled-detail .mono { white-space: nowrap; }
/* Pe telefon prețul și echipa coboară sub nume: alături, textul rămânea pe o
   treime de ecran și se rupea pe trei rânduri. */
@media (max-width: 720px) {
  .cal-unscheduled-item { flex-wrap: wrap; gap: 4px 10px; }
  .cal-unscheduled-main { flex: 1 0 100%; }
  .cal-unscheduled-price { margin-left: auto; }
}
.cal-unscheduled-price { font-size: 13px; white-space: nowrap; }
.cal-unscheduled-reason { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ---------- Ceasul, lângă numele companiei ----------
   Data completă pe primul rând, cu font mai mare, apoi cele trei fusuri unul
   lângă altul pe un singur rând: RO (ceasul principal, cel mai mare) și în
   dreapta lui ES/IT/FR și POR/TEN. Nimic ascuns, nimic de dat click. */
.hero-title-clock {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
}
/* Ceasul pe orizontală, fără chenar: data și cele trei fusuri pe aceeași
   linie cu numele firmei. Chenarul și fundalul îl făceau un bloc separat, deci
   cereau un etaj al lor. */
.world-clock {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 10px; flex: 0 1 auto; min-width: 0;
  display: flex; flex-direction: row; align-items: baseline; gap: 14px;
  flex-wrap: wrap; line-height: 1.1;
}
/* Data: centrată deasupra orelor și întinsă pe lățimea lor prin spațierea
   literelor, ca antetul să arate ca un bloc, nu ca două texte lipite. Linia
   de despărțire s-a apropiat de dată (4px -> 1px): antetul e primul lucru de
   pe ecran, iar fiecare pixel luat de el e luat din listă. */
.world-clock-date {
  font-size: 13px; line-height: 1.15; letter-spacing: .3px;
  font-weight: 700; color: var(--text); white-space: nowrap;
}
.world-clock-zones { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.world-clock-zone { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.world-clock-row-label { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.world-clock-row-time { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.world-clock-zone-main .world-clock-row-label { color: var(--text); font-weight: 700; font-size: 11px; }
.world-clock-zone-main .world-clock-row-time { font-size: 16px; font-weight: 700; color: var(--text); }

/* Pe telefon fusurile secundare trec pe rândul următor dacă nu încap, dar
   rămân tot vizibile - fără click, fără ascundere. */
@media (max-width: 720px) {
  .world-clock { padding: 5px 10px; }
  .world-clock-date { font-size: 11px; }
  .world-clock-zones { gap: 12px; }
  .world-clock-row-time { font-size: 12px; }
  .world-clock-zone-main .world-clock-row-time { font-size: 16px; }
}

.note-row { display: flex; align-items: flex-start; gap: 10px; }
.note-row input[type="checkbox"] { width: auto; margin-top: 3px; }
.note-row-text { flex: 1; font-size: 13px; }
.note-row-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notes-history { display: block; padding: 8px 2px 2px; }
.notes-history.collapsed { display: none; }

/* Cifrele de pe Acasa, mici si dese.
   Erau nouă blocuri de 160 px lățime cu cifra la 24 px - ocupau două rânduri
   întregi de ecran ca să spună nouă numere care se citesc dintr-o privire.
   Acum sunt pastile de 108 px: aceleași cifre, un rând, restul ecranului
   rămâne pentru ce se face cu ele. */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 6px; margin-bottom: 8px; }
.dash-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 6px 9px; }
.dash-card-value { font-family: var(--disp); font-size: 17px; font-weight: 700; line-height: 1.05; margin-bottom: 2px; }
.dash-card-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); line-height: 1.2; }
.dash-card-danger {
  border-left-color: var(--red);
  border-left-width: 5px;
  background: rgba(229, 83, 75, .08);
  box-shadow: 0 0 0 1px rgba(229, 83, 75, .3);
}
.dash-card-danger .dash-card-value { color: var(--red); }
.dash-card-warn { border-left-color: var(--accent); }
.dash-card-warn .dash-card-value { color: var(--accent); }
/* ---------- Planning si Cazari, in mic, pe Acasa ----------
   Acelasi calendar ca in module, la alta scara: aceleasi clase (.cal-grid,
   .cal-row, .cal-bar), doar dimensiunile coboara. Asa nu exista un al doilea
   fel de calendar de intretinut, iar ochiul recunoaste desenul. */
.dash-mini-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 10px; margin: 4px 0 10px;
}
.dash-mini {
  background: var(--panel); border: 1px solid var(--border);
  padding: 7px 9px 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.dash-mini-head {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
}
.dash-mini-head b { color: var(--text); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.dash-mini-go {
  margin-left: auto; color: var(--accent); font-size: 11px; background: none;
  border: 0; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0;
}
.dash-mini-go:hover { text-decoration: underline; }
.dash-mini-empty { font-size: 11.5px; color: var(--muted); padding: 10px 0; }
.mini-cal-scroll { overflow-x: auto; }
/* Scara mica: randuri de 15 px, zile de 8 px. Textul din antet coboara la 7 px
   - nu se citeste zi de zi, dar da conturul lunii. */
.mini-cal-grid .cal-day-cell { font-size: 7px; line-height: 12px; height: 12px; }
.mini-cal-grid .cal-month-cell { font-size: 8px; line-height: 13px; height: 13px; }
.mini-cal-grid .cal-label-cell { font-size: 10px; padding: 0 5px; }
.mini-cal-label { display: block; width: 100%; min-width: 0; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
/* Barele n-au text la scara asta: la 8 px pe zi nu incape o litera, iar o
   litera taiata arata a greseala. Numele intreg e in tooltip. */
.mini-cal-bar { height: 11px; border-radius: 2px; padding: 0; font-size: 0; }

.dash-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 10px; }
tr.dash-row-danger td { background: rgba(229, 83, 75, .12); }
/* O valoare care se citește ca UN TOT - codul echipei („TEAM6 ES - DRĂGUȘAN"),
   o sumă cu moneda ei („53.350,00 lei") - nu are voie să se rupă pe două
   rânduri: rupt, codul pare două echipe, iar suma pare două sume. Coloana își
   ia lățimea de care are nevoie; pe telefon tabelul devine cartonașe, unde
   fiecare valoare are oricum rândul ei. */
td.valoare-intreaga { white-space: nowrap; }

/* Smart suggestion banner ("Proiect similar găsit") under the "Nume proiect"
   field in the "Proiect nou" form. */
.similar-project-banner {
  margin-top: 6px; padding: 8px 10px; font-size: 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.similar-project-banner.collapsed { display: none; }
tr.dash-row-warn td { background: rgba(242, 153, 74, .12); }

/* ---------- Echipe tab: two-column layout (Echipe | Angajați) ---------- */
.echipe-columns { display: grid; grid-template-columns: minmax(560px, 1.4fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.echipe-header-row { align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.echipe-header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.echipe-header-controls .list-sort-controls { flex-wrap: nowrap; }
.echipe-col-teams, .echipe-col-workers {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.echipe-col-teams table, .echipe-col-workers table { background: transparent; }
.echipe-col-teams td, .echipe-col-teams th { white-space: normal; }
/* Table never spills out of the card: horizontal scroll inside instead. */
.echipe-table-scroll { overflow-x: auto; max-width: 100%; }
.echipe-col-workers td, .echipe-col-workers th { white-space: nowrap; }
.echipe-col-teams .member-name-line { white-space: nowrap; font-size: 12px; line-height: 1.5; display: flex; align-items: center; gap: 6px; }
.role-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; min-width: 16px; border-radius: 50%;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.role-dot-montator { background: rgba(76, 175, 125, .18); color: var(--green); border: 1px solid var(--green); }
.role-dot-ajutor { background: rgba(242, 153, 74, .18); color: #f2994a; border: 1px solid #f2994a; }
/* Compact Editează/Șterge buttons in the narrow Echipe column: side by side,
   wrapping onto a new line within the cell if needed, never overflowing. */
.echipe-col-teams .row-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.echipe-col-teams .row-actions button.small { padding: 3px 6px; font-size: 10px; }
@media (max-width: 560px) { .echipe-columns { grid-template-columns: 1fr; } }

/* Mobile compaction: single-row scrollable tabs bar + tighter vertical
   spacing around panels so the useful content (e.g. the Planning Gantt
   chart) is reachable without scrolling through empty padding first.
   #app supplies the actual padding that wraps every .panel. */
@media (max-width: 768px) {
  /* Doar butoanele derulează lateral; "+ Adaugă rapid" și căutarea trec pe
     rândul de dedesubt, în afara zonei care derulează, ca meniul lor să nu
     mai fie tăiat. */
  /* Filele deruleaza lateral, iar „+" si lupa stau pe ACELASI rand, lipite in
     dreapta - dar tot in afara zonei care deruleaza, deci meniul lor nu mai e
     taiat (asta era motivul pentru care fusesera trimise pe randul de jos).
     Randul castigat inseamna 50 px in fiecare modul. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; }
  .tab { flex: 0 0 auto; }
  .tabs-bar { flex-wrap: nowrap; gap: 6px; }
  /* Pe telefon butoanele urca in antet (app.js::asazaControaleleAntet), deci
     cutia lor ramane goala - o ascunde tot JS-ul, dupa ce le-a mutat, ca sa nu
     dispara nimic daca n-a apucat. */
  /* ---- Filele stau SUS, pe acelasi rand cu butoanele ----

     Au fost mutate jos, la degetul mare, si s-au intors: pe iPhone marginea de
     jos e banda gestului de acasa, iar o bara acolo - chiar si ridicata peste
     ea - face ca fiecare apasare sa riste sa scoata omul din program. Nu merita
     comoditatea degetului cu pretul asta.

     In schimb, antetul e pe DOUA randuri, nu patru:
       1. numele firmei, data cu ceasurile si tema;
       2. clopotelul, meniul, utilizatorul, "+", cautarea SI bara de module.
     Butoanele care stateau in antet coboara pe randul filelor (vezi
     app.js::asazaControaleleAntet) - asa nu mai ocupa un rand doar ale lor,
     iar filele se trag lateral in spatiul ramas. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; min-width: 0; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }
  .tabs .tab { scroll-snap-align: center; }
  /* Butonul „+" sta acum tot in dreapta sus (a urcat in antet), deci meniul
     ramane ancorat la dreapta lui - ancorat la stanga, iesea din ecran si se
     taiau ultimele optiuni. */
  .quick-add-menu { right: 0; left: auto; }
  /* Cand scrii, caseta de cautare se lateste si trece pe randul ei; lista de
     rezultate se aliniaza atunci la STANGA casetei, altfel (ancorata la
     dreapta) iesea din ecran pe stanga si se taiau primele litere. */
  /* Pe telefon caseta de cautare sta in coltul din dreapta, iar un panou de
     360px ancorat de ea iesea cu 108px dincolo de marginea STANGA a
     ecranului. Fixat de fereastra, nu de casuta: ia latimea ecranului. */
  .global-search-results {
    position: fixed; top: auto; left: 8px; right: 8px;
    width: auto; min-width: 0; max-width: none; max-height: 70vh;
  }
  #app { padding: 8px 10px 32px; }
  .toolbar { margin-bottom: 8px; gap: 6px; }
}

/* ---------- Settings sub-navigation (Setari tab) ---------- */
/* Sub-filele stau pe UN singur rând și se trag lateral când nu încap.

   Economicul are douăsprezece: cu `flex-wrap` se rupeau pe două rânduri, adică
   încă 38px de ramă pe fiecare ecran din modul, chiar dacă te uiți la un tabel
   de două sute de rânduri. Lățimea nu se atinge - nu s-a mutat nimic lateral,
   doar se derulează bara în sine. `scroll-snap` face ca tragerea să oprească
   pe o filă întreagă, nu pe jumătatea unui cuvânt. */
.subtabs {
  display: flex; gap: 2px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.subtabs > * { flex: 0 0 auto; scroll-snap-align: start; }
.subtab {
  font-family: var(--sans); font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); background: none; border: none;
  padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent;
}
.subtab.active { color: var(--text); border-bottom-color: var(--accent); }
.subtab:hover { color: var(--text); }
.subpanel { display: none; }
.subpanel.active { display: block; }

/* ---------- Finance hub (6 big category cards) ----------
   The Finance module opens on a hub of tactile category cards instead of
   dropping the user directly into one sub-section. Cards are theme-aware
   (all colors via CSS vars), responsive (auto-fit grid), and lift on hover
   for a physical, button-like feel. */
.finance-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
/* Șase butoane ocupau un ecran întreg: 180px înălțime fiecare, plus o
   explicație pe care n-o mai citește nimeni după a doua folosire. Pictograma
   și titlul spun tot. Explicația se ascunde dintr-o regulă, nu se șterge din
   fiecare loc - Economic o scrie în HTML, Documente o generează din JS. */
.finance-card-sub { display: none !important; }
.finance-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.finance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border-color: var(--accent);
}
.finance-card-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.finance-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ============================================================================
   Tema "Alb curat, doar linii" (C03) - structural overrides.
   The palette above only removes colour; these rules are what actually make
   the theme work: panels lose their fill, and hierarchy is carried by rule
   weight (2px under group/table headers) plus bold text instead of shading.
   ========================================================================== */
body.theme-alb-linii th {
  border-bottom: 2px solid var(--border-strong);
  color: var(--text);
  font-weight: 700;
}
body.theme-alb-linii tr:hover td { background: var(--panel-2); }
body.theme-alb-linii .section-title {
  border-bottom: 2px solid var(--border-strong);
  color: var(--text);
}
body.theme-alb-linii .card,
body.theme-alb-linii .dash-card,
body.theme-alb-linii .empty {
  background: none;
  box-shadow: none;
  border: 1px solid var(--border);
}
body.theme-alb-linii button.primary { box-shadow: none; }
body.theme-alb-linii .hero { border-bottom: 2px solid var(--border-strong); }

/* ============================================================================
   B01 - "Iconiță cu etichetă". Toolbar actions as an icon with a small label
   underneath: readable without hovering, and a big enough target for a finger
   on site. Used through the class `btn-ico`; the existing `primary`/`ghost`
   classes still decide the colour, so nothing else has to change.
   ========================================================================== */
.btn-ico {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 62px;
  padding: 6px 12px 5px;
  line-height: 1.1;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2px;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ico .ico { font-size: 18px; line-height: 1; }
.btn-ico:hover { border-color: var(--accent); color: var(--accent); }
.btn-ico.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: none;
  padding: 6px 12px 5px;
  font-size: 10px;
}
.btn-ico.primary:hover { filter: brightness(1.08); color: var(--accent-text); }
.btn-ico.danger:hover { border-color: var(--red); color: var(--red); }
.btn-ico[disabled] { opacity: .4; cursor: not-allowed; }
.btn-ico-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }

/* On a phone the label is what makes these usable, so keep it - just tighten
   the padding so a row of four still fits across the screen. */
@media (max-width: 720px) {
  .btn-ico { min-width: 54px; padding: 5px 8px 4px; font-size: 9px; }
  .btn-ico .ico { font-size: 16px; }
}

/* ============================================================================
   B04 - "Acțiuni la selecție". The toolbar stays quiet; the moment rows are
   ticked, a band appears with the count and exactly the actions that apply to
   those rows. Sticks to the top of the viewport so it stays reachable while
   scrolling a long list.
   ========================================================================== */
.sel-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}
.sel-bar[hidden] { display: none; }
.sel-bar .sel-count { font-weight: 700; font-size: 13px; white-space: nowrap; }
.sel-bar .grow { flex: 1; }
.sel-bar button,
.sel-bar select {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
}
.sel-bar select option { color: var(--text); background: var(--panel); }
.sel-bar button:hover { background: rgba(255, 255, 255, .18); }
.sel-bar .sel-close { border: none; font-size: 15px; padding: 4px 8px; }

th.sel-col, td.sel-col { width: 30px; padding-left: 10px; padding-right: 0; }
td.sel-col input[type="checkbox"], th.sel-col input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); margin: 0;
}
tr.row-selected td { background: var(--panel-2); }
body.theme-alb-linii .sel-bar { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- Centrul de notificări (clopoțelul din bara de sus) ---------- */
/* Clopoțelul: mărit la scara antetului (titlu + ceas) și împins spre stânga,
   ca bulina roșie să nu mai cadă peste numele utilizatorului de dedesubt. */
.notif-wrap { position: relative; margin-right: 10px; }
.notif-bell {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 26px; line-height: 1;
  /* Aceeași înălțime cu selectorul de temă de alături, ca cele două să stea
     pe o linie, nu unul mai scund decât celălalt. */
  height: 38px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 8px; cursor: pointer; font-family: var(--sans); white-space: nowrap;
}
.notif-bell:hover { border-color: var(--accent); }
.notif-badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  line-height: 17px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; text-align: center; padding: 0 4px;
}
.notif-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  /* Mai lat decât înainte (420px): cardurile au titlu, detaliu și butoane pe
     același rând, iar la 420px textul se rupea după două cuvinte. */
  width: min(480px, 92vw); max-height: 70vh; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.notif-panel.collapsed { display: none; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel);
}
.notif-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; }
.notif-item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--panel-2); }
/* Bulina colorată e singurul indiciu de gravitate, ca panoul să rămână
   citibil - un fundal colorat per rând ar face lista obositoare. */
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-body { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Notificări importante, ca fișe ----------
   Cazările, notițele, ITP-ul, asigurările și vignetele stau în față, sub formă
   de carduri (aceeași formă ca notițele de pe Acasă). Restul rămâne dedesubt,
   strâns, în lista compactă de mai sus - nu se pierde nimic, doar se schimbă
   ce se vede primul. */
.notif-section-title {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
/* Rândurile se ating, despărțite de o linie: spațiul dintre carduri era
   jumătate din motivul pentru care panoul se termina după cinci alerte. */
/* Rândurile unei categorii. Numele NU conține „card": verificarea de aspect
   tratează orice element cu „card" în clasă drept un singur cartonaș de
   telefon și ar număra butoanele tuturor rândurilor la un loc. */
.notif-group-rows { display: flex; flex-direction: column; gap: 0; padding: 0; }
.notif-card {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.notif-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notif-card-badge {
  color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 8px;
}
.notif-card-cat { font-size: 10.5px; color: var(--muted); }
.notif-card-days { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.notif-card-title { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.notif-card-body { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.notif-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.notif-card-hint { font-size: 10.5px; color: var(--muted); font-style: italic; }

/* ---------- Alerta ca RÂND ----------
   Cardul cerea 103 px: trei etichete, titlu, o linie care repeta data și patru
   butoane. Cu treisprezece alerte vedeai cinci. Rândul cere 36 px și le arată
   pe toate.

   Gravitatea e dunga din stânga (`--sev`, pusă pe rând din JS), categoria a
   intrat în text, iar acțiunile stau la dreapta - vizibile tot timpul, nu la
   trecerea cu mouse-ul: aici se lucrează repede, nu se explorează. */
.notif-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border);
  position: relative; flex-wrap: wrap;
}
.notif-row:last-of-type { border-bottom: 0; }
.notif-row:hover { background: var(--panel-2); }
.notif-sev { width: 3px; align-self: stretch; min-height: 26px; background: var(--sev); flex: 0 0 3px; }
.notif-row-main { flex: 1 1 160px; min-width: 0; }
.notif-row-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-row-b { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-row-when { font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
                  font-variant-numeric: tabular-nums; }
.notif-row-act { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.notif-only-wide { display: flex; gap: 4px; }
.notif-only-narrow { display: none; }
.notif-act-main { padding: 2px 8px; font-size: 11.5px; }
.notif-ico {
  width: 26px; height: 24px; padding: 0; font-size: 13px; line-height: 1;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 3px; cursor: pointer;
}
.notif-ico:hover { color: var(--text); border-color: var(--muted); }
.notif-dots {
  width: 28px; height: 24px; padding: 0; font-size: 15px; line-height: 1;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 3px; cursor: pointer;
}
/* Meniul de sub rând, pe telefon: ocupă toată lățimea rândului, ca degetul să
   nu rateze. */
.notif-row-menu { flex: 1 0 100%; display: flex; flex-direction: column; margin: 4px 0 2px 3px; }
.notif-row-menu button {
  text-align: left; padding: 8px 10px; font-size: 12.5px;
  border: 0; border-top: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  cursor: pointer;
}
/* Bulina clopoțelului, calmă când nu e nimic depășit: numărul rămâne, alarma nu. */
.notif-badge-calm { background: var(--muted) !important; }

@media (max-width: 720px) {
  .notif-only-wide { display: none; }
  .notif-only-narrow { display: inline-flex; align-items: center; justify-content: center; }
  /* „⋯" ia exact înălțimea lui „Rezolvă" de lângă el (pe telefon butoanele
     cresc la 40px, ca degetul să nimerească): cu înălțimea fixă de 24px cele
     două butoane porneau de la înălțimi diferite, iar verificarea de aspect
     le raporta decalate. */
  .notif-dots { height: auto; align-self: stretch; }
  /* Pe telefon titlul are voie să se rupă pe două rânduri: nu ai unde să treci
     cu mouse-ul ca să vezi ce s-a tăiat. */
  .notif-row-t, .notif-row-b { white-space: normal; }
}

/* Capetele de CATEGORIE din panoul de notificări („Cazări", „Flotă", …).
   Aceeași înălțime ca un rând de notificare, ca teancul să rămână citibil:
   bulina ia culoarea celei mai grave alerte din categorie, numărul stă la
   dreapta. Culorile și bordurile sunt cele deja folosite în panou. */
.notif-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer;
}
.notif-group-head:hover { background: var(--panel-2); }
.notif-group-arrow { color: var(--muted); font-size: 10px; width: 10px; }
.notif-group-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.notif-group-name { flex: 1; min-width: 0; }
.notif-group-count { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.notif-group-rows.collapsed { display: none; }

/* Setări > Importanța notificărilor: categoriile una lângă alta, nu una sub
   alta pe toată lățimea (sunt cincisprezece rânduri scurte). Dunga din stânga
   arată nivelul ales dintr-o privire. */
.notif-prio-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
}
.notif-prio-item {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
}
.notif-prio-item label { font-size: 12px; color: var(--muted); }
.notif-prio-item.prio-max { border-left-color: #c0392b; }
.notif-prio-item.prio-normal { border-left-color: #4a7fc1; }
.notif-prio-item.prio-low { border-left-color: #8e979d; }
.notif-prio-actions { display: flex; gap: 10px; margin-top: 12px; }

/* Sumarul de sus din panou: „Restante 21 · Azi 2 · Mâine 1 · În 3 zile 5".
   Fiecare bucată e un buton-filtru; culoarea cifrei e gravitatea ferestrei,
   iar cea apăsată se vede prin ramă, nu prin fond plin (fondul plin ar face
   din sumar cel mai zgomotos lucru din panou, deși e doar un rezumat). */
.notif-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--border);
}
.notif-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; line-height: 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--muted); font-size: 11px; white-space: nowrap; cursor: pointer;
}
.notif-chip b { color: var(--sev, var(--text)); font-size: 12px; }
.notif-chip:hover { background: var(--panel-2); }
.notif-chip.active { border-color: var(--sev); color: var(--text); background: var(--panel-2); }
.notif-chip-reset { font-weight: 600; }

/* Ce are prioritate scăzută (acte de identitate, carduri, hârtii de firmă)
   rămâne în listă, dar scris mai stins: nu întrerupe, doar se vede. */
.notif-row-low .notif-row-t b { font-weight: 600; color: var(--muted); }

/* Capetele de SUBGRUPĂ („Protecția muncii", „ITP", „Vizită medicală"):
   același rând ca la categorie, dar tras spre dreapta și mai puțin apăsat -
   se vede dintr-o privire că e un teanc dinăuntrul categoriei, nu o categorie
   nouă. Strâns, rândul spune câte sunt și cât mai e până la cea mai apropiată. */
.notif-sub-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 26px; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.notif-sub-head:hover { background: var(--panel-2); }
.notif-sub-head .notif-group-name { color: var(--text); }
.notif-sub-rows.collapsed { display: none; }
.notif-subsection-title {
  padding: 6px 4px 2px 12px; font-size: 11px; font-weight: 600; color: var(--muted);
}

/* Capetele pliabile: „Restul notificărilor” și „Istoric rezolvate”. */
.notif-collapse-head {
  padding: 8px 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.notif-collapse-head:hover { background: var(--panel-2); }
.notif-list.collapsed, .notif-history.collapsed { display: none; }
.notif-history-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.notif-history-row:last-child { border-bottom: none; }

/* Popup-ul de notificări de la deschiderea aplicației */
.notif-popup-list { max-height: 55vh; overflow-y: auto; margin-bottom: 6px; }
.notif-popup-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.notif-popup-row:last-child { border-bottom: none; }
.notif-popup-check { display: flex; align-items: center; padding-top: 2px; }
.notif-popup-check input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.notif-popup-check input:disabled { cursor: not-allowed; opacity: .4; }

/* ---------- Compactare pe telefon (aplicată în TOT programul) ----------
   Pe un ecran de telefon se pierdeau 4-5 rânduri întregi pe antet înainte de
   primul rând de date. Regulile de mai jos atacă exact ce ocupa spațiu fără
   să adauge informație. */
@media (max-width: 720px) {
  /* --- Antetul, pe doua randuri in loc de patru ---
     Pe telefon, blocul de sus se rupea in patru: numele firmei, data, ceasurile
     si randul cu clopotelul - 172 px inainte de bara de file. Numele coboara la
     marimea unui rand normal si sta pe aceeasi linie cu clopotelul, tema si
     utilizatorul; data si cele trei fusuri raman impreuna, dedesubt. */
  .hero { gap: 6px 10px; padding-bottom: 4px; margin-bottom: 6px; }
  /* `display: contents` scoate cutia intermediara din calcul, ca numele firmei
     si ceasul sa devina copii directi ai antetului - altfel nu se pot aseza
     unul pe primul rand (langa clopotel) si altul pe al doilea. */
  .hero-title-clock { display: contents; }
  /* Randul 1: numele firmei, data cu ceasurile, tema. Atat. */
  .hero h1 { font-size: 13px; letter-spacing: .3px; flex: 1 1 auto; order: 1; }
  .hero-right { order: 2; gap: 8px; flex: 0 0 auto; }
  /* --- Randul 1 al antetului: numele firmei si butoanele ---
     Butoanele au urcat aici (app.js::asazaControaleleAntet), ca bara de module
     sa ramana singura pe randul ei. Numele firmei se strange si se taie cu
     puncte daca nu incape - el e acelasi pe toate ecranele, pe cand butoanele
     sunt de apasat. */
  .hero h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Sase butoane scrise cu text nu incap pe 375px. Pe telefon raman afara doar
     cele care se apasa des sau poarta o informatie: clopotelul (are numarul pe
     el), "+" si cautarea. Densitatea, utilizatorul, Logout SI tema intra sub
     "..." - raman in pagina, doar ascunse, iar meniul cheama exact functiile
     lor. Zona apasabila ramane de 40px (vezi regula de mai sus). */
  .antet-meniu-btn { padding: 4px 10px; font-size: 15px; line-height: 1; }
  .quick-add-btn { padding: 8px 12px; }
  .global-search-wrap input { width: 40px; padding-left: 24px; padding-right: 4px; }
  /* La scris, caseta ia cat mai mult din rand: cu 150px nu incapea un nume
     intreg si nu se vedea ce ai tastat. */
  .global-search-wrap input:focus { width: min(62vw, 260px); }

  /* --- Randul 3: BARA DE MODULE, pe toata latimea ---
     Asta era problema: bara imparteau randul cu butoanele si se vedea un
     singur modul din noua. Acum are ecranul intreg, filele sunt mai mari (se
     ating cu degetul, nu cu unghia), se trag lateral cu oprire pe filă
     intreaga, iar cea activa se centreaza singura (app.js).

     FARA `overflow: hidden` pe `.tabs-bar`: meniurile care se deschid din ea
     ar fi taiate. Latimea o tine `.tabs`, care are derularea lui. */
  .tabs-bar { max-width: 100%; margin-bottom: 10px; }
  .tabs { flex: 1 1 100%; min-width: 0; gap: 4px; }
  .tabs .tab {
    font-size: 13px; letter-spacing: .4px; padding: 9px 14px;
    background: var(--panel-2); color: var(--text);
  }
  .tabs .tab.active { background: var(--accent); color: var(--accent-text); }
  .tabs .tab-home { padding: 9px 12px; }
  /* La derulare bara se subtiaza, dar nu sub degetul omului. */
  body.is-scrolled .tab { padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
  /* Data si ceasurile intra pe ACELASI rand cu numele firmei, nu pe al doilea:
     un rand intreg de antet costa ~26px pe fiecare ecran din program, iar ora
     se citeste la fel de bine cu doua puncte mai mic. Cand nu incap, se trag
     lateral - nu se rup pe inca un rand. */
  .world-clock {
    order: 3; width: 100%; padding: 0; gap: 6px; margin: 0;
    display: flex; align-items: baseline; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    /* Fara `min-width: 0`, un element flex nu se micsoreaza sub latimea
       continutului lui: ceasul cu trei fusuri iesea din ecran (399px pe un
       telefon de 375) si intindea toata pagina, desi avea derulare proprie. */
    min-width: 0; max-width: 100%;
  }
  .world-clock::-webkit-scrollbar { display: none; }
  .world-clock > * { flex: 0 0 auto; }
  .world-clock-date { font-size: 10px; }
  .world-clock-zones { display: flex; gap: 6px; flex-wrap: nowrap; }
  .world-clock-row-time { font-size: 10px; }
  .world-clock-zone-main .world-clock-row-time { font-size: 12px; }
  .world-clock-row-label { font-size: 9px; }
  .theme-select { padding: 4px 8px; font-size: 11px; max-width: 120px; }

  /* --- Randul cu „Adauga rapid" si cautarea ---
     Butonul ramane doar „+", iar cautarea e o lupa care se intinde cat scrii.
     NU se muta in bara de file: acolo, meniul deschis ar fi taiat de derularea
     ei laterale (vezi comentariul din index.html). */
  .quick-add-btn { font-size: 0 !important; padding: 5px 12px; }
  .quick-add-btn::after { content: "+"; font-size: 18px; line-height: 1; }
  .global-search-wrap { flex: 0 1 auto; }
  .global-search-wrap input { width: 42px; transition: width .18s ease; }
  .global-search-wrap:focus-within input { width: min(60vw, 240px); }

  /* --- Capul de modul, stans (ideile 1-4) --- */
  /* 1. Titlul modulului: fila activa de deasupra scrie acelasi lucru. */
  .panel > .toolbar > h2 { display: none; }
  /* 2. Butoanele raman, textul lor nu: font-size 0 pe buton, normal pe
     iconita. Nu se muta niciun nod, deci nu se strica modulele care isi
     redeseneaza bara. Numele ramane in `title` (apasare lunga). */
  .panel .btn-ico { font-size: 0; padding: 5px 8px; gap: 0; }
  .panel .btn-ico .ico { font-size: 15px; }
  /* 3. Filtrele intra sub buton. */
  .module-filters-toggle { display: inline-flex; }
  /* `!important` fiindca `.only-narrow` se declara tot cu `!important` (vezi
     mai jos): fara el, filtrele de telefon ar ramane vizibile exact acolo
     unde trebuiau ascunse. */
  .panel:not(.filters-open) .filter-bar-row > .is-filter-ctl { display: none !important; }
  .panel:not(.filters-open) .filter-bar-row { gap: 6px; }
  /* Rândul rămas numai cu filtre ascunse se scoate de tot: gol, tot și-ar
     ocupa înălțimea. Eticheta o pune app.js::syncFilterRows; ascunderea e
     AICI, ca filtrele să rămână pe ecran pe calculator, unde butonul „⚙ Filtre"
     nici nu se afișează. */
  .panel:not(.filters-open) .filter-bar-row.only-filters { display: none !important; }
  /* 4. Bara ramane lipita sus cat derulezi lista. Antetul pleaca - nu e nevoie
     de ceas in timpul lucrului - dar butoanele si filtrele raman la indemana. */
  /* Pe telefon bara comuna se rupe oricum pe randuri, iar separatorul dintre
     actiuni si filtre n-are ce despartii cand filtrele sunt ascunse. */
  .module-header { padding: 3px 0; gap: 6px; }
  .module-sep { display: none; }

  /* Titlul modulului repetă tab-ul activ de deasupra ("ECONOMIC" sub
     ECONOMIC). Pe telefon dispare; pe desktop rămâne, unde e loc. */
  .panel > .toolbar > h2:only-child,
  #panel-finance > .toolbar > h2,
  #panel-proiecte > .toolbar > h2,
  #panel-configurare > .toolbar > h2 { font-size: 13px; margin: 0; }

  /* Subtab-urile pe un singur rând, derulabil lateral, în loc să curgă pe
     două-trei rânduri. */
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subtab { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; }

  /* Butoanele-pilulă de filtrare: mai mici, ca patru dintre ele să încapă. */
  .country-filter-btn { padding: 5px 10px; font-size: 12px; }
  .filter-bar-row, .country-filter-bar { gap: 6px; margin-bottom: 10px; }

  /* Butoanele mici de acțiune din antetele de grup - să nu forțeze lățimea. */
  .group-toggle-row button.small { padding: 4px 8px; font-size: 11px; }

  /* Tabelele foarte late rămân derulabile în containerul lor, nu împing
     pagina în lateral. */
  .echipe-table-scroll { overflow-x: auto; }
}

/* Navigarea între cicluri (Salarii), pe același rând cu vizualizările. */
/* Lucrare cu plata VALIDATA: randul se vede blocat (verde), ca sa se distinga
   dintr-o privire ce e rezolvat de ce mai e de facut. Nu e "dezactivat" - se
   poate debloca oricand cu butonul de pe rand (vezi finance_salarii.js). */
/* Lista de versiuni din listele de preturi isi ia latimea dupa cea mai lunga
   optiune („din 25.09.2026 — anterioara ✔ in vigoare"), iar pe telefon asta
   impingea randul in afara ecranului. */
.toolbar .filter-select { max-width: 100%; }
@media (max-width: 720px) {
  .toolbar .filter-select { flex: 1 1 140px; min-width: 0; }
}
/* Sortarea dupa capul de tabel + alegerea coloanelor, pentru toate tabelele
   (vezi frontend/js/table_tools.js). Semnul de sortare nu are voie sa mute
   textul capului cand apare, de-aia are latime fixa. */
.tt-th { position: relative; }
.tt-sort-mark { display: inline-block; min-width: 12px; font-size: 10px; }
.tt-columns-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; margin-left: 4px;
}
.tt-columns-btn:hover { color: var(--accent); }
.tt-columns-menu { max-height: 60vh; overflow: auto; }
/* Lucrare SCOASA de pe fisa: se arata doar ca sa poata fi pusa la loc, deci
   trebuie sa se vada ca nu mai conteaza - taiata si stinsa, nu doar gri. */
.payslip-row-hidden { opacity: .5; }
.payslip-row-hidden td:not(.sel-col) { text-decoration: line-through; }
.salarii-row-locked { background: rgba(76, 175, 125, .10); }
.salarii-row-locked > td { border-left: 0; }
.salarii-row-locked > td:first-child { box-shadow: inset 3px 0 0 #4caf7d; }
.salarii-badge-validat {
  background: rgba(76, 175, 125, .15); color: #4caf7d; border: 1px solid #4caf7d;
  font-size: 10px;
}
.salarii-cycle-nav { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.salarii-cycle-nav b { font-size: 13px; }
/* Lista de cicluri își ia lățimea după cea mai lungă opțiune („16 aug – 15 sep
   2027"), iar pe telefon asta împingea rândul în afara ecranului. Pe lat o
   limităm, pe îngust rândul are voie să se rupă. */
.salarii-cycle-nav .filter-select { max-width: 200px; }
@media (max-width: 720px) {
  .salarii-cycle-nav { flex-wrap: wrap; white-space: normal; }
  .salarii-cycle-nav .filter-select,
  .salarii-cycle-nav input[type="date"] { flex: 1 1 140px; min-width: 0; max-width: 100%; }
}

/* Ecranul Salarii, lista pe oameni: Câștigat − Avans = De plată + Stare.
   Chipul de rol și pastilele de stare sunt cele de pe fișă (.ps-role-chip,
   .ps-state, .ps-pill-warn): Montator = --blue, Ajutor = --green. */
a.row-link.sal-name { display: inline; font-weight: 600; }
.sal-name + .ps-role-chip { margin-left: 6px; vertical-align: 1px; }
.sal-state { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sal-state .ps-pill-warn { margin-left: 0; }
.sal-mismatch { flex-basis: 100%; font-size: 11.5px; font-weight: 600; color: var(--red); }
.sal-closed-sum { color: var(--green); }
.sal-net b { font-size: 14px; }
.sal-bulk { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 720px) {
  .sal-bulk { justify-content: flex-start; }
}

/* Aceleași filtre, două forme: pilule pe desktop (un clic), select pe telefon
   (un rând în loc de trei). Comutarea se face din CSS, nu din JS, ca starea
   să rămână scrisă într-un singur loc și să nu fie nevoie de un listener de
   redimensionare. */
.only-narrow { display: none !important; }
.only-wide { display: contents; }
@media (max-width: 720px) {
  .only-narrow { display: inline-flex !important; }
  .only-wide { display: none !important; }
}

@media (max-width: 720px) {
  /* Un <select> își ia lățimea din cea mai lungă opțiune ("În așteptare /
     neatribuite"), așa că două filtre nu încăpeau pe un rând deși aveau loc.
     Limitarea lățimii le pune pe același rând; textul rămâne întreg în lista
     derulantă, unde chiar se citește. */
  .only-narrow .filter-select { max-width: 132px; }
  /* Eticheta "Sortează după" e redundantă lângă un select cu Nume/Data/Preț. */
  .list-sort-controls > label { display: none; }
}

/* ---------- Notițe: grilă compactă ----------
   Pe listă, fiecare notiță ocupa toată lățimea ecranului și cinci notițe
   umpleau tot Dashboard-ul. În grilă intră 3-4 una lângă alta pe monitor,
   una singură pe telefon. */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.note-card { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.note-card-head { display: flex; align-items: center; gap: 6px; }
.note-card-head input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; accent-color: var(--accent); }
/* Butoanele de trimis mai departe stau jos, despartite de text: sus, langa
   bifa de rezolvare, s-ar apasa din greseala. */
.note-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* Selectorul de prioritate ia spațiul rămas, iar butonul de șters stă la
   capăt - aceeași poziție pe fiecare card, oricât de lung e textul. */
.note-priority-select {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-family: var(--sans); font-size: 11px; padding: 2px 4px; cursor: pointer;
}
.note-priority-select:focus { outline: none; border-color: var(--accent); }
.note-card .note-row-text { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.note-card .note-row-meta { font-size: 10.5px; color: var(--muted); }
@media (max-width: 720px) {
  .notes-grid { grid-template-columns: 1fr; }
}

/* ---------- Notița ca RÂND ----------
   Aceeași formă ca alertele din clopoțel: dungă de prioritate, bifă, text,
   când, acțiuni la dreapta. Cartonașul cerea 124 px pentru o propoziție de
   cinci cuvinte, iar meniul de prioritate — un `<select>` desenat complet —
   ocupa singur un rând din el. */
.note-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.note-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.note-row:hover { background: var(--panel-2); }
/* Dunga e și butonul de prioritate: culoarea spune care e, clicul o schimbă. */
.note-sev {
  width: 4px; align-self: stretch; min-height: 24px; border: 0; padding: 0;
  border-radius: 0; cursor: pointer; flex: 0 0 4px;
}
.note-check {
  flex: 0 0 auto; font-size: 10.5px; padding: 3px 9px; margin: 0;
  border: 1px solid var(--border); border-radius: 3px; background: var(--panel);
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.note-check:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.note-row-main { flex: 1 1 160px; min-width: 0; }
.note-text { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.note-when { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto;
             font-variant-numeric: tabular-nums; }
.note-row-act { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Meniul de prioritate: mic, lângă dungă, nu un rând permanent în fiecare notiță. */
.note-priority-menu {
  position: absolute; z-index: 300; background: var(--panel);
  border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: flex; flex-direction: column; min-width: 170px;
}
.note-priority-menu button {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 12px; font-size: 12.5px; border: 0; background: none;
  color: var(--text); cursor: pointer;
}
.note-priority-menu button:hover { background: var(--panel-2); }
.note-sev-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Nr. echipament + Nr. network unul lângă altul, pe rândul lor. În grila de
   două coloane a formularului se suprapuneau peste câmpurile vecine, iar
   inputurile cu `size` fix nu se micșorau. */
.equip-pair-row {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
}
.equip-pair-row .equip-field { flex: 1 1 170px; min-width: 0; }
.equip-pair-row .equip-field input { width: 100%; }
@media (max-width: 720px) {
  .equip-pair-row { gap: 10px; }
  .equip-pair-row .equip-field { flex: 1 1 100%; }
}

/* Detalii Echipament: trei coloane fixe, deci Nr. echipament / Nr. network /
   Cod alternativ de pe primul rând se aliniază exact cu Număr stații /
   Model lift / Capacitate de pe al doilea. Cu `.grid2` generic, câmpurile se
   așezau la voia întâmplării și inputurile se întindeau pe toată lățimea. */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  align-items: start;
  margin-bottom: 14px;
}
.equip-grid .field { margin-bottom: 0; min-width: 0; }
.equip-grid .field input,
.equip-grid .field select { width: 100%; }
.equip-grid .equip-grid-full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .equip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .equip-grid { grid-template-columns: 1fr; } }

/* Tabelul Țări / Regiuni / Orașe. Rândurile de oraș sunt indentate sub
   regiunea lor, iar o linie mai groasă marchează începutul fiecărei țări -
   ierarhia se citește fără rowspan-uri care lăsau coloane goale. */
.geo-table td { vertical-align: middle; }
.geo-table .city-row .city-name { padding-left: 18px; color: var(--muted); }
.geo-table .city-row td { border-bottom: 1px solid var(--border); }
.geo-table tr.country-start td { border-top: 2px solid var(--border-strong, var(--border)); }
.geo-table .filter-select { font-size: 11px; padding: 3px 6px; }
.geo-table button.small { padding: 3px 8px; font-size: 11px; }

/* "Cod alternativ" încheie primul rând al grilei de echipament, ca al doilea
   rând (Stații / Model / Interval / KG exact) să înceapă de la prima coloană
   în loc să curgă din urma bifei. */
.equip-grid .equip-grid-rest { grid-column: 3 / -1; }
@media (max-width: 1100px) { .equip-grid .equip-grid-rest { grid-column: 1 / -1; } }

/* Antetul paginii de proiect rămâne lipit sus la derulare: pe un proiect lung
   nu mai trebuie să urci înapoi ca să vezi ce editezi sau ca să salvezi. */
.page-hero-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  padding-top: 8px;
}
.page-hero-sticky h1 { font-size: 19px; margin: 0 0 2px; }
.page-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .page-hero-sticky h1 { font-size: 15px; }
  .page-hero-sticky p { font-size: 11px; }
  .page-hero-actions button { padding: 6px 10px; font-size: 12px; }
}

/* Zona de ștergere: la finalul paginii, discretă. E o acțiune rară și
   periculoasă - nu are ce căuta lângă "Editează", unde se apasă din reflex. */
.danger-zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 12px;
  border-top: 1px solid var(--border);
  opacity: .75;
}
.danger-zone:hover { opacity: 1; }

/* Cât e gata dintr-un proiect și cât s-a decontat din el. Sunt DOUĂ mărimi
   diferite, care nu coincid întotdeauna: o echipă poate lăsa un lift la 70%
   făcut cu doar 50% decontat, iar diferența e exact ce li se cuvine celor
   care îl termină. De aceea sunt două bare una sub alta, nu una singură -
   suprapuse ar fi sugerat că e același număr citit în două feluri. */
.progress-track {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 4px; transition: width .2s ease; }
.progress-fill.done { background: #22a06b; }
.progress-fill.paid { background: #3b82f6; }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .progress-track { flex: 1; min-width: 60px; }
.progress-row .progress-label {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: 11px; color: var(--muted);
}
/* Varianta din tabelul de proiecte: cât mai scundă, ca rândul să nu crească. */
.progress-mini { width: 62px; height: 5px; }

/* Proiect finalizat = închis la editare. Bannerul explică de ce câmpurile nu
   se lasă schimbate, altfel blocarea ar părea o defecțiune. */
.locked-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin: 10px 0;
  border: 1px solid #22a06b55; background: #22a06b18;
  border-radius: 6px; font-size: 12px;
}

/* Lista de verificare de dinaintea finalizării. Punctele nerezolvate nu
   opresc finalizarea - sunt o listă de „ai uitat asta?”, nu o barieră. */
.check-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.check-item { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.check-item .check-mark { flex: 0 0 16px; text-align: center; font-weight: 700; }
.check-item.ok .check-mark { color: #22a06b; }
.check-item.missing .check-mark { color: #f2711c; }
.check-item.ok { color: var(--muted); }

/* ---------- Tabel lat -> cartonașe pe telefon ----------
   Lista de proiecte are unsprezece coloane. Pe un ecran de telefon nu încap:
   numele proiectului se rupea pe patru rânduri, iar butonul „Editează" ieșea
   dincolo de marginea din dreapta, deci nu se putea apăsa. Nici derularea
   laterală nu ajută - ca să vezi prețul trebuia să pierzi din ochi numele
   proiectului, adică exact perechea pe care o cauți.

   Aceleași rânduri devin cartonașe, dintr-o regulă CSS: HTML-ul rămâne un
   singur tabel, cu un singur șablon de rând. A doua variantă de HTML randată
   în paralel s-ar fi desincronizat de prima la prima coloană adăugată.
   Etichetele coloanelor vin din `data-label`, pus pe fiecare celulă, fiindcă
   antetul tabelului nu mai există aici ca să le poarte.

   Aceeași alegere ca la filtrele `only-narrow`/`only-wide`: comutarea se face
   din CSS, nu dintr-un listener de redimensionare în JS. */
@media (max-width: 720px) {
  .table-cards, .table-cards tbody { display: block; width: 100%; }
  .table-cards thead { display: none; }

  .table-cards tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
  }
  .table-cards td { display: block; border: 0; padding: 0; min-width: 0; }

  .table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    margin-bottom: 2px;
  }

  /* Numele, pe toată lățimea și mai mare: e primul lucru căutat, iar pe două
     coloane s-ar fi rupt din nou pe mai multe rânduri. Loc liber în dreapta
     pentru bifă. */
  .table-cards .cell-title {
    grid-column: 1 / -1;
    padding-right: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Bifa de selecție stă în colț, scoasă din grilă: pe un rând al ei ar fi
     împins numele în jos degeaba. */
  .table-cards td.sel-col {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    padding: 0;
  }

  .table-cards .cell-action { grid-column: 1 / -1; text-align: right; }
  .table-cards .cell-action a { display: inline-block; padding: 6px 14px; }

  /* Selectul de status și bara de progres iau lățimea celulei, ca cele două
     coloane să rămână egale indiferent de textul din ele. */
  /* Statusul e acum o etichetă apăsabilă, nu un câmp: nu se mai întinde pe
     toată lățimea cartonașului, ca să nu arate a formular. */
  .table-cards td[data-label="Status"] .state { max-width: 100%; }

  /* Cartonaș strâns: se vede numele, starea și cifra; restul se deschide cu
     „+N" de pe cartonaș (vezi table_tools.js). */
  .table-cards tr:not(.tt-card-open) td.tt-card-extra { display: none; }
  .tt-card-more {
    float: right; margin-left: 8px;
    background: none; border: 1px solid var(--border); border-radius: 99px;
    color: var(--muted); font-family: var(--mono); font-size: 11px;
    min-width: 30px; min-height: 26px; padding: 0 7px; cursor: pointer;
  }
  .tt-card-more:hover, .tr.tt-card-open .tt-card-more { color: var(--accent); border-color: var(--accent); }
  .table-cards tr.tt-card-open .tt-card-more { color: var(--accent); border-color: var(--accent); }

  /* Rândul cu date de echipament incomplete: dunga roșie trece de pe prima
     celulă (care pe telefon nu mai e prima vizual) pe marginea cartonașului. */
  .table-cards tr.row-pair-incomplete { border-left: 3px solid var(--red); }
  .table-cards tr.row-pair-incomplete td:first-child { border-left: 0; }
  .table-cards tr.row-selected { background: var(--panel-2); border-color: var(--accent); }
  .table-cards tr.row-selected td { background: none; }
}

/* Câmpurile din antetul documentelor (Documente > țară > tip) au lățimi fixe
   în pixeli, potrivite pentru ce se scrie în ele: „20 zile" nu are nevoie de
   un câmp cât ecranul. Pe telefon însă lățimile alea ies din pagină, așa că
   fiecare câmp trece pe două pe rând, cu eticheta deasupra. */
@media (max-width: 720px) {
  .docs-field { flex: 1 1 calc(50% - 10px); min-width: 0; }
  /* Lățimea e pusă în atributul `style` al câmpului, deci numai `!important`
     o poate întoarce. */
  .docs-field > input { width: 100% !important; }
}

@media (max-width: 460px) {
  .docs-field { flex-basis: 100%; }
}

/* ---------- Calendarul cazărilor (peste grila din Planning) ---------- */

/* Ziua de azi, ca linie verticală. În Planning nu era nevoie - acolo se
   citesc perioade întregi. La cazări întrebarea e „cât mai am până pleacă",
   iar fără un reper pentru azi trebuie numărate coloanele. */
.cal-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: .85; pointer-events: none; z-index: 2;
}

/* Contractul care ține după plecarea echipei: hașurat, nu plin - nu mai stă
   nimeni acolo, dar chiria curge. Diferența dintre „ocupat” și „plătit
   degeaba” trebuie să se vadă fără să citești legenda. */
.cal-contract-tail {
  position: absolute; top: 9px; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(
    45deg, var(--muted) 0 4px, transparent 4px 8px);
  opacity: .55; pointer-events: none;
}

/* Tipărire din browser.

   `@page { margin: 0 }` scoate antetul și subsolul pe care browserul le pune
   singur pe fiecare foaie: titlul, data și ADRESA paginii. Adresa e problema -
   o foaie tipărită din program ajunge pe masă, apoi în mâna altcuiva, iar cu
   adresa scrisă pe ea ar ieși din firmă odată cu foaia. Marginile se mută pe
   `body`, ca textul să nu ajungă lipit de marginea colii.

   Documentele adevărate (fișă de salariu, ore suplimentare, facturi, oferte)
   se scot ca PDF de pe server, unde apare doar ce am pus noi în ele. */
@media print {
  @page { margin: 0; }
  body { margin: 14mm; background: #fff; color: #000; }
  .tabs, .toolbar, .quick-add-wrap, .global-search-wrap,
  .notif-wrap, .modal-actions, .hero a, button, .small-link-btn { display: none !important; }
}

/* Rândul de țară din Geografie: se apasă ca să deschidă regiunile. */
.geo-country-row { cursor: pointer; }
.geo-country-row:hover { background: var(--panel-2); }
.geo-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }

/* Țară dezactivată din Setări: rândul rămâne, dar se vede din prima că e
   scoasă din program. Coloana de acțiuni își păstrează contrastul - de acolo
   se reactivează. */
.country-off > td { opacity: .45; }
.country-off > td:last-child { opacity: 1; }
.badge-off {
  background: rgba(148, 163, 184, .16);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Vizualizatorul de documente, folosit când programul rulează ca aplicație pe
   telefon (fără bară de browser). Fără el, un PDF deschis acolo înlocuia
   aplicația și nu mai exista nicio cale înapoi. */
#documentViewer {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg); display: flex; flex-direction: column;
}
.docviewer-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel); flex: 0 0 auto;
}
.docviewer-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docviewer-ext { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
/* Partajare: la fel de vizibil ca Închide, fiindcă e al doilea lucru pe care
   îl faci cu un document deschis pe telefon. */
.docviewer-share {
  background: none; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; flex: 0 0 auto; font-family: var(--sans);
}
.docviewer-share:disabled { opacity: .6; cursor: default; }
.docviewer-close {
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  flex: 0 0 auto;
}
#documentViewer iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* Panoul de notificări pe telefon.

   Era ancorat la dreapta clopoțelului și se întindea ~350px spre stânga.
   Clopoțelul stă însă pe la mijlocul ecranului, așa că panoul ieșea cu
   marginea stângă în afara paginii: textul apărea tăiat, fără nicio
   posibilitate de a-l aduce înapoi.

   Aici devine o fâșie fixă, lipită de marginile ecranului, deci e întotdeauna
   întreg pe ecran indiferent unde e clopoțelul. */
@media (max-width: 720px) {
  .notif-panel {
    position: fixed;
    top: auto; bottom: 8px; left: 8px; right: 8px;
    width: auto; max-width: none; max-height: 72vh;
    border-radius: 10px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
  }
}

/* Starea unui PO, citită dintr-o privire: dungă verde = facturat, roșie = nu.
   Pe dungă, nu pe fundal plin - un tabel cu rânduri roșii întregi devine
   ilizibil exact când sunt multe de citit. */
tr.po-invoiced td:first-child { border-left: 3px solid #22a06b; }
tr.po-not-invoiced td:first-child { border-left: 3px solid #db2833; }

/* ============================================================================
   TELEFON - pagina nu se mai derulează lateral
   ============================================================================

   Simptomul raportat (pagina însăși mai lată decât ecranul, butoane ieșite
   afară, text disproporționat de mare) avea DOUĂ cauze, nu una:

   1. Tabelele. `th` e `white-space: nowrap`, deci un tabel cu 8-11 coloane are
      o lățime minimă mult peste 390px. Tabelul nefiind într-un container care
      derulează, împingea în lateral întreaga pagină - antet, file, filtre, tot.
   2. Umflarea automată a textului din Safari pe iOS. Când pagina e mai lată
      decât ecranul, Safari mărește singur fonturile ca să fie citibile la
      scara la care „încape" pagina - de aici textul uriaș din capturi. Se
      oprește din `-webkit-text-size-adjust`.

   Nimic din blocul ăsta nu se aplică pe desktop.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, iframe, pre { max-width: 100%; }

/* Coloana de echipe avea o lățime minimă de 560px. Sub ~900px lățime de
   fereastră cele două coloane nu mai încap una lângă alta, deci grila ieșea
   din ecran. (Pragul era 560px, adică exact lățimea care nu încăpea.) */
@media (max-width: 900px) { .echipe-columns { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  /* Orice tabel derulează ÎN INTERIORUL lui, nu prin lățirea paginii.
     Excepțiile sunt tabelele care pe telefon nu mai sunt tabele: lista de
     proiecte și lista de oferte devin cartonașe (`.table-cards`), iar liniile
     de lift din ofertă devin blocuri verticale (`.pof-lines-table`). */
  table:not(.table-cards):not(.pof-lines-table):not(.table-frozen-first) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS mărește pagina la focus dacă fontul câmpului e sub 16px. Lista e
     explicită (nu un `*`) ca să bată regulile punctuale de 11-13px de mai sus,
     fără `!important`. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .filter-select, .list-sort-controls select, .cal-filter-item select,
  .global-search-wrap input, .global-search-wrap input:focus,
  .note-priority-select, .rename-input, .geo-table .filter-select,
  .sel-bar select, .quick-add-menu button,
  .pof-lines-table td input, .pof-lines-table td select,
  .pof-lines-table td .pof-subline-select,
  .pof-lines-table td .pof-line-controls select { font-size: 16px; }
  /* Bifele n-au text, deci n-au de ce să crească la 16px - doar suficient
     cât să se poată apăsa cu degetul. */
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }

  /* Zone de atins de cel puțin 40px. Butoanele-pictogramă discrete (× de pe
     sub-linii, buline de copiere) rămân mici intenționat. */
  button.primary, button.ghost, button.small, .back-btn, a.small-link-btn,
  .country-filter-btn, .tab, .subtab, .pof-validate-btn, .tier-add-btn {
    min-height: 40px;
  }
  button.small { padding: 8px 12px; font-size: 12px; }
  .tab { display: inline-flex; align-items: center; }

  /* Antetul: titlul nu mai ia trei rânduri, iar selectorul de temă și
     clopoțelul stau pe rândul lor, nu lipite de marginea din dreapta. */
  .hero { gap: 10px; padding-bottom: 8px; margin-bottom: 8px; }
  .hero h1 { font-size: 17px; }
  .hero p { font-size: 12px; }
  .hero-right { align-items: flex-start; margin-left: 0; }
  .hero-title-clock { gap: 10px; }

  /* Ferestrele modale ocupau 32px doar pe margini. */
  .overlay { padding: 12px 8px; }
  .modal { padding: 14px 12px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 auto; }
  .detail-box { padding: 12px; }

  /* Bara de acțiuni a paginii de ofertă: butoanele pe toată lățimea, în loc
     să curgă în afara ecranului. */
  .offer-page-actions { gap: 8px; }
  .offer-page-actions button { flex: 1 1 auto; }
  .offer-page-actions .pof-grand-total-inline { flex: 1 1 100%; margin-right: 0; }
  .modal-title-row { flex-wrap: wrap; gap: 4px; }
}

/* ---------- Oferte de preț: LISTA, ca listă de cartonașe ----------
   Șapte coloane, dintre care una cu patru butoane. Pe telefon rândul devine
   cartonaș prin `.table-cards` (același tipar ca lista de proiecte), iar
   butoanele trec pe un rând propriu, întinse pe lățime. */
@media (max-width: 720px) {
  .table-cards.pof-list-table .cell-action,
  .table-cards.worker-list-table .cell-action {
    display: flex; flex-wrap: wrap; gap: 8px;
    text-align: left; margin-top: 2px;
  }
  .table-cards.pof-list-table .cell-action::before,
  .table-cards.worker-list-table .cell-action::before { display: none; }
  .table-cards.pof-list-table .cell-action button,
  .table-cards.worker-list-table .cell-action button { flex: 1 1 auto; min-height: 40px; }
  /* Numărul de ordine e util într-o listă tipărită, nu pe un cartonaș. */
  .table-cards.worker-list-table td[data-label="#"] { display: none; }
  /* Într-un cartonaș textul curge pe mai multe rânduri; `nowrap`, moștenit din
     varianta-tabel, l-ar împinge în afara marginii. */
  .echipe-col-workers .table-cards td,
  .echipe-col-workers .table-cards th { white-space: normal; }
  .echipe-col-teams, .echipe-col-workers { padding: 10px; }

  /* Ultimele lățimi fixe care mai depășeau un ecran de 360-390px. */
  .rename-input { width: 100%; max-width: 100%; }
  .weekday-toggle { max-width: 100%; }
  .toast { left: 8px; right: 8px; max-width: none; }

  /* Istoricul e un rând cu `colspan` - nu are ce căuta în grila de două
     coloane a cartonașului, așa că își păstrează propriul bloc, lipit vizual
     de oferta de deasupra. */
  .table-cards tr.pof-history-row {
    display: block;
    margin-top: -10px; margin-bottom: 10px;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 10px 12px;
  }
  .table-cards .pof-history-cell { display: block; background: none !important; }
  .table-cards .pof-history-cell .pof-history-item { flex-wrap: wrap; }
}

/* ---------- Oferte de preț: FORMULARUL, un bloc per lift ----------
   Zece coloane de câmpuri editabile nu se pot derula lateral și rămâne ceva
   utilizabil: ca să scrii prețul pierdeai din ochi descrierea. Pe telefon
   fiecare lift devine un bloc vertical - câmpurile unul sub altul, cu eticheta
   coloanei deasupra (din `data-label`, pus pe celule în finance_oferte.js).

   Chenarul care marca starea liniei (galben = linia curentă, verde = validată)
   se mută de pe celule pe rândul întreg, dar culoarea vine din aceeași
   variabilă `--pof-line-border`, deci stările continuă să funcționeze
   neschimbate. */
@media (max-width: 700px) {
  .pof-lines-table, .pof-lines-table tbody { display: block; width: 100%; }
  .pof-lines-table thead { display: none; }
  .pof-lines-table tbody { counter-reset: pof-lift; }
  .pof-lines-table tr { display: block; width: 100%; }

  .pof-lines-table .pof-line-row {
    counter-increment: pof-lift;
    margin-top: 14px;
    padding: 10px 12px 2px;
    background: var(--pof-line-bg);
    border: 2px solid var(--pof-line-border);
    border-left-width: 3px;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
  .pof-lines-table .pof-line-subrow {
    padding: 2px 12px 12px;
    background: var(--pof-line-bg);
    border: 2px solid var(--pof-line-border);
    border-left-width: 3px;
    border-top: 0;
    border-radius: 0 0 8px 8px;
  }
  /* „Lift 1", „Lift 2"... - fără el, două blocuri identice unul sub altul nu
     se disting decât numărând câmpurile. */
  .pof-lines-table .pof-line-row::before {
    content: "Lift " counter(pof-lift);
    display: block;
    font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px;
    font-size: 12px; color: var(--muted); margin-bottom: 8px;
  }

  /* Celulele nu mai poartă nici chenar, nici fundal - le poartă rândul. */
  .pof-lines-table .pof-line-row > td,
  .pof-lines-table .pof-line-subrow > td,
  .pof-lines-table .pof-line-row > td:first-child,
  .pof-lines-table .pof-line-subrow > td:first-child,
  .pof-lines-table .pof-line-row > td:last-child,
  .pof-lines-table .pof-line-subrow > td:last-child {
    display: block; width: 100%;
    border: 0; background: none;
    padding: 0; margin-bottom: 10px;
  }

  .pof-lines-table .pof-line-row > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); margin-bottom: 3px;
  }
  .pof-lines-table td input, .pof-lines-table td select {
    width: 100%; min-width: 0; min-height: 40px;
  }
  .pof-lines-table td .money-input-wrap { display: flex; width: 100%; }
  .pof-lines-table td .money-input-wrap .money-input { flex: 1; min-width: 0; }

  /* ✕ de ștergere a liftului: pe telefon primește text și lățime de buton. */
  .pof-lines-table td.pof-cell-remove { margin-bottom: 4px; }
  .pof-lines-table td.pof-cell-remove .tier-remove-btn {
    width: 100%; min-height: 40px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px;
  }

  /* Sub-rândul: detalierea de preț, bifa, validarea și totalul unul sub altul.
     Sub-liniile din defalcare rămân „nume stânga - sumă dreapta". */
  .pof-lines-table .pof-subrow-flex {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .pof-lines-table .pof-options-field { min-width: 0; }
  .pof-lines-table .pof-site-field { flex: 1 1 auto; min-width: 0; }
  .pof-breakdown { max-width: none; }
  .pof-subline { font-size: 13px; gap: 8px; }
  .pof-subline-amount { min-width: 0; }
  .pof-lines-table td .pof-subline-select { width: auto; min-width: 0; max-width: 100%; }
  .pof-lines-table .pof-line-total { text-align: right; min-width: 0; }
  .pof-line-controls select, .pof-line-controls button { min-height: 40px; }
  .pof-lines-table td .pof-line-controls select { width: auto; min-width: 0; max-width: 100%; }
  .pof-line-check { justify-content: flex-end; }
}

/* ================= Fișa angajatului și fișa echipei =================
   Ambele pagini poartă `body.sheet-page`, deci schimbările de mai jos NU
   ating restul aplicației (lista de proiecte, Finance, pagina de proiect
   care folosește același `.page-hero-sticky`).

   Problema rezolvată: scrisul era prea mic pe calculator (etichete 11px,
   valori 14px, titlu 19px) și rămânea o bandă goală lată în dreapta, pentru
   că grupele de câmpuri erau stivuite pe toată lățimea, fiecare cu trei
   coloane înguste.

   O singură scară de text, definită aici ca variabile, în loc de mărimi
   împrăștiate prin fișier. `clamp()` face ca aceleași variabile să se
   micșoreze singure pe telefon - fără un al doilea set de reguli în media
   query, care s-ar desincroniza de primul. Ierarhia rămâne aceeași:
   titlu > secțiune > valoare > etichetă. */
body.sheet-page {
  /* la 390px: 13 / 15 / 12 / 14.5 / 22    la 1280px: 14 / 16 / 13 / 18 / 30 */
  --sheet-fs-label:   clamp(12.5px, 0.9vw + 9.5px,  14px);
  --sheet-fs-value:   clamp(15px,   0.6vw + 11.5px, 16px);
  --sheet-fs-group:   clamp(11.5px, 0.4vw + 9.5px,  13px);
  /* Minimul e 16px, nu mai jos: pe telefon valorile sunt 15px, iar un titlu
     de secțiune sub ele ar inversa ierarhia. */
  --sheet-fs-section: clamp(16px,   0.7vw + 10.5px, 18px);
  --sheet-fs-title:   clamp(22px,   1.6vw + 14px,   30px);
  font-size: var(--sheet-fs-value);
}

/* Lățime maximă mai mică decât cea implicită (1800px): un rând de text de
   1800px nu se mai citește. Spațiul gol se rezolvă din grila de mai jos,
   care pune mai multe casete pe rând, nu lățind textul. */
body.sheet-page #app { max-width: min(1500px, 96vw); }

/* ---------- Antetul: nume mare + funcția lângă el ---------- */
body.sheet-page .sheet-hero { align-items: flex-end; gap: 14px 28px; padding-bottom: 14px; }
.sheet-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sheet-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }

body.sheet-page .hero h1,
body.sheet-page .page-hero-sticky h1 {
  font-size: var(--sheet-fs-title);
  line-height: 1.08;
  letter-spacing: .4px;
  margin: 0;
  /* Majusculele le pune `.sheet-name-last`, doar pe numele de familie. */
  text-transform: none;
  overflow-wrap: anywhere;
}
.sheet-name-last { text-transform: uppercase; }
.sheet-name-first { font-weight: 500; }

/* Funcția / starea echipei: etichetă accentuată, citibilă de la distanță. */
.sheet-role-badge {
  font-family: var(--disp);
  font-size: clamp(12px, 0.45vw + 9.6px, 15px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.2;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--panel-2);
  white-space: nowrap;
  display: inline-block;
}
/* Informație secundară (echipa, țara, "temporar în ...", "inactiv"). */
.sheet-tag, .sheet-role-badge.is-off {
  font-family: var(--disp);
  font-size: clamp(11.5px, 0.35vw + 9.8px, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.2;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel);
  white-space: nowrap;
  display: inline-block;
}
.sheet-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheet-hero-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  margin-left: auto; justify-content: flex-end;
}
.sheet-hero-side .sheet-hero-tags { justify-content: flex-end; }
.sheet-hero-side-label {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .5px;
  font-size: var(--sheet-fs-group); color: var(--muted);
}

/* ---------- Titluri de secțiune ---------- */
body.sheet-page .section-title {
  font-size: var(--sheet-fs-section);
  color: var(--text);
  margin: 26px 0 10px;
}
body.sheet-page .section-subtitle {
  font-size: calc(var(--sheet-fs-section) - 1px);
  color: var(--muted);
}
body.sheet-page .team-summary-label { font-size: var(--sheet-fs-group); }

/* Titluri de secțiune colorate distinct pe fișele de angajat/echipă - fiecare
   secțiune (Identitate, Acte, Cazare, Scadențe...) se recunoaște dintr-o
   privire, nu doar din text. Patru nuanțe existente deja în temă (accent,
   albastru, verde, roșu), reciclate - nu o culoare nouă per secțiune, ca
   fiecare temă (inclusiv cele deschise) să rămână coerentă. Doar pe fișe
   (`body.sheet-page`): `.section-title` e folosit peste tot în program și nu
   are voie să se coloreze în altă parte. */
body.sheet-page .section-title[data-accent] {
  border-left: 3px solid var(--section-accent, var(--accent));
  padding-left: 9px;
  color: var(--section-accent, var(--accent));
}
body.sheet-page .section-title[data-accent="blue"] { --section-accent: var(--blue); }
body.sheet-page .section-title[data-accent="green"] { --section-accent: var(--green); }
body.sheet-page .section-title[data-accent="red"] { --section-accent: var(--red); }
body.sheet-page .section-title[data-accent] .small { color: var(--text); }

/* Fiecare casetă a fișei (.worker-fieldset) primește o dungă în stânga, în
   aceeași logică de culoare ca titlurile de secțiune de mai sus - cardurile
   se disting una de alta dintr-o privire, nu doar din titlul din capul lor. */
body.sheet-page .worker-fieldset { border-left-width: 3px; }
body.sheet-page .worker-fieldset[data-accent] { border-left-color: var(--section-accent, var(--accent)); }
body.sheet-page .worker-fieldset[data-accent="blue"] { --section-accent: var(--blue); }
body.sheet-page .worker-fieldset[data-accent="green"] { --section-accent: var(--green); }
body.sheet-page .worker-fieldset[data-accent="red"] { --section-accent: var(--red); }

/* ---------- Bara de identitate: telefon / CNP / e-mail mari, cu copiere -----
   Cerere explicită: pe fișă, telefonul și CNP-ul se caută des și se pierdeau
   în grila obișnuită de câmpuri, la fel de mari ca „Județ" sau „Cod poștal".
   Aici stau lângă nume, mari, cu buton de copiere lipit de fiecare. */
.identity-bar {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline;
  margin: 10px 0 4px;
}
.identity-bar-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.identity-bar-label {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px;
  font-size: var(--sheet-fs-label); color: var(--muted);
}
.identity-bar-value {
  font-size: clamp(15px, 0.5vw + 12px, 19px); font-weight: 700;
  display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere;
}
.identity-bar-value .copy-btn-subtle { font-size: 14px; }

/* ---------- Date personale: casete pe mai multe coloane ----------
   Casetele („Identitate", „Adresă", „Act de identitate", „Carduri") se așază
   pe mai multe coloane, câte încap - asta umple banda goală din dreapta, în
   loc să întindă textul pe toată lățimea.

   Coloane de text (`columns`), nu grilă: casetele au înălțimi diferite, iar
   într-o grilă ultima rămânea singură pe un rând, cu două treimi de rând gol
   lângă ea. În coloane se așază una sub alta și umplu înălțimea.
   `3 340px` = cel mult trei coloane, niciuna sub 340px: pe telefon rămâne
   una singură, deci nimic nu iese din ecran. */
body.sheet-page #workerDetails {
  columns: 3 340px;
  column-gap: 16px;
}
body.sheet-page #workerDetails > .worker-fieldset {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
}
body.sheet-page .worker-fieldset { padding: 10px 14px 8px; }
body.sheet-page .worker-fieldset-title {
  font-size: var(--sheet-fs-group);
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Câmpurile din casetă: câte încap, nu fix trei. Într-o casetă de ~340px
   ies două coloane, într-una lată trei - fără salturi de aliniere, pentru
   că toate câmpurile sunt scurte. */
.worker-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 4px 14px;
}

body.sheet-page .field label {
  font-size: var(--sheet-fs-label);
  letter-spacing: .3px;
  margin-bottom: 2px;
}
body.sheet-page .worker-value {
  font-size: var(--sheet-fs-value);
  font-weight: 500;
  line-height: 1.35;
  padding: 2px 0 6px;
  min-height: 24px;
  overflow-wrap: anywhere;
}
/* 16px fix la câmpurile editabile: sub atât, iOS mărește pagina la focus.
   E și mărimea cerută pentru valori, deci nu e o excepție de mobil. */
body.sheet-page .field input,
body.sheet-page .field select,
body.sheet-page .field textarea { font-size: 16px; padding: 7px 9px; }

/* ---------- Tabele (acte, cursuri, proiecte, membri) ----------
   Tabelele late (cardurile de firmă, cu IBAN pe un singur rând) derulează ÎN
   INTERIORUL casetei lor, nu prin lățirea paginii. Fără asta, fișa echipei
   ieșea cu ~500px în afara ecranului pe un monitor de 1280px: `.table-cards`
   e scutit de regula generală de derulare (pe telefon devine cartonaș), deci
   nimic nu-l mai oprea pe calculator. `min-width: 0` pe coloanele grilei e
   partea a doua: fără el, o coloană de grilă nu coboară sub lățimea minimă a
   conținutului, oricât de mic ar fi ecranul. */
body.sheet-page .team-summary-grid > *,
body.sheet-page .team-secondary-grid > * { min-width: 0; }
/* Rezumatul: două tabele de șapte coloane (mașina + cardurile, cu IBAN) nu
   încap unul lângă altul pe un ecran obișnuit - la 1280px fiecare primea
   ~600px, iar numărul de înmatriculare se rupea pe trei rânduri. Stau unul
   sub altul, pe toată lățimea; dacă vreodată există loc pentru două coloane
   de 680px, `auto-fit` le pune singur alături. */
body.sheet-page .team-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(680px, 100%), 1fr));
}
body.sheet-page #teamVehicles, body.sheet-page #teamCards,
body.sheet-page #teamMembers, body.sheet-page #teamAccommodations,
body.sheet-page #teamExpiries, body.sheet-page #teamEquipment,
body.sheet-page #teamActiveProjects, body.sheet-page #teamProjects,
body.sheet-page #workerVehicles, body.sheet-page #workerCertificates,
body.sheet-page #workerDocuments, body.sheet-page #workerProjects {
  max-width: 100%;
  overflow-x: auto;
}

body.sheet-page td { font-size: var(--sheet-fs-value); padding: 10px 12px; }
body.sheet-page th { font-size: var(--sheet-fs-label); letter-spacing: .4px; }
body.sheet-page .footnote { font-size: clamp(12px, 0.35vw + 10.3px, 13.5px); }
body.sheet-page .badge { font-size: var(--sheet-fs-label); padding: 3px 9px; }
/* Scadența e o valoare, nu o etichetă: se citește la fel de mare ca restul
   valorilor din jurul ei (16px în casetă, 16px în tabel). */
body.sheet-page .exp-badge { font-size: inherit; }
body.sheet-page .dash-card-label { font-size: var(--sheet-fs-label); }
body.sheet-page .empty b { font-size: var(--sheet-fs-value); }

/* Membrii echipei: numele (nume + prenume) mai apăsat decât restul rândului,
   iar funcția ca etichetă - „clar vizibile" înseamnă și că se deosebesc
   între ele dintr-o privire, nu doar că sunt scrise mai mare. */
body.sheet-page .table-cards .cell-title,
body.sheet-page .member-name { font-size: calc(var(--sheet-fs-value) + 1px); font-weight: 600; }
.role-badge {
  font-family: var(--disp);
  font-size: var(--sheet-fs-group, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  white-space: nowrap;
  display: inline-block;
}
.role-badge.role-montator { border-color: var(--accent); color: var(--accent); }
.role-badge.role-ajutor { border-color: var(--blue); color: var(--blue); }

/* Eticheta coloanei de pe cartonașele de telefon (din `data-label`) era 10px -
   aceeași problemă ca etichetele de pe calculator, doar cu alt selector. */
body.sheet-page .table-cards td[data-label]::before { font-size: var(--sheet-fs-label); }

/* ---------- Telefon ----------
   Mărimile se ocupă singure (clamp de mai sus); aici rămân doar așezarea și
   ce ar putea ieși din ecran. */
@media (max-width: 720px) {
  body.sheet-page .sheet-hero { align-items: flex-start; }
  body.sheet-page .sheet-hero-side { margin-left: 0; align-items: flex-start; }
  body.sheet-page .sheet-hero-side .sheet-hero-tags { justify-content: flex-start; }
  body.sheet-page .section-title { margin: 20px 0 8px; }
  body.sheet-page #workerDetails { gap: 10px; }
  body.sheet-page .team-summary-grid, body.sheet-page .team-secondary-grid { gap: 10px; }
  /* Pe cartonaș, o valoare ținută pe un singur rând (`white-space:nowrap`,
     pus din JS) nu mai încape în jumătate de ecran și se taie: IBAN-ul,
     perioada proiectului. Pe telefon are voie să curgă pe două rânduri -
     `!important` fiindcă regula vine dintr-un atribut `style`. */
  body.sheet-page .table-cards td[style*="nowrap"] { white-space: normal !important; }
  /* Semnătura are lățimi minime puse inline (280px/230px), care pe un ecran
     de 360px depășeau marginea. */
  body.sheet-page #workerSignature [style*="min-width:280px"] { min-width: 0 !important; }
  body.sheet-page #workerSignature input[type="file"] { max-width: 100% !important; width: 100%; }
  body.sheet-page #workerSignatureScale { width: 100%; max-width: 220px; }
}

/* ---------- Cazări: factura de la proprietar ----------
   Culoarea se pune DOAR pe cazările terminate (vezi accommodations.js ::
   stayRowClass): la una în desfășurare lipsa facturii e normală, iar dacă ar
   fi colorată și ea, portocaliul n-ar mai însemna „de recuperat".

   Nuanțele sunt cele deja folosite: verde de la .diff-badge-ok, portocaliu de
   la „facturat, neîncasat" (#f2994a). */
.stay-invoice-missing > td { background: rgba(242, 153, 74, .14); }
.stay-invoice-missing > td:first-child { border-left: 3px solid #f2994a; }
.stay-invoice-ok > td { background: rgba(76, 175, 125, .12); }
.stay-invoice-ok > td:first-child { border-left: 3px solid var(--green); }

.stay-invoice-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---------- Cazări: garanția nereturnată ----------
   Insigna e ruda celei de la factură (aceeași nuanță #f2994a), ca cele două
   restanțe să se citească la fel de la distanță. Rândul poate avea deja
   .stay-invoice-missing (fundal + dungă pe toată linia); garanția nu mai
   pune încă un fundal peste el, ci un contur pe CELULA ei, ca cele două
   probleme să rămână distincte în loc să se anuleze vizual. */
.stay-deposit-badge {
  background: rgba(242, 153, 74, .15); color: #f2994a; border: 1px solid #f2994a;
}
/* Verde pentru garanția întoarsă: aceeași formă de insignă ca la cea
   nereturnată, ca ochiul să compare culoarea, nu forma. */
.stay-deposit-returned {
  background: rgba(76, 175, 125, .15); color: #2e7d55; border: 1px solid var(--green, #4caf7d);
}
.stay-deposit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.stay-deposit-pending td[data-label="Garanție"] {
  box-shadow: inset 0 0 0 2px #f2994a; border-radius: 3px;
}

@media (max-width: 720px) {
  /* Pe cartonaș nu mai există „prima celulă" vizual: dunga trece pe marginea
     cartonașului, ca la rândurile cu date incomplete din Flotă. */
  .table-cards tr.stay-invoice-missing,
  .table-cards tr.stay-invoice-ok { background: var(--panel); }
  .table-cards tr.stay-invoice-missing > td,
  .table-cards tr.stay-invoice-ok > td { background: none; }
  .table-cards tr.stay-invoice-missing {
    border-left: 3px solid #f2994a; background: rgba(242, 153, 74, .10);
  }
  .table-cards tr.stay-invoice-ok {
    border-left: 3px solid var(--green); background: rgba(76, 175, 125, .10);
  }
  .table-cards tr.stay-invoice-missing > td:first-child,
  .table-cards tr.stay-invoice-ok > td:first-child { border-left: 0; }
  .table-cards td[data-label="Factură proprietar"] .filter-select { width: 100%; }
  /* La 390px, insigna + butonul unul lângă altul nu mai încap pe o linie;
     puse sub sumă, în coloană, rămân citibile fără scroll orizontal. */
  .table-cards td[data-label="Garanție"] .stay-deposit-actions { flex-direction: column; align-items: flex-start; }
  .table-cards td[data-label="Garanție"] .stay-deposit-actions button.small { width: 100%; }
}

/* ---------- Cazări: fișa cazării (vedere, nu formular) ----------
   Clic pe o cazare deschide întâi ce s-a înregistrat despre ea, nu câmpuri
   editabile: de nouă ori din zece întrebarea e „ce adresă are și până când",
   nu „ce trebuie corectat". Grupurile reiau tiparul fișei de angajat
   (.worker-fieldset), iar perechile etichetă/valoare pe cel din fișa de
   proiect (.detail-grid / .detail-item), deci și butoanele de copiere. */
.stay-sheet-group { margin-bottom: 12px; }
.stay-sheet-group .detail-grid { gap: 10px 14px; }
/* Adresa, linkul și observațiile ocupă rândul: rupte în jumătate de coloană
   se citesc prost și, cu un link lung, ies din fereastră. */
.stay-sheet-wide { grid-column: 1 / -1; }
/* Pe un câmp lat, butonul de copiere împins în capătul din dreapta al fișei
   nu se mai leagă vizual de eticheta lui; aici stă lipit de ea. */
.stay-sheet-wide .detail-item-label-row { justify-content: flex-start; }
.stay-sheet-value-strong { font-size: 15px; font-weight: 600; }
.stay-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stay-sheet-actions .stay-sheet-actions-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.stay-sheet-group .detail-item .value a { overflow-wrap: anywhere; }

/* ---------- Cazări: sugestii din cazările folosite înainte ----------
   Se caută în TOATE cazările, inclusiv cele încheiate: tocmai alea sunt
   istoricul din care se refolosește o adresă. Lista stă lipită sub câmpul de
   denumire, ca un autocomplete, nu într-o fereastră peste formular. */
.stay-suggest-box { position: relative; margin-top: 4px; }
.stay-suggest-list {
  border: 1px solid var(--accent); background: var(--panel);
  max-height: 220px; overflow-y: auto;
}
.stay-suggest-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--sans); font-size: 13px;
  padding: 8px 10px; line-height: 1.35;
}
.stay-suggest-item:last-child { border-bottom: 0; }
.stay-suggest-item:hover { background: var(--panel-2); color: var(--accent); }
.stay-suggest-item .stay-suggest-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.stay-suggest-hint { font-size: 11px; color: var(--muted); padding: 6px 10px 0; }

/* Căutarea proprie după oraș/regiune (accommodations.js::searchStaysByLocation):
   input + buton grupate, ca să stea pe un rând cu celelalte filtre dar să
   rămână recognoscibile ca o unealtă separată. */
.stay-geo-search-box { display: flex; align-items: center; gap: 6px; flex: 0 1 300px; min-width: 0; }
.stay-geo-search-box input { flex: 1 1 auto; min-width: 0; }
/* Titlul listei separate + butonul de închidere, pe un rând; titlul se rupe
   pe telefon în loc să împingă butonul în afara ecranului. */
.stay-geo-search-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.stay-geo-search { margin-bottom: 14px; }

/* Rândul de filtre al modulului: pe telefon selectoarele nu se mai înghesuie
   pe un rând din care jumătate iese din ecran. */
@media (max-width: 720px) {
  #panel-cazari .filter-bar-row { flex-wrap: wrap; width: 100%; }
  #panel-cazari .filter-bar-row .filter-select { flex: 1 1 140px; max-width: 100%; }
  .stay-sheet-actions button { flex: 1 1 auto; min-height: 40px; }
  .stay-sheet-actions .stay-sheet-actions-right { margin-left: 0; width: 100%; }
  .stay-sheet-actions .stay-sheet-actions-right button { flex: 1 1 auto; }
  .stay-suggest-item { padding: 10px; min-height: 44px; }
  /* La 390px, caseta de căutare ia tot rândul; altfel input-ul se ghemuia
     pe câțiva pixeli lângă selecturile de status/regiune/localitate. */
  .stay-geo-search-box { flex: 1 1 100%; width: 100%; }
}

/* ============================================================
   Documente auxiliare (aux_docs.js) - lista modelelor + tabelul de angajați
   și editorul de previzualizare pe tot ecranul. Toate clasele noi au
   prefixul `auxd-`, ca să nu se ciocnească din greșeală cu ceva existent. */

.auxd-layout { display: flex; align-items: flex-start; gap: 16px; }
.auxd-side {
  flex: 0 0 260px; min-width: 220px; border: 1px solid var(--border);
  background: var(--panel); border-radius: 6px; padding: 10px;
}
.auxd-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.auxd-tpl-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
/* Ce se alege înainte de încărcarea unui model: ce pagini rămân din el și dacă
   se completează pentru fiecare angajat sau o singură dată, cu datele firmei. */
.auxd-upload-opts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.auxd-upload-opts .field { margin-bottom: 0; }
.auxd-tpl-settings { align-items: flex-end; margin-bottom: 10px; }
@media (max-width: 720px) {
  .auxd-upload-opts .field, .auxd-tpl-settings .field { flex: 1 1 100%; }
  .auxd-upload-opts input, .auxd-upload-opts select,
  .auxd-tpl-settings input, .auxd-tpl-settings select { width: 100%; }
}
.auxd-tpl-item {
  display: flex; align-items: stretch; gap: 2px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg);
}
.auxd-tpl-item.active { border-color: var(--accent); background: var(--panel-2); }
.auxd-tpl-btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: none; border: 0; color: var(--text); font-family: var(--sans);
  padding: 7px 9px; cursor: pointer;
}
.auxd-tpl-name { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.auxd-tpl-del { border: 0; color: var(--muted); padding: 0 10px; font-size: 15px; }
.auxd-tpl-del:hover { color: var(--red); }
.auxd-main { flex: 1; min-width: 0; }

/* ---------- Editorul pe tot ecranul ---------- */
/* Vine peste `.overlay`/`.modal` generice, dar are nevoie de tot spațiul, nu
   de padding-ul și lățimea unui formular obișnuit. */
/* Același motiv ca la .docs-sig-edit-overlay: editorul auxiliar se deschide
   și din galeria de previzualizare (z-index 9999). */
.auxd-editor-overlay { padding: 0; align-items: stretch; z-index: 10040; }
.auxd-editor-overlay .modal.auxd-editor-modal {
  max-width: none; width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column;
}
.auxd-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.auxd-editor-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.auxd-editor-worker-nav { display: flex; align-items: center; gap: 8px; }
.auxd-editor-worker-name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.auxd-editor-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 12px; }
.auxd-editor-pagenav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px; border-bottom: 1px solid var(--border); margin: 0;
}
.auxd-page-scroll {
  flex: 1; min-height: 0; overflow: auto; display: flex;
  align-items: flex-start; justify-content: center; padding: 18px; background: var(--bg);
}
.auxd-page {
  position: relative; width: 100%; max-width: 900px; background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3); flex: 0 0 auto;
}
.auxd-page-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.auxd-page-loading { padding: 60px 20px; text-align: center; color: var(--muted); }

/* O zonă: dreptunghi poziționat în PROCENTE din pagină (vezi auxPtToPct în
   aux_docs.js). `touch-action:none` lasă pointer events-urile noastre să
   decidă mișcarea, altfel telefonul ar derula pagina cât tragi de o semnătură. */
.auxd-zone {
  position: absolute; box-sizing: border-box; touch-action: none;
  border: 1px dashed rgba(76, 175, 125, .8); background: rgba(76, 175, 125, .08);
}
.auxd-zone-text { cursor: text; }
.auxd-zone-image { cursor: grab; }
.auxd-zone.auxd-dragging { cursor: grabbing; z-index: 6; }
.auxd-zone-missing { border-color: #f2711c; background: rgba(242, 113, 28, .14); }
.auxd-zone-text-body {
  width: 100%; height: 100%; overflow: auto; padding: 1px 3px;
  outline: none; color: #111; line-height: 1.2; box-sizing: border-box;
}
.auxd-zone-text-body:empty::before { content: attr(data-placeholder); color: #c8551a; }
.auxd-zone-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }
.auxd-zone-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #c8551a; text-align: center; padding: 2px;
}
.auxd-zone-bar { position: absolute; top: -12px; right: -3px; display: flex; gap: 2px; z-index: 3; }
.auxd-zone-menu-btn, .auxd-zone-hide-btn {
  width: 20px; height: 20px; line-height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 12px; cursor: pointer;
}
.auxd-zone-hide-btn { color: var(--red); }
.auxd-resize-handle {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  border-radius: 3px; background: var(--accent); border: 2px solid #fff;
  cursor: nwse-resize; touch-action: none; z-index: 3;
}
.auxd-hidden-bar {
  padding: 8px 14px; border-top: 1px solid var(--border); margin: 0;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.auxd-editor-bottom {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border);
}
.auxd-editor-msg { flex: 1; margin: 0; }

/* Meniul „⋯" al unei zone - popover flotant, ca la `.columns-menu`. */
.auxd-zone-menu {
  position: absolute; z-index: 70; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px; width: 230px; box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; gap: 8px;
}
.auxd-zone-menu-label { font-size: 12px; font-weight: 600; color: var(--text); }
.auxd-zone-menu select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 5px; font-family: var(--sans); font-size: 12px;
}
.auxd-zone-menu-actions { display: flex; justify-content: space-between; gap: 6px; }

/* Telefon: modelul e o listă orizontală scurtă, nu o coloană laterală care
   fură tot ecranul; mânerele de tras/redimensionat cresc, ca degetul să le
   prindă sigur. Pagina rămâne mereu la lățimea ecranului - nu se cere pinch. */
@media (max-width: 720px) {
  .auxd-layout { flex-direction: column; }
  .auxd-side { flex: none; width: 100%; min-width: 0; }
  /* Pe coloana, un copil lat (tabelul de angajati, selectul de proiect) ar
     trage partea principala peste marginea ecranului: se leaga de latimea
     ecranului, iar tabelele se deruleaza in interiorul lor. */
  .auxd-main { width: 100%; max-width: 100%; min-width: 0; }
  /* Selectul de proiect isi ia latimea din cel mai lung nume de proiect din
     lista: pe telefon se leaga de latimea ecranului, iar numele lung se vede
     cand se deschide lista. */
  .auxd-main .filter-select { max-width: 100%; min-width: 0; }
  .auxd-tpl-list { max-height: 140px; }
  .auxd-editor-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .auxd-editor-worker-nav { justify-content: space-between; }
  .auxd-editor-tools { margin-left: 0; justify-content: center; }
  .auxd-page-scroll { padding: 8px; }
  .auxd-editor-bottom { flex-wrap: wrap; }
  .auxd-editor-bottom button { flex: 1 1 auto; min-height: 40px; }
  .auxd-resize-handle { width: 26px; height: 26px; right: -11px; bottom: -11px; }
  .auxd-zone-menu-btn, .auxd-zone-hide-btn { width: 27px; height: 27px; line-height: 25px; font-size: 15px; }
  .auxd-zone-bar { top: -15px; right: -4px; gap: 4px; }
}

/* ---------- Cazări pe telefon: mai mult calendar, rânduri mai scunde ----------
   (stay-phone-compact) Coloana cu nume ocupa 60% din lățime în calendar și un
   rând de tabel avea cât trei, din cauza adresei și a butonului Booking din
   prima coloană. Adresa și linkul rămân pe fișa cazării (clic pe nume). */
@media (max-width: 720px) {
  #accommodationsCalendarWrap .cal-label-cell { padding: 2px 6px; }
  #accommodationsCalendarWrap .cal-label-cell > span {
    white-space: normal !important; font-size: 10.5px; line-height: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  #accommodationsTableWrap td.col-frozen .footnote,
  #accommodationsTableWrap td.col-frozen .small-link-btn { display: none; }
  #accommodationsTableWrap td.col-frozen { min-width: 0; max-width: 118px; width: 118px; }
  #accommodationsTableWrap td.col-frozen strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 11px; line-height: 13px;
  }
  #accommodationsTableWrap .stay-table-tools { margin: 0 0 4px; }
  #accommodationsTableWrap .stay-table-tools > * { padding: 3px 8px !important; font-size: 11px !important; min-height: 0 !important; }
}

/* ---------- Limbile alese la Generare documente (lunare/art18/epis/registru) ----------
   Buton-dropdown („RO, ES ▾"): închis arată doar codurile alese, deschis
   coboară lista cu bife pe orizontală, legate la nevoie - merge pe telefon
   la fel de bine ca pe ecranul mare. Numărul de ordine (1,2,3...) apare doar
   la limbile bifate; săgețile ▲▼ mută limba în listă. */
.docs-lang-dd {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 0 0 12px;
  background: var(--panel-2);
}
.docs-lang-dd-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  font-size: 12.5px;
}
.docs-lang-dd-summary::-webkit-details-marker { display: none; }
.docs-lang-dd-value { font-weight: 600; }
.docs-lang-dd-arrow { display: inline-block; transition: transform .15s ease; }
.docs-lang-dd[open] .docs-lang-dd-arrow { transform: rotate(180deg); }
.docs-lang-title { font-weight: 600; }
.docs-lang-list { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.docs-lang-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px 3px 8px;
  background: var(--panel);
}
.docs-lang-item-on { border-color: var(--accent); }
.docs-lang-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12.5px;
}
.docs-lang-check input[type="checkbox"] { margin: 0; cursor: pointer; }
.docs-lang-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 9.5px;
  font-weight: 700;
  flex: none;
}
.docs-lang-arrow {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 3px 3px;
}
.docs-lang-arrow:disabled { opacity: .25; cursor: default; }

/* ---------- Controlul de dată an→lună→zi (docsDateControlHtml) ---------- */
.docs-date-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   Aspect „scanat / fotografiat" (doc_scan.js) - galeria de previzualizare
   pe tot ecranul; aspectul se alege doar aici. Prefix `.docscan-`.
   ============================================================ */
.docscan-field {
  display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted);
}
.docscan-field select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 5px 6px; font-family: var(--sans); font-size: 12.5px; border-radius: 5px;
  min-width: 190px;
}
.docscan-spacer { flex: 1 1 auto; }

/* Previzualizarea pe tot ecranul - la fel „nivel" ca #documentViewer, dar
   propriul strat (nu se suprapun niciodată în practică, dar fiecare rămâne
   independentă unul de celălalt). */
.docscan-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); flex-direction: column;
}
.docscan-overlay.active { display: flex; }
.docscan-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--panel); flex: 0 0 auto;
}
.docscan-bar-top { border-bottom: 1px solid var(--border); }
.docscan-bar-bottom { border-top: 1px solid var(--border); row-gap: 8px; }
.docscan-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docscan-status { color: var(--muted); min-width: 90px; }
.docscan-pages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; align-items: center; gap: 18px; background: var(--panel-2);
}
.docscan-page-wrap { max-width: 100%; }
.docscan-page-img {
  display: block; max-width: min(100%, 720px); width: 100%; height: auto;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .35); background: #fff;
}

/* Telefon: bara de jos (multe controale) trece pe mai multe rânduri, iar
   butoanele cresc puțin, ca degetul să le prindă sigur. */
@media (max-width: 720px) {
  .docscan-bar-bottom { justify-content: center; }
  .docscan-field select { min-width: 0; width: 100%; }
  .docscan-pages { padding: 10px; }
  .docscan-spacer { display: none; }
}

/* ---------- Editorul de semnaturi (trage/mareste/rotire), documents.js ----------
   Fereastra pe tot ecranul cu paginile HTML reale ale documentului (nu poze -
   ca semnaturile sa poata fi trase cu mana/mouse-ul). */
/* Deasupra galeriei de previzualizare (.docscan-overlay, 9999): editorul se
   deschide DIN galerie. Cu 3600 se deschidea în spatele ei - invizibil, deci
   semnătura „nu se putea muta", iar după închiderea galeriei rămânea un ecran
   întunecat care părea o fereastră ce nu se închide. */
.docs-sig-edit-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.docs-sig-edit-modal {
  width: 100%; max-width: 760px; max-height: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.docs-sig-edit-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
.docs-sig-edit-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.docs-sig-edit-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.docs-sig-edit-rot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.docs-sig-edit-rotval { color: var(--muted); min-width: 40px; font-size: 12.5px; }
.docs-sig-edit-pages {
  flex: 1; overflow-y: auto; padding: 16px; background: var(--panel-2);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.docs-sig-edit-page-frame { position: relative; overflow: hidden; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.docs-sig-edit-page { position: relative; transform-origin: top left; }
.docs-sig-edit-page [data-mark-key] { cursor: grab; }
.docs-sig-edit-page [data-mark-key]:active { cursor: grabbing; }
.docs-sig-edit-page .docs-sig-edit-selected { outline: 2px dashed var(--accent); outline-offset: 2px; }
.docs-sig-edit-handle {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--accent-text);
  cursor: nwse-resize; touch-action: none; z-index: 5;
}
.docs-sig-edit-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
  .docs-sig-edit-modal { max-width: 100%; height: 100%; border-radius: 0; }
  .docs-sig-edit-foot { justify-content: center; }
  .docs-sig-edit-foot button { flex: 1 1 auto; min-height: 40px; }
}

/* ============================================================
   Galeria de previzualizare (`.docscan-batch-`, `.docscan-viewer-`): un
   aspect separat pe fiecare document.
   ============================================================ */
.docscan-bar-batchtop { flex-wrap: wrap; row-gap: 10px; }
.docscan-batch-grid {
  flex: 1; overflow-y: auto; padding: 16px; background: var(--panel-2);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
  align-content: start;
}
.docscan-batch-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.docscan-batch-thumb-wrap { position: relative; }
.docscan-batch-thumb {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3); background: #fff;
}
.docscan-batch-thumb-empty {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 210/297;
  background: var(--bg); color: var(--muted); font-size: 11.5px; text-align: center; padding: 8px;
  border: 1px dashed var(--border);
}
.docscan-batch-error { color: var(--red); }
.docscan-batch-thumb.is-busy { opacity: .55; }
.docscan-batch-grid.is-single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.docscan-viewer-select { flex: 0 1 220px; }
.docscan-batch-pagecount {
  position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .65); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
}
.docscan-batch-label {
  font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.docscan-batch-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.docscan-batch-tools button { padding: 4px 7px; font-size: 11.5px; }
.docscan-batch-preset-select {
  flex: 1 1 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 4px 5px; font-family: var(--sans); font-size: 11.5px; border-radius: 5px;
}

/* Vizualizatorul mărit (peste galerie) - un strat suplimentar, cu numărul
   de „Închide" al galeriei tot activ dedesubt. */
.docscan-viewer {
  position: absolute; inset: 0; z-index: 10; background: var(--bg);
  display: flex; flex-direction: column;
}
/* Cutia care deruleaza: dupa marire, documentul e mai lat decat ecranul si
   trebuie sa se poata ajunge la marginea lui, deci deruleaza si pe orizontala.
   `touch-action` lasa cele doua degete sa mareasca documentul, nu pagina. */
.docscan-viewer-pages {
  position: relative; align-items: center; overflow: auto; touch-action: pan-x pan-y;
}
.docscan-viewer-pages-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-y: auto; width: 100%;
}
.docscan-viewer-nav {
  position: sticky; top: 50%; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}

@media (max-width: 720px) {
  .docscan-batch-grid { grid-template-columns: 1fr; padding: 10px; }
  .docscan-batch-tools button, .docscan-batch-preset-select { flex: 1 1 auto; min-height: 34px; }
}

/* ============================================================
   Registrul programului de lucru - ciorna neconfirmată (draft) păstrată pe
   server (`registru_draft_<period>`) - bannerul „ai un stat neconfirmat”.
   ============================================================ */
.docs-reg-draft-banner {
  background: var(--panel-2); border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; font-size: 12.5px; color: var(--text);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
}
.docs-reg-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   EPIS - „Ficha de entrega de EPI”: tabelul cu datele completate per angajat
   (DNI/NIE, puesto, departamento, cantitățile celor 8 EPI) și pagina A4 care
   imită modelul spaniol.
   ============================================================ */
.docs-epis-missing {
  /* Portocaliu translucid, nu o culoare fixă: programul are 8 teme (deschise
     și întunecate - vezi THEMES din api.js), iar o culoare fixă ar ieși bine
     doar pe una din ele. Peste orice fundal, translucid rămâne „lipsește”. */
  background: rgba(255, 152, 0, 0.22) !important;
}
.docs-epis-missing-count {
  color: var(--red); font-weight: 600; font-size: 11px;
}
.docs-epis-qty-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.docs-epis-qty-row input {
  width: 56px; text-align: center;
}
.docs-epis-detail-wrap {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; margin-top: 6px;
}
.docs-epis-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px;
}
.docs-epis-detail-item {
  display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text);
}
.docs-epis-detail-item label { color: var(--muted); font-size: 11px; }
.docs-epis-detail-item input {
  padding: 3px 6px; font-size: 12px;
}
@media (max-width: 720px) {
  .docs-reg-draft-banner { flex-direction: column; align-items: flex-start; }
}

/* Popover rapid de mutare a datelor de proiect (Start/Sfârșit + motiv),
   deschis din tabelul de Proiecte sau din fișa proiectului - vezi
   api.js::openProjectDatePopover. Același tipar de popover flotant ca
   .columns-menu / .auxd-zone-menu. */
.proj-date-popover {
  position: absolute; z-index: 300; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px; width: 240px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 8px;
}
.proj-date-popover .field { display: flex; flex-direction: column; gap: 3px; }
.proj-date-popover .field label { font-size: 11px; color: var(--muted); }
.proj-date-popover input[type="text"] {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 5px 6px; font-family: var(--sans); font-size: 12.5px;
}
.proj-date-cell { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.proj-date-cell:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- EPIS: fereastra „Editează lista de EPI" ---------- */
.docs-epis-cat-modal { max-width: 1100px; }
.docs-epis-cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow: auto; }
.docs-epis-cat-row {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px;
  border: 1px solid var(--border); background: var(--panel);
}
.docs-epis-cat-row.is-off { opacity: .55; }
.docs-epis-cat-order { display: flex; flex-direction: column; gap: 4px; }
.docs-epis-cat-fields {
  flex: 1 1 auto; display: grid; gap: 6px 10px;
  grid-template-columns: 2fr 1.2fr 2fr 2fr 0.9fr auto;
}
.docs-epis-cat-fields label {
  display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--muted);
  text-transform: none; margin: 0;
}
.docs-epis-cat-fields input { width: 100%; min-width: 0; }
.docs-epis-cat-check { flex-direction: row !important; align-items: center; gap: 6px !important; white-space: nowrap; }
.docs-epis-cat-check input { width: auto; }
.docs-epis-cat-tr { grid-column: 1 / -1; font-size: 12px; }
.docs-epis-cat-tr summary { cursor: pointer; color: var(--muted); }
.docs-epis-cat-trrow { display: grid; grid-template-columns: 90px 2fr 2fr 2fr; gap: 6px; align-items: center; margin-top: 4px; }
@media (max-width: 720px) {
  .docs-epis-cat-fields { grid-template-columns: 1fr 1fr; }
  .docs-epis-cat-trrow { grid-template-columns: 1fr; }
  .docs-epis-cat-list { max-height: none; }
}

/* ---------- Documente: ce semnături se pun ---------- */
.docs-marks-ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); background: var(--panel);
  font-size: 12.5px;
}
.docs-marks-ctl label { display: inline-flex; align-items: center; gap: 5px; margin: 0; text-transform: none; font-size: 12.5px; }
.docs-marks-ctl input[type="checkbox"] { width: auto; margin: 0; }
.docs-marks-none { padding-right: 10px; border-right: 1px solid var(--border); }
.docs-marks-detail { flex: 1 1 auto; }
.docs-marks-detail summary { cursor: pointer; color: var(--muted); list-style: none; }
.docs-marks-detail summary::-webkit-details-marker { display: none; }
.docs-marks-detail[open] summary { margin-bottom: 6px; }
.docs-marks-detail > label { margin-right: 12px; }
/* În editor, semnătura scoasă de pe document rămâne ștearsă și punctată. */
.docs-sig-edit-page img[data-mark-hidden="1"] { opacity: .25; outline: 2px dashed var(--red); outline-offset: 2px; }

/* ---------- Oferte de preț: lifturi SPECIALE (model/stații/kg manuale) ---------- */
/* Alerta de corelare cu oferte anterioare, sub linia specială din formular
   (vezi finance_oferte.js::priceOfferSpecialAlertHtml). */
.pof-special-alert {
  margin-top: 8px; padding: 8px 10px; border: 1px solid #f2c94c; background: rgba(242, 201, 76, .12);
  font-size: 12px; display: flex; flex-direction: column; gap: 6px;
}
.pof-special-alert-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pof-special-alert-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pof-special-alert-warning { color: var(--red); font-weight: 600; }
/* Secțiunea "Istoric lifturi speciale" - listă simplă, colapsabilă, sub
   lista principală de oferte (index.html, finsubpanel-oferte-pret). */
.pof-special-history-section { margin-top: 18px; }
.pof-special-history-section #pofSpecialHistoryPanel { margin-top: 8px; }
.pof-special-history-table td, .pof-special-history-table th { font-size: 12.5px; }


/* ---------- Aliniere comună pentru tot ce arată ca un buton ----------
   Regula e globală, nu pe ecrane: un link-buton („Deschide fișa") lângă un
   buton adevărat („PDF") trebuie să aibă aceeași înălțime și aceeași linie.
   Înainte, linkul era `inline-block` și pe telefon (min-height 40px) textul
   lui stătea sus, iar butonul vecin cobora cu 9px. Verificarea automată
   `scripts/verifica_aspect.py` prinde orice abatere nouă. */
button, .small-link-btn, .back-btn { vertical-align: middle; box-sizing: border-box; }
button.primary, button.ghost, button.small, .small-link-btn, .tier-add-btn { line-height: 1.2; white-space: nowrap; }
/* Ghost și primary au aceeași înălțime (primary n-are chenar, deci +1px padding). */
button.ghost { padding-top: 9px; padding-bottom: 9px; }
button.ghost.small { padding: 4px 9px; }
.small-link-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 9px; font-size: 11px; font-family: var(--sans);
  text-decoration: none; cursor: pointer;
}
.small-link-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Sumele și datele nu se rup („1.970,00" pe un rând, „€" pe altul). */
td.mono { white-space: nowrap; }
td.mono > div, td.mono .footnote { white-space: normal; }

@media (max-width: 720px) {
  button.ghost.small, .small-link-btn { padding: 8px 12px; font-size: 12px; }

  /* Cartonașe: butoanele unui rând stau împreună, pe toată lățimea, cât încap
     pe un rând - nu câte o celulă aliniată la dreapta pe rândul ei. */
  .table-cards td.cell-action,
  .table-cards td[data-label="Acțiuni"] {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; text-align: left; white-space: normal !important;
  }
  .table-cards td.cell-action::before,
  .table-cards td[data-label="Acțiuni"]::before { display: none; }
  .table-cards td.cell-action > button,
  .table-cards td.cell-action > a,
  .table-cards td[data-label="Acțiuni"] > button,
  .table-cards td[data-label="Acțiuni"] > a { flex: 1 1 auto; min-height: 40px; }
  .table-cards td.cell-action + td.cell-action { margin-top: -2px; }
  .table-cards td:empty { display: none; }

  /* Rândurile de documente din fișa proiectului: acțiunile trec dedesubt. */
  .doc-row { flex-wrap: wrap; }
  .doc-row-actions { flex-wrap: wrap; max-width: 100%; }
  .doc-row-actions input[type="file"] { max-width: 100%; min-width: 0; }
}

@media (max-width: 720px) {
  /* Blocurile de lift din ofertă: `width:100%` + padding + chenar ieșeau cu
     29px din ecran; iar bifa „EQ/Net indisponibil" lua regula de 100% a
     câmpurilor și devenea un pătrat uriaș. */
  .pof-lines-table tr { box-sizing: border-box; }
  .pof-lines-table td input[type="checkbox"] { width: 18px; min-width: 18px; min-height: 0; }
}

@media (max-width: 720px) {
  /* Tabelele simple (nu cartonașe) pe telefon: prima coloană (numele) se
     rupe, restul valorilor rămân pe un rând și tabelul derulează lateral -
     ca în Excel. Înghesuite, „depășit cu 11 zile" sau „14/09/2026 16:51"
     ocupau 2-3 rânduri și dublau înălțimea fiecărui rând. */
  table:not(.table-cards):not(.pof-lines-table) > * > tr > td:not(:first-child),
  table:not(.table-cards):not(.pof-lines-table) > * > tr > th { white-space: nowrap; }
  table:not(.table-cards):not(.pof-lines-table) > * > tr > td:not(:first-child) .footnote { white-space: normal; }
  table:not(.table-cards):not(.pof-lines-table) > * > tr > td:first-child { min-width: 120px; }
}

@media (max-width: 720px) {
  /* Link-butonul pus pe <button> (Ore extra → PDF) primește aceeași înălțime
     ca vecinii lui; lista veche de min-height acoperea doar <a>. */
  .small-link-btn { min-height: 40px; }
}

@media (max-width: 720px) {
  /* Sub-rândul liftului e o coloană: cu `flex-wrap: wrap` (moștenit de pe
     calculator) linia flex lua lățimea celui mai lung meniu (370px) și
     împingea tot blocul în afara ecranului. */
  .pof-lines-table .pof-subrow-flex { flex-wrap: nowrap; }
  .pof-lines-table .pof-subrow-flex > * { max-width: 100%; }
  .pof-lines-table .pof-line-controls select { max-width: 100%; }
}

/* Regulile vechi `a.small-link-btn { display:inline-block }` și
   `.table-cards .cell-action a { display:inline-block }` sunt mai specifice
   decât `.small-link-btn` - fără asta textul „Deschide fișa" stătea sus în
   buton, iar „PDF" din dreapta era centrat. */
a.small-link-btn, button.small-link-btn,
.table-cards .cell-action a.small-link-btn {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Antet: toate controalele din colț au aceeași formă ----------
   Clopoțelul avea 38px, butonul de densitate 34px, tema 34px, iar numele și
   Logout erau text simplu, mai jos decât restul. */
.notif-bell, .density-btn, .theme-select, .hero-btn {
  height: 38px; box-sizing: border-box; border-radius: 8px; vertical-align: middle;
}
.density-btn { display: inline-flex; align-items: center; }
.hero-user { display: flex; align-items: center; gap: 8px; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; font-family: var(--sans); white-space: nowrap;
}
button.hero-btn { cursor: pointer; }
button.hero-btn:hover { border-color: var(--accent); color: var(--accent); }
.hero-user-btn { color: var(--muted); max-width: 180px; overflow: hidden; }
/* Pictograma de Logout apare doar unde textul e ascuns (telefon). */
/* Pictograma de Logout apare doar unde textul e ascuns (telefon). E desenata,
   nu scrisa cu o glifa: caracterele de tip „⎋" se redau cu fontul de rezerva
   al fiecarui sistem si ajungeau pe doua randuri. */
.hero-logout-icon { display: none; }
/* Butonul de meniu e doar pentru telefon; pe calculator butoanele stau in antet. */
.antet-meniu-btn { display: none; }
@media (max-width: 720px) { .antet-meniu-btn { display: inline-flex; align-items: center; } }
@media (max-width: 720px) { .hero-logout .hero-logout-icon { display: block; width: 15px; height: 15px; } }

/* Echipe: o singură listă când e aleasă una. */
.echipe-view-toggle { margin-bottom: 8px; gap: 6px; }
.echipe-columns[data-view="echipe"],
.echipe-columns[data-view="angajati"] { grid-template-columns: minmax(0, 1fr); }
.echipe-columns[data-view="echipe"] .echipe-col-workers,
.echipe-columns[data-view="angajati"] .echipe-col-teams { display: none; }

@media (max-width: 720px) {
  /* Antetul pe telefon, pe DOUA randuri:
       1. numele firmei, iar in dreapta butoanele care se apasa des:
          clopotelul (are numarul pe el), "...", "+" si cautarea;
       2. data cu cele trei ceasuri.
     Bara de module are al treilea rand numai pentru ea (vezi blocul de mai
     sus). Tema, densitatea, utilizatorul si Logout intra sub "...": sunt lucruri
     de o data pe luna, iar fiecare ar fi mancat din numele firmei.

     `display: contents` scoate cutiile intermediare din calcul, ca fiecare
     buton sa fie asezat de-a dreptul in antet (cu `order`). `!important` e
     nevoie fiindca `.hero-right` are `display: flex` in regula de baza. */
  .hero-right, .hero-right > .hero-controls { display: contents !important; }
  /* `flex: 1 1 0` (nu `auto`): numele firmei porneste de la latime zero si
     creste in ce ramane, deci nu mai impinge butoanele pe randul urmator -
     se taie el cu puncte. Un rand de antet costa ~34px pe FIECARE ecran. */
  .hero h1 { order: 1; flex: 1 1 0; min-width: 0; font-size: 14px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notif-wrap { order: 2; margin: 0 0 0 auto; }
  .antet-meniu-btn { order: 3; }
  .quick-add-wrap { order: 4; }
  .global-search-wrap { order: 5; }
  /* Rand nou fortat: ceasurile trec sub nume si butoane. */
  .hero::after { content: ""; order: 6; flex-basis: 100%; height: 0; }
  .world-clock { order: 7; }
  /* Raman in pagina, doar ascunse: meniul "..." le cheama exact functiile. */
  .theme-select, .density-btn, .hero-user { display: none !important; }
  .notif-bell, .hero-btn { height: 34px; }
  .notif-bell { font-size: 20px; padding: 0 10px; }
  .hero-btn { padding: 0 10px; font-size: 12px; }
}

@media (min-width: 721px) {
  /* Calculator: cu numele și Logout ca butoane, colțul din dreapta nu mai
     încăpea lângă titlu și ceas la 1280px și cobora pe al doilea rând. */
  .theme-select { max-width: 150px; padding: 0 8px; }
  .hero-btn { padding: 0 10px; }
  .hero-right { gap: 6px; }
  .notif-wrap { margin-right: 4px; }
}

@media (min-width: 721px) {
  .hero { gap: 10px; }
  .theme-select { max-width: 125px; }
  .notif-bell { padding: 0 10px; }
}

/* ---------- Calculator: un rand intreg castigat din rama ----------
   „+ Adauga rapid" si cautarea stateau pe un rand numai al lor, sub module:
   doua butoane pe toata latimea ecranului, ~50px de rama pe FIECARE ecran din
   program. Coborau acolo fiindca bara avea voie sa se rupa (`flex-wrap`), iar
   modulele plus butoanele treceau cu cativa pixeli peste 1280.

   Acum randul nu se mai rupe: modulele primesc ce ramane si, daca fereastra e
   prea ingusta, se trag lateral - exact ca pe telefon. Butoanele raman sus, in
   dreapta, unde le cauti. */
@media (min-width: 721px) {
  .tabs-bar { flex-wrap: nowrap; }
  .tabs {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  /* Filele nu se stramteaza ca sa incapa - se trag lateral. Fara asta, numele
     lungi se rupeau pe doua randuri. */
  .tabs .tab { flex: 0 0 auto; white-space: nowrap; }
  .tabs::-webkit-scrollbar { height: 0; }
  .tabs-right { flex: 0 0 auto; margin-left: 12px; }
  /* Cautarea goala e ingusta; se lateste cand scrii in ea. */
  .global-search-wrap input { width: 120px; }
  .global-search-wrap input:focus { width: 230px; }
}

/* Cele noua module trebuie sa incapa pe rand la latimile reale de laptop -
   altfel ultimul ("Setari") ramane ascuns dupa marginea din dreapta si nu se
   vede ca exista. Se string filele, in doua trepte: mai bine litere cu un
   punct mai mici decat un modul pe care nu-l gasesti. */
@media (min-width: 1151px) and (max-width: 1400px) {
  .tab { padding: 8px 14px; font-size: 12px; }
}
/* Laptop mic (sub ~1150px): filele se string putin, ca toate cele noua module
   sa incapa pe rand fara sa fie trase lateral. Mai bine litere cu un punct mai
   mici decat un modul ascuns. */
@media (min-width: 721px) and (max-width: 1150px) {
  .tabs { gap: 3px; }
  .tab { padding: 8px 9px; font-size: 12px; letter-spacing: .2px; }
  .tab-home { padding: 6px 9px; }
  .quick-add-btn { padding: 8px 9px; font-size: 11px; }
  .tabs-right { margin-left: 8px; gap: 6px; }
  .global-search-wrap input { width: 84px; }
}

/* ---------- Echipe: tabel compact ----------
   Statusul e o etichetă mică, conturată în culoarea lui, iar rândul are o
   linie de aceeași culoare în stânga: se vede dintr-o privire, fără să ocupe
   loc. Clic pe rând = fișa echipei. */
.teams-compact-table td { padding: 5px 8px; vertical-align: middle; }
/* Echipa indisponibilă (ocupată sau inactivă): linie și fundal portocaliu
   discret. Disponibilă = rând normal, fără nimic în plus. */
.teams-compact-table tr.team-row-unavailable > td { background: rgba(192, 122, 30, .08); }
.teams-compact-table tr.team-row-unavailable > td:first-child { box-shadow: inset 3px 0 0 #c07a1e; }
.team-temp-badge { font-size: 10.5px; color: #c07a1e; margin-left: 6px; white-space: nowrap; }
.teams-compact-table .member-name-line { font-size: 12px; line-height: 1.45; }

/* Angajat inactiv: gri. */
tr.worker-inactive td, tr.worker-inactive a.row-link { color: var(--muted); }
tr.worker-inactive { opacity: .7; }
.worker-inactive-tag {
  font-size: 11px; padding: 0 7px; border: 1px solid var(--muted); border-radius: 10px; color: var(--muted);
}

/* Fișa echipei după ștergere: se poate restaura pe loc. */
.team-deleted-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin: 10px 0; border: 1px solid var(--red);
}

/* Cardurile de pe Acasă duc undeva. */
.dash-card-link { cursor: pointer; }
.dash-card-link:hover { border-color: var(--accent); }

/* „Rezolvă" stă în dreapta rândului, după celelalte acțiuni. */
.note-row-act .note-check { margin-left: 4px; }
.notif-popup-row .notif-popup-actions { flex: 0 0 auto; }

/* „Rezolvă" rămâne în dreapta și când acțiunile notiței coboară pe al doilea
   rând (telefon). */
.note-row-act { margin-left: auto; }

/* Acțiunile rare din antetul fișei: pe un rând, ștergerea în roșu. */
.sheet-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sheet-hero-actions button.danger { color: var(--red); border-color: var(--red); }

/* Acțiunile unei notițe au aceeași înălțime („Rezolvă" era cu 4px mai mic
   decât „⋯" de lângă el). */
.note-row-act .note-check, .note-row-act .notif-dots, .note-row-act .notif-ico {
  height: 28px; box-sizing: border-box; margin-top: 0; margin-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Legenda mică de deasupra listelor de echipe/angajați: culoarea rândului
   înlocuiește coloana de status. */
.list-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin: 0 0 4px; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-left: 3px solid; box-sizing: border-box; }
.legend-unavailable { background: rgba(192, 122, 30, .15); border-color: #c07a1e; }
.legend-inactive { background: rgba(120, 120, 120, .18); border-color: var(--muted); }

.workers-compact-table td { padding: 5px 8px; vertical-align: middle; }
tr.worker-inactive > td { background: rgba(120, 120, 120, .10); }
tr.worker-inactive > td:first-child { box-shadow: inset 3px 0 0 var(--muted); }

/* Flotă: tabel compact și pe telefon, clic pe rând = fișa vehiculului /
   formularul echipamentului (fără coloană de butoane). */
.fleet-compact-table td { padding: 5px 8px; vertical-align: middle; }
tr.row-clickable { cursor: pointer; }
/* Celulă cu acțiune proprie (Flotă: fiecare coloană duce în alt loc). Se
   subliniază la trecerea cu mouse-ul, ca să se vadă că e de apăsat - un rând
   întreg care reacționează la fel peste tot spune contrariul. */
td.cell-clickable { cursor: pointer; }
td.cell-clickable:hover { background: var(--panel-2); text-decoration: underline; text-underline-offset: 2px; }

/* Editorul „Echipamente autorizate": bifa + trei denumiri (ES/RO/EN), cu
   denumirea spaniolă cea mai lată - altfel se tăia în câmp. */
.docs-aut-cat-modal .docs-epis-cat-fields { grid-template-columns: auto 2fr 1.5fr 1.5fr; align-items: end; }
@media (max-width: 720px) {
  .docs-aut-cat-modal .docs-epis-cat-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Oferta de preț - antet pe un rând (Titlu, Corespondent, Țară, Plan), câmpuri
   compacte pe linie (EQ/Net 8 cifre, cantitate 6 cifre, preț până la
   10.000.000), opțiuni manuale, planuri și pop-up-ul de prețuri noi. */
.pof-head-grid {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(130px, .6fr) minmax(0, 1fr);
}
.pof-head-grid .field { margin-bottom: 0; }
.pof-contact-wrap { display: flex; gap: 6px; }
.pof-contact-wrap select, .pof-contact-wrap input { flex: 1 1 0; min-width: 0; }
.pof-head-grid input, .pof-head-grid select { height: 36px; box-sizing: border-box; }
.pof-plan-slot { display: flex; align-items: center; height: 36px; }
.pof-lines-table td input.pof-eqnet { width: calc(8ch + 26px); min-width: 0; }
.pof-lines-table td input.pof-qty { width: calc(6ch + 36px); min-width: 0; }
.pof-lines-table td.pof-cell-price .money-input { width: calc(13ch + 14px); min-width: 0; }
.pof-lines-table td input[type="checkbox"] { width: auto; min-width: 0; min-height: 0; }
.pof-eqnet-cell { display: flex; align-items: center; gap: 8px; }
.pof-add-line-wrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.pof-plan-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px;
}
.pof-plan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pof-manual-option { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pof-lines-table td .pof-manual-option input[type="text"]:not(.money-input) { width: 180px; min-width: 0; font-size: 12px; }
.pof-lines-table td .pof-manual-option .money-input { width: 110px; min-width: 0; font-size: 12px; }
.pof-learn-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.pof-learn-item { display: flex; align-items: center; gap: 10px; }
.pof-learn-item input[type="checkbox"] { width: auto; }
.pof-learn-item .pof-learn-text { flex: 1; }
.pof-learn-item b { white-space: nowrap; }
@media (max-width: 700px) {
  .pof-head-grid { grid-template-columns: minmax(0, 1fr); }
  .pof-head-grid .field { min-width: 0; }
  .pof-head-grid select, .pof-head-grid input { max-width: 100%; min-width: 0; }
  .pof-lines-table td input.pof-qty, .pof-lines-table td input.pof-eqnet { width: 100%; }
  .pof-eqnet-cell input.pof-eqnet { flex: 1; width: auto; }
  .pof-lines-table td.pof-cell-price .money-input { width: auto; }
  .pof-add-line-wrap .tier-add-btn { width: 100%; }
  .pof-lines-table td .pof-manual-option input[type="text"]:not(.money-input) { width: 100%; }
}

/* Planning: „Perioadă" lângă „Filtre" (lună / 15 -> 15 / de la - până la) și
   ofertele fără date listate în secțiunea „În ofertare". */
.cal-toggle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-toggle-row .weekday-toggle { max-width: none; }
.cal-period-row { margin-bottom: 10px; }
.cal-period-dates { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-period-dates label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cal-period-dates input[type="date"] { width: auto; }
.cal-tender-undated { margin-top: 10px; }
.cal-unscheduled-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* Oprită / finalizată parțial pe rândul echipei: bară obișnuită (perioada
   lucrată), cu o bandă îngustă la capătul din dreapta - acolo s-a oprit.
   Ce a rămas stă jos, pe rândul „De finalizat" (.cal-bar-remaining). */
.cal-bar-stopped::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--text) 0 3px, var(--panel) 3px 6px);
}
.dash-unfinished-table td.mono { white-space: nowrap; }

/* ===== REGULĂ GLOBALĂ: câmpurile au mărimea conținutului (15.09.2026) =====
   Niciun câmp nu se mai întinde pe toată celula dacă nu are ce pune acolo:
   numerele după câte cifre au, codurile după maxlength, datele și sumele cât
   încap. Rândurile de câmpuri (.form-row și .grid2) așază câmpurile unul lângă
   altul și le trec pe rândul următor doar când nu mai încap.
   Verificat automat: scripts/verifica_aspect.js, tipul „camp-prea-lat". */
.form-row, .grid2 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-start; }
.form-row { margin-bottom: 4px; }
.form-row > .field, .grid2 > .field, .grid2 > div { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.form-row > .field.grow { flex: 1 1 220px; }
.form-row > .field.grow-2 { flex: 2 1 280px; }
.form-row > .full, .grid2 > .full, .grid2 > .field:has(textarea) { flex: 1 1 100%; }
.form-row > .field-check { align-self: flex-end; padding-bottom: 8px; }
.field input[type="number"], td input[type="number"] { width: calc(8ch + 34px); max-width: 100%; }
.field input[type="number"].num-3, td input[type="number"].num-3 { width: calc(3ch + 40px); }
.field input[type="number"].num-5, td input[type="number"].num-5 { width: calc(5ch + 40px); }
.field input[type="file"] { width: auto; max-width: 100%; }
.field input[type="date"], .field input[type="time"] { width: auto; max-width: 100%; }
.field input[size] { width: auto; max-width: 100%; }
.field .date-field-wrap { width: calc(10ch + 70px); max-width: 100%; }
.field .date-field-wrap .date-text { width: 100%; min-width: 0; }
.field .money-input-wrap { display: inline-flex; width: auto; max-width: 100%; }
.field .money-input-wrap .money-input { flex: 0 1 auto; width: calc(11ch + 18px); min-width: 0; }
.field input[maxlength="2"], td input[maxlength="2"] { width: calc(2ch + 26px); max-width: 100%; }
.field input[maxlength="3"], td input[maxlength="3"] { width: calc(3ch + 26px); max-width: 100%; }
.field input[maxlength="4"], td input[maxlength="4"] { width: calc(4ch + 26px); max-width: 100%; }
.field input[maxlength="5"], td input[maxlength="5"] { width: calc(5ch + 26px); max-width: 100%; }
.field input[maxlength="6"], td input[maxlength="6"] { width: calc(6ch + 26px); max-width: 100%; }
.field input[maxlength="7"], td input[maxlength="7"] { width: calc(7ch + 26px); max-width: 100%; }
.field input[maxlength="8"], td input[maxlength="8"] { width: calc(8ch + 26px); max-width: 100%; }
.field input[maxlength="9"], td input[maxlength="9"] { width: calc(9ch + 26px); max-width: 100%; }
.field input[maxlength="10"], td input[maxlength="10"] { width: calc(10ch + 26px); max-width: 100%; }
.field input[maxlength="11"], td input[maxlength="11"] { width: calc(11ch + 26px); max-width: 100%; }
.field input[maxlength="12"], td input[maxlength="12"] { width: calc(12ch + 26px); max-width: 100%; }
.field input[maxlength="13"], td input[maxlength="13"] { width: calc(13ch + 26px); max-width: 100%; }
.field input[maxlength="14"], td input[maxlength="14"] { width: calc(14ch + 26px); max-width: 100%; }
.field input[maxlength="15"], td input[maxlength="15"] { width: calc(15ch + 26px); max-width: 100%; }
.field input[maxlength="16"], td input[maxlength="16"] { width: calc(16ch + 26px); max-width: 100%; }
.field input[maxlength="17"], td input[maxlength="17"] { width: calc(17ch + 26px); max-width: 100%; }
.field input[maxlength="18"], td input[maxlength="18"] { width: calc(18ch + 26px); max-width: 100%; }
.field input[maxlength="19"], td input[maxlength="19"] { width: calc(19ch + 26px); max-width: 100%; }
.field input[maxlength="20"], td input[maxlength="20"] { width: calc(20ch + 26px); max-width: 100%; }
.field input[maxlength="21"], td input[maxlength="21"] { width: calc(21ch + 26px); max-width: 100%; }
.field input[maxlength="22"], td input[maxlength="22"] { width: calc(22ch + 26px); max-width: 100%; }
.field input[maxlength="23"], td input[maxlength="23"] { width: calc(23ch + 26px); max-width: 100%; }
.field input[maxlength="24"], td input[maxlength="24"] { width: calc(24ch + 26px); max-width: 100%; }
/* ===== Fișa pe două coloane (24.09.2026) =====
   Datele lucrării în stânga, banii în dreapta, lipiți pe ecran când derulezi:
   „cât face, cât s-a acoperit, cât se plătește" se întreabă tot timpul, nu o
   dată, la început. Pe telefon coloanele se pun una sub alta. */
.sheet-two-col { display: flex; gap: 16px; align-items: flex-start; }
.sheet-main { flex: 1 1 auto; min-width: 0; }
.sheet-side { flex: 0 0 330px; max-width: 330px; position: sticky; top: 12px; }
.sheet-sec { margin-top: 0; margin-bottom: 12px; }
.sheet-side .detail-grid { grid-template-columns: 1fr; }
.sheet-side-grid { gap: 2px 10px; }
.sheet-kpi { margin-bottom: 8px; }
.sheet-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
}
.sheet-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.2; }

/* Câmpurile goale rămân pe ecran, dar șterse: se vede ce mai e de completat,
   fără să fure atenția de la ce e scris. */
.detail-item-empty label, .detail-item-empty .value { opacity: .45; }

/* Editarea pe loc: valoarea e un buton discret, cu un creion care apare la
   trecerea mouse-ului. Când se deschide, caseta ia locul valorii. */
.inline-value {
  border: 0; background: none; padding: 1px 2px; margin: -1px -2px; color: inherit;
  font: inherit; text-align: left; cursor: text; border-radius: 3px;
  display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%;
}
.inline-value:hover { background: var(--hover, rgba(127, 127, 127, .12)); }
.inline-pen { font-size: 11px; opacity: 0; color: var(--muted); }
.inline-value:hover .inline-pen, .inline-value:focus .inline-pen { opacity: .8; }
.inline-input {
  width: 100%; max-width: 100%; background: var(--bg); border: 1px solid var(--accent);
  color: var(--text); padding: 2px 6px; font-family: var(--sans); font-size: 13px;
}
.inline-input:focus { outline: none; }

@media (max-width: 980px) {
  .sheet-two-col { flex-direction: column; }
  /* Pe coloană, o valoare lungă (adresa, numele lucrării) ar trage coloana
     peste marginea ecranului: se leagă de lățimea părintelui. */
  .sheet-main { width: 100%; max-width: 100%; min-width: 0; }
  .sheet-side { position: static; flex: none; width: 100%; max-width: none; }
  .sheet-side .detail-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Planul si oferta de pret, direct pe randul proiectului. Verde = exista,
   gri punctat = lipseste si se incarca de aici. */
.proj-docs { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.proj-doc-chip {
  display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 1px 4px; border-radius: 3px; line-height: 18px; cursor: pointer;
}
.proj-doc-chip.has { border-color: #22a06b; background: #22a06b14; position: relative; }
.proj-doc-chip.has .proj-doc-name {
  border: 0; background: none; color: #1a7d52; font: inherit; cursor: pointer; padding: 0 2px;
}
.proj-doc-chip.add { border-style: dashed; color: var(--muted); }
.proj-doc-chip.add:hover { color: var(--accent); border-color: var(--accent); }
/* Numele si cele trei puncte sunt doua butoane lipite: aceeasi inaltime si
   aceeasi linie, altfel se vede ca sunt decalate. */
.proj-doc-chip.has .proj-doc-name,
.proj-doc-chip .notif-dots {
  border: 0; background: none; padding: 0 2px; line-height: 18px; height: 18px;
  display: inline-flex; align-items: center;
}
/* Totalul de sub tabelul de proiecte ramane pe un rand chiar si cand coloana
   s-a ingustat („16 proiecte", nu „16" si „proiecte"). */
table.table-cards > tfoot td { white-space: nowrap; }
@media (max-width: 720px) {
  .proj-doc-chip { font-size: 12px; line-height: 22px; padding: 2px 6px; }
}

/* Bara tabelului de PO-uri: cautare, filtre rapide si perioada, pe un rand
   care se rupe singur cand nu mai incape. */
.po-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px;
}
.po-filter-bar .po-search { flex: 1 1 260px; max-width: 360px; min-width: 0; }
.po-filter-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.po-totals { margin-bottom: 10px; }
/* Capul de coloana pe care se poate sorta arata ca un buton, nu ca un titlu. */
.po-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.po-th-sort:hover { color: var(--accent); }
.po-th-sort.active { color: var(--accent); }
.po-table td.cell-title a { font-weight: 600; }
/* „Facturat — 1080" e o valoare, nu o propoziție: nu se rupe pe două rânduri. */
.po-table td[data-label="Stare"] .badge { white-space: nowrap; }
@media (max-width: 720px) {
  .po-filter-bar .po-search { flex: 1 1 100%; max-width: none; }
  .po-filter-bar select.filter-select { flex: 1 1 100%; max-width: 100%; }
}

/* Fișa proiectului, PO-uri: cât s-a alocat din suma ofertată. */
.project-po-tally {
  margin-top: 6px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 13px;
}

/* Fișa de salariu: detalierea unei lucrări, în același fel în care oferta de
   preț arată „Detaliere preț" (aceleași clase .pof-subline). Stă sub numele
   lucrării, în celula „Ce" a tabelului „Extras" (payslip_page.js). */
.payslip-breakdown { max-width: 560px; }
.payslip-breakdown .pof-subline-amount { min-width: 110px; }
.payslip-breakdown .payslip-subline-muted { color: var(--muted); }
.payslip-breakdown .payslip-subline-total { border-top: 1px solid var(--border); border-bottom: 0; }
@media (max-width: 720px) {
  .payslip-breakdown { max-width: none; }
  .payslip-breakdown .pof-subline-amount { min-width: 0; }
}

/* ===== REGULĂ GLOBALĂ: câmpurile de pe același rând încep de la aceeași
   înălțime (23.09.2026) =====
   O etichetă cu subtitlu („opțional”, explicații scurte) ocupă două rânduri și
   îi cobora căsuța față de vecinele ei, așa că rândul ieșea în trepte. Într-un
   rând care are măcar un subtitlu, toate etichetele primesc aceeași înălțime
   minimă, deci toate căsuțele încep de la același nivel.
   Verificat automat: scripts/verifica_aspect.js, tipul „campuri-decalate”. */
:has(> .field > label .label-note) > .field > label,
:has(> .field > label .label-note) > div > label {
  min-height: 26px;
}
@media (max-width: 720px) {
  .form-row > .field, .grid2 > .field, .grid2 > div { flex: 1 1 100%; }
  .form-row > .field-check { padding-bottom: 0; }
}

/* Valori lungi fără spații (linkuri Google Maps la adresă) nu mai lărgesc fișa pe telefon. */
.detail-item .value { overflow-wrap: anywhere; }
/* Istoricul lifturilor speciale similare din formularul de proiect. */
.special-history { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.special-history-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.special-history td { white-space: nowrap; }

/* Echipe > Concedii: a treia vedere, singură pe ecran. */
.echipe-col-leaves { display: none; }
.echipe-columns[data-view="concedii"] { grid-template-columns: minmax(0, 1fr); }
.echipe-columns[data-view="concedii"] .echipe-col-teams,
.echipe-columns[data-view="concedii"] .echipe-col-workers { display: none; }
.echipe-columns[data-view="concedii"] .echipe-col-leaves { display: block; }
.leaves-compact-table td { white-space: nowrap; }
/* Planning: concediu = bandă chihlimbar SUB liniile de lucrări (28.10.2026,
   calendar.js::calRenderTeamRow), nimic peste bare. Linie de 14px (13 + 1 aer),
   culori pline (ies la fel în PNG). Textul în două bucăți: dacă nu încape,
   se taie întâi efectul (`.cal-leave-eff`), apoi numele (`.cal-leave-main`). */
.cal-leave-strip {
  position: absolute; height: 13px; z-index: 1; box-sizing: border-box;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  padding: 0 4px; border-radius: 3px; border-left: 3px solid #BA7517;
  background: #FAEEDA; color: #633806;
  font-size: 10.5px; line-height: 13px; font-weight: 600;
  pointer-events: auto; cursor: help;
}
.cal-leave-strip-simple { font-size: 10px; }
.cal-leave-main, .cal-leave-eff { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-leave-main { flex: 0 1 auto; }
.cal-leave-eff { flex: 0 100000 auto; font-weight: 500; }

/* Planning: zilele nelucrătoare ale proiectului (nebifate, sărbători) - nu se
   numără. Bara se „întrerupe" acolo: fundalul grilei (al temei), cu o linie
   subțire și o hașură ușoară în culoarea statusului (--cal-c, pus pe bară),
   ca o duminică să nu pară zi lucrată. Pauza (oprit / concediu) rămâne
   hașura albă-neagră peste culoare - altceva decât ziua liberă. */
.cal-bar-off {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background:
    linear-gradient(var(--cal-c, #888), var(--cal-c, #888)) center / 100% 2px no-repeat,
    repeating-linear-gradient(135deg, rgba(128,128,128,.35) 0 1px, rgba(0,0,0,0) 1px 6px),
    var(--panel);
  background:
    linear-gradient(var(--cal-c, #888), var(--cal-c, #888)) center / 100% 2px no-repeat,
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--cal-c, #888) 45%, transparent) 0 1px, transparent 1px 6px),
    var(--panel);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cal-c, #888) 50%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--cal-c, #888) 50%, transparent);
}
/* Numerele fișei, cât timp fiecare zi are numerele ei: rămân pe ecran (sunt
   rezerva pentru zilele necompletate), dar stinse, ca să se vadă că acum
   numărul se dă mai jos, pe fiecare zi. */
.ot-number-muted { opacity: .55; }

/* ===== Tabelul fișelor de Ore Extra =====
   Descrierea („ce s-a lucrat în ziua asta") e de departe cel mai lung text
   din rând, iar într-un tabel cu șapte coloane egale ajungea strivită pe
   două litere pe rând. Aici lățimile sunt împărțite după cât text duce
   fiecare coloană: data, echipamentul și acțiunile își iau strictul necesar
   (nowrap), iar descrierea și lista de oameni primesc restul și se rup pe
   mai multe rânduri. `table-layout: auto` rămâne, ca o descriere scurtă să
   nu lase coloana goală degeaba. */
.ot-sheets-table { width: 100%; }
/* Coloanele scurte iau strictul necesar (width:1% + nowrap = „cât textul"),
   ca tot restul lățimii să rămână descrierii. Tabelul era mai lat decât
   ecranul (1337px într-un spațiu de 1152), iar atunci browserul strânge
   descrierea la minimul ei și o rupe pe treizeci de rânduri - exact ce se
   vedea. Data scurtă, EQ/Net pe două rânduri și numele lucrării care are
   voie să se rupă aduc tabelul înapoi în ecran. */
.ot-sheets-table .ot-col-period,
.ot-sheets-table th:nth-child(6), .ot-sheets-table td:nth-child(6),
.ot-sheets-table .cell-action { white-space: nowrap; width: 1%; }
.ot-sheets-table .ot-col-numbers {
  width: 1%; font-size: 12px; max-width: 110px;
  white-space: normal; overflow-wrap: anywhere;
}
/* ⚠ fișa are alte numere decât proiectul (numerele fișei în title). */
.ot-sheets-table .ot-num-warn { color: var(--st-warn); cursor: help; font-size: 11px; }
.ot-sheets-table .ot-col-team { white-space: normal; min-width: 110px; max-width: 150px; }
/* Codul echipei era marcat „fără rupere" într-o coloană de 150px: textul ieșea
   peste coloana vecină (Angajați). Acum se rupe, dar numai între cuvinte. */
.ot-sheets-table .ot-col-team .ot-nowrap { white-space: normal; }
.ot-sheets-table td { overflow-wrap: break-word; }
/* Butoanele rândului, unul sub altul: pe orizontală cereau 180px dintr-un
   tabel în care descrierea abia încăpea, iar rândul e oricum înalt. */
.ot-sheets-table .cell-action { width: 1%; }
.ot-sheets-table .cell-action button,
.ot-sheets-table .cell-action .small-link-btn {
  display: block; width: 100%; margin: 0 0 3px; text-align: center;
}
.ot-sheets-table .ot-col-desc { white-space: normal; width: 60%; min-width: 260px; }
.ot-sheets-table .ot-col-people { white-space: normal; width: 18%; min-width: 150px; font-size: 12px; }

@media (max-width: 720px) {
  /* Pe telefon rândul devine oricum cartonaș: fiecare valoare are rândul ei,
     deci limitele de lățime nu mai au ce să țină. */
  .ot-sheets-table .ot-col-desc,
  .ot-sheets-table .ot-col-team,
  .ot-sheets-table .ot-col-people { max-width: none; min-width: 0; }
}

/* Un `select` dintr-un câmp e inline-block, deci se așază pe LINIA de bază a
   rândului de text în care cade. Când textul opțiunii e lung, linia devine
   mai înaltă și selectul coboară câțiva pixeli față de câmpul vecin - exact
   ce semnalează detectorul `campuri-decalate`, și exact ce se vede pe fișa
   unei lucrări cu lift special („— nu există modele în lista Client —").
   Aliniat la vârful liniei, câmpul stă lipit sub eticheta lui, mereu. */
.field > select { vertical-align: top; }

/* Bifa „serviciu" de sub cantitate: mică și stinsă, fiindcă e excepția
   (ore, transport), nu regula - o ofertă obișnuită e de lifturi. */
.pof-service-check { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Comparația rundelor unei negocieri: diferența față de runda de dinainte,
   verde când prețul a scăzut (clientul a tăiat / noi am lăsat), roșu când a
   urcat. Culoarea e a MIȘCĂRII, nu a cuiva: aceeași cifră e bună sau rea
   după cine o citește, iar aici se citește „încotro s-a dus prețul". */
.pof-diff-down { color: #2f7d5f; }
.pof-diff-up { color: var(--red); }
.pof-compare-total td { border-top: 2px solid var(--border); }
.pof-compare-table th, .pof-compare-table td { white-space: nowrap; }

/* ===== Concedii: calendarul anului și statistica (27.09.2026) =====
   Un rând per om, anul întreg pe lățimea ecranului. Poziția barelor e în
   PROCENTE din an, nu în pixeli: grila rămâne corectă pe orice lățime, deci
   merge și pe telefon fără o a doua socoteală. Culoarea barei e a echipei
   (aceeași paletă ca peste tot, teamColor). */
.leaves-cal { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }
.leaves-cal-row { display: flex; align-items: center; gap: 8px; }
.leaves-cal-label {
  flex: 0 0 150px; min-width: 0; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.leaves-cal-label b { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.leaves-cal-track {
  position: relative; flex: 1 1 auto; height: 18px;
  background: var(--panel); border: 1px solid var(--border);
}
.leaves-cal-head .leaves-cal-track { height: 16px; background: none; border: none; }
.leaves-cal-month {
  position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border);
  font-size: 9px; color: var(--muted); padding-left: 2px; line-height: 16px;
}
.leaves-cal-row:not(.leaves-cal-head) .leaves-cal-month { font-size: 0; }
.leaves-cal-bar {
  position: absolute; top: 2px; bottom: 2px; border-radius: 2px; cursor: pointer;
  opacity: .9; min-width: 2px;
}
.leaves-cal-bar:hover { opacity: 1; outline: 1px solid var(--text); }

/* Peste limita de zile pe an: roșu, dar fără să blocheze nimic - programul
   spune, omul decide. */
.leaves-over { color: var(--red); }
.leaves-over-badge {
  background: rgba(229, 83, 75, .15); color: var(--red); border: 1px solid var(--red);
  font-size: 10px; margin-left: 4px;
}
.leaves-over-note { color: var(--red); }
.leaves-stats-table th, .leaves-stats-table td { white-space: nowrap; }

@media (max-width: 720px) {
  .leaves-cal-label { flex-basis: 96px; }
}

/* Legenda hărții de cazări: aceleași culori ca punctele de pe hartă -
   verde plin = ședere activă, cerc gol = ședere încheiată (istoric). */
.stay-map-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: -1px; margin-right: 3px;
}
.stay-map-dot-active { background: #22a06b; border: 2px solid #22a06b; }
.stay-map-dot-past { background: #fff; border: 2px solid #8a8a8a; }

/* Planning: zilele în care proiectul STĂ din cauza unui concediu care îl
   oprește (al echipei sau al montatorului). Altă hașură decât zilele
   nelucrătoare - aici nu e „duminica", ci „echipa nu e" - iar data de sfârșit
   s-a mutat deja cu ele (services/leave_calc.py). Fără semnul ăsta, bara doar
   se lungea și nu se înțelegea dacă proiectul s-a decalat sau se suprapune. */
.cal-bar-pause {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.75) 0 3px, rgba(0,0,0,.35) 3px 7px);
  opacity: .85;
}
/* Golul unei lucrări oprite în care echipa a lucrat la alta, pe aceeași linie
   (calendar.js::calRenderTeamRow): bara oprită e decupată acolo - fundalul
   grilei, doar margini subțiri în culoarea ei - iar bara care lucrează stă
   peste (`.cal-bar-inset`). Se citește „NAVE oprită, echipa la MONOMOD". */
.cal-bar-gap {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: var(--panel);
  border-top: 2px solid var(--cal-c, #888); border-bottom: 2px solid var(--cal-c, #888);
  box-sizing: border-box;
}
.cal-bar.cal-bar-inset, .cal-bar.cal-bar-inset:hover {
  z-index: 4; min-width: 6px;
  /* Altă lucrare, chiar dacă are aceeași culoare de status: tăietură albă în jur. */
  box-shadow: 0 0 0 2px var(--panel), 0 1px 4px rgba(0, 0, 0, .45);
}
/* Coloana cu echipele rămâne deasupra barelor când graficul se derulează pe
   orizontală: textul barelor (z-index 1), bara din gol (4), concediile (4) și
   orele suplimentare (6) treceau peste numele echipei pe telefon. */
.cal-row > .cal-label-cell { z-index: 7; }

/* Planning: orele suplimentare ale echipei, în ziua lor. Se lucrează des
   duminica sau după ce proiectul s-a terminat, deci marcajul stă pe rând, nu
   pe bară - altfel exact zilele astea rămâneau invizibile. */
.cal-overtime {
  position: absolute; bottom: 0; height: 11px; z-index: 6; cursor: help;
  background: #b8741a; color: #fff; border-radius: 2px;
  font-size: 9px; line-height: 11px; text-align: center; font-weight: 700;
  overflow: hidden; white-space: nowrap;
}

/* Eticheta barei (27.10.2026): rândul 1 numele, mai mare; rândul 2 (doar dacă
   e bifat în „Afișare") EQ / Network / oraș, mic. Fără rândul 2, numele stă
   centrat pe verticală. Pe barele lungi eticheta se repetă (`.cal-bar-rep`,
   poziționată din calendar.js) - fără sticky, ca să iasă și în PNG. */
.cal-bar-text, .cal-bar-rep {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; line-height: 1.15; min-width: 0; overflow: hidden;
}
.cal-bar-rep {
  position: absolute; top: 0; bottom: 0; z-index: 1; padding-left: 6px;
  opacity: .85; pointer-events: none;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.6);
}
.cal-bar-name, .cal-bar-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar-name { font-size: 12px; font-weight: 600; line-height: 13px; }
.cal-bar-sub { font-size: 11px; line-height: 13px; opacity: .92; }
/* Coloana echipelor pe două rânduri: echipa, apoi „Montator · Ajutor". */
.cal-label-cell.cal-label-2l {
  flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
  padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.cal-label-2l .cal-label-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 13px; }
/* 28.10.2026: 11px / 10,5px pe rând - doi oameni încap în linia de 34px. */
.cal-label-people {
  display: block; min-width: 0; font-size: 11px; font-weight: 400; line-height: 10.5px;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Panoul „Afișare": bife pe un rând, care se rup pe telefon. */
.cal-display-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.cal-display-row label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); white-space: nowrap; }
.cal-display-row label.is-off { opacity: .45; }

/* Titlul rămâne lizibil și peste hașură: umbră închisă în jurul literelor. */
.cal-bar-text {
  position: relative; z-index: 1;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.6);
}

/* Titluri lungi de proiect (ex. „VALLEY AND AVENUE - BLOQUE 2 ASCENSOR IZQUIERDO"): pe telefon trec pe rândul următor, nu lărgesc pagina. */
@media (max-width: 720px) {
  .hero > div { min-width: 0; }
  .hero h1 { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  /* Pe ecranul principal titlul e NUMELE FIRMEI - mereu același, deja știut.
     Acolo se taie cu puncte: două rânduri de antet pe fiecare ecran, doar ca
     să scrie din nou cum cheamă firma, e un preț prea mare. Pe fișe (proiect,
     angajat) titlul e datele paginii, deci acolo se rupe, ca până acum. */
  body.app-page .hero h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Rapoarte > Realizat pe echipe */
.rapoarte-realizat-controls { align-items: center; gap: 8px; }
.rapoarte-realizat-controls input[type="date"] { width: auto; }
.rapoarte-realizat-table td.mono { white-space: nowrap; }
.rapoarte-realizat-detail td { font-size: 12px; color: var(--muted); padding-left: 18px; }

/* Rapoarte > Lunar pe echipe: 12 luni + total, prima coloană fixă la derulare */
.rapoarte-lunar-controls { align-items: center; gap: 8px; }
.rapoarte-lunar-table th, .rapoarte-lunar-table td { white-space: nowrap; padding: 6px 8px; vertical-align: top; }
.rapoarte-lunar-table .rapoarte-lunar-team,
.rapoarte-lunar-table th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  border-right: 1px solid var(--border);
}
.rapoarte-lunar-cell { font-family: var(--mono); font-size: 12px; text-align: right; }
.rapoarte-lunar-cell.is-clickable { cursor: pointer; }
.rapoarte-lunar-cell.is-clickable:hover, .rapoarte-lunar-cell.is-open { background: var(--panel-2); }
.rapoarte-lunar-cell.is-open { box-shadow: inset 0 -2px 0 var(--accent); }
.rapoarte-lunar-meta { font-size: 10px; color: var(--muted); font-weight: 400; }
.rapoarte-lunar-empty { color: var(--muted); }
@media (max-width: 720px) {
  /* Pe telefon numele echipei se rupe, ca prima coloană fixă să nu ia jumătate de ecran. */
  .rapoarte-lunar-table .rapoarte-lunar-team { white-space: normal; min-width: 90px; max-width: 120px; }
}
.rapoarte-lunar-pos { color: var(--green); }
.rapoarte-lunar-neg { color: var(--red); }
.rapoarte-lunar-detail > td { background: var(--panel-2); padding: 6px 8px; white-space: normal; text-align: left; }
.rapoarte-lunar-detail-in {
  position: sticky; left: 8px; display: flex; flex-direction: column; gap: 8px;
  width: max-content; max-width: calc(100vw - 48px);
}
.rapoarte-lunar-breakdown {
  display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 12px;
}
.rapoarte-lunar-label { display: block; font-family: var(--sans); font-size: 10px; color: var(--muted); text-transform: uppercase; }
.rapoarte-lunar-items {
  display: grid; gap: 4px 14px; align-items: baseline;
  grid-template-columns: minmax(140px, max-content) max-content minmax(0, max-content) max-content;
  font-size: 12px; color: var(--muted);
}
@media (max-width: 720px) {
  /* Telefon: numele pe rândul lui, dedesubt data · tip · sumă. */
  .rapoarte-lunar-items { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 2px 10px; }
  .rapoarte-lunar-items .row-link { grid-column: 1 / -1; margin-top: 4px; }
}
.rapoarte-lunar-items .mono { font-family: var(--mono); }
.rapoarte-lunar-items .row-link { white-space: normal; }

/* Opțiune per bucată în formularul de proiect: „× N", clic pentru alt număr. */
.option-chip-qty {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 5px; margin-left: 4px; font-size: 11px; cursor: pointer; color: var(--text);
}
.option-chip .option-chip-qty,
.option-chip .option-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; line-height: 16px; vertical-align: middle; box-sizing: border-box;
}

/* Suma pe care o reprezintă opțiunea (preț / montator / ajutor), în chip. */
.option-chip-amount { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Chipul cu sume nu lărgește pagina: se rupe pe două rânduri când nu încape. */
.option-chip { max-width: 100%; flex-wrap: wrap; }
.option-chip .option-chip-qty { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 720px) { .option-chip-amount { white-space: normal; } }

/* Filtru regiune / oraș lângă filtrul de țară (Proiecte, Planning, Echipe). */
.geo-filter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.geo-filter:empty { display: none; }
.geo-filter .filter-select { max-width: 180px; }
@media (max-width: 720px) { .geo-filter .filter-select { max-width: 100%; } }

/* „De făcut azi" (todos.js): listă scurtă, bifabilă, pe Acasă și în fereastra
   de reamintire. Rândurile sunt compacte intenționat - e o listă de mărunțișuri,
   nu un tabel. */
.todo-wrap { gap: 6px; }
.todo-add { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.todo-add input[type="text"] { flex: 1 1 auto; min-width: 0; }
.todo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--border); background: var(--panel);
}
.todo-check { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; margin: 0; }
.todo-check input[type="checkbox"] { width: auto; min-width: 0; flex: 0 0 auto; }
.todo-check span { overflow-wrap: anywhere; }
.todo-item-done .todo-check span { text-decoration: line-through; color: var(--muted); }
.todo-from { margin-top: 0; white-space: nowrap; }
.todo-remove {
  flex: 0 0 auto; background: none; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 0 6px; cursor: pointer;
}
/* Butoanele unui rând stau pe aceeași linie și au aceeași înălțime - altfel
   „×" iese cu câțiva pixeli mai sus decât „Mută pe azi" (verifica_aspect). */
.todo-item button { align-self: center; height: 30px; min-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.todo-remove:hover { color: var(--red); }
.todo-older { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.todo-older .footnote { margin-top: 0; }
.todo-reminder-modal { max-width: 520px; }
.todo-reminder-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
@media (max-width: 768px) {
  /* Pe telefon butoanele sunt mai inalte (se apasa cu degetul), dar tot egale. */
  .todo-item button { height: 40px; }
  .todo-add { flex-wrap: wrap; }
  .todo-add input[type="text"] { flex: 1 1 100%; }
  /* Randul NU se rupe: textul lung se aseaza pe mai multe linii in dreptul
     bifei, iar „×" ramane la capatul randului, nu sub el. */
  .todo-item { flex-wrap: nowrap; }
  .todo-from { display: none; }
}

/* Pozițiile citite din PDF-ul comenzii (fișa PO): textul liber al unei poziții
   are mai multe rânduri, deci celula lui păstrează rândurile, iar restul
   coloanelor rămân strânse. */
.po-lines-table .po-line-desc { white-space: pre-line; min-width: 260px; }
.po-lines-table td { vertical-align: top; }

/* ---------- Cazări: cine stă acolo, graficul și harta ---------- */
/* Alegerea echipelor/angajaților: „chips" + un dropdown de adăugare. */
.stay-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stay-picker .stay-picker-add { width: auto; min-width: 150px; }
.stay-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px;
}
.stay-chip-x { background: none; border: 0; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.stay-chip-x:hover { color: var(--red); }
.stay-team-tag { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; white-space: nowrap; }

/* Cazări: UN singur rând sus - titlu | filtre | calendar | + Cazare.
   Bara comună (`.module-header`, app.js::wrapModuleHeader) aplatizează
   bara de titlu și rândul de filtre cu `display: contents`, deci toate
   controalele sunt copii ai aceleiași cutii flex și li se poate da ordinea
   aici. „+ Cazare" are `margin-left: auto`: stă la capătul din dreapta,
   opus titlului, oricât de lată e fereastra (cerut 08.10.2026). */
#panel-cazari .module-header > .toolbar > h2 { order: 0; }
#panel-cazari .module-header .filter-bar-row > * { order: 1; }
#panel-cazari .module-header #stayCalControls { order: 2; }
#panel-cazari .module-header .btn-ico-group,
#panel-cazari .module-header .module-filters-toggle { order: 3; }
#panel-cazari .module-header .btn-ico-group { margin-left: auto; }
.stay-cal-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stay-cal-controls:empty { display: none; }
/* Despărțitor între filtre și comutatoarele calendarului, ca la acțiuni. */
.stay-cal-controls::before {
  content: ''; width: 1px; align-self: stretch; min-height: 20px; background: var(--border);
}
.stay-cal-modes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stay-cal-modes .weekday-toggle { min-height: 30px; }
/* Selectoarele cât conținutul lor, nu câte 165 px: „Active" n-are nevoie de
   lățimea unei regiuni. Așa tot rândul încape și pe un monitor de 1280. */
#panel-cazari .module-header #stayStatusFilter { width: 100px; }
#panel-cazari .module-header #stayRegionFilter { width: 150px; }
#panel-cazari .module-header #stayCityFilter { width: 140px; }
#panel-cazari .module-header .stay-geo-search-box { flex: 0 1 175px; }
/* Calendarul începe imediat sub bară: rândul lui de titlu a dispărut. */
#accommodationsCalendarWrap { margin-top: 8px; }
.stay-mode-on { border-color: var(--accent); color: var(--accent); }

/* Harta: fereastră mare, cu harta pe aproape tot ecranul. */
.stay-map-modal { max-width: 960px; width: 96vw; }
.stay-map-canvas { height: 62vh; min-height: 320px; border: 1px solid var(--border); }
.stay-map-popup { font-size: 12px; line-height: 1.5; }
.stay-map-popup button { margin-top: 6px; }
@media (max-width: 768px) {
  .stay-map-canvas { height: 55vh; }
  /* Pe telefon comutatoarele trec pe rândul lor, întregi, sub titlu, iar
     „+ Cazare" și „Filtre" urcă pe rândul titlului, în dreapta. */
  .stay-cal-controls { flex: 1 1 100%; }
  .stay-cal-controls::before { display: none; }
  #panel-cazari .module-header .btn-ico-group,
  #panel-cazari .module-header .module-filters-toggle { order: 0; }
  #panel-cazari .module-header #stayStatusFilter,
  #panel-cazari .module-header #stayRegionFilter,
  #panel-cazari .module-header #stayCityFilter { width: auto; flex: 1 1 140px; }
  #panel-cazari .module-header .stay-geo-search-box { flex: 1 1 100%; }
}

/* Valoare care se copiază cu un clic, direct din tabel (CNP, serie+număr
   buletin). Nu deschide fișa - vezi `.no-row-open` din app.js::initRowClick. */
.copy-cell { cursor: copy; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copy-cell:hover { color: var(--accent); }
.copy-cell-ico { font-size: 11px; opacity: .45; }
.copy-cell:hover .copy-cell-ico { opacity: 1; }

/* Ore suplimentare: descrierea fiecărei zile din fișă (data în stânga, textul
   ei lângă). Pe telefon textul trece pe rândul următor, sub dată. */
.ot-day-note { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.ot-day-note-date { flex: 0 0 auto; min-width: 92px; color: var(--muted); font-size: 12px; }
.ot-day-note input[type="text"] { flex: 1 1 260px; min-width: 0; }

/* „Adaugă o zi pentru toată echipa": ziua, orele și ce s-a lucrat, pe un rând.
   Pe telefon câmpurile trec unul sub altul. */
.ot-quick-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-quick-add input[type="text"] { flex: 1 1 260px; min-width: 0; }
@media (max-width: 768px) {
  .ot-quick-add input { flex: 1 1 100%; width: 100% !important; }
}

/* ---------- Fișa de ore suplimentare, pe zile (pagina /overtime/new) ----------
   Un bloc = o zi, ca rândurile din tabelul de pe hârtie: data și ce s-a lucrat
   sus, oamenii cu orele lor dedesubt. */
.ot-total-badge { font-family: var(--disp); font-size: 13px; white-space: nowrap; padding-bottom: 12px; color: var(--muted); }
.ot-total-badge b { color: var(--accent); font-size: 17px; margin-left: 6px; }
.ot-day {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  background: var(--panel); padding: 8px 12px; margin-bottom: 8px;
}
/* Ziua care are deja ore se vede dintr-o privire: dungă colorată în stânga și
   numărul zilei aprins. Fără asta, cinci blocuri identice arătau la fel. */
.ot-day-done { border-left-color: var(--accent); background: var(--panel-2, var(--panel)); }
.ot-day-done .ot-day-no { color: var(--accent); border-color: var(--accent); }
.ot-day-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ot-day-no {
  flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px;
}
.ot-day-date-field { flex: 0 0 150px; }
.ot-day-kind-field { flex: 0 0 120px; }
.ot-day-desc-field { flex: 1 1 260px; min-width: 0; }
/* Eticheta câmpului stă pe același rând cu data și textul, nu pe rândul ei:
   altfel fiecare zi ocupa două rânduri degeaba. */
.ot-day-head .field { margin: 0; }
.ot-day-head .field label { font-size: 10px; margin-bottom: 1px; }
.ot-day-remove {
  flex: 0 0 auto; background: none; border: 0; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.ot-day-remove:hover { color: var(--red); }
/* Oamenii stau unul LÂNGĂ altul cât încape pe lățime, nu unul sub altul. */
/* Cine a lucrat în ziua asta: BIFE, nu rânduri cu dropdown (08.10.2026).
   Orele zilei se scriu o dată, sus, și se pun la toți cei bifați; caseta de
   lângă om e doar pentru cel care a stat altfel. */
.ot-day-hours { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; }
.ot-day-hours .field { margin: 0; flex: 0 0 auto; }
.ot-day-hours .field label { font-size: 10px; margin-bottom: 1px; }
.ot-day-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 10px; margin: 0 0 8px; }
.ot-person {
  display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer;
  padding: 4px 7px; border: 1px solid var(--border); border-radius: 8px;
  border-left: 3px solid transparent;
}
.ot-person:hover { border-color: var(--accent); }
/* Omul bifat se vede altfel de la un metru - altfel cinci căsuțe identice
   arată la fel și nu se știe unde s-a rămas. */
.ot-person-on { border-left-color: var(--accent); background: var(--panel-2, var(--panel)); }
.ot-person input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.ot-person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ot-person-hours { flex: 0 0 62px; }
.ot-person-hours:disabled { opacity: .4; }
.ot-add-person { flex: 0 0 auto; max-width: 210px; }
.ot-day-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ot-day-total { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ot-day-total b { color: var(--text); }
.ot-add-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 768px) {
  .ot-day-date-field { flex: 1 1 140px; }
  .ot-day-kind-field { flex: 1 1 110px; }
  .ot-day-desc-field { flex: 1 1 100%; }
  .ot-day-people { grid-template-columns: 1fr; }
  .ot-add-person { max-width: 100%; flex: 1 1 100%; }
}

/* Pe telefon, un nume lung de proiect din listă lățea câmpul și, cu el, toată
   pagina (fișa de ore). Câmpurile rămân în ecran, iar textul se taie în ele. */
.ot-page-grid { min-width: 0; }
.ot-page-grid .field, .ot-page-grid select, .ot-page-grid input { min-width: 0; max-width: 100%; }
.ot-page-grid select { width: 100%; }

/* Sănătatea programului (Setări > Backup): cifre scurte, una lângă alta. */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.health-grid > div { display: flex; flex-direction: column; gap: 2px; }
.health-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.health-grid b { font-size: 14px; color: var(--text); }
.health-warn { color: var(--red); }
.health-clean { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.health-clean-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.health-clean-row select { width: auto; }

/* „De făcut acum" (Acasă): capul de afiș - ce nu mai poate aștepta, adunat din
   lista personală, notițe și scadențe. Rânduri scurte, cu eticheta sursei. */
.now-wrap { display: flex; flex-direction: column; gap: 6px; }
.now-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); background: var(--panel); }
.now-tag { flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); white-space: nowrap; }
.now-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.now-termen .now-tag { color: var(--red); }
.now-notita .now-tag { color: #f2994a; }
.now-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
@media (max-width: 768px) {
  .now-row { flex-wrap: wrap; }
  .now-tag { flex: 1 1 100%; }
}

/* Aceeasi regula si in fereastra veche de ore suplimentare: randurile de
   angajati stau unul langa altul, nu stivuite pe toata latimea. */
#otRowsBody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 10px; }
#otRowsBody > div { margin-bottom: 0 !important; }
@media (max-width: 768px) { #otRowsBody { grid-template-columns: 1fr; } }
/* Numele echipei nu se rupe pe două rânduri în listele de fișe. */
.ot-nowrap { white-space: nowrap; }

/* Membrii echipei: numele în stânga, acțiunile rare în dreapta, pe același rând. */
.tm-member-name { flex: 1 1 auto; min-width: 0; }
.tm-member-name select { width: 100%; max-width: 420px; }
.tm-member-actions { flex: 0 0 auto; display: flex; gap: 6px; }
/* Membrul echipei: rolul deasupra, omul ales dintr-o listă (se schimbă direct). */
.tm-member-role { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.tm-member-select { width: 100%; max-width: 420px; }

/* Raport de firmă (Documente > Documente firmă): câmpurile strânse în grilă,
   cele lungi pe toată lățimea; butonul și limba pe un singur rând. */
.docs-report-grid .field { margin: 0; }
.docs-report-wide { grid-column: 1 / -1; }
.docs-report-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.docs-report-lang { margin: 0; flex: 0 0 240px; }
@media (max-width: 768px) { .docs-report-lang { flex: 1 1 100%; } }

/* Excel angajați: oamenii într-o coloană, coloanele fișierului în cealaltă. */
.workers-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.workers-export-col { min-width: 0; }
.workers-export-list {
  max-height: 46vh; overflow: auto; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; margin-top: 4px;
}
.workers-export-item { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.workers-export-item input[type="checkbox"] { width: auto; }
.workers-export-item .footnote { margin: 0 0 0 auto; white-space: nowrap; }
.workers-export-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin: 8px 0 2px;
}
@media (max-width: 720px) { .workers-export-grid { grid-template-columns: 1fr; } }

/* ===== Reparații din auditul vizual (09.10.2026) ===== */

/* Butoanele cu iconiță („+ Ofertă nouă", „+ Fișă ore supl.") stăteau pe două
   rânduri cât timp textul putea fi rupt. */
.btn-ico { white-space: nowrap; }

/* Cardurile de cifre: eticheta lungă („Total salarii (montator+ajutor)") ieșea
   din chenar. */
.dash-card { min-width: 0; }
.dash-card-label, .dash-card-value { overflow-wrap: anywhere; }

/* Bara de sub-file (Economic) e mai lată decât ecranul: umbra din margine
   arată că lista continuă, altfel „Clienți de facturare" părea că nu există. */
.subtabs {
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--panel) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Fișe: numele, telefonul și emailul supervizorului se rupeau pe silabe
   („evaristo.a migo@ko ne.com"). Se rup doar între cuvinte, iar adresa lungă
   se taie cu puncte și rămâne întreagă în tooltip. */
.detail-item .value { overflow-wrap: break-word; }
.detail-item .value a.link-inline { overflow-wrap: break-word; }

/* Cazări: legenda calendarului, scurtă. */
.stay-cal-legend { margin-top: -10px; }
.stay-cal-legend .legend-swatch + span { margin-right: 4px; }
.stay-swatch-ok { background: #2e9e63; }
.stay-swatch-soon { background: #e8821f; }
.stay-swatch-late { background: #d9534f; }

/* Câmpurile de fișier: buton al programului, cu numele fișierului lângă el
   (controlul brut al browserului scria „No file chosen", în engleză). */
.file-field { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
/* Inputul rămâne în pagină (formularele citesc `input.files`), dar strâns la
   un punct. `!important`: regula globală „câmpurile se întind cât celula" are
   specificitate mai mare și îl întindea pe toată lățimea - invizibil, dar
   lățea pagina cu 18px pe telefon. */
.file-field input[type="file"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: 0; opacity: 0; pointer-events: none;
  overflow: hidden; clip: rect(0 0 0 0);
}
.file-field-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

@media (max-width: 720px) {
  /* Antetul: rândul cu data începea lipit de marginea ecranului. */
  .world-clock { padding-left: 10px; }
}

/* ===== Caută în tabel (bara de deasupra listelor lungi) ===== */
.tt-find { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
.tt-find-input {
  width: 200px; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); color: var(--text);
}
.tt-find-count { white-space: nowrap; }
.tt-find-sums { overflow-wrap: anywhere; }
tr.tt-row-off { display: none !important; }

/* Pe telefon câmpul ia tot rândul: lângă numărătoare rămâneau 60px de scris.
   `flex`, nu `width: 100%`: într-o cutie cu margine interioară, 100% se măsoară
   din altceva decât din locul rămas și câmpul ieșea 18px în afara ecranului. */
@media (max-width: 720px) {
  .tt-find-input { flex: 1 1 100%; width: auto; }
}

/* Facturi: scadența trecută - dungă roșie pe rând și cu câte zile s-a depășit. */
tr.row-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.badge-late {
  background: rgba(229, 83, 75, .15); color: var(--red);
  border: 1px solid var(--red); font-size: 10px;
}

/* Meniul „⋯" deschis dintr-un rând de tabel: plutește peste tabel, altfel ar
   împinge rândul în jos și lista ar sări sub degete. */
td.cell-action { position: relative; }
td.cell-action > .notif-row-menu {
  position: absolute; right: 4px; top: 100%; z-index: 24;
  min-width: 170px; margin: 0; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

/* ===== Oferta „doar de citit": fișă, nu formular blocat ===== */
.pof-view-mode .pof-view-gone { display: none !important; }
/* Câmpurile rămase se citesc ca text: fără chenar, fără fundal de câmp. */
.pof-view-mode #app :is(input, select, textarea):disabled {
  background: transparent; border-color: transparent; box-shadow: none;
  padding-left: 0; padding-right: 0; -webkit-appearance: none; appearance: none;
  font-weight: 600;
}
/* Cifrele noastre interne nu se trimit mai departe. */
.pof-view-mode .pof-line-check,
.pof-view-mode .pof-unvalidated-tag,
.pof-view-mode [id^="pofLineBudget_"],
.pof-view-mode .pof-cell-remove,
.pof-view-mode .pof-add-line-wrap,
.pof-view-mode #offerEditHint { display: none !important; }
/* Culorile de lucru (linie validată / linia în lucru) sunt tot stare internă. */
.pof-view-mode .pof-line-row, .pof-view-mode .pof-line-subrow { background: transparent; }
/* Bifele de lucru („serviciu", „Indisponibil") si campul de incarcare raman in
   formular, nu in fisa trimisa mai departe. */
.pof-view-mode .pof-service-check,
.pof-view-mode .pof-altcode-toggle,
.pof-view-mode .pof-placeholder,
.pof-view-mode .file-field { display: none !important; }
.pof-view-mode #app input:disabled { width: auto; min-width: 0; max-width: 100%; }
.pof-view-text { font-weight: 600; white-space: normal; overflow-wrap: anywhere; }

/* Liste lungi: rândurile peste limită și butonul „Arată încă N". */
tr.tt-row-over { display: none !important; }
.tt-more-rows { margin: 6px 0 2px; }

/* ===== Planning: capete tăiate, rânduri goale ===== */
/* Marginea punctată spune că lucrarea continuă dincolo de cadru. */
.cal-bar-cut-left {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 3px dotted rgba(255, 255, 255, .85);
}
.cal-bar-cut-right {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-right: 3px dotted rgba(255, 255, 255, .85);
}
.cal-grid.cal-hide-empty .cal-row-empty { display: none; }
.cal-empty-toggle { margin: 6px 0 0; }

/* Valoare pe mai multe randuri intr-un camp editabil pe loc (supervizor:
   nume / telefon / email). `.inline-value` e flex pentru creionul de langa
   valoare, deci randurile trebuie sa stea intr-un bloc al lor. */
.inline-value { flex-wrap: wrap; }
.detail-lines { display: block; min-width: 0; max-width: 100%; }
.detail-lines a { overflow-wrap: anywhere; }

/* Cazări: tabelul e mai lat decât ecranul, iar coloana de acțiuni
   (Prelungește / Încheie / Editează) cădea complet în afara lui. Se lipește de
   marginea dreaptă, cum stă numele cazării lipit de cea stângă. */
.table-frozen-first td.cell-action,
.table-frozen-first thead th:last-child {
  position: sticky; right: 0; z-index: 2;
  background: var(--panel);
  box-shadow: -1px 0 0 var(--border);
}
.table-frozen-first tr:hover td.cell-action { background: var(--panel-2); }

/* Filtrele listei de facturi. */
.inv-filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.inv-filter-sep { width: 1px; align-self: stretch; min-height: 18px; background: var(--border); margin: 0 4px; }
.chip-btn {
  padding: 4px 10px; font-size: 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer;
}
.chip-btn:hover { color: var(--text); }
.chip-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Cartonașul de telefon, mai strâns: lista de proiecte avea 11.000px, adică
   douăzeci de ecrane, din care jumătate erau margini. */
@media (max-width: 720px) {
  .table-cards tr { padding: 10px 12px; gap: 6px 10px; margin-bottom: 8px; }
}

/* ===== „Status proiect" (project_quick.js): rândurile de suprapunere, mesajul de anulare ===== */
.pq-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.pq-left { display: flex; flex-direction: column; min-width: 140px; }
.pq-left b { font-size: 13px; }
.pq-date { font-size: 12px; color: var(--muted); }
.pq-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
/* Campul de data: inputul trebuie sa se stranga in cutia lui, altfel ramane la
   latimea lui naturala (205px) si trece peste butonul de calendar. */
.pq-btns .date-field-wrap { width: 150px; }
.pq-btns .date-field-wrap .date-text { width: 100%; min-width: 0; box-sizing: border-box; }
.pq-days { width: 64px; }
.pq-pct { font-size: 12px; color: var(--muted); margin-left: -2px; }
.pq-overlap-text { font-size: 12.5px; flex: 1 1 200px; min-width: 0; }
.pq-error { margin: 10px 0 0; }
.pq-undo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 7px 10px; border-radius: 8px;
  background: var(--panel-2); font-size: 12.5px;
}
/* Un link care arată ca un buton, în rândul de acțiuni al ferestrei. */
.button-like {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--accent); color: #fff; text-decoration: none;
}
.button-like:hover { filter: brightness(1.08); }
/* „Pune EQ / NET finale" (project_quick.js::pqFinalNumbersHtml) - în
   „Mersul lucrării" și pe fișa lucrării. Câmpurile cât un număr de 8 cifre. */
.pq-final { padding: 8px 0; border-top: 1px solid var(--border); }
.pfn-box { border-left: 3px solid var(--warning, #d97706); padding: 4px 0 4px 10px; }
.pfn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pfn-code { font-size: 12px; color: var(--muted); }
.pfn-chip {
  display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent);
}
.pfn-chip-warn { border-color: var(--warning, #d97706); color: var(--warning, #d97706); }
.pfn-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.pfn-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pfn-field input { width: auto; }
.pfn-result { margin: 6px 0 0; font-size: 12.5px; }
.pfn-offers { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.pfn-provisional { font-size: 12px; color: var(--muted); }
/* Titlu de secțiune cu un buton în dreapta (fișa proiectului). */
.sheet-title-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }

@media (max-width: 720px) {
  /* Pe telefon fiecare rând își ia lățimea lui: butoanele „azi"/„ieri" lângă
     o dată și un selector nu încap pe un rând de 390px. */
  .pq-btns { margin-left: 0; width: 100%; }
  .pq-btns .date-field-wrap { width: 100%; }
}

/* Ziua liberă de la stat în Planning: ca duminica, dar cu altă nuanță - una
   e „nu lucrăm duminica", alta e „statul a dat liber în ziua asta". */
.cal-holiday-col {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  background: rgba(242, 153, 74, .13);
  border-left: 1px dashed rgba(242, 153, 74, .5);
  pointer-events: none;
}

/* Membru înlocuit temporar: rămâne în listă, dar se vede că nu el lucrează
   acum. Nu se ascunde - echipa trebuie să-și vadă titularul. */
.tm-member-replaced { opacity: .72; }
.tm-replaced-note { font-size: 11.5px; color: var(--muted); }
.tm-member-replaced .tm-member-role { text-decoration: line-through; }

/* Linia de demontaj: de unde vine prețul (referința de montaj + procentul). */
.pof-dismantle {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; margin: 0 0 6px;
  border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-2);
}
.pof-dismantle-lab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pof-dismantle-note { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pof-na { font-size: 12px; color: var(--muted); font-style: italic; }

/* ===== Fișa de salariu, varianta „Extras" (payslip_page.js) =====
   Un singur tabel cu tot ce se plătește pe 15. Rolul se vede din culoare:
   Montator = --blue, Ajutor = --green (dungă în stânga + cap colorat ușor).
   --accent nu se folosește pentru rol: în temele verzi e chiar --green. */
.ps-role-m { --ps-role: var(--blue); }
.ps-role-a { --ps-role: var(--green); }

.ps-nav { display: flex; gap: 6px; align-items: center; }

.ps-head {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; justify-content: space-between;
  padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--border); background: var(--panel);
}
.ps-due-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 6px; }
.ps-due { font-family: var(--disp); font-size: 26px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.ps-due-est { font-size: 12px; color: var(--muted); }
.ps-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ps-state {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}
.ps-state-ok { color: var(--green); border-color: var(--green); }
.ps-state-closed { color: var(--panel); background: var(--muted); border-color: var(--muted); }

.ps-banner {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 8px 12px; margin: 0 0 10px; border: 1px solid var(--border); border-left: 4px solid var(--muted);
  background: var(--panel-2); font-size: 13px;
}
.ps-banner-ask { border-left-color: var(--red); }
.ps-banner .field { margin: 0; flex: 1 1 220px; min-width: 0; max-width: 100%; }
.ps-inline-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Rezumatul de sus pe fișa echipei: câte un rând colorat per om. */
.ps-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0 0 12px; }
.ps-person {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--ps-role); padding: 8px 10px;
  background: color-mix(in srgb, var(--ps-role) 10%, var(--panel));
}
.ps-person:hover { border-color: var(--ps-role); }
.ps-person-name { font-weight: 700; font-size: 14px; }
.ps-person-due { flex: 1 0 100%; font-family: var(--mono); font-weight: 700; font-size: 15px; }
.ps-role-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 1px 7px; border-radius: 99px; color: var(--ps-role); border: 1px solid var(--ps-role);
  background: color-mix(in srgb, var(--ps-role) 14%, transparent); white-space: nowrap;
}

/* Blocul unui om. */
.ps-member { border: 1px solid var(--border); border-left: 4px solid var(--ps-role); margin: 0 0 16px; background: var(--panel); }
.ps-member-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px;
  background: color-mix(in srgb, var(--ps-role) 12%, var(--panel)); border-bottom: 1px solid var(--border);
}
.ps-member-name { font-family: var(--disp); font-size: 18px; font-weight: 700; }
.ps-member-sub { margin-left: auto; font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.ps-none { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.ps-under { margin: 8px 12px; }
.ps-block-title {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px; font-size: 12px;
  color: var(--muted); margin: 12px 12px 6px;
}

/* Tabelul: fiecare rând poartă dunga rolului. */
table.ps-table { background: transparent; }
table.ps-table td { vertical-align: top; }
table.ps-table tr.ps-row > td:first-child { box-shadow: inset 4px 0 0 var(--ps-role); }
.ps-kind {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  border: 1px solid var(--border); white-space: nowrap; color: var(--text);
}
.ps-kind-neg { color: var(--red); border-color: var(--red); }
.ps-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.ps-err { color: var(--red); font-size: 12px; margin-top: 4px; font-weight: 600; }
.ps-amt { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.ps-neg { color: var(--red); }
.ps-muted { color: var(--muted); }
.ps-row-est td { color: var(--muted); }
.ps-pill-warn {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  border: 1px solid var(--red); color: var(--red); margin-left: 4px;
}
.ps-in-wrap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ps-pay {
  font-size: 12px; font-family: var(--sans); padding: 3px 6px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--ps-role, var(--border)); background: var(--panel); color: var(--text);
}
.ps-pay:disabled { cursor: default; opacity: .7; }
.ps-pay-fixed {
  display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  border: 1px dashed var(--border); color: var(--muted);
}
.ps-dots { font-size: 14px; line-height: 1; }
/* „Acum X% · rest Y% → ciclu” sub chipul Plată: se rupe pe două rânduri, nu lățește tabelul. */
.ps-split { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 12px; max-width: 190px; }
.ps-split input { width: calc(4ch + 26px); padding: 2px 4px; font-family: var(--mono); font-size: 12px; }
.ps-split-rest { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); }
/* Orele extra ale unei lucrări, imediat sub ea: indentate, aceeași dungă de rol. */
table.ps-table tr.ps-row-under > td.cell-title { padding-left: 22px; }
table.ps-table tr.ps-row-under .ps-kind { border-style: dashed; }
/* „Avans nereținut” sub totalul omului: De plată nu-l scade până nu alegi cât reții. */
.ps-adv-left { flex-basis: 100%; text-align: right; font-size: 12px; font-weight: 600; color: var(--amber, var(--red)); }
.ps-sub-link { color: inherit; text-decoration: underline dotted; }
.ps-breakdown { margin-top: 6px; }
.ps-subtotal {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 10px;
  padding: 8px 12px; border-top: 2px solid var(--border);
}
.ps-subtotal .mono { font-size: 15px; }

/* Avansurile omului: unul lângă altul. */
.ps-advs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 0 12px 10px; }
.ps-adv { border: 1px solid var(--border); padding: 8px 10px; background: var(--panel); }
.ps-adv-done { opacity: .7; }
.ps-adv-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.ps-adv-notes { font-size: 12px; color: var(--muted); margin: 2px 0 4px; white-space: pre-wrap; }
.ps-adv-nums { font-size: 12px; }
.ps-adv-deds { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ps-ded {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px;
  border: 1px solid var(--ps-role, var(--border)); border-radius: 6px;
}
.ps-ded-other { border-style: dashed; opacity: .85; }
.ps-ded-amount {
  width: calc(7ch + 30px); background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 3px 6px; font-family: var(--mono); font-size: 12px;
}
.ps-adv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ps-part { margin-top: 6px; align-items: flex-end; }
.ps-part .ps-inline-btns { padding-bottom: 6px; }

/* Ce s-a mutat pe alt ciclu, restrâns. */
.ps-moved, .ps-howpay { margin: 4px 0 14px; border: 1px solid var(--border); background: var(--panel); }
.ps-moved > summary, .ps-howpay > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; }
.ps-moved > summary { color: var(--muted); }
.ps-howpay-title { font-family: var(--disp); text-transform: uppercase; letter-spacing: .4px; }
.ps-howpay[open] > summary { border-bottom: 1px solid var(--border); }
.ps-moved-list { padding: 4px 12px 10px; }
.ps-moved-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; font-size: 13px; }
.ps-fieldset { border: 0; margin: 0; padding: 8px 12px 12px; min-width: 0; }

/* „+ Adaugă". */
.ps-add { border: 1px solid var(--border); border-top: 3px solid var(--accent); background: var(--panel); padding: 10px 12px; margin: 0 0 12px; }
.ps-add-for { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.ps-add-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ps-for {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--ps-role); border-left-width: 4px; background: color-mix(in srgb, var(--ps-role) 10%, var(--panel));
}
.ps-add-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ps-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ps-opts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; }
.ps-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.ps-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 10px 0 0; }
.ps-amount {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--border); border-left: 4px solid var(--ps-role);
  background: color-mix(in srgb, var(--ps-role) 8%, var(--panel));
}
.ps-amount-name { flex: 1; min-width: 0; font-size: 13px; }
.ps-amount input {
  width: calc(8ch + 34px); background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 5px 7px; font-family: var(--mono); font-size: 13px;
}
.ps-pick-list { max-height: 340px; overflow: auto; border: 1px solid var(--border); }
.ps-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ps-pick:last-child { border-bottom: 0; }
.ps-pick-main { flex: 1 1 220px; min-width: 0; }

@media (max-width: 720px) {
  .ps-due { font-size: 22px; }
  .ps-head-actions { width: 100%; }
  .ps-member-sub { margin-left: 0; }
  .ps-member-head { padding: 8px 10px; }
  /* Cartonașele poartă dunga rolului pe toată înălțimea. */
  .table-cards.ps-table tr.ps-row { border-left: 4px solid var(--ps-role); }
  .table-cards.ps-table tr.ps-row > td:first-child { box-shadow: none; }
  .table-cards.ps-table td.ps-na { display: none; }
  /* „⋯” singur pe rând nu are de ce să ia toată lățimea cartonașului. */
  .table-cards.ps-table td.cell-action > .ps-dots { flex: 0 0 auto; min-width: 56px; margin-left: auto; }
  /* Pe cartonaș meniul nu plutește: acțiunile lui se pun pe rândul „⋯”. */
  .table-cards.ps-table td.cell-action > .ps-menu {
    position: static; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 6px;
    min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; order: -1;
  }
  .table-cards.ps-table td.cell-action > .ps-menu button {
    flex: 1 1 auto; min-height: 40px; border: 1px solid var(--border); text-align: center;
  }
  .ps-advs { grid-template-columns: 1fr; margin: 0 8px 10px; }
  /* Bara bifelor stă jos, la îndemâna degetului. */
  .sel-bar.ps-selbar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  }
  .ps-ded-amount { font-size: 16px; }
  .ps-split input { font-size: 16px; }
  .table-cards.ps-table tr.ps-row-under > td.cell-title { padding-left: 0; }
  .ps-amount input { font-size: 16px; }
}

/* ---------- Opțiunile lucrării pe fișă și suplimentele ca linii (13.10.2026) ---------- */
/* Bifa „în salariu” pe opțiunea din detaliere; debifată = tăiată, 0. */
.ps-opt-inc { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.payslip-breakdown .ps-opt-off .pof-subline-label .ps-opt-name,
.payslip-breakdown .ps-opt-off .pof-subline-amount { text-decoration: line-through; color: var(--muted); }
/* Orele extra în rândul lucrării: cutie proprie, cu fundal și bară în stânga. */
.ps-ore-box {
  margin: 8px 0 4px; padding: 6px 10px 6px 12px; border-left: 3px solid var(--ps-role, var(--blue));
  background: var(--panel-2); border-radius: 0 6px 6px 0;
}
.ps-ore-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-role, var(--blue)); margin-bottom: 2px; }
.ps-ore-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 0;
  font-size: 12.5px; border-top: 1px dashed var(--border);
}
.ps-ore-line:first-of-type { border-top: 0; }
.ps-ore-what { flex: 1 1 150px; min-width: 0; }
.ps-ore-pay { margin-left: auto; }
.ps-ore-amt { min-width: 84px; text-align: right; font-weight: 600; }
.ps-ore-line.is-off .ps-ore-what > span, .ps-ore-line.is-off .ps-ore-amt { text-decoration: line-through; color: var(--muted); }
.ps-ore-total { text-align: right; font-size: 12px; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--border); }
.ps-ore-total b { color: var(--text); }
/* Fișa de echipă: „Lucrările echipei" - o lucrare = un rând pentru toți. */
.ps-team-works { --ps-role: var(--blue); }
.ps-team-works > .ps-member-head { background: var(--panel-2); }
.ps-team-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; }
.ps-team-line + .ps-team-line { border-top: 1px dashed var(--border); }
.ps-team-who {
  font-size: 11px; font-weight: 700; color: var(--ps-role); min-width: 18px;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.ps-team-ore-people { display: flex; flex-wrap: wrap; gap: 2px 10px; flex: 1 1 200px; }
.ps-team-ore-who { white-space: nowrap; border-left: 2px solid var(--ps-role); padding-left: 6px; }
.ps-team-only { padding: 6px 12px; }
.ps-team-works .ps-ore-what { flex: 0 1 150px; }
.ps-team-works .ps-ore-pay { margin-left: auto; }
.ps-team-hint { font-size: 12px; color: var(--muted); font-weight: 400; }
/* Fișa de salariu deschisă sub rând în ecranul Salarii (iframe ?embed=1). */
.sal-embed-wrap { margin: 4px 0 10px; border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 6px; overflow: hidden; background: var(--bg); }
.sal-embed { display: block; width: 100%; height: 480px; border: 0; background: var(--bg); }
.sal-embed-foot { display: flex; justify-content: flex-end; padding: 4px 8px; border-top: 1px solid var(--border); background: var(--panel-2); }
.ps-embed .hero { display: none; }
.ps-embed #app { padding-top: 8px; padding-bottom: 8px; }
/* Butonul vizibil „▸ Opțiuni (N)" de pe fiecare lift. */
.ps-opt-toggle.is-open { border-color: var(--blue); color: var(--blue); }
/* Unde se plătește opțiunea: cu lucrarea / separat pe un ciclu / deloc. */
.ps-opt-pay { font-size: 11.5px; padding: 1px 4px; max-width: 170px; margin-left: 6px; }
.payslip-breakdown .ps-opt-sep .pof-subline-amount { color: var(--muted); }
/* Plătitorul opțiunii: în preț / client / firmă. */
.ps-payer {
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; padding: 0 7px;
  border-radius: 99px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; vertical-align: middle;
}
.ps-payer-client { color: var(--amber, var(--red)); border-color: currentColor; }
.ps-payer-company { color: var(--blue); border-color: currentColor; }
.ps-mini { font-size: 11.5px; padding: 2px 8px; }
.ps-mini-row { margin-top: 4px; }
.ps-opt-add { margin-top: 4px; }
.ps-opt-form, .ps-supp-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; padding: 6px 8px;
  border: 1px dashed var(--ps-role, var(--border)); background: var(--panel); font-size: 12.5px;
}
.ps-opt-payer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ps-opt-payer label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ps-opt-actions { display: inline-flex; gap: 6px; }
.ps-opt-form .ps-err, .ps-supp-form .ps-err { flex-basis: 100%; }
.ps-supp-form .ps-add-for { margin: 0; }
/* Linia scrisă de mână: bifa „se plătește” lângă descriere; debifată = tăiată. */
.ps-inc-wrap { display: inline-flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.ps-inc { margin-top: 2px; }
tr.ps-row-off .ps-line-label, tr.ps-row-off .ps-amt, tr.ps-row-off td[data-label="Sumă"] input {
  text-decoration: line-through; color: var(--muted);
}
tr.ps-form-row > td { padding-top: 0; }

/* Marcajul special al lucrării: oferta suplimentară de făcut / PO de cerut. */
.supp-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; white-space: nowrap;
  color: var(--amber, var(--red)); border: 1px solid currentColor;
  background: color-mix(in srgb, var(--amber, var(--red)) 12%, transparent); vertical-align: middle;
}
.supp-chip-po { border-style: dashed; background: transparent; }
/* Fișa lucrării: opțiunile cu în salariu + plătitor, unul lângă altul. */
.pd-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.pd-opt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px;
  border: 1px solid var(--border); background: var(--panel); font-size: 13px;
}
.pd-opt-name { flex: 1 1 100%; font-weight: 600; }
.pd-opt-off .pd-opt-name { text-decoration: line-through; color: var(--muted); }
.detail-item .pd-opt label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px;
  text-transform: none; letter-spacing: normal; color: var(--text); margin: 0; }
.pd-opt select { font-size: 12px; padding: 2px 4px; }
.pd-ew-state { font-size: 11px; }
/* Formularul de proiect: plătitorul și „în salariu” pe chipul opțiunii. */
.option-chip-payer { font-size: 11px; padding: 0 2px; margin-left: 4px; max-width: 92px; }
.option-chip label.option-chip-sal, .field .option-chip label.option-chip-sal { display: inline-flex; flex-direction: row; align-items: center; gap: 3px; font-size: 11px;
  margin: 0 0 0 4px; cursor: pointer; text-transform: none; letter-spacing: normal; color: inherit; }
@media (max-width: 720px) {
  .ps-opt-form select, .ps-opt-form input, .ps-supp-form input, .pd-opt select { font-size: 16px; }
  .pd-opts { grid-template-columns: 1fr; }
  /* Lucrările suplimentare: butoanele pe un rând sub text, nu unul sub altul lângă el. */
  #extraWorksWrap .subcard-row { flex-wrap: wrap; gap: 6px; }
  #extraWorksWrap .subcard-row > .doc-row-actions { flex: 1 1 100%; }
}

/* ---------- Rezumatul de sus al lucrării (project_summary.js, 13.10.2026) ----------
   Fișa proiectului și „Mersul lucrării" din Planning: EQ / NET mari, apoi
   trei grupe despărțite prin culoare - Liftul (albastru), Echipa și datele
   (verde), Banii (neutru) - și butoanele spre plan, ofertă și fișa de salariu. */
.psum {
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.psum-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.psum-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 99px; border: 1px solid var(--blue); color: var(--blue);
}
.psum-num { display: inline-flex; align-items: baseline; gap: 6px; }
.psum-num-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.psum-num-value { font-size: 20px; font-weight: 700; color: var(--text); }
.psum-copy { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; }
.psum-copy:hover { color: var(--blue); }
.psum-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.psum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.psum-group { padding: 6px 10px; border-left: 3px solid var(--border); background: var(--panel-2); border-radius: 0 6px 6px 0; min-width: 0; }
.psum-lift { border-left-color: var(--blue); }
.psum-team { border-left-color: var(--green); }
.psum-money { border-left-color: var(--text); }
.psum-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.psum-lift .psum-group-title { color: var(--blue); }
.psum-team .psum-group-title { color: var(--green); }
.psum-stations { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.psum-stations b { font-size: 30px; line-height: 1; color: var(--blue); }
.psum-stations span { font-size: 13px; color: var(--muted); }
.psum-cell { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; font-size: 13px; min-width: 0; }
.psum-label { flex: 0 0 82px; font-size: 11.5px; color: var(--muted); }
.psum-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.psum-strong .psum-value { font-size: 15px; }
.psum-sub { font-size: 11.5px; color: var(--muted); }
.psum-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.psum-chip { font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); }
.psum-chip.is-off { text-decoration: line-through; color: var(--muted); }
@media (max-width: 640px) {
  .psum-actions { margin-left: 0; width: 100%; }
  .psum-num-value { font-size: 17px; }
}

/* ---------- Echipe: membri cu perioadă, „Mută / înlocuiește" (14.10.2026) ---------- */
.tm-period { font-size: 11px; color: var(--blue); margin-left: 4px; white-space: nowrap; }
.tm-sched-line { color: var(--muted); }
.tm-missing { font-size: 11px; font-weight: 600; color: var(--red); margin-right: 6px; }
.tm-sched { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--blue); background: var(--panel-2); border-radius: 0 6px 6px 0; }
.tm-sched-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); margin-bottom: 2px; }
.tm-sched-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; }
.tm-past { margin-top: 8px; font-size: 13px; color: var(--muted); }
.tm-past summary { cursor: pointer; }
.tmv-actions { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.tmv-radio, .tmv-inline { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; flex-wrap: wrap; }
.field label.tmv-inline { display: flex; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.field label.tmv-inline input { width: auto; margin: 0; }

/* „Scoate proiectul" / proiect scos din lucru (project_summary.js, 14.10.2026). */
.psum-cancel-btn { color: var(--red); border-color: var(--red); }
.psum-cancelled {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  margin: -2px 0 10px; padding: 6px 10px; border-left: 3px solid var(--red); background: var(--panel-2); border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.psum-cancelled b { color: var(--red); }

/* „De făcut acum": acțiunile de rezolvare pe rând (now.js, 14.10.2026). */
.now-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
@media (max-width: 640px) { .now-actions { margin-left: auto; } }

/* Facturare parțială a unui PO (finance_billing.js, 14.10.2026). */
tr.po-partial td:first-child { border-left: 3px solid #e8a33d; }
.po-badge-partial { background: #e8a33d22; color: #a8650c; border: 1px solid #e8a33d; }
.inv-pct-all { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.inv-line { flex-wrap: wrap; }
.inv-line-pct { flex: 0 0 auto; }
.inv-line-of { display: block; font-size: 11px; color: var(--muted); text-align: right; }
.inv-line-done { font-size: 11.5px; color: #a8650c; }

/* Salarii: lista „De făcut" (finance_salarii.js, 14.10.2026). */
.sal-todo-head { font-family: var(--disp); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 8px; }
.sal-todo-now { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--blue); border-radius: 99px; padding: 1px 8px; vertical-align: middle; }
.sal-todo-past { margin-top: 18px; color: #a8650c; }

/* Planning: „De reluat — oprite / finalizate parțial" (calendar.js, 17.10.2026).
   Stă sub grafic (după rândul „Planificat — fără echipă"), deci spațiu deasupra. */
.cal-resume { margin: 14px 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid #e8a33d; background: var(--panel); border-radius: 0 6px 6px 0; }
.cal-resume-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13px; }
/* Primul rând de sub titlu, fără linia de despărțire (titlul e tot un div,
   deci :first-of-type nu prindea niciun rând). */
.cal-resume .section-title + .cal-resume-row { border-top: 0; }
.cal-resume-state { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #a8650c; min-width: 120px; }
.cal-resume-state.is-hold { color: var(--red); }
.cal-resume-name { font-weight: 600; }
.cal-resume-meta { flex: 1 1 260px; color: var(--muted); font-size: 12px; }
/* „Reia / reatribuie" + „Închide definitiv": împreună, trec pe rândul următor pe telefon. */
.cal-resume-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Lucrare închisă definitiv (project_summary.js): același banner ca „Scos din lucru", neutru. */
.psum-settled { border-left-color: var(--muted); }
.psum-settled b { color: var(--text); }

/* Opțiunile proiectului, una sub alta (api.js::renderExtraOptionsChecklistHtml, 17.10.2026). */
.opt-tbl-wrap { overflow-x: auto; margin-bottom: 6px; }
.opt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.opt-tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.opt-tbl td { padding: 4px 6px; border-bottom: 1px dashed var(--border); vertical-align: middle; }
.opt-tbl-name { font-weight: 600; min-width: 140px; }
.opt-tbl .opt-tbl-in { width: 90px; }
.opt-tbl .num-3.opt-tbl-in { width: 56px; }
.opt-tbl .opt-tbl-in::placeholder { color: var(--muted); opacity: .8; }
.opt-tbl tr.opt-off .opt-tbl-name { text-decoration: line-through; color: var(--muted); }
@media (max-width: 720px) {
  .opt-tbl thead { display: none; }
  .opt-tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .opt-tbl td { border: 0; padding: 2px 0; }
  .opt-tbl td.opt-tbl-name { grid-column: 1 / -1; }
  .opt-tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
  .opt-tbl td.opt-tbl-name::before { display: none; }
}

/* Coduri lungi (mai multe numere legate cu „;") nu ies din ecran pe telefon. */
.psum-num { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.psum-num-value, .pfn-code { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* Setări > Reguli de salarizare (17.10.2026): nivel + cine + data, apoi un
   rând pe regulă (nume · valoare · de unde vine), pe telefon unul sub altul. */
.sr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sr-seg button { border: 0; border-radius: 0; background: transparent; color: var(--text); padding: 7px 14px; min-height: 36px; }
.sr-seg button.on { background: var(--accent); color: var(--accent-text); }
.sr-bar select { min-width: 200px; }
.sr-from { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.sr-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(160px, 1fr) minmax(120px, 200px);
  gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sr-name { font-weight: 600; }
.sr-val { display: flex; gap: 6px; align-items: center; }
.sr-val input { width: 120px; }
.sr-val input::placeholder { color: var(--muted); }
.sr-unit { color: var(--muted); font-size: 13px; }
.sr-src { color: var(--muted); font-size: 13px; }
.sr-src.own { color: var(--accent); font-weight: 600; }
.sr-hist { grid-column: 2 / 4; color: var(--muted); font-size: 12.5px; }
.sr-h { margin: 18px 0 6px; font-size: 15px; }
.sr-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.sr-tpl label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
@media (max-width: 700px) {
  .sr-row { grid-template-columns: 1fr; }
  .sr-hist { grid-column: 1; }
  .sr-bar select { min-width: 0; flex: 1; }
}

/* ===================== Scheletul comun (etapa B, 17.10.2026) =====================
   Piesele din js/ui_kit.js: antetul ecranului, filtrele, banda de selecție,
   fereastra standard, „Anulează", bara de jos și „+" pe telefon. Doar
   variabilele temei - fiecare temă le colorează la fel. */
.state-off { opacity: .65; text-decoration: line-through; }

.ui-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ui-title { margin: 0; font-family: var(--disp); font-size: 22px; letter-spacing: .02em; }
.ui-count { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ui-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ui-btn { min-height: 38px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  color: var(--text); font: 600 14px var(--sans); cursor: pointer; }
.ui-btn:hover { border-color: var(--accent); }
.ui-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.ui-btn-primary:hover { filter: brightness(1.08); }
.ui-btn-danger { color: var(--red); border-color: var(--red); }
.ui-btn-ghost { min-width: 38px; padding: 7px 10px; }
.ui-menu-wrap { position: relative; }
.ui-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 200px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.ui-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
  padding: 10px 12px; border-radius: 6px; font: 14px var(--sans); cursor: pointer; }
.ui-menu button:hover { background: var(--panel-2); }
.ui-menu button.danger { color: var(--red); }

.ui-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.ui-chip { min-height: 34px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--panel);
  color: var(--text); font: 13px var(--sans); cursor: pointer; }
.ui-chip.on { border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.ui-chip-n { color: var(--muted); margin-left: 2px; }
.ui-chip.on .ui-chip-n { color: inherit; }

.ui-selbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); }
.ui-selbar-n { font-weight: 700; color: var(--accent); margin-right: 6px; }

.ui-modal-back { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .45); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.ui-modal { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel);
  color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.ui-modal.wide { width: min(860px, 100%); }
.ui-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); font-size: 16px; }
.ui-x { border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; min-width: 36px; min-height: 36px; }
.ui-modal-body { padding: 14px 16px; }
.ui-modal-body:empty { display: none; }
.ui-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

.ui-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1300; display: flex; gap: 14px;
  align-items: center; padding: 10px 12px 10px 16px; border-radius: 8px; background: var(--text); color: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
.ui-undo button { border: 0; background: transparent; color: var(--bg); font: 700 14px var(--sans); text-decoration: underline;
  cursor: pointer; min-height: 36px; }

/* Telefon: bara de jos cu modulele (V07) și „+" rotund. Pe PC nu există. */
.ui-bottom-nav, .ui-fab { display: none; }
.ui-sheet-back { position: fixed; inset: 0; z-index: 1250; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; }
.ui-sheet { width: 100%; max-height: 75vh; overflow: auto; background: var(--panel); color: var(--text);
  border-radius: 14px 14px 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); }
.ui-sheet-title { padding: 10px 12px 6px; font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.ui-sheet-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 600 16px var(--sans); text-align: left; cursor: pointer; }
.ui-sheet-item:hover, .ui-sheet-item:active { background: var(--panel-2); }
.ui-nav-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: var(--accent-text);
  font: 700 11px/18px var(--sans); font-style: normal; text-align: center; }
.ui-sheet-item .ui-nav-badge { margin-left: auto; }
@media (max-width: 720px) {
  .tabs-bar { display: none !important; }
  .quick-add-wrap { display: none !important; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ui-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: var(--panel);
    border-top: 1px solid var(--border); padding: 0 4px env(safe-area-inset-bottom); }
  .ui-nav-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 62px; border: 0; background: transparent; color: var(--muted); font: 600 11px var(--sans); cursor: pointer; }
  .ui-nav-item.on { color: var(--accent); }
  .ui-nav-item.on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .ui-nav-item .ui-nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); }
  .ui-nav-badge.ui-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
  .ui-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1101; width: 56px; height: 56px; border: 0; border-radius: 50%;
    background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer; }
  .ui-undo { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ui-modal-back { align-items: flex-end; padding: 0; }
  .ui-modal { width: 100%; max-height: 90vh; border-radius: 14px 14px 0 0; }
  .ui-modal-foot .ui-btn { flex: 1; min-height: 46px; }
}
.ui-pop { position: absolute; right: auto; top: auto; z-index: 1150; }
#projectsChips .ui-chips { margin: 0; }
/* Rândul cu un singur „⋯" (scheletul comun): pe cartonaș stă în colț, lângă bifă, nu ca bară întreagă. */
@media (max-width: 720px) {
  .table-cards td.cell-action:has(> [data-act$="row-menu"]:only-child) { position: absolute; top: 6px; right: 46px; display: block; padding: 0; }
  .table-cards td.cell-action > [data-act$="row-menu"]:only-child { flex: none; width: 40px; min-height: 36px; padding: 4px; }
}

/* Antetul fiecărui modul arată la fel (scheletul comun, 17.10.2026): titlul
   ca .ui-title, butonul principal ca .ui-btn-primary („+ Ofertă nouă" pe un
   rând), butoanele secundare ca .ui-btn. Se aplică ANTETELOR (.toolbar), nu
   barelor de unelte din interiorul ecranelor, unde B01 (iconiță + etichetă)
   rămâne. Un singur loc, ca toate modulele să se schimbe împreună. */
.toolbar { margin: 4px 0 10px; }
.toolbar h2 { font-size: 22px; text-transform: none; letter-spacing: .02em; }
.toolbar .btn-ico {
  flex-direction: row; gap: 6px; min-height: 38px; padding: 7px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.toolbar .btn-ico .ico { font-size: 15px; }
@media (max-width: 720px) {
  .toolbar .btn-ico {
    min-height: 40px; padding: 7px 12px; font-size: 14px;
  }
}
.now-health-0 .now-tag { color: var(--red); }
.now-health-1 .now-tag { color: var(--st-warn); }
.todo-digest { padding: 10px 12px; margin: 0 0 12px; border-left: 3px solid var(--accent); background: var(--panel-2); line-height: 1.6; }

/* Ecranul „Teren" (/teren): telefonul șefului de echipă - cartonașe mari,
   butoane de un deget, fără tabele. */
.field-page #app { max-width: 640px; margin: 0 auto; padding: 12px 12px 90px; }
.field-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.field-head h1 { margin: 0; font-family: var(--disp); font-size: 26px; }
.field-kicker { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.field-head select { min-height: 44px; font-size: 16px; }
.field-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 14px; margin: 12px 0; }
.field-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.field-name { font-size: 18px; }
.field-line { display: block; color: var(--muted); font-size: 14px; margin: 3px 0; text-decoration: none; }
a.field-line { color: var(--accent); }
.field-progress { height: 10px; border-radius: 99px; background: var(--panel-2); margin: 12px 0 4px; overflow: hidden; }
.field-progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.field-progress-label { font-size: 13px; color: var(--muted); }
.field-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.field-actions .ui-btn { min-height: 52px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.field-photo-btn { cursor: pointer; }
.field-photo-btn input { display: none !important; }

/* Acțiunile strânse sub „⋯" (ui_kit.js::uiCollapseRowActions). */
.ui-hidden-act { display: none !important; }
td.cell-action[data-ui-menu], td[data-label="Acțiuni"][data-ui-menu] { white-space: nowrap; text-align: right; }
@media (max-width: 720px) {
  .table-cards td.cell-action[data-ui-menu], .table-cards td[data-label="Acțiuni"][data-ui-menu] {
    position: absolute; top: 6px; right: 46px; display: block; padding: 0; }
  .table-cards td[data-ui-menu] > [data-ui-row-auto] { flex: none; width: 40px; min-height: 36px; padding: 4px; }
}
/* Filtrele-pilulă din toate modulele arată ca etichetele scheletului (.ui-chip). */
.country-filter-btn { min-height: 34px; padding: 5px 12px; border-radius: 99px; background: var(--panel); font-size: 13px; }
.country-filter-btn.active { background: var(--panel); color: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }

/* Fluxul lucrărilor (Proiecte › ⋯ › Fluxul lucrărilor). */
.flow-table td, .flow-table th { text-align: center; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.flow-table td:first-child, .flow-table th:first-child, .flow-table td:last-child { text-align: left; }
.flow-ok { color: var(--green); font-weight: 700; }
.flow-gap { color: var(--red); font-weight: 700; cursor: help; }
.flow-wait { color: var(--muted); }

/* Vizualizatorul cu mărire (api.js::docRender): paginile una sub alta, derulare
   în ambele direcții, butoane mari pentru deget. */
.docviewer-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px;
  border-bottom: 1px solid var(--border); background: var(--panel); flex: 0 0 auto; }
.docviewer-zoom button { min-width: 44px; min-height: 38px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font: 600 16px var(--sans); cursor: pointer; }
.docviewer-zoom span { min-width: 52px; text-align: center; color: var(--muted); font-size: 13px; }
.docviewer-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px; background: var(--panel-2);
  touch-action: pan-x pan-y; }
.docviewer-page { display: block; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); max-width: none; }
.docviewer-loading { padding: 30px; text-align: center; color: var(--muted); }

/* Rândul „De finalizat" din Planning (calendar.js): eticheta se deosebește de echipe. */
.cal-resume-label { color: var(--st-warn); font-weight: 700; }
/* Bara „rămas" de pe rândul „De finalizat" (calRemainingBars): e doar ce mai
   e de făcut, deci hașurată în culoarea statusului (--cal-c), niciodată plină. */
.cal-bar.cal-bar-remaining {
  background-color: var(--panel);
  border: 1px dashed var(--cal-c);
  color: var(--text);
  box-shadow: none;
}
.cal-bar-remaining::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(135deg, var(--cal-c) 0 2px, transparent 2px 7px);
}
.cal-bar-remaining .cal-bar-text, .cal-bar-remaining .cal-bar-rep {
  text-shadow: 0 0 2px var(--panel), 0 0 3px var(--panel), 0 0 4px var(--panel);
}
.cal-bar.cal-bar-remaining.cal-bar-cut-left { border-left: 3px dotted var(--cal-c); }
.cal-bar.cal-bar-remaining.cal-bar-cut-right { border-right: 3px dotted var(--cal-c); }

.docviewer-title .docviewer-id { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Echipe > Tablă (teams_board.js, 27.10.2026): Liberi în stânga, cardurile
   echipelor în dreapta; pe telefon Liberi e o bară lipită sus, care se strânge. */
.echipe-tabla-wrap { display: none; }
.echipe-columns[data-view="tabla"] { grid-template-columns: minmax(0, 1fr); }
.echipe-columns[data-view="tabla"] .echipe-col-workers,
.echipe-columns[data-view="tabla"] .echipe-col-leaves,
.echipe-columns[data-view="tabla"] #teamsTableWrap { display: none; }
.echipe-columns[data-view="tabla"] .echipe-tabla-wrap { display: block; }
.tbl-board { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
.tbl-board-free { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.tbl-board-free-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.tbl-board-free-toggle { border: 0; background: transparent; color: var(--text); font: 700 14px var(--sans); padding: 4px 2px;
  cursor: pointer; white-space: nowrap; }
.tbl-board-chips { display: flex; gap: 4px; }
.tbl-board-chips .ui-chip { min-height: 28px; padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.tbl-board-free-closed .tbl-board-free-list, .tbl-board-free-closed .tbl-board-chips { display: none; }
.tbl-board-free-closed .tbl-board-free-head { margin-bottom: 0; }
.tbl-board-free-list { display: flex; flex-direction: column; gap: 4px; }
.tbl-board-free-item { display: flex; flex-direction: column; gap: 2px; }
.tbl-board-none { color: var(--muted); font-size: 12px; }
.tbl-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-items: start; }
.tbl-board-card { display: flex; flex-direction: column; gap: 5px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; }
.tbl-board-card-hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tbl-board-card-off { opacity: .75; }
.tbl-board-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.tbl-board-slot { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; align-items: start; padding: 3px 4px;
  border: 1px dashed transparent; border-radius: 6px; background: var(--panel-2); }
.tbl-board-slot-role { font-size: 11px; color: var(--muted); padding-top: 8px; overflow: hidden; text-overflow: ellipsis; }
.tbl-board-slot-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbl-board-slot-empty { border-color: var(--border); background: transparent; }
.tbl-board-empty { color: var(--muted); font-size: 13px; padding: 7px 4px; }
.tbl-board-person { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--text); font-size: 13px; cursor: grab; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.tbl-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-board-fixed { cursor: default; }
.tbl-board-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tbl-board-dragging { opacity: .45; }
.tbl-board-picking .tbl-board-slot { border-color: var(--accent); cursor: pointer; }
.tbl-board-picking .tbl-board-free { cursor: pointer; }
.tbl-board-over { border-style: solid; border-color: var(--accent); }
.tbl-board-free.tbl-board-over { box-shadow: inset 0 0 0 2px var(--accent); }
.tbl-board-note { display: flex; align-items: center; gap: 2px; font-size: 11.5px; line-height: 1.3; color: var(--muted); padding-left: 2px; }
.tbl-board-note b { color: var(--text); font-weight: 600; }
.tbl-board-x { flex: none; min-width: 24px; min-height: 22px; padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1; cursor: pointer; }
.tbl-board-x:hover { color: var(--red); }
.tbl-board-dlg { display: flex; flex-direction: column; gap: 10px; }
.tbl-board-dlg .form-row { margin: 0; }
.tbl-board-dlg-occ { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
.ui-modal-foot .tbl-board-ok { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.25; padding-top: 5px; padding-bottom: 5px; text-align: center; white-space: normal; }
.tbl-board-ok-when { font-weight: 400; font-size: 12px; opacity: .9; }
.ui-modal-foot:has(.tbl-board-ok) { align-items: stretch; }
@media (max-width: 720px) {
  .tbl-board { display: block; }
  .tbl-board-free { top: 0; z-index: 20; max-height: none; margin: 0 0 10px; overflow: visible; }
  .tbl-board-free-list { flex-direction: row; flex-wrap: wrap; max-height: 26vh; overflow: auto; }
  .tbl-board-free-item { max-width: 100%; }
  .tbl-board-cards { grid-template-columns: minmax(0, 1fr); }
  .tbl-board-person { min-height: 38px; }
  .tbl-board-x { min-width: 36px; min-height: 32px; }
  .ui-modal-foot:has(.tbl-board-ok) { flex-direction: column-reverse; }
}

/* ---------- Harta echipelor (team_map.js, 27.10.2026) ----------
   Pe tot ecranul, sub toast (10100) și peste bara de jos a telefonului. */
.team-map-btn { font-size: 17px; padding: 0 9px; }
.team-map-btn[hidden] { display: none !important; }
.team-map-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000; background: var(--panel);
  flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.team-map-overlay.active { display: flex; }
.team-map-head {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.team-map-state { font-size: 12px; color: var(--muted); flex: 1 1 auto; min-width: 0;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-map-close { margin-left: auto; }
.team-map-canvas { flex: 1 1 auto; min-height: 0; }
.team-map-missing {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px;
  border-top: 1px solid var(--border); font-size: 12px; max-height: 22vh; overflow: auto;
}
.team-map-missing[hidden] { display: none; }
.team-map-miss {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); text-decoration: none; white-space: nowrap;
}
.team-map-miss:hover { border-color: var(--accent); }
.team-map-miss .footnote { margin: 0; font-size: 11px; }
/* Eticheta pe hartă = numele echipei; vârful stă pe punct. */
.team-map-icon { width: 0; height: 0; }
.team-map-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px));
  display: flex; flex-direction: column; align-items: center; padding: 2px 6px; border-radius: 6px;
  background: #1d4ed8; color: #fff; font: 600 11px/1.3 var(--sans); white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.team-map-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0; border-top-color: #1d4ed8;
}
.team-map-popup { font-size: 12px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.team-map-pop-row { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid #ddd; }
.team-map-pop-row .footnote { margin: 0; }
.team-map-popup .small-link-btn { align-self: flex-start; margin-top: 3px; }
@media (max-width: 720px) {
  /* Antet telefon: imediat după clopoțel (app.js::ORDINE_CONTROALE). */
  .team-map-btn { order: 2; height: 34px; font-size: 16px; padding: 0 8px; }
}
/* Calculator: în bara de module, cât „+ Adaugă rapid" de înalt. */
.tabs-right .team-map-btn { height: 31px; font-size: 15px; padding: 0 8px; }

/* ===== „Status proiect" (project_quick.js, 28.10.2026) =====
   Fereastra are secțiuni proprii (.pq-sec), ca bara de jos să fie lipită de
   margini; pașii sunt o linie verticală cu buline (gata / acum / urmează). */
.modal.pq-modal { max-width: 760px; padding: 0; transition: max-width .2s; }
.modal.pq-modal.pq-big { max-width: 1040px; }
.pq-sec { padding: 14px 20px; }
.pq-top { display: flex; align-items: center; gap: 8px; padding-bottom: 0; }
.modal .pq-kick { margin: 0; font-size: 12px; letter-spacing: 1px; color: var(--muted); border: 0; padding: 0; }
.pq-top .pq-kick { flex: 1 1 auto; }
button.pq-x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; }
button.pq-x:hover { color: var(--text); }
.pq-id { padding-top: 2px; }
.pq-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pq-name {
  font-family: var(--disp); font-size: 24px; line-height: 1.15; font-weight: 600;
  text-transform: uppercase; margin: 0; cursor: pointer; min-width: 0; overflow-wrap: anywhere;
}
.pq-name:hover { color: var(--blue); }
.pq-open { color: var(--muted); text-decoration: none; font-size: 18px; flex: none; }
.pq-open:hover { color: var(--blue); }
.pq-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.pq-nums .psum-num { background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 3px 10px; }
.pq-nums .psum-num-value { font-size: 17px; }
.pq-nums .pq-num-miss { background: color-mix(in srgb, var(--st-warn) 14%, transparent); border-color: transparent; }
.pq-num-miss[role="button"] { cursor: pointer; }
.pq-num-miss-v { color: var(--st-warn); font-size: 13px; font-weight: 600; }
.pq-docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:is(.pq-modal, .pd-sheet) button.small.primary { border: 1px solid var(--accent); }

/* Pașii */
.pq-steps { border-top: 1px solid var(--border); padding-top: 16px; padding-bottom: 4px; }
.pq-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.pq-step::before { content: ''; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.pq-step:last-child::before { display: none; }
.pq-step.is-done::before { background: var(--st-ok); }
.pq-dot {
  width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--border);
  background: var(--panel); display: grid; place-items: center; font-size: 12px; color: var(--muted);
  position: relative; z-index: 1;
}
.pq-step.is-done .pq-dot { background: var(--st-ok); border-color: var(--st-ok); color: #fff; }
.pq-step.is-on .pq-dot { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 25%, transparent); }
.pq-step.is-on.is-pz .pq-dot { background: var(--st-warn); border-color: var(--st-warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-warn) 25%, transparent); }
.pq-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; padding-top: 3px; min-width: 0; }
.pq-step-head b { font-family: var(--disp); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.pq-step.is-next .pq-step-head b { color: var(--muted); }
.pq-now { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: var(--blue); background: color-mix(in srgb, var(--blue) 15%, transparent); white-space: nowrap; }
.pq-now.is-pz { color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 15%, transparent); }
.pq-now.is-ok { color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 15%, transparent); }
.pq-step-sum { font-size: 12.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; flex: 1 1 160px; }
.pq-tw { margin-left: auto; color: var(--muted); font-size: 12px; }
.pq-tw::after { content: '\25BE'; }
.pq-step.is-open .pq-tw::after { content: '\25B4'; }
.pq-step-body { display: none; margin-top: 8px; border: 1px solid var(--border); border-radius: 9px; padding: 4px 14px 12px; min-width: 0; }
.pq-step.is-open .pq-step-body { display: block; }
.pq-step.is-on .pq-step-body { border-color: var(--blue); }
.pq-step.is-on.is-pz .pq-step-body { border-color: var(--st-warn); }
.pq-gh {
  font-family: var(--disp); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--blue); margin: 10px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
}
.pq-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 12px; align-items: center; margin: 0; font-size: 13px; }
.pq-kv dt { color: var(--muted); font-size: 12.5px; }
.pq-kv dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pq-kv dd > .pq-bar { flex-basis: 100%; }
.pq-kv select { max-width: 100%; }
.pq-kv .date-field-wrap { width: 150px; max-width: 100%; }
.pq-kv .date-field-wrap .date-text { width: 100%; min-width: 0; box-sizing: border-box; }
.pq-lift3 { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pq-lift3 span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.pq-lift3 b { font-family: var(--disp); font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.pq-arrow { color: var(--muted); font-size: 12.5px; }

/* Bugetul: montaj, opțiuni, travel, total */
.pq-money { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.pq-money th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.pq-money td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: right; font-family: var(--mono); white-space: nowrap; }
.pq-money td:first-child { text-align: left; font-family: var(--sans); white-space: normal; }
.pq-money td.is-no { color: var(--muted); }
.pq-money tr.pq-opt td:first-child { padding-left: 18px; }
.pq-money tr.pq-opt td:first-child::before { content: '+ '; color: var(--muted); }
.pq-money tr.pq-tot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--border); }
.pq-q { color: var(--muted); font-size: 12px; }
.pq-tag { font-size: 11px; color: var(--muted); margin-left: 6px; font-style: italic; }

/* Execuție: bara perioadei și zilele oprite */
.pq-bar { height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border); display: flex; overflow: hidden; margin-top: 4px; max-width: 420px; }
.pq-bar i { display: block; height: 100%; }
.pq-bar-f { background: var(--blue); }
.pq-bar.is-done .pq-bar-f { background: var(--st-ok); }
.pq-bar-l { background: var(--st-warn); opacity: .8; margin-left: auto; }
.pq-lost-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pq-lost {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; border-radius: 6px; padding: 2px 4px 2px 8px;
  background: color-mix(in srgb, var(--st-warn) 15%, transparent); color: var(--st-warn);
}
button.pq-lost-x { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; padding: 0 3px; cursor: pointer; }
.pq-step .pq-row { border-top: 1px dashed var(--border); margin-top: 8px; }
.pq-step .pq-final { margin-top: 8px; }

/* Mesajul de după o schimbare (+ Anulează), chiar deasupra barei */
.pq-msgs { padding-top: 0; padding-bottom: 8px; }
.pq-msgs:empty { display: none; }
.pq-msgs .pq-undo { margin: 0; }
.pq-msgs .pq-error { margin: 0 0 6px; }

/* Bara de jos „Ce s-a întâmplat?", lipită de marginea de jos a ecranului */
.pq-actbar {
  position: sticky; bottom: 0; z-index: 3; background: var(--panel);
  border-top: 2px solid var(--blue); padding: 10px 20px 14px;
  /* Un panou mai înalt decât ecranul (telefon mic) se derulează în bară. */
  max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box;
}
.pq-actbar-q { font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pq-bar-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.pq-bar-left, .pq-bar-right { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:is(.pq-modal, .pd-sheet) button.small.pq-btn-on { border-color: var(--blue); color: var(--blue); }
:is(.pq-modal, .pd-sheet) button.small.pq-btn-ok { border-color: var(--st-ok); color: var(--st-ok); }
:is(.pq-modal, .pd-sheet) button.small.pq-btn-warn { border-color: var(--st-warn); color: var(--st-warn); }
:is(.pq-modal, .pd-sheet) button.small.primary.pq-btn-warnfill { background: var(--st-warn); border-color: var(--st-warn); color: #fff; }
.pq-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-top: 10px; }
.pq-panel h4 { margin: 0 0 8px; font-family: var(--disp); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.pq-pl { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.pq-pl > label { min-width: 96px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pq-chips, .pq-datechips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pq-datechips .date-field-wrap { width: 150px; }
.pq-datechips .date-field-wrap .date-text { width: 100%; min-width: 0; box-sizing: border-box; }
.pq-prev { background: var(--panel); border: 1px dashed var(--blue); border-radius: 7px; padding: 7px 10px; font-size: 13px; margin: 2px 0 10px; }
/* „Zile lucrate" (project_quick.js::pqDaysGridHtml): o zi = o căsuță de bifat. */
.pq-days-more { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.pq-days-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pq-days-legend .pq-day { width: 14px; min-height: 14px; height: 14px; padding: 0; margin-left: 6px; display: inline-block; }
.pq-days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.pq-day-h { text-align: center; font-size: 11.5px; color: var(--muted); }
.pq-day {
  min-height: 40px; min-width: 0; padding: 3px 2px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 1px; font: inherit; font-size: 12.5px; cursor: pointer; box-sizing: border-box;
}
.pq-day b { font-weight: 600; white-space: nowrap; }
.pq-day b small { font-weight: 400; color: var(--muted); }
.pq-day i { font-style: normal; font-size: 10px; line-height: 1.15; color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-day.is-on { background: color-mix(in srgb, var(--st-ok) 22%, var(--panel)); border-color: var(--st-ok); }
.pq-day.is-on b small, .pq-day.is-on i { color: inherit; }
.pq-day.has-other:not(.is-on) { border-style: dashed; border-color: var(--st-warn); }
.pq-day.is-na { background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 4px, var(--border) 4px, var(--border) 5px);
  color: var(--muted); cursor: default; }
.pq-day.is-out { opacity: .35; cursor: default; }
.pq-day.is-today { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 480px) { .pq-days-legend { display: none; } }
.pq-prev:empty { display: none; }
.pq-prev b { font-family: var(--mono); font-weight: 500; }
.pq-pa { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .pq-sec { padding: 12px; }
  .pq-actbar { padding: 8px 12px 10px; }
  .pq-name { font-size: 20px; }
  .pq-step { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .pq-step::before { left: 10px; top: 22px; }
  .pq-dot { width: 22px; height: 22px; font-size: 11px; }
  .pq-step-body { padding: 4px 10px 10px; }
  .pq-kv { grid-template-columns: 96px minmax(0, 1fr); }
  .pq-pl > label { min-width: 0; flex-basis: 100%; }
  /* Banii pe telefon: numele pe un rând, cele trei sume dedesubt. */
  .pq-money, .pq-money thead, .pq-money tbody { display: block; }
  .pq-money tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
  .pq-money th, .pq-money td { border-bottom: 0; padding: 3px 4px; font-size: 12px; }
  .pq-money th:first-child { display: none; }
  .pq-money td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .pq-money tr.pq-tot td { border-top: 0; }
  .pq-money tr.pq-tot { border-top: 2px solid var(--border); border-bottom: 0; }
  .pq-bar-btns { justify-content: flex-start; }
}
/* Pe telefon bara de navigare de jos (z-index 1100) acoperea bara „Ce s-a
   întâmplat?"; cât e deschisă fereastra, navigarea și butonul + nu se văd. */
@media (max-width: 720px) {
  body:has(#projQuickOverlay.active) .ui-bottom-nav,
  body:has(#projQuickOverlay.active) .ui-fab { display: none !important; }
}

/* ===== Fișa proiectului (project_detail.js, 28.10.2026, varianta A „Drum + dosar") =====
   Antet, apoi stânga = „Lucrarea" + pașii din „Status proiect" (.pq-*), dreapta =
   dosarul (lipit sus pe calculator), jos bara „Ce s-a întâmplat?" fixă. */
body.pd-page #app { max-width: min(1240px, 96vw); }
.pd-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.pd-head { padding: 14px 20px; }
.pd-head .locked-banner { margin: 0 0 10px; }
.pd-hd { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; }
.pd-hd-main { flex: 1 1 420px; min-width: 0; }
.pd-kick { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-family: var(--disp); font-size: 12px;
           font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
a.pd-back { font-family: var(--sans); font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 500;
            color: var(--blue); text-decoration: none; }
a.pd-back::before { content: '\2190  '; }
.pd-name { font-family: var(--disp); font-size: 26px; line-height: 1.12; font-weight: 600; text-transform: uppercase;
           margin: 2px 0; overflow-wrap: anywhere; }
.pd-where { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pd-hd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; margin-left: auto; }
.pd-kpi { font-family: var(--disp); font-size: 22px; font-weight: 600; white-space: nowrap; }
.pd-kpi-sub { font-size: 12px; color: var(--muted); margin-top: -4px; }
.pd-btns { margin-top: 2px; }
.pd-po-tiles { margin-top: 8px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.pd-left, .pd-side { padding: 6px 20px 14px; }
.pd-side { position: sticky; top: 12px; max-height: calc(100vh - 24px - var(--pd-bar-h, 0px)); overflow-y: auto; box-sizing: border-box; }
.pd-gh { display: flex; align-items: center; gap: 8px; }
.pd-gh > span { flex: 1 1 auto; min-width: 0; }
.pd-gh-top { margin-top: 12px; }
button.pd-pen { border: 0; background: none; color: var(--muted); cursor: pointer; font: 500 13px var(--sans);
                letter-spacing: 0; text-transform: none; padding: 0 2px; }
button.pd-pen:hover { color: var(--blue); }
.pd-road { margin-top: 14px; padding-left: 0; padding-right: 0; }
.pd-sec { padding-bottom: 4px; }
.pd-sheet .pq-kv dd, .pd-sheet .doc-row-label { overflow-wrap: anywhere; min-width: 0; }
.pd-btn-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.pd-final { margin-top: 8px; }
.pd-edit { border: 1px dashed var(--blue); border-radius: 9px; padding: 10px 12px; margin: 4px 0 10px; min-width: 0; }
.pd-edit .form-row { margin-bottom: 0; }
.pd-edit .section-title { display: none; }
.pd-edbar { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pd-notes { font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
textarea.pd-notes-input { width: 100%; box-sizing: border-box; }
.pd-hist { padding: 10px 20px; margin-top: 16px; }
button.pd-fold-btn { border: 0; background: none; color: var(--blue); cursor: pointer; font: 12.5px var(--sans); padding: 2px 0; }
button.pd-fold-btn::before { content: '▸ '; }
button.pd-fold-btn[aria-expanded="true"]::before { content: '▾ '; }
.pd-opts-box, .pd-issues { font-size: 13px; margin-top: 6px; }
table.pd-payouts { margin-top: 8px; font-size: 13px; }
.pd-sheet #docsWrap .doc-row { padding: 6px 0; }
/* Bara de jos, fixă (aceeași ca în fereastră). */
.pq-actbar.pd-actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 16px 10px;
                       max-height: 70vh; box-shadow: 0 -4px 18px rgba(0, 0, 0, .1); }
.pd-actbar-in { max-width: min(1240px, 96vw); margin: 0 auto; }
.pd-actbar .pq-msgs { padding: 0 0 6px; }
@media (max-width: 860px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-side { position: static; max-height: none; overflow: visible; }
  .pd-hd-right { margin-left: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  /* „↓ Excel" pe telefon stă doar în meniul „⋯" (n-are loc pe rândul sumei). */
  .pd-hd-right .pd-xlsx { display: none; }
  .pd-kpi-sub { margin-top: 0; }
}
@media (max-width: 600px) {
  .pd-head, .pd-left, .pd-side, .pd-hist { padding-left: 12px; padding-right: 12px; }
  .pd-name { font-size: 21px; }
  .pq-actbar.pd-actbar { padding: 6px 10px 8px; }
}
@media (max-width: 720px) {
  body:has(.pd-actbar) .ui-bottom-nav, body:has(.pd-actbar) .ui-fab { display: none !important; }
}

/* ===== Căsuțe de acțiune egale (ui_kit.js::uiTilesHtml, 28.10.2026) =====
   Un rând, căsuțe identice; textul se potrivește căsuței (uiTilesFit), nu invers. */
.ui-tiles { display: grid; gap: 6px; grid-template-columns: var(--cols-pc); align-items: stretch; }
.ui-tiles-wide { grid-template-columns: var(--cols-wide); }
.ui-tile {
  box-sizing: border-box; height: 40px; min-width: 0; margin: 0; padding: 0 10px;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text);
  font: 500 13px var(--sans); text-decoration: none; cursor: pointer; overflow: hidden;
}
a.ui-tile, button.ui-tile { display: flex; height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.ui-tile:hover { background: var(--panel-2); }
.ui-tile > i { font-style: normal; font-size: 16px; line-height: 1; flex: none; }
.ui-tile > span { display: block; min-width: 0; max-width: 100%; line-height: 1.1; white-space: nowrap; text-align: left; overflow: hidden; }
.ui-tile.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.ui-tile.is-ok { color: var(--st-ok); border-color: var(--st-ok); }
.ui-tile.is-warn { color: var(--st-warn); border-color: var(--st-warn); }
.ui-tile.is-danger { color: var(--st-bad, #c02626); }
.ui-tile.is-on { border-color: var(--blue); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ui-tile.primary.is-on { color: #fff; }
.ui-tile[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 1000px) {
  .ui-tiles-wide { grid-template-columns: var(--cols-pc); }
}
@media (max-width: 720px) {
  .ui-tiles, .ui-tiles-wide { grid-template-columns: var(--cols-ph); }
  .ui-tiles-gap { display: none; }
  .ui-tile, a.ui-tile, button.ui-tile { height: 58px; flex-direction: column; gap: 3px; padding: 0 3px; }
  .ui-tile > i { font-size: 19px; }
  .ui-tile > span { width: 100%; text-align: center; }
}
/* Rândurile existente transformate singure (ui_kit.js::uiTilesAuto, 29.10.2026):
   doar mărimea și așezarea; culorile rămân ale butonului (primary/ghost/danger).
   În ferestre căsuțele împart rândul; data-tiles="wide" = 150px fiecare. */
.ui-tiles-auto { display: flex; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
.ui-tiles-auto > div:empty, .ui-tiles-auto > span:empty { display: none; }
/* Mărimea cu !important: regulile vechi, mai specifice (`button.ghost.small`,
   `#x button`), schimbau padding-ul, deci și lățimea căsuței. */
.ui-tiles-auto > .ui-atile {
  flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important;
  height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important;
  box-sizing: border-box; display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9px; font-size: 13px !important; line-height: 1.1; white-space: normal; overflow: hidden; text-decoration: none;
}
.ui-tiles-auto > .ui-atile[hidden] { display: none !important; }
.ui-tiles-auto > .ui-atile > i { font-style: normal; font-size: 16px; line-height: 1; flex: none; }
.ui-tiles-auto > .ui-atile > span, .ui-tile > span, .btn-ico.ui-atile > span { flex: 0 1 auto; }
/* Toate căsuțele au chenar de 1px: unul fără chenar (primary) ieșea cu 2px mai îngust. */
.ui-tiles-auto > .ui-atile { border-width: 1px !important; border-style: solid !important; }
.ui-tiles-auto > button.primary.ui-atile { border-color: var(--accent) !important; }
.ui-tiles-auto > .ui-atile > span { display: block; min-width: 0; max-width: 100%; line-height: 1.1; white-space: nowrap;
  text-align: left; overflow: hidden; }
.ui-tiles-auto[data-tiles="wide"] { justify-content: flex-end; }
/* width (nu flex-basis): în containere cât conținutul, baza singură dădea căsuțe de ~110px. */
.ui-tiles-auto[data-tiles="wide"] > .ui-atile { flex: 0 1 auto !important; width: 150px !important; }
.ui-tiles-auto > select { align-self: stretch; }
/* Rând marcat în HTML, dar cu un singur buton: rămâne un rând obișnuit. */
.ui-tiles-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Bara bifelor (fluturaș): numărul pe rândul lui când nu încape. */
.sel-bar.ui-tiles-auto { flex-wrap: wrap; align-items: center; }
/* Fișa cazării: grupul din dreapta (Închide / Editează) coboară pe rândul lui pe telefon. */
.stay-sheet-actions.ui-tiles-auto { flex-wrap: wrap; }
.sel-bar.ui-tiles-auto > .ui-atile { flex: 0 1 auto !important; width: 150px !important; }
@media (max-width: 720px) {
  .ui-tiles-auto, .ui-tiles-auto[data-tiles="wide"] { justify-content: stretch; flex-direction: row !important;
    width: 100%; flex: 1 1 100%; box-sizing: border-box; }
  .sel-bar.ui-tiles-auto > .sel-count { flex: 1 1 100%; }
  .sel-bar.ui-tiles-auto > .ui-atile { flex: 1 1 0 !important; width: auto !important; }
  .ui-tiles-auto > .ui-atile, .ui-tiles-auto[data-tiles="wide"] > .ui-atile {
    flex: 1 1 0 !important; width: auto !important; height: 58px !important; flex-direction: column; gap: 3px; padding: 0 3px !important; }
  .ui-tiles-auto > .ui-atile > i { font-size: 19px; }
  .ui-tiles-auto > .ui-atile > span { width: 100%; text-align: center; }
  /* Pe coloană textul nu se turtește pe verticală: ce nu încape se vede tăiat (regula 5). */
  .ui-tiles-auto > .ui-atile > span, .ui-tile > span { flex-shrink: 0; }
}

/* Butoanele din antetul modulelor (B01) ca aceleași căsuțe: 150 × 40px pe
   calculator, iconiță + text care se micșorează; pe telefon antetul rămâne
   strâns (doar iconița, 40 × 40), cum s-a hotărât la „Capul de modul". */
.btn-ico.ui-atile {
  width: 150px; height: 40px; min-height: 0; min-width: 0; box-sizing: border-box; padding: 0 10px;
  flex-direction: row; align-items: center; justify-content: center; gap: 8px; border-radius: 9px;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; overflow: hidden;
}
.btn-ico.ui-atile > i { font-style: normal; font-size: 16px; line-height: 1; flex: none; }
.btn-ico.ui-atile > span { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; line-height: 1.1; }
@media (max-width: 720px) {
  .panel .btn-ico.ui-atile { width: 40px; height: 40px; padding: 0; gap: 0; }
  .panel .btn-ico.ui-atile > span { display: none; }
}

/* Butonașe-unelte puse unul lângă altul în conținut (Selectează tot / Deselectează,
   Deschide / Șterge pe un rând de document, semnătura, PO-ul legat): aceeași
   lățime - a celui mai lung - nu căsuțe mari. Regula 5 din verifica_aspect.
   Lățimea comună o pune ui_kit.js::uiEqFit (min-width = cel mai lat). */
.ui-eq { display: inline-flex !important; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
.ui-eq > *, .doc-row-actions > button { margin: 0 !important; justify-content: center; text-align: center; }

/* ===== Proiect nou pe pași (project_new.js, 28.10.2026) =====
   O coloană (max 860px), pașii se deblochează pe rând, jos bara fixă. */
body.pn-page #app { max-width: min(900px, 96vw); }
.pn-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pn-hd-main { flex: 1 1 260px; min-width: 0; }
.pd-name.pn-empty { color: var(--muted); }
.pn-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pn-st { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.pn-st.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.pn-st.is-lock { opacity: .55; }
.pn-sh { display: flex; gap: 10px; align-items: center; padding: 12px 16px; cursor: pointer; min-width: 0; }
.pn-st.is-lock .pn-sh { cursor: default; }
.pn-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box;
          display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.pn-st.is-on .pn-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.pn-st.is-ok .pn-dot { background: var(--st-ok); border-color: var(--st-ok); color: #fff; }
.pn-sh b { font-family: var(--disp); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.pn-opt { font-size: 12px; color: var(--muted); }
.pn-sum { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ch { font-size: 12px; color: var(--blue); display: none; }
.pn-st.is-ok .pn-ch { display: inline; }
.pn-sb { display: none; padding: 0 16px 14px 52px; min-width: 0; }
.pn-st.is-on .pn-sb { display: block; }
.pn-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 10px; }
.pn-row[hidden] { display: none; }
.pn-lbl { min-width: 96px; font-size: 12.5px; color: var(--muted); }
.pn-lbl i, label.pn-req::after { color: var(--st-warn); font-style: normal; }
label.pn-req::after { content: ' *'; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; flex: 1 1 0; }
/* Regiune / oraș: câmp de căutare cu listă (project_new.js::pnComboOpen). */
.pn-combo { position: relative; max-width: 360px; width: 100%; flex: 1 1 220px; min-width: 0; }
.pn-combo input { width: 100%; box-sizing: border-box; }
.pn-combo-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
                 max-height: 260px; overflow-y: auto; background: var(--panel); color: var(--text);
                 border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.pn-combo-list[hidden] { display: none; }
.pn-combo-item { padding: 8px 10px; cursor: pointer; font-size: 13.5px; line-height: 1.3; border-bottom: 1px solid var(--border); }
.pn-combo-item:last-child { border-bottom: 0; }
.pn-combo-item:hover, .pn-combo-item.is-on { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); color: var(--blue); }
.pn-combo-item span { color: var(--muted); font-size: 12px; }
.pn-combo-empty { padding: 8px 10px; color: var(--muted); font-size: 12.5px; }
button.pn-link { border: 0; background: none; color: var(--blue); cursor: pointer; font: 12.5px var(--sans); padding: 2px 4px; }
.pn-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
button.pn-type { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 9px; padding: 10px;
                 text-align: left; cursor: pointer; font: inherit; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
button.pn-type b { font-family: var(--disp); font-size: 14px; font-weight: 600; text-transform: uppercase; }
button.pn-type span { font-size: 12px; color: var(--muted); }
button.pn-type.is-on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
                       background: color-mix(in srgb, var(--blue) 10%, var(--panel)); }
.pn-next { display: flex; justify-content: flex-end; margin-top: 12px; }
.pn-src { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pn-money td input.pn-money-in { width: 11ch; text-align: right; font-family: var(--mono); padding: 3px 6px; box-sizing: border-box; }
.pn-money input.pn-qty { width: 6ch; margin-left: 6px; padding: 2px 4px; }
.pn-money .pn-opt-set { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; font-size: 12px; }
.pn-money .pn-opt-set select { font-size: 12px; padding: 1px 3px; }
.pn-money tr.is-off td:first-child > span:first-child { text-decoration: line-through; color: var(--muted); }
.pn-money td.pn-x { width: 24px; }
.pn-budget-tools { margin-top: 8px; }
.pn-tools-own { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pn-budget-tools .discount-note-field { margin: 0; }
.pn-end { font-size: 13px; margin: -4px 0 4px; }
.pn-bar-in { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; max-width: min(900px, 96vw); }
.pn-miss { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; min-width: 0; }
button.pn-miss-chip { border: 0; border-radius: 5px; padding: 1px 8px; cursor: pointer; font: 13px var(--sans);
                      color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 15%, transparent); }
.pn-ready { font-size: 12px; color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 15%, transparent); border-radius: 5px; padding: 1px 8px; }
.pn-bar-tiles { flex: 0 1 320px; min-width: 220px; }
@media (max-width: 640px) {
  .pn-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-sb { padding: 0 12px 12px; }
  .pn-sh { padding: 10px 12px; }
  .pn-bar-tiles { flex: 1 1 100%; }
  .pn-money .pn-opt-set { margin-left: 0; }
}

/* Lifturi speciale: „Ultima dată … · Folosește" (api.js::projectSpecialSuggestHtml). */
.special-suggest { border: 1px dashed var(--blue); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: 13px; }
.special-suggest-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.special-cfgs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.special-cfg { font-size: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; overflow-wrap: anywhere; }
.special-cfg.is-exact { border-color: var(--st-ok); }
.pn-add-opt { max-width: 260px; }

/* PO pe fișă: suma și împărțirea pe proiecte (project_detail.js::pdPoAllocOpen). */
.modal.pd-po-modal { max-width: 620px; }
.pd-po-modal .pq-pl > label { min-width: 110px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pd-po-table { margin-top: 6px; }
.pd-po-table td input.pn-money-in { width: 12ch; text-align: right; font-family: var(--mono); padding: 3px 6px; box-sizing: border-box; }
.pd-po-table tr.is-off td:first-child { color: var(--muted); }
.pd-po-table td.pd-po-left { color: var(--st-warn); }
.pd-po-search { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pd-po-search #pdPoHits { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-po-actions { align-items: center; }
.pd-po-actions .sp { flex: 1 1 auto; }

/* ===== Flotă: ⬇ lângă data din tabel (fleet.js::expiryWithDocHtml, 29.10.2026) =====
   Descarcă direct talonul / polița / rovinieta; doar iconița, și pe telefon. */
.exp-with-doc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.exp-doc-dl {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text);
  font-size: 13px; line-height: 1; cursor: pointer; flex: none;
}
.exp-doc-dl:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Fișa mașinii: „Scadențe și documente" (vehicle_page.js, 29.10.2026) =====
   Un rând pe act: numele + data în stânga, căsuțele egale (Vezi / Descarcă /
   Trimite / Actualizează) în dreapta; formularul și istoricul sub rând. Pe
   telefon căsuțele coboară sub nume și împart lățimea. Doar variabile de temă. */
.vdoc-list { display: flex; flex-direction: column; gap: 6px; }
.vdoc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
}
.vdoc-row > .vdoc-form, .vdoc-row > .vdoc-history { grid-column: 1 / -1; }
.vdoc-new { margin-top: 6px; }
.vdoc-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.vdoc-info b { overflow-wrap: anywhere; }
.vdoc-none { font-size: 12px; color: var(--st-warn, var(--muted)); }
.vdoc-done { font-size: 12px; }
.vdoc-del {
  margin-left: auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--red); cursor: pointer; font-size: 14px; line-height: 1;
}
.vdoc-row .vdoc-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 116px; justify-content: end; }
.vdoc-actions { margin-top: 10px; }
.vdoc-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; align-items: end;
  margin: 2px 0 0; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel);
}
.vdoc-form .field { margin: 0; min-width: 0; }
.vdoc-form .field input, .vdoc-form .field select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.vdoc-form .vdoc-save button { width: 100%; height: 36px; }
.vdoc-form .vdoc-form-msg { grid-column: 1 / -1; margin: 0; }
.vdoc-form .vdoc-form-msg:empty { display: none; }
.vdoc-history summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.vdoc-hist-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.vdoc-hist-row .doc-row-actions { margin-left: auto; }
@media (max-width: 720px) {
  .vdoc-row { grid-template-columns: minmax(0, 1fr); }
  .vdoc-row .vdoc-tiles { grid-auto-columns: minmax(0, 1fr); justify-content: stretch; }
}