/* notes-and-layout.css */
/* card note aggiuntive, dettagli struttura sezioni pubbliche, selettore lingua, separatori, accessibilita e responsive */

/* ── NOTE AGGIUNTIVE (coperto, acqua, allergeni, orari, ecc.) ── */
.notes-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 18px;
  box-shadow: var(--shadow-sm);
}
.notes-card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 3px; }
.notes-card-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; }
.notes-card-field { margin-bottom: 12px; }
.notes-card-field label { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; }
.notes-card-field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg);
  outline: none;
  font-family: var(--font-body);
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.notes-card-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.notes-card-actions { display: flex; justify-content: flex-end; }

/* Come vengono mostrate le note nel menu pubblico, in fondo, sopra il footer */
.public-notes-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.9;
  white-space: pre-line;
}

@media (max-width: 600px) {
  .header-mode-toggle { flex-direction: column; }
  .header-mode-option { justify-content: center; }
  .logo-upload-row { flex-direction: column; align-items: flex-start; }
}

/* Logo nell'intestazione del menu pubblico: centrato, dimensione fissa e più
   grande, coerente su mobile e desktop */
.public-menu-logo {
  height: 108px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .public-menu-logo { height: 80px; max-width: 240px; }
}

/* ── STRUTTURA DELLE SEZIONI NEL MENU PUBBLICO ── */
#menu-screen .public-section, 
#menu-screen .section-card { 
  background-color: var(--section-bg) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

/* Titolo della sezione completamente trasparente (senza rettangolo di stacco) */
#menu-screen .public-section-title,
#menu-screen .public-section h2 {
  background-color: transparent !important; /* Rimosso lo sfondo diverso */
  border-bottom: none !important;            /* Rimossa la linea rigida */
  padding: 0 !important;                     /* Nessun padding: il testo resta centrato con la freccina */
  margin: 0;
  color: var(--text);
}

/* I piatti ereditano naturalmente lo sfondo chiaro della sezione */
#menu-screen .dish-row {
  background-color: transparent; 
}

/* ── SELETTORE LINGUE DINAMICO (MENU PUBBLICO) ── */
/* Stato base (Lingua non selezionata): il testo usa esattamente il colore scelto dall'utente */
#menu-screen .language-selector-wrap .btn-lang,
#menu-screen .lang-btn,
#menu-screen #language-select {
  background-color: var(--accent-light) !important; /* Sfondo chiarissimo, tono su tono */
  color: var(--text) !important;                     /* Il testo segue rigorosamente il colore scelto */
  border: 1px solid var(--border) !important;        /* Bordo calcolato automatico */
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Stato Attivo (Lingua selezionata): negativo ammorbidito */
#menu-screen .language-selector-wrap .btn-lang.active,
#menu-screen .lang-btn.active,
#menu-screen .lang-btn.selected {
  background-color: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
  opacity: 0.85;
  box-shadow: none;
}

/* ── LINEE DI SEPARAZIONE NEL MENU PRIVATO (PANNELLO ADMIN) ── */
body:not(.public-menu-mode) hr,
body:not(#menu-screen) hr,
.dashboard-content hr,
.admin-sidebar hr {
  border: none !important;
  border-top: 1px solid var(--accent) !important;
  opacity: 0.2;
  margin: 20px 0;
}

/* Rimuove eventuali bordi marroni persistenti dai sotto-header privati */
.sub-header,
.section-title-bar {
  border-bottom: 1px solid var(--border) !important;
}

/* ── LINEE DI SEPARAZIONE NEL MENU PUBBLICO ── */
/* Forza la riga (hr o tag .divider) a usare solo il colore del testo */
#menu-screen hr,
#menu-screen .divider,
#menu-screen .header-divider {
  border: none !important;
  border-top: 1px solid var(--text) !important;
  background: transparent !important;
  height: 1px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  margin: 24px 0;
}

/* Anche l'eventuale bordo sotto l'intestazione del ristorante segue solo il testo */
#menu-screen .public-header,
#menu-screen header,
#menu-screen .public-menu-header {
  border: none !important;
  border-bottom: 1px solid var(--text) !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── ACCESSIBILITÀ ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── RESPONSIVE (MENO SPAZIO VERTICALE) ── */
@media (max-width: 600px) {
  .auth-card { padding: 28px 20px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .app-header h2 { font-size: 22px; }

  nav { padding: 0 12px; gap: 6px; }
  .logo { font-size: 16px; }
  #nav-user { gap: 8px; }
  .status-badge { font-size: 10px; padding: 4px 8px; }
  .account-dropdown { right: 0; left: auto; min-width: 200px; }

  /* Barra nome ristorante: tutto impilato per non uscire dallo schermo */
  .restaurant-name-bar { flex-direction: column; align-items: stretch; padding: 12px; }
  .rest-name-wrap { flex: 1 1 auto; width: 100%; }
  .restaurant-name-bar input { flex: 1 1 auto; width: 100%; font-size: 16px; }
  .currency-label { margin-top: 4px; }
  #currency-selector { width: 100%; flex: 1 1 auto; }
  .save-name-btn { width: 100%; }

  .preview-card { flex-direction: column; align-items: stretch; padding: 14px; gap: 12px; }
  .qr-box { align-items: center; width: 100%; border-top: 1px solid var(--border); padding-top: 12px; gap: 12px; }
  .qr-box-buttons { flex: 1; flex-direction: column; }
  .qr-box-buttons .btn { width: 100%; }
  
  /* Piatti su mobile: Descrizione va a capo, padding minimizzati */
  .dish-row { flex-wrap: wrap; padding: 9px 11px; gap: 4px 8px; }
  .dish-row .dish-name { flex: 1 1 60%; }
  .dish-row .dish-price { flex: 0 0 auto; font-size: 16px; }
  .dish-row .dish-desc { flex: 1 1 100%; white-space: normal; margin-top: 2px; font-size: 12px; }
  
  /* Form aggiunta piatti compattato a griglia */
  .add-dish-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .add-dish-form .edit-badge { grid-column: span 2; }
  .add-dish-form .f:first-of-type { grid-column: span 2; }
  .add-dish-form .f:nth-of-type(2) { grid-column: span 2; }
  .add-dish-form > div:last-child { grid-column: span 2; margin-top: 4px; }
  .add-dish-form > div:last-child button { width: 100%; padding: 11px; }
}