/* ROGER 2027 — foglio di stile centralizzato.
   Un solo file per tutta l'app: niente <style> nelle view.

   Tema chiaro/scuro: chiaro di default per tutti gli utenti, a
   prescindere dalla preferenza del sistema operativo — lo scuro si
   attiva SOLO con l'attributo data-theme="dark" su <html>, impostato
   dal toggle in navbar (vedi assets/js/theme.js) e ricordato in
   localStorage, così resta la scelta dell'utente da una visita
   all'altra invece di seguire l'OS. */

:root, :root[data-theme="light"] {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-alt: #f8f9fb;
    --text: #1f2430;
    --text-muted: #6b7280;
    --border: #e2e4e9;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-contrast: #ffffff;
    --link: #4f46e5;
    --danger: #c0392b;
    --danger-bg: #f8d7da;
    --danger-text: #721c24;
    --success-bg: #d4edda;
    --success-text: #155724;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;
    --shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, .14);
    --radius: 10px;

    /* Colori "pieni" (non le tinte pallide sopra), usati per badge di
       stato, header colorati delle card ed etichette a bordo colorato —
       il linguaggio visivo "a colpo d'occhio" che mancava rispetto alla
       vecchia app (bozza=ambra, pubblicato/ok=verde, archiviato=grigio).
       Palette "C — Moderna" scelta dall'utente dopo confronto visivo
       (2026-07-26): accento indaco al posto del viola scuro, stati più
       saturi in stile SaaS (ambra/smeraldo/ardesia/azzurro). */
    --c-warning: #d97706;
    --c-warning-contrast: #ffffff;
    --c-success: #059669;
    --c-success-contrast: #ffffff;
    --c-secondary: #64748b;
    --c-secondary-contrast: #ffffff;
    --c-info: #0284c7;
    --c-info-contrast: #ffffff;
    --c-danger: #c0392b;
    --c-danger-contrast: #ffffff;
    --table-scroll-shadow: rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] {
    --bg: #14151b;
    --surface: #1e2028;
    --surface-alt: #262835;
    --text: #e7e8ec;
    --text-muted: #9aa0ac;
    --border: #363946;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-contrast: #1e1b4b;
    --link: #a5b4fc;
    --danger: #ff6b6b;
    --danger-bg: #3a1f22;
    --danger-text: #ff9b9b;
    --success-bg: #1e3a28;
    --success-text: #7fd99a;
    --info-bg: #1c333c;
    --info-text: #7fd0e6;
    --shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);
    --c-warning: #f59e0b;
    --c-warning-contrast: #1f1300;
    --c-success: #10b981;
    --c-success-contrast: #042f1f;
    --c-secondary: #94a3b8;
    --c-secondary-contrast: #12121a;
    --c-info: #38bdf8;
    --c-info-contrast: #062330;
    --c-danger: #ff6b6b;
    --c-danger-contrast: #2a0a0a;
    --table-scroll-shadow: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/* Grid a 2 righe (navbar / tutto il resto) invece di flex-grow
   annidato: quest'ultimo lascia la riga centrale troppo corta su
   Firefox quando il contenuto della pagina è breve. Il footer NON è
   più un fratello separato di .layout: sta dentro .content-column
   insieme a main, cosicché la colonna colorata della sidebar (che si
   allunga in altezza quanto .content-column) copra anche l'area del
   footer invece di fermarsi appena sopra — la sidebar deve coprire
   tutta l'altezza della pagina, footer incluso, non solo arrivarci. */
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 1fr);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { color: var(--link); }

/* ---- Navbar -----------------------------------------------------------
   Riga identità (logo, nome modulo cliccabile, account) fissa in alto
   (sticky) — --nav-bg impostato inline in base al modulo corrente (vedi
   App\Core\Moduli e Controller::render()). La navigazione del modulo non
   sta più qui: è nella sidebar a sinistra (vedi sotto), stessa tinta di
   questa barra così le due si percepiscono come un unico blocco. */

nav.topbar {
    background: var(--nav-bg, var(--accent));
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    position: sticky;
    top: 0;
    z-index: 30;
}
nav.topbar .topbar-riga1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.5rem;
    flex-wrap: wrap;
    gap: .5rem;
}
nav.topbar .topbar-left { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
nav.topbar a { color: #fff; text-decoration: none; }
nav.topbar .topbar-riga1 > .links a:hover, nav.topbar .brand:hover, nav.topbar .module-name:hover { text-decoration: underline; }
nav.topbar .brand { font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: .6rem; }
nav.topbar .brand img { height: 30px; display: block; }
nav.topbar .module-name { font-weight: 400; font-style: italic; opacity: .9; }
/* Sotto i 640px il nome modulo va spesso a capo sotto il logo (barra su
   due righe) — lo si nasconde piuttosto che lasciarlo andare a capo: il
   modulo è comunque ripetuto nell'H1 della pagina, stesso principio già
   usato per .workflow-step span.label. */
@media (max-width: 640px) { nav.topbar .module-name { display: none; } }
nav.topbar .links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

nav.topbar .hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .3rem;
}
nav.topbar .theme-toggle {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
nav.topbar .theme-toggle:hover { background: rgba(255,255,255,.28); }

/* Deliberatamente discreto: chi arriva su una pagina pubblica non deve
   essere invitato a fare login, resta un accesso disponibile ma defilato
   (richiesto esplicitamente 2026-08-11, era prima un link testuale "Login"
   ben visibile). */
nav.topbar .login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    opacity: .6;
}
nav.topbar .login-link:hover { opacity: 1; background: rgba(255,255,255,.15); text-decoration: none; }

nav.topbar .logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    opacity: .75;
}
nav.topbar .logout-link:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* ---- Sidebar ------------------------------------------------------------
   Navigazione del modulo, sempre visibile a sinistra su desktop (come
   grestone2), stessa tinta della navbar (--nav-bg) così le due si
   percepiscono come un unico blocco colorato. Su mobile diventa un
   drawer a scomparsa (vedi media query più sotto e assets/js/sidebar.js). */

/* align-items: stretch (default) — la colonna colorata deve arrivare
   fino in fondo alla riga, non fermarsi all'altezza del proprio elenco
   di link quando il contenuto in main è più alto. */
/* justify-content:center, non margin:auto su main: main deve continuare
   a riempire tutta la colonna disponibile (flex:1) fino al suo
   max-width — il centraggio dello spazio che avanza oltre quel tetto
   (schermi molto larghi, soprattutto senza sidebar) va fatto dal
   contenitore, altrimenti si ripresenta il bug della larghezza legata
   al contenuto. */
.layout { display: flex; min-height: 0; }

/* Colonna che contiene main+footer, a fianco della sidebar: flex:1 la fa
   allungare in altezza quanto la sidebar (o viceversa), così main può
   spingere il footer in fondo su pagine corte, e la sidebar arriva a
   coprire anche la riga del footer, non solo il bordo sopra di essa. */
.content-column { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.content-column > footer { width: 100%; }

/* .sidebar è solo la colonna colorata a piena altezza (si allunga con
   main via align-items:stretch); .sidebar-inner dentro è la parte che
   NON scorre con la pagina — resta agganciata subito sotto la navbar
   (posizione calcolata da assets/js/sidebar.js in --navbar-h, la navbar
   non ha un'altezza fissa nota a priori) finché il fondo della colonna
   non passa oltre, esattamente come una sidebar "fissa" ma senza i
   problemi di allineamento di una position:fixed indipendente. */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--nav-bg, var(--accent));
}
.sidebar-inner {
    position: sticky;
    top: var(--navbar-h, 60px);
    max-height: calc(100vh - var(--navbar-h, 60px));
    overflow-y: auto;
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.sidebar a {
    display: block;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .9rem;
}
.sidebar a:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar a.active { background: #fff; color: var(--nav-bg, var(--accent)); font-weight: 600; }
.sidebar-close { display: none; }
.sidebar-overlay { display: none; }

/* ---- Layout --------------------------------------------------------- */

/* flex:1 dovrebbe bastare a riempire tutto lo spazio rimanente dopo la
   sidebar, ma un margin orizzontale "auto" su un flex item non centra
   e basta: i margini auto assorbono lo spazio libero al posto della
   crescita via flex-grow, quindi main finiva per restringersi al
   contenuto (es. il testo dell'opzione selezionata in una <select>)
   invece di riempire sempre la riga — scoperto perché cambiando
   scenario nel calendario, con un nome più corto, tutta la pagina si
   restringeva. width:100% forza la crescita indipendentemente dal
   contenuto; niente margine orizzontale, main riempie già tutta la
   colonna da solo (nessuno spazio residuo da "centrare"). */
main {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    margin: 2rem 0;
    padding: 0 1.5rem;
}
/* Una sola larghezza standard in tutta l'app (1180px, main sopra):
   niente più eccezioni narrow/medium/wide per singole pagine o card
   (rimosse apposta il 2026-07-27) — anche quando una larghezza minore
   sarebbe "più giusta" per un form breve, il beneficio non vale la
   sensazione di instabilità nel vedere il contenuto cambiare misura
   spostandosi da una pagina all'altra. Unica eccezione: le pagine
   pre-login (login, recupero password), che restano strette perché non
   fanno parte della navigazione con sidebar — non c'è nessun "salto"
   percepito, si vedono una volta sola e mai una accanto all'altra. */
main.narrow { max-width: 520px; }

.card {
    /* Vuoto/trasparente di default: i modificatori .card-accent/.card-warning/ecc.
       sotto si limitano a valorizzarla, invece di ridefinire l'intero box-shadow
       (serve a tenere accento + ombra + hover sincronizzati in un solo posto). */
    --accento-bordo: transparent;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* L'accento non è più border-left: con bordi di spessore diverso sui vari
       lati (4px a sinistra, 1px altrove), border-radius arrotonda l'angolo in
       modo visibilmente rotto (verificato: capita anche su una card senza
       nessun .card-header dentro, non è un problema di quello — segnalato
       dall'utente con screenshot, un primo tentativo di aggiustare l'header
       non risolveva perché il problema era qui). Un box-shadow inset segue
       sempre correttamente l'arrotondamento, qualunque sia il suo spessore. */
    box-shadow: var(--shadow), inset 4px 0 0 var(--accento-bordo);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Card "vive": si solleva leggermente al passaggio del mouse — per le
   card che rappresentano un'entità cliccabile/esplorabile (scenario,
   film, tile di azione rapida), non per i pannelli di solo contenuto
   (form, tabelle), dove il movimento sarebbe fuorviante. */
.card-hover:hover, .module-tile:hover, .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), inset 4px 0 0 var(--accento-bordo);
}

/* Card con bordo colorato a sinistra (stato/categoria a colpo d'occhio,
   es. scenario bozza/pubblicato/archiviato, statistiche dashboard). */
.card-accent { --accento-bordo: var(--nav-bg, var(--accent)); }
.card-warning { --accento-bordo: var(--c-warning); }
.card-success { --accento-bordo: var(--c-success); }
.card-secondary { --accento-bordo: var(--c-secondary); }
.card-info { --accento-bordo: var(--c-info); }
.card-danger { --accento-bordo: var(--c-danger); }

/* Intestazione colorata a tutta larghezza dentro una .card (come le
   card-header bg-* della vecchia app): "sborda" ai margini della card
   con margin negativo, poi richiude gli angoli con border-radius. */
.card-header {
    margin: -1.5rem -1.5rem 1rem;
    padding: .8rem 1.5rem;
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.card-header h1, .card-header h2, .card-header h3 { margin: 0; }
.card-header-warning   { background: var(--c-warning);   color: var(--c-warning-contrast); }
.card-header-success   { background: var(--c-success);   color: var(--c-success-contrast); }
.card-header-accent    { background: var(--nav-bg, var(--accent)); color: #fff; }

/* Statistica in evidenza (dashboard): icona + numero grande + etichetta,
   bordo colorato a sinistra per differenziare le metriche. */
.stat-card { text-align: center; }
.stat-card .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: .6rem;
    background: var(--surface-alt);
}
.card-accent .stat-icon { background: color-mix(in srgb, var(--accent) 18%, var(--surface-alt)); }
.card-warning .stat-icon { background: color-mix(in srgb, var(--c-warning) 22%, var(--surface-alt)); }
.card-success .stat-icon { background: color-mix(in srgb, var(--c-success) 22%, var(--surface-alt)); }
.card-secondary .stat-icon { background: color-mix(in srgb, var(--c-secondary) 22%, var(--surface-alt)); }
.card-danger .stat-icon { background: color-mix(in srgb, var(--c-danger) 22%, var(--surface-alt)); }
.card-info .stat-icon { background: color-mix(in srgb, var(--c-info) 22%, var(--surface-alt)); }
.stat-card .stat-number { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { color: var(--text-muted); font-size: .85rem; margin-bottom: .5rem; }
.stat-card .stat-number.text-accent { color: var(--accent); }
.stat-card .stat-number.text-warning { color: var(--c-warning); }
.stat-card .stat-number.text-success { color: var(--c-success); }
.stat-card .stat-number.text-secondary { color: var(--c-secondary); }
.stat-card .stat-number.text-danger { color: var(--c-danger); }
.stat-card .stat-number.text-info { color: var(--c-info); }

/* Variante compatta: icona a sinistra, numero+etichetta a destra sulla
   stessa riga (ed eventuale azione ancora più a destra) — dimezza
   l'altezza rispetto a .stat-card verticale, usata dove lo spazio
   verticale in home conta più dell'enfasi del numero grande centrato. */
/* flex-wrap:wrap: se la card è stretta (es. 4 in riga su desktop non
   ampio) e l'etichetta è lunga, il testo di stat-body non ha spazio a
   sufficienza per stare su una riga accanto al pulsante — senza wrap
   il pulsante restava a larghezza fissa (flex-shrink:0) e il testo si
   accartocciava/sovrapponeva sotto di esso invece di andare a capo in
   modo pulito. Con il wrap il pulsante scende su una riga propria. */
.stat-card-h { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .8rem; text-align: left; }
.stat-card-h .stat-icon { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; margin-bottom: 0; flex-shrink: 0; }
.stat-card-h .stat-body { min-width: 0; flex: 1 1 auto; }
.stat-card-h .stat-number { font-size: 1.6rem; line-height: 1.15; }
.stat-card-h .stat-label { margin-bottom: 0; }
.stat-card-h .btn, .stat-card-h .hint { margin-left: auto; flex-shrink: 0; }

/* Riga di esattamente 4 totalizzatori (dashboard programmazione): a
   differenza di .module-grid (auto-fill, quante colonne entrano) qui
   vogliamo sempre le 4 card sulla stessa riga sui desktop, con un tetto
   di larghezza per non farle diventare enormi sugli schermi larghi —
   e un fallback a 2 poi 1 colonna sotto i breakpoint già in uso nel resto del CSS. */
.stat-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 320px)); gap: .75rem; }
@media (max-width: 900px) { .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 280px)); } }
@media (max-width: 640px) { .stat-grid-4 { grid-template-columns: 1fr; } }

/* Builder playlist pubblicità (aggiungi/rimuovi/riordina a pulsanti,
   niente drag&drop — funziona identico su desktop e mobile, vedi
   app/Views/pubblicita/playlist_form.php). */
.builder-lista { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.builder-riga { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.builder-riga:last-child { border-bottom: none; }
.builder-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.builder-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-azioni { display: flex; gap: .2rem; flex-shrink: 0; }
/* Bottoni ▲/▼/✕ del builder: qui .btn-link è l'unica azione della riga
   (non un link inline dentro testo/tabella), quindi serve un'area di tap
   vera — non i pochi px di default di .btn-link altrove. */
.builder-azioni .btn-link { padding: .5rem; font-size: 1rem; min-width: 2.75rem; min-height: 2.75rem; text-align: center; border-radius: 6px; }
.builder-azioni .btn-link:hover:not(:disabled) { background: var(--surface-alt); text-decoration: none; }
.builder-azioni .btn-link:disabled { opacity: .3; cursor: default; }

footer {
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 2rem 0;
}

/* ---- Flash messages --------------------------------------------------- */

/* display:block (non flex): il contenuto di un flash può includere testo
   ricco con <strong>/<a>/badge — in un flex container ogni elemento e ogni
   run di testo diventa un item separato, spezzando il flusso naturale del
   testo invece di andare a capo normalmente. L'icona è posizionata sopra
   con padding-left, non come flex item. */
.flash { position: relative; padding: .75rem 1rem .75rem 2.3rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid transparent; }
.flash::before { position: absolute; left: .8rem; top: .7rem; font-size: 1.1rem; line-height: 1; }
.flash-success { background: var(--success-bg); color: var(--success-text); border-left-color: var(--c-success); }
.flash-success::before { content: "✅"; }
.flash-error   { background: var(--danger-bg);  color: var(--danger-text); border-left-color: var(--c-danger); }
.flash-error::before { content: "⚠️"; }
.flash-info    { background: var(--info-bg);    color: var(--info-text); border-left-color: var(--c-info); }
.flash-info::before { content: "ℹ️"; }
.flash-warning { background: color-mix(in srgb, var(--c-warning) 16%, var(--surface)); color: var(--text); border-left-color: var(--c-warning); }
.flash-warning::before { content: "🎭"; }

/* ---- Toolbar (riga d'intestazione pagina) ------------------------------
   Titolo/descrizione a sinistra, azioni (pulsanti) a destra, a capo su
   mobile — pattern ripetuto identico inline in ~20 viste prima di essere
   centralizzato qui. */
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* Il primo titolo di una card/panel sta a filo con il bordo — evita di
   dover ripetere style="margin-top:0;" su ogni nuovo h1/h2/h3/h4 messo
   in cima a una card (era duplicato inline decine di volte). */
.card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .card > h4:first-child,
.panel > h1:first-child, .panel > h2:first-child, .panel > h3:first-child, .panel > h4:first-child { margin-top: 0; }

/* ---- Forms ------------------------------------------------------------
   .control è la classe base di TUTTI gli input/select, dentro o fuori
   da un .field (es. le select nelle celle di tabella in admin/user_form) —
   prima erano stilizzate solo se dentro .field, causando incoerenza. */

.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .3rem; font-size: .9rem; color: var(--text-muted); }

/* Honeypot anti-bot sui form pubblici (Controller::honeypotSospetto()):
   fuori schermo invece di display:none — alcuni bot più furbi saltano
   apposta i campi display:none proprio perché è il trucco più noto, ma
   compilano comunque tutto ciò che è nel DOM e "visibile" al parser. */
.hp-campo { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Selettore "a esclusione" invece che elencare ogni type= uno per uno:
   altrimenti ogni nuovo tipo di input (è già successo con datetime-local
   e number) resta silenziosamente senza stile finché qualcuno non se ne
   accorge a schermo. */
.control,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
select, textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.3;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type=date], input[type=time] { line-height: normal; }

input[type=file] {
    display: block;
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: .9rem;
}
input[type=file]::file-selector-button {
    margin-right: .75rem;
    padding: .4rem .8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--accent); }

/* Coppia data+ora: due controlli nativi separati (<input type="date"> +
   <input type="time">) invece di un unico datetime-local. Il popup del
   datetime-local combinato apre solo un calendario: l'ora va cliccata
   esattamente sul segmento giusto e digitata/incrementata, niente
   selettore dedicato — poco scopribile ed è stato segnalato come "non
   riesco a scegliere l'ora". Due campi separati danno un vero selettore
   ora nativo (anche a rotellina su mobile), oltre a restare facilmente
   leggibili in una riga sola anche stretti. */
.data-ora { display: flex; gap: .5rem; }
.data-ora input[type=date] { flex: 3; min-width: 0; }
.data-ora input[type=time] { flex: 2; min-width: 0; }

/* Le icone del calendario/orologio nei picker nativi restano leggibili
   anche in tema scuro (altrimenti restano nere su sfondo scuro). */
:root[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(1); }
.field .hint, .hint { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }

/* Galleria di icone già caricate (bar/articoli oggi, riusabile altrove):
   riquadri quadrati con l'anteprima, evidenziati quando selezionati. */
.galleria-icone { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.icona-opzione { width: 52px; height: 52px; padding: 4px; border: 2px solid var(--border); border-radius: 8px; background: var(--surface-alt); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icona-opzione img { max-width: 100%; max-height: 100%; object-fit: contain; }
.icona-opzione:hover { border-color: var(--accent); }
.icona-opzione.selezionata { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    padding: .6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-contrast); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.btn-link {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 0;
    font-size: .9rem;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm { padding: .35rem .7rem; font-size: .85rem; border-radius: 5px; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface-alt); color: var(--text); }
.btn:disabled, .btn-sm:disabled { opacity: .5; cursor: not-allowed; }

/* Pulsanti icona raggruppati in fila unica (azioni rapide di una card:
   Calendario/Info/…), come i btn-group della vecchia app ma senza JS. */
.btn-group { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.btn-group > a, .btn-group > button {
    border-radius: 0 !important;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: .95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-group > a:last-child, .btn-group > button:last-child { border-right: none; }
.btn-group > a:hover, .btn-group > button:hover { background: var(--border); }

/* Menu a tendina (azioni secondarie: duplica/pubblica/archivia/elimina),
   in puro CSS + un piccolo script comune (assets/js/dropdown.js) —
   niente Bootstrap/Popper, stesso comportamento delle vecchie dropdown. */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: .3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 190px;
    padding: .35rem;
    display: none;
    z-index: 50;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .4rem;
    text-align: left;
    background: none;
    border: none;
    padding: .5rem .6rem;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: .9rem;
    text-decoration: none;
    font-family: inherit;
}
.dropdown-item:hover { background: var(--surface-alt); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.success { color: var(--c-success); }
.dropdown-item.warning { color: var(--c-warning); }
.dropdown-divider { border-top: 1px solid var(--border); margin: .35rem -.35rem; }
/* Voce del menu che è un piccolo form (es. "Duplica" con campo nome),
   invece di un singolo pulsante: stessa larghezza del menu, in riga. */
.dropdown-form { display: flex; gap: .35rem; padding: .4rem .3rem; }
.dropdown-form input { flex: 1; min-width: 0; }
.dropdown-form button { white-space: nowrap; }

/* Riga di azioni in fondo a una card (icone + menu "altre azioni"). */
.card-footer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: .5rem; flex-wrap: wrap; }

/* Mini statistiche in riga dentro una card (es. Proiezioni/Film/Giorni). */
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .75rem 0; }
.mini-stat { background: var(--surface-alt); border-radius: 8px; padding: .5rem; text-align: center; }
.mini-stat .n { font-weight: 700; font-size: 1.15rem; display: block; }
.mini-stat .l { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Logo organizzatore (eventi prenotazioni per conto terzi), sopra la card
   evento pubblica — solo se l'organizzatore ne ha caricato uno (il logo
   Roger non è ripetuto qui: è già in navbar). */
.evento-brand-strip { margin-bottom: .75rem; }
.evento-brand-logo { height: 36px; width: auto; }

/* ---- Card poster (locandina film) ------------------------------------ */

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.poster-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
    display: flex;
    flex-direction: column;
}
.poster-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.poster-card > a { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.poster-card .poster-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--surface-alt);
    display: block;
}
.poster-card .poster-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--surface-alt), var(--border));
    color: var(--text-muted);
}
.poster-card .poster-body { padding: .7rem .8rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.poster-card .poster-title { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.poster-card .poster-meta { font-size: .78rem; color: var(--text-muted); }
.poster-card .poster-actions { display: flex; justify-content: space-between; align-items: center; padding: 0 .8rem .7rem; }

/* ---- Workflow a passi (es. crea scenario → programma → pubblica) -----
   Serve a comunicare "cosa fare adesso" e cosa viene dopo, non solo a
   decorare: il passo attivo è evidenziato, quelli completati hanno la
   spunta, quelli futuri restano attenuati. */
.workflow { display: flex; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.workflow-step { display: flex; align-items: center; gap: .55rem; color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.workflow-step .num {
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--surface-alt); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; color: var(--text-muted); flex-shrink: 0;
}
.workflow-step.active { color: var(--text); font-weight: 600; }
.workflow-step.active .num { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.workflow-step.done { color: var(--text); }
.workflow-step.done .num { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.workflow-connector { flex: 1 1 2rem; height: 2px; background: var(--border); margin: 0 .6rem; min-width: 1.2rem; }
.workflow-step.done + .workflow-connector { background: var(--c-success); }
@media (max-width: 640px) {
    .workflow-step span.label { display: none; }
    .workflow-connector { margin: 0 .3rem; }
}

/* ---- Card film+orari (visualizza programmazione): locandina a sinistra,
   orari a destra — più leggibile di un elenco di solo testo. */
.film-schedule-card { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); margin-bottom: 1rem; }
.film-schedule-card .poster { width: 84px; flex-shrink: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 2 / 3; background: var(--surface); }
.film-schedule-card .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-schedule-card .poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: linear-gradient(135deg, var(--surface), var(--border)); color: var(--text-muted); }
.film-schedule-card .body { flex: 1; min-width: 0; }
.film-schedule-card h3 { margin: 0 0 .5rem; }
.film-schedule-card p { margin: .25rem 0; }

/* ---- Selettore film a pulsanti (calendario) ---------------------------
   Griglia di pulsanti invece di una <select>: più leggibile (mostra
   durata/fascia a colpo d'occhio) e più comodo da toccare su telefono,
   come nella vecchia app. */
.film-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; max-height: 260px; overflow-y: auto; padding: .15rem; }
.film-pick-btn {
    display: flex; align-items: center; gap: .55rem;
    text-align: left; padding: .5rem .7rem; border: 2px solid var(--border); border-radius: 8px;
    background: var(--surface); cursor: pointer; font: inherit; color: var(--text);
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.film-pick-btn:hover { border-color: var(--accent); background: var(--surface-alt); }
.film-pick-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 600; }
.film-pick-btn .thumb { width: 32px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--surface-alt); }
.film-pick-btn .thumb-placeholder { width: 32px; height: 46px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: linear-gradient(135deg, var(--surface-alt), var(--border)); color: var(--text-muted); }
.film-pick-btn .testo { min-width: 0; }
.film-pick-btn .titolo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-pick-btn .meta { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .15rem; font-weight: 400; }

/* ---- Programmazione formattata per esportazione (testo monospace) ---- */
.testo-export {
    font-family: "Courier New", Consolas, monospace;
    white-space: pre-wrap;
    background: var(--surface-alt);
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    line-height: 1.6;
    font-size: .88rem;
    max-height: 420px;
    overflow-y: auto;
}
tr.riga-weekend td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* ---- Confronto scenari: evidenzia i giorni diversi, thumbnail piccola. */
tr.riga-diverso td, tr.riga-solo_s1 td, tr.riga-solo_s2 td { background: color-mix(in srgb, var(--c-warning) 14%, var(--surface)); }
.mini-thumb { width: 26px; height: 39px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: .4rem; flex-shrink: 0; background: var(--surface-alt); }
.proiezione-riga { display: flex; align-items: center; margin-bottom: .3rem; padding: .3rem .4rem; border-radius: 6px; border-left: 3px solid transparent; }
.proiezione-riga.uguale { background: color-mix(in srgb, var(--c-success) 12%, var(--surface)); border-left-color: var(--c-success); }
.proiezione-riga.diverso { background: color-mix(in srgb, var(--c-warning) 14%, var(--surface)); border-left-color: var(--c-warning); }
.proiezione-riga.solo_questo { background: color-mix(in srgb, var(--c-info) 12%, var(--surface)); border-left-color: var(--c-info); }

/* ---- Stato vuoto (nessun risultato) -----------------------------------
   Centrato, con icona grande e attenuata: meno scoraggiante di una riga
   di testo piatta quando una lista/tabella non ha ancora contenuti. */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty-state .icon { display: block; font-size: 2.6rem; margin-bottom: .6rem; opacity: .55; }
.empty-state p { margin: .25rem 0; }

/* ---- Timeline giornaliera (calendario) ---------------------------------
   Barra orizzontale a segmenti proporzionali (in % sul tempo totale
   della giornata, apertura→fine ultima pulizia): grigio per i tempi
   morti/sala chiusa, verde per il film, giallo per pubblicità/
   intervallo/pulizie ("tempi tecnici") — colpo d'occhio sull'orario di
   apertura reale e su quanto tempo la sala resta effettivamente vuota. */
/* Niente overflow:hidden sul contenitore: servirebbe per arrotondare gli
   estremi ma taglierebbe via il tooltip che sporge sopra la barra —
   l'arrotondamento lo fanno invece solo il primo/ultimo segmento. */
.timeline { display: flex; height: 2.4rem; border-radius: 8px; border: 1px solid var(--border); }
.timeline-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; padding: 0 .3rem;
    border-right: 1px solid rgba(255,255,255,.3);
    position: relative; cursor: default;
    /* Senza min-width:0 un flex item non si restringe mai sotto la
       larghezza "naturale" del suo contenuto (default min-width:auto) —
       con tante proiezioni/segmenti stretti, questo faceva sforare la
       somma delle larghezze oltre il 100% e allargava tutta la pagina. */
    min-width: 0;
}
/* Il troncamento del testo va sull'etichetta interna, non sul segmento:
   se stesse su .timeline-seg (position:relative), il suo overflow:hidden
   taglierebbe via anche il popup che sporge sopra (::after), che è un
   figlio dello stesso box. */
.timeline-seg .etichetta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.timeline-seg:first-child { border-radius: 7px 0 0 7px; }
.timeline-seg:last-child { border-right: none; border-radius: 0 7px 7px 0; }
.timeline-seg.tipo-chiuso { background: var(--c-secondary); color: var(--c-secondary-contrast); }
.timeline-seg.tipo-film { background: var(--c-success); color: var(--c-success-contrast); font-weight: 600; }
.timeline-seg.tipo-tecnico { background: var(--c-warning); color: var(--c-warning-contrast); }

/* Tooltip al passaggio del mouse: mostra l'intervallo orario esatto del
   segmento, non solo l'etichetta — utile soprattutto sui segmenti
   stretti (pubblicità/pulizie) dove non c'è spazio per scrivere nulla. */
.timeline-seg[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--text);
    color: var(--surface);
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 25;
    pointer-events: none;
}
.timeline-seg[data-tooltip]:hover::after,
.timeline-seg[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Bolla al tap per chi non ha hover (touch — vedi timeline-tooltip.js):
   il popup CSS sopra non serve a un dito e sotto i 640px è comunque
   disattivato (vedi la regola in fondo al file), quindi su mobile il tap
   non mostrava nulla. Elemento unico, riposizionato in JS via
   getBoundingClientRect() e vincolato ai bordi dello schermo — stesso
   problema di overflow del popup CSS, qui risolto con clamp esplicito
   invece di disattivarlo del tutto. */
.timeline-tap-tooltip {
    position: fixed;
    background: var(--text);
    color: var(--surface);
    padding: .4rem .65rem;
    border-radius: 6px;
    font-size: .78rem;
    max-width: calc(100vw - 1.6rem);
    white-space: normal;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.timeline-tap-tooltip.visibile { opacity: 1; visibility: visible; }
.timeline-labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }
.timeline-legend { display: flex; gap: 1.1rem; font-size: .75rem; color: var(--text-muted); margin-top: .5rem; flex-wrap: wrap; }
.timeline-legend .chip { display: inline-flex; align-items: center; gap: .35rem; }
.timeline-legend .dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.timeline-legend .dot.chiuso { background: var(--c-secondary); }
.timeline-legend .dot.film { background: var(--c-success); }
.timeline-legend .dot.tecnico { background: var(--c-warning); }

/* ---- Paginazione ------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination a, .pagination span.corrente {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; height: 2.2rem; padding: 0 .5rem;
    border-radius: 8px; border: 1px solid var(--border);
    color: var(--text); text-decoration: none; font-size: .9rem;
}
.pagination a:hover { background: var(--surface-alt); border-color: var(--accent); }
.pagination span.corrente { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 600; }
.pagination .disabilitato { opacity: .4; pointer-events: none; }
.pagination .info { color: var(--text-muted); font-size: .82rem; margin: 0 .5rem; }

/* Riga con bordo colorato a sinistra (es. orario standard attivo/inattivo,
   voce di una lista con uno stato binario) senza il peso di una .card. */
.list-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .75rem; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; background: var(--surface-alt); margin-bottom: .4rem; flex-wrap: wrap; }
.list-item-on { border-left-color: var(--c-success); }
.list-item-off { border-left-color: var(--c-danger); opacity: .7; }
.list-item .list-item-actions { display: flex; gap: .3rem; align-items: center; }

/* ---- Tables --------------------------------------------------------- */

/* min-width:0 non è ridondante: un figlio di un contenitore grid/flex ha
   min-width:auto implicito, che non si restringe sotto la larghezza
   intrinseca del contenuto (la tabella) anche con overflow-x:auto —
   causava lo scroll orizzontale dell'intera pagina su mobile invece che
   solo della tabella, riscontrato in pubblicita/index.php dentro .grid-2. */
.table-wrap { overflow-x: auto; min-width: 0; }
/* Ombra sul bordo destro quando la tabella ha altro contenuto scorrevole
   fuori vista: senza questo indizio l'utente non ha modo di sapere che
   può scorrere (classe .is-scrollable assegnata via JS, vedi
   table-scroll-hint.js, solo quando c'è overflow reale — mai su tabelle
   che stanno già tutte a video). */
.table-wrap.is-scrollable { box-shadow: inset -16px 0 12px -12px var(--table-scroll-shadow, rgba(0,0,0,.28)); }
table.data {
    width: 100%;
    border-collapse: collapse;
}
table.data th {
    text-align: left;
    padding: .6rem .5rem;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
table.data td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-alt); }
/* Nomi cliccabili in tabella (video/playlist/inserzionista...): niente
   sottolineatura blu da "link anni '90" — testo in grassetto come il
   resto della riga, colore accento solo all'hover, così l'interattività
   si legge dal contesto (riga/tabella) invece che dal solito stile link. */
table.data a:not(.btn-link) { color: var(--text); font-weight: 600; text-decoration: none; }
table.data a:not(.btn-link):hover { color: var(--accent); text-decoration: underline; }

/* Righe riordinabili per trascinamento (bar/articoli oggi, riusabile
   altrove): l'intera <tr> è draggable (più semplice e affidabile della
   drag&drop nativa limitata a una sola cella), .drag-handle è solo
   l'indicazione visiva di dove afferrare — link/pulsanti nella riga
   restano cliccabili normalmente, il drag nativo scatta solo su
   pressione+trascinamento, non su un semplice click. */
table.data tr[draggable="true"] .drag-handle { cursor: grab; color: var(--text-muted); text-align: center; width: 2rem; user-select: none; }
table.data tr.drag-in-corso { opacity: .4; }
table.data tr.drag-sopra { box-shadow: inset 0 2px 0 var(--accent); }

/* Badge dei permessi: elenco compatto invece di una riga di testo per
   modulo, per evitare che la colonna "Permessi" costringa la tabella
   utenti allo scroll orizzontale. */
.perm-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.badge {
    display: inline-block;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
a.badge:hover { transform: translateY(-1px); border-color: var(--accent); text-decoration: none; }
.badge-accent { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Badge "pieni" di stato (bozza/pubblicato/archiviato, ecc.): colore
   pieno + testo a contrasto, per riconoscere lo stato a colpo d'occhio
   invece di doverlo leggere. */
.badge-warning   { background: var(--c-warning);   color: var(--c-warning-contrast);   border-color: var(--c-warning); }
.badge-success   { background: var(--c-success);   color: var(--c-success-contrast);   border-color: var(--c-success); }
.badge-secondary { background: var(--c-secondary); color: var(--c-secondary-contrast); border-color: var(--c-secondary); }
.badge-info      { background: var(--c-info);      color: var(--c-info-contrast);      border-color: var(--c-info); }
.badge-danger    { background: var(--c-danger);     color: var(--c-danger-contrast);    border-color: var(--c-danger); }
.badge-lg { font-size: .85rem; padding: .3rem .7rem; }

/* Fasce orarie pubblicità (pomeridiana/serale) — colori fissi (non da
   token di tema, come i moduli/i grafici): restano leggibili identici in
   chiaro e scuro, testo bianco su sfondo scuro in entrambi i casi. */
.badge-pomeridiana { background: #660000; color: #fff; border-color: #660000; }
.badge-serale { background: #33334d; color: #fff; border-color: #33334d; }
.card-pomeridiana { border-left: 4px solid #660000; }
.card-serale { border-left: 4px solid #33334d; }

/* Indicatore "in proiezione ora" (pubblicità) — pillola con puntino
   pulsante in stile "diretta/live", non il solito badge verde piatto da
   gestionale. */
.live-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: linear-gradient(135deg, #ff5a5a, #c0392b);
    color: #fff; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .3rem .65rem .3rem .5rem; border-radius: 999px;
    box-shadow: 0 2px 8px color-mix(in srgb, #c0392b 35%, transparent);
}
.live-badge .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; flex-shrink: 0; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) { .live-badge .dot { animation: none; } }

.live-badge-muted {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface-alt); color: var(--text-muted); border: 1px dashed var(--border);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .3rem .65rem; border-radius: 999px;
}

/* Riga "in proiezione ora" nella lista playlist: sfumatura leggera invece
   del solo badge, per farla risaltare a colpo d'occhio nella tabella. */
tr.riga-in-proiezione { background: linear-gradient(90deg, color-mix(in srgb, #ff5a5a 10%, transparent), transparent 55%); }

/* Anteprima video pubblicità come su uno schermo in sala buia, non un
   iframe bordato qualunque — coerente col fatto che qui si parla di un
   cinema, non di un lettore video generico. */
.screen-frame { background: #0a0a0f; padding: 1.25rem; border-radius: 12px; box-shadow: inset 0 0 40px rgba(0,0,0,.6); }
.screen-frame iframe { width: 100%; min-height: 360px; border: none; border-radius: 4px; display: block; box-shadow: 0 0 30px rgba(0,0,0,.5); }

/* .badge usato anche come <button> (es. orari suggeriti cliccabili nel
   calendario): reset dei default del browser + stato disabilitato per
   gli slot già occupati. */
button.badge { font: inherit; cursor: pointer; }
button.badge:hover:not(:disabled) { border-color: var(--accent); }
.badge-occupato, button.badge:disabled {
    opacity: .5;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ---- Pannello permessi (form utente) --------------------------------
   Riquadro delimitato per bilanciare visivamente la colonna dei campi
   anagrafici (input con bordo/sfondo) accanto ai permessi per modulo. */
.panel {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
}
.panel h3 { margin: 0 0 .75rem; font-size: 1rem; }
.panel table.data { margin: 0; }
.panel table.data td:first-child { color: var(--text-muted); font-size: .85rem; width: 40%; }
.panel table.data select { width: 100%; }

/* ---- Dashboard: griglia moduli --------------------------------------- */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .75rem;
}
.module-tile {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .9rem;
    background: var(--surface-alt);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
    color: inherit;
}
.module-tile.disabled, .module-tile.locked { opacity: .5; }
.module-tile .icon { font-size: 1.4rem; }
.module-tile .name { font-weight: 600; }
.module-tile .status { font-size: .8rem; color: var(--text-muted); }
a.module-tile:hover { border-color: var(--accent); }

/* Stato live per tile (home): pallino colorato + testo breve, stessa
   semantica ok/attenzione/critico/muted del calendario energia. */
.module-tile .stato { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; }
.module-tile .stato-dot { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.module-tile .stato-ok .stato-dot { background: var(--c-success); }
.module-tile .stato-attenzione .stato-dot { background: var(--c-warning); }
.module-tile .stato-critico .stato-dot { background: var(--c-danger); }
.module-tile .stato-muted .stato-dot { background: var(--border); }

/* ---- Card vettore (corrieri DCP): loghi di formati molto diversi tra
   loro (larghi/bassi, quadrati...) e note di lunghezza variabile — senza
   queste regole i pulsanti finiscono ad altezze diverse da una card
   all'altra. Contenitore logo a dimensione fissa (object-fit la
   riquadra senza deformarla) + pulsanti sempre ancorati in fondo alla
   card, qualunque sia la lunghezza del testo sopra. */
.vettore-card { display: flex; flex-direction: column; text-align: left; }
.vettore-logo { height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
.vettore-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.vettore-logo .placeholder { font-size: 1.6rem; opacity: .3; }
.vettore-card .note { margin: .3rem 0 0; }
.vettore-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .75rem; }

/* ---- Card film compatta (home dcp: "in sala ora" / "in arrivo") — stesso
   linguaggio visivo di rpg.php (bordo colorato per stato consegna,
   locandina) ma più piccola, per stare in griglia. */
.film-card-mini { display: flex; gap: .75rem; border-left: 4px solid var(--border); padding: .75rem; }
.film-card-mini .poster { width: 56px; flex-shrink: 0; }
.film-card-mini .poster img { width: 100%; border-radius: 4px; display: block; }
.film-card-mini .poster-ph { width: 100%; aspect-ratio: 2/3; border-radius: 4px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; opacity: .35; }
.film-card-mini .titolo { font-weight: 600; margin-bottom: .2rem; }
.film-card-mini .badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }

/* ---- Striscia di orientamento sul flusso di lavoro (home dcp): stessa
   informazione delle vecchie 4 card descrittive, ma come pillole
   icona+etichetta con la spiegazione nel title (tooltip), non in un
   paragrafo — non deve competere in altezza con "in sala ora" che è il
   contenuto che si usa davvero ogni giorno. */
.workflow-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.workflow-strip a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface-alt);
    color: var(--text); text-decoration: none; font-size: .85rem; font-weight: 600;
    transition: border-color .15s ease;
}
.workflow-strip a:hover { border-color: var(--accent); }

/* ---- Mobile ------------------------------------------------------------
   Moduli come energia/bar vengono compilati anche da telefono, non solo
   da scrivania: niente in questa app deve dipendere da un mouse o da
   uno schermo largo. */

@media (max-width: 640px) {
    nav.topbar .topbar-riga1 { padding: .6rem 1rem; }
    nav.topbar .brand { font-size: .95rem; }
    nav.topbar .links { gap: .75rem; }
    main { margin: 1rem 0; padding: 0 .85rem; }
    .card { padding: 1.1rem; }
    h1 { font-size: 1.35rem; }

    /* Il popup on-hover della timeline non ha senso al tocco (niente
       mouse) e, invisibile o no, la sua box (larga quanto il testo)
       resta comunque nel calcolo dell'overflow dei segmenti stretti:
       su schermi piccoli i segmenti si restringono molto più della
       larghezza del popup, e quello sporgeva orizzontalmente fino a
       forzare lo scroll di tutta la pagina. Lo disattiviamo qui. */
    .timeline-seg[data-tooltip]::after { content: none; }

    /* i link/pulsanti icona (modifica/elimina in tabella) restano
       comodi da toccare anche senza mouse di precisione */
    table.data a, table.data .btn-link { display: inline-block; padding: .3rem; font-size: 1.1rem; }

    /* Una cella con molti badge (es. permessi utente, tanti moduli
       abilitati) può andare a capo su parecchie righe e allungare
       tutta la riga della tabella — su mobile, con quella colonna
       spesso scrollata fuori vista, le celle visibili (nome/email...)
       restavano con un grande vuoto sotto senza spiegazione. Altezza
       massima con scroll interno invece di lasciar crescere la riga
       senza limite. */
    .perm-badges { max-height: 4.6rem; overflow-y: auto; }

    /* Playlist pubblicità: frecce di ordinamento e pulsante "Aggiungi"
       stanno a destra della riga (giustificati con .builder-info tramite
       justify-content:space-between) — comodo con mouse, scomodo da
       toccare ripetutamente su mobile. order:2 sposta il testo dopo i
       controlli in senso visivo (i pulsanti restano a order:0 implicito,
       quindi vanno per primi a sinistra) senza toccare il DOM/JS né la
       classe .builder-riga condivisa con il form eventi di Prenotazioni
       (lì un solo box titolo+locandina, non una lista ripetuta —
       spostare lì i controlli non aiuterebbe). flex:1 (non bastava order
       da solo: .builder-info restava largo quanto il suo contenuto,
       quindi con titoli di lunghezza diversa il testo "galleggiava" a
       distanze diverse dal pulsante invece di iniziare tutto alla stessa
       posizione, subito dopo il pulsante). */
    #builder-playlist .builder-info { order: 2; flex: 1 1 auto; }

    /* le azioni principali di un form diventano pulsanti a piena
       larghezza, più facili da premere col pollice */
    .card form > .btn, .card form > button.btn { display: block; width: 100%; text-align: center; }

    /* Sidebar → drawer a scomparsa: nascosta di lato finché non si
       apre l'hamburger, sopra a tutto il resto (overlay scuro dietro
       per richiudere col tap fuori, pulsante ✕ dentro per chi non
       capisce l'overlay). Su schermi larghi resta invece sempre
       visibile, affiancata al contenuto — vedi regola non-mobile sotto. */
    nav.topbar .hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 260px;
        z-index: 50;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
        transform: translateX(-100%);
        transition: transform .25s ease;
        padding-top: 3.5rem;
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    /* Nel drawer mobile la colonna intera è già fissa e scorrevole: il
       comportamento "sticky sotto la navbar" di .sidebar-inner (pensato
       per la sidebar affiancata da desktop) va disattivato qui. */
    .sidebar-inner { position: static; top: auto; max-height: none; overflow-y: visible; }
    .sidebar-close {
        display: block;
        position: absolute;
        top: .6rem;
        right: .7rem;
        background: none;
        border: none;
        color: rgba(255,255,255,.85);
        font-size: 1.3rem;
        cursor: pointer;
        padding: .3rem .5rem;
    }
    .sidebar-close:hover { color: #fff; }
    .sidebar-overlay.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 40;
    }
}

@media (min-width: 641px) {
    /* Su schermi larghi la sidebar è sempre visibile in linea col
       contenuto: niente hamburger, niente overlay, niente drawer. */
    nav.topbar .hamburger { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ---- Stampa / esporta PDF ---------------------------------------------
   "Esporta PDF" è la finestra di stampa nativa del browser (Salva come
   PDF): niente libreria JS lato client da caricare/mantenere, qualità
   migliore della vecchia jsPDF.fromHTML() su layout moderni a griglia. */

@media print {
    nav.topbar, .sidebar, .sidebar-overlay, footer, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: none; padding: 0; margin-bottom: 1rem; }
    main { max-width: 100%; margin: 0; padding: 0; }
}

/* ---- Mappa posti (prenotazioni) ----------------------------------------
   Griglia CSS pura, nessun canvas/SVG: ogni posto è una cella quadrata in
   un CSS grid per settore, con i "buchi" (corridoi/gap fisici) semplicemente
   assenti dalla griglia — vedi prenotazioni-mappa.js. Scroll orizzontale
   proprio così la pagina non scorre mai lateralmente su schermi stretti. */
.mappa-posti { display: flex; flex-wrap: wrap; gap: 1.5rem; overflow-x: auto; padding-bottom: .5rem; }
.mappa-settore { flex: 0 0 auto; }
.mappa-settore-titolo { margin: 0 0 .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: center; }
.mappa-griglia { display: grid; gap: 3px; }
.mappa-fila-etichetta {
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: var(--text-muted);
    padding: 0 .3rem; user-select: none;
}
.mappa-posto {
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-variant-numeric: tabular-nums;
    border-radius: 4px; border: 1px solid transparent;
    background: var(--surface-alt); color: var(--text-muted); user-select: none;
}
.mappa-posto-assente { background: transparent; }
.mappa-cliccabile { cursor: pointer; transition: transform .08s ease; }
.mappa-cliccabile:hover { transform: scale(1.15); }

/* Icona (♿/🚫) più grande in OGNI modalità (selezione, admin, editor,
   toggle, sola lettura) — con la dimensione normale del numero spariva
   nella griglia, segnalato esplicitamente dall'utente. Il colore/sfondo
   restano quelli dello stato/tipo (vedi sotto): un'unica classe qui
   copre solo la dimensione, comune a tutte le modalità — deve
   corrispondere a TIPI_CON_ICONA in prenotazioni-mappa.js. */
.mappa-posto-icona { font-size: 1.15em; font-weight: bold; }

/* Stati (selezione pubblica / vendita cassa / vista admin) */
.mappa-stato-libero { background: color-mix(in srgb, var(--c-success) 16%, var(--surface-alt)); color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 40%, transparent); }
.mappa-stato-occupato { background: color-mix(in srgb, var(--c-danger) 20%, var(--surface-alt)); color: var(--c-danger); cursor: not-allowed; }
.mappa-stato-ritirato { background: var(--c-danger); color: #fff; cursor: not-allowed; }
/* Rilasciato: colore proprio, distinto da bloccato — concettualmente
   diverso (un posto liberato torna prenotabile, uno bloccato mai) anche
   se prima condividevano lo stesso grigio — segnalato esplicitamente. */
.mappa-stato-rilasciato { background: color-mix(in srgb, var(--c-info) 22%, var(--surface-alt)); color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 45%, transparent); }
.mappa-stato-vuoto { background: transparent; }
.mappa-selezionato { background: var(--accent) !important; color: var(--accent-contrast) !important; border-color: var(--accent) !important; transform: scale(1.15); }

/* Posti disabili: sfondo pieno (non tenue come gli altri stati) — con lo
   sfondo tenue di prima la ♿ spariva nella griglia, segnalato
   esplicitamente dall'utente. Un'unica regola per tutte le modalità
   (stato/editor/vista), così l'aspetto non cambia da una pagina all'altra. */
.mappa-stato-disabile, .mappa-editor-tipo-disabile {
    background: var(--c-warning); color: #fff;
    border-color: color-mix(in srgb, var(--c-warning) 60%, black);
}

/* Posti bloccati: stessa idea, un'unica regola per tutte le modalità
   (prima erano dichiarati separatamente con leggere differenze —
   segnalato come "mismatch" dall'utente). */
.mappa-stato-bloccato, .mappa-stato-inattivo, .mappa-editor-tipo-bloccato {
    background: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: .7;
}

.mappa-editor-tipo-normale { background: var(--surface-alt); color: var(--text); }
.mappa-editor-tipo-vuoto { background: transparent; border-style: dashed; border-color: var(--border); }

/* Editor configurazioni (toggle attivo/non attivo) */
.mappa-toggle-on { background: color-mix(in srgb, var(--c-success) 20%, var(--surface-alt)); color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 45%, transparent); }
.mappa-toggle-off { background: var(--border); color: var(--text-muted); opacity: .55; }

/* Pagina ritiro prenotazione: i posti che non appartengono alla
   prenotazione trovata restano visibili (contesto spaziale) ma spenti. */
.mappa-contesto-spento { opacity: .3; }

.mappa-legenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; margin: .75rem 0; }
.mappa-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mappa-legenda i { width: 1em; height: 1em; border-radius: 3px; display: inline-block; }

/* Indicatore schermo: una barra curva sopra la mappa, ripetuta per ogni
   settore (non una sola sopra l'intera mappa: con i settori affiancati
   non si capirebbe il centro di ciascuno) — mancava del tutto, richiesto
   esplicitamente. */
.mappa-schermo {
    margin: 0 0 .75rem; padding: .4rem .75rem;
    text-align: center; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
    border-bottom: 3px solid var(--accent); border-radius: 50% / 8px;
}

/* Modale mappa posti (conferma posto disabili, avviso limite raggiunto):
   sostituisce confirm()/alert() del browser, poco visibili — richiesto
   esplicitamente. */
.mappa-modale-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.mappa-modale-box {
    background: var(--surface); color: var(--text); border-radius: 10px; border: 1px solid var(--border);
    max-width: 420px; width: 100%; padding: 1.5rem; box-shadow: 0 12px 40px rgba(0,0,0,.3);
    text-align: center;
}
.mappa-modale-box h3 { margin: 0 0 .75rem; font-size: 1.4rem; }
.mappa-modale-box p { margin: 0 0 1rem; color: var(--text-muted); }

/* Calendario rilevazioni energia (energia/report.php) — griglia stile
   "contribution graph": un quadratino per giorno, per notare a colpo
   d'occhio i buchi su un periodo lungo. */
.cal-giorno { width: 14px; height: 14px; border-radius: 3px; cursor: pointer; }
.cal-giorno:hover { outline: 2px solid var(--c-info, #0066cc); outline-offset: 1px; }
.cal-mancante { background: var(--border); }
.cal-parziale { background: var(--c-warning); }
.cal-completo { background: var(--c-success); }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }
.mappa-modale-azioni { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }
