/* ---------------------------------------------------------------------------
   WorkGrid — pontaj
   Paleta: navy #0F172A pentru antet si tema inchisa, albastru #2563EB pentru
   actiuni, cyan #06B6D4 pentru accente, alb #F8FAFC pentru suprafete si text,
   gri #64748B pentru textele secundare.
   Verde = luna deschisa, chihlimbar = luna validata, rosu = refuz.
   --------------------------------------------------------------------------- */

:root{
  --ground:#EEF2F8; --surface:#FFFFFF; --surface2:#F8FAFC; --line:#CBD5E1; --line-soft:#E2E8F0;
  --ink:#0F172A; --ink2:#334155; --muted:#64748B;
  --accent:#2563EB; --accent-ink:#1D4ED8; --accent-soft:#DBEAFE;
  --cyan:#06B6D4; --cyan-bright:#22D3EE;
  --open:#047857; --open-soft:#D1FAE5;
  --lock:#B45309; --lock-soft:#FEF3C7;
  --danger:#DC2626; --danger-soft:#FEE2E2; --danger-btn:#DC2626;
  --on-bg:#CFFAFE; --on-ink:#155E75;
  --we:#E2E8F0;
  --btn-ink:#F8FAFC;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 12px 32px -18px rgba(15,23,42,.45);
  --h-antet:28px;

  /* Bara de sus e navy in ambele teme. Controalele din ea isi iau paleta de
     mai jos, din .topbar, ca sa nu fie nevoie de reguli separate pentru
     fiecare buton, pastila si indicator. */
  --chrome:#0F172A; --chrome-linie:#0B1220;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F172A; --surface:#1E293B; --surface2:#172033; --line:#334155; --line-soft:#293548;
    --ink:#F8FAFC; --ink2:#CBD5E1; --muted:#94A3B8;
    --accent:#60A5FA; --accent-ink:#BFDBFE; --accent-soft:#1E3A8A;
    --cyan:#22D3EE; --cyan-bright:#67E8F9;
    --open:#34D399; --open-soft:#064E3B;
    --lock:#FBBF24; --lock-soft:#422006;
    --danger:#F87171; --danger-soft:#450A0A; --danger-btn:#B91C1C;
    --on-bg:#164E63; --on-ink:#A5F3FC;
    --we:#1B2740;
    --btn-ink:#0F172A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.85);
    --chrome:#0B1120; --chrome-linie:#020617;
  }
}
:root[data-theme="dark"]{
  --ground:#0F172A; --surface:#1E293B; --surface2:#172033; --line:#334155; --line-soft:#293548;
  --ink:#F8FAFC; --ink2:#CBD5E1; --muted:#94A3B8;
  --accent:#60A5FA; --accent-ink:#BFDBFE; --accent-soft:#1E3A8A;
  --cyan:#22D3EE; --cyan-bright:#67E8F9;
  --open:#34D399; --open-soft:#064E3B;
  --lock:#FBBF24; --lock-soft:#422006;
  --danger:#F87171; --danger-soft:#450A0A; --danger-btn:#B91C1C;
  --on-bg:#164E63; --on-ink:#A5F3FC;
  --we:#1B2740;
  --btn-ink:#0F172A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.85);
  --chrome:#0B1120; --chrome-linie:#020617;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Barlow Condensed","Barlow","Segoe UI",sans-serif; margin:0; text-wrap:balance}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* --- autentificare ------------------------------------------------------- */
.login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow); padding:28px; display:flex; flex-direction:column; gap:16px;
}
.login-brand{display:flex; align-items:center; gap:9px; color:var(--accent);
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:16px;
  letter-spacing:.08em; text-transform:uppercase}
.login-brand .mark{width:22px; height:22px}
.login-card h1{font-size:38px; font-weight:600; text-transform:uppercase; line-height:1; margin-bottom:4px}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.login-card input{
  font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:5px;
  background:var(--surface); color:var(--ink);
}
.login-card label.check{flex-direction:row; align-items:center; gap:9px; cursor:pointer;
  font-size:13.5px; color:var(--ink2)}
.login-card label.check input{width:17px; height:17px; accent-color:var(--accent); flex:0 0 auto}
.login-link{align-self:center; font-size:13px; color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent}
.login-link:hover{border-bottom-color:var(--accent)}
.login-error{margin:0; padding:9px 12px; background:var(--danger-soft); color:var(--danger);
  border-radius:5px; font-size:13.5px}

/* --- cadru aplicatie ----------------------------------------------------- */
.app-root{display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}
.boot{padding:60px 20px; text-align:center; color:var(--muted)}

/* Bara de sus e navy in ambele teme. Aici se rescriu culorile de baza, o
   singura data: butoanele, pastilele si indicatorii dinauntru le mostenesc,
   fara reguli separate pentru fiecare. */
.topbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 16px;
  background:var(--chrome); border-bottom:1px solid var(--chrome-linie);
  z-index:40; flex:0 0 auto;

  --surface:#1E293B; --surface2:#172033; --line:#334155; --line-soft:#293548;
  --ink:#F8FAFC; --ink2:#CBD5E1; --muted:#94A3B8;
  --accent:#2563EB; --accent-ink:#93C5FD; --accent-soft:#1E3A8A;
  --open:#34D399; --open-soft:#064E3B;
  --lock:#FBBF24; --lock-soft:#422006;
  --danger:#F87171; --danger-soft:#450A0A; --danger-btn:#B91C1C;
  --on-bg:#164E63; --on-ink:#A5F3FC;
  --btn-ink:#F8FAFC;

  color:var(--ink);
}
/* Marca poarta accentul cyan: albastrul actiunilor nu se citeste pe navy. */
.brand{display:inline-flex; align-items:center; gap:7px; color:var(--cyan-bright);
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:17px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.brand .mark{width:19px; height:19px}
.brand-sub{margin-left:7px; padding-left:8px; border-left:1px solid var(--line);
  font-weight:500; font-size:15px; color:var(--muted)}
.sep{width:1px; height:20px; background:var(--line)}
.month-title{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:20px;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}
.spacer{flex:1 1 20px}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.pill.open{background:var(--open-soft); color:var(--open); border:1px solid var(--open)}
.pill.lock{background:var(--lock-soft); color:var(--lock); border:1px solid var(--lock)}
.pill.reopened{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.pill.plain{background:var(--surface2); color:var(--muted); border:1px solid var(--line)}
.dotp{width:7px; height:7px; border-radius:50%; background:var(--open)}

.sync{display:inline-flex; align-items:baseline; gap:6px; font-size:12.5px; color:var(--muted)}
.sync.ok{color:var(--open)}
.sync.pending{color:var(--muted)}
.sync.error{color:var(--danger)}
.sync.stale{color:var(--lock)}
.sync small{font-size:11.5px; color:var(--muted)}

.btn{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:15px; letter-spacing:.07em;
  text-transform:uppercase; padding:8px 15px; border-radius:4px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--btn-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{color:var(--ink2)}
.btn.cont{display:inline-flex; align-items:center; gap:6px; max-width:210px}
.btn.cont .cdn{width:11px; height:11px; flex:0 0 auto; opacity:.7}
.btn.danger{background:var(--danger-btn); border-color:var(--danger-btn); color:#fff}
.btn.redo{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line))}
.btn.redo:hover{border-color:var(--danger); background:var(--danger-soft)}
.dialog-body label.check{flex-direction:row; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:13.5px; color:var(--ink); background:var(--surface2); padding:11px 13px; border-radius:5px}
.dialog-body label.check input{width:17px; height:17px; accent-color:var(--danger);
  flex:0 0 auto; margin-top:1px}
.btn.install{background:var(--open-soft); border-color:var(--open); color:var(--open)}
.btn.warn{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}
.btn[hidden]{display:none}
.tot-badge{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:600; color:var(--on-ink); background:var(--on-bg);
  padding:3px 9px; border-radius:4px; white-space:nowrap}
.tot-badge.peste{color:var(--danger); background:var(--danger-soft);
  box-shadow:inset 0 0 0 1px var(--danger)}
.tot-badge.multi{color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.stamp{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); letter-spacing:.05em}

/* --- banda de abonament -------------------------------------------------- */
/* Se arata doar cand abonamentul e pe terminate sau s-a terminat. */
.abonament{flex:0 0 auto; padding:9px 16px; font-size:13.5px; line-height:1.45;
  border-bottom:1px solid var(--line)}
.abonament b{font-weight:600}
.abonament.gata{background:var(--danger-soft); color:var(--danger)}
.abonament.aproape{background:var(--lock-soft); color:var(--lock)}

/* --- grila de pontaj ----------------------------------------------------- */
/* Singura zonă care derulează. De aici vine faptul că antetul cu zilele și
   coloana cu numele rămân fixe, și pe telefon. */
.grid-wrap{flex:1 1 auto; min-height:0; overflow:auto; background:var(--surface);
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
table.pontaj{border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px}
.pontaj th,.pontaj td{border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  padding:0; text-align:center; white-space:nowrap}
/* Inaltimea primului rand de antet: al doilea se aseaza exact sub el.
   Padding-ul vertical este zero peste tot, ca inaltimea sa fie previzibila. */
.pontaj thead th{background:var(--surface2); color:var(--muted); font-weight:500;
  font-family:"IBM Plex Mono",monospace; font-size:11px; line-height:1;
  padding-top:0; padding-bottom:0; height:var(--h-antet);
  position:sticky; top:0; z-index:5}
.pontaj thead tr.dow th{top:var(--h-antet); height:19px; font-size:10px; letter-spacing:.06em}
.pontaj th.c-name{position:sticky; left:0; z-index:6; background:var(--surface2); text-align:left;
  padding:7px 10px 7px 26px; min-width:200px; font-family:"IBM Plex Sans",sans-serif; font-size:13px;
  color:var(--ink); font-weight:500}
.pontaj thead th.c-name{z-index:7; padding:0 10px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pontaj tbody th.c-name{background:var(--surface); border-right:1px solid var(--line)}
.c-prog{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted);
  padding:0 8px !important; min-width:66px; text-align:left}
.pontaj td.d,.pontaj th.d{min-width:28px; width:28px; font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums}
.pontaj td.d{color:var(--muted); padding:6px 0; cursor:cell}
.pontaj th.we{background:var(--we)}
/* Gri pe gri se citeste greu: capul zilelor de weekend merge cu o treapta mai inchis. */
.pontaj thead th.we{color:var(--ink2)}
.pontaj td.d.we{background:var(--we)}
.pontaj td.d.on{background:var(--on-bg); color:var(--on-ink); font-weight:600}
.pontaj td.d.code{background:var(--lock-soft); color:var(--lock); font-weight:600}
/* In weekend, culoarea aleasa se vede pe toata coloana, si acolo unde sunt
   trecute ore sau un cod. Textul isi pastreaza culoarea, ca sa se distinga. */
.pontaj td.d.on.we{background:var(--we)}
.pontaj td.d.code.we{background:var(--we)}
.pontaj td.d.today{box-shadow:inset 0 0 0 1px var(--accent)}
/* aceeasi persoana, doua ture in aceeasi zi */
.pontaj td.d.conflict{box-shadow:inset 0 0 0 2px var(--danger); color:var(--danger)}
.pontaj td.d.on.conflict{background:var(--danger-soft)}
.pontaj td.d.saving{opacity:.55}
.is-locked .pontaj td.d{cursor:default}
.c-tot{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:600;
  padding:0 10px !important; min-width:56px; background:var(--surface2); border-right:0 !important}
.pontaj thead th.c-tot{font-weight:500}

tr.sec td{text-align:left; background:var(--accent-soft); border-right:0; padding:8px 10px;
  border-top:1px solid var(--line)}
tr.sec .c-tot{background:var(--accent-soft); color:var(--accent-ink)}
/* Randul sectiunii e o banda albastra: si textul marunt din el merge pe cerneala
   albastra, nu pe griul secundar, care s-ar citi greu acolo. */
tr.sec .sec-meta{color:var(--accent-ink)}
tr.post td{text-align:left; background:var(--surface2); border-right:0; padding:6px 10px 6px 26px}
tr.tot td{text-align:left; background:var(--surface2); border-right:0; padding:9px 10px;
  border-top:1px solid var(--line); font-family:"Barlow Condensed",sans-serif; font-weight:600;
  font-size:16px; letter-spacing:.07em; text-transform:uppercase}
tr.tot .c-tot{font-size:14px; border-top:1px solid var(--line)}

.row-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lbl{font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:6px;
  border:0; background:none; color:inherit; padding:1px 0; cursor:text}
tr.sec .lbl{font-size:18px}
tr.post .lbl{font-size:16px}
.can-edit .lbl{border-bottom:1px dashed var(--muted)}
.lbl .pen{width:12px; height:12px; color:var(--muted); opacity:.8}
.is-locked .lbl .pen{display:none}
.name-input{font:inherit; font-family:"Barlow Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; padding:1px 5px; border:0;
  outline:2px solid var(--accent); border-radius:2px; background:var(--surface); color:var(--ink)}
tr.sec .name-input{font-size:18px}
tr.post .name-input{font-size:16px}

.meta{display:inline-flex; align-items:center; gap:7px}
.ctl{display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; letter-spacing:.05em; color:var(--ink2); background:var(--surface);
  border:1px dashed var(--line); border-radius:3px; padding:2px 7px; cursor:pointer}
.ctl .pen,.ctl .cdn{width:10px; height:10px; color:var(--muted)}
.ctl.und{border:0; border-bottom:1px dashed var(--line); border-radius:0; padding:1px 0;
  background:none; color:var(--muted)}
.ctl.ro{border:0; background:none; padding:2px 0; cursor:default; color:var(--muted)}
.is-locked .ctl{border:0; background:none; padding:0; cursor:default; color:var(--muted)}
.is-locked .ctl .pen,.is-locked .ctl .cdn{display:none}
.eticheta-ro{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:2px 7px}
tr.post.doar-vede td{background:var(--surface)}
.pontaj td.d.ro{cursor:default}
.sec-meta,.post-meta-text{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:var(--muted); letter-spacing:.05em}

.del{display:inline-flex; align-items:center; padding:2px; border:0; background:none;
  color:var(--muted); opacity:.55; cursor:pointer; border-radius:3px}
.del:hover{opacity:1; color:var(--danger); background:var(--danger-soft)}
.del svg{width:13px; height:13px}
.is-locked .del{display:none}

.nm-wrap{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* meniu de selectie (program, angajati) */
.menu{position:fixed; z-index:60; min-width:230px; max-height:320px; overflow:auto; padding:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:1px}
.menu .mh{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:5px 9px 4px}
.mi{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:7px 9px;
  border:0; background:none; border-radius:3px; font-family:"IBM Plex Mono",monospace;
  font-size:12px; color:var(--ink2); text-align:left; cursor:pointer; width:100%}
.mi:hover{background:var(--surface2)}
.mi.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.mi i{font-style:normal; color:var(--muted); font-family:"IBM Plex Sans",sans-serif;
  font-size:11px; letter-spacing:0}

/* editorul de celula */
.cell-input{position:absolute; z-index:30; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  font-weight:600; text-align:center; padding:0; border:0; outline:2px solid var(--accent);
  background:var(--surface); color:var(--ink); border-radius:2px}

/* --- bare de jos --------------------------------------------------------- */
.addbar{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 16px;
  border-top:1px solid var(--line); background:var(--surface); flex:0 0 auto}
.chip{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:4px; border:1px dashed var(--accent);
  background:transparent; color:var(--accent); cursor:pointer}
.chip:hover{background:var(--accent-soft)}
.addbar .hint{font-size:12px; color:var(--muted); margin-left:6px}

.legend{display:flex; flex-wrap:wrap; gap:8px 20px; padding:10px 16px; border-top:1px solid var(--line);
  background:var(--surface2); font-size:12.5px; color:var(--muted); flex:0 0 auto}
.legend span{display:inline-flex; align-items:center; gap:7px}
.sw{width:14px; height:14px; border-radius:3px; border:1px solid var(--line)}
.sw.on{background:var(--on-bg); border-color:var(--on-ink)}
.sw.code{background:var(--lock-soft); border-color:var(--lock)}
.sw.we{background:var(--we)}

/* --- panouri laterale ---------------------------------------------------- */
.drawer{position:fixed; inset:0 0 0 auto; width:min(430px,100%); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:-20px 0 50px -30px rgba(0,0,0,.6);
  z-index:70; display:flex; flex-direction:column}
.drawer-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--surface2)}
.drawer-head h2{font-size:19px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; flex:1}
.drawer-body{overflow:auto; flex:1}
.row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft);
  width:100%; border-left:0; border-right:0; border-top:0; background:none; text-align:left; cursor:pointer}
.row:hover{background:var(--surface2)}
.row .nm{font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; flex:1; color:var(--ink)}
.row .sub{display:block; font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--muted)}
.row.is-current{background:var(--accent-soft)}
/* Text simplu intr-un panou lateral: nu foloseste grila randurilor de jurnal. */
.drawer-nota{padding:13px 16px; border-bottom:1px solid var(--line-soft);
  font-size:13px; color:var(--ink2); line-height:1.55}
.drawer-nota:last-child{border-bottom:0}
.drawer-nota strong{color:var(--ink)}

.row-nume{flex:1 1 auto; min-width:0; display:flex; text-align:left; border:0;
  background:none; padding:0; cursor:pointer; font:inherit}
.row.inactiv{opacity:.55}
.row.inactiv .nm{text-decoration:line-through}
.dialog-body .ajutor{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5}

.log-item{display:grid; grid-template-columns:88px 1fr; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--line-soft); font-size:13.5px}
.log-item time{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); line-height:1.45}
.log-item .who{color:var(--muted); font-size:11.5px}
.chg{font-family:"IBM Plex Mono",monospace; font-size:12px}
.chg .old{color:var(--muted); text-decoration:line-through}
.chg .new{color:var(--on-ink); background:var(--on-bg); padding:1px 5px; border-radius:3px; font-weight:600}
.log-item.validate,.log-item.reopen{background:var(--lock-soft)}
.log-item.validate .summary{color:var(--lock); font-weight:600}

/* --- setari -------------------------------------------------------------- */
.setari{display:flex; flex-direction:column}
.setari fieldset{border:0; border-bottom:1px solid var(--line-soft); margin:0;
  padding:16px; display:flex; flex-direction:column; gap:12px}
.setari legend{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:16px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding:0 0 2px}
.setari label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted)}
.setari label.check{flex-direction:row; align-items:center; gap:9px; cursor:pointer;
  font-size:13.5px; color:var(--ink)}
.setari label.check input{width:17px; height:17px; accent-color:var(--accent); flex:0 0 auto}
.setari input,.setari select{font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink)}
.setari .doua{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.setari .ajutor{margin:0; font-size:12px; color:var(--muted); line-height:1.45}
.setari .alt-program{display:flex; flex-direction:column; gap:10px; padding:12px;
  background:var(--surface2); border-radius:5px}
.setari .alt-program[hidden]{display:none}
.culoare-rand{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.culoare-rand input[type="color"]{width:52px; height:34px; padding:2px; cursor:pointer}
.culoare-cod{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.culoare-proba{display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.culoare-proba i{display:flex; align-items:center; justify-content:center; width:26px; height:30px;
  font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted);
  background:var(--surface); border-right:1px solid var(--line-soft)}
.culoare-proba i:last-child{border-right:0}
.nuante{display:flex; flex-wrap:wrap; gap:7px}
.nuanta{width:30px; height:30px; border-radius:5px; border:1px solid var(--line); cursor:pointer;
  padding:0}
.nuanta:hover{border-color:var(--accent); transform:scale(1.06)}

.setari-jos{padding:16px; position:sticky; bottom:0; background:var(--surface);
  border-top:1px solid var(--line)}
.setari-jos .btn{width:100%}

/* --- dialoguri ----------------------------------------------------------- */
.veil{position:fixed; inset:0; background:rgba(9,12,28,.62); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:80}
.dialog{background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55); max-width:540px; width:100%; max-height:90dvh;
  display:flex; flex-direction:column}
.dialog-head{padding:18px 22px 13px; border-bottom:1px solid var(--line-soft)}
.d-kick{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lock)}
.dialog-head h3{font-size:26px; font-weight:600; text-transform:uppercase; margin-top:4px}
.dialog-body{padding:16px 22px; display:flex; flex-direction:column; gap:12px; font-size:14px;
  color:var(--ink2); overflow:auto}
.dialog-body p{margin:0}
.dialog-body ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px}
.dialog-body strong{color:var(--ink)}
.dialog-body input,.dialog-body select{font:inherit; padding:9px 11px; border:1px solid var(--line);
  border-radius:5px; background:var(--surface); color:var(--ink); width:100%}
.dialog-body label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.warnbox{background:var(--lock-soft); border-left:3px solid var(--lock); padding:10px 13px;
  font-size:13.5px; color:var(--ink)}
.errbox{background:var(--danger-soft); border-left:3px solid var(--danger); padding:10px 13px;
  font-size:13.5px; color:var(--ink)}
.actualizare{padding:14px 16px; border-bottom:1px solid var(--line-soft)}
.actualizare:last-child{border-bottom:0}
.act-cap{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.act-cap time{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted);
  letter-spacing:.04em; white-space:nowrap}
.act-cap h3{font-family:"Barlow Condensed",sans-serif; font-size:18px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin:0}
.actualizare ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.actualizare li{display:flex; gap:9px; align-items:baseline; font-size:13.5px;
  color:var(--ink2); line-height:1.5}
.act-tip{flex:0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:3px;
  min-width:66px; text-align:center}
.act-tip.nou{background:var(--open-soft); color:var(--open)}
.act-tip.schimbat{background:var(--accent-soft); color:var(--accent-ink)}
.act-tip.reparat{background:var(--lock-soft); color:var(--lock)}

.acces{border:1px solid var(--line); border-radius:6px; overflow:hidden}
.acces-cap{padding:9px 13px; background:var(--surface2); border-bottom:1px solid var(--line-soft);
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.acc-linie{display:flex; flex-direction:row !important; align-items:center; gap:0;
  padding:7px 13px; font-size:13.5px; color:var(--ink2)}
.acc-linie input{width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer}
.acc-linie b{font-weight:600; color:var(--ink)}
.acc-nume{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-bif{flex:0 0 62px; display:flex; justify-content:center; margin:0; padding:0; cursor:pointer}
.acc-col{flex:0 0 62px; text-align:center; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.acc-antet{padding-top:9px; padding-bottom:5px; background:var(--surface2);
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:2}
.acc-post input:disabled{opacity:.5; cursor:not-allowed}
.acc-tot{border-bottom:1px solid var(--line-soft); background:var(--accent-soft)}
.acc-arbore{max-height:260px; overflow:auto}
.acc-arbore[hidden]{display:none}
.acc-sectiune{border-bottom:1px solid var(--line-soft)}
.acc-sectiune:last-child{border-bottom:0}
.acc-post{font-size:13px}
.acc-post .acc-nume{padding-left:20px; color:var(--muted)}
.acces .ajutor{margin:0; padding:10px 13px; font-size:12px; color:var(--muted);
  background:var(--surface2); border-top:1px solid var(--line-soft); line-height:1.45}

.dialog-foot{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; padding:14px 22px 18px;
  background:var(--surface2); border-top:1px solid var(--line-soft)}

/* --- mesaje scurte ------------------------------------------------------- */
.toast{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:8px;
  max-width:min(420px, calc(100vw - 36px))}
.toast > div{background:var(--ink); color:var(--ground); padding:10px 14px; border-radius:4px;
  font-size:13px; box-shadow:var(--shadow); animation:rise .18s ease-out}
.toast > div.err{background:var(--danger); color:#FFF4F2}
@keyframes rise{from{transform:translateY(6px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){.toast > div{animation:none}}

@media (max-width:720px){
  /* Legenda pe un singur rând, derulabilă, ca să rămână loc pentru grilă. */
  .legend{flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; gap:0 18px; padding:8px 10px}
  .legend span{flex:0 0 auto}
  .addbar{padding:8px 10px}
  .topbar{padding:9px 10px; gap:8px}
  .brand-sub{display:none}
  .btn{font-size:13px; padding:7px 11px}
  .pontaj th.c-name{min-width:170px}
  .log-item{grid-template-columns:76px 1fr}
}