/* Elconet Hub · stilurile de bază ale cochiliei: culorile, literele, intrarea, bara, cadrul paginii și componentele
   comune (butoane, câmpuri, panouri, mesaje, liste, tabele). Stilurile unui modul stau în dosarul lui. */
:root {
  --bg: #0d1117; --bar: #0a0d12; --pane: #131a23; --card: #18212c; --soft: #1f2a37; --line: #263241; --line2: #33425a;
  --ink: #e8edf3; --mut: #9aa7b8; --dim: #7d8a9b;
  --acc: #318bf0; --acc-t: #6fb0ff; --acc2: #13263d;
  --hover: rgba(255, 255, 255, .045);
  --ok: #3fbf8a; --ok2: #12291f; --wip: #e5b45a; --wip2: #2d2414; --err: #f07178; --err2: #2e1619;
  --plus: #b79cff; --plus2: #221b36;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sus: env(safe-area-inset-top, 0px); --jos: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-x: clip; min-height: 100vh; min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
a { color: var(--acc-t); }
.ascuns { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 20px; height: 20px; flex: none; }

/* ——— pornirea ——— */
.pornire { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.pornire-logo { width: 180px; height: auto; opacity: .9; }

/* ——— intrarea, parola, codul ——— */
.poarta { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--sus)) 16px calc(24px + var(--jos)); }
.poarta-cutie { width: 100%; max-width: 400px; }
.poarta-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.poarta-logo img { height: 24px; width: auto; }
.poarta-logo span { font-weight: 650; font-size: 17px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
.poarta h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.poarta .sub { color: var(--mut); font-size: 14px; margin-bottom: 20px; }
.pasi { display: flex; gap: 6px; margin-bottom: 14px; }
.pasi span { height: 4px; flex: 1; border-radius: 2px; background: var(--soft); }
.pasi span.on { background: var(--acc); }
.camp { display: block; margin-bottom: 14px; }
.camp > span, .camp > label { display: block; font-size: 13px; color: var(--mut); margin-bottom: 5px; font-weight: 550; }
.parola-camp { position: relative; }
.camp .parola-camp input { padding-right: 50px; }
/* Edge își pune propriul buton de arătat parola lângă al aplicației: rămâne numai al aplicației. */
.parola-camp input::-ms-reveal, .parola-camp input::-ms-clear { display: none; }
.ochi { position: absolute; top: 0; right: 0; width: 46px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 0 10px 10px 0; color: var(--mut); cursor: pointer; }
.ochi:hover { color: var(--ink); }
.ochi:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ochi[aria-pressed="true"] { color: var(--acc-t); }
.ochi:disabled { opacity: .55; cursor: default; }
.camp input, .camp select { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; min-height: 44px; }
.camp input:focus, .camp select:focus { border-color: var(--acc); }
.camp small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 5px; }
/* Parola nouă: regula deasupra câmpurilor, de la început; lista care se bifează sub ele. */
.regula-parola { display: flex; gap: 8px; align-items: flex-start; background: var(--acc2); color: #b9d8ff; border: 1px solid #1d3a5c; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin: 0 0 14px; }
.regula-parola svg.ic { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--acc-t); }
.main .regula-parola { max-width: 560px; }
.bife-parola { list-style: none; margin: -4px 0 16px; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--dim); }
.bife-parola li { display: flex; align-items: center; gap: 8px; }
.bife-parola svg.ic { width: 16px; height: 16px; flex: none; }
.bife-parola li.on { color: #9fe0c3; }
.bife-parola li.on svg.ic { color: var(--ok); }
.cod-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .35em; text-align: center; }
/* Un singur fel de buton, fie <button>, fie <a>: aceeași culoare, fără subliniere. */
.btn { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line2); background: var(--soft); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14.5px; }
.btn:hover { border-color: var(--acc); }
.btn.prim { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.prim:hover { background: #2a7ad6; }
.btn.lat { width: 100%; }
.btn.mic { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.btn.pericol { color: var(--err); }
.btn:disabled { opacity: .55; cursor: default; }
.mesaj { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.mesaj.err { background: var(--err2); color: #f5b5b9; border: 1px solid #4a2328; }
.mesaj.ok { background: var(--ok2); color: #9fe0c3; border: 1px solid #1e4634; }
.mesaj.info { background: var(--acc2); color: #b9d8ff; border: 1px solid #1d3a5c; }
.qr { display: flex; justify-content: center; background: #fff; border-radius: 12px; padding: 12px; width: 204px; margin: 4px auto 14px; }
.qr img { width: 180px; height: 180px; display: block; }
.secret { display: block; font-family: var(--mono); font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all; text-align: center; margin-bottom: 14px; letter-spacing: .06em; }
.lista-pasi { margin: 0 0 16px; padding-left: 20px; color: var(--mut); font-size: 13.5px; }
.lista-pasi li { margin: 4px 0; }
.poarta-alt { margin-top: 10px; }
/* Codul pus de pe același telefon: pașii pe iPhone și pe Android, butonul care deschide aplicația de coduri, cheia cu
   „Copiază”. Pe calculator: pașii, codul QR și aceeași cheie. */
.poarta-cum { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; color: var(--mut); }
.poarta-cum b { color: var(--ink); }
.poarta-cum > b:first-child { font-size: 14px; }
.cod-pe-telefon { margin: 4px 0 16px; }
.cheie-cfg { margin-bottom: 16px; }
.cheie-rand { display: flex; gap: 8px; align-items: stretch; }
.cheie-rand .secret { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: center; user-select: all; -webkit-user-select: all; }
.cheie-rand .btn { flex: none; }
.cheie-cfg small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 6px; }
.poarta .sub.poarta-apoi { margin-bottom: 10px; }

/* ——— aplicația ——— */
/* Pe calculator: bara laterală în stânga și coloana conținutului. Pe telefon (sub 900 px): antetul și bara de jos. */
.ap { min-height: 100vh; min-height: 100dvh; display: flex; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 232px; flex: none; display: flex; flex-direction: column; gap: 2px; background: var(--bar); border-right: 1px solid var(--line); padding: calc(18px + var(--sus)) 12px 14px; overflow-y: auto; overflow-x: hidden; }
.sb-cap { display: flex; align-items: center; gap: 12px; padding: 2px 10px 20px; min-height: 44px; }
.sb-cap .logo { height: 19px; width: auto; display: block; }
a.sb-cap, a.top-sigla { text-decoration: none; color: inherit; border-radius: 8px; }
a.sb-cap:focus-visible, a.top-sigla:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.top-sigla { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.sb-cap .semn { display: none; width: 30px; height: 30px; border-radius: 8px; }
.sb-cap .nm { font-weight: 650; font-size: 15px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 550; white-space: nowrap; }
.sb-nav a:hover { color: var(--ink); background: var(--hover); }
/* Secțiunea curentă e una singură și nu seamănă cu trecerea mouse-ului: fond și text de accent, linia din stânga. */
.sb-nav a.on, .sb-nav a.on:hover { color: var(--acc-t); background: var(--acc2); box-shadow: inset 3px 0 0 var(--acc); font-weight: 650; }
.sb-nav a:focus-visible, .sb-cont:focus-visible, .sb-strange:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sb-jos { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sb-strange { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 13px; text-align: left; white-space: nowrap; }
.sb-strange:hover { color: var(--ink); background: var(--hover); }
.sb-cont { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.sb-cont:hover { background: var(--hover); }
.sb-om { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-om b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-om small { font-size: 12px; color: var(--mut); }
.ap.sb-stransa .sb { width: 72px; padding-left: 10px; padding-right: 10px; }
.ap.sb-stransa .sb-cap { justify-content: center; padding: 2px 0 20px; }
.ap.sb-stransa .sb-cap .logo, .ap.sb-stransa .sb-cap .nm, .ap.sb-stransa .sb-nav span, .ap.sb-stransa .sb-strange span, .ap.sb-stransa .sb-om { display: none; }
.ap.sb-stransa .sb-cap .semn { display: block; }
.ap.sb-stransa .sb-nav a, .ap.sb-stransa .sb-strange, .ap.sb-stransa .sb-cont { justify-content: center; padding-left: 0; padding-right: 0; }
.top { display: none; }
.top .logo { height: 19px; width: auto; display: block; }
.top .nm { font-weight: 650; font-size: 15px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
.top .sp { flex: 1; }
.cine { display: flex; align-items: center; border-radius: 999px; padding: 3px; text-decoration: none; color: var(--ink); }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.av.cu-poza { color: transparent; }
.sb-av { width: 34px; height: 34px; font-size: 12.5px; }
.av.lg { width: 56px; height: 56px; font-size: 19px; }
.av.xl { width: 96px; height: 96px; font-size: 32px; }
/* Regula de design a aplicației: conținutul ține toată lățimea, de la bară la marginea ferestrei, cu o margine
   interioară constantă (32 px; 16 px sub 900 px). Ce nu trebuie să se lungească se așază în grilă: panourile pe coloane,
   câmpurile cel mult 560 px, textul cel mult 80 de caractere pe rând. */
.main { flex: 1; width: 100%; padding: 28px 32px 48px; }
.main p, .main small, .gol > div, .mesaj { max-width: 80ch; }
.main .camp { max-width: 560px; }
.cap-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.panouri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.panouri > .panou + .panou { margin-top: 0; }
.campuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.panou { container-type: inline-size; }
@media (min-width: 2000px) {
  .panouri.lat-prim { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.hi { font-size: 22px; font-weight: 700; }
.sub { color: var(--mut); font-size: 13.5px; margin-top: 3px; }
.sec { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 24px 0 10px; font-weight: 650; }
.nav-jos { display: none; }
.chip { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip.curand { background: var(--wip2); color: var(--wip); }
.chip.activ { background: var(--ok2); color: var(--ok); }
.chip.oprit { background: var(--err2); color: var(--err); }
.chip.neutru { background: var(--soft); color: var(--mut); }
.gol { border: 1px dashed var(--line2); border-radius: 14px; padding: 22px 18px; color: var(--mut); font-size: 14px; display: flex; gap: 14px; align-items: flex-start; }
.gol .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--soft); color: var(--mut); display: grid; place-items: center; flex: none; }
.gol b { color: var(--ink); display: block; margin-bottom: 3px; font-size: 15px; }

.panou { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.panou + .panou { margin-top: 14px; }
.panou h2 { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.rand-date { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.rand-date dt { color: var(--mut); }
.rand-date dd { margin: 0; word-break: break-word; }
.panou > .sub + .rand-date { margin-top: 12px; }
.om-nume { display: flex; align-items: center; gap: 10px; }
.actiuni { display: flex; gap: 8px; flex-wrap: wrap; }

/* echipa */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 12px; color: var(--mut); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabel td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inapoi { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; background: none; border: 0; cursor: pointer; padding: 4px 0; }

@media (max-width: 899px) {
  .sb, .top .nm { display: none; }
  .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: calc(10px + var(--sus)) 16px 10px; background: var(--bar); border-bottom: 1px solid var(--line); }
  .main { padding: 18px 16px calc(90px + var(--jos)); }
  .cap-pagina > .actiuni { width: 100%; }
  .hi { font-size: 20px; }
  /* Bara de jos stă lipită de marginea de jos a ecranului VĂZUT, cu zona sigură a iPhone-ului. Pe iOS, după ce tastatura
     se închide, fereastra de așezare poate rămâne mai scurtă decât cea văzută, iar bara ar sta la mijloc: `--vv-jos`
     (pus de cochilie, după `visualViewport`) o coboară cât e diferența; altfel e 0. Niciun părinte al ei nu are
     transform, filter sau overflow, iar pagina se derulează pe document, nu într-un container. */
  .nav-jos { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--bar); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--jos)); transform: translate3d(0, var(--vv-jos, 0px), 0); }
  .nav-jos a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--dim); text-decoration: none; font-size: 11px; font-weight: 600; padding: 4px 0; min-height: 44px; }
  .nav-jos a.on { color: var(--acc-t); }
  .nav-jos svg.ic { width: 22px; height: 22px; }
  .rand-date { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rand-date dd { margin-bottom: 8px; }
  .tabel { display: none; }
}
dl.rand-date { margin: 0; }
.panou dl + .actiuni, .panou dl + .sub { margin-top: 14px; }
/* Panoul îngust (coloană de grilă sau telefon): datele una sub alta. La capăt, ca să treacă peste regulile de mai sus. */
@container (max-width: 420px) {
  .rand-date { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rand-date dd { margin-bottom: 8px; }
}

/* ——— felia 3: concediile și învoirile ——— */
.camp textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; min-height: 64px; resize: vertical; font: inherit; color: inherit; }
.camp textarea:focus { border-color: var(--acc); }
.actiuni.jos { margin-top: 14px; }
.h2-sec { margin-top: 20px; }
.mare { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 2px 0 4px; }
.eticheta { display: block; font-size: 13px; color: var(--mut); margin-bottom: 6px; font-weight: 550; }

/* clopoțelul: în bara laterală, deasupra butonului care o strânge; pe telefon, în antet */
.sb-clopot { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; color: var(--mut); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.sb-clopot:hover { color: var(--ink); background: var(--hover); }
.sb-clopot:focus-visible, .clopot:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sb-clopot .bulina { margin-left: auto; }
.ap.sb-stransa .sb-clopot { justify-content: center; padding-left: 0; padding-right: 0; }
.ap.sb-stransa .sb-clopot .tx { display: none; }
.ap.sb-stransa .sb-clopot .bulina { position: absolute; top: 4px; right: 10px; margin: 0; }
.clopot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--mut); text-decoration: none; }
.clopot .bulina { position: absolute; top: 3px; right: 2px; }
.bulina { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }

/* tabloul */

/* felul cererii */
.segment { display: inline-flex; background: var(--bg); border: 1px solid var(--line2); border-radius: 11px; padding: 3px; gap: 3px; margin-bottom: 6px; }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--mut); min-height: 36px; }
.segment input:checked + span { background: var(--acc); color: #fff; }
.segment input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.segment-ajutor { margin: 0 0 14px; }
.rezumat { font-size: 14px; color: var(--ink); margin: 0 0 14px; max-width: 80ch; }
.rezumat:empty { display: none; }
.rezumat b { color: var(--acc-t); }
.semn-pad { position: relative; width: 100%; max-width: 560px; aspect-ratio: 3 / 1; background: #fff; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; touch-action: none; margin-bottom: 10px; }
.semn-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.semn-ghid { position: absolute; left: 6%; right: 6%; bottom: 22%; border-top: 1px dashed #b8c2cf; padding-top: 4px; color: #8a96a6; font-size: 12px; pointer-events: none; }
.semn-pad.semnat .semn-ghid { color: transparent; }
.semn-cutie { display: inline-flex; background: #fff; border-radius: 10px; padding: 8px 14px; border: 1px solid var(--line2); margin-bottom: 6px; max-width: 100%; }
.semn-cutie img { display: block; max-height: 72px; max-width: 100%; }
.semn-msg .mesaj { margin-bottom: 10px; }
.semn-cutie + p.sub { margin: 0 0 10px; }
.lista-simpla { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.lista-simpla li { max-width: 80ch; }
.lista-simpla .chip { margin-left: 6px; }

/* avertismentele: back-up-ul care lipsește și el în aceeași perioadă */
.mesaj.avert { display: flex; gap: 10px; align-items: flex-start; background: var(--wip2); color: #f3d7a1; border: 1px solid #4a3b1d; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.mesaj.avert svg.ic { width: 18px; height: 18px; color: var(--wip); margin-top: 1px; }
.mesaj.avert p { margin: 0; max-width: 80ch; }
.mesaj.avert p + p { margin-top: 4px; }

/* notificările */
.lista-notif { list-style: none; margin: 0; padding: 0; }
.notif { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notif:first-child { padding-top: 0; }
.notif:last-child { border-bottom: 0; padding-bottom: 0; }
.notif .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--mut); display: grid; place-items: center; flex: none; }
.notif.noua .ico { background: var(--acc2); color: var(--acc-t); }
.notif > div { flex: 1; min-width: 0; }
.notif p { font-size: 14px; }
.notif small { color: var(--mut); font-size: 12.5px; }
.notif .btn { flex: none; }

/* documentul: foaia A4, albă, cu panoul de acțiuni alături; pe hârtie rămâne numai foaia */
.doc-ecran { display: grid; grid-template-columns: minmax(0, 210mm) minmax(260px, 1fr); gap: 16px; align-items: start; }
.doc-foaie { background: #fff; color: #1b2430; border-radius: 6px; padding: 18mm 18mm 14mm; min-height: 270mm; display: flex; flex-direction: column; font-size: 14px; line-height: 1.55; }
.main .doc-foaie p { max-width: none; }
.doc-antet { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #318bf0; }
.doc-antet img { height: 34px; width: auto; }
.doc-firma { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 11.5px; color: #4a5565; line-height: 1.45; }
.doc-firma b { color: #1b2430; font-size: 12.5px; }
.doc-panou .actiuni { margin: 10px 0; }
.lista-istoric { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.lista-istoric li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.lista-istoric li:last-child { border-bottom: 0; }
.lista-istoric span { color: var(--mut); font-size: 12.5px; }
.lista-istoric .ist-det { color: var(--ink); font-size: 13px; margin-top: 2px; }

@media (max-width: 1279px) {
  .doc-ecran { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .doc-foaie { padding: 22px 16px; min-height: 0; font-size: 13px; }
  .doc-antet { flex-direction: column; }
  .doc-firma { align-items: flex-start; text-align: left; }
  .segment { display: flex; }
  .segment label { flex: 1; }
  .segment span { text-align: center; }
}
.main .camp.camp-lat { max-width: 80ch; }

/* cui se adresează */
fieldset.pentru { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.pentru legend { font-size: 13px; color: var(--mut); font-weight: 550; margin-bottom: 6px; padding: 0; }
.bifa-rol { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); cursor: pointer; font-size: 14px; }
.bifa-rol input { width: 18px; height: 18px; accent-color: var(--acc); margin: 0; }
.bifa-rol:has(input:checked) { border-color: var(--acc); background: var(--acc2); }
.lista-simpla small { color: var(--mut); font-size: 12.5px; }
.cap-pagina .inapoi { margin-bottom: 6px; }
#continut > .mesaj.info { margin-top: 14px; margin-bottom: 0; }
.mesaj.avert + .mesaj, .mesaj + .mesaj.avert { margin-top: 0; }
.main > .mesaj.avert, #continut > .mesaj.avert { margin: 14px 0; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #1b2430; }
  .sb, .top, .nav-jos, .doc-panou, .cap-pagina, .main > .sec, #msg-pagina { display: none !important; }
  .ap, .col { display: block; min-height: 0; }
  .main { padding: 0 !important; }
  .doc-ecran { display: block; }
  .main .doc-ecran { margin-top: 0; }
  .doc-foaie { width: 210mm; min-height: 295mm; border-radius: 0; padding: 16mm 18mm 12mm; font-size: 13.5px; }
  .doc-antet { flex-direction: row; }
  .doc-firma { align-items: flex-end; text-align: right; }
}

/* ——— versiunile (punctul 0): banda „Actualizează”, rezumatul și „Ce e nou” ——— */
.sus-versiune { padding: 20px 32px 0; }
.sus-versiune:empty { display: none; }
.sus-versiune + .main { padding-top: 16px; }
/* Banda de versiune: un singur bloc, pe toată lățimea conținutului; textul la stânga, butonul unic la dreapta. */
.versiune-bloc { display: flex; align-items: center; gap: 12px 24px; background: var(--acc2); border: 1px solid #1d3a5c; border-left: 4px solid var(--acc); border-radius: 14px; padding: 14px 16px 14px 18px; }
.versiune-bloc .vb-t { flex: 1; min-width: 0; }
.versiune-bloc .vb-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
/* „Vezi tot”: buton mic, secundar (`.btn.mic`), sub butonul principal. */
.versiune-bloc .vb-tot { align-self: stretch; justify-content: center; }
.versiune-bloc .vb-nou { margin: 6px 0 0; color: var(--mut); font-size: 13.5px; }
.versiune-bloc .vb-nou b { color: var(--acc-t); font-weight: 650; }
.versiune-bloc .rv-cap b { color: var(--acc-t); }
.versiune-bloc p, .versiune p { margin: 4px 0 6px; }
.versiune-bloc ul, .versiune ul { margin: 0 0 4px; padding-left: 20px; color: var(--ink); font-size: 14px; }
.versiune-bloc li, .versiune li { margin: 3px 0; }
/* Textele de citit („Ce e nou”, rezumatul versiunii de pe Tablou) țin toată lățimea cardului și sunt justificate, cu
   despărțire în silabe (pagina are lang="ro"), ca să nu rămână goluri mari (Cosmin, 06.10.2026 ~16:35: „vezi aici
   textul, pe toata pagina, justify”). Pe ecran îngust (sub 600 px) rămân aliniate la stânga, ca documentul cererii. */
.text-lung p, .text-lung li { max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 599px) {
  .text-lung p, .text-lung li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}
.rv-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rv-cap > span:last-child { color: var(--mut); font-size: 13px; }
.rv-cap h2 { font-size: 17px; }
.versiuni { display: grid; gap: 14px; }
.versiuni .panou + .panou { margin-top: 0; }
@media (max-width: 899px) {
  .sus-versiune { padding: 14px 16px 0; }
  .versiune-bloc { flex-direction: column; align-items: stretch; }
  .versiune-bloc .vb-act { flex-direction: row; align-items: center; justify-content: space-between; }
  .versiune-bloc .vb-act .btn { flex: 1; justify-content: center; }
  .versiune-bloc .vb-act .vb-tot { flex: none; }
}
@media print {
  .sus-versiune { display: none !important; }
}

/* ——— pagina „Concedii”: filele, rândurile „de făcut”, rezumatul de pe Tablou ——— */
.file-pagina { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.fila { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border-radius: 9px; color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fila:hover { background: var(--card); color: var(--ink); }
.fila.on { background: var(--acc2); color: var(--acc-t); box-shadow: inset 0 0 0 1px #1d3a5c; }
.fila:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.fila-nr { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 11.5px; font-weight: 700; }
@media (max-width: 899px) {
  .file-pagina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila { justify-content: center; padding: 6px 8px; min-width: 0; }
  .fila span:first-child { overflow: hidden; text-overflow: ellipsis; }
}

/* ——— felia 6: „?” (ajutorul), „Vezi ca”, notificările pe telefon, manualul ——— */
.hi .ajutor, h2 .ajutor { margin-left: 10px; vertical-align: middle; }
.ajutor { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--mut); border: 1px solid var(--line2); background: var(--soft); text-decoration: none; }
.ajutor svg.ic { width: 18px; height: 18px; }
.ajutor:hover, .ajutor:focus-visible { color: var(--acc-t); border-color: var(--acc); outline: none; }
.banda-vezi { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 20px 32px 0; background: var(--wip2); color: #f3d7a1; border: 1px solid #4a3b1d; border-left: 4px solid var(--wip); border-radius: 12px; padding: 10px 12px 10px 14px; }
.banda-vezi svg.ic { color: var(--wip); }
.banda-vezi .bv-t { flex: 1; min-width: 200px; font-size: 14px; }
.banda-vezi b { color: var(--ink); }
body.vezi-ca [data-nc="da"] { opacity: .45; cursor: not-allowed; }
.push-stare { margin: 0 0 4px; }
.comut { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; max-width: 640px; }
.comut:last-child { border-bottom: 0; }
.comut input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acc); flex: none; }
.comut b { display: block; font-weight: 600; font-size: 14.5px; }
.comut small { display: block; color: var(--mut); font-size: 13px; }
.push-pref fieldset { border: 0; margin: 14px 0 0; padding: 0; }
.push-pref legend { font-size: 13px; color: var(--mut); font-weight: 650; margin-bottom: 4px; padding: 0; }
.push-pref .ore-ajutor { display: block; color: var(--dim); font-size: 12.5px; max-width: 80ch; }
.push-pref .actiuni { margin-top: 16px; }
@media (max-width: 899px) {
  .banda-vezi { margin: 14px 16px 0; }
}
@media print {
  .banda-vezi, .ajutor { display: none !important; }
}

/* Confirmarea unei scrieri (toast): jos în dreapta pe calculator, deasupra barei de jos pe telefon. Reușita dispare după
   ~3 secunde; eroarea rămâne până o închizi. */
.toast-loc { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); border: 1px solid var(--line2); background: var(--card); color: var(--ink); }
.toast svg.ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast.ok { border-color: #1f5a41; background: var(--ok2); }
.toast.ok svg.ic { color: var(--ok); }
.toast.err { border-color: #5a2a2e; background: var(--err2); color: #f5c2c5; }
.toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-inchide { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; min-width: 32px; min-height: 32px; }
.btn[data-se-salveaza] { opacity: .75; cursor: progress; }
@media (max-width: 899px) {
  .toast-loc { left: 16px; right: 16px; bottom: calc(84px + var(--jos)); max-width: none; }
}
@media print {
  .toast-loc { display: none; }
}
/* Tabelul zilelor pe fel are 7 coloane: pe telefon se derulează în el, nu pagina. */
.tabel-derulare { overflow-x: auto; max-width: 100%; }

/* ——— Tabloul „Lista zilei” (varianta A din machetă) ———
   Sus „Ce te așteaptă” pe toată lățimea; dedesubt două coloane: avizierul ca listă în stânga, back-up-ul, cine lipsește
   și deciziile noi în dreapta. Sub 1100 px, o singură coloană, în aceeași ordine. */
/* legătura din capul unei părți e un buton mic (regula butoanelor), nu text colorat */
.sec-leg { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sec-leg > a.btn { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; min-height: 32px; padding: 4px 10px; gap: 4px; }
.sec-leg > a.btn svg.ic { width: 16px; height: 16px; }

/* ——— unealta Contracte-cadru ——— */
.opt { font-style: normal; color: var(--dim); font-weight: 500; }
/* Capul ecranelor Contracte-cadru (Cosmin, 07.10.2026: „sus in dreapta, un mic aspect de design”): titlul pe primul rând,
   cu butoanele la dreapta pe același rând, explicația dedesubt. Sub 900 px butoanele vin sub titlu, pe toată lățimea.
   Între cap și ce urmează rămân 18 px, ca la celelalte ecrane ale uneltei (foaia contractului și panoul „Stare” se
   lipeau de cap). */
.cap-pagina.cap-rand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: center; }
.cap-rand > div:first-child { display: contents; }
.cap-rand > div:first-child > .hi { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.cap-rand > div:first-child > .sub { grid-column: 1; grid-row: 2; }
.cap-rand > .actiuni { grid-column: 2; grid-row: 1; justify-content: flex-end; }
@media (max-width: 899px) {
  .cap-pagina.cap-rand { grid-template-columns: minmax(0, 1fr); }
  .cap-rand > .actiuni { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 12px; }
}
.ctr-ecran { margin-top: 18px; }
.ctr-lista { display: flex; flex-direction: column; }
.ctr-r { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.ctr-r:last-child { border-bottom: 0; }
.ctr-r:hover .ctr-c b { color: var(--acc-t); }
.ctr-r:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.ctr-nr { font-family: var(--mono); font-weight: 700; font-size: 13px; background: var(--soft); border: 1px solid var(--line2); border-radius: 8px; padding: 3px 8px; min-width: 64px; max-width: 40%; text-align: center; flex: none; overflow-wrap: anywhere; }
.ctr-r .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--acc2); color: var(--acc-t); display: grid; place-items: center; flex: none; }
.ctr-r .ico svg.ic { width: 18px; height: 18px; }
.ctr-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctr-c b { font-weight: 650; overflow-wrap: anywhere; }
.ctr-c small { color: var(--mut); font-size: 12.5px; overflow-wrap: anywhere; }
.ctr-nimic { padding: 8px 4px 0; }
.ctr-titlu { text-align: center; font-size: 19px; font-weight: 700; margin: 22px 0 14px; color: #1b2430; }
.ctr-tabel { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 12.5px; }
.ctr-tabel th, .ctr-tabel td { border: 1px solid #c5cdd8; padding: 6px 8px; text-align: left; vertical-align: top; }
.ctr-tabel th { background: #eef1f5; font-weight: 700; }
.ctr-desc { margin: 10px 0; }
.ctr-date { margin-top: 4px; }
@media (max-width: 1279px) {
  .ctr-ecran .ctr-panou { order: -1; }
}
@media screen and (max-width: 599px) {
  .ctr-r { flex-wrap: wrap; gap: 8px 12px; }
  .ctr-r .ctr-c { flex-basis: calc(100% - 90px); }
}
.btn.mare { min-height: 52px; font-size: 16px; padding: 12px 22px; }
.btn.oprit { opacity: .55; pointer-events: none; }
.toast .btn.mic { flex: none; min-height: 34px; }

/* Nicio literă sub 16 px pe ecranele Sarcini și ale inventarului (clasa `litere-mari` pe `.main`, pusă de `cadru()` pe
   secțiunea Sarcini). Proba inventarului măsoară fiecare nod de text vizibil din `#continut` și mesajele de jos. */
.main.litere-mari .sub, .main.litere-mari small, .main.litere-mari .btn, .main.litere-mari .btn.mic, .main.litere-mari .mesaj, .main.litere-mari .mesaj.avert, .main.litere-mari .camp > label, .main.litere-mari .camp > span, .main.litere-mari .camp small, .main.litere-mari .camp input, .main.litere-mari .camp select, .main.litere-mari .camp textarea, .main.litere-mari .gol, .main.litere-mari .gol b, .main.litere-mari .sec, .main.litere-mari .rand-date, .main.litere-mari kbd, .main.litere-mari .chip { font-size: 16px; }
.main.litere-mari .sec { letter-spacing: .02em; }
body:has(.main.litere-mari) .toast, body:has(.main.litere-mari) .toast .btn.mic { font-size: 16px; }
/* Pe telefon, banda „Ce e nou” nu împinge lista de numărat sub primul ecran: rămân titlul, rezumatul și butoanele; lista
   noutăților e la „Vezi tot”. */
.main.litere-mari .av { width: 34px; height: 34px; font-size: 16px; }
/* Pe telefon, pe ecranele Sarcini, banda „Ce e nou” nu împinge lista de numărat sub primul ecran: rămân titlul și butoanele
   (rezumatul și noutățile sunt la „Vezi tot”); „‹ Sarcini” e în bara de jos, iar ajutorul despre salvare, sub listă. */
@media (max-width: 599px) {
  body:has(.main.litere-mari) .versiune-bloc.rezumat-versiune .vb-t > p, body:has(.main.litere-mari) .versiune-bloc.rezumat-versiune ul { display: none; }
  body:has(.main.litere-mari) .versiune-bloc { padding: 10px 12px; gap: 8px; }
  body:has(.main.litere-mari) .versiune-bloc .vb-act .btn { min-height: 40px; }
}
/* un mesaj al inventarului poate apărea pe orice ecran (cifrele rămase pe calculator): tot 16 px */
.toast.inv, .toast.inv .btn.mic { font-size: 16px; }
.toast.inv a.btn.mic { flex: none; min-height: 34px; text-decoration: none; }