/* =============================================================
   SFERIC — panoul de administrare

   Acelasi registru ca site-ul: navy si coral, linii subtiri, fara
   decoratiuni. E o unealta de lucru, nu o pagina de prezentare — deci
   densitate mare, contrast mare, si nimic care sa distraga.
   ============================================================= */

:root {
  --navy: #03193D;
  --navy-700: #143164;
  --coral: #F63C39;
  --coral-700: #D42B28;
  --cloud: #F5F7FA;
  --line: #E2E7EF;
  --slate: #687386;
  --teal: #0E8A6A;
  --alb: #FFFFFF;
  --r: 6px;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--cloud);
}

h1 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
a { color: var(--navy-700); }

/* ------------------------------------------------------------------ cap */
.cap {
  background: var(--navy);
  color: var(--alb);
  border-bottom: 3px solid var(--coral);
}
.cap__interior {
  max-width: 62rem; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; min-height: 56px;
}
.cap__marca {
  font-weight: 700; letter-spacing: .04em; color: var(--alb);
  text-decoration: none; font-size: .95rem;
}
.cap__marca span { font-weight: 400; opacity: .6; letter-spacing: 0; }
.cap__meniu { display: flex; gap: 1.1rem; margin-right: auto; }
.cap__meniu a {
  color: #C7D2E4; text-decoration: none; font-size: .9rem;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.cap__meniu a:hover { color: var(--alb); }
.cap__meniu a.e-activ { color: var(--alb); border-bottom-color: var(--coral); }
.cap__cont { display: flex; align-items: center; gap: .9rem; font-size: .85rem; color: #9FB0C9; }
.cap__cont a { color: #C7D2E4; text-decoration: none; }
.cap__cont a:hover { color: var(--alb); text-decoration: underline; }

/* -------------------------------------------------------------- continut */
.continut { max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.subsol {
  max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 2rem;
  font-size: .8rem; color: var(--slate);
}
.marunt { font-size: .85rem; color: var(--slate); max-width: 62ch; }
.mt { margin-top: 1rem; }

/* ----------------------------------------------------------------- cutii */
.cutie {
  background: var(--alb); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; margin: 1.25rem 0;
}
.cutie--ingusta { max-width: 26rem; margin: 3rem auto; }
.cutie--atentie { border-color: var(--coral); }
body.pagina-goala .cutie { max-width: 30rem; margin: 4rem auto; }

.grup {
  background: var(--alb); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.35rem 1.5rem; margin: 1.25rem 0;
}
.grup > .marunt { margin-top: 0; margin-bottom: 1.1rem; }

/* ---------------------------------------------------------------- campuri */
.camp { margin: 0 0 1rem; max-width: 34rem; }
.camp label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.camp input[type=text], .camp input[type=email], .camp input[type=password],
.camp input[type=number], .camp select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: .92rem;
  color: var(--navy); background: var(--alb);
  border: 1px solid #C6CFDD; border-radius: var(--r);
}
.camp input:focus, .camp select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(3, 25, 61, .12);
}
.camp small { display: block; margin-top: .35rem; font-size: .8rem; color: var(--slate); }

.camp--bifa { max-width: 46rem; }
.camp--bifa label {
  display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; cursor: pointer;
}
.camp--bifa input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); }
.camp--bifa small { margin-left: 1.6rem; }

/* ---------------------------------------------------------------- butoane */
.buton {
  display: inline-block; padding: 9px 18px; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--alb); background: var(--coral); border: 1px solid var(--coral);
  border-radius: var(--r); cursor: pointer; text-decoration: none;
}
.buton:hover { background: var(--coral-700); border-color: var(--coral-700); }
.buton--sters { color: var(--navy); background: var(--alb); border-color: #C6CFDD; }
.buton--sters:hover { background: var(--cloud); border-color: var(--navy); }
.buton--mic { padding: 5px 11px; font-size: .8rem; }
.buton:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.bara-salvare {
  position: sticky; bottom: 0; background: var(--cloud);
  padding: 1rem 0; border-top: 1px solid var(--line); margin-top: 1.5rem;
}
.in-linie { display: inline-flex; gap: .4rem; }

/* ---------------------------------------------------------------- anunturi */
.anunt {
  padding: .75rem 1rem; border-radius: var(--r); font-size: .9rem;
  border: 1px solid var(--line); border-left-width: 3px; background: var(--alb);
  margin: 0 0 1.25rem;
}
.anunt--reusit { border-left-color: var(--teal); }
.anunt--eroare { border-left-color: var(--coral); }

/* ------------------------------------------------------------------ tabel */
.tabel {
  width: 100%; border-collapse: collapse; background: var(--alb);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  font-size: .88rem; margin: 1.25rem 0;
}
.tabel th, .tabel td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
.tabel th { background: var(--cloud); font-size: .78rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--slate); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tr.e-inactiv td { opacity: .5; }
.tabel .actiuni { text-align: right; white-space: nowrap; }

.parola-temp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.3rem; font-weight: 600; letter-spacing: .02em;
  background: var(--cloud); border: 1px dashed #C6CFDD; border-radius: var(--r);
  padding: .75rem 1rem; margin: .75rem 0; user-select: all;
}

@media (max-width: 640px) {
  .cap__interior { flex-wrap: wrap; gap: .75rem; padding: .6rem 1rem; }
  .cap__meniu { order: 3; width: 100%; margin-right: 0; }
  .tabel { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------- lead-uri */
.filtre { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.filtre a {
  padding: 5px 12px; font-size: .85rem; text-decoration: none; color: var(--slate);
  background: var(--alb); border: 1px solid var(--line); border-radius: 999px;
}
.filtre a:hover { color: var(--navy); border-color: #C6CFDD; }
.filtre a.e-activ { color: var(--alb); background: var(--navy); border-color: var(--navy); }

.tabel tr.e-restant td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.insigna {
  display: inline-block; font-size: .72rem; letter-spacing: .02em;
  color: var(--teal); border: 1px solid currentColor; border-radius: 3px;
  padding: 0 5px; margin-top: 2px;
}

.fise { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: .75rem 1.5rem; margin: 0 0 1.25rem; }
.fise dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.fise dd { margin: 0; font-size: .95rem; }

.citat {
  border-left: 2px solid var(--line); padding: .25rem 0 .25rem 1rem;
  margin: 0 0 1.25rem; color: var(--navy); font-size: .95rem; max-width: 62ch;
}

.rand { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.rand .camp { max-width: none; }

.istoric { list-style: none; padding: 0; margin: .5rem 0 0; }
.istoric li {
  padding: .6rem 0 .6rem 1rem; border-left: 2px solid var(--line);
  font-size: .9rem; margin-bottom: .25rem;
}