/*
 * Design system di maga.
 *
 * Riproduce il linguaggio grafico del mockup UIAble (shadcn/ui) con CSS scritto
 * a mano: niente framework CSS, niente build step, niente risorse esterne.
 * Valori e motivazioni in docs/design/00-fondazioni.md §5.
 *
 * Indice: 1 font · 2 token · 3 base · 4 componenti · 5 guscio pubblico ·
 *         6 guscio admin · 7 pagine
 */

/* 1. Font — Inter Variable, vendorizzato (SIL OFL 1.1, v. fonts/inter/LICENSE.txt) */

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal-Gz7AlRl.woff2") format('woff2') tech('variations'),
         url("../fonts/inter/inter-latin-wght-normal-Gz7AlRl.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-ext-wght-normal-1Br77OV.woff2") format('woff2') tech('variations'),
         url("../fonts/inter/inter-latin-ext-wght-normal-1Br77OV.woff2") format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Token
 *
 * Tema chiaro su :root; scuro se lo sceglie l'utente (data-theme) o, senza
 * scelta, se lo chiede il sistema. data-theme viene impostato prima del primo
 * paint dallo script in base.html.twig (default: scuro).
 */

:root {
    color-scheme: light;

    --bg: #f3f4f6;
    --fg: #030712;
    --card: #ffffff;
    --card-fg: #101828;
    --popover: #ffffff;
    --muted: #f3f4f6;
    --muted-fg: #666e7d;
    --accent: #f3f4f6;
    --accent-fg: #101828;
    --border: #d1d5dc;
    --input: #ffffff;
    /* Contorno dei campi: almeno 3:1 sul campo e sullo sfondo (WCAG 1.4.11) */
    --input-border: #858c99;
    --primary: #2469ff;
    --primary-fg: #ffffff;
    --link: #1957dd;
    --ring: #4680ff;
    --sidebar: #f9fafb;
    --sidebar-border: #e5e7eb;
    --success: #007e56;
    --warning: #aa5900;
    --danger: #d4000a;
    --on-status: #ffffff;
    --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
    --shadow-popover: 0 10px 30px -10px rgb(16 24 40 / 0.25);

    --radius: 0.5rem;
    --font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --sidebar-width: 16rem;
    --topbar-height: 60px;
    --content-max: 80rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #1a1a1c;
        --fg: #e8e8ea;
        --card: #242427;
        --card-fg: #e8e8ea;
        --popover: #2c2c30;
        --muted: #2c2c30;
        --muted-fg: #a1a1aa;
        --accent: #3a3a3f;
        --accent-fg: #e8e8ea;
        --border: #34343a;
        --input: #242427;
        --input-border: #72727c;
        --link: #5087ff;
        --sidebar: #242427;
        --sidebar-border: #34343a;
        --success: #00d294;
        --warning: #fcbb00;
        --danger: #ff6467;
        --on-status: #101012;
        --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-popover: 0 10px 30px -10px rgb(0 0 0 / 0.7);
    }
}

:root[data-theme='dark'],
:root[data-theme='oled'] {
    color-scheme: dark;
    --bg: #1a1a1c;
    --fg: #e8e8ea;
    --card: #242427;
    --card-fg: #e8e8ea;
    --popover: #2c2c30;
    --muted: #2c2c30;
    --muted-fg: #a1a1aa;
    --accent: #3a3a3f;
    --accent-fg: #e8e8ea;
    --border: #34343a;
    --input: #242427;
    --input-border: #72727c;
    --link: #5087ff;
    --sidebar: #242427;
    --sidebar-border: #34343a;
    --success: #00d294;
    --warning: #fcbb00;
    --danger: #ff6467;
    --on-status: #101012;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-popover: 0 10px 30px -10px rgb(0 0 0 / 0.7);
}

/* OLED: stesso tema scuro, superfici a nero pieno (variante del mockup) */
:root[data-theme='oled'] {
    --bg: #000000;
    --fg: #fafafa;
    --card: #0d0d0d;
    --card-fg: #fafafa;
    --popover: #171717;
    --muted: #171717;
    --muted-fg: #a3a3a3;
    --accent: #262626;
    --accent-fg: #fafafa;
    --border: #1f1f1f;
    --input: #0d0d0d;
    --input-border: #636363;
    --sidebar: #0d0d0d;
    --sidebar-border: #1f1f1f;
}

/* 3. Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure {
    margin: 0;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

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

a:hover {
    text-decoration: underline;
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

code, kbd {
    font-family: var(--font-mono);
    font-size: 0.8125em;
}

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.icon--lg {
    width: 1.5rem;
    height: 1.5rem;
}

.icon--xl {
    width: 2.5rem;
    height: 2.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-fg);
}

.skip-link:focus {
    top: 1rem;
}

.text-muted {
    color: var(--muted-fg);
}

/* L'attributo hidden vince sempre: .btn, .form e le griglie impostano display
   e altrimenti lo annullerebbero (pagina di scansione, design 04 §8.1) */
[hidden] {
    display: none !important;
}

/* 4. Componenti */

/* Bottoni */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
    text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    pointer-events: none;
}

.btn--primary {
    background: var(--primary);
    color: var(--primary-fg);
}

.btn--primary:hover {
    background: color-mix(in srgb, var(--primary) 88%, black);
}

.btn--secondary {
    background: var(--card);
    border-color: var(--border);
    color: var(--fg);
}

.btn--secondary:hover,
.btn--ghost:hover {
    background: var(--accent);
    color: var(--accent-fg);
}

.btn--ghost {
    background: transparent;
    color: var(--fg);
}

.btn--danger {
    background: var(--danger);
    color: var(--on-status);
}

.btn--sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
}

.btn--lg {
    height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
}

.btn--icon {
    width: 2.25rem;
    padding: 0;
}

.btn--icon.btn--sm {
    width: 2rem;
}

/* Badge — il testo è il colore di stato mescolato col primo piano: puro, sul
   suo stesso fondo tinto, in tema chiaro scenderebbe sotto il contrasto AA */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.badge--success { color: color-mix(in srgb, var(--success) 80%, var(--fg)); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: transparent; }
.badge--warning { color: color-mix(in srgb, var(--warning) 80%, var(--fg)); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: transparent; }
.badge--danger { color: color-mix(in srgb, var(--danger) 80%, var(--fg)); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: transparent; }
.badge--muted { color: var(--muted-fg); background: var(--muted); border-color: transparent; }

/* Card */
.card {
    background: var(--card);
    color: var(--card-fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.card__title {
    font-size: 1rem;
    font-weight: 600;
}

.card__description {
    margin-top: 0.25rem;
    color: var(--muted-fg);
}

.card__body {
    padding: 1.5rem;
}

/* Alert / messaggi flash */
.alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.alert--success { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--card)); }
.alert--warning { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 10%, var(--card)); }
.alert--danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--card)); }

.alert--success .icon { color: var(--success); }
.alert--warning .icon { color: var(--warning); }
.alert--danger .icon { color: var(--danger); }

.flash-stack {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Campi dei form */
.field {
    display: grid;
    gap: 0.375rem;
}

.field label {
    font-weight: 500;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input);
    color: var(--fg);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--muted-fg);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Errori e aiuti dei campi (tema dei form: templates/form/tema.html.twig) */
.field__aiuto {
    color: var(--muted-fg);
    font-size: 0.8125rem;
}

.field__errori {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: 0.8125rem;
    font-weight: 500;
}

.field--errore .input {
    border-color: var(--danger);
}

.form {
    display: grid;
    /* Come .grid: la colonna non si allarga quanto una tabella del form */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.form__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Tabelle */
.table-wrap {
    /* relative: anche gli elementi in position: absolute delle celle (le etichette
       .visually-hidden) restano dentro lo scorrimento e non allargano la pagina */
    position: relative;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.table th {
    position: sticky;
    top: 0;
    background: var(--card);
    color: var(--muted-fg);
    font-size: 0.75rem;
    font-weight: 500;
}

.table tbody tr:hover {
    background: var(--accent);
}

/* Menu a tendina (details/summary: si apre anche senza JavaScript) */
.menu {
    position: relative;
}

.menu > summary {
    list-style: none;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    z-index: 50;
    min-width: 11rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--popover);
    box-shadow: var(--shadow-popover);
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--accent);
    color: var(--accent-fg);
}

.menu__item[aria-pressed='true'] {
    font-weight: 600;
}

.menu__item[aria-pressed='true']::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--primary);
}

/* L'icona del selettore segue il tema attivo, senza JavaScript */
.theme-icon {
    display: none;
}

:root[data-theme='dark'] .theme-icon--dark,
:root[data-theme='light'] .theme-icon--light,
:root[data-theme='oled'] .theme-icon--oled,
:root:not([data-theme]) .theme-icon--sistema {
    display: block;
}

/* Marchio */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: inherit;
    font-weight: 700;
}

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

.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--primary);
    color: var(--primary-fg);
    font-size: 0.875rem;
    font-weight: 800;
}

.brand__text {
    display: grid;
    line-height: 1.15;
}

.brand__name {
    font-size: 1rem;
}

.brand__sub {
    color: var(--muted-fg);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Stato vuoto */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted-fg);
}

.empty-state__title {
    color: var(--fg);
    font-weight: 600;
}

/* 5. Guscio pubblico */

.container {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-main {
    min-height: calc(100vh - 4rem - 5rem);
}

.site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted-fg);
    font-size: 0.8125rem;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

/* 6. Guscio admin */

.admin {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar);
    transform: translateX(-100%);
    /* Chiusa = anche invisibile: i link escono dall'ordine di tabulazione.
       visibility si anima a scatti alla fine, quindi lo scorrimento si vede. */
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
}

.sidebar__header,
.sidebar__footer {
    padding: 0.75rem;
}

.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
}

.sidebar__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem;
}

.sidebar__group {
    padding: 0.5rem 0;
}

.sidebar__label {
    margin: 0;
    padding: 0 0.5rem 0.375rem;
    color: var(--muted-fg);
    font-size: 0.75rem;
    font-weight: 500;
}

.sidebar__menu {
    display: grid;
    gap: 0.125rem;
    padding: 0;
    list-style: none;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: var(--radius);
    color: var(--fg);
    font-weight: 500;
}

.sidebar__link:hover {
    background: var(--accent);
    color: var(--accent-fg);
    text-decoration: none;
}

.sidebar__link[aria-current='page'] {
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
}

.sidebar__link[aria-current='page'] .icon {
    color: var(--link);
}

/* Area di amministrazione (design 15 §2.2): il nome dell'area e "Torna al magazzino" */
.sidebar__area {
    display: grid;
    gap: 0.25rem;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid var(--border);
}

.sidebar__area-nome {
    padding: 0 0.5rem;
    color: var(--muted-fg);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar__indietro {
    color: var(--muted-fg);
}

/* Il pulsante Amministrazione nella barra in alto, acceso dentro l'area */
.topbar__amministrazione[aria-current='page'] {
    background: var(--accent);
    color: var(--accent-fg);
}

.topbar__amministrazione[aria-current='page'] .icon {
    color: var(--link);
}

/* Voci di unità non ancora implementate: visibili, non cliccabili */
.sidebar__link--disabled {
    color: var(--muted-fg);
    cursor: default;
}

.sidebar__link--disabled:hover {
    background: transparent;
    color: var(--muted-fg);
}

.sidebar__soon {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
}

.sidebar__footer {
    border-top: 1px solid var(--sidebar-border);
    color: var(--muted-fg);
    font-size: 0.75rem;
}

.sidebar-backdrop {
    display: none;
}

/* Telefono/tablet stretto: sidebar a scomparsa sopra il contenuto */
.admin.is-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-popover);
    /* In apertura visibile SUBITO (senza transizione su visibility): altrimenti
       nel primo istante è ancora hidden e il focus non può entrare nel pannello. */
    transition: transform 0.2s ease;
}

.admin.is-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgb(0 0 0 / 0.5);
}

.admin__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    transition: margin-left 0.2s ease;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--topbar-height);
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.topbar__start,
.topbar__end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Si stringe il titolo (con i puntini), mai i pulsanti a destra: altrimenti
   escono dalla barra quando il titolo è lungo (test e2e, pagina dei kit a telefono) */
.topbar__start {
    flex: 1 1 auto;
}

.topbar__end {
    flex-shrink: 0;
}

.topbar__title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin__content {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1rem;
}

/* Senza JavaScript (revisione finale G-8): con JavaScript il contenuto di
   <noscript> è testo, quindi :has() trova il link solo quando gli script sono
   spenti. Allora il link apre il menu con :target e sostituisce il pulsante. */
:has(> noscript > .menu-senza-js) > button {
    display: none;
}

.sidebar:target {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-popover);
    transition: none;
}

@media (min-width: 768px) {
    .sidebar {
        transform: none;
        visibility: visible;
    }

    .menu-senza-js {
        display: none;
    }

    .admin__main {
        margin-left: var(--sidebar-width);
    }

    .sidebar__close {
        display: none;
    }

    .admin.is-open .sidebar {
        box-shadow: none;
    }

    .admin.is-open .sidebar-backdrop {
        display: none;
    }

    /* Sidebar chiusa dall'utente (scelta ricordata, v. sidebar_controller) */
    :root[data-sidebar='chiusa'] .sidebar {
        transform: translateX(-100%);
        visibility: hidden;
    }

    :root[data-sidebar='chiusa'] .admin__main {
        margin-left: 0;
    }

    .topbar {
        padding: 0 1.5rem;
    }

    .admin__content {
        padding: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .admin__main {
        transition: none;
    }
}

/* Intestazione di pagina */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
}

.page-header__description {
    margin-top: 0.25rem;
    color: var(--muted-fg);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    color: var(--muted-fg);
    font-size: 0.8125rem;
}

.breadcrumb li + li::before {
    content: '/';
    margin-right: 0.375rem;
}

.breadcrumb a {
    color: inherit;
}

.breadcrumb a:hover {
    color: var(--fg);
}

/* 7. Pagine */

.grid {
    display: grid;
    /* Una colonna larga quanto lo spazio, non quanto il contenuto: una tabella
       larga scorre dentro il suo .table-wrap invece di allargare la pagina */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grid + .grid {
    margin-top: 1.5rem;
}

.stat__label {
    color: var(--muted-fg);
    font-weight: 500;
}

.stat__value {
    margin-top: 0.5rem;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat__note {
    margin-top: 0.25rem;
    color: var(--muted-fg);
    font-size: 0.75rem;
}

.steps {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted-fg);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Home pubblica */
.hero {
    padding: 4rem 0 3rem;
    text-align: center;
}

.hero__eyebrow {
    display: inline-flex;
    margin-bottom: 1rem;
}

.hero__title {
    max-width: 44rem;
    margin: 0 auto;
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.hero__lead {
    max-width: 40rem;
    margin: 1rem auto 0;
    color: var(--muted-fg);
    font-size: 1.0625rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.features {
    padding-bottom: 4rem;
}

.feature__icon {
    display: inline-flex;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--link);
}

.feature__title {
    font-size: 1rem;
}

.feature__text {
    margin-top: 0.5rem;
    color: var(--muted-fg);
}

/* Accesso (login) */
.auth {
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
}

.auth__card {
    width: 100%;
    max-width: 24rem;
}

.auth__titolo {
    font-size: 1.25rem;
}

.auth__testo {
    margin-top: 0.25rem;
    color: var(--muted-fg);
}

.auth__card .alert {
    margin-bottom: 1rem;
}

/* Colonna stretta per le pagine con un solo form */
.stretto {
    max-width: 32rem;
}

/* Menu dell'utente nella topbar */
.utente-menu__iniziali {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--muted);
    color: var(--fg);
    font-size: 0.75rem;
    font-weight: 600;
}

.utente-menu__nome {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu__intestazione {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.menu__intestazione small {
    display: block;
    color: var(--muted-fg);
}

.menu__panel form {
    margin: 0;
}


/* Colonna di azioni con spiegazione sotto ciascuna */
.azioni-verticali {
    display: grid;
    gap: 1.25rem;
}

.azioni-verticali form {
    margin: 0 0 0.375rem;
}

/* Pulsanti affiancati (scollega / scollega subito, sospendi / sospendi subito) */
.azioni-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.azioni-riga form {
    margin: 0;
}

/* Sezione a tutta larghezza sotto una griglia */
.sezione {
    margin-top: 1.5rem;
}

.card__header--azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card__header--azioni form {
    margin: 0;
}

/* Associazione di un telefono: QR sempre scuro su bianco, anche in tema scuro */
.associazione__qr {
    display: grid;
    place-items: center;
}

.qr {
    width: min(100%, 18rem);
    height: auto;
    border-radius: calc(var(--radius) - 2px);
}

.associazione__stato {
    margin-top: 1.25rem;
}

.associazione__stato .alert {
    align-items: center;
}

/* Catalogo: sigle e codici */
.sigla {
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sigla--grande {
    font-size: 1.5rem;
}

.input--sigla {
    max-width: 8rem;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table .riga-serie__nome {
    padding-left: 2rem;
}

.riga-categoria td {
    background: color-mix(in srgb, var(--muted) 60%, transparent);
}

.uso {
    font-variant-numeric: tabular-nums;
}

/* Procedura guidata: passi numerati */
.procedura {
    display: grid;
    gap: 1.25rem;
}

.passo__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-fg);
    font-size: 0.8125rem;
}

/* Righe di una collezione di form (campi extra, sottocategorie) */
.collezione {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.riga-collezione {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .riga-collezione {
        grid-template-columns: 2fr 1fr 1fr auto;
    }

    .form--in-linea {
        grid-template-columns: 2fr 1fr 1fr auto;
        align-items: end;
    }
}

.anteprima {
    display: grid;
    gap: 0.375rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.anteprima code {
    font-size: 1.125rem;
    font-weight: 600;
}

.card__body--separato {
    border-top: 1px solid var(--border);
}

.zona-pericolo {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

/* Elenco di conseguenze in una pagina di conferma */
.elenco-conseguenze {
    margin: 0.75rem 0 1.25rem;
    padding-left: 1.25rem;
    color: var(--muted-fg);
}

/* Foglio delle credenziali (si stampa e si consegna) */
.credenziali__intestazione {
    margin-bottom: 1rem;
    color: var(--muted-fg);
    font-weight: 600;
}

.credenziali__dati {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.credenziali__dati dt {
    color: var(--muted-fg);
}

.credenziali__dati dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.credenziali__valore {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.credenziali__nota {
    margin-top: 1rem;
    color: var(--muted-fg);
}

.form__azioni.non-stampare {
    margin-top: 1rem;
}

/* Stampa: solo il contenuto, in nero su bianco. Mai il simbolo a schermo (design 06 §2, principio 4) */
@media print {
    .simbolo-schermo,
    .diagnostica,
    .sidebar,
    .sidebar-backdrop,
    .topbar,
    .skip-link,
    .breadcrumb,
    .page-header__description,
    .non-stampare {
        display: none !important;
    }

    /* Stessa specificità dei selettori dei temi scuri (0,2,0), altrimenti
       vincerebbero loro: testo chiaro su carta bianca. */
    :root:not([data-theme]),
    :root[data-theme] {
        color-scheme: light;
        --bg: #fff;
        --card: #fff;
        --fg: #000;
        --card-fg: #000;
        --muted-fg: #333;
        --border: #999;
    }

    @page {
        margin: 2cm;
    }

    .admin__main {
        margin-left: 0 !important;
    }
}

/* Pagine di errore */
.error-page {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 5rem 0;
    text-align: center;
}

.error-page__icon {
    color: var(--muted-fg);
}

.error-page__code {
    color: var(--muted-fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.error-page__title {
    font-size: 1.5rem;
}

.error-page__text {
    max-width: 32rem;
    color: var(--muted-fg);
}

.error-page .btn {
    margin-top: 0.75rem;
}

/* Vai al codice, nella barra in alto (design 03 §3.3) */
.vai-al-codice {
    position: relative;
    display: flex;
    align-items: center;
}

.vai-al-codice__icona {
    position: absolute;
    left: 0.6rem;
    width: 1rem;
    height: 1rem;
    color: var(--muted-fg);
    pointer-events: none;
}

.vai-al-codice__campo {
    appearance: none;
    width: 11rem;
    height: 2rem;
    padding-left: 2rem;
    font-size: 0.875rem;
}

@media (min-width: 1024px) {
    .vai-al-codice__campo {
        width: 13rem;
    }
}

/* Albero delle posizioni: rientro per livello (classi, non style="": la CSP
   non ammette stili inline). Oltre l'ottavo livello il rientro resta fermo. */
.table .albero__nome--1 { padding-left: 2rem; }
.table .albero__nome--2 { padding-left: 3.25rem; }
.table .albero__nome--3 { padding-left: 4.5rem; }
.table .albero__nome--4 { padding-left: 5.75rem; }
.table .albero__nome--5 { padding-left: 7rem; }
.table .albero__nome--6 { padding-left: 8.25rem; }
.table .albero__nome--7 { padding-left: 9.5rem; }
.table .albero__nome--8 { padding-left: 10.75rem; }

/* Casella di spunta con l'etichetta accanto */
.spunta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.spunta input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
}

/* La barra in alto si stringe secondo il suo spazio, non la finestra: con la
   barra laterale aperta (da 768 px) un tablet le lascia poco più di 500 px.
   Prima vanno via le etichette (nome dell'utente, "Sito"), poi il campo del
   codice diventa un'icona. Container query sulla barra stessa, non sul
   contenuto: il contenimento cambierebbe il riferimento dei position: fixed. */
.topbar {
    container: barra / inline-size;
}

@container barra (max-width: 899px) {
    .topbar__end > .btn span,
    .utente-menu__nome {
        display: none;
    }
}

@container barra (max-width: 519px) {
    /* Sul telefono il link al sito lascia posto ad Amministrazione (design 15 §2.1) */
    .vai-al-codice,
    .topbar__sito {
        display: none;
    }
}

@container barra (min-width: 520px) {
    .vai-al-codice__link {
        display: none;
    }
}

/* Filtri dell'elenco del materiale */
.filtri__campi {
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .filtri__campi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filtri__testo {
        grid-column: 1 / -1;
    }
}

.filtri__spunte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.paginazione {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Due campi affiancati se c'è posto, uno sotto l'altro se no: decide lo spazio
   del form, non la finestra (una colonna stretta accanto a un'altra, come i
   dati dell'evento a 1024 px, non regge due campi data con il calendario) */
.form__griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0 1rem;
}

.form__gruppo {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
}

.form__gruppo legend {
    padding: 0 0.25rem;
    font-weight: 600;
}

.input--corto {
    max-width: 10rem;
}

/* Le copie nella tabella di una bozza: la colonna stretta non deve nascondere il numero */
.input--copie {
    width: 5rem;
    min-width: 5rem;
}

/* Scelte a pulsanti di opzione (es. oggetto singolo / contenitore) */
.field input[type="radio"] {
    accent-color: var(--primary);
}

.field input[type="radio"] + label {
    margin: 0 1.25rem 0 0.375rem;
    font-weight: 400;
}

/* Gruppo di pulsanti di opzione con la sua legenda */
.field--gruppo {
    margin: 0;
    padding: 0;
    border: 0;
}

.field--gruppo legend {
    margin-bottom: 0.375rem;
    font-weight: 500;
}

/* Registro eventi: storia, contenuto, giacenze, anomalie (design 04 §7.1) */

/* Un movimento annullato: barrato, e con l'etichetta "Annullato" accanto (non solo lo stile) */
.storia__annullato .storia__movimento {
    color: var(--muted-fg);
    text-decoration: line-through;
}

/* Attività recente della dashboard: un movimento per riga, chi e quando sotto */
.attivita {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.attivita li {
    display: grid;
    gap: 0.125rem;
    overflow-wrap: anywhere;
}

.attivita__chi {
    font-size: 0.8125rem;
}

/* Contenuto di un contenitore, annidato */
.contenuto {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.25rem;
}

.contenuto .contenuto {
    margin-top: 0.375rem;
}

.table .numero {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Anomalie aperte per tipo: una riga di link con il conteggio */
.elenco-conteggi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elenco-conteggi a[aria-current] {
    font-weight: 600;
}

.anomalia__risolvi {
    gap: 0.5rem;
    min-width: 14rem;
}

.anomalia__risolvi .btn {
    justify-self: start;
}

/* Scansione dal PC (design 04 §8): bersaglio in grande, esito a colori con il testo */
.scansione__etichetta {
    color: var(--muted-fg);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.scansione__bersaglio-nome {
    margin: 0.25rem 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.scansione__esito {
    display: grid;
    gap: 0.375rem;
    min-height: 6.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.scansione__esito[data-livello="ok"] { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--card)); }
.scansione__esito[data-livello="avviso"] { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--card)); }
.scansione__esito[data-livello="errore"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--card)); }

.scansione__esito-testo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.scansione__esito-dettaglio {
    margin: 0;
    color: var(--muted-fg);
}

.scansione__esito .btn {
    justify-self: start;
}

.scansione__coda {
    min-height: 1.5rem;
    margin: 0.5rem 0 0;
}

.scansione__comandi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Il suono acceso: lo stato è in aria-pressed, qui si vede */
.scansione__suono[aria-pressed="true"] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.scansione__modalita {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 1.25rem;
}

.scansione__scelta {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    align-items: center;
}

.scansione__scelta input {
    accent-color: var(--primary);
}

.scansione__scelta label {
    font-weight: 500;
}

.scansione__scelta .field__aiuto {
    grid-column: 2;
    margin: 0;
}

.scansione__provenienze {
    display: grid;
    gap: 0.375rem;
}

.scansione__elenco,
.scansione__storia {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.25rem;
}

.scansione__voce time {
    color: var(--muted-fg);
    font-variant-numeric: tabular-nums;
}

/* Il colore dell'esito anche nel registro della pagina, accanto al testo */
.scansione__voce[data-livello="ok"]::marker { color: var(--success); }
.scansione__voce[data-livello="avviso"]::marker { color: var(--warning); }
.scansione__voce[data-livello="errore"]::marker { color: var(--danger); }

/* Stampa etichette: casella iniziale sui fogli già usati (design 06 §8) */
.caselle {
    display: grid;
    gap: 0.25rem;
    max-width: 18rem;
    margin-top: 0.5rem;
}

.caselle--c1 { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 6rem; }
.caselle--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 10rem; }
.caselle--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 13rem; }
.caselle--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.caselle--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.caselle--c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.caselle__casella {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.125rem 0.25rem;
    border: 1px solid var(--input-border);
    border-radius: calc(var(--radius) / 2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.caselle__casella input {
    accent-color: var(--primary);
    margin: 0;
}

.caselle__casella:has(input:checked) {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.caselle__casella:has(input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* Anteprima della bozza: bianca anche nel tema scuro, contenuta nella colonna */
.anteprima-stampa {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.anteprima-stampa__figura {
    margin: 0;
    display: grid;
    gap: 0.25rem;
    max-width: 100%;
}

.anteprima-stampa__pagina {
    display: block;
    max-width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Eventi, fasi e piano (design 08 §11) */
.fasi {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fase {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fase__intestazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fase__nome {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* La data prevista della fase (il giorno del carico, dello scarico…) */
.fase__data {
    color: var(--muted-fg);
    font-variant-numeric: tabular-nums;
}

.fase__gestione {
    margin-top: 0.5rem;
}

.fase__gestione summary {
    cursor: pointer;
    color: var(--link);
}

.form--in-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0;
}

.form--in-linea .field {
    margin: 0;
}

.azioni-in-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.azioni-in-linea form {
    margin: 0;
}

.piano__codici {
    font-family: var(--font-mono);
}

.fase__sessioni,
.sessione__elenco {
    display: grid;
    gap: 0.25rem;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

/* Cruscotto della sessione (design 08 §11.1) */
.sessione__avanzamento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 1rem 0 0;
}

.sessione__avanzamento progress {
    flex: 1 1 12rem;
    height: 0.75rem;
    accent-color: var(--success);
}

.sessione__gruppo {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.sessione__gruppo:first-child {
    margin-top: 0;
}

.scansione__sessione {
    display: grid;
    gap: 0.375rem;
    justify-items: start;
}

.scansione__sessione .select {
    width: 100%;
    max-width: 40rem;
}

.scansione__sessione p {
    margin: 0;
}

.report__elenco {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.25rem;
}

.sessione__fatti summary {
    cursor: pointer;
    list-style-position: inside;
}

/* Finestre (<dialog>): conferme e PDF appena generato (design 06b §3, §4) */
.finestra {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-fg);
    box-shadow: var(--shadow-popover);
    overflow: auto;
}

.finestra[open] {
    display: grid;
    gap: 0.75rem;
}

.finestra::backdrop {
    background: rgb(0 0 0 / 0.45);
}

.finestra--pdf {
    width: min(56rem, calc(100vw - 2rem));
}

.finestra__titolo {
    margin: 0;
    font-size: 1.125rem;
}

.finestra__testata p {
    margin: 0.25rem 0 0;
}

.finestra__pdf iframe {
    display: block;
    width: 100%;
    height: min(60dvh, 36rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
}

.finestra .form__azioni,
.finestra p,
.finestra ul {
    margin: 0;
}

.stampa__azioni {
    align-items: center;
    margin-top: 0;
}

/* Il simbolo a schermo delle schede, da leggere con il telefono */
.simbolo-schermo {
    margin-top: 0.5rem;
}

.simbolo-schermo summary {
    cursor: pointer;
    color: var(--link);
}

.simbolo-schermo__corpo {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    margin-top: 0.5rem;
}

.simbolo-schermo__svg {
    display: block;
    width: min(14rem, 70vw);
    height: auto;
}

/* Diagnostica della scansione: la griglia di simboli da leggere dallo schermo (design 11) */
.diagnostica {
    display: grid;
    /* 16rem: ci sta il simbolo più grande (10 pixel per modulo) senza rimpicciolirlo */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagnostica__casella {
    display: grid;
    gap: 0.375rem;
    justify-items: center;
    align-content: start;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    text-align: center;
}

.diagnostica__svg {
    display: block;
}

.diagnostica__numero {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* "Cosa aspettarsi" all'apertura e nel cruscotto di una sessione (design 13 §7):
   un form verticale, le regole una sotto l'altra a tutta larghezza */
.form--sessione {
    gap: 0.75rem;
    max-width: 40rem;
    margin: 0.75rem 0;
}

.form--sessione .field {
    margin: 0;
}

.regole {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.regole__titolo {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.regole__scelta {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    align-items: center;
}

.regole__scelta input {
    accent-color: var(--primary);
}

.regole__scelta label {
    font-weight: 500;
}

.regole__scelta .field__aiuto {
    grid-column: 2;
    margin: 0;
}

/* Dimenticati a casa nella scheda dell'evento (design 13 §6) */
.dimenticati {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.dimenticati .card__title {
    color: var(--danger);
}

/* Campo data in italiano con il calendario dal lunedì (App\Form\DataType, controller "data") */
.data {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
}

.data .input {
    width: calc(11ch + 1.5rem + 2px);
    min-width: 0;
}

.data__pannello {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 50;
    width: 17rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--popover);
    box-shadow: var(--shadow-popover);
}

.data__pannello--destra {
    right: 0;
    left: auto;
}

.data__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.data__mese {
    font-weight: 600;
    text-transform: capitalize;
}

.data__griglia {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    text-align: center;
}

.data__giorno-settimana {
    color: var(--muted-fg);
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.data__giorno {
    padding: 0.375rem 0;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--fg);
    cursor: pointer;
}

.data__giorno:hover,
.data__giorno:focus-visible {
    background: var(--accent);
}
/* Il fuoco con l'anello del design system: il solo sfondo non si vede in tema scuro */
.data__giorno:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.data__oggi {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--border);
}

.data__giorno[aria-current='date'] {
    background: var(--primary);
    color: var(--primary-fg);
}

/* Impostazioni dei simboli (design 15 §3): l'anteprima dell'etichetta nella sua misura vera, contenuta */
.simboli-supporti th[scope='row'] {
    font-weight: 500;
    min-width: 12rem;
}

.simboli-supporti .select {
    min-width: 25rem;
}

.simboli-supporti__anteprima .anteprima-stampa__pagina {
    display: block;
    width: auto;
    height: auto;
    max-width: 22rem;
    max-height: 7rem;
}

/* A telefono una riga per volta: supporto, scelta, anteprima uno sotto l'altro */
@media (max-width: 639px) {
    .simboli-supporti thead {
        display: none;
    }

    .simboli-supporti tr,
    .simboli-supporti th[scope='row'],
    .simboli-supporti td {
        display: block;
        min-width: 0;
    }

    .simboli-supporti .select {
        width: 100%;
        min-width: 0;
    }

    .simboli-supporti__anteprima .anteprima-stampa__pagina {
        max-width: 100%;
    }
}

/* "Hai trovato questo oggetto?" (design 16 §3): pagina pubblica stretta e leggibile al telefono */
.trovato {
    display: grid;
    gap: 1rem;
    max-width: 40rem;
    padding-block: 2rem 3rem;
}

/* Zona per trascinare un file (l'APK, design 20 §4): evidenziata quando un
   file passa sopra la pagina */
.trascina {
    justify-items: center;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: border-color 0.15s, background-color 0.15s;
}

.trascina > svg {
    width: 2rem;
    height: 2rem;
    color: var(--muted-fg);
}

.trascina .input {
    width: min(100%, 28rem);
}

.trascina--sopra {
    border-color: var(--primary);
    background-color: var(--accent);
}

/* "Scarica l'app" (design 20 §6): il QR accanto alle istruzioni, sotto sul telefono */
.app-download {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 40rem) {
    .app-download {
        grid-template-columns: 12rem 1fr;
    }
}

.app-download__qr .qr {
    width: 100%;
}

.trovato .hero__title {
    margin: 0;
}

.trovato__contatti p {
    margin: 0;
}

.trovato__contatti p + p {
    margin-top: 0.5rem;
}

/* Il campo esca: fuori dallo schermo, non "display: none" (alcuni programmi lo saltano) */
.trovato__esca {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Foto degli oggetti (design 18 §4): miniature in griglia, la grande nella finestra */
.foto__griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.foto__casella {
    position: relative;
}

.foto__miniatura img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.foto__badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
}

.finestra--foto {
    width: min(60rem, calc(100vw - 2rem));
}

.foto__grande {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 12rem);
    width: auto;
    height: auto;
    margin: 0 auto;
}