@import url(/fonts/fonturi.css);

/* Tokenuri: valori brute → roluri. Componentele folosesc doar rolurile.
   Roșul e doar pentru probleme reale; acțiunile sunt portocaliu închis (#C2410C, 5,2:1 pe alb).
   O stare nu se arată doar prin culoare: are mereu și un cuvânt sau un semn. */
:root {
  --ardezie-900: #0F172A; --ardezie-800: #1E293B; --ardezie-700: #334155; --ardezie-600: #475569;
  --ardezie-400: #94A3B8; --ardezie-300: #CBD5E1; --ardezie-200: #E2E8F0; --ardezie-100: #F1F5F9; --ardezie-50: #F8FAFC;
  --portocaliu-700: #C2410C; --portocaliu-800: #9A3412; --portocaliu-600: #EA580C; --portocaliu-400: #FB923C;
  --portocaliu-100: #FFEDD5; --portocaliu-50: #FFF7ED;
  --verde-700: #15803D; --verde-100: #DCFCE7; --verde-900: #14532D;
  --rosu-700: #B91C1C; --rosu-100: #FEE2E2; --rosu-50: #FEF2F2; --rosu-900: #7F1D1D;

  --fundal: var(--ardezie-50);
  --card: #FFFFFF;
  --text: var(--ardezie-900);
  --slab: var(--ardezie-600);
  --linie: var(--ardezie-300);
  --linie-fina: var(--ardezie-200);
  --meniu: var(--ardezie-800);
  --selectat: var(--ardezie-800);
  --actiune: var(--portocaliu-700);
  --actiune-apasat: var(--portocaliu-800);
  --actiune-text: #FFFFFF;
  --progres: var(--portocaliu-600);
  --ok: var(--verde-700);
  --problema: var(--rosu-700);

  --font-titlu: Lexend, 'Source Sans 3', system-ui, sans-serif;
  --font-text: 'Source Sans 3', system-ui, sans-serif;
  --raza: .625rem;

  font-family: var(--font-text);
  color: var(--text);
  background: var(--fundal);
}

body { margin: 0; background: var(--fundal); }
/* „hidden” câștigă mereu, chiar și peste display: flex/grid de mai jos */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-titlu); font-weight: 600; }
h1 { font-size: 1.75rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; color: var(--slab); margin-top: 1.5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cifre { font-variant-numeric: tabular-nums; }

button, input, select { font: inherit; color: var(--text); }
button {
  font-weight: 600; font-size: 1rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--raza);
  border: 1px solid var(--linie); background: var(--card); cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
button:hover:not(:disabled) { border-color: var(--ardezie-400); }
button:disabled { cursor: not-allowed; opacity: .6; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--portocaliu-600); outline-offset: 2px;
}
button[aria-pressed="true"] { border: 2px solid var(--selectat); }
.actiune { background: var(--actiune); border-color: var(--actiune); color: var(--actiune-text); }
.actiune:hover:not(:disabled) { background: var(--actiune-apasat); border-color: var(--actiune-apasat); }
a { color: var(--actiune); }
a:hover { color: var(--actiune-apasat); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

#mesaj { min-height: 1.5rem; font-weight: 600; }
#mesaj.ok { color: var(--ok); }
#mesaj.problema { color: var(--problema); }

/* ---------- Birou ---------- */
header {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--card); border-bottom: 1px solid var(--linie-fina);
}
main { padding: 1rem; max-width: 96rem; margin: 0 auto; }
label { display: block; margin: 1rem 0 .5rem; }
.ingust { max-width: 26rem; }
form label { display: grid; gap: .25rem; font-weight: 600; font-size: .95rem; }
input:not([type]), input[type="password"], input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], select {
  font-size: 1rem; height: 2.75rem; box-sizing: border-box; border-radius: var(--raza);
  border: 1px solid var(--linie); background: var(--card); padding: 0 .75rem; font-weight: 400;
}
input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--selectat); }
input[type="file"] { font-size: 1rem; border: 0; padding: .5rem 0; }
input.numar { width: 6rem; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; background: var(--card); margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ardezie-100); }
th { font-size: .8rem; color: var(--slab); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
td button { min-height: 2.25rem; font-size: .9rem; padding: 0 .75rem; }
.inline { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.inline label { margin: 0; }
.secret {
  background: var(--card); border: 2px solid var(--selectat); border-radius: var(--raza); padding: 1rem; margin: 1rem 0;
  overflow-wrap: anywhere;
}
.secret strong { font-family: var(--font-titlu); font-size: 2rem; letter-spacing: .3rem; }
.slab { color: var(--slab); }
ul { padding-left: 1.25rem; }
.ruta { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; padding: .75rem 1rem; margin: .75rem 0; }
.ruta ol { margin: .5rem 0; }
.ruta .inline { margin-top: .5rem; }
.ruta table { margin: .5rem 0; }
details { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; padding: .75rem 1rem; margin: 1rem 0; }
summary { cursor: pointer; font-weight: 600; min-height: 2rem; }
tr.cu-eroare td:last-child { color: var(--problema); }
tr.cu-eroare td:nth-child(4) { color: var(--problema); font-weight: 600; }
tr.detalii td { background: var(--ardezie-100); }
.unelte button, button.mic { min-height: 2.25rem; font-size: .875rem; padding: 0 .6rem; margin: .1rem .15rem; }
li .unelte button { min-height: 2rem; }
.inactiv, tr.inactiv td { color: var(--slab); }
label.bifa { display: flex; gap: .6rem; align-items: center; margin: .75rem 0; font-weight: 400; }
label.bifa input[type="checkbox"] { flex: none; }
/* tabel cu multe coloane: pe ecran îngust derulează în cutia lui, nu toată pagina */
.tabel-lat { overflow-x: auto; }
.tabel-lat td { white-space: nowrap; }
.tabel-lat td:last-child { white-space: normal; min-width: 9rem; }

/* ---------- Tableta (mănuși, ecran de 10–12 inch, lumină de hală) ---------- */
body.tableta { background: var(--ardezie-100); }
.tableta .bara {
  height: 5.5rem; box-sizing: border-box; padding: 0 2rem; background: var(--meniu); color: var(--ardezie-50);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0;
}
.tableta .bara-stanga { display: flex; align-items: center; gap: 1rem; }
.tableta .bara-titlu { font-family: var(--font-titlu); font-weight: 600; font-size: 1.375rem; }
.tableta .bara-sub { font-size: 1rem; color: var(--ardezie-300); }
.tableta .bara-ceas { display: flex; flex-direction: column; align-items: flex-end; }
.tableta #ceas { font-family: var(--font-titlu); font-weight: 600; font-size: 2.25rem; font-variant-numeric: tabular-nums; }
.tableta .bara-avertizare { color: var(--portocaliu-400); font-weight: 600; }
.tableta .inapoi-bara {
  width: 3.75rem; height: 3.75rem; padding: 0; border-radius: .875rem; border: 2px solid var(--ardezie-600);
  background: transparent; color: var(--ardezie-50); font-size: 1.75rem;
}
.tableta main { max-width: none; padding: 1.75rem 2rem; box-sizing: border-box; }
.tableta h1 { font-size: 2.25rem; margin: 0; }
.tableta #mesaj { font-size: 1.25rem; margin: 0 0 1rem; }
.tableta .rand-titlu { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.tableta .cautare {
  flex: 0 1 29rem; display: flex; align-items: center; gap: .75rem; height: 4rem; padding: 0 1.25rem; margin: 0;
  background: var(--card); border: 2px solid var(--linie); border-radius: .875rem;
}
.tableta .cautare input { flex: 1; border: 0; outline: none; height: auto; font-size: 1.375rem; padding: 0; background: transparent; }
.tableta h2 { font-size: 1.25rem; color: var(--text); margin: 0 0 1rem; display: flex; align-items: baseline; gap: .75rem; }
.tableta h2 small { font-family: var(--font-text); font-weight: 400; font-size: 1.125rem; color: var(--slab); }
.tableta .grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tableta .om {
  display: flex; align-items: center; gap: 1rem; min-height: 6.5rem; padding: 1rem 1.25rem; text-align: left;
  background: var(--card); border: 2px solid var(--linie-fina); border-radius: 1rem; font-weight: 400;
}
.tableta .initiale {
  flex: none; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--ardezie-200);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-titlu); font-weight: 600; font-size: 1.375rem; color: var(--ardezie-800);
}
.tableta .om-nume { display: block; font-size: 1.375rem; font-weight: 600; }
.tableta .om-sub { display: block; font-size: 1rem; color: var(--slab); }
.tableta .in-tura { color: var(--ok); font-weight: 600; }
.tableta .toti {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem;
  background: var(--card); border: 2px dashed var(--linie); border-radius: 1rem; font-size: 1.25rem; color: var(--ardezie-700);
}
.tableta .toti button { min-height: 3.75rem; padding: 0 1.75rem; border: 2px solid var(--selectat); font-size: 1.25rem; }

.tableta .doua-coloane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.tableta .panou { background: var(--card); border-radius: 1.25rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tableta .cine { display: flex; align-items: center; gap: 1rem; }
.tableta .cine-nume { font-family: var(--font-titlu); font-weight: 600; font-size: 1.75rem; }
.tableta .pin { display: flex; flex-direction: column; align-items: center; gap: .75rem; font-size: 1.25rem; color: var(--ardezie-700); }
.tableta .puncte { display: flex; gap: .875rem; }
.tableta .puncte span { width: 1.375rem; height: 1.375rem; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--ardezie-400); }
.tableta .puncte span.plin { background: var(--ardezie-800); border-color: var(--ardezie-800); }
.tableta .tastatura { display: grid; grid-template-columns: repeat(3, 6.5rem); gap: .75rem; justify-content: center; }
.tableta .tastatura button {
  height: 5.25rem; border-radius: 1rem; border: 2px solid var(--linie-fina); background: var(--ardezie-50);
  font-family: var(--font-titlu); font-size: 2.125rem; padding: 0;
}
.tableta .tastatura .tasta-text { font-family: var(--font-text); font-size: 1.25rem; background: var(--card); }
.tableta .nota { font-size: 1rem; color: var(--slab); text-align: center; margin: 0; }
.tableta .actiuni-mari { display: flex; flex-direction: column; gap: 1rem; }
.tableta .actiune-mare {
  min-height: 9rem; display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem; border-radius: 1.25rem; text-align: left;
  border: 0; background: var(--meniu); color: #FFFFFF;
}
.tableta .actiune-mare.principala { background: var(--actiune); }
.tableta .actiune-mare.principala:hover:not(:disabled) { background: var(--actiune-apasat); }
.tableta .actiune-mare:disabled { min-height: 6rem; background: transparent; color: var(--ardezie-600); border: 2px dashed var(--linie); opacity: 1; }
.tableta .actiune-titlu { display: block; font-family: var(--font-titlu); font-weight: 700; font-size: 2.25rem; }
.tableta .actiune-mare:disabled .actiune-titlu { font-size: 1.5rem; }
.tableta .actiune-sub { display: block; font-weight: 400; font-size: 1.25rem; opacity: .9; }

.tableta .pas {
  display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.375rem; text-align: left; width: 100%;
  background: var(--card); border: 2px solid var(--linie-fina); border-radius: 1.125rem; font-weight: 400;
}
.tableta .pas[aria-pressed="true"] { border: 4px solid var(--selectat); }
.tableta .pas-sus { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.tableta .pas-titlu { font-family: var(--font-titlu); font-weight: 600; font-size: 1.5rem; }
.tableta .pas-buc { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tableta .pas-faza { font-size: 1.125rem; color: var(--slab); }
.tableta .bara-progres { height: .75rem; border-radius: .375rem; background: var(--ardezie-200); overflow: hidden; }
.tableta .bara-progres span { display: block; height: 100%; background: var(--progres); }
.tableta .lista-pasi { display: flex; flex-direction: column; gap: .875rem; }
.tableta .contor { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.tableta .contor > button { width: 6.5rem; height: 6.5rem; border-radius: 1.25rem; font-family: var(--font-titlu); font-size: 3rem; padding: 0; background: var(--ardezie-50); }
.tableta .contor label { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: 1rem; color: var(--slab); }
.tableta .contor input {
  width: 9.5rem; height: 6.5rem; text-align: center; border: 3px solid var(--selectat); border-radius: 1.25rem;
  font-family: var(--font-titlu); font-weight: 700; font-size: 3.5rem; font-variant-numeric: tabular-nums; padding: 0;
}
.tableta .buton-mare { min-height: 4rem; font-size: 1.375rem; border: 2px solid var(--selectat); border-radius: 1rem; }
.tableta .trimite { min-height: 5.5rem; border-radius: 1.125rem; font-family: var(--font-titlu); font-size: 1.875rem; font-weight: 700; }
.tableta .gol { font-size: 1.25rem; color: var(--slab); text-align: center; padding: 3rem 1rem; }

.tableta .gata {
  min-height: calc(100vh - 5.5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;
}
.tableta .gata-semn {
  width: 8rem; height: 8rem; border-radius: 50%; background: var(--verde-100); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.tableta .gata-text { font-family: var(--font-titlu); font-weight: 600; font-size: 2.5rem; margin: 0; }
.tableta .gata-sub { font-size: 1.5rem; color: var(--slab); margin: 0; }

@media (max-width: 60rem) {
  .tableta .doua-coloane { grid-template-columns: minmax(0, 1fr); }
  .tableta .rand-titlu { flex-wrap: wrap; }
  .tableta .bara { padding: 0 1rem; }
}
.tableta .titlu-raport { margin-bottom: 1rem; }
.tableta .info-pas { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.25rem; }
.tableta .ramase { font-size: 1.125rem; }
.tableta .butoane-raport { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.tableta .centru { text-align: center; }
body.tableta { min-height: 100vh; }
/* mesajul gol nu ocupă loc; rămâne în pagină pentru cititoarele de ecran */
.tableta #mesaj:empty { min-height: 0; margin: 0; }

/* ---------- Biroul: meniul lateral (se poate restrânge la pictograme) și „Acasă” ---------- */
.birou .cadru { display: flex; min-height: 100vh; }
.birou main { flex: 1; min-width: 0; max-width: 90rem; margin: 0; padding: 2rem 2.5rem; box-sizing: border-box; }
.meniu {
  flex: none; width: 15rem; box-sizing: border-box; padding: 1rem .75rem; background: var(--meniu); color: var(--ardezie-200);
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width .15s;
}
.meniu-sus { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .25rem 1rem; }
.marca { display: flex; align-items: center; gap: .6rem; font-family: var(--font-titlu); font-weight: 600; font-size: 1.375rem; color: var(--ardezie-50); }
.meniu-legaturi { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.meniu button {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.75rem; padding: 0 .75rem; text-align: left;
  border: 0; border-radius: var(--raza); background: transparent; color: var(--ardezie-200); font-weight: 500;
}
.meniu button:hover:not(:disabled) { background: var(--ardezie-700); color: #FFFFFF; }
.meniu button[aria-pressed="true"] { border: 0; background: var(--ardezie-700); color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--portocaliu-400); }
.meniu button svg { flex: none; }
.meniu .restrange { flex: none; width: 2.75rem; padding: 0; justify-content: center; }
.meniu-grup { margin: 1rem .75rem .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ardezie-400); }
.meniu-jos { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--ardezie-700); display: flex; flex-direction: column; gap: .25rem; }
.cine-sunt { display: flex; flex-direction: column; padding: 0 .75rem .5rem; color: var(--ardezie-50); }
.cine-sunt span { font-size: .875rem; color: var(--ardezie-400); }
/* restrâns: doar pictogramele; numele rămâne în „title” și pentru cititoarele de ecran */
.cadru.restrans .meniu { width: 4.75rem; }
.cadru.restrans .meniu .eticheta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadru.restrans .meniu-sus { flex-direction: column; }
.cadru.restrans .meniu button { justify-content: center; padding: 0; }
@media (max-width: 48rem) {
  .birou .cadru { flex-direction: column; }
  .meniu, .cadru.restrans .meniu { width: auto; height: auto; position: static; }
  .cadru.restrans .meniu-sus { flex-direction: row; padding-bottom: 0; }
  .cadru.restrans .meniu-legaturi { display: none; }
  .cadru.restrans .meniu .eticheta { position: static; width: auto; height: auto; clip: auto; }
  .birou main { padding: 1.25rem 1rem; }
}

.cap-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cap-pagina h1 { margin: .25rem 0 0; font-size: 2rem; }
.dale { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.dala {
  display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem; text-align: left; min-height: 0; height: auto;
  background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; font-weight: 400; color: var(--text);
}
.dala-titlu { font-size: .95rem; color: var(--slab); }
.dala-valoare { font-family: var(--font-titlu); font-weight: 600; font-size: 2.25rem; font-variant-numeric: tabular-nums; }
.dala-valoare small { font-size: 1.25rem; color: var(--slab); }
.dala-sub { font-size: .875rem; color: var(--slab); }
.dala.problema { border-color: var(--rosu-100); }
.dala.problema .dala-valoare, .dala.problema .dala-sub { color: var(--problema); font-weight: 600; }
.dala .dala-ok { color: var(--ok); font-weight: 600; }
.doua-panouri { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.5rem; align-items: start; }
.panou-birou { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; padding: .5rem 0; }
.panou-birou h2 { margin: .75rem 1.25rem .5rem; color: var(--text); font-size: 1.25rem; }
.rand-panou { display: flex; align-items: center; gap: .875rem; padding: .875rem 1.25rem; border-top: 1px solid var(--ardezie-100); }
.rand-panou-text { flex: 1; display: flex; flex-direction: column; }
.rand-panou-text span { font-size: .875rem; color: var(--slab); }
.semn {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--rosu-100); color: var(--problema);
}
.semn.info { background: var(--ardezie-100); color: var(--ardezie-700); }
.semn.atentie { background: var(--portocaliu-100); color: var(--portocaliu-800); }
.legatura { border: 0; background: none; color: var(--actiune); padding: 0 .25rem; min-height: 2.75rem; font-weight: 600; }
.legatura:hover:not(:disabled) { color: var(--actiune-apasat); text-decoration: underline; }
.comanda-rand { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1.25rem; border-top: 1px solid var(--ardezie-100); }
.comanda-sus { display: flex; justify-content: space-between; gap: .75rem; }
.comanda-sus span { color: var(--slab); font-variant-numeric: tabular-nums; }
.progres { height: .5rem; border-radius: .25rem; background: var(--ardezie-200); overflow: hidden; }
.progres span { display: block; height: 100%; background: var(--progres); }
.gol-birou { padding: 1rem 1.25rem; color: var(--slab); }
.birou #mesaj { margin: 0 0 .75rem; }
.birou #mesaj:empty { min-height: 0; margin: 0; }

/* ---------- Pontaj: comutator zi / lună și cronologia zilei ---------- */
.comutator { display: flex; gap: .25rem; padding: .25rem; background: var(--ardezie-200); border-radius: .75rem; }
.comutator button { border: 0; background: transparent; min-height: 2.5rem; color: var(--ardezie-700); }
.comutator button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgb(15 23 42 / .08); }
.bara-zi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.25rem 0 .75rem; }
.bara-zi > button { min-width: 2.75rem; }
.fara-margine { margin: 0; }
.jetoane { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.jeton { padding: .3rem .75rem; border-radius: 999px; background: var(--card); border: 1px solid var(--linie-fina); font-size: .875rem; font-variant-numeric: tabular-nums; }
.jeton.problema { background: var(--rosu-100); border-color: var(--rosu-100); color: var(--rosu-900); font-weight: 600; }
.cronologie { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; overflow-x: auto; }
.cr-rand { display: grid; grid-template-columns: 13rem minmax(32rem, 1fr) 4rem 9rem; align-items: center; min-height: 3.75rem; border-top: 1px solid var(--ardezie-100); }
.cr-rand.cr-cap { min-height: 2.5rem; border-top: 0; font-size: .8rem; color: var(--slab); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.cr-rand.cu-problema { background: var(--rosu-50); }
.cr-nume { padding: 0 1rem; }
.cr-ore { padding: 0 .5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cr-act { padding-right: .75rem; text-align: right; }
.cr-act button { min-height: 2.5rem; font-size: .9rem; }
.cr-axa {
  position: relative; height: 2rem;
  /* o linie la fiecare 4 ore */
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(14.2857% - 1px), var(--ardezie-100) calc(14.2857% - 1px), var(--ardezie-100) 14.2857%);
}
.cr-cap .cr-axa { background: none; }
.cr-ora { position: absolute; bottom: .25rem; transform: translateX(-50%); text-transform: none; letter-spacing: 0; }
.cr-ora.miez { color: var(--text); }
.cr-bara {
  position: absolute; top: .2rem; bottom: .2rem; box-sizing: border-box; border-radius: .375rem; padding: 0 .5rem;
  background: var(--ardezie-700); color: #FFFFFF; font-size: .8rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden;
}
.cr-bara.in-lucru { background: var(--portocaliu-100); color: var(--portocaliu-800); border: 2px solid var(--portocaliu-600); font-weight: 600; }
.cr-bara.deschisa { background: var(--card); color: var(--rosu-900); border: 2px dashed var(--problema); border-right: 0; border-radius: .375rem 0 0 .375rem; font-weight: 600; }
.cr-orfan {
  position: absolute; top: 0; bottom: 0; border-left: 3px solid var(--problema); padding-left: .4rem;
  display: flex; align-items: center; white-space: nowrap; color: var(--rosu-900); font-size: .8rem; font-weight: 600;
}
.cr-detalii { padding: .75rem 1rem 1rem; background: var(--ardezie-100); border-top: 1px solid var(--linie-fina); }
.cr-detalii ul { margin: 0 0 .5rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .875rem; font-size: .875rem; color: var(--ardezie-700); }
.legenda > span { display: flex; align-items: center; gap: .5rem; }
.leg-tura, .leg-lucru, .leg-deschisa { width: 1.75rem; height: .875rem; border-radius: .25rem; box-sizing: border-box; }
.leg-tura { background: var(--ardezie-700); }
.leg-lucru { background: var(--portocaliu-100); border: 2px solid var(--portocaliu-600); }
.leg-deschisa { border: 2px dashed var(--problema); }
.leg-orfan { width: 3px; height: .875rem; background: var(--problema); }
/* semnul unei intrări fără ieșire urmate imediat de altă tură: deasupra barei, ca să nu se acopere */
.cr-orfan.sus { bottom: auto; top: -1.1rem; height: 1rem; z-index: 1; background: var(--rosu-50); }
.cr-rand { padding-top: .25rem; }

/* ---------- Liste din birou: căutare, filtre, pastile de stare ---------- */
.filtre { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0 .25rem; }
.cautare-birou { flex: 1 1 18rem; margin: 0; }
.cautare-birou input { width: 100%; }
.pastile { display: flex; flex-wrap: wrap; gap: .375rem; }
.pastile button { min-height: 2.5rem; border-radius: 999px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pastile button[aria-pressed="true"] { background: var(--selectat); color: #FFFFFF; border-color: var(--selectat); }
.pastila { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; font-size: .825rem; font-weight: 600; white-space: nowrap; }
.pastila.ok { background: var(--verde-100); color: var(--verde-900); }
.pastila.problema { background: var(--rosu-100); color: var(--rosu-900); }
.pastila.neutru { background: var(--ardezie-100); color: var(--ardezie-700); }
.tabel-lat { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .875rem; margin: 1rem 0; }
.tabel-lat table { margin: 0; }

/* Ce vede o tabletă (birou) */
fieldset.domeniu { border: 1px solid var(--ardezie-300); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; }
.domeniu-grup { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; margin: .5rem 0; }
.domeniu-grup strong { flex-basis: 100%; }
.domeniu-grup label.bifa { margin: .25rem 0; }

/* Tableta: linia pasului și filtrele rapide */
.tableta .pas-jos { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.tableta .pas-linie { font-size: 1rem; font-weight: 600; color: var(--ardezie-700); background: var(--ardezie-100); border-radius: 999px; padding: .15rem .75rem; white-space: nowrap; }
.tableta .filtre-pasi { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.tableta .filtru { min-height: 56px; padding: 0 1.25rem; font-size: 1.125rem; border-radius: 999px; border: 2px solid var(--ardezie-300); background: #fff; color: var(--ardezie-800); }
.tableta .filtru[aria-pressed="true"] { background: var(--ardezie-800); border-color: var(--ardezie-800); color: #fff; }

/* ---------- Fabrica: taburi pe linii și diagrama rutei ---------- */
.taburi-fabrica { flex-wrap: wrap; margin: 1rem 0; }
.taburi-fabrica .tab-linie { font-weight: 700; }
.taburi-fabrica .tab-separat { margin-left: auto; }
ol.ghid { margin: .5rem 0 0; padding-left: 1.25rem; }
ol.ghid li { margin: .35rem 0; }
.cap-linie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.cap-linie h2, .cap-linie h3 { margin: .5rem 0; }
.cap-linie .unelte { margin-left: auto; }
.ruta-noua { margin-top: 1rem; }
.doua-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2rem; }
ul.lista-card { list-style: none; padding: 0; }
ul.lista-card li { background: var(--card); border: 1px solid var(--linie-fina); border-radius: .625rem; padding: .5rem .75rem; margin: .4rem 0; }

ol.flux { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.75rem; padding: .5rem 0 .75rem; margin: 0; }
.flux-pas { position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 11rem; max-width: 15rem; }
.flux-pas:not(:last-child)::after {
  content: "→"; position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; font-weight: 700; color: var(--portocaliu-700);
}
.flux-nr { font-family: var(--font-titlu); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ardezie-600); }
.flux-cutie {
  position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .6rem 2rem .6rem .75rem;
  background: var(--ardezie-50); border: 1px solid var(--ardezie-300); border-left: 4px solid var(--ardezie-700); border-radius: .5rem;
}
.flux-cutie .slab { font-size: .875rem; }
.flux-sau { align-self: center; font-size: .8125rem; font-style: italic; color: var(--slab); }
.flux-scoate { position: absolute; top: .2rem; right: .1rem; }
@media (max-width: 700px) {
  ol.flux { flex-direction: column; gap: 1.5rem; }
  .flux-pas { max-width: none; }
  .flux-pas:not(:last-child)::after { content: "↓"; right: auto; left: 1rem; top: auto; bottom: -1.5rem; transform: none; }
}

/* ---------- Ștergeri: roșu doar pentru ce nu se poate anula ---------- */
details.pericol { border-color: var(--rosu-100); margin-top: 2rem; }
details.pericol form { border-top: 1px solid var(--linie-fina); padding-top: .75rem; margin-top: .75rem; align-items: flex-end; }
details.pericol form > div { flex-basis: 100%; }
details.pericol form p { margin: .25rem 0 0; }
p.problema { color: var(--problema); font-weight: 600; }
button.pericol { background: var(--problema); border-color: var(--problema); color: #fff; }
button.sterge { color: var(--problema); float: right; }
.pastile.linii { margin: .75rem 0 1rem; }
.flux-nr { display: flex; align-items: center; gap: .25rem; min-height: 2rem; }
.flux-nr .flux-muta { min-height: 1.75rem; min-width: 1.75rem; padding: 0 .4rem; margin: 0; font-size: 1rem; line-height: 1; }
.flux-nr .flux-muta:first-of-type { margin-left: auto; }

/* ---------- Bilețele cu PIN (ecran și tipar) ---------- */
.bilete { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.bilet { display: flex; flex-direction: column; gap: .2rem; padding: .75rem 1rem; border: 1.5px dashed var(--ardezie-400); border-radius: .5rem; break-inside: avoid; }
.bilet-cap { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ardezie-600); }
.bilet-pin { font-family: var(--font-titlu); font-size: 2rem; font-weight: 600; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.bilet-nota { font-size: .8rem; color: var(--ardezie-600); }
#buton-bilete { margin-left: auto; }
@media print {
  .meniu, main > :not(#secret), #secret > :not(.bilete) { display: none !important; }
  body, main, #secret { background: #fff !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
  .bilete { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .bilet { border-radius: 0; }
}

/* ---------- Panoul din dreapta (Modifică angajat) ---------- */
dialog.sertar {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(30rem, 100vw); max-width: 100vw;
  padding: 0; border: 0; border-left: 1px solid var(--linie-fina); background: var(--card); color: var(--text);
  box-shadow: -12px 0 32px rgb(15 23 42 / .18); overflow-y: auto;
}
dialog.sertar::backdrop { background: rgb(15 23 42 / .35); }
.sertar-cap { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--linie-fina); }
.sertar-cap h2 { margin: .1rem 0 0; }
#panou-angajat-corp { padding: 0 1.25rem 1.25rem; }
.formular-sertar fieldset { border: 0; border-bottom: 1px solid var(--linie-fina); margin: 0; padding: 1rem 0; }
.formular-sertar legend { font-family: var(--font-titlu); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ardezie-600); padding: 0; }
.formular-sertar label:not(.bifa) { display: flex; flex-direction: column; gap: .25rem; margin: .6rem 0; }
.formular-sertar input:not([type="checkbox"]), .formular-sertar select { width: 100%; }
.doua-campuri { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.sertar-butoane { display: flex; gap: .5rem; padding-top: .5rem; }
.bilet strong { font-family: var(--font-titlu); font-size: 1.125rem; letter-spacing: normal; }

/* ---------- Angajați: coloane care încap pe tabletă ---------- */
.doua-randuri { display: flex; flex-direction: column; gap: .1rem; white-space: normal; }
.doua-randuri .slab { font-size: .85rem; overflow-wrap: anywhere; }
#lista-angajati td { white-space: normal; vertical-align: middle; }
#lista-angajati td:last-child { min-width: 0; }
#lista-angajati .unelte { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
#lista-angajati .unelte button { margin: 0; }
@media (max-width: 75rem) { .col-opt { display: none; } }