/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  STILI COMUNI — Just Caffè / Spaccio all'SSE
 * ═══════════════════════════════════════════════════════════════════════════
 *  Foglio condiviso da tutte le 8 pagine. Tutti i colori sono CSS variables
 *  applicate runtime dal theme-loader.js (modificabili dall'Amministratore).
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
  /* Fallback (sovrascritti dal theme-loader appena risponde l'API) */
  --c-sfondo-primario: #0a0a0a;
  --c-sfondo-secondario: #1a1a1a;
  --c-testo-primario: #ffffff;
  --c-testo-muted: #a0a0a0;
  --c-accento-primario: #e44d26;
  --c-accento-secondario: #d9534f;
  --c-successo: #00FF7F;
  --c-errore: #ff6b6b;
  --c-bordo: #333333;
  --c-vetro-sfondo: rgba(255, 255, 255, 0.1);
  --c-vetro-bordo: rgba(255, 255, 255, 0.2);
  --font-principale: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-titoli: 'Playfair Display', Georgia, serif;
  --dim-base: 16px;
  --raggio: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-principale);
  font-size: var(--dim-base);
  color: var(--c-testo-primario);
  background: var(--c-sfondo-primario);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Cielo stellato animato (attivabile da Settings) ─────────────────── */
body.ui-stars {
  background:
    radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%),
    #000;
  background-attachment: fixed;
  position: relative;
}
/* Layer di stelle: due pseudo-elementi sovrapposti sul body con scroll fisso */
body.ui-stars::before,
body.ui-stars::after {
  content: "";
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 0;  /* SOPRA il bg del body, SOTTO i figli (che hanno position:relative o sono inline) */
}
/* Strato 1 — stelle piccole bianche, fitte */
body.ui-stars::before {
  background-image:
    radial-gradient(2px 2px at 10% 10%, #fff, transparent 60%),
    radial-gradient(2px 2px at 25% 30%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent 60%),
    radial-gradient(2px 2px at 60% 25%, #fff, transparent 60%),
    radial-gradient(2px 2px at 75% 12%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 35%, #fff, transparent 60%),
    radial-gradient(2px 2px at 15% 50%, #fff, transparent 60%),
    radial-gradient(2px 2px at 30% 65%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 55%, #fff, transparent 60%),
    radial-gradient(2px 2px at 70% 75%, #fff, transparent 60%),
    radial-gradient(2px 2px at 85% 60%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 5% 80%, #fff, transparent 60%),
    radial-gradient(2px 2px at 20% 90%, #fff, transparent 60%),
    radial-gradient(2px 2px at 45% 85%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 95%, #fff, transparent 60%),
    radial-gradient(2px 2px at 80% 85%, #fff, transparent 60%),
    radial-gradient(2.5px 2.5px at 95% 70%, #fff, transparent 60%);
  background-size: 350px 350px;
  background-repeat: repeat;
  animation: stars-drift 120s linear infinite;
}
/* Strato 2 — stelle più grandi colorate, profondità */
body.ui-stars::after {
  background-image:
    radial-gradient(3px 3px at 18% 22%, #fff, transparent 60%),
    radial-gradient(3px 3px at 55% 18%, #ffe9b8, transparent 60%),
    radial-gradient(2.5px 2.5px at 82% 42%, #fff, transparent 60%),
    radial-gradient(3px 3px at 28% 70%, #c4d8ff, transparent 60%),
    radial-gradient(2.5px 2.5px at 70% 65%, #fff, transparent 60%),
    radial-gradient(3px 3px at 12% 88%, #fff, transparent 60%),
    radial-gradient(3px 3px at 90% 90%, #ffd5b8, transparent 60%);
  background-size: 600px 600px;
  background-repeat: repeat;
  animation: stars-drift 220s linear infinite reverse;
  opacity: 0.9;
}
@keyframes stars-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, -50%, 0); }
}
/* Le sezioni di contenuto devono stare SOPRA le stelle.
   ATTENZIONE: NON usare body.ui-stars > * universale, perché sovrascriverebbe
   position:fixed di elementi come .cart-footer, .modal, .header-tavolo sticky. */
body.ui-stars #ui-navbar,
body.ui-stars .hero,
body.ui-stars .about-section,
body.ui-stars .news-section,
body.ui-stars footer,
body.ui-stars header,
body.ui-stars .container,
body.ui-stars .container-narrow,
body.ui-stars .setup-tavolo,
body.ui-stars #mainContent,
body.ui-stars #successScreen,
body.ui-stars .selector-wrap,
body.ui-stars .login-box,
body.ui-stars .admin-layout,
body.ui-stars .container-agenda,
body.ui-stars .menu-grid,
body.ui-stars .category-nav,
body.ui-stars .ordini-grid {
  position: relative;
  z-index: 1;
}
/* Elementi fixed/sticky che devono restare tali, sopra il cielo */
body.ui-stars .cart-footer,
body.ui-stars .modal,
body.ui-stars .header-tavolo,
body.ui-stars .cat-bar {
  z-index: 200;
}

/* ─── Header brand ─────────────────────────────────────────────────────── */
.brand-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-vetro-bordo);
}
.brand-header img.ui-logo {
  height: 56px;
  width: 56px;
  border-radius: 50%;
}
.brand-header .brand-text { display: flex; flex-direction: column; }
.brand-header .brand-name { font-family: var(--font-titoli); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.brand-header .brand-tag  { color: var(--c-testo-muted); font-size: 0.85rem; margin-top: 4px; }

/* ─── Tipografia ──────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 700; }
h1 { font-size: 2rem; margin: 0 0 12px; }
h2 { font-size: 1.5rem; margin: 0 0 10px; }
h3 { font-size: 1.2rem; margin: 0 0 8px; }
p  { line-height: 1.5; margin: 0 0 10px; }
.text-muted { color: var(--c-testo-muted); }
.text-accent { color: var(--c-accento-primario); }
.text-error  { color: var(--c-errore); }
.text-success{ color: var(--c-successo); }

/* ─── Layout container ────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.container-narrow {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* ─── Card "vetro" ────────────────────────────────────────────────────── */
.card {
  background: var(--c-vetro-sfondo);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-vetro-bordo);
  border-radius: var(--raggio);
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.card-light {
  background: rgba(255, 255, 255, 0.85);
  color: #2c3e50;
}

/* ─── Form ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-testo-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--c-bordo);
  border-radius: 8px;
  color: var(--c-testo-primario);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-accento-primario);
  box-shadow: 0 0 0 3px rgba(228, 77, 38, 0.15);
}
.form-group input::placeholder { color: var(--c-testo-muted); opacity: 0.6; }
.form-group select option {
  background: var(--c-sfondo-secondario);
  color: var(--c-testo-primario);
}

/* ─── Bottoni ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  background: var(--c-accento-primario);
  color: white;
}
.btn:hover { background: var(--c-accento-secondario); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(228, 77, 38, 0.3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--c-accento-primario);
  color: var(--c-accento-primario);
}
.btn-outline:hover { background: var(--c-accento-primario); color: white; }
.btn-ghost {
  background: transparent;
  color: var(--c-testo-primario);
  border: 1px solid var(--c-bordo);
}
.btn-ghost:hover { background: var(--c-vetro-sfondo); border-color: var(--c-accento-primario); }
.btn-danger { background: var(--c-errore); }
.btn-block { display: block; width: 100%; }

/* ─── Tab navigation ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  padding: 10px 18px;
  border: 1px solid var(--c-bordo);
  background: transparent;
  color: var(--c-testo-muted);
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}
.tab-btn:hover { border-color: var(--c-accento-primario); color: var(--c-testo-primario); }
.tab-btn.active { background: var(--c-accento-primario); color: white; border-color: var(--c-accento-primario); }

/* ─── Toggle switch ───────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute; inset: 0;
  background: var(--c-bordo);
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 22px; width: 22px;
  left: 4px; bottom: 4px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .slider { background: var(--c-successo); }
.toggle-switch input:checked + .slider::before { transform: translateX(26px); }

/* ─── Messaggi ────────────────────────────────────────────────────────── */
.msg-success {
  border: 1px solid var(--c-successo);
  background: rgba(0, 255, 127, 0.08);
  color: var(--c-testo-primario);
  padding: 16px;
  border-radius: 8px;
}
.msg-success h3, .msg-success h4 { color: var(--c-successo); margin-top: 0; }
.msg-error {
  border: 1px solid var(--c-errore);
  background: rgba(255, 107, 107, 0.08);
  color: var(--c-errore);
  padding: 16px;
  border-radius: 8px;
}

/* ─── Bottone "Torna alla Home" — presente in tutte le pagine operative ─ */
.btn-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--c-vetro-sfondo);
  border: 1px solid var(--c-vetro-bordo);
  color: var(--c-testo-primario);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-home:hover {
  background: var(--c-accento-primario);
  border-color: var(--c-accento-primario);
  color: #fff;
}
.btn-home::before { content: "←"; font-size: 1.1rem; }

/* ─── Utility ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ─── Loader spinner ──────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid var(--c-vetro-bordo);
  border-top-color: var(--c-accento-primario);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Modalità performance ────────────────────────────────────────────── */
/* Quando .ui-no-glass viene applicato al body, disattiva backdrop-filter su
   tutte le card/nav (pesante per GPU su PC con grafica integrata). */
body.ui-no-glass .card,
body.ui-no-glass .ui-navbar,
body.ui-no-glass .category-nav,
body.ui-no-glass .ui-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--c-sfondo-secondario) !important;
}
body.ui-no-glass.ui-stars::before,
body.ui-no-glass.ui-stars::after {
  display: none;
}

/* Quando .ui-no-anim viene applicato, disattiva tutte le animazioni. */
body.ui-no-anim *,
body.ui-no-anim *::before,
body.ui-no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .brand-header { padding: 14px 16px; }
  .brand-header .brand-name { font-size: 1.3rem; }
  h1 { font-size: 1.6rem; }
  .container, .container-narrow { padding: 14px; }
  .btn { padding: 10px 18px; font-size: 0.9rem; }
}