/* ==========================================================================
   Stile Eternal Body Concept — allineato al sito eternalbodyconcept.com
   Solo estetica: colori, font, forme. Nessun ID/classe/struttura modificati.
   Caricato DOPO lo <style> di ogni pagina, quindi ne sovrascrive i valori.
   Le immagini (foto coach, sfondi) restano quelle originali.
   ========================================================================== */
@import url('/vendor/fonts/oswald.css');
@import url('/vendor/fonts/barlow.css');

:root {
  /* Palette del sito (oklch convertito in esadecimale) */
  --bg: #060606;                 /* background  oklch(12% 0 0)  */
  --surface: #0D0D0D;            /* surface     oklch(16% 0 0)  */
  --surface-2: #181818;          /* surface-2   oklch(21% 0 0)  */
  --surface-inset: #060606;
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.24);
  --input-border: rgba(255,255,255,0.16);
  --text: #F8F8F8;               /* foreground  oklch(98% 0 0)  */
  --text-dim: #929292;           /* muted       oklch(66% 0 0)  */
  --text-faint: #636363;
  --accent: #EEA743;             /* accent      oklch(78% .14 72) */
  --accent-dark: #D4912B;
  --accent-sand: #929292;
  --on-accent: #060606;
  --danger: #E5484D;
  --success: #34D399;
  /* Il sito usa angoli vivi */
  --r-lg: 0; --r-md: 0; --r-sm: 0; --r-pill: 0;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  color-scheme: dark;
}

* { font-family: var(--font-body); }
body { font-family: var(--font-body); }
button, input, select, textarea { font-family: inherit; }

/* ---- Titoli ---- */
h1, h2, h3, .brand-logo, .modal-header h3 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
}
h1 { letter-spacing: 0.02em; }
.brand-logo { font-weight: 400; letter-spacing: 0.2em; }
h2 { font-weight: 500; letter-spacing: 0.18em; }
.modal-header h3 { letter-spacing: 0.12em; font-weight: 600; }

/* ---- Eyebrow / etichette (Oswald maiuscolo spaziato) ---- */
p.subtitle, p.sub, .header p, .massimali-title {
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.3em; color: var(--text-dim);
}
.massimali-title { color: var(--accent); letter-spacing: 0.2em; }
label, th, .hud-item span {
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.18em; color: var(--text-dim);
}
.hud-item strong { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; }

/* ---- Superfici: piatte, bordo sottile, angoli vivi ---- */
.card, .scanner-auth-card, .admin-auth-card {
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.modal-card {
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border-strong); border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.hud-item, .rm-row, .modal-row, .modal-add-box, .add-ex-panel, .pkg-btn, .logo-img { border-radius: 0; }
.qr-container, #reader, #status-box, .alert, .badge { border-radius: 0; }
.header { border-bottom-color: var(--border); }
td { border-bottom-color: var(--border); }
tbody tr:hover { background: var(--surface-2); }

/* ---- Campi ---- */
input, select, .search-bar {
  border-radius: 0; border: 1px solid var(--input-border); background: var(--surface-inset);
}
input:focus, select:focus, .search-bar:focus, .scanner-auth-card input:focus {
  border-color: var(--accent); box-shadow: none; outline: none;
}
#ricerca-manuale-box input, #ricerca-manuale-box div { border-radius: 0 !important; }

/* ---- Bottoni primari: bianco su nero come "Inizia il tuo percorso" ---- */
.btn-primary, .btn-submit, .btn-save-rm,
.btn:not(.btn-secondary):not(.btn-rm):not(.btn-danger):not(:disabled) {
  background: var(--text); color: var(--on-accent); border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.btn-primary:hover, .btn-submit:hover, .btn-save-rm:hover,
.btn:not(.btn-secondary):not(.btn-rm):not(.btn-danger):not(:disabled):hover {
  background: var(--accent); color: var(--on-accent);
}
.btn:disabled { background: var(--surface-2); color: var(--text-faint); border-radius: 0; box-shadow: none; }
.btn-small { padding: 8px 12px; font-size: 10px; letter-spacing: 0.14em; }

/* ---- Bottoni secondari: contorno sottile ---- */
.btn-outline, .btn-secondary, .back-btn, .btn-add-ex, .unit-btn, .btn-rm, .btn-danger, .btn-action {
  border-radius: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.btn-outline, .btn-secondary, .back-btn { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-outline:hover, .btn-secondary:hover, .back-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-dim); }
.btn-rm, .btn-action { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.btn-rm:hover, .btn-action:hover { background: var(--accent); color: var(--on-accent); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger); color: var(--text); }
.btn-add-ex { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); }
.unit-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); }
.unit-btn.active { border-color: var(--accent); color: var(--accent); }
.pkg-btn { background: transparent; border: 1px solid var(--border-strong); }
.pkg-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.link-btn { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- Badge ---- */
.badge { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- Scanner: mirino sobrio, senza alone ---- */
#reader { border: 1px solid var(--accent); box-shadow: none; }
#status-box { font-family: var(--font-display); letter-spacing: 0.04em; box-shadow: none; }

/* ---- Crediti ---- */
.dev-credit { font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; color: var(--text-dim); }
.dev-credit-name { color: var(--text); font-weight: 500; white-space: nowrap; }

/* ---- Telefono: la scheda sale e si appoggia sopra la foto coach (stessa foto) ---- */
@media (max-width: 768px) {
  body::before, .admin-auth-overlay::before {
    height: 340px; background-position: center top;
    background-image: linear-gradient(180deg, rgba(6,6,6,0.10) 0%, rgba(6,6,6,0.25) 60%, rgba(6,6,6,1) 100%), url('/elvira.jpg');
  }
  /* Solo le schede di accesso (figlie dirette del body / overlay), non quelle dell'admin */
  body > .card, .scanner-auth-card, .admin-auth-card { position: relative; z-index: 1; margin-top: -80px; }
  /* Intestazione admin: titolo su due righe, sottotitolo che non si allarga troppo */
  .brand-logo { font-size: 22px; letter-spacing: 0.1em; }
  .header p { letter-spacing: 0.12em; }
}