/* GateSMS Hub — consolă de telemetrie pentru un dispozitiv care nu răspunde.
 *
 * Decizia care ține toată paleta: nu există verde nicăieri. Verdele înseamnă
 * „confirmat", iar controlerul SEKA nu confirmă niciodată nimic. Starea de
 * succes a acestui produs este chihlimbariu — trimis, neconfirmat — și asta
 * trebuie să se vadă din prima secundă.
 *
 * Monospace-ul este fața de afișare, nu doar pentru cod: pozițiile, numerele
 * și comenzile sunt date de instrument, iar versalele spațiate sunt limbajul
 * etichetării de panou. System-ui rămâne pentru text citit.
 */

/* ---------- jetoane ---------- */

:root {
  color-scheme: light;

  --paper: #eef2f7;
  --panel: #ffffff;
  --panel-2: #f6f9fc;
  --line: #d3dde8;
  --line-soft: #e4ebf3;
  --grid: #e2e9f1;
  --ink: #0d1826;
  --dim: #5a6b81;
  --faint: #8b9bb0;

  --signal: #a35c00;
  --signal-bg: #fbf0dd;
  --alert: #b8322a;
  --alert-bg: #fbe9e7;
  --unknown: #6234c9;
  --unknown-bg: #f0ebfd;
  --queue: #1263c4;
  --queue-bg: #e6f0fc;

  --focus: #1263c4;
  --shadow: 0 1px 2px rgb(13 24 38 / .06), 0 8px 24px rgb(13 24 38 / .06);

  --r: 10px;
  --r-sm: 6px;

  /* Fețele de afișare.
   *
   * Ordinea nu este întâmplătoare. Primele sunt monospace-urile cu `0` tăiat
   * sau punctat și cu `1`/`l`/`I` clar diferite — într-o aplicație unde toată
   * ziua se citesc numere de telefon și poziții, asta este cerința. `SF Mono`
   * și `Menlo` au fost coborâte: pe ecran mic ambele au `0` fără marcaj.
   *
   * Nu se încarcă niciun font extern. Instalarea este pe rețea locală, fără
   * ieșire la internet, iar un `@font-face` către un CDN ar însemna o pagină
   * care se strică exact acolo unde trebuie să meargă. */
  --display: "JetBrains Mono", "Cascadia Mono", "Roboto Mono", "Noto Sans Mono",
    "DejaVu Sans Mono", "Liberation Mono", ui-monospace, Menlo, Consolas, monospace;
  --body: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #070b12;
  --panel: #0d1420;
  --panel-2: #111a29;
  --line: #1e2a3d;
  --line-soft: #17212f;
  --grid: #0e1622;
  --ink: #e6edf7;
  --dim: #8296ae;
  --faint: #5d6f87;

  --signal: #ffb020;
  --signal-bg: #2a1e08;
  --alert: #ff6259;
  --alert-bg: #2c1210;
  --unknown: #b39bfb;
  --unknown-bg: #1e1533;
  --queue: #58aaff;
  --queue-bg: #0d2035;

  --focus: #58aaff;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #070b12;
    --panel: #0d1420;
    --panel-2: #111a29;
    --line: #1e2a3d;
    --line-soft: #17212f;
    --grid: #0e1622;
    --ink: #e6edf7;
    --dim: #8296ae;
    --faint: #5d6f87;
    --signal: #ffb020;
    --signal-bg: #2a1e08;
    --alert: #ff6259;
    --alert-bg: #2c1210;
    --unknown: #b39bfb;
    --unknown-bg: #1e1533;
    --queue: #58aaff;
    --queue-bg: #0d2035;
    --focus: #58aaff;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .4);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  /* 16px, nu 15: sub asta textul mărunt de pe telefon devine greu de citit,
     iar aplicația se folosește în mare parte în picioare, lângă o poartă. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  /* Trama fină de fundal: un panou de instrument, nu o coală albă. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  background-position: -1px -1px;
}

/* ---------- tipografie ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .9rem; }

.eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.mono { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- numărul de telefon ---------- */

/* `0741.925.284`. Segmentarea este pentru citit, nu pentru date: punctul nu
 * intră niciodată într-un câmp de formular, fiindcă în comenzile SEKA el
 * separă câmpurile — `normalize_phone` îl și respinge la intrare.
 *
 * Numărul are o singură culoare. Prima variantă estompa prefixul, ca ochiul să
 * cadă pe partea care distinge; în practică arăta ca un număr pe jumătate
 * șters, nu ca unul cu accent. Gruparea singură face destul.
 *
 * Punctele rămân puțin mai stinse și fără spațiere: sunt semne de citire, nu
 * cifre, dar nici nu trebuie să rupă numărul în trei bucăți. */
.tel {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tel b { font-weight: inherit; color: inherit; }
.tel i { font-style: normal; color: var(--faint); }
.muted { color: var(--dim); }
.hint { margin: .35rem 0 0; font-size: .82rem; color: var(--dim); }

code {
  font-family: var(--display);
  font-size: .88em;
  padding: .1em .3em;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}

a { color: var(--focus); text-underline-offset: 2px; }

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

/* ---------- cadru ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem clamp(.9rem, 3vw, 1.5rem);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

/* Punctul de purtătoare: singurul element care se mișcă permanent. */
.brand span { white-space: nowrap; }
.bar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.who { font-size: .82rem; color: var(--dim); white-space: nowrap; }

@media (max-width: 34rem) {
  /* Numele contului este redundant pe telefon: e vizibil oricum la ieșire. */
  .who { display: none; }
  .bar { gap: .5rem; }
}

main {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(.9rem, 3vw, 1.5rem) 4rem;
}

footer {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(.9rem, 3vw, 1.5rem) 2.5rem;
  font-size: .78rem;
  color: var(--faint);
  font-family: var(--display);
}

/* ---------- panouri ---------- */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  box-shadow: var(--shadow);
}

/* Reperele din colț: notație de desen tehnic, nu ornament. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--signal);
  opacity: .5;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-top-left-radius: var(--r); }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-bottom-right-radius: var(--r); }

.panel form { max-width: 44rem; }
.panel + .panel, section + section { margin-top: 1rem; }
.panel.narrow { max-width: 25rem; }

section { margin: 0 0 1rem; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

/* ---------- antetul locației ---------- */

.head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.head h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.head .actions { margin-top: 0; margin-left: auto; align-self: flex-end; }
.head .readout { margin-left: auto; }

.readout { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.readout div { display: flex; flex-direction: column; gap: .1rem; }
.readout .value {
  font-family: var(--display);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- harta pozițiilor ---------- */

.map-block + .map-block { margin-top: 1rem; }

.map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
  gap: 4px;
  margin-top: .5rem;
}

.slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 2.4rem;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--faint);
  transition: transform .12s ease, border-color .12s ease;
}
.slot:hover { transform: translateY(-2px); border-color: var(--focus); }

.slot[data-state="free"] { border-style: dashed; }
.slot[data-state="pending"] { color: var(--queue); border-color: var(--queue); background: var(--queue-bg); }
.slot[data-state="sent_unconfirmed"] { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.slot[data-state="failed"] { color: var(--alert); border-color: var(--alert); background: var(--alert-bg); }
.slot[data-state="unknown"] { color: var(--unknown); border-color: var(--unknown); background: var(--unknown-bg); }
.slot[data-state="imported"] { color: var(--dim); border-color: var(--dim); border-style: solid; }
/* Ocupată de altă firmă: se vede că nu e liberă, dar nu se află de cine. */
.slot[data-state="foreign"] {
  color: var(--faint);
  border-style: solid;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px,
    var(--line) 3px, var(--line) 4px);
  cursor: not-allowed;
}
/* Liberă, dar în afara intervalelor contului. */
.slot[data-state="blocked"] { opacity: .35; border-style: dashed; cursor: not-allowed; }
.slot[data-state="foreign"]:hover, .slot[data-state="blocked"]:hover {
  transform: none; border-color: var(--line);
}

.slot[data-state="pending"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  border: 1px solid var(--queue);
  opacity: .5;
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(.85); opacity: .6; }
  100% { transform: scale(1.15); opacity: 0; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid currentColor;
  background: currentColor;
  font-style: normal;
  flex: 0 0 auto;
}
.legend .free i { border-style: dashed; border-color: var(--faint); background: transparent; }
.legend .pending i { color: var(--queue); }
.legend .sent i { color: var(--signal); }
.legend .failed i { color: var(--alert); }
.legend .unknown i { color: var(--unknown); }
.legend .imported i { color: var(--dim); }
.legend .foreign i { color: var(--faint); background: var(--line); }

/* ---------- stări ---------- */

.state {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.state::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.state.pending { color: var(--queue); background: var(--queue-bg); }
.state.sent_unconfirmed { color: var(--signal); background: var(--signal-bg); }
.state.failed { color: var(--alert); background: var(--alert-bg); }
.state.unknown { color: var(--unknown); background: var(--unknown-bg); }
.state.imported { color: var(--dim); background: var(--panel-2); }

/* ---------- mesaje ---------- */

.flashes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.flash {
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--panel);
  font-size: .9rem;
}
.flash.ok { border-left-color: var(--signal); background: var(--signal-bg); }
.flash.error { border-left-color: var(--alert); background: var(--alert-bg); color: var(--alert); }

.notice {
  border: 1px solid var(--alert);
  border-radius: var(--r);
  background: var(--alert-bg);
  padding: 1rem;
}
.notice ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .8rem; }
.notice li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notice li .hint { margin: 0; flex-basis: 100%; }

.empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--dim);
  border: 1px dashed var(--line);
  border-radius: var(--r);
}
.empty p { margin: .25rem 0 1rem; }

/* ---------- formulare ---------- */

label { display: block; margin: 1.05rem 0 .35rem; font-size: .82rem; font-weight: 600; }

label.row {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 400; font-size: .9rem; margin: .7rem 0 0;
}
label.row input { width: auto; margin: 0; }

input, select, textarea {
  width: 100%;
  padding: .58rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="number"], input[name="phone"], input[name="destination_phone"] {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
textarea { font-family: var(--display); font-size: .84rem; resize: vertical; }
input[name$="template"], input[name="add_template"], input[name="delete_template"] {
  font-family: var(--display);
  font-size: .85rem;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.6rem;
  padding: .5rem 1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
button:hover, .button:hover { border-color: var(--faint); background: var(--panel); }

button.primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
button.primary:hover { background: var(--dim); border-color: var(--dim); }

button.link {
  min-height: 0; padding: 0; border: none; background: none;
  color: var(--focus); font-weight: 500; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 2px;
}
button.link.danger { color: var(--alert); }
button.link:hover { background: none; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.inline { display: inline; }

.icon-button {
  min-height: 2.2rem;
  padding: .3rem .6rem;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- bara de filtre ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 1rem 0;
}
.filters input[type="search"] { flex: 1 1 16rem; width: auto; }

/* ---------- tabel ---------- */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: .55rem .75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--ink); }

td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: .95rem;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }

td.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
td.slot-no {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--signal);
}

/* ---------- mobil: tabelul devine listă de fișe ---------- */

@media (max-width: 46rem) {
  .table-wrap { border: none; background: none; box-shadow: none; overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tr {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .8rem .9rem;
    margin-bottom: .6rem;
    box-shadow: var(--shadow);
  }
  tbody tr:hover td { background: none; }

  td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .22rem 0;
    border: none;
  }
  td::before {
    content: attr(data-label);
    font-family: var(--display);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    flex: 0 0 auto;
  }
  td.slot-no {
    font-size: 1.5rem;
    padding-bottom: .5rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--line-soft);
  }
  td[data-label]:empty { display: none; }

  .readout { gap: .9rem; }
  .map { grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); }
}

/* ---------- fișe de locație ---------- */

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, border-color .12s ease;
}
.card-link:hover { transform: translateY(-2px); border-color: var(--signal); }
.card-link h2 { margin: .35rem 0 .2rem; }

/* ---------- login ---------- */

.login-wrap {
  min-height: 68vh;
  display: grid;
  place-items: center;
}
.login-wrap .panel { width: min(25rem, 100%); }
.login-mark {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
}

/* ---------- previzualizare email ---------- */

pre {
  margin: .5rem 0 0;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  font-family: var(--display);
  font-size: .82rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------- variabile disponibile ---------- */

.vars { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.vars code { font-size: .75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- ferestre modale ---------- */

/* `<dialog>` nativ: focus prins, ESC închide, backdrop gratuit. Fără el ar
 * trebui reimplementate toate trei, prost. */
dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(85vh, 52rem);
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgb(0 0 0 / .35);
  overflow: visible;
}
dialog::backdrop {
  background: rgb(4 8 14 / .62);
  backdrop-filter: blur(3px);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.15rem .75rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  border-radius: var(--r) var(--r) 0 0;
  z-index: 1;
}
.dialog-head h2 { margin: 0; }
.dialog-close {
  margin: 0 0 0 auto;
  min-height: 2rem;
  padding: .2rem .6rem;
  font-family: var(--display);
  line-height: 1;
}
.dialog-body { padding: 1rem 1.15rem 1.25rem; overflow-y: auto; max-height: calc(85vh - 4.5rem); }
.dialog-body form { max-width: none; }
.dialog-body > form > label:first-of-type { margin-top: 0; }

/* Pe telefon, o fereastră mică e mai incomodă decât o foaie pe tot ecranul. */
@media (max-width: 40rem) {
  dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
  }
  .dialog-head { border-radius: 0; }
  .dialog-body { max-height: calc(100dvh - 4.5rem); padding-bottom: 3rem; }
}

/* Fără JavaScript, ferestrele devin panouri obișnuite, ca formularele să
 * rămână accesibile. */
.no-js dialog {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  height: auto;
  margin: 1rem 0;
}
.no-js .dialog-close, .no-js [data-open] { display: none; }
.no-js .dialog-body { max-height: none; }

/* ---------- taburi ---------- */

.tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tabs button {
  min-height: 2.4rem;
  padding: .45rem .85rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: none;
  color: var(--dim);
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); background: var(--panel-2); }
.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--signal);
}
.tabs .count {
  margin-left: .4rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: .9em;
  color: var(--dim);
}
.no-js .tabs { display: none; }

/* ---------- listă compactă cu acordeon ---------- */

.rows { display: grid; gap: .5rem; }

details.row-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
details.row-item[open] { box-shadow: var(--shadow); }

details.row-item > summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
  min-height: 3rem;
}
details.row-item > summary::-webkit-details-marker { display: none; }
details.row-item > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--faint);
  font-size: .8rem;
  transition: transform .15s ease;
}
details.row-item[open] > summary::after { transform: rotate(180deg); }
details.row-item > summary:hover { background: var(--panel-2); }
details.row-item > summary .title { font-weight: 600; }
details.row-item > summary .sub {
  font-family: var(--display);
  font-size: .78rem;
  color: var(--dim);
}
.row-body { padding: 0 .9rem 1rem; border-top: 1px solid var(--line-soft); }
.row-body > form:first-child { margin-top: .9rem; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--display);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.chip.off { color: var(--alert); border-color: var(--alert); background: var(--alert-bg); }
/* Numele de firmă sunt substantive proprii: majusculele le-ar denatura. */
.chip.name { text-transform: none; letter-spacing: 0; font-size: .72rem; }
.chip button.link { font-size: 1em; }

.toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.toolbar .spacer { margin-left: auto; }

/* Numele de familie se scrie cu majuscule. Transformarea din CSS o arată
 * imediat, în timp ce se tastează; serverul o aplică oricum la salvare, deci
 * ce se vede este exact ce se scrie. */
input[name="last_name"] { text-transform: uppercase; }

/* Avertismentul de lângă numărul de telefon: singurul câmp din formularul de
 * corectură care ajunge la poartă. */
.hint.warn-inline {
  border-left: 2px solid var(--signal);
  padding-left: .6rem;
  color: var(--ink);
}

/* ---------- perechi de câmpuri ---------- */

/* Server și port, utilizator și parolă: perechi care se citesc împreună.
   Pe telefon se pun una sub alta, fiindcă altfel portul rămâne o coloană
   de trei caractere lângă un nume de server lung. */
.pair { display: grid; gap: 0 .75rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .pair { grid-template-columns: 2fr 1fr; }
  .pair > * { min-width: 0; }
}

.chip.queue { color: var(--queue); border-color: var(--queue); background: var(--queue-bg); }

.row-item.static {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem .9rem; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel);
}
.row-item.static .title { font-weight: 600; }

/* ---------- editorul de mesaje cu previzualizare ---------- */

/* Sursa și rezultatul, unul lângă altul. Sub 60rem se așază pe verticală:
   pe telefon, două coloane ar lăsa fiecăreia vreo douăzeci de caractere. */
.editor {
  display: grid; gap: .6rem; grid-template-columns: 1fr; margin-bottom: 1rem;
}
@media (min-width: 60rem) {
  .editor { grid-template-columns: 1fr 1fr; align-items: start; }
}
.editor textarea {
  margin: 0; font-family: var(--display); font-size: .8rem; line-height: 1.55;
  tab-size: 2; resize: vertical; min-height: 16rem;
}

.editor .preview { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.editor .preview figcaption {
  font-family: var(--display); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); padding-bottom: .35rem;
}
/* Fundal alb și în tema de noapte: așa ajunge mesajul la destinatar, iar o
   previzualizare pe fundal închis ar ascunde exact contrastul care se strică. */
.editor .preview iframe {
  width: 100%; min-height: 16rem; flex: 1; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; display: block;
}

/* Previzualizarea de pe server, în aceeași izolare ca cea din editor. */
iframe.mail {
  width: 100%; min-height: 20rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; display: block;
}

/* ---------- pictograme ---------- */

/* Sprite-ul este în pagină, dar nu ocupă loc: `<use>` îl referă din `defs`. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}

.icon-button, .button, button, .chip, .flash, td .ico {
  --ico-gap: .4rem;
}
.icon-button {
  display: inline-flex; align-items: center; gap: var(--ico-gap);
  /* Și când este `<a>`: în bară arată ca un buton, deci nu poartă subliniere. */
  text-decoration: none;
}

/* Cele trei stări ale temei: se vede numai pictograma stării curente. */
#theme-toggle .ico { display: none; }
#theme-toggle[data-choice="sistem"] .th-auto,
#theme-toggle[data-choice="light"] .th-light,
#theme-toggle[data-choice="dark"] .th-dark { display: inline-block; }
#theme-toggle:not([data-choice]) .th-auto { display: inline-block; }

@media (max-width: 46rem) {
  /* Pe telefon rămân pictogramele: trei etichete în versale nu încap în bară. */
  .icon-button .label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icon-button { padding: .35rem .5rem; }
  .icon-button .ico { width: 1.25rem; height: 1.25rem; }
}

/* ---------- meniul de administrare ---------- */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1.25rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.admin-nav a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  border-radius: var(--r-sm);
  color: var(--dim);
  text-decoration: none;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  transition: color .16s ease, background .16s ease;
}
.admin-nav a:hover { color: var(--ink); background: var(--panel-2); }
.admin-nav a.on { color: var(--ink); background: var(--panel-2); }
/* Bara de dedesubt marchează secțiunea curentă; crește din centru la intrare. */
.admin-nav a.on::after {
  content: "";
  position: absolute; left: .8rem; right: .8rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--signal);
  transform-origin: center;
  animation: nav-mark .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes nav-mark { from { transform: scaleX(0); opacity: 0 } to { transform: scaleX(1); opacity: 1 } }

.admin-nav .quit { margin-left: auto; color: var(--faint); }
.admin-nav .quit:hover { color: var(--ink); }

@media (max-width: 40rem) {
  .admin-nav { overflow-x: auto; flex-wrap: nowrap; }
  .admin-nav .quit { margin-left: .5rem; }
}

/* ---------- mișcare ---------- */

/* Regula care ține tot: mișcarea marchează un lucru care s-a schimbat. Nimic
   nu se mișcă doar ca să se miște, iar cine cere mai puțină mișcare o
   primește — vezi blocul `prefers-reduced-motion` de la final. */

.flash {
  display: flex; align-items: flex-start; gap: .5rem;
  animation: flash-in .3s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.flash .ico { margin-top: .18em; }
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-.4rem) }
  to { opacity: 1; transform: none }
}

/* Panourile intră o dată, la încărcare. Decalajul este mic intenționat: la
   200ms per panou, o pagină cu cinci panouri s-ar simți lentă. */
main > .panel, main > section, main > .head, main > .table-wrap {
  animation: panel-in .34s cubic-bezier(.2, .7, .3, 1) both;
}
main > *:nth-child(2) { animation-delay: .04s }
main > *:nth-child(3) { animation-delay: .08s }
main > *:nth-child(4) { animation-delay: .12s }
main > *:nth-child(n+5) { animation-delay: .16s }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(.5rem) }
  to { opacity: 1; transform: none }
}

button, .button, .icon-button { transition: transform .1s ease, background .16s ease, border-color .16s ease; }
button:active, .button:active, .icon-button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- firme și sigle ---------- */

.logo-grid {
  display: grid; gap: 1rem;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
/* Regula generală `section + section { margin-top }` este pentru pagini
   așezate pe verticală. Într-o grilă, ea coboară a doua fișă cu un rând
   întreg față de prima. */
.logo-grid > * { margin: 0 !important; }

/* Fundal alb și în tema de noapte: așa ajunge sigla în email, iar una cu
   contur închis ar dispărea pe un fundal întunecat exact aici, unde se
   verifică. Tabla de șah arată transparența. */
.logo-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 6.5rem; padding: .75rem; margin: .5rem 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%),
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.logo-slot img { max-width: 100%; max-height: 5rem; object-fit: contain; }
.logo-slot .empty-mark {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #8b9bb0;
}
.logo-form input[type="file"] { font-size: .82rem; }

/* ---------- galeria de șabloane ---------- */

.designs {
  display: grid; gap: .6rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.design {
  display: grid; gap: .2rem; align-content: start;
  padding: .85rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.design:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: var(--shadow); }
.design.on { border-color: var(--signal); background: var(--signal-bg); }
.design-mark { color: var(--signal); }
.design-mark .ico { width: 1.4rem; height: 1.4rem; }
.design-name { font-weight: 600; }
.design-note { font-size: .82rem; color: var(--dim); line-height: 1.5; }
.design button { justify-self: start; margin-top: .3rem; }

/* ---------- semnul aplicației ---------- */

.mark { width: 1.7rem; height: 1.7rem; flex: none; overflow: visible; }
.mark-post { fill: var(--dim); }
.mark-wave {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.8;
  stroke-linecap: round;
  /* Opacitatea de repaus: unda apropiată este cea mai apăsată, cele
     îndepărtate se sting. Semnul se citește și când nu se mișcă nimic. */
  opacity: var(--rest);
  animation: mark-pulse 3.5s ease-in-out infinite;
}
.mark-wave.w1 { --rest: .9 }
.mark-wave.w2 { --rest: .55; animation-delay: .13s }
.mark-wave.w3 { --rest: .28; animation-delay: .26s }

/* Pulsul trece dinspre stâlp spre exterior. Decalajul dintre unde este ce
   creează mișcarea; fiecare undă doar se luminează scurt. */
@keyframes mark-pulse {
  0%, 55%, 100% { opacity: var(--rest) }
  14% { opacity: 1 }
}

.brand:hover .mark-wave { stroke-width: 2 }

/* Varianta mare, pe pagina de autentificare. */
.mark.big { width: 3.5rem; height: 3.5rem; }
.mark.big .mark-wave { stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .mark-wave { animation: none }
}

/* ---------- acțiuni pe rând ---------- */

/* Pictogramă plus etichetă, nu pictogramă singură. „Șterge" trimite `del`
   către poartă și nu se poate anula; o pictogramă fără cuvânt lângă ea ar
   însemna că cineva o apasă din memorie, într-un tabel unde rândul de deasupra
   arată la fel. */
.acts { white-space: nowrap; }
.acts .inline { display: inline-flex; }

.act {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--queue);
  font: inherit; font-size: .85rem;
  text-decoration: none; cursor: pointer;
  min-height: auto;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.act:hover { background: var(--queue-bg); border-color: var(--queue); }
.act .ico { width: 1.05em; height: 1.05em; }

.act.danger { color: var(--alert); }
.act.danger:hover { background: var(--alert-bg); border-color: var(--alert); }

.acts .act + .inline, .acts .act + .act { margin-left: .15rem; }

@media (max-width: 46rem) {
  /* În fișele de pe telefon, acțiunile se așază pe un rând propriu, cu spațiu
     de atins. Un buton de 24 px lipit de altul se apasă greșit. */
  td.acts { display: flex; flex-wrap: wrap; gap: .35rem; }
  .act { padding: .45rem .7rem; border-color: var(--line); }
}

/* Butoanele cu pictogramă își aliniază cele două părți. `.button` este uneori
   `<a>`, uneori `<button>`; regula trebuie să prindă ambele. */
.button, button { align-items: center; }
.button:has(.ico), button:has(.ico) { display: inline-flex; gap: .45rem; }

/* Ora preluării de către operator. Discretă intenționat: este o dovadă
   parțială — SMSC-ul a luat mesajul — și nu are voie să arate ca o
   confirmare de acces. */
.smsc {
  display: block; margin-top: .2rem;
  font-family: var(--display); font-size: .68rem;
  color: var(--faint); white-space: nowrap;
}

/* Mutarea nu este nici o corectură locală, nici o ștergere: trimite două
   comenzi către poartă. Chihlimbariul o pune în aceeași familie cu restul
   lucrurilor care ajung pe fir. */
.act.signal { color: var(--signal); }
.act.signal:hover { background: var(--signal-bg); border-color: var(--signal); }

/* ---------- galeria de șabloane, cu miniaturi ---------- */

.designs {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.design {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden;
}

/* Miniatura este mesajul însuși, micșorat. `transform: scale` în loc de
   `zoom`: același rezultat, dar suportat peste tot de ani de zile.
   
   Dimensiunile cadrului sunt în pixeli, nu în procente: procentele se
   raportează la containerul deja micșorat, iar rezultatul era o decupare din
   colțul din stânga sus. Aici cadrul are lățimea unei ferestre reale de email,
   620px, în care plicul de 560px stă centrat ca la destinatar. */
.design-shot {
  position: relative;
  display: block; width: 100%; height: 13rem;
  padding: 0; margin: 0; border: 0;
  border-bottom: 1px solid var(--line);
  background: #f4f7fb;
  cursor: zoom-in; overflow: hidden;
  min-height: auto;
}
.design-shot iframe {
  width: 620px; height: 1000px;
  transform: scale(.52); transform-origin: top center;
  position: absolute; top: 0; left: 50%; margin-left: -310px;
  border: 0; display: block; pointer-events: none;
}
.design-shot .design-zoom {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .4rem;
  font-family: var(--display); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgb(13 24 38 / .72);
  opacity: 0; transition: opacity .16s ease;
}
.design-shot:hover .design-zoom,
.design-shot:focus-visible .design-zoom { opacity: 1; }

.design-body { display: grid; gap: .25rem; padding: .8rem .9rem 1rem; }
.design-body form { margin: 0; }
.design:hover { transform: none; }
.design.on .design-shot { border-bottom-color: var(--signal); }
.design.on .design-body { background: var(--signal-bg); }

#sablon-mare { min-height: 26rem; }

/* ---------- lățimea previzualizării vii ---------- */

.preview figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.preview .widths { display: inline-flex; gap: .15rem; }
.preview .widths button {
  min-height: auto; padding: .2rem .5rem;
  font-family: var(--display); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); background: none; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
}
.preview .widths button.on {
  color: var(--ink); border-color: var(--line); background: var(--panel-2);
}
/* Ramă de telefon: lățimea unui ecran obișnuit, centrată, ca să se vadă că
   mesajul e îngustat intenționat, nu că s-a stricat ceva. */
.preview[data-width="telefon"] iframe {
  width: 380px; max-width: 100%;
  margin: 0 auto; display: block;
}

/* Formularele de panou sunt limitate la 44rem, ca liniile de text să rămână
   citibile. Editorul de mesaje are însă două coloane, iar sursa și rezultatul
   au amândouă nevoie de lățime. */
.panel form:has(.editor) { max-width: none; }

/* ---------- diagnostic modem ---------- */

.gauges {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.gauge {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--panel-2);
}
.gauge .value {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

/* Barele de semnal sunt derivate din CSQ, nu o a doua sursă de adevăr.
   `CSQ 99` înseamnă „nedetectabil", deci zero bare — nu patru. */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 1em; }
.bars i {
  width: 3px; border-radius: 1px;
  background: var(--line); display: block;
}
.bars i:nth-child(1) { height: 30%; }
.bars i:nth-child(2) { height: 50%; }
.bars i:nth-child(3) { height: 75%; }
.bars i:nth-child(4) { height: 100%; }
.bars[data-bars="1"] i:nth-child(-n+1),
.bars[data-bars="2"] i:nth-child(-n+2),
.bars[data-bars="3"] i:nth-child(-n+3),
.bars[data-bars="4"] i:nth-child(-n+4) { background: var(--signal); }

/* ---------- semnalul, ca pe telefon ---------- */

.signal-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .25rem 0;
}
.signal-value {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.bars.big { height: 2rem; gap: 3px; align-items: flex-end; }
.bars.big i { width: 6px; border-radius: 2px; }
/* Cinci trepte, crescând de la 30% la 100%. Barele stinse rămân vizibile:
   „două din cinci" spune mai mult decât două bare singure. */
.bars.big i:nth-child(1) { height: 30%; }
.bars.big i:nth-child(2) { height: 47%; }
.bars.big i:nth-child(3) { height: 65%; }
.bars.big i:nth-child(4) { height: 82%; }
.bars.big i:nth-child(5) { height: 100%; }
.bars i { transition: background .3s ease; }
.bars[data-bars="5"] i:nth-child(-n+5) { background: var(--signal); }

/* Insigna operatorului: numele lui, în culoarea lui. Nu sigla — se spune ce
   cartelă este în modem, nu se reproduce o marcă. */
.carrier {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--carrier, var(--dim)) 45%, transparent);
  background: color-mix(in srgb, var(--carrier, var(--dim)) 12%, transparent);
  color: color-mix(in srgb, var(--carrier, var(--dim)) 75%, var(--ink));
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap;
}
:root[data-theme="dark"] .carrier {
  color: color-mix(in srgb, var(--carrier, var(--dim)) 70%, #fff);
}

/* Semnul de viață al workerului. Pulsează cât timp scrie; stins, nu. */
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--alert); flex: none;
}
.pulse[data-online="1"] {
  background: var(--signal);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent) }
  70% { box-shadow: 0 0 0 6px transparent }
}

.alerts:empty { display: none; }
.alerts { display: grid; gap: .5rem; margin-top: 1rem; }

/* A doua valoare dintr-o casetă: mai mică și mai stinsă, ca să nu concureze
   cu prima. Folosită pentru interfața portului, lângă nodul lui. */
.gauge .sub-value {
  font-size: .72rem; color: var(--faint); letter-spacing: .04em;
}
.gauge .value { flex-wrap: wrap; min-width: 0; }
.gauge .value.mono { overflow-wrap: anywhere; }

/* ---------- subsol ---------- */

.footer-line { margin: 0; }

.footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.footer-bar .button {
  min-height: auto; padding: .35rem .7rem; font-size: .74rem;
}

/* ---------- bara lipită de jos ---------- */

/* Stă peste conținut, la marginea ferestrei, oriunde ai ajuns cu derularea.
   `backdrop-filter` o ține lizibilă peste ce trece pe dedesubt, fără s-o facă
   opacă — pagina se vede că merge mai departe sub ea. */
.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .5rem clamp(.9rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--display); font-size: .74rem; color: var(--faint);
}
@supports not (backdrop-filter: blur(1px)) {
  .sticky-bar { background: var(--panel); }
}
.sticky-bar .button {
  min-height: auto; padding: .3rem .65rem; font-size: .72rem;
}

/* Conținutul are nevoie de loc dedesubt, altfel ultimul rând al unui tabel
   rămâne pentru totdeauna sub bară. */
body { padding-bottom: 3.25rem; }

/* ---------- meniul de administrare, lipit sub bara de sus ---------- */

/* `top` este exact înălțimea barei de sus: meniul se oprește sub ea, nu peste.
   Ambele sunt fixe în pagină, deci o valoare greșită le-ar suprapune. */
.bar { position: sticky; top: 0; z-index: 50; }
.admin-nav {
  position: sticky; top: var(--bar-h); z-index: 30;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(1px)) {
  .admin-nav { background: var(--panel); }
}

/* Valoarea de rezervă, cât timp scriptul nu a măsurat încă bara. `app.js` o
   suprascrie cu înălțimea reală și o reface la fiecare redimensionare: o cifră
   fixă aici ar rămâne în urmă la prima schimbare de spațiere din antet. */
:root { --bar-h: 3.5rem; }

/* ---------- fundalul siglei ---------- */

/* Previzualizarea arată exact ce va apărea în email. Tabla de șah rămâne
   dedesubt: la „fără fundal" trebuie să se vadă că sigla e transparentă. */
.logo-slot .logo-pad {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 8px;
}
.logo-slot[data-bg="deschis"] .logo-pad { background: #f4f7fb; }
.logo-slot[data-bg="inchis"] .logo-pad { background: #101828; }

.bg-picker {
  display: grid; gap: .3rem; margin: 0 0 .5rem;
}
.bg-options { display: flex; gap: .25rem; flex-wrap: wrap; }
.bg-option {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: auto; padding: .25rem .5rem;
  font-size: .72rem; font-family: var(--body);
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--dim); cursor: pointer;
}
.bg-option.on { border-color: var(--signal); color: var(--ink); background: var(--signal-bg); }
.swatch {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  border: 1px solid var(--line);
}
.swatch[data-bg="deschis"] { background: #f4f7fb; }
.swatch[data-bg="inchis"] { background: #101828; }
/* „Fără fundal": tabla de șah, aceeași convenție ca în previzualizare. */
.swatch[data-bg="fara"] {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d3dde8 25%, transparent 25%, transparent 75%, #d3dde8 75%),
    linear-gradient(45deg, #d3dde8 25%, transparent 25%, transparent 75%, #d3dde8 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}

/* Sigla mică din tabel: semn de recunoaștere, nu decor.
   Celula este `flex`, ca numele să se rupă lângă siglă, nu sub ea. */
.company-cell { display: flex; align-items: center; gap: .4rem; }
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 4px; flex: none;
  border: 1px solid var(--line-soft);
}
.logo-chip[data-bg="deschis"] { background: #f4f7fb; }
.logo-chip[data-bg="inchis"] { background: #101828; }
.logo-chip img { max-width: 1.1rem; max-height: 1.1rem; object-fit: contain; display: block; }
@media (max-width: 46rem) { .company-cell { justify-content: flex-end; } }