/* ============================================================
   PROFCEISS · pc-ui.css — sistemul vizual comun al instrumentelor

   DE CE exista fisierul asta:
   pana acum fiecare instrument isi scria propria paleta in <style>-ul lui.
   Auditul din 19 august 2026 a numarat 4 palete, 5 stive de fonturi,
   21 de rotunjiri diferite, 27 de retete de umbra si 75 de butoane cu
   style= scris direct in HTML. Un electrician care trecea de la buletinul
   de priza de pamant la dosarul de prosumator vedea doua programe.
   Aici traiesc valorile, o singura data. Instrumentul nu mai are voie sa
   scrie o culoare de mana; cere tokenul.

   INERT pe instrumentele inghetate: fisierul defineste doar tokenuri pe
   :root (nefolosite = fara efect) si clase prefixate .pc-. Regulile de
   element gol (body, input, h1) sunt toate sub .pc-ui, clasa pe care o
   pune pe <body> doar instrumentul migrat. Deci poate fi incarcat
   oriunde fara sa schimbe nimic acolo unde nu e cerut.

   Reperul a fost configurator-electrica: sobru, monocrom, contur subtire.
   Culoarea transmite informatie sau nu exista: albastru = actiunea
   principala, verde = confirmat, rosu = eroare, chihlimbar = atentionare.
   Decorul nu primeste culoare. Test: pagina tiparita alb-negru nu trebuie
   sa piarda niciun element si sa nu capete nicio pata neagra.
   ============================================================ */

:root{
  /* --- suprafete ------------------------------------------------ */
  --pc-bg:#e6edf4;          /* fundalul paginii */
  --pc-panel:#fff;          /* coala, cardul, bara */
  --pc-panel2:#f1f6fc;      /* fundal secundar: buton in repaus, rand de lista */
  --pc-line:#d2dce8;        /* despartitor: margine de card, linie intre randuri */
  --pc-line-2:#e7eef8;      /* despartitor slab, in interiorul unui card */
  /* Conturul unui CONTROL (camp, buton) e alt lucru decat un despartitor si are
     alt prag. WCAG 2.2, criteriul 1.4.11 (nivel AA) cere 3:1 fata de culoarea de
     langa el pentru "informatia vizuala necesara identificarii componentelor de
     interfata". Cu --pc-line campurile ieseau la 1.39 fata de alb - adica sub
     prag, nu doar palide. #7a8ba6 da 3.46 fata de alb si 3.18 fata de --pc-panel2.
     E token, nu regula: o regula in plus la nivel de instrument ar pierde in
     cascada in fata selectorului de baza .pc-ui input[type=text]. */
  --pc-line-field:#7a8ba6;

  /* --- text ----------------------------------------------------- */
  --pc-ink:#1d2b44;
  --pc-muted:#5d6b82;       /* explicatii, etichete, unitati de masura */

  /* --- culorile cu inteles. Nu se adauga altele. ----------------- */
  --pc-act:#205c90;         /* actiunea principala - albastrul siglei */
  --pc-act-l:#2a71ae;       /* aceeasi, capatul de sus al reliefului */
  --pc-act-d:#18496f;       /* aceeasi, apasata */
  --pc-act-bg:#e7eff7;      /* fundal slab pentru starea selectata */
  /* Verdele "confirmat" a coborat un pas, de la #3b7d1e la #376f1c: pe fundalul
     lui palid dadea 4.48, adica sub 4.5, si acolo textul e de 10.5px cu
     majuscule - nu se califica drept text mare. Acum da 5.37 pe fundal, 6.08 pe
     coala si 5.15 pe fundalul paginii. Acelasi ton, luat tot din sigla. */
  --pc-ok:#376f1c;          --pc-ok-bg:#eaf4e4;
  --pc-bad:#c0392b;         --pc-bad-bg:#fdecec;
  --pc-warn:#8a5a00;        --pc-warn-bg:#fdf1dc;

  /* --- marca ------------------------------------------------------
     Citite din profceiss-logo.svg, nu alese. Chihlimbarul si galbenul
     apar DOAR ca fundal cu cerneala inchisa deasupra (7.11 si 9.94) sau
     ca dunga de 3 px. Pe alb dau 2.00 si 1.43, deci ca text sau contur
     ar fi sub pragul de 3:1 din WCAG 1.4.11 - pe un telefon in soare,
     pe schela, pur si simplu nu se vad. */
  --pc-marca-navy:#00457e;
  --pc-marca-soare:#f9a630;
  --pc-marca-soare-l:#fdd456;

  /* --- carcasa: bara de sus --------------------------------------
     Singura suprafata inchisa din platforma. De aici vine viata, nu din
     pete de culoare pe carduri: e tehnica pe care IBM Carbon o numeste
     "high contrast moment", aplicata pe invelisul aplicatiei, nu pe
     continut. Coala ramane alba - documentul in lucru nu se coloreaza.
     Sigla NU sta pe bara, si nu intamplator: cuvantul PROFCEISS din
     profceiss-logo.svg e desenat chiar in #00457E si ar disparea. */
  --pc-shell:#00457e;
  --pc-shell-ink:#ffffff;
  --pc-shell-line:#7099b9;  /* 3.23 fata de bara - trece pragul de control */
  --pc-shell-mut:#c3d5e4;   /* text secundar pe bara: 6.48 fata de bleumarin */

  /* --- tipografie ------------------------------------------------
     O singura familie. Chakra Petch a ramas doar pe marca PROFCEISS
     (--pc-font-brand): un al doilea font pe titluri de sectiune facea
     interfata sa para de joc, nu de instrument de masura. */
  --pc-font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pc-font-brand:"Chakra Petch",var(--pc-font);
  --pc-fs:13px;             /* textul obisnuit si campurile */
  /* Marimea din campuri e token separat fiindca pe telefon trebuie sa creasca la
     16px (sub atat, Safari mareste singur pagina la focus). Se schimba tokenul,
     nu regula: o a doua regula in @media ar avea specificitate mai MICA decat
     selectorul de baza .pc-ui input[type=text] si ar pierde in cascada. */
  --pc-fs-input:13px;
  --pc-fs-s:12px;           /* butoane mici, note */
  --pc-fs-xs:11px;          /* eticheta de sectiune, majuscule */
  --pc-fs-h:20px;           /* titlul paginii */

  /* --- geometrie: trei rotunjiri, nu douazeci si una ------------- */
  --pc-r-s:6px;             /* control mic: buton mic, eticheta */
  --pc-r:9px;               /* implicit: buton, camp, rand */
  --pc-r-l:12px;            /* container: card, sectiune, modal */

  /* --- spatiere: scara de 4 ------------------------------------- */
  --pc-s1:4px; --pc-s2:8px; --pc-s3:12px; --pc-s4:16px; --pc-s5:24px;

  /* --- adancime: doua umbre, atat --------------------------------
     Una spune ca elementul sta pe pagina, cealalta ca sta peste ea. */
  --pc-sh:0 1px 3px rgba(29,43,68,.07);
  --pc-sh-pop:0 10px 30px rgba(20,35,60,.22);
  /* Inelul de focus urmeaza culoarea actiunii, nu o culoare scrisa de mana.
     Se tine ca trei numere fiindca rgba() are nevoie de canale separate, iar
     o culoare in hex nu se poate desface in CSS fara un al doilea token. */
  --pc-focus-rgb:32,92,144;
  --pc-focus:0 0 0 3px rgba(var(--pc-focus-rgb),.20);
}

/* ============================================================
   ZONA DE ADMINISTRARE
   Consolele (admin, admin-firma, login, instrumente, cumpara) au crescut cu
   verdele ca actiune, si asa raman. Se schimba doar nuanta: #1D9E75 dadea 3.39
   cu text alb, sub pragul de 4.5 din WCAG 1.4.3, chiar pe butonul cel mai
   apasat din platforma. #167959 pastreaza tonul (H=161, S=69%) si da 5.37.

   Verdele spune aici doua lucruri, si de-aia le desparte FORMA, nu culoarea:
   actiunea e plina, cu text alb; confirmarea e fundal palid cu text inchis
   (--pc-ok ramane #376f1c, alt ton - frunza, nu smarald). O nota confirmata si
   un buton de trimis nu se pot confunda pentru ca unul e umplut si celalalt nu.

   Se pune pe <body>, langa pc-ui. Proprietatile personalizate se mostenesc,
   deci nu e o chestiune de specificitate - de-aia merge acolo unde o regula in
   plus ar fi pierdut in cascada.
   ============================================================ */
.pc-consola{
  --pc-act:#167959;
  --pc-act-l:#1a8f69;
  --pc-act-d:#115f46;
  --pc-act-bg:#e7f4ef;
  --pc-focus-rgb:22,121,89;
}

/* ============================================================
   BAZA — doar sub .pc-ui, ca fisierul sa ramana inert in rest
   ============================================================ */
.pc-ui{
  margin:0;
  background:var(--pc-bg);
  color:var(--pc-ink);
  font-family:var(--pc-font);
  font-size:var(--pc-fs);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.pc-ui *{box-sizing:border-box}
.pc-ui h1{font-size:var(--pc-fs-h);font-weight:600;margin:0 0 var(--pc-s1);letter-spacing:-.01em}
.pc-ui h2{font-size:16px;font-weight:600;margin:0 0 var(--pc-s2)}
.pc-ui h3{font-size:14px;font-weight:600;margin:0 0 var(--pc-s2)}
.pc-ui a{color:var(--pc-act);text-decoration:none}
.pc-ui a:hover{text-decoration:underline}
.pc-ui label{font-size:var(--pc-fs-s);color:var(--pc-muted)}
.pc-ui hr{border:0;border-top:1px solid var(--pc-line-2);margin:var(--pc-s4) 0}

/* Campurile. Un singur contur (1px), o singura rotunjire, un singur padding.
   16px pe telefon: sub atat, Safari mareste singur pagina la focus. */
.pc-ui input[type=text],.pc-ui input[type=number],.pc-ui input[type=email],
.pc-ui input[type=tel],.pc-ui input[type=date],.pc-ui input[type=password],
.pc-ui input:not([type]),.pc-ui select,.pc-ui textarea{
  font-family:inherit;font-size:var(--pc-fs-input);color:var(--pc-ink);
  background:var(--pc-panel);
  border:1px solid var(--pc-line-field);border-radius:var(--pc-r);
  padding:8px 10px;width:100%;
  transition:border-color .12s,box-shadow .12s;
}
.pc-ui textarea{min-height:64px;resize:vertical}
.pc-ui input:focus,.pc-ui select:focus,.pc-ui textarea:focus{
  outline:0;border-color:var(--pc-act);box-shadow:var(--pc-focus);
}
.pc-ui input:disabled,.pc-ui select:disabled,.pc-ui textarea:disabled{
  background:var(--pc-panel2);color:var(--pc-muted);cursor:not-allowed;
}
.pc-ui input::placeholder,.pc-ui textarea::placeholder{color:#9aa7ba}
.pc-ui input[type=checkbox],.pc-ui input[type=radio]{width:auto;accent-color:var(--pc-act)}
@media (max-width:680px){
  :root{--pc-fs-input:16px}
}

/* ============================================================
   BUTONUL — o forma, patru stari. Neprefixat cu .pc-ui fiindca
   prefixul .pc- garanteaza deja ca nu se ciocneste de nimic.
   ============================================================ */
.pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--pc-font);font-size:var(--pc-fs-s);font-weight:600;
  color:var(--pc-ink);background:var(--pc-panel);
  border:1px solid var(--pc-line-field);border-radius:var(--pc-r);
  padding:8px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s;
}
.pc-btn:hover{background:var(--pc-panel2);border-color:var(--pc-act);color:var(--pc-act)}
.pc-btn:focus-visible{outline:0;box-shadow:var(--pc-focus)}
.pc-btn:disabled,.pc-btn[disabled]{opacity:.5;cursor:not-allowed}
.pc-btn:disabled:hover{background:var(--pc-panel);border-color:var(--pc-line);color:var(--pc-ink)}

/* Actiunea principala: plina, albastra, aceeasi ca .pc-tb-act din bara.
   Degradeul e de 6% pe aceeasi culoare - nu se vede ca degradeu, se vede ca
   relief. Singurul loc din platforma unde exista unul, si e acolo dintr-un motiv
   masurat: in studiul cu urmarirea privirii al Nielsen Norman Group (71 de
   oameni, 2017), interfetele cu semnale slabe de "aici se apasa" au cerut cu 22%
   mai mult timp si cu 25% mai multe fixatii ale privirii. Adancimea pe elementul
   pe care se apasa e ce s-a masurat ca ajuta; degradeul pe decor nu. */
.pc-btn.pc-act{background:linear-gradient(180deg,var(--pc-act-l),var(--pc-act));
  border-color:var(--pc-act-d);color:#fff;box-shadow:0 1px 2px rgba(20,50,90,.25)}
.pc-btn.pc-act:hover{background:var(--pc-act-d);border-color:var(--pc-act-d);color:#fff}

/* actiune distructiva: conturata, nu plina - nu concureaza cu principala */
.pc-btn.pc-danger{color:var(--pc-bad);border-color:#e6b8b8}
.pc-btn.pc-danger:hover{background:var(--pc-bad-bg);border-color:var(--pc-bad);color:var(--pc-bad)}

/* stare pornita (comutator, unealta aleasa) */
.pc-btn.pc-on{background:var(--pc-act-bg);border-color:var(--pc-act);color:var(--pc-act)}

.pc-btn.pc-sm{font-size:var(--pc-fs-xs);padding:5px 10px;border-radius:var(--pc-r-s);gap:5px}
.pc-btn.pc-lg{font-size:var(--pc-fs);padding:11px 20px}
.pc-btn.pc-full{width:100%}
.pc-btn svg{width:16px;height:16px;flex:none}
.pc-btn.pc-lg svg{width:18px;height:18px}

/* rand de butoane: principala in dreapta, ca peste tot in platforma */
.pc-btn-row{display:flex;gap:var(--pc-s2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--pc-s5)}
@media (max-width:680px){
  .pc-btn-row{flex-direction:column-reverse}
  .pc-btn-row .pc-btn{width:100%}
}

/* butonul-icoana curat (inchide, sterge rand, editeaza) */
.pc-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;flex:none;
  color:var(--pc-muted);background:transparent;
  border:1px solid transparent;border-radius:var(--pc-r-s);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.pc-icon-btn:hover{background:var(--pc-panel2);border-color:var(--pc-line);color:var(--pc-ink)}
.pc-icon-btn.pc-danger:hover{background:var(--pc-bad-bg);border-color:#e6b8b8;color:var(--pc-bad)}
.pc-icon-btn svg{width:17px;height:17px}

/* Marcajul declarativ <i data-pcic="..."> are nevoie de o marime proprie:
   sta si singur, nu doar in .pc-btn, iar un <i> gol nu are dimensiune. */
[data-pcic]{display:inline-flex;align-items:center;flex:none}
[data-pcic] svg{width:16px;height:16px}
.pc-btn [data-pcic] svg,.pc-icon-btn [data-pcic] svg{width:inherit;height:inherit}

/* ============================================================
   CONTAINERE
   ============================================================ */
.pc-card{
  background:var(--pc-panel);border:1px solid var(--pc-line);
  border-radius:var(--pc-r-l);padding:var(--pc-s4);
  box-shadow:var(--pc-sh);margin-bottom:var(--pc-s3);
}
/* sectiunea de formular: cadru mai slab decat cardul, ca sa nu se
   incaseteze foaia in cutii peste cutii */
.pc-sec{
  background:var(--pc-panel2);border:1px solid var(--pc-line-2);
  border-radius:var(--pc-r-l);padding:var(--pc-s4);margin-bottom:var(--pc-s3);
}
.pc-sec-h{
  font-size:var(--pc-fs-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pc-muted);
  margin:0 0 var(--pc-s3);
  display:flex;align-items:center;gap:var(--pc-s2);flex-wrap:wrap;
}
/* Eticheta de sectiune e cu majuscule mici si spatiate. Cand cineva pune un
   comutator sau un buton IN ea, acela mostenea majusculele si spatierea si se
   lateste - pe telefon a scos pagina din cadru. Controalele dinauntru revin la
   text normal si au voie sa treaca pe randul urmator. */
/* Scris cu :where() dintr-un motiv platit: e o RESETARE, deci nu are voie sa
   aiba greutate. In forma veche selectorul era (0,1,1) si batea orice clasa
   simpla a unui instrument - de-aia butonul "+ Adauga circuit" din
   buletin-izolatie ajunsese cu cerneala inchisa pe albastru plin, la 2.02.
   Cu :where() specificitatea e zero si castiga oricine are ceva de spus. */
:where(.pc-sec-h,.section-title) :where(label,button,input,select,a){
  text-transform:none;letter-spacing:normal;white-space:normal;color:var(--pc-ink);
}
.pc-sec-h label,.section-title label{font-size:var(--pc-fs-s);font-weight:600}
/* coala de lucru a instrumentelor de documentatie */
.pc-sheet{
  max-width:920px;margin:0 auto;background:var(--pc-panel);
  border:1px solid var(--pc-line);border-radius:var(--pc-r-l);
  padding:var(--pc-s5);box-shadow:var(--pc-sh);
}
@media (max-width:680px){ .pc-sheet{padding:var(--pc-s3);border-radius:0;border-left:0;border-right:0} }

/* camp cu eticheta deasupra */
.pc-field{display:grid;gap:var(--pc-s1);margin-bottom:var(--pc-s3)}
.pc-field > label{font-size:var(--pc-fs-s);color:var(--pc-muted)}
.pc-hint{font-size:var(--pc-fs-s);color:var(--pc-muted)}

/* ============================================================
   MESAJE — culoarea e singura informatie, deci ramane
   ============================================================ */
.pc-note{
  display:flex;gap:var(--pc-s2);align-items:flex-start;
  border:1px solid var(--pc-line);border-left:3px solid var(--pc-muted);
  background:var(--pc-panel2);color:var(--pc-ink);
  border-radius:var(--pc-r-s);padding:10px var(--pc-s3);
  font-size:var(--pc-fs-s);margin:var(--pc-s3) 0;
}
.pc-note svg{flex:none;width:17px;height:17px;margin-top:1px}
.pc-note.pc-ok{border-left-color:var(--pc-ok);background:var(--pc-ok-bg);color:#10603a}
.pc-note.pc-bad{border-left-color:var(--pc-bad);background:var(--pc-bad-bg);color:#8f2b20}
.pc-note.pc-warn{border-left-color:#b8860b;background:var(--pc-warn-bg);color:var(--pc-warn)}

/* eticheta de stare, in randuri de lista */
.pc-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--pc-fs-xs);font-weight:600;
  border:1px solid var(--pc-line);border-radius:999px;
  padding:2px 9px;color:var(--pc-muted);background:var(--pc-panel);
}
.pc-tag.pc-ok{color:var(--pc-ok);border-color:#b7ddc7;background:var(--pc-ok-bg)}
.pc-tag.pc-bad{color:var(--pc-bad);border-color:#e6b8b8;background:var(--pc-bad-bg)}
.pc-tag.pc-warn{color:var(--pc-warn);border-color:#e3cf9d;background:var(--pc-warn-bg)}

/* ============================================================
   MODAL
   ============================================================ */
.pc-overlay{
  position:fixed;inset:0;z-index:99000;
  background:rgba(20,32,52,.45);
  display:flex;align-items:center;justify-content:center;padding:var(--pc-s4);
}
.pc-modal{
  background:var(--pc-panel);border:1px solid var(--pc-line);
  border-radius:var(--pc-r-l);box-shadow:var(--pc-sh-pop);
  width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;
}
.pc-modal-h{
  display:flex;align-items:center;gap:var(--pc-s2);
  padding:var(--pc-s3) var(--pc-s4);border-bottom:1px solid var(--pc-line-2);
}
.pc-modal-h h2{margin:0;font-size:15px;font-weight:600;flex:1}
.pc-modal-b{padding:var(--pc-s4);overflow:auto;font-size:var(--pc-fs)}
.pc-modal-f{
  display:flex;gap:var(--pc-s2);justify-content:flex-end;
  padding:var(--pc-s3) var(--pc-s4);border-top:1px solid var(--pc-line-2);
}

/* ============================================================
   STARI GOALE si INDICATOR DE PAS
   ============================================================ */
.pc-empty{
  text-align:center;color:var(--pc-muted);
  padding:var(--pc-s5) var(--pc-s4);font-size:var(--pc-fs);
}
.pc-empty svg{width:34px;height:34px;opacity:.5;margin-bottom:var(--pc-s2)}
.pc-empty b{display:block;color:var(--pc-ink);font-size:14px;margin-bottom:var(--pc-s1)}

.pc-steps{display:flex;align-items:center;gap:var(--pc-s2);flex-wrap:wrap;margin-bottom:var(--pc-s4)}
.pc-step{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--pc-fs-s);color:var(--pc-muted);
  border:1px solid var(--pc-line);border-radius:999px;
  padding:5px 12px;background:var(--pc-panel);
}
.pc-step .pc-step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--pc-panel2);border:1px solid var(--pc-line);
  font-size:10px;font-weight:700;
}
/* pasul curent: plin, ca actiunea principala. Pasul facut: contur verde.
   Ambele raman distincte si pe alb-negru (plin vs gol, bifa vs cifra). */
.pc-step.pc-on{background:var(--pc-act);border-color:var(--pc-act);color:#fff}
.pc-step.pc-on .pc-step-n{background:rgba(255,255,255,.22);border-color:transparent;color:#fff}
.pc-step.pc-done{color:var(--pc-ok);border-color:#b7ddc7;background:var(--pc-ok-bg)}
.pc-step.pc-done .pc-step-n{background:transparent;border-color:#b7ddc7;color:var(--pc-ok)}

/* ============================================================
   BARA GLOBALA DE SUS
   Aspectul ei sta aici, cu restul aspectului. In topbar.js a ramas
   doar asezarea (pozitie fixa, sloturi, spatiul rezervat sub bara) -
   aia e treaba ei, culorile nu erau.
   Neprefixate cu .pc-ui: bara apare pe toate instrumentele, si pe cele
   nemigrate, si trebuie sa arate la fel peste tot.
   ============================================================ */
/* Pe bleumarin, actiunea principala e ALBA, nu chihlimbar. Chihlimbarul ar fi
   avut 4.89 fata de bara (alba are 9.76), dar motivul adevarat e altul: in restul
   platformei chihlimbarul inseamna "verifica valoarea asta". Daca ar sta si pe
   butonul de salvare, aceeasi culoare ar spune doua lucruri diferite. Regula care
   iese e simpla si tine pe orice fundal: actiunea principala e lucrul cu cel mai
   mare contrast de pe suprafata pe care sta - albastru plin pe alb, alb plin pe
   bleumarin. */
/* Selectorul e prefixat cu #pc-topbar dinadins. Butonul "Pagina principala" e
   un <a>, iar .pc-ui a{color:var(--pc-act)} are specificitate mai mare decat o
   singura clasa - deci lua albastrul paginii pe bara bleumarin, adica 1.5
   contrast, si arata dezactivat. A treia oara azi cand cascada ma prinde;
   de-aia aspectul barei se leaga acum de id-ul ei, nu de o clasa. */
#pc-topbar .pc-tb-btn,.pc-tb-btn{
  display:inline-flex;align-items:center;gap:7px;font:inherit;cursor:pointer;
  background:transparent;border:1px solid var(--pc-shell-line);color:var(--pc-shell-ink);
  border-radius:var(--pc-r);padding:6px 12px;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
#pc-topbar .pc-tb-btn:hover,.pc-tb-btn:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;text-decoration:none}
#pc-topbar .pc-tb-btn.pc-tb-act,.pc-tb-btn.pc-tb-act{background:#fff;border-color:#fff;color:var(--pc-shell);box-shadow:none}
#pc-topbar .pc-tb-btn.pc-tb-act:hover,.pc-tb-btn.pc-tb-act:hover{background:var(--pc-act-bg);border-color:var(--pc-act-bg);color:var(--pc-shell)}
.pc-tb-btn svg{width:16px;height:16px;flex:none}
.pc-tb-chip{
  display:inline-flex;align-items:center;gap:7px;font:inherit;
  background:rgba(255,255,255,.10);border:1px solid var(--pc-shell-line);color:var(--pc-shell-ink);
  border-radius:var(--pc-r);padding:5px 10px;max-width:44vw;
}
.pc-tb-chip svg{width:16px;height:16px;flex:none}
/* Continutul chipului de client ia culoarea barei. Ce e apasabil se distinge prin
   subliniere si opacitate, nu prin alta culoare - pe bleumarin nu mai incape o a
   doua culoare care sa treaca pragul, iar asa se citeste si tiparit alb-negru. */
.pc-cc-nume{color:inherit;text-decoration:underline;text-underline-offset:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22vw}
.pc-cc-nume:hover{color:inherit}
.pc-cc-act{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:inherit;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16vw}
.pc-cc-act:hover{opacity:1}
.pc-cc-gol{opacity:.66}

/* Dunga de soare, 3 px, in interiorul barei: nu acopera niciun text si nu cere
   niciun calcul de inaltime. Singurul degradeu decorativ din platforma, si e
   marca, nu ornament. */
#pc-topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--pc-marca-soare-l),var(--pc-marca-soare));
}

/* ============================================================
   FERESTRELE MICI ALE WIDGETURILOR COMUNE
   (intra in cont, schimba parola, salveaza in cloud). Neprefixate cu
   .pc-ui: apar peste orice pagina, si peste cele nemigrate.
   ============================================================ */
.pc-sb-fer{
  background:var(--pc-panel);border:1px solid var(--pc-line);border-radius:var(--pc-r-l);
  max-width:94vw;padding:18px;box-shadow:var(--pc-sh-pop);
  font:13px/1.5 var(--pc-font);color:var(--pc-ink);
}
.pc-sb-cap{display:flex;align-items:center;gap:var(--pc-s2);margin-bottom:var(--pc-s3)}
.pc-sb-cap b{flex:1;font-size:15px;font-weight:600}
.pc-sb-fer input[type=text],.pc-sb-fer input[type=password],.pc-sb-fer input[type=email],
.pc-sb-fer select,.pc-sb-fer textarea{
  font-family:inherit;font-size:var(--pc-fs-input);color:var(--pc-ink);background:var(--pc-panel);
  border:1px solid var(--pc-line-field);border-radius:var(--pc-r);padding:9px 10px;width:100%;
}
.pc-sb-fer input:focus,.pc-sb-fer select:focus{outline:0;border-color:var(--pc-act);box-shadow:var(--pc-focus)}
.pc-sb-cod{text-align:center;font:700 20px ui-monospace,Consolas,monospace !important;
  letter-spacing:8px;margin-bottom:8px}
.pc-sb-msg{font-size:var(--pc-fs-xs);min-height:16px;margin:8px 0}
.pc-sb-msg.pc-ok{color:var(--pc-ok)} .pc-sb-msg.pc-bad{color:var(--pc-bad)}

/* lista "Proiectele firmei" */
.pc-sb-proiect{display:flex;align-items:center;gap:6px;padding:var(--pc-s2);
  border:1px solid var(--pc-line);border-radius:var(--pc-r);margin-bottom:6px;background:var(--pc-panel)}
/* varianta unui coleg peste proiectul tau: se retrage si primeste o dunga
   chihlimbarie in stanga - acelasi semn ca la atentionari, si acelasi inteles
   ("uita-te la asta"), nu un fundal colorat care ar concura cu randul normal */
.pc-sb-var{margin-left:20px;border-left:3px solid var(--pc-marca-soare);background:var(--pc-warn-bg)}
.pc-sb-sub{color:var(--pc-muted);font-size:var(--pc-fs-xs)}
.pc-sb-cine{color:var(--pc-ok);font-weight:600}
.pc-sb-editat{color:var(--pc-warn);font-weight:600}
.pc-sb-blocat{display:inline-flex;color:var(--pc-line-field);padding:6px 9px;cursor:default}
.pc-sb-blocat svg{width:16px;height:16px}

/* ============================================================
   CARCASA CONSOLEI — bara laterala
   Platforma are o singura suprafata inchisa. La instrumente e bara de sus de
   44px; in administrare e bara laterala. Aceeasi culoare, alta geometrie: o
   bara de sus PESTE o bara laterala ar fi dat doua carcase suprapuse, exact ce
   s-a reparat la schema-monofilara.

   Sigla nu intra aici. profceiss-logo.svg e o sigla-cuvant de 387x101 si scrie
   PROFCEISS in #00457E - pe bleumarin dispare, iar strivita intr-un patrat de
   26px devine o pata. Bara scrie numele cu litere, in --pc-font-brand.
   ============================================================ */
/* Suprafata inchisa, ORICARE ar fi forma ei: bara laterala in console, bara de
   sus in hub, antetul cartonasului de autentificare. O pune pagina pe elementul
   ei, si primeste fundalul, cerneala SI regula pentru legaturi.

   Regula pentru legaturi nu e un moft: .pc-ui a{color:var(--pc-act)} are
   specificitatea (0,1,1), iar pe bleumarin culoarea de actiune da 1.82 - adica
   exact ce arata ca text dezactivat. S-a intamplat de patru ori: butonul
   "Pagina principala" din bara de sus, randurile <a> din bara laterala, iesirea
   din hub, si numele marcii. Selectorul de aici are tot (0,1,1) dar vine DUPA,
   deci castiga - la specificitate egala hotaraste ordinea in fisier. */
.pc-zona-shell{background:var(--pc-shell);color:var(--pc-shell-ink)}
.pc-zona-shell a,.pc-lat a{color:var(--pc-shell-ink)}

.pc-lat{
  background:var(--pc-shell);color:var(--pc-shell-ink);
  padding:16px 12px;display:flex;flex-direction:column;
}
.pc-lat-marca{padding:2px 6px 14px;margin-bottom:8px;border-bottom:1px solid var(--pc-shell-line)}
.pc-lat-marca b{font-family:var(--pc-font-brand);font-size:14px;letter-spacing:.6px;
  line-height:1.15;display:block}
.pc-lat-marca span{display:block;margin-top:3px;font-size:var(--pc-fs-xs);font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--pc-marca-soare)}

/* Selectorul e dublu (.pc-lat .pc-lat-nav) dintr-un motiv masurat, nu de stil:
   jumatate din randurile de navigatie sunt <a>, iar .pc-ui a{color:var(--pc-act)}
   are specificitate (0,1,1) si bate o singura clasa (0,1,0). Pe bleumarin,
   verdele de actiune da 1.82 - adica exact ce se vede ca "buton dezactivat".
   Doua clase fac (0,2,0) si castiga. Aceeasi greseala a fost prinsa deja o data,
   la bara de sus, cu butonul "Pagina principala". */
.pc-lat .pc-lat-nav,.pc-lat-nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--pc-s2);
  width:100%;text-align:left;background:none;border:0;border-radius:var(--pc-r-s);
  padding:8px 10px;font-family:var(--pc-font);font-size:var(--pc-fs);font-weight:500;
  color:var(--pc-shell-ink);cursor:pointer;text-decoration:none;
}
.pc-lat .pc-lat-nav:hover,.pc-lat-nav:hover{background:rgba(255,255,255,.10)}
/* Randul curent e ALB PLIN, nu o nuanta de bleumarin: pe un ecran de telefon in
   soare, doua albastre alaturate nu se despart. Alb pe bleumarin da 9.76. */
.pc-lat .pc-lat-nav.pc-on,.pc-lat-nav.pc-on{background:var(--pc-panel);color:var(--pc-shell);font-weight:600}
.pc-lat-nav:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.pc-lat-nav svg{width:16px;height:16px;flex:none}

.pc-lat-bd{background:var(--pc-marca-soare);color:#3a2600;font-size:var(--pc-fs-xs);
  font-weight:700;border-radius:99px;padding:1px 7px;flex:none}
.pc-lat-jos{margin-top:auto;padding-top:var(--pc-s3);border-top:1px solid var(--pc-shell-line);
  display:flex;flex-direction:column;gap:var(--pc-s2);
  font-size:var(--pc-fs-s);color:var(--pc-shell-mut);word-break:break-all}

/* Pe telefon bara laterala se culca: devine un rand orizontal care se deruleaza,
   nu un sertar care trebuie deschis ca sa vezi unde esti. */
@media (max-width:820px){
  /* Umplutura din dreapta e pentru clopotelul de notificari, care pluteste
     fixat in coltul din dreapta-sus si pe telefon cade exact peste bara. */
  .pc-lat{flex-direction:row;align-items:center;gap:var(--pc-s2);
    padding:8px 52px 8px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pc-lat-marca{border-bottom:0;padding:0 8px 0 0;margin:0;flex:none;
    border-right:1px solid var(--pc-shell-line)}
  .pc-lat-marca span{display:none}
  /* Selectorul e dublu si aici, obligatoriu: regula de baza e .pc-lat .pc-lat-nav
     (0,2,0), iar o regula dintr-un @media NU castiga prin faptul ca e intr-un
     @media - specificitatea se compara la fel. Cu o singura clasa, width:100%
     de sus ar fi ramas si randul curent s-ar fi intins peste toata bara.
     Aceeasi greseala, a treia oara: intai la marimea campurilor pe telefon. */
  .pc-lat .pc-lat-nav,.pc-lat-nav{width:auto;flex:none;white-space:nowrap}
  .pc-lat-jos{display:none}
}

/* ============================================================
   LA TIPARIRE
   Documentele oficiale se deseneaza cu pdf-lib, nu din pagina asta;
   aici e doar tiparirea de curtoazie a ecranului.
   ============================================================ */
@media print{
  .pc-ui{background:#fff}
  .pc-btn,.pc-btn-row,.pc-icon-btn,.pc-overlay{display:none !important}
  .pc-card,.pc-sec,.pc-sheet{box-shadow:none;border-color:#bbb}
}
