/* ============================================================
   AuGest — Design system (vedi claude/DESIGN.md)
   Tema chiaro caldo, oro come accento, Bootstrap 5 + override.
   ============================================================ */

:root {
    /* Sfondi */
    --clr-bg: #FAF7F0;
    --clr-surface: #FFFFFF;
    --clr-surface-alt: #F4EFE5;

    /* Bordi / divisori */
    --clr-divider: #E8E1D1;
    --clr-border: #D6CFBE;
    --clr-border-strong: #B5A98E;

    /* Testo */
    --clr-text: #1F1A14;
    --clr-text-muted: #5A5248;
    --clr-text-disabled: #9A9285;

    /* Brand */
    --clr-gold: #C9A24B;
    --clr-gold-dark: #9F7E32;
    --clr-bronze: #7A5C2E;

    /* Stati semantici */
    --clr-success: #3F7A4D;        --clr-success-bg: #E8F1E7;
    --clr-warning: #A87423;        --clr-warning-bg: #FBF1DA;
    --clr-error: #A04338;          --clr-error-bg: #F5DCD9;
    --clr-info: #3B5F8A;           --clr-info-bg: #E4ECF7;

    /* Modulo (default = trasversali = oro) */
    --clr-module: #C9A24B;
    --clr-module-surface: #F4EFE5;
    --clr-module-border: #E8E1D1;

    /* Bootstrap override (variabili globali) */
    --bs-primary: #C9A24B;
    --bs-primary-rgb: 201,162,75;
    --bs-body-bg: #FAF7F0;
    --bs-body-color: #1F1A14;
    --bs-border-color: #D6CFBE;
    --bs-border-radius: 0.375rem;
    --bs-link-color: #9F7E32;
    --bs-link-hover-color: #7A5C2E;
}

[data-module="compro-oro"]    { --clr-module: #3B5F8A; --clr-module-surface: #E4ECF7; --clr-module-border: #C6D4E7; }
[data-module="banco-metalli"] { --clr-module: #6B6F76; --clr-module-surface: #ECEDEF; --clr-module-border: #D2D4D8; }
[data-module="oreficeria"]    { --clr-module: #9C5B33; --clr-module-surface: #F2E5DC; --clr-module-border: #E0CBB9; }
[data-module="gioielleria"]   { --clr-module: #8E4A5C; --clr-module-surface: #F1E2E5; --clr-module-border: #E2C9CF; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.code, .font-monospace { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.numeric { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }

/* Material Symbols inline */
.material-symbols-outlined {
    font-size: 1.1em;
    vertical-align: middle;
    line-height: 1;
}

/* ============================================================
   Layout: header + sidebar + main
   ============================================================ */
.augest-app { min-height: 100vh; }

.augest-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 1px 2px rgba(31,26,20,0.04);
}
.augest-header__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: var(--clr-text);
    cursor: pointer;
}
.augest-header__menu:hover { background: var(--clr-surface-alt); }
.augest-header__brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.02em;
    text-decoration: none;
    margin-left: 0.25rem;
}
.augest-header__spacer { flex: 1; }
.augest-header__sede, .augest-header__user { display: inline-flex; }
.augest-header__userbtn {
    color: var(--clr-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
}
.augest-header__userbtn:hover { color: var(--clr-text); background: var(--clr-surface-alt); }

.augest-sidebar {
    position: fixed;
    top: 56px; bottom: 0; left: 0;
    width: 232px;
    z-index: 40;
    background: var(--clr-surface-alt);
    border-right: 1px solid var(--clr-divider);
    overflow-y: auto;
    transition: transform 0.2s ease;
}
.augest-sidebar__search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.65rem 0.75rem;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
}
.augest-sidebar__search .material-symbols-outlined {
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--clr-text-disabled);
    pointer-events: none;
}
.augest-sidebar__search-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 2.1rem;
    font-size: 0.875rem;
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
}
.augest-sidebar__search-input::placeholder { color: var(--clr-text-disabled); }
.augest-sidebar__search-input:focus {
    outline: none;
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25);
}
.augest-sidebar__empty {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}
.augest-sidebar__link.is-filtered-out { display: none; }
.augest-sidebar__nav { display: flex; flex-direction: column; padding: 0.5rem 0; }
.augest-sidebar__group { padding-top: 0.5rem; }
.augest-sidebar__group-label {
    display: block;
    padding: 1rem 1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-module);
}
.augest-sidebar__group--trasversali .augest-sidebar__group-label,
.augest-sidebar__group--backoffice .augest-sidebar__group-label { color: var(--clr-text-muted); }
/* I gruppi di modulo portano sempre il proprio colore, anche fuori dalle loro pagine. */
.augest-sidebar__group--compro-oro    { --clr-module: #3B5F8A; }
.augest-sidebar__group--banco-metalli { --clr-module: #6B6F76; }
.augest-sidebar__group--oreficeria    { --clr-module: #9C5B33; }
.augest-sidebar__group--gioielleria   { --clr-module: #8E4A5C; }
.augest-sidebar__group-label .material-symbols-outlined { font-size: 1rem; vertical-align: -2px; }
.augest-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--clr-text);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.augest-sidebar__link:hover { background: var(--clr-divider); color: var(--clr-text); }
.augest-sidebar__link.is-active {
    background: var(--clr-surface);
    font-weight: 600;
    color: var(--clr-module);
    border-left-color: var(--clr-module);
}
.augest-sidebar__link .material-symbols-outlined { font-size: 1.15rem; }

.augest-main {
    margin-top: 56px;
    margin-left: 232px;
    min-height: calc(100vh - 56px);
    background: var(--clr-bg);
}
.augest-main__inner {
    max-width: 1280px;
    padding: 1.5rem 1.5rem 2rem;
}

@media (width < 992px) {
    .augest-sidebar { transform: translateX(-100%); }
    .augest-sidebar.is-open { transform: translateX(0); box-shadow: 0 8px 24px rgba(31,26,20,0.12); }
    .augest-main { margin-left: 0; }
    .augest-main__inner { padding: 1rem 1rem 1.5rem; }
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-divider);
}
.page-header__icon { font-size: 2rem !important; color: var(--clr-module); line-height: 1; flex: 0 0 auto; }
.page-header__body { flex: 1 1 auto; }
.page-header__crumb { font-size: 0.8rem; color: var(--clr-text-muted); margin: 0 0 0.15rem; }
.page-header__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
}
.page-header__title::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    margin-top: 0.5rem;
    background: var(--clr-module);
}
.page-header__actions { flex: 0 0 auto; align-self: center; }

/* ============================================================
   Card
   ============================================================ */
.augest-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    overflow: hidden;
}
.augest-card--evidenziata { border-top: 3px solid var(--clr-module); }
.augest-card__header {
    padding: 0.75rem 1rem;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}
.augest-card__body { padding: 1rem; }

/* ============================================================
   Tabelle
   ============================================================ */
.augest-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.augest-table thead th {
    background: var(--clr-surface-alt);
    border-bottom: 2px solid var(--clr-border-strong);
    padding: 0.6rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
}
.augest-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--clr-divider);
    font-size: 0.875rem;
    color: var(--clr-text);
    vertical-align: middle;
}
.augest-table tbody tr:hover td { background: var(--clr-bg); }
.augest-table tbody td.code, .augest-table thead th.code { font-family: 'JetBrains Mono', monospace; color: var(--clr-text-muted); }
.augest-table tbody td.numeric, .augest-table thead th.numeric { font-family: 'JetBrains Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Badge stati
   ============================================================ */
.augest-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.augest-badge--success { background: var(--clr-success-bg); color: var(--clr-success); }
.augest-badge--avviso  { background: var(--clr-warning-bg); color: var(--clr-warning); }
.augest-badge--errore  { background: var(--clr-error-bg);   color: var(--clr-error); }
.augest-badge--info    { background: var(--clr-info-bg);    color: var(--clr-info); }
.augest-badge--neutro  { background: var(--clr-surface-alt);color: var(--clr-text-muted); }
.augest-badge--premium { background: rgba(201,162,75,0.15); color: var(--clr-bronze); }

/* Badge contestuale di modulo (DESIGN §3.6): sfondo tinta, bordo tinta, testo
   nel colore del modulo. Usato per la sezione degli articoli del magazzino unico. */
.augest-badge--mod-compro-oro    { background: #E4ECF7; border: 1px solid #C6D4E7; color: #3B5F8A; }
.augest-badge--mod-banco-metalli { background: #ECEDEF; border: 1px solid #D2D4D8; color: #6B6F76; }
.augest-badge--mod-oreficeria    { background: #F2E5DC; border: 1px solid #E0CBB9; color: #9C5B33; }
.augest-badge--mod-gioielleria   { background: #F1E2E5; border: 1px solid #E2C9CF; color: #8E4A5C; }

/* ============================================================
   Alert
   ============================================================ */
.augest-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid currentColor;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.augest-alert--success { background: var(--clr-success-bg); color: var(--clr-success); }
.augest-alert--avviso  { background: var(--clr-warning-bg); color: var(--clr-warning); }
.augest-alert--errore  { background: var(--clr-error-bg);   color: var(--clr-error); }
.augest-alert--info    { background: var(--clr-info-bg);    color: var(--clr-info); }

/* ============================================================
   Pulsanti
   ============================================================ */
.btn-augest-primary {
    background: var(--clr-gold);
    color: var(--clr-text);
    border: 1px solid var(--clr-gold);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-augest-primary:hover, .btn-augest-primary:focus {
    background: var(--clr-gold-dark);
    color: #FFFFFF;
    border-color: var(--clr-gold-dark);
}
.btn-augest-primary:focus { box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25); }

.btn-outline-augest {
    background: transparent;
    color: var(--clr-text);
    border: 1px solid var(--clr-border-strong);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-outline-augest:hover { background: var(--clr-surface-alt); color: var(--clr-text); }

.btn-outline-pericolo {
    background: transparent;
    color: var(--clr-error);
    border: 1px solid var(--clr-error);
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-outline-pericolo:hover { background: var(--clr-error-bg); color: var(--clr-error); }

/* ============================================================
   Override Bootstrap (essenziali)
   ============================================================ */
.btn-primary {
    background-color: var(--clr-gold);
    border-color: var(--clr-gold);
    color: var(--clr-text);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--clr-gold-dark);
    border-color: var(--clr-gold-dark);
    color: #FFFFFF;
}

.form-control, .form-select {
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    color: var(--clr-text);
    font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25);
}
/* [data-valuta]: importi in euro. Sono campi di testo (il formato «1.234,50» non
   sta in un input numerico, vedi assets/valuta-input.js) ma restano campi numerici
   a tutti gli effetti, quindi stessa resa monospaziata allineata a destra. */
.form-control[type="number"], .form-control[data-valuta], .form-control.numeric {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.form-label { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--clr-text); }
.form-text { color: var(--clr-text-muted); }
.invalid-feedback { color: var(--clr-error); }
.is-invalid { border-color: var(--clr-error) !important; box-shadow: 0 0 0 0.2rem rgba(160,67,56,0.25) !important; }

/* Stato «in correzione» (assets/validazione-corretta.js): il campo respinto dal
   server è stato modificato dall'operatore ma non ancora rivalidato. Non è più un
   errore accertato — vira dal rosso all'ambra, campo e messaggio insieme, così si
   distingue a colpo d'occhio ciò che resta da sistemare da ciò che è già stato
   toccato. Tornando al valore respinto si torna al rosso. */
.is-invalid.is-corretto {
    border-color: var(--clr-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(168,116,35,0.25) !important;
}
/* L'icona di validazione di Bootstrap resta agganciata a .is-invalid: va ridipinta
   con lo stesso ambra, altrimenti il campo giallo mostrerebbe un'esclamazione rossa.
   Sul <select> l'immagine va ricomposta con la freccia (var di Bootstrap), che
   altrimenti sparirebbe insieme al background-image sostituito.
   `--bs-form-select-bg-img` è definita da bootstrap.min.css, servito da CDN in
   base.html.twig: l'IDE la segnala come irrisolta perché non è in un file del
   progetto, ma a runtime c'è (il select mostra freccia + icona). */
.form-control.is-invalid.is-corretto {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A87423'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A87423' stroke='none'/%3e%3c/svg%3e");
}
.form-select.is-invalid.is-corretto {
    background-image: var(--bs-form-select-bg-img), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A87423'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A87423' stroke='none'/%3e%3c/svg%3e");
}
.form-check-input.is-invalid.is-corretto ~ .form-check-label,
.invalid-feedback.is-corretto { color: var(--clr-warning); }
/* La spunta invalida resta riempita del rosso di Bootstrap anche col bordo virato:
   `.form-check-input.is-invalid:checked` è più specifico dell'override di brand. */
.form-check-input.is-invalid.is-corretto:checked { background-color: var(--clr-warning); }

/* Campo di una riga a griglia (registro PS: lotti, pagamenti). Sotto il widget c'è
   sempre una fascia di altezza fissa per il messaggio di validazione, vuota quando il
   campo è valido: il campo occupa lo stesso spazio prima e dopo un invio rifiutato,
   quindi nessun errore sposta o disallinea i campi vicini. Su una riga da sette
   colonne il messaggio, crescendo dentro la propria colonna, spingeva in alto il
   proprio campo rispetto agli altri.
   La fascia tiene due righe di messaggio: le rare eccedenze sbordano (overflow
   visibile) senza spostare nulla, che è il punto dell'intera scelta. */
.augest-campo__errori {
    height: 2rem;
    padding-top: 0.15rem;
    overflow: visible;
}
.augest-campo__errori .invalid-feedback {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

.form-check-input:checked { background-color: var(--clr-gold); border-color: var(--clr-gold); }
.form-check-input:focus { border-color: var(--clr-gold); box-shadow: 0 0 0 0.2rem rgba(201,162,75,0.25); }

.dropdown-menu {
    border: 1px solid var(--clr-border);
    box-shadow: 0 8px 24px rgba(31,26,20,0.12);
    border-radius: 0.375rem;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: rgba(201,162,75,0.18);
    color: var(--clr-text);
}
.dropdown-header { color: var(--clr-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.modal-content { border: 1px solid var(--clr-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(31,26,20,0.12); }
.modal-header { background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-divider); }
/* Backdrop con tinta di brand: evita lo sfondo nero pieno che nascondeva la pagina.
   .show con opacity:1 impedisce la doppia trasparenza che su alcuni browser annerisce. */
.modal-backdrop { background-color: rgba(31, 26, 20, 0.5); }
.modal-backdrop.show { opacity: 1; }
/* Backdrop completamente trasparente quando il modal lo richiede (es. selezione
   avanzata giacenze): la classe sul body è attiva solo mentre quel modal è aperto. */
body.augest-modal-backdrop-trasparente .modal-backdrop { background-color: transparent; }

.input-group-text {
    background: var(--clr-surface-alt);
    color: var(--clr-text-muted);
    border: 1px solid var(--clr-border);
}

/* Galleria foto lotto nella scheda operazione: anteprime con eliminazione. */
.augest-foto-cella { position: relative; width: 56px; height: 56px; }
.augest-foto-cella__thumb {
    width: 56px; height: 56px; object-fit: cover; display: block;
    border-radius: 0.375rem; border: 1px solid var(--clr-border);
}
.augest-foto-cella__del {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--clr-error); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; box-shadow: 0 1px 3px rgba(31, 26, 20, 0.3);
}
.augest-foto-cella__del .material-symbols-outlined { font-size: 14px; }

/* Help dei form come icona (i) accanto alla label, con tooltip Bootstrap. */
.augest-label-row { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.augest-label-row .form-label { margin-bottom: 0; }
.augest-help {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--clr-text-muted);
    cursor: help;
    border-radius: 50%;
    transition: color 0.12s ease;
}
.augest-help:hover { color: var(--clr-module); }

/* ============================================================
   Login
   ============================================================ */
.augest-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        linear-gradient(135deg, rgba(201,162,75,0.05), rgba(31,26,20,0.04)),
        var(--clr-bg);
}
.augest-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-gold);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(31,26,20,0.08);
}
.augest-login__brand { text-align: center; margin-bottom: 2rem; }
.augest-login__mark {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.02em;
    line-height: 1;
}
.augest-login__claim {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}

/* ============================================================
   Permessi card (form ruoli)
   ============================================================ */
.augest-permessi-card {
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-module);
    border-radius: 0.5rem;
    background: var(--clr-surface);
    height: 100%;
    overflow: hidden;
}
.augest-permessi-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--clr-module-surface);
    border-bottom: 1px solid var(--clr-module-border);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--clr-module);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.augest-permessi-card__body { padding: 0.75rem 0.85rem; }
.augest-permessi-card__body .form-check { margin-bottom: 0.5rem; }
.augest-permessi-card__body .form-check-label { font-size: 0.85rem; }

/* ============================================================
   Profilo: definition list
   ============================================================ */
.augest-defs { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
.augest-defs dt { font-size: 0.75rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.augest-defs dd { margin: 0; font-size: 0.9rem; }

.augest-list { list-style: none; padding: 0; margin: 0; }
.augest-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--clr-divider); }
.augest-list li:last-child { border-bottom: 0; }

/* ============================================================
   Form generale
   ============================================================ */
.augest-form .form-check-label { color: var(--clr-text); }
.augest-collection__item {
    background: var(--clr-bg);
    border: 1px solid var(--clr-divider);
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.augest-search { max-width: 520px; }

/* ============================================================
   Hero pubblico (homepage)
   ============================================================ */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: #1F1A14;
    background-image: url('https://picsum.photos/seed/augest/1920/1080');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 26, 20, 0.35) 0%, rgba(31, 26, 20, 0.65) 100%);
}
.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
}
.hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.75rem, 8vw, 6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero__title::after {
    content: '';
    display: block;
    width: clamp(56px, 8vw, 96px);
    height: 2px;
    margin: 1.25rem auto 0;
    background: var(--clr-gold);
}
.hero__claim {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: rgba(255,255,255,0.85);
    margin: 0;
    letter-spacing: 0.02em;
}
.hero__actions { margin-top: 1.5rem; }

/* ============================================================
   Backoffice: card di modulo (landing /backoffice)
   ============================================================ */
.modulo-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-module);
    border-radius: 0.5rem;
    color: var(--clr-text);
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modulo-card:hover {
    text-decoration: none;
    color: var(--clr-text);
    border-color: var(--clr-module-border);
    box-shadow: 0 1px 3px rgba(31,26,20,0.06), 0 2px 8px rgba(31,26,20,0.04);
}
.modulo-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    background: var(--clr-module-surface);
    border: 1px solid var(--clr-module-border);
    color: var(--clr-module);
}
.modulo-card__icon .material-symbols-outlined { font-size: 1.75rem; }
.modulo-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
    letter-spacing: 0.01em;
}
.modulo-card__desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.45;
}
.modulo-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-module);
    margin-top: 0.25rem;
}
.modulo-card__cta .material-symbols-outlined { font-size: 1.1rem; }
.modulo-card--disabled {
    cursor: not-allowed;
    background: var(--clr-surface-alt);
    opacity: 0.75;
}
.modulo-card--disabled:hover {
    box-shadow: none;
    border-color: var(--clr-border);
}
.modulo-card--disabled .modulo-card__title,
.modulo-card--disabled .modulo-card__desc { color: var(--clr-text-muted); }
.modulo-card--disabled .modulo-card__cta { color: var(--clr-text-muted); }

/* ============================================================
   Tessera sanitaria — pannello di scansione codice fiscale
   ============================================================ */
.ts-scan__lead {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    line-height: 1.45;
}
.ts-scan__lead .material-symbols-outlined {
    color: var(--clr-info);
    flex: 0 0 auto;
    font-size: 1.2rem;
}
.ts-scan__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.ts-scan__gun-group {
    flex: 1 1 320px;
    max-width: 460px;
}
.ts-scan__gun-group .input-group-text {
    background: var(--clr-surface-alt);
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}
.ts-scan__gun-group input {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ts-scan__camera {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ts-scan__status {
    margin: 0.75rem 0 0;
    min-height: 1.2em;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}
.ts-scan__status--ok      { color: var(--clr-success); font-weight: 500; }
.ts-scan__status--avviso  { color: var(--clr-warning); font-weight: 500; }
.ts-scan__status--info    { color: var(--clr-info); }

/* ============================================================
   Overlay fotocamera (plumbing riusabile: camera-scanner.js)
   ============================================================ */
body.is-scanning { overflow: hidden; }
.camera-scan {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.camera-scan__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Anteprima speculare (webcam rivolta all'operatore / camera frontale): solo
   la vista è riflessa, il fotogramma catturato resta nell'orientamento reale. */
.camera-scan__video--specchio {
    transform: scaleX(-1);
}
/* Riquadro di inquadratura: barcode orizzontale della tessera sanitaria. */
.camera-scan__frame {
    position: relative;
    z-index: 1;
    width: min(82vw, 460px);
    height: min(30vw, 150px);
    border: 2px solid var(--clr-gold);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.camera-scan__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    color: #FFFFFF;
}
.camera-scan__texts {
    flex: 1 1 auto;
    min-width: 0;
}
/* Pulsante di scatto (opzionale, opts.scatto): congela il fotogramma e forza
   una lettura insistita — utile per la MRZ quando la scansione continua non
   aggancia il codice. */
.camera-scan__shutter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: rgba(201, 162, 75, 0.85);
    color: #1F1A14;
    cursor: pointer;
    transition: background 0.15s ease;
}
.camera-scan__shutter .material-symbols-outlined { font-size: 1.6rem; }
.camera-scan__shutter:hover { background: var(--clr-gold); }
.camera-scan__shutter:disabled { opacity: 0.55; cursor: default; }
.camera-scan__title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
}
.camera-scan__hint {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
}
.camera-scan__status {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--clr-gold);
}
/* Selettore della fotocamera: compare solo se la postazione espone più di una
   sorgente video (webcam USB + camere virtuali tipo Meta Quest Link o OBS, che
   il browser può scegliere come predefinita pur non essendo avviabili).
   La scelta viene ricordata per la postazione — vedi camera-scanner.js. */
.camera-scan__picker {
    margin-top: 0.5rem;
    max-width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 0.82rem;
    cursor: pointer;
}
.camera-scan__picker option { color: #1F1A14; background: #FFFFFF; }

.camera-scan__close {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    cursor: pointer;
}
.camera-scan__close:hover { background: rgba(0, 0, 0, 0.7); }

/* Toggle del flash (torch): mostrato solo se la camera lo supporta. */
.camera-scan__torch {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    cursor: pointer;
}
.camera-scan__torch:hover { background: rgba(0, 0, 0, 0.7); }
.camera-scan__torch--on {
    background: var(--clr-gold);
    color: #1F1A14;
}
.camera-scan__torch--on:hover { background: var(--clr-gold); }

/* Variante "card": riquadro a proporzioni carta ID-1 — riusa il plumbing di
   camera-scanner.js. GRANDE anche su desktop: la leggibilità di barcode e MRZ
   dipende dai pixel del sensore che la carta occupa (misurato: col vecchio cap
   a 420px la MRZ stava a ~11 px/carattere, sotto la soglia OCR di ~20). Il
   termine in vh evita che su schermi bassi il riquadro sfori in altezza. */
.camera-scan__frame--card {
    width: min(88vw, calc(78vh * 1.585), 980px);
    height: auto;
    aspect-ratio: 85.6 / 54;
}

/* ============================================================
   Slot foto documento (passo 1 del nuovo cliente): riquadro con
   etichetta, anteprima e azioni scatta/carica/rimuovi.
   ============================================================ */
.foto-slot {
    height: 100%;
    padding: 0.75rem;
    border: 1px dashed var(--clr-border, #B5A98E);
    border-radius: 0.5rem;
    background: #FDFCF9;
}
.foto-slot__label {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A5248;
}
.foto-slot__anteprima {
    display: block;
    max-width: 100%;
    max-height: 220px;
    margin-bottom: 0.5rem;
    border: 1px solid #D6CFBE;
    border-radius: 0.375rem;
}

/* ============================================================
   Variante inline del pannello di scansione documento, usata nel
   form del registro (dove non è una card a sé).
   ============================================================ */
.ts-scan--inline {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-divider);
}