/* Dashboard organizzatore: riusa i design token e le classi base gia'
   definite in home.css (:root, .btn-cta, .form-row, .site-header, .legal-body)
   invece dello stile del pannello admin (admin.css) - e' un'area privata ma
   pensata con lo stesso linguaggio visivo del sito pubblico, non un tool
   interno. Vedi ORGANIZER_STEP2.md per cosa manca ancora. */

/* Layout "sticky footer" classico: pagina sempre almeno 100vh, header e
   footer alla loro altezza naturale, il contenuto centrale (.organizer-main,
   che e' anche il tag <main>) si allarga a riempire esattamente lo spazio
   restante - niente calc(100vh - ...) da indovinare in base all'altezza di
   header/footer, che qui puo' variare (footer con/senza social, ecc.). */
body.organizer-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.organizer-body .site-header,
body.organizer-body .site-footer {
  flex: 0 0 auto;
}

.organizer-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* .lang-link e' la stessa classe/bandierina della home, che pero' in
   home.css sotto i 1024px prende "order: 2; margin-left: auto" pensato per
   IL SUO flex container (.site-header-inner) - qui .lang-link vive invece
   dentro .organizer-header-actions, un flex row diverso, ma la regola non e'
   scoped alla pagina quindi si applica comunque: risultato, la bandierina
   finiva DOPO l'icona profilo mobile (che non ha order, quindi resta a 0)
   invece che prima come in home. Ripristina l'ordine naturale del markup. */
.organizer-header-actions .lang-link {
  order: 0;
  margin-left: 0;
}

/* Nome (o email, se non l'ha compilato) dell'account loggato - utile per
   distinguere a colpo d'occhio quale utente e' attivo, es. durante i test
   con piu' account. Popolato da organizer.js dopo il provisioning. */
/* Ora e' un <button> (apre il profilo, vedi organizer.js activateSubtab),
   non piu' solo testo - reset dello stile di default del browser per
   restare identico a prima nell'aspetto, sottolineato solo in hover/focus
   cosi' resta chiaro che e' cliccabile senza appesantire l'header. */
.organizer-user-name {
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.organizer-user-name:hover,
.organizer-user-name:focus-visible {
  text-decoration: underline;
}

/* Icona profilo per mobile: home.css gestisce gia' un riordino via "order"
   per l'header della home (brand/hamburger/lingua/nav), ma qui la struttura
   e' diversa (niente .site-nav/.nav-toggle, la bandierina sta dentro
   .organizer-header-actions) - quelle regole non si applicano, quindi sotto
   i 600px va gestito da zero invece di ereditare comportamento pensato per
   un'altra pagina. Va dritta al profilo al click (vedi organizer.js), niente
   piu' tendina: "Esci" sotto questa soglia sta in fondo a #dash-nav. */
.organizer-account-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(31, 78, 121, 0.2);
  background: #fff;
  color: var(--bg-dark);
  cursor: pointer;
  padding: 0;
}

/* home.css ha ".brand { order: 1; }" sotto i 1024px, pensato per riordinare
   brand/hamburger/lingua/nav nell'header DELLA HOME (vedi li' il commento) -
   ma la regola e' scoped solo sulla classe .brand, non sulla pagina, quindi
   si applica anche qui: senza questo override .organizer-header-actions
   (che resta a order:0, il default) finirebbe visivamente PRIMA del logo
   invece che dopo, pur essendo dopo nel markup. Stesso breakpoint di
   home.css apposta, per non lasciare una finestra 600-1024px invertita. */
/* #dash-nav (menu hamburger mobile con le voci di .sub-tabs, vedi
   organizer.html): mai visibile su desktop, dove .sub-tabs fa gia' il suo
   lavoro in linea - .hidden (autenticazione, tolto da organizer.js) copre
   il caso "non loggato", questa regola copre il caso "loggato ma desktop". */
#dash-nav { display: none; }

@media (max-width: 1023px) {
  .brand { order: 0; }
  .organizer-header-actions { order: 2; margin-left: auto; }
  #dash-nav-toggle { display: inline-flex; order: 3; }

  #dash-nav:not(.hidden) {
    display: flex;
    order: 4;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding: 0 4px;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }

  #dash-nav.is-open {
    max-height: 60vh;
    opacity: 1;
    visibility: visible;
    padding: 8px 4px 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
  }

  #dash-nav .sub-tab-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(31, 78, 121, 0.1);
    padding: 12px 8px;
    color: var(--text-dark);
  }

  #dash-nav .sub-tab-btn:last-child { border-bottom: none; }
  #dash-nav .sub-tab-btn.active { color: var(--bg-dark); }

  /* "Esci" in fondo al menu hamburger, sotto le voci di navigazione -
     nascosto di default (display:none, vedi sotto), compare solo sotto i
     600px insieme all'icona profilo, quando nome+Esci separati in header
     non ci stanno piu' (vedi media query sotto). */
  #dash-nav .dash-nav-logout {
    display: none;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    padding: 12px 8px;
    margin-top: 6px;
    color: var(--text-dark);
    cursor: pointer;
  }

  .site-header-inner {
    flex-wrap: wrap;
    gap: 0 16px;
  }
}

@media (max-width: 600px) {
  /* Testo lungo ("PartyLab · Area organizzatore") + nome utente + bandiera
     + bottone Esci non ci stanno su una riga stretta: nome ed Esci separati
     spariscono, sostituiti dall'icona profilo (va dritta al profilo) qui
     sotto - "Esci" si raggiunge invece in fondo al menu hamburger (vedi
     #dash-nav .dash-nav-logout sopra). */
  .brand-suffix { display: none; }
  .organizer-user-name,
  #btn-logout { display: none !important; }
  .organizer-account-menu-toggle:not(.hidden) { display: flex; }
  #dash-nav .dash-nav-logout:not(.hidden) { display: block; }
}

.organizer-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#view-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Schermate di login/recovery/signup/imposta-password/pending: un solo box,
   centrato nello spazio restante invece che ancorato in cima come la
   dashboard (piu' card in colonna) - toggled da static/organizer.js in
   showView(). Larghezza limitata (a differenza della dashboard, che resta
   larga quanto il resto del sito): un form di poche righe non deve
   allargarsi fino a --max-width, sarebbe spaesante su schermi larghi. */
.organizer-main.auth-mode {
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.organizer-main.auth-mode .organizer-card {
  width: 100%;
  max-width: 600px;
}

.organizer-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px;
}

.organizer-card h1 {
  margin-top: 0;
  font-size: 24px;
}

.organizer-card h2 {
  font-size: 16px;
  margin: 20px 0 8px;
}

.organizer-card h2:first-child { margin-top: 0; }

.form-row-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* home.css pensa .form-row per la sezione contatti a sfondo scuro (input
   bianchi senza bordo, ben visibili li'): sulle card bianche di questa
   pagina lo stesso input sarebbe bianco su bianco, serve un bordo esplicito. */
.organizer-card .form-row input,
.organizer-card .form-row select,
.organizer-card .form-row textarea,
#event-picker-wrap select {
  border: 1px solid rgba(31, 78, 121, 0.25);
  margin-bottom: 10px;
}

.organizer-card .form-row input:focus,
.organizer-card .form-row select:focus,
.organizer-card .form-row textarea:focus,
#event-picker-wrap select:focus {
  outline: none;
  border-color: var(--bg-dark);
}

.form-row input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Checkbox in linea con l'etichetta invece che impilata sotto (.form-row e'
   flex-direction:column) e allineata a sinistra come gli altri campi -
   stesso principio di .admin-form label.checkbox-inline in admin.css, solo
   sull'input non stretchato a piena larghezza dal resto di .form-row input. */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
  /* Stesso margin-bottom:10px che .form-row input riceve dal suo checkbox
     interno (azzerato qui sotto per non sfalsarlo nella riga flex) - senza
     questo sul contenitore, la riga finiva incollata al campo successivo. */
  margin-bottom: 10px;
}

/* Stesso stile custom di .form-consent in home.css (checkbox privacy
   home/contatti): quadrato bianco con angoli arrotondati, spunta disegnata
   a mano invece dell'aspetto nativo del browser - qui invece del box
   testo/link della privacy c'e' solo l'etichetta del campo. */
.checkbox-inline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-bottom: 0;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(31, 78, 121, 0.25);
  border-radius: 5px;
  display: grid;
  place-content: center;
}

.checkbox-inline input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
  box-shadow: inset 1em 1em var(--accent-dark);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox-inline input[type="checkbox"]:checked::before { transform: scale(1); }

.checkbox-inline input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Picker colore nativo + hex a mano, tenuti in sync via JS (vedi
   organizer.js syncColorField) - stesso schema di .color-field in
   admin.css, per l'override colori nel tab Personalizzazioni. */
.color-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-field input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 0;
}

.color-field input[type="text"] {
  max-width: 110px;
}

/* Riga di bottoni per QR/link/istruzioni kiosk, tab Funzioni. */
.organizer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.qr-preview {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(31, 78, 121, 0.15);
  margin-bottom: 10px;
}

/* Griglia foto tab Galleria - stesso schema di .gallery-grid in admin.css. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.gallery-grid a img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.btn-secondary {
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31, 78, 121, 0.25);
  background: #fff;
  color: var(--text-dark);
  cursor: pointer;
}

.btn-secondary:hover { background: rgba(31, 78, 121, 0.06); }

.btn-secondary:disabled {
  background: #e2e5e8;
  color: #8a8f96;
  border-color: transparent;
  cursor: not-allowed;
}

.btn-secondary:disabled:hover { background: #e2e5e8; }

/* Variante "in evidenza" (sfondo giallo brand invece del bianco standard)
   per l'azione principale della riga, es. "Scarica tutto (ZIP)" nel tab
   Galleria - il grigio di .btn-secondary:disabled sopra vale gia' anche
   qui, non serve ripeterlo. */
.btn-accent {
  background: var(--accent);
  border-color: transparent;
  color: var(--bg-dark);
}

.btn-accent:hover:not(:disabled) { background: var(--accent-dark); }

/* .btn-secondary dentro un contenitore flex-column (es. .form-row-group)
   si stretcha a piena larghezza per via di align-items:stretch - questa
   variante lo tiene alla sua dimensione naturale e un po' piu' compatto,
   per bottoni "secondari" tipo Reset che non devono dominare la riga. */
.btn-small {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 13px;
}

#btn-reset-dash-colors {
  margin-bottom: 10px;
}

.link-btn {
  display: block;
  margin-top: 14px;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  background: none;
  border: none;
  color: var(--text-dark);
  cursor: pointer;
  padding: 0;
}

/* Login/signup: bottone OAuth Google + separatore prima del form
   email/password - vedi static/organizer.js initGoogleAuth. Nessun logo
   Google (asset non self-hosted, vedi reminder.md sui font per lo stesso
   principio): solo testo, stesso linguaggio visivo di .btn-secondary. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31, 78, 121, 0.2);
  background: #fff;
  color: #3c4043;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-google-icon { flex-shrink: 0; }

.btn-google:hover { background: rgba(31, 78, 121, 0.06); }

.auth-divider {
  text-align: center;
  font-size: 13px;
  opacity: 0.65;
  margin: 14px 0;
}

/* Tab Profilo: due card impilate (dati + cambio password) dentro lo stesso
   pannello - stesso gap verticale di #view-dashboard tra le sue card di
   primo livello, specificita' per id apposta per battere .sub-tab-panel.
   active {display:block} senza toccarlo (usato anche da pannelli che sono
   loro stessi la card, es. #dash-general). */
#dash-profile.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.error {
  color: #B3261E;
  font-size: 14px;
  margin: 0;
}

.error.hidden { display: none; }

.organizer-preview {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}

.organizer-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(31, 78, 121, 0.1);
  border-radius: var(--radius-md);
}

.organizer-list li {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(31, 78, 121, 0.08);
}

.organizer-list li:last-child { border-bottom: none; }

.organizer-list .organizer-list-empty {
  display: block;
  padding: 12px;
  opacity: 0.6;
  border-bottom: none;
}

/* Sotto-tab Generali/Personalizzazioni/Storico: stessa idea del pannello
   admin ma senza dipendere da admin.css, che questa pagina non carica. */
.sub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sub-tab-btn {
  font: inherit;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(31, 78, 121, 0.2);
  background: #fff;
  color: var(--text-dark);
  cursor: pointer;
}

.sub-tab-btn.active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-on-dark);
}

/* Sostituita dal menu a tendina in header sotto i 1024px (vedi #dash-nav
   piu' sopra) - qui e non nella media query li' vicina, perche' a parita'
   di specificita' l'ultima regola in ordine nel file vince: la .sub-tabs
   {display:flex} qui sopra e' dopo, quindi cancellerebbe un display:none
   scritto prima di lei. */
@media (max-width: 1023px) {
  .sub-tabs { display: none; }
}

.sub-tab-panel { display: none; }
.sub-tab-panel.active { display: block; }

.hidden { display: none !important; }

.event-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Specificita' maggiore di "#event-picker-wrap select" (width:100%) piu'
   sotto: qui la select deve lasciare spazio al badge di stato accanto,
   non riempire da sola tutta la riga. */
#event-picker-wrap .event-picker-row select {
  flex: 1 1 auto;
  width: auto;
}

/* Stato dell'evento (programmato/in corso/terminato/sospeso) - stessi
   colori di .status-badge in admin.css, cosi' l'organizzatore vede lo
   stesso colpo d'occhio che ha admin nella lista Eventi clienti. */
.status-badge {
  display: inline-block;
  flex-shrink: 0;
  line-height: 1.4;
  padding: 10px;
  margin-top: -10px;
  width: 100px;
  text-align: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge.in-corso { background: #2ecc71; color: #0b2b17; }
.status-badge.pianificato { background: var(--accent); color: #000; }
.status-badge.terminato { background: #e74c3c; color: #2b0b08; }
.status-badge.sospeso { background: #e67e22; color: #2b1a06; }

#event-picker-wrap select {
  font: inherit;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31, 78, 121, 0.2);
  width: 100%;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

/* Picker drag-and-drop stili/temi per l'evento (SortableJS, vedi
   organizer.js): stessa struttura/comportamento di .dnd-picker in admin.css,
   solo ricolorata per le card bianche di questa pagina invece del tema
   scuro admin. */
.dnd-picker-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.dnd-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.dnd-picker-col {
  background: rgba(31, 78, 121, 0.04);
  border: 1px solid rgba(31, 78, 121, 0.2);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.dnd-picker-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  text-transform: uppercase;
}

/* flex:1 (non solo min-height) fa si' che la UL riempia tutta l'altezza di
   .dnd-picker-col invece di stare stretta in cima ad essa: senza, le due
   colonne "Disponibili"/"Selezionati" appaiono alte uguali (lo stretch di
   grid su .dnd-picker), ma solo la UL e' davvero il target di SortableJS -
   lo spazio sotto restava visivamente dentro il riquadro ma non accettava
   drop, costringendo (specie su mobile, dove non c'e' hover a dare un
   feedback prima del rilascio) a trascinare sempre vicino agli item in cima. */
.dnd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Stile fisso (un solo elemento selezionato, vedi organizer.js): trascinare
   non avrebbe alcun effetto reale (l'ospite salta comunque lo step), quindi
   la lista viene disabilitata lato JS (Sortable option "disabled") - qui solo
   il feedback visivo, cursore compreso, cosi' non sembra un drag-and-drop
   rotto invece che intenzionalmente bloccato. */
.dnd-list.locked {
  opacity: 0.6;
}

.dnd-list.locked .dnd-list-item {
  cursor: not-allowed;
}

.dnd-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(31, 78, 121, 0.15);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: grab;
  user-select: none;
}

.dnd-list-item:active {
  cursor: grabbing;
}

.dnd-list-item img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.dnd-list .sortable-ghost {
  opacity: 0.4;
  border: 1px dashed rgba(31, 78, 121, 0.4);
  background: transparent;
}

.hint.warning {
  color: #b9640a;
  font-weight: 700;
}

/* Overlay a tutta pagina durante il cambio evento (piu' fetch in sequenza in
   loadEvent, si sente): stesso spinner (bordo rotante) di .btn-spinner in
   home.css, solo piu' grande e centrato sull'intera viewport invece che
   dentro un bottone. */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 248, 242, 0.75);
}

.page-loader-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(31, 78, 121, 0.2);
  border-top-color: var(--bg-dark);
  animation: btn-spin 0.7s linear infinite;
}

@media (max-width: 600px) {
  .organizer-main { padding: 20px 14px 60px; }
  .organizer-card { padding: 20px; }
}