/* ===============================================================
   Panoul de administrare — ACS Inter Iași

   Aceleași culori și aceeași familie de litere ca site-ul, dar mai
   strâns: aici se lucrează, nu se citește. Rândurile sunt mai joase,
   spațiile mai mici, iar bara laterală neagră ține meniul deoparte de
   conținut, ca pe site meniul negru ține antetul deoparte de pagină.
   =============================================================== */

:root {
  --bg:        #F4F6FA;
  --surface:   #FFFFFF;
  --surface-2: #EDF1F7;
  --line:      #E1E6EF;
  --line-2:    #CFD7E4;

  --text:      #0E1116;
  --muted:     #5B6675;

  --dark:      #0B0D12;
  --dark-2:    #141821;
  --dark-line: #262C38;
  --dark-text: #EEF1F6;
  --dark-muted:#98A1B2;

  --blue:      #1D5FD6;
  --blue-dark: #164BA9;
  --blue-soft: #E8F0FD;
  --blue-light:#6FA5FF;

  --verde:     #127A5E;
  --verde-soft:#E1F4EE;
  --rosu:      #C22A4B;
  --rosu-soft: #FCE8ED;

  --radius:    12px;
  --lat-meniu: 246px;

  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 18px; font-weight: 700; margin: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================== poarta de intrare */

body.la-poarta { background: var(--dark); }

.poarta { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.poarta__cutie {
  width: 100%; max-width: 372px;
  padding: 36px 32px 28px;
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: 18px;
  text-align: center;
  color: var(--dark-text);
}
.poarta__sigla { width: 72px; height: 72px; margin: 0 auto 18px; object-fit: contain; }
.poarta__cutie h1 { font-size: 21px; margin-bottom: 4px; color: #fff; }
.poarta__sub { margin: 0 0 26px; color: var(--dark-muted); font-size: 14px; }
.poarta__sub code {
  background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 5px;
  font-size: 13px;
}
.poarta .camp { text-align: left; margin-bottom: 14px; }
.poarta .camp__eticheta { color: var(--dark-muted); }
.poarta .ctrl {
  background: #0B0D12;
  border-color: var(--dark-line);
  color: #fff;
}
.poarta .ctrl:hover { border-color: #373F4E; }
.poarta__eroare { margin: 14px 0 0; min-height: 20px; color: #FF8FA6; font-size: 13.5px; font-weight: 600; }
.poarta__inapoi { margin: 18px 0 0; font-size: 13px; }
.poarta__inapoi a { color: var(--dark-muted); }
.poarta__inapoi a:hover { color: #fff; }

/* =============================================== cadrul panoului */

.cadru { display: grid; grid-template-columns: var(--lat-meniu) 1fr; min-height: 100vh; }

.lateral {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  background: var(--dark);
  border-right: 1px solid var(--dark-line);
  overflow-y: auto;
}

.lateral__marca {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 18px;
  color: var(--dark-text);
  font-size: 14px;
}
.lateral__marca:hover { color: #fff; }
.lateral__marca img { width: 34px; height: 34px; object-fit: contain; }
.lateral__marca strong { font-weight: 800; }

.meniu { flex: 1; }
.meniu__grup {
  margin: 18px 8px 6px;
  color: #6B7486;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.meniu__grup:first-child { margin-top: 0; }

.meniu__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: 9px;
  color: var(--dark-muted);
  font-size: 14px; font-weight: 500;
  transition: background .18s, color .18s;
}
.meniu__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.meniu__link.e-activ { background: var(--blue); color: #fff; font-weight: 600; }
.meniu__link span { flex: 1; }
.meniu__link .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.meniu__link.e-activ .ico { opacity: 1; }

.meniu__link--tare { margin-top: 4px; color: var(--blue-light); font-weight: 600; }
.meniu__link--tare:hover { background: rgba(111,165,255,.12); }

/* Cifra mesajelor necitite și punctul „ai ceva nepublicat”. Amândouă spun
   „mai e ceva de făcut”, deci arată la fel: un semn colorat, la capătul
   rândului, fără text care să ceară citit. */
.bulina-nr {
  min-width: 20px; padding: 0 6px;
  background: var(--blue); color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; font-style: normal;
  text-align: center; line-height: 20px;
}
.meniu__link.e-activ .bulina-nr { background: #fff; color: var(--blue); }
.lateral__jos { padding-top: 16px; border-top: 1px solid var(--dark-line); }

/* ---------- indicatorul de publicare ---------- */

/* Publicarea fiind automată, singura întrebare care rămâne e „a ajuns pe
   site?". Un rând, un punct colorat, mereu în același loc — se citește
   dintr-o privire și nu cere nimic cât timp e verde. */
.stare-site {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px; padding: 7px 9px;
  border-radius: 8px;
  color: var(--dark-muted);
  font-size: 12.5px; font-weight: 600;
}
.stare-site:hover { background: rgba(255,255,255,.06); color: var(--dark-text); }

.stare-site__punct {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: currentColor;
}
.stare-site--gata     { color: #4FC79B; }
.stare-site--asteapta,
.stare-site--lucreaza { color: var(--blue-light); }
.stare-site--esec     { color: #FF8FA6; background: rgba(194, 42, 75, .16); }
.stare-site--esec:hover { color: #FFB3C2; background: rgba(194, 42, 75, .26); }

/* Pulsul spune că se lucrează acum, fără să adauge încă un cuvânt. */
.stare-site--lucreaza .stare-site__punct { animation: pulseaza 1s ease-in-out infinite; }
@keyframes pulseaza { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .stare-site--lucreaza .stare-site__punct { animation: none; }
}
.lateral__cine {
  margin: 0 0 10px; padding: 0 4px;
  color: var(--dark-muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral .btn--gol { width: 100%; border-color: var(--dark-line); color: var(--dark-muted); }
.lateral .btn--gol:hover { border-color: #4A5464; color: #fff; background: transparent; }

.continut { padding: 30px 34px 60px; min-width: 0; }

.meniu-buton { display: none; }

/* =============================================== ecrane */

.ecran { max-width: 1080px; }
.ecran__cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
.ecran__intro { margin: 6px 0 0; max-width: 640px; color: var(--muted); font-size: 14px; }

.panou {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.incarca, .gol {
  padding: 46px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  text-align: center; color: var(--muted);
}
.gol strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }

.bara-filtru { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bara-filtru [hidden] { display: none; }
.filtru { display: inline-flex; align-items: center; gap: 10px; }
.filtru > span { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Căutarea stă mereu în același loc, în stânga filtrelor: la 45 de meciuri
   sau 29 de antrenamente, derulatul nu mai e o metodă. */
.cautare { position: relative; display: inline-flex; align-items: center; }
.cautare svg {
  position: absolute; left: 10px;
  width: 15px; height: 15px;
  color: var(--muted); pointer-events: none;
}
.cautare .ctrl { padding-left: 32px; width: 230px; }
.cautare input::-webkit-search-cancel-button { cursor: pointer; }

/* =============================================== categorii de vârstă */

.categorii { margin-bottom: 16px; }
.categorii__titlu { margin: 0 0 16px; font-size: 17px; }
.categorii__interval { display: flex; align-items: flex-end; gap: 12px; }
.categorii__interval .camp { width: 128px; }
.categorii__linie { padding-bottom: 11px; color: var(--muted); font-size: 18px; }

.categorii__eticheta { margin: 20px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 700; }

/* Previzualizarea arată exact chipurile de pe site, cu aceeași formă: ce se
   salvează trebuie să se vadă înainte de salvare, nu după publicare. */
.categorii__chipuri { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.categorii__chipuri li, .categorii__chip {
  padding: 7px 15px;
  background: var(--blue-soft);
  border: 1px solid #C6DBFA;
  border-radius: 999px;
  color: var(--blue-dark);
  font-size: 14px; font-weight: 700;
}
.categorii__gol { background: var(--surface-2) !important; border-color: var(--line) !important;
                  color: var(--muted) !important; font-weight: 500 !important; }

/* Chipul e comutator: apăsat, anul rămâne în interval dar nu mai apare pe site.
   `li` nu mai poartă chenar când are un buton înăuntru — altfel s-ar vedea
   două inele concentrice. */
.categorii__chipuri li:has(.categorii__chip) {
  padding: 0; background: none; border: none;
}
.categorii__chip { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.categorii__chip:hover { border-color: var(--blue); }
.categorii__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Scos: tăiat și stins, dar tot lizibil — trebuie să se poată pune la loc. */
.categorii__chip.este-scos {
  background: var(--surface-2);
  border-color: var(--line);
  border-style: dashed;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.categorii__chip.este-scos:hover { border-color: var(--muted); color: var(--text); }

.categorii__ajutor { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; max-width: 62ch; }
.categorii__socoteala { display: block; margin-top: 4px; color: var(--text); }
.categorii__socoteala:empty { display: none; }

/* ---------- ce facem cu orele anului scos ---------- */

.pr-nota { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.pr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.pr-rand label {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 9px;
  cursor: pointer;
}
.pr-rand input { width: 16px; height: 16px; accent-color: var(--blue); }
.pr-rand__grupa { font-size: 14px; font-weight: 600; }
.pr-rand__cand { color: var(--muted); font-size: 12.5px; }

/* Propunerile stau sus și se văd ca propuneri; restul rămân la îndemână,
   fiindcă la volei grupele se numesc după sală și nu se pot ghici. */
.pr-rand--propus label { background: var(--rosu-soft); }
.pr-rand__semn {
  grid-column: 2 / -1;
  color: #A8730D; font-size: 12px; font-style: normal; font-weight: 600;
}

/* =============================================== completarea scorurilor */

.scoruri__grup { margin-bottom: 26px; }
.scoruri__titlu {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px;
  font-size: 15px; font-weight: 700;
}
.scoruri__titlu span { color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* Echipa gazdă la dreapta, oaspetele la stânga, cifrele la mijloc — forma în
   care se citește un rezultat, ca ochiul să nu caute unde e care. */
.scor-rand {
  display: grid;
  grid-template-columns: 160px 1fr 116px 1fr;
  align-items: center; gap: 14px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 7px;
}
.scor-rand__cand { color: var(--muted); font-size: 12.5px; }
.scor-rand__echipa { font-size: 14px; }
.scor-rand__echipa--gazde { text-align: right; font-weight: 600; }
.scor-rand__casute { display: flex; align-items: center; justify-content: center; gap: 7px; }
.scor-rand__casute .ctrl { width: 44px; padding: 7px 2px; text-align: center; font-weight: 700; }
.scor-rand__casute b { color: var(--muted); }

@media (max-width: 760px) {
  .scor-rand { grid-template-columns: 1fr 110px 1fr; gap: 8px; }
  .scor-rand__cand { grid-column: 1 / -1; }
}

/* =============================================== încărcare în serie */

.multe { display: grid; gap: 16px; }
.multe__lista { display: grid; gap: 8px; }
.multe__rand {
  display: grid; grid-template-columns: 84px 1fr 78px 34px;
  align-items: center; gap: 14px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
}
.multe__rand img {
  width: 84px; height: 58px;
  object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line-2);
}
.multe__descriere .camp__eticheta { margin-bottom: 4px; }
.multe__semn { color: var(--muted); font-size: 12px; text-align: right; }
.multe__semn--gata { color: var(--verde); font-weight: 700; }
.multe__semn--rau  { color: var(--rosu); font-weight: 700; }
.multe__stare { margin: 0; color: var(--muted); font-size: 13px; }
.multe__stare b { color: var(--text); }

/* =============================================== butoane */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, opacity .18s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--gol { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--gol:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }
.btn--rosu { background: var(--rosu); border-color: var(--rosu); }
.btn--rosu:hover { background: #A32340; border-color: #A32340; }
/* Butonul care lucrează: cerc care se învârte în fața textului. Blocat, dar
   nu stins — un buton doar palid arată a buton stricat, nu a muncă în curs. */
.btn--lucreaza { position: relative; padding-left: 40px; }
.btn--lucreaza:disabled { opacity: 1; }
.btn--lucreaza::before {
  content: ""; position: absolute; left: 18px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: btn-rotire .7s linear infinite;
}
@keyframes btn-rotire { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn--lucreaza::before { animation-duration: 2s; }
}

.btn--mic { padding: 6px 14px; font-size: 13px; }
.btn--mare { padding: 13px 28px; font-size: 15px; }
.btn--bloc { width: 100%; }

/* =============================================== tabele */

.tabel {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabel th {
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-align: left;
}
.tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
}
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr { cursor: pointer; transition: background .15s; }
.tabel tbody tr:hover { background: var(--blue-soft); }
.tabel tbody tr.rand--nou { background: #FBFCFE; }
.tabel tbody tr.rand--nou:hover { background: var(--blue-soft); }

.col-principal { max-width: 420px; }
.col-principal strong { display: block; font-weight: 600; }
/* Al doilea rând al celulei principale: context, nu conținut. Se taie la
   o linie, ca înălțimea rândurilor să rămână constantă și lista să poată
   fi parcursă cu ochiul. */
.sub {
  display: block;
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-poza { width: 56px; }
.col-actiuni { width: 46px; text-align: right; }

/* ---------- selecție multiplă ---------- */

.col-bifa { width: 40px; }
.col-bifa input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); }
.tabel tbody tr.rand--ales { background: var(--blue-soft); }
.tabel tbody tr.rand--ales:hover { background: #DCE9FD; }

/* Bara apare doar când există ceva bifat, între filtre și tabel: acolo se
   uită ochiul după ce a bifat, nu în josul paginii. */
.bara-selectie {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding: 9px 14px;
  background: var(--blue-soft);
  border: 1px solid #C6DBFA;
  border-radius: 10px;
}
.bara-selectie[hidden] { display: none; }
.bara-selectie__cate { margin-right: auto; font-size: 13.5px; font-weight: 700; color: var(--blue-dark); }

/* ---------- confirmarea destinației ---------- */

.conf__cate { margin: 0 0 14px; font-size: 15px; }
.conf__fisa {
  display: grid; grid-template-columns: 132px 1fr; gap: 7px 16px;
  margin: 0; padding: 16px 18px;
  background: var(--surface-2); border-radius: 10px;
}
.conf__fisa dt { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.conf__fisa dd { margin: 0; font-size: 14.5px; font-weight: 600; }

.conf__titlu { margin: 20px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.conf__lista { margin: 0; padding-left: 20px; font-size: 14px; }
.conf__lista li { margin-bottom: 4px; }
.conf__grija { color: #A8730D; }
.conf__nota { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

.mini {
  width: 42px; height: 42px;
  object-fit: cover; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.mini--gol { display: block; }

.stare {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.stare--verde { background: var(--verde-soft); color: var(--verde); }
.stare--gri   { background: var(--surface-2); color: var(--muted); }

.bulina { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

.rand__x {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 8px;
  color: var(--line-2);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.rand__x svg { width: 16px; height: 16px; }
.rand__x:hover { background: var(--rosu-soft); color: var(--rosu); }

/* „Vezi pe site" — aceeași formă ca ștergerea, ca rândul să aibă un singur
   ritm de pictograme. Albastru la hover, nu roșu: nu strică nimic. */
.rand__vezi {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--line-2);
  transition: color .15s, background .15s;
}
.rand__vezi svg { width: 15px; height: 15px; }
.rand__vezi:hover { background: var(--blue-soft); color: var(--blue); }
.col-actiuni { display: flex; gap: 2px; justify-content: flex-end; }

/* =============================================== plăci (galerie) */

.placi { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.placa {
  position: relative; margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, transform .18s;
}
.placa:hover { border-color: var(--blue); transform: translateY(-2px); }
.placa img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.placa figcaption {
  padding: 9px 11px;
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.placa__x {
  position: absolute; top: 7px; right: 7px;
  width: 26px; height: 26px;
  background: rgba(11,13,18,.62); color: #fff;
  border: none; border-radius: 50%;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  opacity: 0; transition: opacity .18s, background .18s;
}
.placa:hover .placa__x, .placa__x:focus-visible { opacity: 1; }
.placa__x:hover { background: var(--rosu); }

/* =============================================== asistentul care scrie textele */

.asistent-bara {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.asistent-bara__buton { flex: none; }
.asistent-bara__nota { color: var(--muted); font-size: 12.5px; min-width: 0; }

.asistent { display: grid; gap: 15px; }
.asistent__peste { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; }
.asistent__peste input { margin: 2px 0 0; flex: none; }
.asistent__stare { margin: 0; color: var(--muted); font-size: 13px; }
.asistent__stare:empty { display: none; }

/* =============================================== adăugare în serie */

.serie { display: grid; gap: 16px; }
.serie__doua { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.serie__butoane { display: flex; gap: 10px; flex-wrap: wrap; }

.serie__rezultat:empty { display: none; }

/* Starea citirii, scrisă în dialog. Anunțul de jos se stinge singur după
   câteva secunde, iar citirea unei poze ține un minut — deci aici rămâne. */
.serie__rezultat {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px; line-height: 1.5;
}
.serie__rezultat--lucreaza { border-color: #9FC0F0; background: #F1F6FE; }
.serie__rezultat--bun      { border-color: #9BD1A8; background: #F2FAF4; }
.serie__rezultat--grija    { border-color: #E0A21A; background: #FFF8E6; }
.serie__rezultat--rau      { border-color: var(--rosu); background: #FDEDF1; }
.serie__numar {
  position: sticky; bottom: 0;
  margin: 0; padding: 12px 2px 2px;
  background: linear-gradient(to top, var(--surface) 70%, transparent);
  color: var(--muted); font-size: 13px;
}
.serie__numar b { color: var(--text); }
.serie__rosu { color: var(--rosu) !important; }
.serie__galben { color: #A8730D !important; }

/* ---------- fotografia de alături ---------- */

/* Verificarea înseamnă comparat cu originalul. Fără fotografia la vedere,
   „e corect numele ăsta?” nu are răspuns — de aceea stă în dialog, nu într-o
   filă separată din care te întorci uitând ce căutai. */
.serie__poza-bara {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.serie__poza-bara[hidden] { display: none; }
.serie__poza-mica {
  width: 96px; height: 60px; flex: none;
  object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line-2);
}
.serie__poza-titlu { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.serie__poza-buton {
  padding: 0; background: none; border: none;
  color: var(--blue); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.serie__poza-mare { margin: 0; }
.serie__poza-mare[hidden] { display: none; }
.serie__poza-mare img {
  width: 100%; max-height: 46vh;
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ---------- tabelul de verificare ---------- */

/* Câmpurile cu cel mai mare risc de eroare sunt numele echipelor, deci ele
   primesc spațiul. Ce nu se poate citi nu se poate verifica, iar restul
   coloanelor au lățimi previzibile și se pot strânge. */
.tabel--serie { table-layout: fixed; }
.tabel--serie th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 7px; font-size: 10px;
}
.tabel--serie td { padding: 5px 6px; }
.tabel--serie tbody tr { cursor: default; }
.tabel--serie tbody tr:hover { background: none; }
.tabel--serie .ctrl { padding: 6px 8px; font-size: 13px; }

.tabel--serie .c-et   { width: 48px; }
.tabel--serie .c-data { width: 132px; }
.tabel--serie .c-ora  { width: 66px; }
.tabel--serie .c-scor { width: 78px; }
.tabel--serie .c-loc  { width: 150px; }
.tabel--serie .c-x    { width: 38px; }
/* Gazde și Oaspeți iau tot ce rămâne, în părți egale. */
.tabel--serie .c-echipa { width: auto; }

/* Tabelul orarului: aceleași semnale, alte coloane. Grupa ia ce rămâne,
   fiindcă e singurul câmp scris liber — restul sunt liste sau ore. */
.tabel--orar .c-zi     { width: 118px; }
.tabel--orar .c-sectie { width: 104px; }
.tabel--orar .c-loc    { width: 190px; }
.tabel--orar .c-grupa  { width: auto; }

.tabel--serie td.c-scor { display: flex; gap: 4px; align-items: center; }
.tabel--serie td.c-scor .ctrl { padding: 6px 2px; text-align: center; }
.tabel--serie td.c-et .ctrl { text-align: center; }

/* Data cu ziua săptămânii lipită de ea: un meci de juniori care pică marți
   e aproape sigur o cifră citită greșit, și se vede fără să numeri zilele. */
.data-camp { display: flex; align-items: center; gap: 6px; }
.data-camp .ctrl { flex: 1; min-width: 0; }
.ziua {
  flex: none; width: 26px;
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: lowercase;
}
.ziua--saptamana { color: #A8730D; }

/* ---------- cele trei feluri de semnal ---------- */

/* Roșu: cele două citiri ale fotografiei nu sunt de acord — poate fi greșit. */
.tabel--serie .ctrl--verifica {
  border-color: var(--rosu);
  box-shadow: 0 0 0 2px rgba(194, 42, 75, .14);
}
/* Chihlimbar: lipsește sau arată ciudat — de completat, nu neapărat greșit. */
.tabel--serie .ctrl--ciudat,
.tabel--serie .ctrl--lipsa {
  border-color: #E0A21A;
  background: #FFFDF6;
}
.tabel--serie .ctrl--lipsa { border-style: dashed; }

.tabel--serie tbody tr.rand--nesigur { background: #FDEDF1; }
.tabel--serie tbody tr.rand--nesigur td:first-child { box-shadow: inset 3px 0 0 var(--rosu); }
.tabel--serie tbody tr.rand--dubla { background: #FFF8E6; }
.tabel--serie tbody tr.rand--dubla td:first-child { box-shadow: inset 3px 0 0 #E0A21A; }

/* Rândul care nu e meci („stă” o etapă): rămâne vizibil, ca să se vadă că a
   fost citit, dar se stinge — nu se salvează și nu cere nimic. */
.tabel--serie tbody tr.rand--nemeci { background: var(--surface-2); }
.tabel--serie tbody tr.rand--nemeci .ctrl { color: var(--muted); border-style: dotted; }
.tabel--serie tbody tr.rand--nemeci td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }

.ecran__actiuni { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .serie__doua { grid-template-columns: 1fr; }
  .serie__rezultat { overflow-x: auto; }
  .tabel--serie { min-width: 860px; }
}

/* =============================================== formulare */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.camp--lat { grid-column: 1 / -1; }

.camp { display: block; min-width: 0; }
.camp__eticheta {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.camp__stea { color: var(--rosu); margin-left: 3px; }
.camp__ajutor { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; }

.ctrl {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--text);
  font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.ctrl:hover { border-color: var(--blue-light); }
.ctrl:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ctrl--mic { padding: 7px 10px; font-size: 13.5px; }
textarea.ctrl { resize: vertical; line-height: 1.6; }
.ctrl--bogat { font-size: 14.5px; line-height: 1.7; }

select.ctrl {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}

/* ---------- comutator ---------- */

.comutator { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.comutator input { position: absolute; opacity: 0; width: 0; height: 0; }
.comutator__pista {
  position: relative; flex: none;
  width: 40px; height: 23px;
  background: var(--line-2); border-radius: 999px;
  transition: background .2s;
}
.comutator__pista::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.comutator input:checked + .comutator__pista { background: var(--blue); }
.comutator input:checked + .comutator__pista::after { transform: translateX(17px); }
.comutator input:focus-visible + .comutator__pista { outline: 2px solid var(--blue); outline-offset: 2px; }
.comutator__text { color: var(--muted); font-size: 13px; }

/* ---------- fotografie ---------- */

.poza { display: flex; gap: 14px; align-items: flex-start; }
.poza__vizor {
  display: grid; place-items: center;
  width: 108px; height: 84px; flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.poza__vizor img { width: 100%; height: 100%; object-fit: contain; }
.poza__gol { color: var(--muted); font-size: 11.5px; text-align: center; padding: 0 6px; }
.poza__actiuni { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; align-items: center; }
.poza__adresa { flex: 1 1 100%; }

/* ---------- listă de etichete ---------- */

.lista-text { display: block; }
.lista-text__etichete { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.lista-text__gol { color: var(--muted); font-size: 13px; }
.eticheta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 11px;
  background: var(--blue-soft);
  border-radius: 999px;
  color: var(--blue-dark);
  font-size: 13px; font-weight: 600;
}
.eticheta button {
  width: 18px; height: 18px;
  background: none; border: none; border-radius: 50%;
  color: var(--blue-dark); font-size: 15px; line-height: 1;
  cursor: pointer;
}
.eticheta button:hover { background: rgba(29,95,214,.18); }
.lista-text__adaug { display: flex; gap: 8px; }
.lista-text__adaug .ctrl { flex: 1; }

/* ---------- perechi valoare / etichetă ---------- */

.perechi { display: block; }
.perechi__lista { display: grid; gap: 8px; margin-bottom: 10px; }
.pereche { display: grid; grid-template-columns: 110px 1fr 32px; gap: 8px; align-items: center; }
.pereche__x {
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 8px;
  color: var(--line-2); font-size: 19px; line-height: 1;
  cursor: pointer;
}
.pereche__x:hover { background: var(--rosu-soft); color: var(--rosu); }

/* =============================================== grupuri pliabile */

.grup {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.grup__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.grup__cap::-webkit-details-marker { display: none; }
.grup__cap::before {
  content: "›";
  margin-right: 4px;
  color: var(--muted); font-size: 19px; line-height: 1;
  transition: transform .2s;
}
.grup[open] .grup__cap::before { transform: rotate(90deg); }
.grup__cap:hover { background: var(--surface-2); }
.grup__nr { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
.grup .form { padding: 6px 18px 20px; }

/* =============================================== dialoguri */

.voal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(11, 13, 18, .55);
  backdrop-filter: blur(3px);
}
.modal {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(11, 13, 18, .3);
  overflow: hidden;
}
.modal--lat { max-width: 780px; }
/* Tabelul de verificare are opt coloane, iar numele echipelor trebuie citite
   intreg — la 780px se taiau exact campurile cu cel mai mare risc de eroare. */
.modal--urias { max-width: min(1200px, 95vw); }

.modal__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.modal__x {
  width: 32px; height: 32px; flex: none;
  background: none; border: none; border-radius: 8px;
  color: var(--muted); font-size: 24px; line-height: 1;
  cursor: pointer;
}
.modal__x:hover { background: var(--surface-2); color: var(--text); }

.modal__corp { padding: 22px; overflow-y: auto; }
.modal__text { margin: 0; color: var(--muted); }

.modal__jos {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 15px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

/* Avertismentul de la închiderea unui formular atins. Stă în subsolul
   dialogului, nu într-un al doilea dialog peste primul: două ferestre
   suprapuse ar face ca Escape să nu mai însemne nimic clar. */
.modal__paza {
  margin-right: auto;
  color: var(--rosu); font-size: 13px; font-weight: 600;
}

/* ---------- fișa unui mesaj ---------- */

.fisa { display: grid; grid-template-columns: 92px 1fr; gap: 6px 14px; margin: 0 0 20px; }
.fisa dt { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.fisa dd { margin: 0; font-size: 14px; }
.fisa__mesaj {
  margin: 0; padding: 16px 18px;
  background: var(--surface-2);
  border-radius: 10px;
  white-space: pre-wrap;
  font-size: 14.5px; line-height: 1.7;
}

/* =============================================== publicare */

.stare-publicare {
  margin: 0 0 22px; padding: 15px 18px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
}
.stare-publicare span { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; opacity: .8; }
.stare-publicare--asteapta { background: var(--blue-soft); color: var(--blue-dark); }
.stare-publicare--gata { background: var(--verde-soft); color: var(--verde); }
.stare-publicare--esec { background: var(--rosu-soft); color: var(--rosu); }

.nota-ciorne { margin: 20px 0 0; color: var(--muted); font-size: 13px; }

.cifre {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px;
}
.cifre li {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cifre strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cifre span { color: var(--muted); font-size: 12px; font-weight: 600; }

/* =============================================== anunțuri */

.anunturi { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%); }
.anunt {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px 12px 22px;
  background: var(--dark);
  color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 34px rgba(11, 13, 18, .3);
  animation: urca .25s ease;
}
.anunt:not(:has(.anunt__buton)) { padding-right: 22px; }

/* „Anulează", după o ștergere. Publicarea fiind automată, greșeala e deja
   pe site — butonul trebuie să fie la îndemână, nu într-un meniu. */
.anunt__buton {
  padding: 5px 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.anunt__buton:hover { background: rgba(255,255,255,.26); }
.anunt__buton:disabled { opacity: .5; cursor: default; }
.anunt--eroare { background: var(--rosu); }
@keyframes urca { from { opacity: 0; transform: translateY(10px); } }

/* =============================================== ecrane mici */

@media (max-width: 900px) {
  .cadru { grid-template-columns: 1fr; }

  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    width: var(--lat-meniu);
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .lateral.e-deschis { transform: none; box-shadow: 0 0 44px rgba(0,0,0,.45); }

  .meniu-buton {
    display: grid; place-items: center;
    position: fixed; left: 14px; bottom: 14px; z-index: 95;
    width: 48px; height: 48px;
    background: var(--dark); color: #fff;
    border: none; border-radius: 50%;
    font-size: 19px;
    box-shadow: 0 8px 22px rgba(11,13,18,.3);
    cursor: pointer;
  }

  .continut { padding: 22px 18px 90px; }
  .ecran__cap { flex-direction: column; align-items: stretch; }
  .form { grid-template-columns: 1fr; }
  .anunturi { bottom: 76px; }

  /* Un tabel de patru coloane nu încape; îl lăsăm să se deruleze pe
     orizontală în cutia lui, nu odată cu pagina. */
  .tabel { display: block; overflow-x: auto; white-space: nowrap; }
  .col-principal { max-width: 260px; }
}