/*
 * Boogo — rivestimento "Understory" (opt-in: tema con `layout: 'understory'`).
 * Caricato da layout.ejs SOLO per quei temi, e ogni regola parte da
 * [data-layout="understory"]: gli altri clienti non vedono nulla di questo file.
 * Serve per le pagine di contorno (elenco, calendario, prenota, paga, conferme) che
 * condividono la struttura classica: cambia la FORMA (raggi, ombre, bottoni, larghezza),
 * la logica e il markup restano quelli di sempre. Misure prese dalla pagina di riferimento:
 * card 24px con bordo sottile, bottoni 8px alti 48px, testo 16px semibold.
 */
[data-layout="understory"] { background-color: #fbfcfd; }

/* Stessa larghezza del contenuto e dell'intestazione (1200px). */
[data-layout="understory"] .max-w-5xl { max-width: 1200px; }

/* Riquadri: 16px di base, 24px per le card grandi (intestate o a bordo pieno). */
[data-layout="understory"] main .rounded-xl { border-radius: 16px; }
[data-layout="understory"] main .rounded-xl.overflow-hidden,
[data-layout="understory"] main .rounded-xl.bg-brand-700,
[data-layout="understory"] main a.group.rounded-xl { border-radius: 24px; }
[data-layout="understory"] main .rounded-xl.overflow-hidden,
[data-layout="understory"] main a.group.rounded-xl { box-shadow: 0 1px 2px rgba(12, 14, 15, .05); }
[data-layout="understory"] main a.group.rounded-xl:hover { box-shadow: 0 4px 14px rgba(12, 14, 15, .08); }

/* Bottoni principali: 8px, alti 48px, 16px semibold, blu petrolio del tema. */
[data-layout="understory"] main button.bg-brand-600,
[data-layout="understory"] main a.bg-brand-600 {
  min-height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600;
}

/* Campi: bordo sottile e focus nel colore del tema (mai l'anello blu di sistema). */
[data-layout="understory"] main input:not([type="checkbox"]):not([type="radio"]),
[data-layout="understory"] main select,
[data-layout="understory"] main textarea { border-color: #ced1d4; border-radius: 12px; }
[data-layout="understory"] main input:focus,
[data-layout="understory"] main select:focus,
[data-layout="understory"] main textarea:focus { border-color: #013952; box-shadow: 0 0 0 3px rgba(1, 57, 82, .15); outline: none; }