/*
 * Cidol Area Agenti - foglio di stile principale.
 * Mobile first; punti di rottura: 30em (480px), 48em (768px), 64em (1024px, menu desktop), 80em (1280px).
 * Nessuna risorsa esterna (CSP default-src 'self'): font Hind self-hosted in assets/fonts (licenza OFL).
 */

/* ==========================================================================
   Font Hind (400, 500, 600, 700 - latin e latin-ext)
   ========================================================================== */

@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hind-400-latin-ext-GhlhoEe.woff2") format('woff2');
    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;
}
@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hind-400-latin-rtG7KgU.woff2") format('woff2');
    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: 'Hind';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/hind-500-latin-ext-mvS4AW8.woff2") format('woff2');
    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;
}
@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/hind-500-latin-V2DGqyu.woff2") format('woff2');
    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: 'Hind';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hind-600-latin-ext-l8rE0tw.woff2") format('woff2');
    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;
}
@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hind-600-latin-h5ptlcf.woff2") format('woff2');
    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: 'Hind';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/hind-700-latin-ext-bBW7O9J.woff2") format('woff2');
    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;
}
@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/hind-700-latin-8aPXcVM.woff2") format('woff2');
    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;
}

/* ==========================================================================
   Variabili (identita' Cidol)
   ========================================================================== */

:root {
    /* Colori del marchio */
    --c-yellow: #f8c12c;          /* accento principale: testo sopra = navy */
    --c-yellow-hover: #f2b307;
    --c-yellow-active: #e0a500;
    --c-yellow-soft: #fef6dc;
    --c-red: #e53d34;             /* pericolo/errori (bordi, accenti) */
    --c-navy: #212f3d;            /* header, testi forti */
    --c-navy-soft: #2d3e50;
    --c-text: #333333;
    --c-bg: #f3f3f3;
    --c-surface: #ffffff;

    /* Colori derivati, verificati per contrasto WCAG AA su bianco/#f3f3f3 */
    --c-muted: #5c6670;           /* 5.8:1 su bianco */
    --c-link: #1a49a8;            /* 8.2:1 su bianco */
    --c-link-hover: #123578;
    --c-danger: #c0332b;          /* sfondo pulsante con testo bianco: 5.6:1 */
    --c-danger-hover: #a52a23;
    --c-danger-text: #b3261e;     /* testo errori: 6.5:1 */
    --c-danger-soft: #fdecea;
    --c-success: #1d6b3a;
    --c-success-soft: #e4f3e8;
    --c-warning-text: #6b4e00;
    --c-warning-soft: #fef3cd;
    --c-info: #1c4f82;
    --c-info-soft: #e7eff9;
    --c-neutral-text: #3d4750;
    --c-neutral-soft: #e9ecef;

    /* Contatto e cliente (docs/contatti-e-preventivi.md § 8): il viola e' riservato ai contatti e nel portale non ha altri
       significati (giallo = marchio, verde/rosso/arancio = esiti e allarmi); il cliente usa il blu notte del marchio */
    --c-contact: #5b3fa8;            /* 7.7:1 su bianco, 6.5:1 sul suo fondo */
    --c-contact-soft: #efeafb;
    --c-customer: var(--c-navy);  /* 11.6:1 sul suo fondo */
    --c-customer-soft: #e8edf2;

    --c-border: #dfe3e7;          /* separatori */
    --c-border-strong: #7d8791;   /* bordi dei campi: 3.6:1 su bianco */
    --c-row-hover: #f8f9fa;
    --focus: var(--c-link);

    /* Tipografia */
    --font-sans: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Spaziature, raggi, ombre */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(33, 47, 61, 0.06), 0 1px 3px rgba(33, 47, 61, 0.08);
    --shadow: 0 4px 12px rgba(33, 47, 61, 0.1), 0 1px 3px rgba(33, 47, 61, 0.08);
    --touch: 44px;
    --header-h: 56px;
    --container: 75rem;
    --gutter: 1rem;
}

@media (min-width: 48em) {
    :root {
        --gutter: 1.5rem;
        --header-h: 64px;
    }
}

@media (min-width: 80em) {
    :root {
        --gutter: 2rem;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-4);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-3);
    color: var(--c-navy);
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: 1.625rem;
    font-weight: 700;
}

h2 {
    font-size: 1.3125rem;
}

h3 {
    font-size: 1.125rem;
}

h4 {
    font-size: 1rem;
}

@media (min-width: 48em) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.4375rem;
    }
}

p,
ul,
ol,
dl,
table,
figure {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--c-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--c-link-hover);
    text-decoration-thickness: 2px;
}

strong,
b {
    font-weight: 600;
}

small {
    font-size: 0.875rem;
}

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

img {
    height: auto;
}

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

hr {
    height: 0;
    margin: var(--space-5) 0;
    border: 0;
    border-top: 1px solid var(--c-border);
}

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

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

[hidden] {
    display: none !important;
}

.icon {
    display: inline-block;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

/* ==========================================================================
   Accessibilita'
   ========================================================================== */

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

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--c-yellow);
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
    outline: 3px solid var(--c-navy);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main {
    flex: 1 0 auto;
    min-width: 0;
    padding-block: var(--space-5) var(--space-7);
}

@media (min-width: 48em) {
    .site-main {
        padding-top: var(--space-6);
    }
}

/* Header */

.site-header {
    --focus: var(--c-yellow);
    position: relative;
    z-index: 20;
    background: var(--c-navy);
    color: #fff;
    border-bottom: 4px solid var(--c-yellow);
}

/* "Accedi come": barra sempre visibile sotto l'intestazione finche' l'amministratore non esce */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 19;
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
    border-bottom: 2px solid var(--c-yellow);
    box-shadow: var(--shadow-sm);
}

.impersonation-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2);
}

.impersonation-bar-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.impersonation-bar-text strong {
    color: var(--c-navy);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    column-gap: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch);
    padding-block: var(--space-2);
    color: #fff;
    text-decoration: none;
}

.brand:hover {
    color: #fff;
}

.brand-logo {
    display: block;
    width: 36px;
    height: auto;
}

.brand-title {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Barra: campanella degli avvisi e, su telefono/tablet, il pulsante del menu */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.header-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    min-height: var(--touch);
    border-radius: var(--radius);
    color: #fff;
    text-decoration: none;
}

.header-bell:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.header-bell.is-active {
    background: rgba(255, 255, 255, 0.08);
}

.header-bell .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--c-yellow);
}

.header-bell .nav-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    font-size: 0.75rem;
    box-shadow: 0 0 0 2px var(--c-navy);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Telefono e tablet: pannello che scorre da destra sopra uno sfondo scurito (app.js: focus, Esc, scorrimento) */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(10, 17, 26, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: min(85vw, 22rem);
    padding: var(--space-3) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-navy);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.nav-panel.is-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

/* pagina ferma dietro al pannello aperto, anche su iPhone (app.js conserva e ripristina lo scorrimento) */
body.nav-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nav-backdrop,
    .nav-panel {
        transition: none;
    }
}

.nav-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 0 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.nav-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-list,
.nav-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    text-decoration: none;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-link.is-active {
    background: rgba(248, 193, 44, 0.14);
    color: #fff;
    font-weight: 600;
}

.nav-link.is-active::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--c-yellow);
}

.nav-link .icon {
    color: var(--c-yellow);
}

/* Gruppo con sottovoci (Ordini, utente): sul pannello una riga a tendina che apre le voci rientrate
   (chiuse da app.js, che aggiunge .js; senza JavaScript restano visibili), da desktop un menu a discesa */
.nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-group.is-open > .nav-group-toggle {
    color: #fff;
}

.nav-sublist-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease;
}

.nav-sublist-wrap > .nav-sublist {
    min-height: 0;
    overflow: hidden;
}

.site-nav.js .nav-group:not(.nav-group--user):not(.is-open) > .nav-sublist-wrap {
    grid-template-rows: 0fr;
}

.site-nav.js .nav-group:not(.nav-group--user):not(.is-open) > .nav-sublist-wrap > .nav-sublist {
    visibility: hidden;
    transition: visibility 0s linear 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    .nav-sublist-wrap,
    .nav-sublist-wrap > .nav-sublist {
        transition: none;
    }
}

/* utente: sul pannello nome e ruolo stanno in testa, Profilo ed Esci restano in fondo senza tendina */
.nav-group--user .nav-group-toggle {
    display: none;
}

.nav-sublink {
    min-height: 44px;
    padding-left: calc(var(--space-3) * 2 + 1.25rem);
    font-size: 0.9375rem;
}

.nav-chevron {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.15s ease;
}

.nav-count:not([hidden]) + .nav-chevron {
    margin-left: var(--space-2);
}

.nav-group.is-open .nav-chevron {
    transform: rotate(180deg);
}

/* contatori resi lato server (nascosti a 0): avvisi da gestire, ordini da lavorare, preventivi da gestire */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    padding: 0 0.45em;
    border-radius: 999px;
    background: var(--c-yellow);
    color: #1a1a1a;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.nav-count[hidden] {
    display: none;
}

.user-nav {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.user-nav .nav-sublink {
    padding-left: var(--space-3);
}

.user-nav-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}

.user-nav-name {
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-nav-role {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
}

/* «+ Nuovo» (azioni, non navigazione): sul pannello una tendina come i gruppi, staccata dalle voci da una linea; le
   azioni sono rientrate come le sottovoci, senza icone (le icone le ha il menu a discesa da desktop) */
.nav-new {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-new .nav-sublink > .icon {
    display: none;
}

.nav-new-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.nav-new-hint {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Desktop: barra orizzontale, campanella e utente a destra, menu a discesa per i gruppi */
@media (min-width: 64em) {
    .site-header-inner {
        column-gap: var(--space-4);
    }

    .brand {
        flex: none;
    }

    /* niente spazio fisso tra gli elementi della barra (con cinque gruppi, «+ Nuovo», l'Assistente e la campanella
       ogni pixel conta a 1024 px): le voci si staccano da «+ Nuovo» con il loro margine, le icone hanno già il loro
       riquadro di 44 px */
    .site-nav {
        flex: 1 1 auto;
        gap: 0;
    }

    .nav-toggle,
    .nav-backdrop,
    .nav-panel-head {
        display: none;
    }

    /* la tendina del pannello non serve: il menu a discesa e' posizionato sul gruppo */
    .nav-sublist-wrap {
        display: contents;
    }

    .site-nav.js .nav-group:not(.is-open) > .nav-sublist-wrap > .nav-sublist {
        visibility: inherit;
        transition: none;
    }

    /* il pannello sparisce come contenitore: elenco, campanella e utente diventano voci della barra
       (visibility torna visibile: e' ereditata e la regola mobile la nasconde) */
    .nav-panel {
        display: contents;
        visibility: visible;
        transition: none;
    }

    .nav-panel > .nav-list {
        display: flex;
        order: 1;
        align-items: center;
        gap: var(--space-1);
        margin-right: auto;
        margin-left: var(--space-3);
        padding-right: var(--space-2);
    }

    /* barra: gruppi, «+ Nuovo», Assistente (solo dove manca il microfono), campanella, utente. Pulsanti e icone non si
       stringono: se lo spazio finisce, da 80em si accorcia il nome dell'utente (più sotto) */
    .nav-new {
        display: flex;
        flex: none;
        order: 2;
        align-items: center;
        margin: 0 var(--space-1) 0 0;
        padding: 0;
        border: 0;
    }

    .header-bell {
        flex: none;
        order: 4;
        min-height: var(--header-h);
        border-radius: 0;
    }

    .header-bell .nav-count {
        top: calc((var(--header-h) - 1.5rem) / 2 - 0.4rem);
    }

    .header-bell.is-active::after {
        content: '';
        position: absolute;
        right: 6px;
        bottom: 0;
        left: 6px;
        height: 4px;
        border-radius: 2px 2px 0 0;
        background: var(--c-yellow);
    }

    .user-nav {
        order: 5;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* l'Assistente dalla barra lo apre il microfono in basso a sinistra; dove il microfono non c'e' (.is-in-bar:
       nuovo ordine, Assistente, «Accedi come») resta nella barra come icona accanto alla campanella, con il nome nel
       title e nel testo nascosto; acceso sulle pagine dell'Assistente come la campanella sugli avvisi */
    .nav-assistant {
        display: flex;
        flex: none;
        order: 3;
    }

    .nav-assistant:not(.is-in-bar) {
        display: none;
    }

    .nav-assistant-link {
        justify-content: center;
        width: var(--touch);
        min-height: var(--header-h);
        padding: 0;
        border-radius: 0;
    }

    .nav-assistant-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nav-assistant-link .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .nav-assistant-link.is-active {
        background: rgba(255, 255, 255, 0.08);
    }

    .nav-assistant-link.is-active::before {
        top: auto;
        right: 6px;
        bottom: 0;
        left: 6px;
        width: auto;
        height: 4px;
        border-radius: 2px 2px 0 0;
    }

    .nav-panel > .nav-list > li > .nav-link,
    .nav-user-toggle {
        min-height: var(--header-h);
        padding: 0 var(--space-3);
        border-radius: 0;
        white-space: nowrap;
    }

    .nav-panel > .nav-list > li > .nav-link > .icon:not(.nav-chevron) {
        display: none;
    }

    .nav-panel > .nav-list > li > .nav-link.is-active,
    .nav-group.is-active > .nav-group-toggle {
        background: rgba(255, 255, 255, 0.06);
        font-weight: 600;
    }

    .nav-panel > .nav-list > li > .nav-link.is-active::before,
    .nav-group.is-active > .nav-group-toggle::before {
        content: '';
        position: absolute;
        top: auto;
        right: var(--space-3);
        bottom: 0;
        left: var(--space-3);
        width: auto;
        height: 4px;
        border-radius: 2px 2px 0 0;
        background: var(--c-yellow);
    }

    .nav-group {
        position: relative;
    }

    .nav-group-toggle,
    .nav-group--user .nav-group-toggle {
        display: flex;
        width: auto;
    }

    /* cinque gruppi, «+ Nuovo» e le icone devono stare in 1024 px anche con la barra di scorrimento di Windows (17 px):
       etichetta, contatore e freccia a 8 px invece di 12 */
    .nav-panel > .nav-list > .nav-group > .nav-group-toggle {
        gap: var(--space-2);
    }

    .nav-panel > .nav-list > .nav-group > .nav-group-toggle > .nav-count:not([hidden]) + .nav-chevron {
        margin-left: 0;
    }

    .nav-group-toggle .nav-count,
    .nav-list > li > .nav-link > .nav-count {
        margin-left: 0;
    }

    .nav-chevron {
        margin-left: -0.25rem;
    }

    .nav-sublist {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 5;
        display: none;
        min-width: 15rem;
        margin-top: 4px;
        padding: var(--space-2);
        border-radius: var(--radius-lg);
        background: var(--c-surface);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    }

    .nav-group.is-open > .nav-sublist-wrap > .nav-sublist {
        display: block;
    }

    .nav-group--user .nav-sublist {
        right: 0;
        left: auto;
    }

    .nav-sublist .nav-link {
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        color: var(--c-navy);
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    .nav-sublist .nav-link:hover {
        background: #eef0f2;
        color: var(--c-navy);
    }

    .nav-sublist .nav-link.is-active {
        background: rgba(248, 193, 44, 0.2);
        color: var(--c-navy);
    }

    .nav-sublist .nav-link .icon {
        display: inline-block;
        color: var(--c-navy);
    }

    .nav-sublist-wrap > .nav-sublist {
        overflow: visible;
    }

    .nav-sublist .nav-count {
        margin-left: auto;
    }

    /* «+ Nuovo»: pulsante giallo (testo navy, 9:1) con il suo menu a discesa allineato a destra, come quello
       dell'utente; le azioni hanno l'icona e, per «Visita o nota», la riga che spiega dove si arriva */
    .nav-new-toggle {
        min-height: 2.5rem;
        gap: var(--space-1);
        padding: 0 0.625rem 0 var(--space-2);
        border-radius: var(--radius);
        background: var(--c-yellow);
        color: var(--c-navy);
        font-weight: 600;
        white-space: nowrap;
    }

    .nav-new-toggle:hover,
    .nav-group--new.is-open > .nav-new-toggle {
        background: var(--c-yellow-hover);
        color: var(--c-navy);
    }

    .nav-new-toggle .icon,
    .nav-new-toggle .nav-chevron {
        color: currentColor;
    }

    .nav-new-toggle > .icon:not(.nav-chevron) {
        width: 1.125rem;
        height: 1.125rem;
    }

    .nav-new-toggle .nav-chevron {
        margin-left: 0;
    }

    .nav-group--new .nav-sublist {
        right: 0;
        left: auto;
    }

    .nav-new .nav-sublink > .icon {
        display: inline-block;
    }

    .nav-new-hint {
        color: var(--c-muted);
    }

    /* utente: icona (nome e ruolo solo da 80em, ma sempre nel nome accessibile del pulsante) */
    .nav-user-toggle {
        gap: var(--space-2);
        padding-inline: var(--space-2);
    }

    .nav-user-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nav-user-name {
        max-width: 12rem;
        overflow: hidden;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-user-role {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.75rem;
    }
}

/* Tra 64em e 80em la barra di chi ha piu' voci (Acquisti compreso) non ci stava per pochi pixel: a 1024 px sbordava di
   28 px su tutte le pagine (15/10/2026). Voci un po' piu' strette finche' il nome dell'utente non compare accanto
   all'icona (80em); la linea gialla della voce attiva segue il nuovo margine.
   Menu a cinque gruppi (17/10/2026): con le code piene di un amministratore (contatori su Clienti e Vendite), l'icona
   dell'Assistente (nuovo ordine, Assistente) e la barra di scorrimento di Windows, a 1024 px la barra arrivava al bordo.
   Margine dei gruppi a 6 px; etichetta, numero e freccia più vicini, numero sul gruppo più piccolo, elenco più a
   ridosso del marchio: restano almeno 20 px liberi anche con numeri a tre cifre (README «Menu»). */
@media (min-width: 64em) and (max-width: 79.99em) {
    .nav-panel > .nav-list > li > .nav-link {
        padding: 0 0.375rem;
    }

    .nav-panel > .nav-list > li > .nav-link.is-active::before,
    .nav-group.is-active > .nav-group-toggle::before {
        right: 0.375rem;
        left: 0.375rem;
    }

    .nav-panel > .nav-list {
        margin-left: var(--space-2);
    }

    .nav-panel > .nav-list > .nav-group > .nav-group-toggle {
        gap: 0.375rem;
    }

    .nav-panel > .nav-list > .nav-group > .nav-group-toggle > .nav-count {
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.35em;
        font-size: 0.75rem;
    }
}

@media (min-width: 80em) {
    .nav-user-text {
        position: static;
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        min-width: 0;
        overflow: visible;
        clip: auto;
        line-height: 1.2;
        text-align: left;
    }

    /* La barra piu' piena (amministratore con Acquisti e il contatore di «Preventivi», fasi 5A e 5B) a 1280 px
       superava lo schermo di qualche pixel: il menu dell'utente puo' stringersi e il nome si accorcia con «…»
       invece di spingere la freccia fuori dalla pagina (scorrimento laterale). Le voci del menu non si stringono. */
    .user-nav,
    .nav-group--user {
        min-width: 0;
    }

    .nav-user-toggle {
        min-width: 0;
        max-width: 100%;
    }

    .nav-user-text,
    .nav-user-role {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Footer */

.site-footer,
.auth-footer {
    flex: none;
    padding-block: var(--space-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: 0.875rem;
}

.site-footer p,
.auth-footer p {
    margin: 0;
}

.auth-footer {
    padding-inline: var(--gutter);
    border-top: 0;
    background: transparent;
    text-align: center;
}

/* Layout di accesso (base_auth) */

.auth-main {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-6) var(--gutter) var(--space-5);
}

@media (min-width: 48em) {
    .auth-main {
        align-items: center;
        padding-top: var(--space-7);
    }
}

.auth-column {
    width: 100%;
    max-width: 28rem;
}

.auth-brand {
    margin-bottom: var(--space-5);
    text-align: center;
}

.auth-logo {
    display: block;
    width: 84px;
    margin: 0 auto var(--space-3);
}

.auth-app-name {
    margin: 0;
    color: var(--c-navy);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.auth-app-name::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin: var(--space-2) auto 0;
    border-radius: 2px;
    background: var(--c-yellow);
}

.auth-panel {
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow);
}

@media (min-width: 30em) {
    .auth-panel {
        padding: var(--space-6);
    }
}

.auth-panel h1 {
    font-size: 1.5rem;
}

.auth-panel > :last-child,
.auth-panel form > :last-child {
    margin-bottom: 0;
}

/* Una .card dentro il pannello non deve sembrare una seconda scatola */
.auth-panel .card {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.auth-panel .card-header,
.auth-panel .card-body,
.auth-panel .card-footer {
    padding-inline: 0;
    background: transparent;
}

.auth-panel .card-header {
    padding-top: 0;
}

.auth-panel .card-body:first-child {
    padding-top: 0;
}

.auth-panel .card-body:last-child,
.auth-panel .card-footer {
    padding-bottom: 0;
}

/* Download dell'app (/app/download): le impronte SHA-256 vanno a capo anche su telefono */
.app-download-checksums p {
    margin-bottom: var(--space-1);
}

.app-download-checksums code {
    overflow-wrap: anywhere;
}

/* con Google Play (PLAY_STORE_URL) l'APK è la seconda scelta: titolo staccato dal pulsante di Google Play */
.app-download-alt {
    margin-top: var(--space-6);
}

/* ==========================================================================
   Intestazione di pagina
   ========================================================================== */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.page-heading {
    flex: 1 1 16rem;
    min-width: 0;
}

.page-header h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* riga sotto il titolo (es. "Andamento aziendale" nella Panoramica) */
.page-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted, #52514e);
    font-size: 1rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.section-title {
    margin-bottom: var(--space-4);
    font-size: 1.1875rem;
}

/* ==========================================================================
   Card
   ========================================================================== */

.card {
    position: relative;
    min-width: 0;
    margin-bottom: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    overflow-wrap: break-word;
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-navy);
    font-weight: 600;
}

.card-header h2,
.card-header h3,
.card-header .card-title {
    margin: 0;
    font-size: 1.125rem;
}

.card-body {
    padding: var(--space-4);
}

.card-body > :last-child {
    margin-bottom: 0;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--c-border);
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
    background: #fafbfb;
}

@media (min-width: 48em) {
    .card-header {
        padding: var(--space-4) var(--space-5);
    }

    .card-body {
        padding: var(--space-5);
    }

    .card-footer {
        padding: var(--space-3) var(--space-5);
    }
}

/* Tabella a filo della card */
.card > .table-responsive {
    border: 0;
    border-radius: 0;
}

.card > .table-responsive:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card > .table-responsive:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Card delle sezioni (dashboard) */

.feature-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-top: 4px solid var(--c-yellow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-card .card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.feature-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.feature-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--c-yellow);
}

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

.feature-title {
    margin-bottom: var(--space-2);
    font-size: 1.25rem;
}

.feature-title a {
    color: var(--c-navy);
    text-decoration: none;
}

.feature-text {
    flex: 1;
    color: var(--c-muted);
}

.feature-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--c-link);
    font-weight: 600;
}

.feature-card:hover .feature-more .icon {
    transform: translateX(3px);
}

.feature-more .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.15s ease;
}

/* Rende cliccabile l'intera card che la contiene */
.stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Card di benvenuto (dashboard) */

.welcome-card {
    margin: 0;
    border-left: 4px solid var(--c-navy);
}

.welcome-title {
    margin-bottom: var(--space-1);
    font-size: 1.25rem;
}

/* ==========================================================================
   Pulsanti
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: 0.55rem 1.125rem 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-navy);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn .icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.1em;
}

.btn-primary {
    border-color: var(--c-yellow);
    background: var(--c-yellow);
    color: var(--c-navy);
}

.btn-primary:hover {
    border-color: var(--c-yellow-hover);
    background: var(--c-yellow-hover);
    color: var(--c-navy);
}

.btn-primary:active {
    border-color: var(--c-yellow-active);
    background: var(--c-yellow-active);
}

.btn-secondary {
    border-color: var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-navy);
}

.btn-secondary:hover {
    border-color: var(--c-navy);
    background: #eef0f2;
    color: var(--c-navy);
}

.btn-danger {
    border-color: var(--c-danger);
    background: var(--c-danger);
    color: #fff;
}

.btn-danger:hover {
    border-color: var(--c-danger-hover);
    background: var(--c-danger-hover);
    color: #fff;
}

.btn-link {
    padding-inline: var(--space-2);
    border-color: transparent;
    background: transparent;
    color: var(--c-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.btn-link:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.btn-sm {
    min-height: 36px;
    padding: 0.35rem 0.75rem 0.25rem;
    font-size: 0.875rem;
}

.btn-sm .icon {
    width: 1rem;
    height: 1rem;
}

/* Su schermi touch il bersaglio resta di almeno 44px */
@media (pointer: coarse) {
    .btn-sm {
        min-height: var(--touch);
    }
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.is-copied {
    border-color: var(--c-success);
    background: var(--c-success-soft);
    color: var(--c-success);
}

.btn.is-copy-failed {
    border-color: var(--c-danger-text);
    background: var(--c-danger-soft);
    color: var(--c-danger-text);
}

/* ==========================================================================
   Form
   ========================================================================== */

form {
    margin: 0;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--c-navy);
    font-weight: 600;
    line-height: 1.3;
}

.form-label.required::after {
    content: ' *';
    color: var(--c-danger-text);
}

.form-control {
    display: block;
    width: 100%;
    min-height: var(--touch);
    padding: 0.55rem 0.75rem 0.45rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background-color: var(--c-surface);
    color: var(--c-text);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

/* Date, orari e file mantengono i controlli nativi (calendario, pulsante "Sfoglia") */
.form-control[type='date'],
.form-control[type='time'],
.form-control[type='datetime-local'],
.form-control[type='month'],
.form-control[type='week'],
.form-control[type='file'] {
    appearance: auto;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control:hover {
    border-color: var(--c-navy-soft);
}

.form-control:focus {
    border-color: var(--c-navy);
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #eceef0;
    color: var(--c-muted);
    cursor: not-allowed;
}

.form-control[readonly] {
    cursor: text;
}

textarea.form-control {
    min-height: 7.5rem;
    resize: vertical;
}

select.form-control,
.form-select {
    padding-right: 2.5rem;
    background-image: url("../images/chevron-down-xTlUe97.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

select.form-control[multiple],
select.form-control[size]:not([size='1']) {
    padding-right: 0.75rem;
    background-image: none;
}

input[type='file'].form-control {
    padding: 0.5rem;
}

.form-help {
    margin-top: var(--space-2);
    color: var(--c-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.form-error,
.form-error-list {
    color: var(--c-danger-text);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.form-error {
    margin-top: var(--space-2);
}

.form-error-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-error-list li + li {
    margin-top: var(--space-1);
}

.form-error li {
    position: relative;
    padding-left: 1.5rem;
}

/* Indicatore "!" in cerchio, per non affidare l'errore al solo colore */
.form-error li::before {
    content: '!';
    position: absolute;
    top: 0.05em;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--c-danger-text);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
}

.alert .form-error-list {
    color: inherit;
    font-weight: 500;
}

.has-error .form-control,
.form-control[aria-invalid='true'] {
    border-color: var(--c-danger-text);
    box-shadow: inset 4px 0 0 var(--c-red);
}

.has-error > .form-label,
.has-error .form-check-label {
    color: var(--c-danger-text);
}

/* Checkbox e radio */

.form-check-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--touch);
    padding-block: var(--space-2);
}

.form-check-input,
.form-check-line input[type='checkbox'],
.form-check-line input[type='radio'] {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.05rem 0 0;
    accent-color: var(--c-navy);
    cursor: pointer;
}

.form-check-label {
    color: var(--c-text);
    font-weight: 400;
    cursor: pointer;
}

.form-check {
    margin-bottom: var(--space-4);
}

.form-check .form-check-line {
    padding-block: var(--space-1);
}

.form-fieldset > legend {
    margin-bottom: var(--space-1);
}

.form-choices .form-check-line {
    min-height: var(--touch);
    padding-block: var(--space-1);
}

.form-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.form-inline-group > .form-control {
    width: auto;
    flex: 1 1 6rem;
}

/* Azioni in fondo al form */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.form-actions .form-actions {
    margin-top: 0;
}

@media (max-width: 29.99em) {
    .form-actions > .btn:not(.btn-link) {
        flex: 1 1 auto;
    }
}

/* Form in linea (es. un pulsante POST in una riga di tabella) */

.inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    vertical-align: middle;
}

.inline-form .form-control {
    width: auto;
    min-height: 36px;
    padding-block: 0.3rem 0.2rem;
}

/* Su schermi touch il campo resta alto quanto i pulsanti accanto (44px) */
@media (pointer: coarse) {
    .inline-form .form-control {
        min-height: var(--touch);
    }
}

.inline-form .form-group {
    margin: 0;
}

/* ==========================================================================
   Messaggi (alert e flash)
   ========================================================================== */

.alert {
    position: relative;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-left-width: 5px;
    border-radius: var(--radius);
    line-height: 1.5;
}

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

.alert a {
    color: inherit;
    font-weight: 600;
}

.alert-success {
    border-color: #9fd1ae;
    border-left-color: var(--c-success);
    background: var(--c-success-soft);
    color: var(--c-success);
}

.alert-error,
.alert-danger {
    border-color: #f1b2ad;
    border-left-color: var(--c-red);
    background: var(--c-danger-soft);
    color: #a3291f;
}

.alert-warning {
    border-color: #f3d57e;
    border-left-color: var(--c-yellow);
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
}

.alert-info {
    border-color: #a9c3e6;
    border-left-color: var(--c-info);
    background: var(--c-info-soft);
    color: var(--c-info);
}

.alert-with-icon {
    padding-left: 3rem;
}

.alert-with-icon > .alert-icon {
    position: absolute;
    top: 0.8rem;
    left: 0.9rem;
    width: 1.375rem;
    height: 1.375rem;
}

.alert-dismissible {
    padding-right: 3.25rem;
}

.alert-close {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
}

.alert-close:hover {
    opacity: 1;
}

.alert-close .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.flash-stack {
    margin-bottom: var(--space-5);
}

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

/* ==========================================================================
   Tabelle
   ========================================================================== */

/* position: relative fa del contenitore che scorre il riferimento dei figli posizionati in assoluto, come le etichette
   .visually-hidden dei campi nelle celle («Da ordinare» del Riordino) e le didascalie nascoste. Senza, il loro riferimento
   era la .card (relative) attorno alla tabella: restavano dove sarebbero nella tabella, oltre il bordo, e allargavano la
   pagina invece di scorrere con la tabella. Sulle pagine Acquisti, a 400 px, da 412 a 546 px di scorrimento laterale
   (Riordino con righe, Fornitori, ordine a fornitore), a 768 px fino a 186 (15/10/2026). */
.table-responsive {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    /* Ombre ai bordi che indicano la presenza di altre colonne da scorrere */
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(33, 47, 61, 0.2), rgba(33, 47, 61, 0)) left center / 0.875rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(33, 47, 61, 0.2), rgba(33, 47, 61, 0)) right center / 0.875rem 100% no-repeat scroll,
        #fff;
}

.table-responsive > .table {
    margin: 0;
    background: transparent;
}

.table {
    width: 100%;
    margin-bottom: var(--space-5);
    border-collapse: collapse;
    background: var(--c-surface);
    font-size: 0.9375rem;
}

.table caption {
    padding: var(--space-3) var(--space-4);
    color: var(--c-muted);
    text-align: left;
}

.table th,
.table td {
    padding: 0.7rem var(--space-4) 0.6rem;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.table thead th {
    border-bottom: 2px solid var(--c-border);
    background: #f7f8f9;
    color: var(--c-navy);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table tbody tr:hover > * {
    background-color: var(--c-row-hover);
}

.table .text-wrap,
.table td.wrap {
    min-width: 12rem;
    white-space: normal;
}

.table .text-end,
.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table td > .btn,
.table td > .inline-form {
    margin-block: 0.125rem;
}

.table td > .btn + .btn,
.table td > .btn + .inline-form,
.table td > .inline-form + .btn,
.table td > .inline-form + .inline-form {
    margin-left: var(--space-2);
}

.table-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ==========================================================================
   Intestazioni ordinabili (_partials/_sort.html.twig): link con freccia, aria-sort sulla <th>
   ========================================================================== */

.table thead th.sortable {
    padding-block: 0.2rem;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.sort-link:hover .sort-label {
    text-decoration: underline;
}

.sort-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--c-muted);
    opacity: 0.55;
}

.sort-link:hover .sort-icon,
.is-sorted .sort-icon {
    opacity: 1;
}

.is-sorted .sort-icon {
    color: var(--c-navy);
}

/* Su schermi touch il bersaglio resta di almeno 44px */
@media (pointer: coarse) {
    .table thead th.sortable {
        padding-block: 0;
    }

    .sort-link {
        min-height: var(--touch);
    }
}

@media print {
    .sort-icon {
        display: none;
    }
}

/* ==========================================================================
   Badge
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.65em 0.1em;
    border-radius: 999px;
    background: var(--c-neutral-soft);
    color: var(--c-neutral-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.badge .icon {
    width: 1em;
    height: 1em;
    margin-top: -0.1em;
}

.badge-success {
    background: var(--c-success-soft);
    color: var(--c-success);
}

.badge-danger {
    background: var(--c-danger-soft);
    color: #a3291f;
}

.badge-warning {
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
    box-shadow: inset 0 0 0 1px #f1d27a;
}

.badge-neutral {
    background: var(--c-neutral-soft);
    color: var(--c-neutral-text);
}

.badge-info {
    background: var(--c-info-soft);
    color: var(--c-info);
}

.badge-code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Contatto e cliente (docs/contatti-e-preventivi.md § 8, _partials/_subject.html.twig): si riconoscono a colpo
   d'occhio anche in bianco e nero e per chi non distingue i colori. Mai solo il colore: la parola
   «Contatto» o «Cliente» e' sempre scritta, con l'icona (bersaglio o edificio) e, sulla mappa, la forma.
   ========================================================================== */

.subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.7em 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.subject-chip .icon {
    flex: none;
    width: 1.05em;
    height: 1.05em;
    margin-top: -0.1em;
}

.subject-chip--contact {
    background: var(--c-contact-soft);
    color: var(--c-contact);
}

.subject-chip--customer {
    background: var(--c-customer-soft);
    color: var(--c-customer);
}

/* badge dello stato «cliente» di un contatto e delle righe «già cliente» dell'importazione: il colore del cliente */
.badge-customer {
    background: var(--c-customer-soft);
    color: var(--c-customer);
}

/* scheda di un contatto o di un cliente: bordo in alto del colore del soggetto */
.subject-card {
    border-top: 4px solid var(--subject-edge, var(--c-border));
}

.subject-card--contact {
    --subject-edge: var(--c-contact);
}

.subject-card--customer {
    --subject-edge: var(--c-customer);
}

/* segnaposto della mappa per le legende (SVG): cliente rotondo pieno, contatto a rombo con il bordo */
.subject-pin {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    vertical-align: middle;
}

.subject-pin--customer .subject-pin-shape {
    fill: var(--c-customer);
}

.subject-pin--customer .subject-pin-dot {
    fill: var(--c-surface);
}

.subject-pin--contact .subject-pin-shape {
    fill: var(--c-contact-soft);
    stroke: var(--c-contact);
    stroke-width: 2.5;
}

.subject-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.subject-legend > li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

@media print {
    .subject-chip {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   Liste di definizioni (etichetta / valore): <dl class="dl"><dt>..</dt><dd>..</dd></dl>
   ========================================================================== */

.dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 var(--space-4);
}

/* Ammessi anche <div> che raggruppano dt/dd */
.dl > div {
    display: contents;
}

.dl dt {
    padding-top: var(--space-3);
    color: var(--c-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.dl dd {
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.dl > dt:first-child,
.dl > div:first-child > dt {
    padding-top: 0;
}

.dl > dd:last-child,
.dl > div:last-child > dd {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (min-width: 36em) {
    .dl {
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
        column-gap: var(--space-5);
    }

    .dl dt,
    .dl dd {
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--c-border);
    }

    /* compensa la differenza di corpo tra etichetta e valore */
    .dl dt {
        padding-top: calc(var(--space-3) + 0.1rem);
    }

    .dl > dt:first-child,
    .dl > dt:first-child + dd,
    .dl > div:first-child > * {
        padding-top: 0;
    }

    .dl > dt:first-child {
        padding-top: 0.1rem;
    }

    .dl > dd:last-child,
    .dl > dt:nth-last-child(2),
    .dl > div:last-child > * {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.dl-compact dt,
.dl-compact dd {
    padding-block: var(--space-2);
}

.dl-compact dd .badge + .badge {
    margin-left: var(--space-1);
}

/* ==========================================================================
   Stato vuoto / segnaposto
   ========================================================================== */

.empty-state {
    margin-bottom: var(--space-5);
    padding: var(--space-7) var(--space-4);
    border: 2px dashed #cfd5db;
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--c-yellow-soft);
    color: var(--c-navy);
    box-shadow: inset 0 0 0 2px var(--c-yellow);
}

.empty-state-icon .icon {
    width: 1.875rem;
    height: 1.875rem;
}

.empty-state-title {
    max-width: 34rem;
    margin: 0 auto var(--space-2);
    color: var(--c-navy);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
}

.empty-state-text,
.empty-state p:not([class]) {
    max-width: 34rem;
    margin-inline: auto;
    color: var(--c-muted);
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.empty-state > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Box per password temporanea
   ========================================================================== */

.secret-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 2px dashed var(--c-yellow-active);
    border-radius: var(--radius);
    background: var(--c-yellow-soft);
    color: var(--c-navy);
}

.secret-box > p,
.secret-box > .form-help,
.secret-box > .secret-label {
    flex: 1 0 100%;
    margin: 0;
}

.secret-box > code,
.secret-box > kbd,
.secret-box > samp,
.secret-box > output,
.secret-box > .secret-value {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--c-navy);
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
    user-select: all;
}

.secret-box > .btn {
    flex: none;
}

/* ==========================================================================
   Pagine di errore
   ========================================================================== */

.error-page {
    text-align: center;
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--c-yellow);
}

.error-icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.error-code {
    margin-bottom: var(--space-1);
    color: var(--c-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-title {
    margin-bottom: var(--space-3);
}

.error-text {
    color: var(--c-text);
}

.error-actions {
    margin-top: var(--space-5);
}

/* ==========================================================================
   Utilita' di layout
   ========================================================================== */

.stack > * {
    margin-top: 0;
    margin-bottom: 0;
}

.stack > * + * {
    margin-top: var(--space-5);
}

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

.grid-2,
.grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.grid-2 > *,
.grid-3 > * {
    min-width: 0;
    margin: 0;
}

@media (min-width: 48em) {
    .grid-2,
    .grid-3 {
        gap: var(--space-5);
    }

    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

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

.text-danger {
    color: var(--c-danger-text);
}

.text-end {
    text-align: right;
}

.text-center {
    text-align: center;
}

.nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   Preferenze utente e stampa
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .feature-card:hover {
        transform: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .auth-footer,
    .skip-link,
    .alert-close,
    .page-actions,
    .nav-toggle {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .card,
    .table-responsive {
        box-shadow: none;
        break-inside: avoid;
    }

    .table-responsive {
        overflow: visible;
    }

    .table th,
    .table td {
        white-space: normal;
    }
}

/* ==========================================================================
   Catalogo: filtri, risultati (card su telefono, tabella da tablet), paginazione, dettaglio
   ========================================================================== */

/* Barra dei filtri: su telefono ricerca, <details> "Filtri", pulsanti */

.catalog-filters-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.catalog-filters .form-group {
    margin: 0;
}

.catalog-filters-more > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-navy);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.catalog-filters-more > summary::-webkit-details-marker {
    display: none;
}

.catalog-filters-more > summary::after {
    content: '';
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    background: url("../images/chevron-down-xTlUe97.svg") center / 1rem 1rem no-repeat;
    transition: transform 0.15s ease;
}

.catalog-filters-more[open] > summary::after {
    transform: rotate(180deg);
}

.catalog-filters-more > summary:hover {
    border-color: var(--c-navy);
    background: #eef0f2;
}

.catalog-filters-more > summary .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.catalog-filters-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.catalog-filters-check .form-check-line {
    align-items: center;
}

.catalog-filters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.catalog-filters-actions > .btn {
    flex: 1 1 8rem;
}

@media (min-width: 48em) {
    .catalog-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    /* aperto da app.js: il sommario non serve piu' */
    .catalog-filters-more.is-static > summary {
        display: none;
    }

    .catalog-filters-more.is-static > .catalog-filters-grid {
        padding-top: 0;
    }

    .catalog-filters-actions > .btn {
        flex: 0 0 auto;
    }
}

@media (min-width: 64em) {
    .catalog-filters-body {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--space-4);
    }

    .catalog-filters-search {
        grid-column: 1;
        grid-row: 1;
    }

    .catalog-filters-actions {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: nowrap;
    }

    .catalog-filters-more {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .catalog-filters-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: end;
    }
}

/* Riepilogo dei risultati e filtri attivi */

.catalog-results > * + * {
    margin-top: var(--space-4);
}

.catalog-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
}

.catalog-count,
.catalog-note {
    margin: 0;
}

.catalog-count {
    color: var(--c-navy);
    font-size: 1.0625rem;
}

.catalog-count-page,
.catalog-note {
    color: var(--c-muted);
    font-size: 0.875rem;
}

.catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    max-width: 100%;
    padding: 0.3rem 0.625rem 0.2rem 0.875rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.catalog-chip:hover {
    border-color: var(--c-navy);
    background: #eef0f2;
    color: var(--c-navy);
}

.catalog-chip .icon {
    width: 1rem;
    height: 1rem;
}

@media (pointer: coarse) {
    .catalog-chip {
        min-height: var(--touch);
    }
}

/* Elementi comuni a card e tabella: codice, prezzo, disponibilita' */

.catalog-code {
    color: var(--c-neutral-text);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.catalog-price,
.catalog-stock {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
}

.catalog-price {
    align-items: flex-start;
}

.catalog-stock {
    align-items: flex-start;
}

.catalog-price-main,
.catalog-price-extra,
.catalog-stock-qty {
    white-space: nowrap;
}

.catalog-price-value {
    color: var(--c-navy);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.catalog-price-unit {
    color: var(--c-muted);
    font-size: 0.875rem;
}

.catalog-price-request {
    color: var(--c-neutral-text);
    font-weight: 600;
}

.catalog-price-extra,
.catalog-stock-qty {
    color: var(--c-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* Risultati su telefono: una card per articolo, tutta cliccabile (stretched-link) */

.catalog-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-card {
    position: relative;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-yellow);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    overflow-wrap: anywhere;
    transition: box-shadow 0.15s ease;
}

.catalog-card:hover {
    box-shadow: var(--shadow);
}

.catalog-card-title {
    margin: 0 0 var(--space-1);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.catalog-card-title a {
    color: var(--c-navy);
    text-decoration: none;
}

.catalog-card-title a:hover {
    text-decoration: underline;
}

/* focus sulla card intera invece che sul solo titolo */
.catalog-card .stretched-link:focus-visible {
    outline: none;
}

.catalog-card .stretched-link:focus-visible::after {
    border-radius: var(--radius-lg);
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.catalog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--c-muted);
    font-size: 0.875rem;
}

.catalog-card-meta > * + *::before {
    content: '·';
    margin-right: var(--space-2);
    color: var(--c-border-strong);
}

.catalog-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
}

.catalog-card-footer .catalog-stock {
    align-items: flex-end;
    /* resta a destra anche quando va a capo sotto il prezzo */
    margin-left: auto;
    text-align: right;
}

/* Risultati da tablet in su: tabella */

.catalog-table-card {
    display: none;
}

.catalog-table td {
    vertical-align: top;
}

.catalog-table td.num .catalog-price {
    align-items: flex-end;
}

.catalog-table .catalog-price-value {
    font-size: 1rem;
}

.catalog-item-link {
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: none;
}

.catalog-item-link:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
}

.catalog-table th,
.catalog-table td {
    padding-inline: var(--space-3);
}

/*
 * Colonne progressive: su tablet Descrizione, Prezzo, Disponibilita' (codice, marchio e
 * confezione sotto la descrizione); da 64em anche Codice e Confezione; da 80em anche Marchio.
 */
.catalog-col-code,
.catalog-col-pack,
.catalog-col-brand {
    display: none;
}

.catalog-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin-top: 0.125rem;
    color: var(--c-muted);
    font-size: 0.8125rem;
}

.catalog-row-meta > * + *::before {
    content: '·';
    margin-right: var(--space-2);
    color: var(--c-border-strong);
}

.catalog-row-meta .catalog-code {
    font-size: 0.8125rem;
}

@media (min-width: 48em) {
    .catalog-cards {
        display: none;
    }

    .catalog-table-card {
        display: block;
    }
}

@media (min-width: 64em) {
    .catalog-col-code,
    .catalog-col-pack {
        display: table-cell;
    }

    .catalog-row-meta-code,
    .catalog-row-meta-pack {
        display: none;
    }

    /* resta solo il marchio: niente separatore */
    .catalog-row-meta > *::before {
        content: none;
    }
}

@media (min-width: 80em) {
    .catalog-col-brand {
        display: table-cell;
    }

    .catalog-row-meta {
        display: none;
    }
}

.catalog-empty .empty-state-icon .icon {
    width: 1.625rem;
    height: 1.625rem;
}

/* Paginazione (_partials/_pagination.html.twig) */

.pagination {
    margin-top: var(--space-5);
}

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 0.2rem var(--space-3) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-navy);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

a.pagination-link:hover {
    border-color: var(--c-navy);
    background: #eef0f2;
    color: var(--c-navy);
}

.pagination-link .icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.2rem;
}

.pagination-link.is-current {
    border-color: var(--c-navy);
    background: var(--c-navy);
    color: #fff;
}

.pagination-link.is-disabled {
    border-style: dashed;
    background: transparent;
    color: var(--c-muted);
    cursor: default;
}

.pagination-ellipsis {
    display: inline-block;
    min-width: 1.5rem;
    color: var(--c-muted);
    text-align: center;
}

.pagination-status {
    margin: var(--space-2) 0 0;
    color: var(--c-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* telefono: solo Precedente/Successiva e "Pagina X di Y" */
@media (max-width: 35.99em) {
    .pagination-page,
    .pagination-gap {
        display: none;
    }

    .pagination-item {
        flex: 1 1 0;
    }

    .pagination-item > .pagination-link {
        width: 100%;
    }
}

@media (min-width: 36em) {
    .pagination-status {
        display: none;
    }
}

/* Dettaglio articolo */

.catalog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.catalog-detail-meta .text-muted {
    margin-right: var(--space-1);
    font-size: 0.875rem;
}

.catalog-detail-card .card-header h2 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.catalog-detail-card .card-header h2 .icon,
.catalog-detail-subtitle .icon {
    color: var(--c-navy-soft);
}

.catalog-detail-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-1);
}

.catalog-detail-price .catalog-price-value {
    font-size: 2rem;
    line-height: 1.2;
}

.catalog-detail-price .catalog-price-unit {
    font-size: 1rem;
}

.catalog-detail-price .catalog-price-request {
    color: var(--c-navy);
    font-size: 1.375rem;
}

.catalog-detail-hint {
    margin-bottom: var(--space-4);
    color: var(--c-muted);
    font-size: 0.9375rem;
}

.catalog-detail-note {
    display: block;
    color: var(--c-muted);
    font-size: 0.8125rem;
}

p.catalog-detail-note {
    margin: var(--space-3) 0 0;
}

.catalog-detail-stock {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--space-4);
}

.catalog-detail-stock-label {
    color: var(--c-muted);
    font-size: 0.9375rem;
    font-weight: 600;
}

.catalog-detail-stock-value {
    color: var(--c-navy);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.catalog-detail-subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-2);
    font-size: 1rem;
}

.catalog-supplies {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-supplies li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--c-border);
}

.catalog-supplies li:last-child {
    border-bottom: 0;
}

.catalog-supplies-qty {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Dettaglio per magazzino (come la lista degli ordini a fornitore): nome e disponibile, sotto i numeri */
.catalog-warehouses {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-warehouses li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--c-border);
}

.catalog-warehouses li:last-child {
    border-bottom: 0;
}

.catalog-warehouse-qty {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.catalog-warehouse-code {
    color: var(--c-muted);
    font-size: 0.875em;
    white-space: nowrap;
}

.catalog-warehouse-detail {
    flex-basis: 100%;
    color: var(--c-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.catalog-detail-text {
    white-space: pre-line;
}

.catalog-related {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-related li + li {
    border-top: 1px solid var(--c-border);
}

.catalog-related-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-height: var(--touch);
    padding: var(--space-3) var(--space-4);
    color: var(--c-navy);
    text-decoration: none;
}

.catalog-related-link:hover {
    background: var(--c-row-hover);
    color: var(--c-link-hover);
}

.catalog-related-description {
    flex: 1 1 12rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.catalog-related-link .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--c-link);
}

.catalog-related li:last-child .catalog-related-link {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (min-width: 48em) {
    .catalog-related-link {
        padding-inline: var(--space-5);
    }
}

.catalog-alert-title {
    font-weight: 600;
}

@media print {
    .catalog-filters,
    .catalog-chips,
    .pagination {
        display: none !important;
    }
}

/* ==========================================================================
   Pulsante del microfono sempre in vista e pannello "Ti ascolto" (assets/voice.js)
   ========================================================================== */

/* su telefono il piu' in basso possibile: nell'app sotto c'e' gia' la barra di navigazione di Android */
.voice-fab {
    position: fixed;
    left: var(--space-3);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--c-surface);
    border-radius: 50%;
    background: var(--c-yellow);
    box-shadow: 0 6px 18px rgba(33, 47, 61, 0.28);
    color: var(--c-navy);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.voice-fab:hover {
    color: var(--c-navy);
    box-shadow: 0 8px 22px rgba(33, 47, 61, 0.34);
    transform: scale(1.05);
}

.voice-fab:focus-visible {
    outline: 3px solid var(--c-navy);
    outline-offset: 3px;
}

.voice-fab .icon {
    width: 1.75rem;
    height: 1.75rem;
}

@media (min-width: 64em) {
    .voice-fab {
        left: var(--space-6);
        bottom: var(--space-5);
    }
}

.nav-open .voice-fab,
.voice-open .voice-fab {
    display: none;
}

.voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 17, 26, 0.6);
}

.voice-overlay[hidden] {
    display: none;
}

@media (min-width: 48em) {
    .voice-overlay {
        align-items: center;
    }
}

body.voice-open {
    overflow: hidden;
}

.voice-sheet {
    width: 100%;
    max-width: 30rem;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.voice-sheet-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
}

.voice-sheet-mic .icon {
    width: 2.25rem;
    height: 2.25rem;
}

.voice-overlay[data-state='listening'] .voice-sheet-mic {
    animation: voice-pulse 1.4s ease-in-out infinite;
}

.voice-overlay[data-state='problem'] .voice-sheet-mic {
    background: #eef0f2;
    color: var(--c-muted);
}

@keyframes voice-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(248, 193, 44, 0.6);
    }

    60% {
        box-shadow: 0 0 0 1.1rem rgba(248, 193, 44, 0);
    }
}

.voice-sheet-title {
    margin: 0 0 var(--space-2);
    color: var(--c-navy);
    font-size: 1.375rem;
    font-weight: 700;
}

.voice-sheet-text {
    min-height: 3.2em;
    margin: 0 0 var(--space-2);
    color: var(--c-text);
    font-size: 1.25rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.voice-sheet-text.is-placeholder {
    color: var(--c-muted);
    font-size: 1.0625rem;
}

.voice-sheet-hint {
    min-height: 1.4em;
    margin: 0 0 var(--space-4);
    color: var(--c-muted);
    font-size: 0.875rem;
}

.voice-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.voice-sheet-actions .btn {
    min-width: 8rem;
}

.voice-sheet-actions .btn[hidden] {
    display: none;
}

/* l'Assistente da scrivere (da desktop non è più una voce della barra): sempre sotto i pulsanti */
.voice-sheet-write {
    margin: var(--space-4) 0 0;
    font-size: 0.9375rem;
}

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

    .voice-fab:hover {
        transform: none;
    }

    .voice-overlay[data-state='listening'] .voice-sheet-mic {
        animation: none;
        box-shadow: 0 0 0 6px rgba(248, 193, 44, 0.4);
    }
}

@media print {
    .voice-fab,
    .voice-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   Calendari esterni (docs/visite.md 8): pulsante "Aggiungi al calendario" nelle visite e
   pagina "Calendario" del profilo. Il pulsante e' un <details>: le scelte si aprono sotto,
   senza JavaScript e senza menu flottanti che su telefono finirebbero fuori dallo schermo.
   ========================================================================== */

.calendar-add {
    margin-top: var(--space-2);
}

.calendar-add > summary {
    list-style: none;
    cursor: pointer;
}

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

.calendar-add-chevron {
    transition: transform 0.15s ease;
}

.calendar-add[open] > summary .calendar-add-chevron {
    transform: rotate(180deg);
}

.calendar-add-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-2) 0 0;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-row-hover);
}

/* Pagina del profilo: campo del link con il pulsante "Copia" accanto (in colonna su telefono) */
.calendar-link-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.calendar-link-input {
    flex: 1 1 16rem;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.calendar-agent-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-3);
}

.calendar-agent-form .form-group {
    flex: 1 1 16rem;
    margin: 0;
}

.calendar-link-facts {
    margin-bottom: 0;
}

/* Istruzioni per programma: una tendina ciascuna (freccia che ruota quando e' aperta), i passi
   numerati con spazio per il dito */
.calendar-steps > summary {
    min-height: var(--touch);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    cursor: pointer;
}

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

.calendar-steps-chevron {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.calendar-steps[open] > summary .calendar-steps-chevron {
    transform: rotate(0deg);
}

.calendar-steps ol {
    margin: var(--space-2) 0 0;
    padding-left: 1.5rem;
}

.calendar-steps li + li {
    margin-top: var(--space-1);
}

.calendar-contents {
    margin: 0;
    padding-left: 1.25rem;
}

.calendar-contents li + li {
    margin-top: var(--space-2);
}