/* ── Marchio VPNBox: amministrazione e area clienti ───────────────────────
 *
 * La palette NON sta qui: sta in `style.css`, uguale per tutto il sito e
 * allineata a quella dell'applicazione. Qui restano solo le forme che
 * l'amministrazione e l'area cliente hanno in piu' rispetto alle pagine
 * pubbliche — la colonna, le etichette di stato, le tabelle — portate al
 * vocabolario dell'app.
 */

/* La luce dietro la colonna, come nell'app: il grigio piatto scuro senza di
   essa somiglia a una finestra di terminale. */
body.admin,
body.area {
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(109, 140, 255, 0.14), transparent 60%),
    var(--bg);
}

/* ── Il marchio ─────────────────────────────────────────────────────────
   Nell'app sta in un quadrato arrotondato con lo sfondo sfumato, lo stesso
   dell'icona, dell'installer e del sito. Qui era un logo nudo accanto al
   nome. */
body.admin .brand,
body.area .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.admin .brand .logo,
body.area .brand .logo {
  width: 30px;
  height: 30px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, #18223e, #0a0f1e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* ── Schede ─────────────────────────────────────────────────────────────── */
body.admin .card,
body.area .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

/* I titoli dentro una scheda fanno da etichetta, non da titolo di pagina:
   maiuscoletto piccolo, come nell'app. */
body.admin .card > h2,
body.admin .card > h3,
body.area .card > h2,
body.area .card > h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--debole);
  margin: 0 0 10px;
}

/* ── Comandi ────────────────────────────────────────────────────────────── */
body.admin .btn,
body.area .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 560;
  border: 1px solid var(--line);
  background: var(--superficie);
  color: var(--text);
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}

body.admin .btn:hover,
body.area .btn:hover { background: var(--superficie-alta); }
body.admin .btn:active,
body.area .btn:active { transform: translateY(1px); }

body.admin .btn.primary,
body.area .btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-forte));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(85, 112, 240, 0.3);
}

body.admin .btn.primary:hover,
body.area .btn.primary:hover { filter: brightness(1.07); }

body.admin .btn.danger,
body.area .btn.danger {
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.3);
  background: var(--danger-tenue);
}

/* ── Campi ──────────────────────────────────────────────────────────────── */
body.admin input,
body.admin select,
body.admin textarea,
body.area input,
body.area select,
body.area textarea {
  background: var(--campo);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--text);
}

body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus,
body.area input:focus,
body.area select:focus,
body.area textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 140, 255, 0.16);
  outline: none;
}

/* ── Etichette di stato ─────────────────────────────────────────────────
   Nell'app un'etichetta e' pieno tenue piu' testo colorato, non un contorno:
   un bordo sottile colorato su fondo scuro si legge male, e con tre stati
   affiancati la differenza fra i contorni non si vede. */
body.admin .tag,
body.area .tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  border: 0;
  background: var(--superficie-alta);
  color: var(--muted);
}

body.admin .tag.ok,
body.area .tag.ok {
  background: var(--accent-2-tenue);
  color: var(--accent-2);
}

body.admin .tag.warn,
body.area .tag.warn {
  background: rgba(245, 181, 68, 0.14);
  color: var(--warn);
}

body.admin .tag.no,
body.area .tag.no {
  background: var(--danger-tenue);
  color: var(--danger);
}

/* ── Tabelle ────────────────────────────────────────────────────────────
   L'intestazione diventa un'etichetta come nelle schede dell'app, e le righe
   si separano con un filo translucido invece che con una tinta piatta. */
body.admin table th,
body.area table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--debole);
  border-bottom: 1px solid var(--line);
}

body.admin table td,
body.area table td { border-bottom: 1px solid var(--line); }

/* I numeri in colonna si confrontano solo se le cifre sono larghe uguali. */
body.admin table td,
body.area table td { font-variant-numeric: tabular-nums; }

/* ── Colonna dell'amministrazione ───────────────────────────────────────── */
body.admin .sidebar {
  background: var(--superficie);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

body.admin .gruppo-titolo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--debole);
}

body.admin .voce,
body.admin .apri-gruppo {
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
}

body.admin .voce:hover,
body.admin .apri-gruppo:hover {
  background: var(--superficie-alta);
  color: var(--text);
}

body.admin .voce.attiva {
  background: var(--superficie-alta);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-forte);
}

/* Il contatore delle scadute e' un avviso, non una decorazione. */
body.admin .contatore {
  background: rgba(245, 181, 68, 0.14);
  color: var(--warn);
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  padding: 2px 8px;
}

body.admin .separatore { background: var(--line); }

body.admin .admin-top,
body.area header.site {
  background: var(--superficie);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}