/* ============================================================================
   admin-ui.css — la pelle UNICA delle interfacce admin dell'ecosistema (CDX-787).

   CANONICO in `planner.worldcapp.com/shared/admin-ui/`. Copie propagate da
   `ops/ui-sync.sh push`, drift BLOCCANTE in `wc-deploy`: NON si modificano le copie.

   CHI LO CONSUMA (oggi): le dashboard di venus e shiny (`mag/adm/`), la demo Icon
   Style di worldcapp (`app/wa/adm-demo/`) e, dal passo 3 (CDX-789), la dashboard di
   worldcapp (`app/wa/`), dal passo 4 (CDX-790) il backoffice di MIRA
   (`luca-mira/public/assets/admin-ui/`) e dal passo 5 (CDX-791) la dashboard di
   jamaltaslaq (`web/house/dash/`). Il piano e' che diventi la pelle di TUTTE
   le interfacce admin — restano planner e beyondspoke —
   con una chrome sola: `admin_chrome.php`, nella stessa cartella (CDX-788, passo 2),
   che stampa le classi `adm-hero`, `global-nav`, `adm-launch-*`, `adm-footer` vestite
   qui. Il marchio resta configurazione dell'ospite; qui non c'e' nessun brand.

   ORDINE DI CARICAMENTO nell'ospite:
     bootstrap -> ui-tokens.css (token, invariato) -> admin-ui.css (questo file)
     -> eventuale foglio di prodotto (per il guscio media: `adm.css`).

   DA DOVE VIENE (passo 1 dell'unificazione, 2026-09-27):
   - la base e' `adm-skin.css` (CDX-763), a sua volta potatura di `jt-dash.css`
     (jamaltaslaq, JT-152), a sua volta copia adattata di `wa-ui.css` (worldcapp,
     WC-044): stessa famiglia, 101 regole su 108 identiche a `wa-ui.css`;
   - da `wa-ui.css` arrivano i pezzi del giro «telefono e tema scuro» (WC-1081 →
     WC-1092) che la pelle dei brand non aveva: tabelle a schede (`adm-cards`, era
     `wd-cards`), legenda (`adm-legend`, era `wd-legend`), pastiglia tenue
     (`adm-badge-soft`, era `wd-badge-soft`), e i primitivi Bootstrap generici che
     a venus mancavano (`.card`, `.list-group`, `.accordion`, badge primario);
   - da `adm.css` (guscio wa_media_admin, CDX-760) la parte GENERICA: contenitore,
     filtri, bottoni `adm-btn`, avvisi, blocco azioni, paginazione, form a card,
     note, piede. In `adm.css` resta solo cio' che e' del backoffice media
     (griglia, card, coda di caricamento, etichette, visore);
   - nuovo qui: correzioni per le classi Bootstrap che col tema scuro spariscono o
     abbagliano, `adm-num` (colonne numeriche a destra), padding di `.form-select`
     che non copre la freccia, input file che segue il tema, testo secondario
     leggibile sul fondo pagina.
   - passo 2 (CDX-788): la chrome comune. Il bottone del tema FISSO in basso a
     destra non c'e' piu' (scorrendo finiva sopra le card): la scelta sta nel
     pannello del menu (`.adm-theme`). Accenti delle voci a token (`--adm-accent-N`),
     marchio testuale (`.adm-brand__name`), pastiglia d'ambiente, numeri sulle voci,
     voce riservata, le icone dei brand (da `wa-ui.css`, WC-930).
   - passo 3 (CDX-789, arriva la dashboard di worldcapp): sezioni comprimibili
     (`adm-toggle`), riquadro di spiegazione neutro (`adm-alert--nota`, al posto di
     `alert-secondary`), numeri in testa (`adm-stats`), titolo di sezione (`adm-sez`),
     `text-bg-dark` nel tema scuro; niente grassetto sui titoli delle card del
     launcher e sulla palette di stato `.green`/`.red`/… (regola di Luca).
   - passo 4 (CDX-790, arriva MIRA): «Esci» in POST e' un `<button>` nel pannello,
     vestito come le altre voci (`button.global-nav__link`).
   - passo 5 (CDX-791, arriva jamaltaslaq, `web/house/dash/`): i componenti generici nati
     nella sua dashboard — `adm-sub` (secondo rigo di una cella), `adm-chip` (pastiglia in un
     elenco, anche coi colori di stato), `adm-thumb--vuota`, `adm-kv` (etichetta/valore),
     `adm-scelte`/`adm-scelta` (la finestra «Scegli un'immagine») — e il visore `adm-visore`,
     che era del guscio media (`adm.css`) e ora serve anche al Media di jamaltaslaq (coi
     video); `btn-outline-success` sui token.
   - CDX-792 (richiesta di Luca): sotto i 768px la testata si comporta come quella del planner —
     in colonna, marchio a sinistra, chi sei a tutta larghezza, pulsanti in fondo, impilati e con
     l'etichetta.
   - CDX-793 (confronto pezzo per pezzo col planner, decisioni di Luca): i FILTRI sul telefono in
     colonna, campi e bottoni a tutta larghezza (`adm-filtri` su qualunque form di filtri); gli
     AVVISI in una famiglia sola con icona (`adm-alert--ok/--attenzione/--ko/--info/--nota`); lo
     STATO VUOTO (`adm-vuoto`); etichette dei form 15px in semigrassetto; le azioni in fondo a un form
     (`adm-azioni`) impilate sul telefono; l'input file vestito; le pastiglie di stato tenui con le
     tinte (`adm-badge-soft--ok/--ko/--attenzione/--info/--primario`); la pastiglia d'ambiente non
     piu' stirata.

   ⚠️ `.adm-tab` NON esiste piu': una famiglia sola di tabelle, `.table` di
   Bootstrap vestita qui (+ `adm-cards` sul telefono dove serve).

   CONVENZIONI: solo token `var(--app-*)` per i colori, dark in `html[data-theme=
   "dark"]` (lo mette il boot-script dell'ospite, insieme a `data-bs-theme`).
   I pochi valori fissi sono commentati dove stanno: ombre (rgba neutre, uguali
   nei due temi) e la palette storica `.yellow`/`.orange` di `wa-ui.css`.
   `!important` solo contro utility Bootstrap che lo hanno gia' (righe segnate).

   Cosa deve dare l'OSPITE (lo fa `admin_chrome.php`):
     --adm-launch-accent   colore di card del launcher e icona di menu, inline da PHP
                           (`var(--adm-accent-N)`, o i colori del config `accents`)
   Il logo in testata e' largo 360px, 236 sotto gli 800, su tutte le dashboard
   (CDX-780): vedi `.adm-brand__logo`.
   ============================================================================ */

/* ---------------------------------------------------------------- token --- */
:root {
    /* Palette di stato delle classi storiche `.green`/`.red`/… (da `wa-ui.css`).
       Giallo e arancio sono hex voluti: la palette semantica di ui-tokens non ha un
       arancio distinto dall'ambra. CDX-789, misurato sulla dashboard di worldcapp:
       in chiaro #ca8a04 e #ea580c stavano a 2,9 e 3,6:1 sul bianco, ora #a16207 e
       #c2410c (4,9 e 5,2); il rosso e' quello «forte» (il rosso dei token stava a
       4,46 sui fondi grigi) e il grigio e' `--app-text-soft` (`--app-muted` stava a
       4,3 sul fondo dei campi). */
    --adm-status-green: var(--app-success-text);
    --adm-status-red: var(--adm-error-strong);
    --adm-status-yellow: #a16207;
    --adm-status-orange: #c2410c;
    --adm-status-blue: var(--app-info-text);
    --adm-status-gray: var(--app-text-soft);

    /* Rosso per il TESTO piccolo su fondi rosati o grigi: `--app-error-text` in
       chiaro sta a 4,44:1 su `--app-error-bg` e 4,46 su `--app-surface-muted`
       (misurato: «Esci», la «×» delle etichette). Scurito col colore dei titoli:
       ~6:1 in chiaro, in scuro resta chiaro. Solo token, nessun hex. */
    --adm-error-strong: color-mix(in srgb, var(--app-error-text) 80%, var(--app-heading));

    /* Testo secondario appoggiato sul FONDO PAGINA (`--app-body-bg`): li'
       `--app-muted` sta a 4,23:1. Su una card bianca `--app-muted` va bene (4,76). */
    --adm-text-secondary: var(--app-text-soft);

    /* Gli accenti delle voci del menu (card del launcher, icona nel pannello),
       ciclici DENTRO la sezione. Erano quattro hex nel PHP di ogni chrome
       (`adm_ui_accents()`, `wd_bs_menu_accents()`, `jtd_accents()`): ora token.
       Solo il rosa non ha un token in ui-tokens: e' l'unico hex, con la sua
       variante scura. */
    --adm-accent-1: var(--app-primary);
    --adm-accent-2: var(--app-success-text);
    --adm-accent-3: var(--app-ai-text);
    --adm-accent-4: var(--app-warning-text);
    --adm-accent-5: var(--app-ui-sky);
    --adm-accent-6: #db2777;

    /* Cap larghezza (.wrap del planner): hero e main sullo stesso binario (WC-049). */
    --adm-shell-max: min(1980px, calc(100vw - 24px));
}

@media (min-width: 1800px) {
    :root { --adm-shell-max: min(2040px, calc(100vw - 32px)); }
}

html[data-theme="dark"] {
    --adm-status-yellow: #fbbf24;
    --adm-status-orange: #fb923c;
    --adm-accent-6: #f472b6;
    /* Controlli nativi (casella, data, file, tendina del select) nel tema scuro. */
    color-scheme: dark;
}

/* ----------------------------------------------------------------- base --- */
/* Font: Inter dove l'ospite lo serve (worldcapp), Roboto dove serve quello
   (venus e shiny, `lib/fonts/`): una dichiarazione sola, nessun file nuovo. */
body {
    font-family: "Inter", "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--app-text-md);
    line-height: 1.55;
    color: var(--app-text);
    background: var(--app-body-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-heading);
    font-weight: 700;
}

h1 { font-size: var(--app-text-3xl); }

h2 { font-size: var(--app-text-2xl); }

h3 { font-size: var(--app-text-xl); }

a { color: var(--app-link-text); text-decoration: none; }

a:hover { text-decoration: none; }

/* `code` (nomi di tabelle e colonne, chiavi d'evento): il rosa di Bootstrap stava a 4,0:1 sul fondo pagina. */
code { color: var(--app-accent-strong); }

/* Le pagine interne hanno <main class="container-fluid">: diventa la "content
   card" su fondo slate, alla stessa larghezza dell'hero (WC-049). */
main.container, main.container-fluid {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: var(--app-space-24);
}

main.container-fluid { margin: 0 auto; width: 100%; max-width: var(--adm-shell-max); }

/* Home e pagine del guscio: shell nuda, le card poggiano sul fondo pagina. */
main.adm-shell { margin: 0 auto 32px; max-width: var(--adm-shell-max); }

/* ---------------------------------------------------------------- chrome --- */
/* Hero header stile planner (WC-046): card raised con strip gradiente in alto,
   logo a sinistra, azioni a destra, titolo pagina sotto. */
.adm-hero {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    max-width: var(--adm-shell-max);
    padding: 28px;
    background: var(--app-gradient-surface-raised);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
}

.adm-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--app-strip-height-lg);
    background: var(--app-gradient-primary);
    opacity: var(--app-strip-opacity-strong);
    pointer-events: none;
}

.adm-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-16);
    flex-wrap: wrap;
}

.adm-brand { display: inline-flex; align-items: center; gap: var(--app-space-10); }

.adm-brand:hover { text-decoration: none; }

/* Il marchio e' il LOGO del brand, due <img> (chiaro e scuro) sulla stessa tela:
   il cambio di tema e' una regola di CSS, nessun lampo. CDX-780: la misura e' la
   LARGHEZZA, uguale su tutte le dashboard — 360px, 236 sotto gli 800 (gli stessi
   numeri di `.wa-brand__img` in `wa-ui.css`; il marchio testuale di jamaltaslaq usa
   `.adm-brand__name`, qui sotto). */
.adm-brand__logo {
    display: block;
    width: 360px;
    height: auto;
    max-width: 100%;
}

.adm-brand__logo--scuro { display: none; }

html[data-theme="dark"] .adm-brand__logo--chiaro { display: none; }

html[data-theme="dark"] .adm-brand__logo--scuro { display: block; }

@media (max-width: 799.98px) {
    .adm-brand__logo { width: 236px; }
}

/* Il marchio TESTUALE (jamaltaslaq; MIRA usa `html`): stessa regola del logo, la larghezza
   arriva dal corpo (3.2rem / 2.1rem, JT-628) con lo stesso tetto di 360/236. Il
   font lo porta l'ospite (config `head`), qui c'e' solo la misura. */
.adm-brand__name {
    display: block;
    max-width: 360px;
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--app-heading);
    overflow-wrap: anywhere;
}

@media (max-width: 799.98px) {
    .adm-brand__name { max-width: 236px; font-size: 2.1rem; }
}

/* Una parola accanto al marchio («Demo Icon Style»): va a capo sotto, se non ci sta. */
.adm-brand { flex-wrap: wrap; }

.adm-brand__suffix {
    color: var(--app-text-soft);
    font-size: var(--app-text-lg);
    letter-spacing: 0.01em;
}

.adm-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--app-space-10);
    margin-left: auto;
}

/* Sotto i 768px la testata va in COLONNA come quella del planner (CDX-792, richiesta di Luca;
   `ui-components.css` del planner, `.page-header`/`.page-header-actions`/`.app-header-context`):
   marchio a sinistra, poi «chi sei» e l'ambiente a tutta larghezza, poi titolo e frase, e IN FONDO
   i pulsanti — Menu, le azioni (Album, Il sito, Account), Esci — uno sotto l'altro, a tutta
   larghezza e CON l'etichetta (fino al CDX-791 le azioni in piu' erano solo icona sotto i 576).
   Nessun cambio al markup di `admin_chrome.php`: la riga di marchio e pulsanti diventa
   `display: contents`, e l'ordine lo danno gli `order` dentro la colonna. Sopra i 768 resta com'e'. */
@media (max-width: 767.98px) {
    .adm-hero { display: flex; flex-direction: column; align-items: stretch; }
    .adm-hero__row { display: contents; }
    .adm-hero > .adm-hero__row > .adm-brand { order: 1; align-self: flex-start; }
    .adm-hero > .adm-hero__who { order: 2; flex-direction: column; align-items: stretch; }
    .adm-hero > .adm-hero__title { order: 3; }
    .adm-hero > .adm-hero__subtitle { order: 4; }
    .adm-hero > .adm-hero__row > .adm-hero__actions {
        order: 5;
        flex-direction: column;
        align-items: stretch;
        gap: var(--app-space-8);
        margin: var(--app-space-16) 0 0;
    }
    .adm-hero__actions > .btn-ui,
    .adm-hero__actions > .adm-logout-form > .btn-ui { width: 100%; }
    .adm-hero__who .adm-user-card,
    .adm-hero__who .adm-ctx { width: 100%; }
    /* La pastiglia d'ambiente («DDEV», «Staging») resta della sua misura sotto «chi sei»: stirata a
       tutta larghezza (CDX-792) sembrava una barra d'avviso (CDX-793). */
    .adm-hero__who .adm-env { align-self: flex-start; width: auto; }
}

.adm-logout-form { display: contents; }

/* Chi sei e, se il config lo dice, su che ambiente sei. */
.adm-hero__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-10);
    margin-top: var(--app-space-14);
}

.adm-hero__who .adm-user-card { margin-top: 0; }

.adm-env {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: var(--app-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Titolo pagina = h1.h2 planner (2rem/700/-0.03em, icona a 12px). */
.adm-hero__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--app-heading);
}

.adm-hero__subtitle {
    margin: 0;
    color: var(--app-text);
    font-size: 0.93rem;
    line-height: 1.62;
    max-width: 72ch;
}

/* Bottoni pill del planner (base + subtle + danger + compact). Niente classe .btn
   di Bootstrap su questi elementi, quindi niente !important. Le ombre sono rgba
   neutre volute, uguali nei due temi. */
.btn-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-8);
    min-height: 38px;
    padding: 8px 14px;
    font-size: var(--app-text-sm);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-ui:hover, .btn-ui:focus-visible, .btn-ui:active { text-decoration: none; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10); }

.btn-ui span { display: inline-flex; align-items: center; line-height: 1; }

.button-icon, .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: 1.24rem;
    line-height: 1;
    flex: 0 0 auto;
}

.btn-subtle-ui {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid color-mix(in srgb, var(--app-border-hover) 65%, var(--app-border-strong) 35%);
}

.btn-subtle-ui:hover, .btn-subtle-ui:focus-visible, .btn-subtle-ui:active {
    background: color-mix(in srgb, var(--app-surface-muted) 97%, var(--app-text) 3%);
    color: var(--app-heading);
    border-color: color-mix(in srgb, var(--app-border-hover) 30%, var(--app-border-strong) 70%);
}

/* Variante danger-subtle del planner (Esci in testata). Testo in `--adm-error-strong`:
   col rosso dei token era 4,44:1 sul suo fondo rosato. */
.btn-danger-subtle-ui {
    background: var(--app-error-bg);
    color: var(--adm-error-strong);
    border: 1px solid var(--app-error-border);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06);
}

.btn-danger-subtle-ui:hover, .btn-danger-subtle-ui:focus-visible, .btn-danger-subtle-ui:active {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
    color: var(--adm-error-strong);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.10);
}

.btn-compact-ui {
    min-height: 32px;
    padding: 4px 10px;
    gap: 6px;
    font-size: 0.74rem;
    border-radius: var(--bs-border-radius-sm);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.btn-compact-ui .button-icon, .btn-compact-ui .btn-icon {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.92rem;
}

/* Offcanvas di navigazione da destra (classi planner `global-nav`). */
.global-nav.offcanvas {
    background: var(--app-surface);
    color: var(--app-text);
    border-left: 1px solid var(--app-border);
}

.global-nav .offcanvas-header { border-bottom: 1px solid var(--app-border); }

.global-nav .offcanvas-title { color: var(--app-heading); }

.global-nav .btn-close { filter: var(--app-btn-close-filter); }

/* Le sezioni del registro stanno in un `<nav>`, «Tema» ed «Esci» dopo: il filo fra
   l'ultima voce e «Tema» lo da' la seconda riga. */
.global-nav__section + .global-nav__section,
.global-nav__nav + .global-nav__section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
}

.global-nav__section-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--app-muted);
    margin: 0 0 10px;
}

/* Il sottogruppo dentro una sezione (voce `group`, CDX-796: le sezioni lunghe del planner). */
/* Il sottogruppo DENTRO una sezione (planner, beyondspoke: «Argomenti», «Log e audit») sta SOTTO il titolo
   di sezione: stesso grigio attenuato (`--app-muted`, >= 4,5 in chiaro e scuro), stesso corpo, niente
   maiuscolo ne' peso. Prima era `--app-text-soft`, che in scuro e' quasi bianco e superava il titolo (CDX-797). */
.global-nav__group-title {
    font-size: var(--app-text-xs);
    font-weight: 400;
    color: var(--app-muted);
    margin: 14px 0 6px 10px;
}

.global-nav__section-title + .global-nav__group-title { margin-top: 0; }

.global-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.global-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--app-text);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.global-nav__link:hover,
.global-nav__link:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 10%, transparent);
    color: var(--app-text);
    text-decoration: none;
}

/* Voce attiva: testo in `--app-accent-strong` (col primary era 4,19:1 sul suo velo), icona in primary. */
.global-nav__link.is-active {
    background: color-mix(in srgb, var(--app-primary) 15%, transparent);
    color: var(--app-accent-strong);
    font-weight: 600;
}

/* Icone del menu con lo stesso accent delle card della home; l'attiva passa a primary. */
.global-nav__link i {
    flex-shrink: 0;
    font-size: 1.24rem;
    width: 1.4rem;
    text-align: center;
    color: var(--adm-launch-accent, var(--app-muted));
}

.global-nav__link.is-active i { color: var(--app-primary); }

.global-nav__link--logout { color: var(--adm-error-strong); }

/* «Esci» in POST (MIRA, CDX-790) e' un `<button>` dentro un form, non un `<a>`: senza questo
   prende lo sfondo e il bordo del bottone nativo (grigio in scuro, «Esci» a 3,9:1) e non
   va a tutta riga come le altre voci. */
button.global-nav__link {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.global-nav__link--logout:hover,
.global-nav__link--logout:focus-visible {
    background: color-mix(in srgb, var(--app-error-fill) 10%, transparent);
    color: var(--adm-error-strong);
}

/* Una voce solo tua (worldcapp `user_specific`): niente accento, un filo d'oro. */
.global-nav__link--own { box-shadow: inset 3px 0 0 var(--adm-status-yellow); }

/* Il numero accanto a una voce (jamaltaslaq: «da spedire»). */
.adm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--app-radius-pill);
    background: var(--app-primary-fill);
    color: var(--app-primary-fill-text);
    font-size: var(--app-text-xs);
    font-variant-numeric: tabular-nums;
}

.adm-launch-card__title .adm-count { margin-left: var(--app-space-8); vertical-align: middle; }

/* La scelta del tema, in fondo al pannello del menu (CDX-788). Fino al passo 1
   era un bottone fisso in basso a destra: scorrendo copriva le card. Qui non
   copre niente, e si trova dove si trova il resto: dietro «Menu». */
.adm-theme {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.adm-theme__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 8px;
    font-size: var(--app-text-sm);
    line-height: 1.2;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius);
    background: var(--app-surface);
    color: var(--app-text);
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.adm-theme__button:hover,
.adm-theme__button:focus-visible {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.adm-theme__button:focus-visible { outline: 2px solid var(--app-focus-ring); outline-offset: 1px; }

.adm-theme__button.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-border) 42%);
    background: var(--app-selected-wash);
    color: var(--app-accent-strong);
}

html[data-theme="dark"] .adm-theme__button { background: var(--app-surface-muted); }

html[data-theme="dark"] .adm-theme__button.is-active {
    background: color-mix(in srgb, var(--app-primary) 24%, var(--app-surface));
}

/* Piede = .site-footer planner. Testo secondario: sta sul fondo pagina. */
.adm-footer {
    color: var(--adm-text-secondary);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--app-space-16) 0;
    margin-top: var(--app-space-32);
    border-top: 1px solid var(--app-border);
}

/* I link del piede (config `footer_links`, CDX-796: Privacy, Termini, Cookie del planner). Sul fondo
   pagina, nel colore del testo secondario e sottolineati: si riconoscono senza un colore in piu'. */
.adm-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--app-space-4) var(--app-space-16);
    margin-top: var(--app-space-6);
}

.adm-footer__links a { color: var(--adm-text-secondary); text-decoration: underline; text-underline-offset: 2px; }

.adm-footer__links a:hover,
.adm-footer__links a:focus-visible { color: var(--app-heading); }

/* Chi sei, in testata: accent a sinistra, nome e ruolo, non cliccabile. */
.adm-user-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 14px;
    margin-top: var(--app-space-14);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-primary);
    border-radius: var(--app-radius-sm);
    color: var(--app-heading);
    line-height: 1.1;
}

.adm-user-card__icon { font-size: 1.1rem; line-height: 1; color: currentColor; }

.adm-user-card__stack { display: flex; flex-direction: column; gap: 2px; }

.adm-user-card__name { font-weight: 700; font-size: 0.88rem; }

.adm-user-card__role { font-weight: 600; font-size: 0.76rem; color: var(--app-muted); }

/* La card di chi sei che porta alle preferenze (planner, beyondspoke: config `user.url`, CDX-796). */
a.adm-user-card { text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease; }

a.adm-user-card:hover,
a.adm-user-card:focus-visible { background: var(--app-surface-muted); border-color: var(--app-border-strong); border-left-color: var(--app-primary); color: var(--app-heading); }

/* Le schede di CONTESTO accanto a chi sei (config `context`, CDX-796): il progetto e il cliente, il
   piano del planner. Stessa forma della card di chi sei. Il colore del progetto (`--adm-ctx-accent-l`
   e `-d`, chiaro e scuro, scelto dall'utente e salvato a DB) veste SOLO il filo a sinistra e l'icona: sul testo il rosa di VENUS
   stava a 3,53:1 (CDX-794), il testo resta nel colore dei titoli. */
.adm-ctx {
    --adm-ctx-accent: var(--adm-ctx-accent-l, var(--app-primary));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--adm-ctx-accent);
    border-radius: var(--app-radius-sm);
    color: var(--app-heading);
    line-height: 1.1;
    text-decoration: none;
}

html[data-theme="dark"] .adm-ctx { --adm-ctx-accent: var(--adm-ctx-accent-d, var(--adm-ctx-accent-l, var(--app-primary))); }

.adm-ctx__icon { font-size: 1.1rem; line-height: 1; color: var(--adm-ctx-accent); }

.adm-ctx__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.adm-ctx__label { font-weight: 700; font-size: 0.88rem; overflow-wrap: anywhere; }

.adm-ctx__sub { font-weight: 600; font-size: 0.76rem; color: var(--app-muted); overflow-wrap: anywhere; }

.adm-ctx--link { transition: border-color 0.18s ease, background-color 0.18s ease; }

.adm-ctx--link:hover,
.adm-ctx--link:focus-visible { background: var(--app-surface-muted); border-color: var(--app-border-strong); border-left-color: var(--adm-ctx-accent); color: var(--app-heading); text-decoration: none; }

/* ------------------------------------------------------------- launcher --- */
/* Home: una section card per sezione del menu, griglia di card di lancio con
   barra accent a sinistra (box-shadow inset: resta piena in hover). */
.adm-section-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 28px;
    margin-bottom: var(--app-space-24);
}

.adm-section-card__title {
    display: flex;
    align-items: center;
    gap: var(--app-space-10);
    margin: 0 0 var(--app-space-20);
    font-size: var(--app-text-xl);
    font-weight: 700;
    color: var(--app-heading);
}

.adm-section-card__title .bi { font-size: 1.05em; }

.adm-launch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 767.98px) {
    .adm-launch-grid { grid-template-columns: 1fr; }
}

.adm-launch-card {
    --adm-launch-accent: var(--app-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-10);
    padding: 24px 16px;
    min-height: 180px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: inset 3px 0 0 var(--app-primary);
    text-align: center;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.adm-launch-card:hover,
.adm-launch-card:focus-visible {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--app-primary) 52%, var(--app-border) 48%);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%);
    box-shadow: inset 3px 0 0 var(--app-primary), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.adm-launch-card__icon { font-size: 2.75rem; line-height: 1; font-weight: 400; color: var(--adm-launch-accent); }

.adm-launch-card__title { font-weight: 400; font-size: var(--app-text-md); color: var(--app-heading); }   /* niente grassetto sui titoli di card (CDX-789) */

.adm-launch-card__desc { color: var(--app-muted); font-size: var(--app-text-sm); }

/* Il sottogruppo nel launcher (voce `group`, CDX-796): una riga intera della griglia. */
.adm-launch-group {
    grid-column: 1 / -1;
    margin: var(--app-space-8) 0 0;
    font-size: var(--app-text-sm);
    font-weight: 400;
    color: var(--app-text-soft);
}

.adm-launch-group:first-child { margin-top: 0; }

.adm-launch-card:hover .adm-launch-card__title,
.adm-launch-card:focus-visible .adm-launch-card__title { color: var(--app-primary-hover); }

html[data-theme="dark"] .adm-launch-card__title { color: var(--app-link-text); }

html[data-theme="dark"] .adm-launch-card:hover,
html[data-theme="dark"] .adm-launch-card:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 58%, transparent);
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%);
    box-shadow: inset 3px 0 0 var(--app-primary), 0 1px 2px rgba(2, 6, 23, 0.32);
}

html[data-theme="dark"] .adm-launch-card:hover .adm-launch-card__title,
html[data-theme="dark"] .adm-launch-card:focus-visible .adm-launch-card__title { color: var(--app-primary-hover); }

/* Una voce solo tua: niente accento, il filo a sinistra e' d'oro. */
.adm-launch-card--own { --adm-launch-accent: var(--adm-status-yellow); box-shadow: inset 3px 0 0 var(--adm-status-yellow); }

.adm-launch-card .adm-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Sul telefono la card del launcher e' COMPATTA E ORIZZONTALE (CDX-798): icona piccola a sinistra,
   titolo e frase a destra allineati a sinistra, stesso filo d'accento e stessi colori. Impilate da
   180px l'una, le 24 card dell'area super admin facevano una pagina di ~6.200px. Sopra i 768 niente
   cambia: griglia a colonne, card centrate. */
@media (max-width: 767.98px) {
    .adm-section-card { padding: 20px; }
    .adm-section-card__title { margin-bottom: var(--app-space-16, 16px); }
    .adm-launch-grid { gap: 10px; }
    .adm-launch-card {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 14px;
        row-gap: 2px;
        min-height: 64px;
        padding: 12px 14px 12px 16px;
        text-align: left;
    }
    .adm-launch-card__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; font-size: 1.75rem; }
    .adm-launch-card__title,
    .adm-launch-card__desc { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
    .adm-launch-card__title { grid-row: 1; line-height: 1.3; }
    .adm-launch-card__desc { grid-row: 2; line-height: 1.35; }
}

/* ---------------------------------------------------------- icone dei brand --- */
/* Accanto alle Bootstrap Icons: il profilo VENUS, la W di WorldcApp, il monogramma
   JT, il libro di SHINY (worldcapp WC-930, sorgenti nel censimento dei marchi §4 g).
   Stesso markup `<i class="bi bi-…">`: sono maschere, prendono il colore del testo.
   Inline apposta (le cartelle `img/` sono gitignorate). Portate qui col CDX-788 dalla
   copia di `wa-ui.css`, che le tiene finche' worldcapp non passa a questa pelle. */
.bi-venus-face::before,
.bi-worldcapp-w::before,
.bi-jt-monogram::before,
.bi-shiny-book::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--adm-icon) center / contain no-repeat;
    mask: var(--adm-icon) center / contain no-repeat;
}

.bi-venus-face::before { --adm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.181 14.806C12.205 14.729 12.268 14.415 12.287 14.288C12.318 14.088 12.319 13.769 12.292 13.711C12.269 13.666 12.187 13.628 11.84 13.507C11.477 13.379 11.177 13.291 10.86 13.219C10.125 13.051 9.577 12.68 9.39 12.221C9.253 11.884 9.355 11.451 9.655 11.094C9.797 10.923 9.8 10.872 9.669 10.73C9.541 10.591 9.49 10.498 9.471 10.37C9.456 10.26 9.463 10.219 9.513 10.119C9.559 10.029 9.697 9.903 9.879 9.784C9.882 9.782 9.843 9.7 9.791 9.6C9.703 9.425 9.7 9.413 9.7 9.308C9.7 9.219 9.707 9.181 9.738 9.114C9.787 9.008 9.86 8.959 10.057 8.898C10.222 8.846 10.322 8.787 10.363 8.718C10.431 8.606 10.419 8.537 10.306 8.364C10.212 8.223 10.06 7.926 10.022 7.81C10.006 7.76 9.996 7.682 9.996 7.597C9.993 7.438 10.023 7.353 10.122 7.253C10.198 7.173 10.276 7.134 10.448 7.082C11.514 6.765 12.03 6.503 12.29 6.152C12.419 5.974 12.456 5.878 12.508 5.567C12.547 5.324 12.572 5.237 12.677 4.983C13.006 4.184 13.517 3.535 14.127 3.149C14.21 3.096 14.277 3.049 14.277 3.043A8 8 0 1 0 12.181 14.806z'/%3E%3C/svg%3E"); }
.bi-worldcapp-w::before { --adm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.906 7.132L7.642 6.332L4.317 2.715zM5.457 13.285L11.659 2.739L5.501 9.452L1.856 3.611L0 3.611zM10.499 13.253L16 3.611L14.14 3.611L10.539 9.448L9.106 7.932L8.27 9.42z'/%3E%3C/svg%3E"); }
.bi-jt-monogram::before { --adm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.385V3.11H5.297V10.97C5.297 11.04 5.291 11.11 5.283 11.176C5.235 11.575 5.11 11.901 4.899 12.183C4.597 12.586 4.157 12.833 3.645 12.887C3.518 12.901 3.307 12.896 3.187 12.878C2.874 12.83 2.584 12.703 2.333 12.503C2.261 12.446 2.114 12.298 2.054 12.222C1.806 11.91 1.659 11.536 1.619 11.116C1.613 11.05 1.61 10.949 1.61 10.775V10.527H0V10.884C0.004 11.08 0.008 11.283 0.012 11.335C0.039 11.714 0.068 11.906 0.129 12.128C0.26 12.606 0.486 13.028 0.817 13.412C0.891 13.498 1.068 13.675 1.158 13.752C1.695 14.213 2.362 14.504 3.074 14.587C3.31 14.615 3.547 14.621 3.73 14.606C4.046 14.58 4.249 14.546 4.493 14.478C4.989 14.34 5.427 14.109 5.825 13.772C5.983 13.639 6.195 13.413 6.33 13.233C6.676 12.771 6.899 12.217 6.973 11.634L6.986 11.535V3.11H10.618V14.615H12.325V3.11H16V1.385z'/%3E%3C/svg%3E"); }
.bi-shiny-book::before { --adm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.634 5.79L7.649 13.477C8.255 11.697 9.916 10.527 11.758 10.345L12.022 2.495C11.693 2.566 11.343 2.622 11.013 2.718C9.254 3.228 8.484 4.255 7.634 5.79zM12.685 3.634C12.56 4.008 12.545 5.4 12.518 5.898C12.465 6.875 12.403 7.851 12.35 8.827C12.315 9.473 12.295 10.123 12.237 10.767C10.527 10.945 9.013 11.82 8.164 13.342C9.797 11.259 12.597 11.175 15.009 11.392C15.129 10.912 15.15 10.384 15.211 9.891C15.338 8.868 15.465 7.845 15.592 6.821C15.681 6.101 15.768 5.38 15.857 4.659C15.903 4.291 15.996 3.896 15.977 3.537C14.908 3.444 13.748 3.439 12.685 3.634zM0.038 3.571C-0.027 3.796 0.114 5.545 0.132 5.963C0.18 7.125 0.242 8.286 0.291 9.448C0.316 10.043 0.309 10.901 0.395 11.456C0.814 11.528 1.705 11.468 2.229 11.506C3.947 11.632 5.914 12.101 7.04 13.511L7.043 5.669C5.48 3.684 2.357 3.532 0.038 3.571z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------- primitivi Bootstrap --- */
/* UNA famiglia di tabelle: `.table` di Bootstrap, vestita qui. Intestazioni in
   maiuscoletto tinta primary (contrasto misurato: 6,9:1 in chiaro, 10,8 in scuro). */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-striped-bg: var(--app-table-stripe);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-table-hover);
    --bs-table-hover-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

.table thead th {
    text-transform: uppercase;
    font-size: var(--app-text-xs);
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--app-text-soft);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface));
    border-bottom: 2px solid var(--app-border);
    vertical-align: middle;
}

.table > :not(caption) > * > * { padding: var(--app-space-8) var(--app-space-10); }

.table-sm > :not(caption) > * > * { padding: var(--app-space-4) var(--app-space-8); }

.table td { vertical-align: middle; }

/* Un'intestazione di RIGA (`<th>` nel corpo della tabella: l'anno, il nome del campo) e il
   termine di un elenco `<dl>` sono etichette: niente grassetto (regola di Luca, CDX-789).
   Le intestazioni di colonna (`thead th`) restano come sono. */
.table > tbody > tr > th, dt { font-weight: 400; }

/* I link dentro una tabella (il titolo di una riga) si distinguono dal testo
   anche in scuro, dove `--app-link-text` e `--app-text` sono quasi uguali. */
.table a:not(.btn):not(.btn-ui):not(.adm-btn) {
    color: var(--app-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 2px;
}

.table a:not(.btn):not(.btn-ui):not(.adm-btn):hover { text-decoration-color: currentColor; }

/* Miniatura in una riga di tabella. */
img.adm-thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--app-radius-sm, .25rem);
    background: var(--app-surface-deep, var(--app-surface-muted));
}

/* Ordinamento client-side (classe .table-sortable, il JS lo mette l'ospite). */
table.table-sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }

table.table-sortable thead th:hover { color: var(--app-primary); }

table.table-sortable thead th[data-asc="1"]::after { content: " \2191"; color: var(--app-primary); }

table.table-sortable thead th[data-asc="0"]::after { content: " \2193"; color: var(--app-primary); }

/* Bottoni: recolor token-driven delle varianti Bootstrap usate dalle pagine. */
.btn-primary {
    --bs-btn-bg: var(--app-primary-fill);
    --bs-btn-border-color: var(--app-primary-fill);
    --bs-btn-color: var(--app-primary-fill-text);
    --bs-btn-hover-bg: var(--app-primary-fill-hover);
    --bs-btn-hover-border-color: var(--app-primary-fill-hover);
    --bs-btn-active-bg: var(--app-primary-fill-hover);
    --bs-btn-active-border-color: var(--app-primary-fill-hover);
    --bs-btn-disabled-bg: var(--app-primary-fill);
    --bs-btn-disabled-border-color: var(--app-primary-fill);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-selected-border);
    --bs-btn-hover-bg: var(--app-selected-wash-soft);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-selected-wash);
    --bs-btn-active-border-color: var(--app-primary);
    --bs-btn-active-color: var(--app-primary-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-text-soft);
    --bs-btn-border-color: var(--app-border-hover);
    --bs-btn-hover-bg: var(--app-surface-muted);
    --bs-btn-hover-border-color: var(--app-border-strong);
    --bs-btn-hover-color: var(--app-heading);
    --bs-btn-active-bg: var(--app-surface-muted);
    --bs-btn-active-border-color: var(--app-border-strong);
    --bs-btn-active-color: var(--app-heading);
}

.btn-outline-danger {
    --bs-btn-color: var(--adm-error-strong);
    --bs-btn-border-color: var(--app-error-border);
    --bs-btn-hover-bg: var(--app-error-bg);
    --bs-btn-hover-border-color: var(--app-error-text);
    --bs-btn-hover-color: var(--adm-error-strong);
    --bs-btn-active-bg: var(--app-error-bg);
    --bs-btn-active-border-color: var(--app-error-text);
    --bs-btn-active-color: var(--adm-error-strong);
}

.btn:focus-visible { box-shadow: 0 0 0 3px var(--app-focus-ring); }

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-cap-bg: var(--app-surface-muted);
}

.card.shadow-sm { box-shadow: var(--app-shadow-soft) !important; /* batte l'utility BS */ }

a .card { transition: border-color 0.15s ease, transform 0.15s ease; }

a:hover .card { border-color: var(--app-selected-border); }

a .card:hover { transform: translateY(-2px); }

a .card .card-title { color: var(--app-heading); }

/* Il titolo di una card non e' in grassetto (regola di Luca, CDX-789): lo distinguono misura e colore. */
.card-title { font-weight: 400; }

.list-group {
    --bs-list-group-bg: var(--app-surface);
    --bs-list-group-border-color: var(--app-border);
    --bs-list-group-color: var(--app-text);
}

.badge.text-bg-primary, .badge.bg-primary {
    background-color: var(--app-primary-fill) !important; /* batte l'utility BS */
    color: var(--app-primary-fill-text);
}

.accordion {
    --bs-accordion-bg: var(--app-surface);
    --bs-accordion-border-color: var(--app-border);
    --bs-accordion-btn-color: var(--app-heading);
    --bs-accordion-active-bg: var(--app-surface-muted);
    --bs-accordion-active-color: var(--app-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--app-focus-ring);
}

/* Form (field stack planner). */
.form-control, .form-select {
    border-color: var(--app-field-border);
    padding: var(--app-field-padding-y) var(--app-field-padding-x);
    color: var(--app-field-text);
    background-color: var(--app-field-background);
}

/* La freccia di `.form-select` e' un'immagine di sfondo a destra: la regola qui
   sopra riportava il padding destro a 9px e il testo lungo le finiva sotto
   (trovato su jamaltaslaq). Si ridà lo spazio della freccia. */
.form-select { padding-right: calc(var(--app-field-padding-x) + 1.75rem); }

.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) {
    border-color: var(--app-field-hover-border);
    background-color: var(--app-field-hover-background);
}

.form-control:focus, .form-select:focus {
    border-color: var(--app-field-focus-border);
    background-color: var(--app-field-focus-background);
    box-shadow: var(--app-field-focus-shadow);
    color: var(--app-field-text);
}

.form-control::placeholder { color: var(--app-field-placeholder); }

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--app-surface-muted);
    color: var(--app-muted);
    cursor: not-allowed;
}

/* L'etichetta di un campo, in un form: 15px in semigrassetto, come nel planner (CDX-793, decisione
   annunciata a Luca: nei form l'etichetta che pesa serve alla lettura, lo sguardo salta da un'etichetta
   all'altra). La regola «niente grassetti» resta per griglie, legende e titoli di card. Le etichette del
   guscio AVVOLGONO il campo: il peso si ferma all'etichetta, campo e nota tornano normali. */
.form-label,
.adm-form label:not(:has(> input[type="checkbox"], > input[type="radio"])),
.adm-filtri label:not(:has(> input[type="checkbox"], > input[type="radio"])) {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--app-heading);
}

.adm-form label :is(input, select, textarea, .adm-nota, .adm-badge),
.adm-filtri label :is(input, select, textarea) { font-weight: 400; }

/* Input file vestito sul tema (CDX-793): il bottone e' un bottone della pelle (bordo, fondo della
   card, angoli dei bottoni), non il grigio nativo; il testo «Nessun file selezionato» e' piccolo e
   attenuato, e cosi' sul telefono ci sta intero accanto al bottone (a 16px Chrome lo tagliava a
   meta', «Nessun f...lezionato»). Vale anche per `.form-control` di Bootstrap, che al bottone mette
   margini negativi e un filo solo a destra. */
input[type="file"] { color: var(--app-text-soft); max-width: 100%; font-size: var(--app-text-sm); }

input[type="file"].form-control { padding: 5px; line-height: 1.6; }

input[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button {
    margin: 0 var(--app-space-10) 0 0;
    padding: 6px 12px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--bs-border-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="file"]:hover::file-selector-button,
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background: var(--app-surface-muted);
    border-color: var(--app-border-hover);
    color: var(--app-heading);
}

html[data-theme="dark"] input[type="file"]::file-selector-button { background: var(--app-surface-raised); }

/* Le azioni in fondo a un form (Salva, Annulla, «Vedi il sito»): in riga da computer; sul telefono
   una sotto l'altra a tutta larghezza, la principale in cima (CDX-793, dal planner). La classe va sul
   contenitore dei bottoni. `!important` contro `align-items-center` di Bootstrap, che lo e'. */
.adm-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-8); }

@media (max-width: 767.98px) {
    .adm-azioni { flex-direction: column; align-items: stretch !important; /* batte align-items-center di BS */ }
    .adm-azioni > :is(.btn, .adm-btn, .btn-ui, a, button) {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        margin: 0 !important; /* batte ms-auto/ms-2 di BS */
        text-align: center;
    }
    .adm-azioni > :is(.btn, .adm-btn, .btn-ui, a, button) { align-items: center; gap: var(--app-space-8); }
    /* La principale in cima anche dove da computer sta a destra, dopo «Annulla» (MIRA). */
    .adm-azioni > :is(.btn-primary, .adm-btn--primario, [type="submit"]) { order: -1; }
    .adm-azioni > :not(.btn, .adm-btn, .btn-ui, a, button) { margin-left: 0 !important; /* il testo accanto (ms-2) va sotto */ }
}

.modal {
    --bs-modal-bg: var(--app-surface);
    --bs-modal-color: var(--app-text);
    --bs-modal-border-color: var(--app-border);
    --bs-modal-header-border-color: var(--app-border);
    --bs-modal-footer-border-color: var(--app-border);
}

/* ----------------------------------- classi Bootstrap nel tema scuro --- */
/* Bootstrap non adatta queste classi al tema scuro: `btn-dark` e `btn-outline-dark`
   spariscono sul fondo blu notte, `text-bg-light`/`bg-light`/`btn-light`/`table-light`
   restano bianche e abbagliano, `text-dark` diventa illeggibile. Worldcapp le ha tolte
   dalle pagine (WC-1085/1087); qui si neutralizzano per chi le usa ancora. */
html[data-theme="dark"] .btn-dark {
    --bs-btn-bg: var(--app-surface-raised);
    --bs-btn-color: var(--app-heading);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-bg: var(--app-surface-muted);
    --bs-btn-hover-color: var(--app-heading);
    --bs-btn-hover-border-color: var(--app-border-strong);
    --bs-btn-active-bg: var(--app-surface-muted);
    --bs-btn-active-color: var(--app-heading);
}

html[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--app-heading);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-bg: var(--app-surface-muted);
    --bs-btn-hover-color: var(--app-heading);
    --bs-btn-hover-border-color: var(--app-border-strong);
    --bs-btn-active-bg: var(--app-surface-muted);
    --bs-btn-active-color: var(--app-heading);
}

html[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--app-surface-muted);
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-bg: var(--app-surface-raised);
    --bs-btn-hover-color: var(--app-heading);
    --bs-btn-hover-border-color: var(--app-border-hover);
}

html[data-theme="dark"] .text-bg-light,
html[data-theme="dark"] .bg-light {
    background-color: var(--app-surface-muted) !important; /* le utility BS sono !important */
    color: var(--app-text) !important;
}

html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--app-surface-muted);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

html[data-theme="dark"] .text-dark { color: var(--app-heading) !important; /* utility BS */ }

/* Le utility di colore del testo di Bootstrap sui token (CDX-789): `text-secondary` e'
   #6c757d in tutti e due i temi (3,8:1 sul fondo scuro), `text-success`/`text-danger`
   restano i colori pieni di Bootstrap (3,9:1 in scuro). Sui token seguono il tema. */
.text-secondary { color: var(--app-text-soft) !important; /* utility BS */ }

.text-success { color: var(--app-success-text) !important; /* utility BS */ }
.text-info { color: var(--app-info-text) !important; /* utility BS: #0dcaf0 fisso stava a 1,8:1 sul bianco (planner, CDX-796) */ }

.text-danger { color: var(--adm-error-strong) !important; /* utility BS */ }

.text-warning { color: var(--app-warning-text) !important; /* utility BS */ }

/* `btn-outline-warning`: il giallo pieno di Bootstrap su bianco stava a 1,6:1. */
.btn-outline-warning {
    --bs-btn-color: var(--app-warning-text);
    --bs-btn-border-color: var(--app-warning-border);
    --bs-btn-hover-bg: var(--app-warning-bg);
    --bs-btn-hover-border-color: var(--app-warning-text);
    --bs-btn-hover-color: var(--app-warning-text);
    --bs-btn-active-bg: var(--app-warning-bg);
    --bs-btn-active-border-color: var(--app-warning-text);
    --bs-btn-active-color: var(--app-warning-text);
}

/* `btn-outline-success` (una conferma: «Gestita»): il verde pieno di Bootstrap stava a 4,3:1 in
   chiaro e 3,9 in scuro (misurato su jamaltaslaq, CDX-791). Sui token. */
.btn-outline-success {
    --bs-btn-color: var(--app-success-text);
    --bs-btn-border-color: var(--app-success-border);
    --bs-btn-hover-bg: var(--app-success-bg);
    --bs-btn-hover-border-color: var(--app-success-text);
    --bs-btn-hover-color: var(--app-success-text);
    --bs-btn-active-bg: var(--app-success-bg);
    --bs-btn-active-border-color: var(--app-success-text);
    --bs-btn-active-color: var(--app-success-text);
}

/* `text-bg-warning` e `text-bg-info` restano giallo e azzurro pieni anche in scuro: macchie
   chiare sul fondo blu notte. In scuro diventano le pastiglie tenui dei token, col bordo. */
html[data-theme="dark"] .text-bg-warning {
    background-color: var(--app-warning-bg) !important; /* le utility BS sono !important */
    color: var(--app-warning-text) !important;
    box-shadow: inset 0 0 0 1px var(--app-warning-border);
}

html[data-theme="dark"] .text-bg-info {
    background-color: var(--app-info-bg) !important;
    color: var(--app-info-text) !important;
    box-shadow: inset 0 0 0 1px var(--app-info-border);
}

/* `text-bg-dark` (una pastiglia «respinta», «nascosta»): in scuro e' grigio antracite sul
   fondo blu notte, quasi invisibile. Diventa una pastiglia rilevata con il bordo. */
html[data-theme="dark"] .text-bg-dark,
html[data-theme="dark"] .bg-dark {
    background-color: var(--app-surface-raised) !important; /* le utility BS sono !important */
    color: var(--app-heading) !important;
    box-shadow: inset 0 0 0 1px var(--app-border-strong);
}

/* -------------------------------------------------------------- utility --- */
/* Colonne numeriche (e la `#`) a destra, cifre allineate. Su th e td. */
.adm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Testo attenuato in una riga (un «nessuno», un id accanto al nome). */
.adm-muted { color: var(--app-muted); }

/* Titolo di una sezione dentro una pagina (sopra una tabella, un gruppo di numeri). */
.adm-sez { font-size: 1.15rem; margin-top: 2rem; }

/* Numeri in testa a una pagina: un numero grande e, sotto, cosa conta. Senza grassetto:
   lo distingue la misura. Sul telefono due per riga. Numero ed etichetta vanno a capo anche
   se sono `<span>` (jamaltaslaq, CDX-791). */
.adm-stats { display: flex; flex-wrap: wrap; gap: var(--app-space-16) var(--app-space-24); margin: var(--app-space-16) 0; }

.adm-stat { min-width: 9rem; }

.adm-stat__n { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--app-heading); font-variant-numeric: tabular-nums; }

.adm-stat__l { display: block; font-size: .8rem; color: var(--app-text-soft); }

/* Un numero che porta alla sua pagina (la home del planner, CDX-800): `<a class="adm-stat">`. Resta un
   numero, non un link blu: sottolineato solo al passaggio. */
a.adm-stat { text-decoration: none; }

a.adm-stat:hover .adm-stat__n,
a.adm-stat:focus-visible .adm-stat__n { color: var(--app-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767.98px) {
    .adm-stat { min-width: 0; flex: 1 1 40%; }
}

/* Sezione comprimibile (CDX-789): un titolo che e' un bottone, con la freccia ACCANTO al
   testo anche quando il testo va a capo (la freccia non scende sotto, il testo non le
   passa sotto). Aperta: freccia in giu'; chiusa: a destra. Markup:
     <h5 class="adm-toggle-h"><button class="adm-toggle collapsed" data-bs-toggle="collapse"
       data-bs-target="#x" aria-expanded="false" aria-controls="x"><i class="bi bi-chevron-down
       adm-toggle__icon"></i><span>Titolo</span></button></h5>  <div class="collapse" id="x">…
   Un link che accompagna la sezione («tutto il registro») sta DENTRO la sezione, non nel titolo. */
.adm-toggle-h { font-size: var(--app-text-lg); }

.adm-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--app-space-8);
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.adm-toggle:focus-visible { outline: 2px solid var(--app-focus-ring); outline-offset: 2px; border-radius: 4px; }

.adm-toggle__icon {
    flex: 0 0 auto;
    font-size: .8em;
    line-height: 1;
    margin-top: .3em;   /* alla prima riga del testo */
    transition: transform .2s ease;
}

.adm-toggle.collapsed .adm-toggle__icon { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
    .adm-toggle__icon { transition: none; }
}

/* Pastiglia di STATO tenue che segue il tema (WC-1085; dal CDX-793 la sola pastiglia delle pagine, al
   posto di `badge text-bg-*` pieni di Bootstrap, che in scuro abbagliano e nel testo gridano). Fondo
   tenue, bordo e testo della tinta, niente grassetto. Senza variante e' neutra (grigia).
     --ok  --ko  --attenzione  --info  --primario */
.badge.adm-badge-soft, .adm-badge-soft {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--app-radius-sm, .3rem);
    background: var(--adm-badge-bg, var(--app-surface-muted));
    color: var(--adm-badge-text, var(--app-text-soft));
    border: 1px solid var(--adm-badge-border, var(--app-border));
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.35;
    vertical-align: .1em;
    white-space: nowrap;
}

.adm-badge-soft .bi { font-size: .95em; }

.adm-badge-soft--ok { --adm-badge-bg: var(--app-success-bg); --adm-badge-text: var(--app-success-text); --adm-badge-border: var(--app-success-border); }

.adm-badge-soft--ko { --adm-badge-bg: var(--app-error-bg); --adm-badge-text: var(--adm-error-strong); --adm-badge-border: var(--app-error-border); }

.adm-badge-soft--attenzione { --adm-badge-bg: var(--app-warning-bg); --adm-badge-text: var(--app-warning-text); --adm-badge-border: var(--app-warning-border); }

.adm-badge-soft--info { --adm-badge-bg: var(--app-info-bg); --adm-badge-text: var(--app-info-text); --adm-badge-border: var(--app-info-border); }

.adm-badge-soft--primario { --adm-badge-bg: var(--app-selected-wash); --adm-badge-text: var(--app-accent-strong); --adm-badge-border: var(--app-selected-border); }

/* Palette di stato testo: !important contro la regola cella di Bootstrap
   (`.table>:not(caption)>*>*`, specificita' piu' alta — storia WC-041). Solo il
   colore: il grassetto che avevano in `wa-ui.css` e' uscito col CDX-789 (niente
   grassetto nelle griglie). */
.green  { color: var(--adm-status-green) !important; }

.red    { color: var(--adm-status-red) !important; }

.gray   { color: var(--adm-status-gray) !important; }

.yellow { color: var(--adm-status-yellow) !important; }

.orange { color: var(--adm-status-orange) !important; }

.blue   { color: var(--adm-status-blue) !important; }

td.green, td.red, td.yellow, td.orange, td.gray, td.blue { --bs-table-color: inherit; }

/* ------------------------------------------ dal passo 5 (CDX-791, jamaltaslaq) --- */
/* Nati nella dashboard di jamaltaslaq (`jt-dash.css`) e generici: qui, perche' servono a
   qualunque pagina admin. */

/* Il secondo rigo di una cella (lo slug sotto il titolo, l'id sotto il nome, il nome del
   file sotto l'anteprima): piccolo e attenuato, a capo. Su una CELLA intera torna cella —
   `display: block` la tirerebbe fuori dalla riga (JT-194). Stessa specificita' di
   `.adm-cards td`, che viene dopo: sul telefono la scheda vince. */
.adm-sub { display: block; color: var(--app-text-soft); font-size: .78rem; overflow-wrap: anywhere; }

td.adm-sub, th.adm-sub { display: table-cell; }

/* Una pastiglia in un elenco di etichette (categorie, stati, file che usano un testo):
   tonda e tenue, col margine che la separa dalla vicina anche quando il markup non lascia
   spazi. Coi colori di stato (`.green`, `.red`, `.yellow`, …) prende il loro testo e un
   bordo della stessa tinta; `--main` e' quella che conta (la categoria principale). */
.adm-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 1px 8px;
    border-radius: var(--app-radius-pill);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: .74rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.adm-chip:is(.green, .red, .yellow, .orange, .blue, .gray) { border-color: color-mix(in srgb, currentColor 40%, transparent); }

.adm-chip--main {
    background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-primary) 35%, transparent);
    color: var(--app-accent-strong);
}

/* La miniatura che manca: stesso posto di `img.adm-thumb`, bordo tratteggiato e un'icona. */
.adm-thumb--vuota {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-sm, .25rem);
    background: var(--app-surface-muted);
    border: 1px dashed var(--app-border-strong);
    color: var(--app-text-soft);
}

/* Etichetta e valore in una scheda (una richiesta, un cliente): un `<dl>` a griglia.
   Le etichette sono piccole e maiuscole, senza grassetto. */
.adm-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--app-space-8) var(--app-space-16);
    margin: var(--app-space-12) 0 0;
    padding-top: var(--app-space-12);
    border-top: 1px solid var(--app-border);
}

.adm-kv dt { font-size: var(--app-text-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--app-text-soft); }

.adm-kv dd { margin: 0; font-size: var(--app-text-sm); overflow-wrap: anywhere; }

/* La finestra «Scegli un'immagine»: una griglia di bottoni-miniatura. */
.adm-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--app-space-8); }

.adm-scelta {
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm, .375rem);
    background: var(--app-surface-muted);
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}

.adm-scelta:hover, .adm-scelta:focus-visible { border-color: var(--app-primary); }

.adm-scelta img { width: 100%; height: 90px; object-fit: cover; }

/* Legende in testa alle pagine (termine · campo DB · spiegazione), da `wd-legend`
   (WC-1081). Sul telefono la riga va a capo: termine e campo in riga, spiegazione
   sotto a tutta larghezza. Niente grassetto nemmeno qui. */
.adm-legend td { font-weight: 400; }

@media (max-width: 767.98px) {
    .adm-legend { width: 100% !important; /* batte `w-auto` di BS */ }
    .adm-legend tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--app-space-10); padding-bottom: 10px; }
    .adm-legend td { display: block; padding: 0; white-space: normal !important; /* batte `text-nowrap` */ }
    .adm-legend td:last-child { flex-basis: 100%; }
    .adm-legend td:empty { display: none; }
}

/* Tabelle larghe che sul telefono diventano una scheda per riga, da `wd-cards`
   (WC-1082). Da computer la tabella resta com'e'. Ogni `<td>` dichiara cosa e':
     data-label="…"        etichetta a sinistra, valore a destra (vuota: sparisce)
     .adm-cards__title     il nome, in testa (accanto all'immagine, se c'e')
     .adm-cards__img       la miniatura, in alto a sinistra
     .adm-cards__field     etichetta sopra, contenuto a sinistra (testi lunghi, campi)
     .adm-cards__actions   i bottoni, in fondo
     .adm-cards__hide      sparisce
   ⚠️ `text-end`/`text-center` di Bootstrap sono !important: le regole che allineano
   qui lo sono anche loro (WC-1089). */
@media (max-width: 767.98px) {
    .adm-cards thead { display: none; }
    .adm-cards, .adm-cards tbody { display: block; }
    .adm-cards tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid var(--app-border);
        border-radius: var(--bs-border-radius-lg);
        background: var(--app-surface);
    }
    /* `> tbody > tr > td` (0,1,3) batte le celle del foglio dell'ospite (`.table tbody td`, planner: padding
       13px 16px) e `width: auto` le colonne strette da computer (`.table-col-compact { width: 1% }`), CDX-796. */
    .adm-cards td,
    .adm-cards > tbody > tr > td { display: block; grid-column: 1 / -1; width: auto; padding: 3px 0; border: 0; box-shadow: none !important; background: transparent !important; text-align: right; white-space: normal !important; }
    .adm-cards td[data-label] { text-align: right !important; }
    .adm-cards td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--app-muted); text-align: left; }
    /* Una cella intera piccola (`td.adm-sub`, `td.small`: le date, gli autori, le note) in
       tabella e' un secondo piano; nella scheda e' una riga come le altre, e usciva piu'
       piccola di quelle accanto, etichetta compresa. Sul telefono torna al corpo della scheda
       (il titolo, dopo, resta piu' grande). */
    .adm-cards td.adm-sub,
    .adm-cards td.small { font-size: inherit; }
    .adm-cards td.adm-cards__hide,
    .adm-cards td[data-label]:empty { display: none; }
    .adm-cards td.adm-cards__img { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
    .adm-cards td.adm-cards__img img { display: block; overflow: hidden; width: 56px; height: 56px; object-fit: cover; border-radius: var(--bs-border-radius); }
    .adm-cards td.adm-cards__title { grid-column: 2; grid-row: 1; align-self: center; text-align: left !important; font-size: var(--app-text-md); padding-bottom: 8px; }
    .adm-cards td.adm-cards__field { text-align: left !important; }
    .adm-cards td.adm-cards__field::before { float: none; display: block; margin: 0 0 4px; }
    .adm-cards td.adm-cards__actions { text-align: left !important; padding-top: 8px; }
    /* Dal planner (CDX-794 → CDX-796, «la versione migliore»): una cella senza etichetta sta a
       sinistra, e una cella con un campo, una tendina, un testo lungo da scrivere o un form fa da
       `adm-cards__field` da sola — etichetta sopra, contenuto a sinistra — senza la classe. */
    .adm-cards td:not([data-label]),
    .adm-cards td[data-label=""] { text-align: left !important; }
    .adm-cards td[data-label=""]::before { display: none; }
    .adm-cards td:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, form) { text-align: left !important; }
    .adm-cards td:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, form)::before { float: none; display: block; margin: 0 0 4px; }
}

/* ------------------------------------------------ componenti adm- generici --- */
/* Dal guscio wa_media_admin (CDX-760): valgono per qualunque pagina admin. */
.adm-wrap { margin: 0 auto; padding: 1rem; color: var(--app-text); }

/* CDX-786: un `<a class="adm-btn">` e' un bottone, non un link: il `:where()` tiene
   bassa la specificita', cosi' i link dentro componenti col colore ereditato restano. */
.adm-wrap a:not(:where(.adm-btn, .btn, .btn-ui)) { color: var(--app-link-text, var(--app-primary)); }

/* Sotto la testata comune (`.adm-hero`) il contenuto sta sul binario della testata.
   CDX-788: il vecchio titolo in pagina del guscio (`.adm-top`, `.adm-nav`) non esiste
   piu': il nome della pagina lo dice la testata, e una volta sola. */
body:has(.adm-hero) .adm-wrap { padding: 0 var(--app-space-16, 1rem); }

/* Un campo nudo (non `.form-control`) dentro una pagina admin: stessi token dei campi. */
.adm-wrap :where(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="date"], select, textarea):where(:not(.form-control, .form-select)) {
    padding: .35rem .5rem;
    border: 1px solid var(--app-field-border, var(--app-border));
    border-radius: var(--app-radius-sm, .375rem);
    background: var(--app-field-background, var(--app-surface));
    color: var(--app-field-text, var(--app-text));
    font: inherit;
    font-size: .85rem;
}

/* Sopra i 768 la `.row` di Bootstrap (worldcapp) ha gia' le sue spaziature: questa riga e' per il guscio. */
.adm-filtri:not(.row) { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }

.adm-filtri label { display: flex; flex-direction: column; font-size: .8rem; gap: .15rem; color: var(--adm-text-secondary); }

/* CDX-786: una casella sta in riga col suo testo, non sopra. */
.adm-filtri label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: .35rem; min-height: 2.1rem; }

.adm-filtri label > input[type="checkbox"] { margin: 0; }

.adm-filtri input[type="text"], .adm-filtri select { min-width: 12rem; }

/* I FILTRI sul telefono (CDX-793, dal planner): sotto i 768px una colonna — ogni campo e ogni tendina
   a tutta larghezza (via le larghezze a caso: `w-auto`, `style="width:220px"`, `col-auto`), i bottoni
   uno sotto l'altro a tutta larghezza, l'azione principale (`btn-primary`/`adm-btn--primario`) blu.
   Un gruppo di schede («Da gestire | Gestite | Tutte») resta un gruppo, a tutta riga, con le schede di
   pari larghezza. La classe `adm-filtri` va sul `<form>` dei filtri, qualunque sia il suo markup: le
   etichette che avvolgono il campo del guscio, la `.row` di Bootstrap di worldcapp, la griglia di
   jamaltaslaq (`jtd-filtri`), la barra con una tendina sola. Sopra i 768 resta com'e'.
   `!important` solo contro utility di Bootstrap che lo sono (`d-flex`, `w-auto`, `ms-auto`). */
@media (max-width: 767.98px) {
    .adm-filtri {
        display: flex !important; /* batte d-flex/row/grid dell'ospite */
        flex-direction: column;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: var(--app-space-10);
        width: 100%;
        max-width: none !important; /* batte uno style in riga */
        margin-left: 0;
        margin-right: 0;
    }
    .adm-filtri > * { width: 100% !important; max-width: 100%; flex: 0 0 auto; margin: 0 !important; padding-left: 0; padding-right: 0; }
    .adm-filtri label:not(:has(> input[type="checkbox"], > input[type="radio"])) { flex: 0 0 auto; }
    .adm-filtri :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { width: 100% !important; min-width: 0 !important; }
    .adm-filtri :is(.btn, .adm-btn, .btn-ui):not(.btn-group > *) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--app-space-8);
        width: 100%;
        min-height: 40px;
        margin: 0 !important;
    }
    .adm-filtri :is(.btn, .adm-btn, .btn-ui):not(.btn-group > *) + :is(.btn, .adm-btn, .btn-ui) { margin-top: var(--app-space-8) !important; }
    /* Un contenitore di bottoni (`jtd-filtri__azioni`, `col-auto` coi due bottoni) li impila. */
    .adm-filtri > :has(> :is(.btn, .adm-btn, .btn-ui)):not(.btn-group) { display: flex !important; flex-direction: column; gap: var(--app-space-8); }
    .adm-filtri > :has(> :is(.btn, .adm-btn, .btn-ui)):not(.btn-group) > :is(.btn, .adm-btn, .btn-ui) { margin-top: 0 !important; }
    .adm-filtri > :empty { display: none; }
    .adm-filtri .btn-group { display: flex; width: 100%; }
    .adm-filtri .btn-group > .btn { flex: 1 1 auto; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* Un gruppo di schede di filtro fuori da un form (`btn-group` di link): stesso comportamento. */
@media (max-width: 767.98px) {
    .adm-schede-filtro { display: flex !important; width: 100%; }
    .adm-schede-filtro > .btn { flex: 1 1 auto; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

.adm-btn {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--app-border-strong, var(--app-border));
    border-radius: var(--app-radius-sm, .375rem);
    background: var(--app-surface-raised, var(--app-surface));
    color: var(--app-text);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    line-height: 1.3;
}

/* Il colore va ridetto in `:hover`, dove `a:hover` di Bootstrap batterebbe `.adm-btn`. */
.adm-btn:hover { border-color: var(--app-border-hover, var(--app-primary)); background: var(--app-surface-muted); color: var(--app-text); }

.adm-btn--primario { background: var(--app-primary-fill, var(--app-primary)); border-color: var(--app-primary-fill, var(--app-primary)); color: var(--app-primary-fill-text); }

.adm-btn--primario:hover { background: var(--app-primary-fill-hover, var(--app-primary-hover, var(--app-primary))); color: var(--app-primary-fill-text); }

.adm-btn--rosso, .adm-btn--rosso:hover { color: var(--adm-error-strong); border-color: var(--app-error-border, var(--app-error-text)); }

.adm-btn:disabled { opacity: .5; cursor: default; }

/* Gli AVVISI (CDX-793, modello `.app-alert` del planner): una famiglia sola per esiti, avvisi di
   configurazione e note, al posto di `alert alert-*` di Bootstrap (fuori palette in scuro) e delle
   varianti di ogni dashboard. Fondo tenue, bordo, filo di 4px a sinistra, ICONA in testa.
     adm-alert--ok          successo    (spunta)       «Salvato.»
     adm-alert--attenzione  attenzione  (triangolo)    una cosa da sapere prima di andare avanti
     adm-alert--ko          errore      (croce)        «Non salvato.»
     adm-alert--info        info        (i piena)      «Sola lettura», un'informazione di stato
     adm-alert--nota        neutro      (i vuota)      la spiegazione di come funziona una pagina
   L'icona la mette il CSS (`::before`, font Bootstrap Icons, che tutti gli ospiti caricano): il
   markup resta `<div class="adm-alert adm-alert--ok">testo</div>`, col testo libero dentro (grassetti,
   link, elenchi). Chi vuole un'icona sua la mette come primo figlio con `.adm-alert__icon` e quella
   del CSS sparisce. Il testo e' il colore di stato; il rosso e' quello forte (`--adm-error-strong`). */
.adm-alert {
    position: relative;
    margin-bottom: var(--app-space-16);
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--adm-alert-border, var(--app-border));
    border-left-width: 4px;
    border-radius: var(--app-radius, .5rem);
    background: var(--adm-alert-bg, var(--app-surface-muted));
    color: var(--adm-alert-text, var(--app-text));
    overflow-wrap: anywhere;
}

.adm-alert::before,
.adm-alert > .adm-alert__icon {
    position: absolute;
    left: 15px;
    top: 14px;
    width: 20px;
    font-family: "bootstrap-icons";
    font-size: 18px;
    line-height: calc(1em * 1.4);
    font-weight: 400 !important; /* batte `.bi` e i `<strong>` intorno */
    text-align: center;
    color: var(--adm-alert-icon, currentColor);
}

.adm-alert::before { content: var(--adm-alert-glyph, "\f431"); }

.adm-alert:has(> .adm-alert__icon)::before { content: none; }

.adm-alert--ok { --adm-alert-bg: var(--app-success-bg); --adm-alert-border: var(--app-success-border); --adm-alert-text: var(--app-success-text); --adm-alert-glyph: "\f26a"; }

.adm-alert--attenzione { --adm-alert-bg: var(--app-warning-bg); --adm-alert-border: var(--app-warning-border); --adm-alert-text: var(--app-warning-text); --adm-alert-glyph: "\f33a"; }

.adm-alert--ko { --adm-alert-bg: var(--app-error-bg); --adm-alert-border: var(--app-error-border); --adm-alert-text: var(--adm-error-strong); --adm-alert-glyph: "\f622"; }

.adm-alert--info { --adm-alert-bg: var(--app-info-bg); --adm-alert-border: var(--app-info-border); --adm-alert-text: var(--app-info-text); --adm-alert-glyph: "\f430"; }

/* Riquadro di spiegazione neutro (CDX-789): una nota su come funziona una pagina. Al posto di
   `alert alert-secondary` di Bootstrap, che col tema scuro e' un grigio fuori palette. Testo del
   corpo, icona attenuata. */
.adm-alert--nota { --adm-alert-bg: var(--app-surface-muted); --adm-alert-border: var(--app-border); --adm-alert-text: var(--app-text); --adm-alert-icon: var(--app-text-soft); --adm-alert-glyph: "\f431"; }

/* I link dentro un avviso sono del colore dell'avviso, sottolineati (come nel planner); nella nota
   restano del colore dei link. */
.adm-alert a:not(.btn, .btn-ui, .adm-btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.adm-alert--nota a:not(.btn, .btn-ui, .adm-btn) { color: var(--app-link-text); }

.adm-alert > :last-child { margin-bottom: 0; }

.adm-alert ul, .adm-alert ol { padding-left: 1.2rem; }

/* Lo STATO VUOTO (CDX-793, modello `.app-alert-next-step` del planner): una tabella o un elenco
   senza righe non e' una riga grigia («Niente da gestire.») ma un riquadro che dice cosa manca e,
   quando c'e', porta al passo dopo con un link. Palette info, icona in testa (dal CSS, come gli
   avvisi). Markup: `<p class="adm-vuoto">Nessun capo con questi filtri. <a href="…">Togli i
   filtri</a></p>`; dentro una tabella sta nella cella che attraversa le colonne. */
.adm-vuoto {
    position: relative;
    margin: 0 0 var(--app-space-16);
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--app-info-border);
    border-left-width: 4px;
    border-radius: var(--app-radius, .5rem);
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: var(--app-text-md);
    text-align: left;
    white-space: normal;
}

.adm-vuoto::before {
    content: "\f430";
    position: absolute;
    left: 15px;
    top: 14px;
    width: 20px;
    font-family: "bootstrap-icons";
    font-size: 18px;
    line-height: calc(1em * 1.4);
    text-align: center;
}

.adm-vuoto:last-child { margin-bottom: 0; }

.adm-vuoto a:not(.btn, .btn-ui, .adm-btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Nella cella di una tabella: la cella non ha righe sopra e sotto, il riquadro sta sulla card. */
td:has(> .adm-vuoto:only-child) { padding: var(--app-space-10) 0 !important; border: 0; background: transparent !important; box-shadow: none !important; }

@media (max-width: 767.98px) {
    .adm-cards tr:has(> td > .adm-vuoto:only-child) { display: block; padding: 0; border: 0; background: transparent; }
}

.adm-conteggio { font-size: .9rem; color: var(--adm-text-secondary); margin-bottom: .5rem; }

.adm-badge { display: inline-block; padding: .05rem .4rem; border-radius: var(--app-radius-sm, .3rem); font-size: .72rem; background: var(--app-warning-bg); border: 1px solid var(--app-warning-border); color: var(--app-warning-text); }

.adm-blocco { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; padding: .5rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm, .375rem); background: var(--app-surface); font-size: .85rem; }

.adm-blocco form { display: inline; margin: 0; }

.adm-pag { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; font-size: .85rem; color: var(--adm-text-secondary); }

/* Una tabella in una pagina admin: sulla card, non sul fondo pagina. */
.adm-wrap .table { background: var(--app-surface); font-size: .85rem; }

/* 320 e non 280: a 1280 i tre fieldset riempiono la riga invece di lasciare una quarta colonna vuota
   (la tengono viva i bottoni in fondo, che la attraversano tutta). */
.adm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; }

.adm-form fieldset { border: 1px solid var(--app-border); border-radius: var(--app-radius, .5rem); padding: .75rem 1rem; margin: 0; background: var(--app-surface); min-width: 0; }

/* Il titolo di una card di form: niente grassetto (regola di Luca), lo distingue il colore. */
.adm-form legend { font-size: var(--app-text-lg); font-weight: 400; padding: 0 .3rem; color: var(--app-heading, var(--app-text)); }

.adm-form > div { grid-column: 1 / -1; }

.adm-form label { display: block; font-size: .85rem; margin-bottom: .5rem; }

.adm-form input[type="text"], .adm-form input[type="number"], .adm-form input[type="url"], .adm-form input[type="date"], .adm-form select { width: 100%; font-size: .9rem; }

.adm-form input[readonly] { background: var(--app-surface-muted); color: var(--app-muted); }

.adm-nota { font-size: .78rem; color: var(--app-muted); margin-top: .15rem; }

.adm-rosso { border-color: var(--app-error-text) !important; /* batte il bordo del campo */ }

.adm-foot { margin-top: 2rem; font-size: .75rem; color: var(--adm-text-secondary); }

/* ----------------------------------------------------------------- visore --- */
/* Il visore di una griglia di foto (CDX-766, JT-611): l'immagine grande sopra la pagina, con
   frecce, contatore e didascalia. Era del guscio media (`adm.css`); dal passo 5 (CDX-791) sta
   qui, perche' lo usa anche il Media di jamaltaslaq — che ci mostra anche i VIDEO.
   ⚠️ Colori fissi VOLUTI: lo sfondo e' un nero opaco in entrambi i temi (dietro c'e' una
   griglia di foto, e un velo chiaro le lascerebbe intravedere sotto quella che stai
   guardando), quindi testo e bottoni sono bianchi in entrambi. */
body.adm-visore-aperto { overflow: hidden; }

.adm-visore {
    position: fixed;
    inset: 0;
    z-index: 1080;   /* sopra i modali di Bootstrap (1055) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: clamp(.5rem, 2vw, 2rem);
    background: rgba(0, 0, 0, .88);
}

/* ⚠️ Senza questa riga `box.hidden = true` NON nasconde niente: il `display: flex` qui sopra
   e' una regola d'autore e batte l'`[hidden] { display: none }` del browser (JT-611). */
.adm-visore[hidden] { display: none; }

.adm-visore__corpo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 100%; max-height: 100%; min-width: 0; }

.adm-visore__corpo img,
.adm-visore__corpo video { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: var(--app-radius-sm, .375rem); background: #111; }

.adm-visore figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .25rem .75rem; text-align: center; color: #fff; font-size: .85rem; max-width: min(100%, 60rem); }

.adm-visore figcaption strong { font-size: .95rem; font-weight: 400; }

.adm-visore figcaption span { opacity: .72; }

.adm-visore figcaption a { color: #9ec5fe; }

.adm-visore__x,
.adm-visore__nav { flex: none; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; border-radius: var(--app-radius-sm, .375rem); cursor: pointer; line-height: 1; }

.adm-visore__x { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; font-size: 1.5rem; }

.adm-visore__nav { width: 2.75rem; height: 4rem; font-size: 2rem; }

.adm-visore__x:hover,
.adm-visore__nav:hover { background: rgba(255, 255, 255, .22); }

.adm-visore__conta { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); color: #fff; opacity: .6; font-size: .78rem; }

@media (max-width: 700px) {
    .adm-visore__nav { width: 2.25rem; height: 3rem; font-size: 1.5rem; }
    .adm-visore__corpo img,
    .adm-visore__corpo video { max-height: calc(100vh - 11rem); }
}