/* ============================================================
   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,
.augest-sidebar__group.is-filtered-out { display: none; }
.augest-sidebar__nav { display: flex; flex-direction: column; padding: 0.5rem 0; }
.augest-sidebar__group { padding-top: 0.5rem; }
/* L'intestazione è il comando che apre e chiude la sezione: <button> azzerato
   fino a restare identico all'etichetta di prima, più la freccia a destra. */
.augest-sidebar__group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1rem 0.5rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    color: var(--clr-module);
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-sidebar__group-label:hover .augest-sidebar__group-arrow { opacity: 1; }
.augest-sidebar__group-label:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: -2px;
    border-radius: 0.375rem;
}
.augest-sidebar__group-name { flex: 1 1 auto; }
.augest-sidebar__group-arrow {
    flex: 0 0 auto;
    opacity: 0.6;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-sidebar__group.is-collapsed .augest-sidebar__group-arrow { transform: rotate(0deg); }
.augest-sidebar__group.is-collapsed .augest-sidebar__group-items { display: none; }
/* Con una ricerca in corso i gruppi chiusi mostrano comunque le voci che
   corrispondono, altrimenti la ricerca smetterebbe di trovarle. */
.augest-sidebar.is-searching .augest-sidebar__group.is-collapsed .augest-sidebar__group-items { display: block; }
.augest-sidebar__group--trasversali .augest-sidebar__group-label,
.augest-sidebar__group--backoffice .augest-sidebar__group-label,
.augest-sidebar__group--consulente .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; }

/* Card interamente cliccabile: la freccia in testata segnala il collegamento,
   altrimenti invisibile — la card non si distingue in nulla da una statica. */
.augest-card--link .augest-card__header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.augest-card__link-icon {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--clr-module);
    transition: transform 0.15s ease;
}
a:hover > .augest-card--link {
    border-color: var(--clr-module);
}
a:hover > .augest-card--link .augest-card__link-icon { transform: translateX(3px); }

/* ============================================================
   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); }

/* Tabella lunga chiusa in un'altezza fissa: scorre al suo interno invece di
   allungare la pagina all'infinito. Si applica al contenitore della tabella
   (di norma il .table-responsive) e il numero di righe da mostrare si passa
   con --righe. È un'altezza, non un conteggio: dove le righe portano una
   seconda linea di testo se ne vedono un po' meno, e va bene così.
   L'intestazione resta ancorata in alto — ha già un fondo opaco — altrimenti
   scorrendo si perde il nome delle colonne. */
.augest-table-scroll {
    --righe: 10;
    --altezza-riga: 2.35rem;   /* riga a una sola linea di testo */
    --altezza-intestazione: 2.5rem;
    max-height: calc(var(--righe) * var(--altezza-riga) + var(--altezza-intestazione));
    overflow-y: auto;
}
.augest-table-scroll .augest-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.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; }

/* Coppia riga + sotto-riga: serve quando un valore scompone quello della riga sopra e
   deve stare incolonnato sotto di esso, cosa che dentro una cella non si ottiene (es.
   «di cui da Compro Oro» nella composizione dell'utile in dashboard). Le due righe si
   devono leggere come un blocco unico, quindi il filo divisorio corre solo sotto la
   seconda e lo spazio fra loro si stringe; l'hover le illumina insieme, altrimenti una
   coppia mezza evidenziata sembra un errore di rendering. */
.augest-table tbody tr.riga-con-sottovoce td { border-bottom: 0; padding-bottom: 0.15rem; }
.augest-table tbody tr.riga-sottovoce td { padding-top: 0; font-size: 0.8rem; color: var(--clr-text-muted); }
.augest-table tbody tr.riga-con-sottovoce:hover td,
.augest-table tbody tr.riga-con-sottovoce:hover + tr.riga-sottovoce td,
.augest-table tbody tr.riga-sottovoce:hover td,
.augest-table tbody tr.riga-con-sottovoce:has(+ tr.riga-sottovoce:hover) td { background: var(--clr-bg); }

/* Riga di chiusura che riassume le precedenti invece di sommarsi a loro (il metadato
   Artigianato in dashboard): la stacca un filo più marcato. */
.augest-table tbody tr.riga-metadato td { border-top: 2px solid var(--clr-border); }

/* ============================================================
   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); }

/* Collegamento dentro un badge: prende il colore del badge invece di quello dei
   link, che su questi sfondi tinta perderebbe contrasto. La sottolineatura resta,
   ed è l'unica cosa che lo distingue dal resto del testo. */
.augest-badge a { color: inherit; text-decoration: underline; }
.augest-badge a:hover { color: inherit; text-decoration: none; }

/* 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; }

/* ============================================================
   Interruttore (toggle)
   ============================================================
   Interruttore acceso/spento che è anche il comando: un <button type="submit">
   dentro il proprio form, quindi funziona senza JavaScript e senza un secondo
   bottone di conferma accanto. Lo stato è portato da aria-checked, che è anche
   ciò che il CSS legge — niente classi di stato da tenere allineate a mano.
   Palette: oro pieno da acceso, sabbia da spento (DESIGN §2). */
.augest-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    line-height: 1.4;
}
.augest-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1.375rem;
    border: 1px solid var(--clr-border-strong);
    border-radius: 999px;
    background: var(--clr-surface-alt);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.augest-toggle__track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    transition: transform 0.15s ease;
}
.augest-toggle[aria-checked="true"] .augest-toggle__track {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
}
.augest-toggle[aria-checked="true"] .augest-toggle__track::after {
    transform: translateX(1.125rem);
    border-color: var(--clr-gold-dark);
}
.augest-toggle[aria-checked="true"] { color: var(--clr-text); }
.augest-toggle:hover .augest-toggle__track { border-color: var(--clr-gold-dark); }
.augest-toggle:focus-visible { outline: none; }
.augest-toggle:focus-visible .augest-toggle__track {
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 75, 0.25);
}

/* ============================================================
   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); }
/* Avviso che porta a una card della stessa pagina (vendita in perdita in dashboard):
   si capisce che è cliccabile, e la card raggiunta si accende per un attimo
   (assets/scorri-a-card.js). */
.augest-alert--link { cursor: pointer; }
.augest-alert--link:hover { filter: brightness(0.97); }
.augest-ancora { scroll-margin-top: 1rem; }
.augest-ancora--evidenziata .augest-card { animation: augest-ancora-evidenzia 2.2s ease-out; }
@keyframes augest-ancora-evidenzia {
    0%, 45% { box-shadow: 0 0 0 3px var(--clr-warning); }
    100%    { box-shadow: 0 0 0 0 transparent; }
}

/* Codice di attivazione del dispositivo di cassa: dodici caratteri da digitare
   sull'AT15 leggendoli dallo schermo, quindi grandi, in mono, spaziati (DESIGN §4:
   i codici sono in JetBrains Mono). Compare una volta sola, nel flash. */
.augest-codice-attivazione {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--clr-gold);
    border-radius: 0.375rem;
    background: var(--clr-surface);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--clr-text);
    user-select: all;
}

/* ============================================================
   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); }

/* Conti del pezzo nel form articolo (assets/margine-netto.js): tre righe di
   testo di supporto, numeri tabulari; il margine è verde, sotto costo terracotta. */
.margine-conti { font-size: 0.875rem; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.margine-conti__riga { display: block; }
.margine-conti__riga:empty { display: none; }
.margine-conti__riga--ok { color: var(--clr-success); font-weight: 500; }
.margine-conti__riga--sotto-costo { color: var(--clr-error); font-weight: 500; }

/* Ricerca del cliente privato dalla scheda articolo (assets/cerca-cliente.js): l'elenco
   dei risultati si apre sotto la casella, sopra il resto del form, come un dropdown. */
.augest-cerca-cliente__risultati { top: 100%; left: 0; z-index: 20; max-height: 16rem; overflow-y: auto; border: 1px solid var(--clr-border); border-radius: 0.375rem; box-shadow: 0 8px 24px rgba(31,26,20,0.12); background: var(--clr-surface); }

/* Bottone PDF del documento fiscale (assets/documento-pdf.js): il recupero fallito è in terracotta. */
.documento-pdf { display: inline-block; }
.documento-pdf__fallito { color: var(--clr-error); font-weight: 500; }
.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; }

/* Miniatura ingrandibile: serve a ritrovare l'oggetto con un colpo d'occhio dove non
   c'è spazio per una foto leggibile — le tabelle di riepilogo della registrazione PS e i
   pannelli di gruppo dello spacchettamento. Un tocco la ingrandisce, un altro la rimette
   com'era; il comportamento sta in `compro_oro/_js_foto_zoom.html.twig`.
   Il lato si cambia con `--mini-foto-lato` sull'antenato: la miniatura di una riga di
   tabella e quella di un pannello non possono avere la stessa taglia. */
.augest-mini-foto__btn {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}
.augest-mini-foto__btn[aria-pressed="true"] { cursor: zoom-out; }
.augest-mini-foto__btn:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; }
.augest-mini-foto {
    width: var(--mini-foto-lato, 1.75rem);
    height: var(--mini-foto-lato, 1.75rem);
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-border);
    vertical-align: middle;
    transition: transform 0.15s ease;
}
/* Lo zoom è una `transform`: non occupa spazio, quindi la riga non si allarga e le
   colonne restano allineate. L'origine a sinistra tiene la foto dov'era invece di
   farla espandere anche verso la colonna precedente. */
.augest-mini-foto__btn[aria-pressed="true"] .augest-mini-foto {
    transform: scale(3);
    transform-origin: left center;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(31, 26, 20, 0.25);
}
/* I contenitori che ritagliano ciò che esce dai loro bordi — la tabella che scorre in
   orizzontale, la card coi suoi angoli arrotondati — mostrerebbero solo la porzione di
   foto che ci sta dentro: il ritaglio si toglie finché una foto è ingrandita, e torna
   appena si richiude. */
.table-responsive.has-foto-zoom,
.augest-card.has-foto-zoom { overflow: visible; }


/* 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; }
/* Checkbox/radio singola con help: l'icona (i) subito dopo la label, sulla stessa riga. */
.augest-check-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35rem; }
.augest-check-row > .form-check { margin-bottom: 0; }
.augest-check-row > .invalid-feedback { flex-basis: 100%; }
.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;
    /* Lo spazio a sinistra lo dà il bottone, così l'area cliccabile arriva al bordo. */
    padding: 0 0.85rem 0 0;
    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;
}
/* L'intestazione apre e chiude la card: <button> azzerato fino a restare identico
   al titolo di prima. Occupa tutta la striscia tranne l'interruttore del modulo. */
.augest-permessi-card__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem 0.6rem 0.85rem;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-permessi-card__toggle:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: -2px;
}
.augest-permessi-card__titolo { flex: 1 1 auto; }
/* A card chiusa è l'unica cosa che dice quanto è concesso nel modulo. */
.augest-permessi-card__conteggio {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--clr-module);
    background: var(--clr-surface);
    border: 1px solid var(--clr-module-border);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
.augest-permessi-card__conteggio.is-vuoto {
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}
.augest-permessi-card__arrow {
    flex: 0 0 auto;
    opacity: 0.6;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-permessi-card__toggle:hover .augest-permessi-card__arrow { opacity: 1; }
.augest-permessi-card.is-collapsed .augest-permessi-card__arrow { transform: rotate(0deg); }
.augest-permessi-card.is-collapsed .augest-permessi-card__body { display: none; }
/* `height: 100%` allinea le card aperte sulla stessa riga; a card chiusa va tolto,
   altrimenti si allungherebbe a vuoto fino all'altezza della card aperta accanto. */
.augest-permessi-card.is-collapsed { height: auto; }
/* A card chiusa il bordo inferiore dell'intestazione è il bordo della card. */
.augest-permessi-card.is-collapsed .augest-permessi-card__header { border-bottom: 0; }
.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; }

/* Un riquadro per azione (lettura, creazione, modifica, eliminazione, altre
   operazioni): il filo di separazione va solo fra un gruppo e il successivo. */
.augest-permessi-gruppo + .augest-permessi-gruppo {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-divider);
}
.augest-permessi-gruppo__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Stessa divisione di ruoli della card: l'etichetta apre e chiude, l'interruttore
   «tutte» le sta accanto e resta fuori dal bottone. */
.augest-permessi-gruppo__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.augest-permessi-gruppo__toggle:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: 1px;
    border-radius: 0.25rem;
}
.augest-permessi-gruppo__label {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}
.augest-permessi-gruppo__conteggio {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--clr-module);
}
.augest-permessi-gruppo__conteggio.is-vuoto { color: var(--clr-text-disabled); }
.augest-permessi-gruppo__arrow {
    flex: 0 0 auto;
    font-size: 1.1rem;
    opacity: 0.55;
    transform: rotate(180deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.augest-permessi-gruppo__toggle:hover .augest-permessi-gruppo__arrow { opacity: 1; }
.augest-permessi-gruppo.is-collapsed .augest-permessi-gruppo__arrow { transform: rotate(0deg); }
.augest-permessi-gruppo.is-collapsed .augest-permessi-gruppo__items { display: none; }
.augest-permessi-gruppo__items { padding-top: 0.5rem; }
/* Interruttore di gruppo e di modulo: si distingue dalle caselle dei permessi
   perché porta il colore del modulo anche da spento. */
.augest-permessi-toggle {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    border-color: var(--clr-module-border);
}
.augest-permessi-toggle:indeterminate {
    background-color: var(--clr-module);
    border-color: var(--clr-module);
}

/* ============================================================
   Profilo: definition list
   ============================================================ */
.augest-defs { display: grid; grid-template-columns: max-content minmax(0, 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; overflow-wrap: anywhere; }

.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;
}
/* Istruzioni del documento scelto: cosa fotografare e in che ordine. Le
   scrive assets/cliente-foto-documenti.js, una per tipo di documento, e
   compaiono solo dopo la scelta — prima non ci sarebbe niente da dire. */
.ts-scan__guida {
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--clr-info);
    background: #FDFCF9;
    border-radius: 0 0.375rem 0.375rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--clr-text-muted);
}
.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; }

/* Via d'uscita opzionale (opts.azioneSecondaria): resta a disposizione mentre la
   camera è aperta, per quando la lettura non aggancia — es. «Digita il codice». */
.camera-scan__alt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    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__alt:hover { background: rgba(0, 0, 0, 0.75); }
.camera-scan__alt .material-symbols-outlined { font-size: 1.05rem; }

.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;
}
/* Esito del riconoscimento di QUESTO documento. Ogni foto parte per conto suo
   e torna quando torna: con una sola riga per tutto il pannello l'operatore non
   sapeva a quale documento si riferisse ciò che leggeva, né quali letture
   fossero ancora in corso. Lo spinner è `.spinner-border` di Bootstrap — la keyframe
   `spin` è fra quelle ammesse dal design system — e prende il colore dal testo
   accanto, quindi segue da sé lo stato. */
.foto-slot__stato {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    /* Riservato anche da vuoto: senza, le card si disallineano appena una
       riceve il suo esito. */
    min-height: 1.2em;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--clr-text-muted);
}
.foto-slot__stato .spinner-border {
    flex: none;
    width: 0.85em;
    height: 0.85em;
    border-width: 0.15em;
}
/* Slot che aspetta il suo turno (data-slot-richiede): i comandi sono chiusi e
   la riga di stato dice perché. Si smorza il riquadro senza nasconderlo —
   l'operatore deve vedere che quel documento va comunque fotografato, dopo. */
.foto-slot--bloccato {
    opacity: 0.6;
}
.foto-slot__stato--ok     { color: var(--clr-success); font-weight: 500; }
.foto-slot__stato--avviso { color: var(--clr-warning); font-weight: 500; }
.foto-slot__stato--info   { color: var(--clr-info); }

/* ============================================================
   Campi che devono essere univoci (assets/campo-univoco.js): avviso sotto il
   campo quando il valore appartiene già a un'altra scheda, col collegamento a
   quella scheda — perché quasi sempre la cosa giusta da fare è aprirla, non
   insistere. Colore d'errore: non è un suggerimento, è un dato che non si potrà
   salvare.
   ============================================================ */
.campo-univoco__avviso {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--clr-error);
}
.campo-univoco__avviso a {
    font-weight: 600;
    color: inherit;
}

/* ============================================================
   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);
}

/* ============================================================
   Filtri in tempo reale (assets/filtri-live.js): mentre il server
   ricalcola l'elenco i risultati di prima restano in pagina ma si
   smorzano. Il ritardo sulla transizione è la parte che conta —
   una risposta rapida non deve far lampeggiare la tabella — e i
   vecchi risultati non spariscono: la pagina che salta a ogni
   lettera battuta è peggio di un elenco che aspetta.
   ============================================================ */
[data-filtri-blocco] {
    transition: opacity 0.15s ease;
}
[data-filtri-blocco][aria-busy='true'] {
    opacity: 0.55;
    transition-delay: 0.15s;
}