/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9 !important;
    color: #333;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — variabili globali (disponibili in tutte le pagine)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Palette */
    --aw-dark: #1e2d3d;
    --aw-dark-hover: #162233;
    --aw-accent: #2f80ed;
    --aw-success: #1a7a5e;
    --aw-success-hover: #145e49;
    --aw-danger: #b91c1c;
    --aw-danger-hover: #991b1b;
    --aw-warning: #d97706;
    --aw-warning-hover: #b45309;
    --aw-warning-bg: #fffbeb;
    --aw-warning-bd: #f59e0b;
    --aw-surface: #ffffff;
    --aw-bg: #f4f6f9;
    --aw-border: #e4e8ee;
    --aw-text: #1e2d3d;
    --aw-muted: #64748b;
    --aw-muted-light: #94a3b8;
    /* Variabili RGB per rgba() */
    --aw-surface-rgb: 255, 255, 255;
    --aw-accent-rgb: 47, 128, 237;
    /* Radii */
    --aw-radius: 0.75rem;
    --aw-radius-sm: 0.4rem;
    --aw-radius-chip: 999px;
    /* Shadows */
    --aw-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
    /* Transitions */
    --aw-transition: .18s ease;
    /* Layout */
    --topbar-h: 56px;
    --sidebar-w: 240px;
    --bottom-nav-h: 60px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    background: var(--aw-surface);
    border-bottom: 1px solid var(--aw-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 .75rem;
    z-index: 1050;
    gap: 1rem;
}

.app-topbar-left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-topbar-right {
    display: flex;
    align-items: center;
    gap: .15rem;
}

/* Logo */
.topbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}


/* Icone top bar */
.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--aw-radius-sm);
    font-size: 1.1rem;
    color: var(--aw-muted);
    text-decoration: none;
    transition: background var(--aw-transition), color var(--aw-transition);
    border: none;
    background: none;
    cursor: pointer;
}

    .topbar-icon:hover {
        background: #f0f4f8;
        color: var(--aw-text);
    }

.topbar-icon--logout:hover {
    background: rgba(185,28,28,.07);
    color: var(--aw-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop mobile */
.side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 1040;
    transition: opacity .25s ease;
}

    .side-backdrop.show {
        display: block;
    }

/* Sidebar panel */
.app-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--aw-dark);
    z-index: 1045;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}

.sidebar-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}

    .sidebar-inner::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-inner::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.15);
        border-radius: 4px;
    }

/* Menu list */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Voce menu */
.sidebar-item {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1rem;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--aw-transition), color var(--aw-transition);
    user-select: none;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
}

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

/* Testo link interno (cliccabile separatamente dall'accordion) */
.sidebar-link-text {
    color: inherit;
    text-decoration: none;
    flex: 1;
}

    .sidebar-link-text:hover {
        color: #fff;
    }

/* Icona voce menu */
.sidebar-icon {
    font-size: .9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    opacity: .75;
}

/* Chevron accordion */
.sidebar-chevron {
    font-size: .7rem;
    transition: transform .25s ease;
    opacity: .5;
    flex-shrink: 0;
}

.sidebar-item.expandable.active .sidebar-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Active state voce principale */
.sidebar-item.active > .sidebar-link,
.sidebar-item.active > .sidebar-link:hover {
    background: rgba(47,128,237,.2);
    color: #fff;
}

    .sidebar-item.active > .sidebar-link .sidebar-icon {
        opacity: 1;
    }

/* Sottomenu */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .22s ease;
    background: rgba(0,0,0,.18);
}

.sidebar-item.expandable.active .sidebar-submenu {
    max-height: 400px;
    opacity: 1;
}

.sidebar-submenu li {
    border-top: 1px solid rgba(255,255,255,.04);
}

    .sidebar-submenu li a {
        display: block;
        padding: .55rem 1rem .55rem 2.5rem;
        font-size: .82rem;
        color: rgba(255,255,255,.65);
        text-decoration: none;
        transition: background var(--aw-transition), color var(--aw-transition);
    }

        .sidebar-submenu li a:hover {
            background: rgba(255,255,255,.07);
            color: #fff;
        }

    .sidebar-submenu li.active a {
        color: #fff;
        background: rgba(47,128,237,.15);
        border-left: 2px solid var(--aw-accent);
        padding-left: calc(2.5rem - 2px); /* compensa il border per non spostare il testo */
    }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CORPO PAGINA
   ═══════════════════════════════════════════════════════════════════════════ */
.app-body {
    margin-top: var(--topbar-h);
    margin-left: var(--sidebar-w);
    min-height: calc(100vh - var(--topbar-h));
    background: var(--aw-bg);
    transition: margin-left .25s ease;
}

.main-content {
    padding: 1.25rem 1.5rem 2rem;
    max-width: 1600px; /* limite massimo su schermi enormi */
}

/* Wrapper centrato per pagine gestionali standard.
   Si allarga con la finestra fino a un massimo ragionevole. */
.aw-page-content {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%; /* ← garantisce che non superi il padding del parent */
}

/* Variante larga per pagine con layout a due colonne (es. Ricerca avanzata, Elenco contatti) */
.aw-page-content-wide {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%; /* ← garantisce che non superi il padding del parent */
}

/* Contenitore fullscreen centrato — usato da pagine di errore e placeholder.
   Sottrae topbar (desktop) e bottomnav (mobile) per evitare scroll inutile. */
.aw-fullpage-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - var(--topbar-h));
    padding: 2rem 1.5rem;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .aw-fullpage-center {
        min-height: calc(100vh - var(--topbar-h) - var(--bottom-nav-h));
        padding: 1.5rem 1.25rem;
    }
}

/* ── Breadcrumb nav (renderizzata dal Layout) ────────────────────────────────── */
.aw-breadcrumb-nav {
    padding: .45rem 1.5rem;
    border-bottom: 1px solid var(--aw-border);
    background: var(--aw-surface);
}

.aw-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aw-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    color: var(--aw-muted);
}

    .aw-breadcrumb-item a {
        color: var(--aw-muted);
        text-decoration: none;
        transition: color .13s ease;
    }

        .aw-breadcrumb-item a:hover {
            color: var(--aw-accent);
        }

    .aw-breadcrumb-item.active span {
        color: var(--aw-text);
        font-weight: 500;
    }

.aw-breadcrumb-sep {
    font-size: .6rem;
    opacity: .5;
}

/* Alert TempData */
#alert-container {
    margin-bottom: 1rem;
}

    #alert-container .alert {
        margin-bottom: 0;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — solo mobile
   ═══════════════════════════════════════════════════════════════════════════ */
.bottom-nav {
    display: none; /* nascosto su desktop */
}

@media (max-width: 768px) {

    /* Su mobile la sidebar diventa un drawer: nascosta di default */
    .app-sidebar {
        transform: translateX(-100%);
        top: var(--topbar-h);
        z-index: 1045;
    }

        .app-sidebar.open {
            transform: translateX(0);
            box-shadow: 4px 0 24px rgba(0,0,0,.25);
        }

    /* Il corpo non ha offset sidebar, ma ha spazio per bottom nav */
    .app-body {
        margin-left: 0;
        padding-bottom: var(--bottom-nav-h);
    }

    .app-content {
        padding: 1rem 1rem 1.5rem;
    }

    /* Bottom nav visibile su mobile */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-h);
        background: var(--aw-surface);
        border-top: 1px solid var(--aw-border);
        box-shadow: 0 -2px 8px rgba(0,0,0,.06);
        z-index: 1065;
        align-items: stretch;
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        font-size: .68rem;
        font-weight: 500;
        color: var(--aw-muted);
        text-decoration: none;
        padding: .35rem .25rem;
        border: none;
        background: none;
        cursor: pointer;
        transition: color var(--aw-transition), background var(--aw-transition);
        -webkit-tap-highlight-color: transparent;
    }

        .bottom-nav-item i {
            font-size: 1.25rem;
            line-height: 1;
        }

        .bottom-nav-item:hover,
        .bottom-nav-item.active {
            color: var(--aw-accent);
        }

            .bottom-nav-item.active i {
                /* dot indicator sotto l'icona attiva */
                position: relative;
            }

            .bottom-nav-item.active::after {
                content: '';
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--aw-accent);
                margin-top: -2px;
            }
}

.archiviato {
    opacity: 0.5 !important;
}

.dt-layout-row:last-of-type, .dt-layout-row:first-of-type {
    font-size: 0.8em;
}

/* Stelle */
.stars {
    display: flex;
    cursor: pointer;
}

.star {
    height: 32px;
    fill: #ccc;
    transition: color 0.3s;
    padding: 0 3px;
}

    .star.selected,
    .star:hover,
    .star.hover {
        fill: #D3072B; /* Colore della stellina selezionata o in hover */
    }

        .star.hover ~ .star {
            fill: #ccc; /* Non colorare le stelline successive */
        }

.reset-icon {
    cursor: pointer;
    stroke: #ccc; /* Colore di default */
    transition: stroke 0.3s;
    margin-left: 10px; /* Margine per separazione dalle stelle */
    padding: 0 3px;
}

    .reset-icon.selected {
        stroke: #f00; /* Colore quando il valore è 0 */
    }

    .reset-icon:hover {
        stroke: #007bff; /* Cambia colore su hover */
    }

/* Icone binarie */
.binary-icon {
    cursor: pointer;
    fill: #ccc; /* Colore di default (non selezionato) */
    transition: stroke 0.3s, fill 0.3s;
    margin-left: 10px;
    padding: 0 3px;
}

#stella-verde-icon.selected,
#stella-verde-icon:hover {
    fill: #649F42;
}

#le-soste-icon.selected,
#le-soste-icon:hover {
    fill: #9f8c50;
}

#jre-icon.selected,
#jre-icon:hover {
    fill: rgb(36, 26, 5);
}

/* Utilità globali */

html body {
    font-size: 0.9rem;
    height: calc(100vh - var(--topbar-h));
}

html .btn {
    font-size: 0.9rem;
    padding: 0.1rem 0.2rem;
}


.body-content {
    /* Mantenuto per retrocompatibilità con pagine non ancora migrate */
    margin-top: var(--topbar-h, 56px);
    margin-left: var(--sidebar-w, 240px);
    position: relative;
}

div.container {
    margin: initial;
    max-width: none;
}

input.form-control[type="radio"] {
    display: initial;
    width: initial;
    appearance: auto;
}

.valid {
    border-color: #198754;
}

span.field-validation-error {
    color: #dc3545;
}

.input-validation-error.form-control:focus {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.2);
    box-shadow: 0 0 0 0.25rem #dc3545;
}

.required-legend {
    font-size: .8rem;
    color: var(--aw-muted);
    font-style: italic;
    margin-bottom: 0;
}

.required-legend i.ba-asterisk {
    font-size: .6em;
    vertical-align: middle;
}

label.required::after {
    font-family: "bootstrap-icons";
    content: "\F151"; /* codice dell'icona bi-asterisk */
    color: #dc3545;
    margin-left: 4px;
    font-weight: 900; /* necessario per icone solid */
}

table.dataTable {
    margin-bottom: unset;
}

div.dt-layout-table div.dt-layout-full {
    width: 100%;
}

div.dt-layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: .75em 0
}

button.dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: .5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 2px;
    background: rgba(0,0,0,0)
}

    button.dt-paging-button:hover {
        color: #fff !important;
        border: 1px solid #111;
        background-color: #111;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
        background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
        background: -moz-linear-gradient(top, #585858 0%, #111 100%);
        background: -o-linear-gradient(top, #585858 0%, #111 100%);
        background: linear-gradient(to bottom, #585858 0%, #111 100%)
    }

    button.dt-paging-button.current {
        color: inherit !important;
        border: 1px solid rgba(0,0,0,.3);
        background-color: rgba(0,0,0,.05);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.05)));
        background: -webkit-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
        background: -moz-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
        background: -o-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
        background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%)
    }

div#alert-container div.alert {
    margin-bottom: 0;
}

div#alert-container {
    margin-bottom: 1rem;
}


/* model validation summary */
div.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* anagrafiche */
.alert {
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.toast {
    transition: opacity .3s ease, transform .3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS — Bootstrap-based
   Le classi .button / .inline-button / .button-neutral / -success / -warning / -danger
   vengono mappate sullo stile Bootstrap tramite override CSS.
   Nessun cambio ai file .cshtml: basta questo blocco.

   Palette (WCAG AA su sfondo bianco) — usa le variabili globali da :root:
     Neutral  --aw-dark    #1e2d3d  contrasto 11:1  ✓
     Success  --aw-success #1a7a5e  contrasto  7.2:1 ✓
     Warning  --aw-warning  #d97706  contrasto  4.6:1  ✓
     Danger   --aw-danger  #b91c1c  contrasto  7.5:1 ✓
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Base condivisa: .button e .inline-button ───────────────────────────────── */
.button,
.inline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--aw-radius-sm);
    transition: var(--aw-transition);
    white-space: nowrap;
    /* Default neutral */
    background-color: var(--aw-dark);
    border-color: var(--aw-dark);
    color: #fff;
}

/* .button — dimensione standard */
.button {
    padding: .44rem 1rem;
    font-size: .875rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* .inline-button — dimensione compatta (tabelle, liste) */
.inline-button {
    padding: .2rem .55rem;
    font-size: .775rem;
    box-shadow: none;
}

    /* ── Stati interattivi base (neutral) ───────────────────────────────────────── */
    .button:hover,
    .inline-button:hover {
        background-color: var(--aw-dark-hover);
        border-color: var(--aw-dark-hover);
        color: #fff;
    }

    .button:focus-visible,
    .inline-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(44,62,80,.35);
    }

    .button:active,
    .button.clicked,
    .inline-button:active {
        background-color: var(--aw-dark-hover);
        border-color: var(--aw-dark-hover);
        color: #fff;
        transform: translateY(1px);
    }

/* ── .button-ghost — outline neutro, per azioni secondarie tipo Annulla ────────── */
.button-ghost {
    background-color: transparent;
    border-color: var(--aw-border);
    color: var(--aw-muted);
}

    .button-ghost:hover {
        background-color: #f1f5f9;
        border-color: var(--aw-muted);
        color: var(--aw-text);
    }

    .button-ghost:focus-visible {
        outline: 2px solid var(--aw-muted);
        outline-offset: 2px;
    }

/* ── .button-neutral (alias esplicito) ──────────────────────────────────────── */
.button-neutral {
    background-color: var(--aw-dark);
    border-color: var(--aw-dark);
    color: #fff;
}

    .button-neutral:hover {
        background-color: var(--aw-dark-hover);
        border-color: var(--aw-dark-hover);
        color: #fff;
    }

    .button-neutral:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(44,62,80,.35);
    }

/* ── .button-success ────────────────────────────────────────────────────────── */
.button-success {
    background-color: var(--aw-success);
    border-color: var(--aw-success);
    color: #fff;
}

    .button-success:hover {
        background-color: var(--aw-success-hover);
        border-color: var(--aw-success-hover);
        color: #fff;
        box-shadow: 0 2px 6px rgba(26,122,94,.25);
    }

    .button-success:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(26,122,94,.35);
    }

    .button-success:active {
        background-color: var(--aw-success-hover);
        border-color: var(--aw-success-hover);
        transform: translateY(1px);
    }

/* ── .button-warning — outline arancione, per azioni reversibili (es. Archivia) */
.button-warning {
    background-color: rgba(217,119,6,.06);
    border-color: var(--aw-warning);
    color: var(--aw-warning);
}

    .button-warning:hover {
        background-color: var(--aw-warning);
        border-color: var(--aw-warning);
        color: #fff;
        box-shadow: 0 2px 6px rgba(217,119,6,.25);
    }

    .button-warning:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(217,119,6,.3);
    }

    .button-warning:active {
        background-color: var(--aw-warning-hover);
        border-color: var(--aw-warning-hover);
        color: #fff;
        transform: translateY(1px);
    }

/* ── .button-danger — outline a riposo, pieno all'hover (meno aggressivo) ───── */
.button-danger {
    background-color: rgba(185,28,28,.06);
    border-color: var(--aw-danger);
    color: var(--aw-danger);
}

    .button-danger:hover {
        background-color: var(--aw-danger);
        border-color: var(--aw-danger);
        color: #fff;
        box-shadow: 0 2px 6px rgba(185,28,28,.25);
    }

    .button-danger:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(185,28,28,.3);
    }

    .button-danger:active {
        background-color: var(--aw-danger-hover);
        border-color: var(--aw-danger-hover);
        color: #fff;
        transform: translateY(1px);
    }

/* ── Stato disabled ──────────────────────────────────────────────────────────── */
.button:disabled,
.inline-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTI GLOBALI RIUTILIZZABILI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header (label + titolo + azioni) ──────────────────────────── */

.aw-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.aw-page-header-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--aw-muted);
    margin-bottom: .1rem;
}

.aw-page-header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--aw-text);
    margin: 0;
    line-height: 1.2;
}

.aw-page-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Table card — contenitore tabelle con sfondo e bordo ───────────────────── */
.aw-table-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    overflow: hidden;
}

/* ── Card generica con header ──────────────────────────────────────────────── */
.aw-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    overflow: hidden;
}

.aw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--aw-border);
    background: #fafbfc;
}

.aw-card-header-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--aw-muted);
}

.aw-card-body {
    padding: 1.1rem;
}

/* ── Back link — torna alla pagina precedente ──────────────────────────────── */
.aw-back {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3rem .8rem;
    border-radius: var(--aw-radius-sm);
    font-size: .8rem;
    font-weight: 500;
    color: var(--aw-muted);
    border: 1px solid var(--aw-border);
    background: var(--aw-surface);
    text-decoration: none;
    transition: all var(--aw-transition);
}

    .aw-back:hover {
        background: #f0f4f8;
        color: var(--aw-text);
    }

/* ── Note banner — avviso contestuale ─────────────────────────────────────── */
.aw-note {
    padding: .8rem 1rem;
    background: var(--aw-warning-bg);
    border-left: 3px solid var(--aw-warning-bd);
    border-radius: 0 var(--aw-radius-sm) var(--aw-radius-sm) 0;
    font-size: .84rem;
    font-style: italic;
    color: #78350f;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

    .aw-note i {
        color: var(--aw-warning-bd);
        flex-shrink: 0;
        margin-top: .15rem;
    }

/* ── Empty state — tabelle e liste vuote ───────────────────────────────────── */
.aw-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--aw-muted-light);
}

    .aw-empty i {
        font-size: 1.75rem;
        display: block;
        margin-bottom: .5rem;
    }

    .aw-empty p {
        font-size: .82rem;
        margin: 0;
    }

/* ── Fade-in animazione entrata ────────────────────────────────────────────── */
.aw-fade {
    animation: rcFadeIn .3s ease both;
}

    .aw-fade:nth-child(1) {
        animation-delay: .04s;
    }

    .aw-fade:nth-child(2) {
        animation-delay: .10s;
    }

    .aw-fade:nth-child(3) {
        animation-delay: .16s;
    }

@keyframes rcFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-box {
    font-style: italic;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ── Loading overlay su contenitori AJAX ──────────────────────────────────── */
.aw-loading-wrap {
    position: relative;
}

.aw-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--aw-surface-rgb), 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    backdrop-filter: blur(1px);
    pointer-events: all;
    opacity: 0;
    transition: opacity .15s ease;
}

    .aw-loading-overlay.visible {
        opacity: 1;
    }

    .aw-loading-overlay .aw-spinner {
        width: 1.75rem;
        height: 1.75rem;
        border: 3px solid rgba(var(--aw-accent-rgb), 0.15);
        border-top-color: var(--aw-accent);
        border-radius: 50%;
        animation: awSpin .7s linear infinite;
    }

/* Spinner standalone — usabile fuori da .aw-loading-overlay (es. loader modale) */
.aw-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid rgba(var(--aw-accent-rgb), 0.15);
    border-top-color: var(--aw-accent);
    border-radius: 50%;
    animation: awSpin .7s linear infinite;
    flex-shrink: 0;
}

/* Necessario per contenere l'overlay di caricamento */
.modal-body {
    position: relative;
}

@keyframes awSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Colonna azioni nei risultati di una ricerca ────────────────────────────────── */
.result-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--aw-radius-sm);
    color: var(--aw-muted);
    border: 1px solid var(--aw-border);
    background: transparent;
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .result-btn-detail:hover {
        background: var(--aw-dark);
        border-color: var(--aw-dark);
        color: #fff;
    }

/* ── DataTable controls inside aw-table-card ────────────────────────────────── */

/* Righe superiore (length+search) e inferiore (info+pagination) */
.aw-table-card .dt-layout-row {
    padding: .65rem 1rem;
    margin: 0;
}

    .aw-table-card .dt-layout-row:first-of-type {
        border-bottom: 1px solid var(--aw-border);
        background: #fafbfc;
    }

    .aw-table-card .dt-layout-row:last-of-type {
        border-top: 1px solid var(--aw-border);
        background: #fafbfc;
    }

/* Label "Cerca:" — spazio tra testo e campo */
.aw-table-card .dt-search label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--aw-muted);
    white-space: nowrap;
}

/* Campo search */
.aw-table-card .dt-search input {
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    padding: .3rem .65rem;
    font-size: .82rem;
    color: var(--aw-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .aw-table-card .dt-search input:focus {
        border-color: var(--aw-accent);
        box-shadow: 0 0 0 .2rem rgba(47,128,237,.15);
    }

/* Select "Mostra N elementi" */
.aw-table-card .dt-length label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--aw-muted);
}

.aw-table-card .dt-length select {
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    padding: .25rem .5rem;
    font-size: .82rem;
    color: var(--aw-text);
}

/* Testo info risultati */
.aw-table-card .dt-info {
    font-size: .78rem;
    color: var(--aw-muted);
}



/* ══════════════════════════════════════════════════════════════════════
   MODALI — usare queste classi in tutte le modali con form dell'applicazione.
   ══════════════════════════════════════════════════════════════════════ */

.modal-header {
    justify-content: space-between;
}

/* Contenitore verticale del contenuto nel modal-body */
.aw-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Footer pulsanti modale */
.aw-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0 0;
}

/* Label campi form nelle modali — grassetto standard */
.aw-modal-form .form-label,
.aw-modal-form label.form-label {
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .3rem;
    color: var(--aw-text);
}

/* Griglia 2 colonne nei form delle modali (collassa a 1 su mobile) */
.aw-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1.25rem;
}

/* Correzione scroll modal-body su mobile (sopra bottom nav) */
@media (max-width: 767.98px) {
    .modal-dialog-scrollable .modal-body {
        max-height: calc(100dvh - var(--bottom-nav-h, 60px) - 130px);
        overflow-y: auto;
    }

    .aw-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE STATO — usati in tutte le sezioni
   ═══════════════════════════════════════════════════════════════════════════ */

.aw-stato-badge {
    display: inline-flex;
    align-items: center;
    padding: .18em .65em;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.aw-stato-neutral {
    background: #f1f5f9;
    color: var(--aw-muted);
    border-color: var(--aw-border);
}

.aw-stato-success {
    background: rgba(26,122,94,.1);
    color: var(--aw-success);
    border-color: rgba(26,122,94,.25);
}

.aw-stato-warning {
    background: var(--aw-warning-bg);
    color: #92400e;
    border-color: var(--aw-warning-bd);
}

.aw-stato-info {
    background: rgba(47,128,237,.08);
    color: var(--aw-accent);
    border-color: rgba(47,128,237,.2);
}

.aw-stato-danger {
    background: rgba(185,28,28,.08);
    color: var(--aw-danger);
    border-color: rgba(185,28,28,.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BADGE RUOLO — usato in referenti, ricerca e altre pagine con referenti
   ═══════════════════════════════════════════════════════════════════════════ */

.aw-role-badge {
    display: inline-block;
    padding: .15em .6em;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(47,128,237,.09);
    color: var(--aw-accent);
    border: 1px solid rgba(47,128,237,.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE APPLICAZIONE — usati in log, rinnovi e altre sezioni
   ═══════════════════════════════════════════════════════════════════════════ */

.aw-app-badge {
    display: inline-block;
    padding: .15em .5em;
    border-radius: .3em;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
}

    .aw-app-badge.aw-app-ew {
        background-color: #c11e24;
    }

    .aw-app-badge.aw-app-pw {
        background-color: #3b6ebf;
    }

    .aw-app-badge:not(.aw-app-ew):not(.aw-app-pw) {
        background-color: var(--aw-muted);
    }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM — componenti globali
   ═══════════════════════════════════════════════════════════════════════════ */

.aw-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--aw-text);
    margin-bottom: .3rem;
    display: block;
}

.aw-field {
    display: flex;
    flex-direction: column;
}

.aw-form-hint {
    font-size: .78rem;
    color: var(--aw-muted);
    margin-bottom: 1rem;
}

.aw-form-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.aw-form-actions-separator {
    flex: 1;
}

form.aw-modal-form {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .aw-form-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .15rem; /* evita che la scrollbar tagli i bottoni */
    }

    .aw-form-actions-separator {
        display: none; /* su mobile il separatore sparisce */
    }

    .aw-form-actions .button {
        white-space: nowrap;
        flex-shrink: 0;
        padding-left: .75rem;
        padding-right: .75rem;
        font-size: .82rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CARD — card con header per sezioni di form
   Globale: usato in Account, Anagrafiche (ag-form-card-*), Amministrazione.
   TODO: unificare ag-form-card-* e am-* in un refactor dedicato,
         verificando sovrapposizioni in anagrafiche.css e amministrazione.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.aw-form-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    overflow: hidden;
}

.aw-form-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--aw-border);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--aw-muted);
}

    .aw-form-card-header i {
        font-size: .85rem;
    }

    .aw-form-card-header a {
        text-transform: none;
        letter-spacing: normal;
    }

.aw-form-card-body {
    padding: 1.1rem;
}

.aw-form-hint {
    font-size: .82rem;
    color: var(--aw-muted);
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   DataTables — layout globale con dom: '<"dt-top-row"lf>t<"dt-bot-row"ip>'
   Usato da tutte le sezioni (anagrafiche, log, ecc.)
   ══════════════════════════════════════════════════════════════════════ */

.aw-table-card .dt-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-bottom: 1px solid var(--aw-border);
    background: #fafbfc;
}

.aw-table-card .dt-bot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--aw-border);
    background: #fafbfc;
}

.aw-table-card .dt-top-row .dt-length label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--aw-muted);
    white-space: nowrap;
}

.aw-table-card .dt-top-row .dt-length select {
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    padding: .25rem 1.6rem .25rem .5rem;
    font-size: .82rem;
    color: var(--aw-text);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: .85em;
}

.aw-table-card .dt-top-row .dt-search {
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .aw-table-card .dt-top-row .dt-search label {
        font-size: .8rem;
        color: var(--aw-muted);
        white-space: nowrap;
        margin: 0;
    }

    .aw-table-card .dt-top-row .dt-search input {
        border: 1px solid var(--aw-border);
        border-radius: var(--aw-radius-sm);
        padding: .3rem .65rem;
        font-size: .82rem;
        color: var(--aw-text);
        outline: none;
        transition: border-color .15s, box-shadow .15s;
        width: 200px;
    }

        .aw-table-card .dt-top-row .dt-search input:focus {
            border-color: var(--aw-accent);
            box-shadow: 0 0 0 .2rem rgba(47,128,237,.15);
        }

.aw-table-card .dt-bot-row .dt-info {
    font-size: .78rem;
    color: var(--aw-muted);
}

.aw-table-card .dt-bot-row .dt-paging .page-link {
    border: 1px solid var(--aw-border);
    color: var(--aw-text);
    background: var(--aw-surface);
    font-size: .78rem;
    padding: .3rem .6rem;
    border-radius: var(--aw-radius-sm) !important;
    margin: 0 .1rem;
    transition: background var(--aw-transition), color var(--aw-transition);
    line-height: 1.4;
}

    .aw-table-card .dt-bot-row .dt-paging .page-link:hover {
        background: #f0f4f8;
        color: var(--aw-accent);
        border-color: var(--aw-accent);
    }

.aw-table-card .dt-bot-row .dt-paging .page-item.active .page-link {
    background: var(--aw-accent);
    border-color: var(--aw-accent);
    color: #fff;
    font-weight: 600;
}

.aw-table-card .dt-bot-row .dt-paging .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

/* Scroll orizzontale solo sulla tabella, header/footer fissi */
.aw-table-card .dt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile */
@media (max-width: 575.98px) {

    .aw-table-card .dt-top-row {
        flex-direction: column;
        align-items: stretch;
        padding: .5rem .75rem;
        gap: .4rem;
    }

        .aw-table-card .dt-top-row .dt-search {
            width: 100%;
        }

            .aw-table-card .dt-top-row .dt-search input {
                width: 100%;
                flex: 1;
            }

    .aw-table-card .dt-bot-row {
        flex-direction: column;
        align-items: center;
        padding: .5rem .75rem;
        gap: .4rem;
        text-align: center;
    }

        .aw-table-card .dt-bot-row .dt-paging {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .15rem;
        }

    .aw-table-card .dt-table-scroll table thead th,
    .aw-table-card .dt-table-scroll table tbody td {
        padding: .45rem .6rem;
        font-size: .8rem;
    }
}

/* Allineamento celle tabella con i controlli dt-top-row / dt-bot-row */
.aw-table-card .dt-table-scroll table thead th:first-child,
.aw-table-card .dt-table-scroll table tbody td:first-child {
    padding-left: 1.1rem;
}

.aw-table-card .dt-table-scroll table thead th:last-child,
.aw-table-card .dt-table-scroll table tbody td:last-child {
    padding-right: 1.1rem;
}

@media (max-width: 575.98px) {
    .aw-table-card .dt-table-scroll table thead th:first-child,
    .aw-table-card .dt-table-scroll table tbody td:first-child {
        padding-left: .75rem;
    }

    .aw-table-card .dt-table-scroll table thead th:last-child,
    .aw-table-card .dt-table-scroll table tbody td:last-child {
        padding-right: .75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   PANNELLO FILTRI + RISULTATI — componenti globali aw-*
   Migrati da referenti-contatti.css — usabili in qualsiasi sezione.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Layout desktop ─────────────────────────────────────────────────────────── */
.aw-search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.aw-filters-panel {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
}

/* ── FAB mobile (nascosto su desktop) ───────────────────────────────────────── */
.aw-search-fab {
    display: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .aw-search-layout {
        grid-template-columns: 1fr;
    }

    /* Il pannello filtri diventa un bottom sheet */
    .aw-filters-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 1060;
        max-height: calc(85vh - var(--bottom-nav-h, 60px));
        background: #fff;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.15);
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .aw-filters-panel.open {
            transform: translateY(0);
        }

    .aw-filters-inner {
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
    }

    /* FAB visibile su mobile */
    .aw-search-fab {
        display: flex;
        align-items: center;
        gap: .4rem;
        position: fixed;
        bottom: calc(var(--bottom-nav-h) + 1rem);
        right: 1rem;
        z-index: 1055;
        background: var(--aw-dark);
        color: #fff;
        border: none;
        border-radius: 2rem;
        padding: .6rem 1.1rem .6rem .9rem;
        font-size: .82rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0,0,0,.22);
        cursor: pointer;
        transition: background .18s ease, transform .15s ease;
    }

        .aw-search-fab:active {
            transform: scale(.95);
        }

        .aw-search-fab i {
            font-size: 1rem;
        }

    .aw-search-fab-badge {
        position: absolute;
        top: -.25rem;
        right: -.25rem;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        background: var(--aw-accent);
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 .3em;
        border: 2px solid #fff;
    }

    /* Backdrop */
    .aw-search-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        backdrop-filter: blur(2px);
        z-index: 1055;
    }

        .aw-search-backdrop.show {
            display: block;
        }
}

/* ── Pannello filtri ─────────────────────────────────────────────────────────── */
.aw-filters-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    overflow: hidden;
}

.aw-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--aw-border);
    background: #fafbfc;
    cursor: pointer;
    user-select: none;
}

.aw-filters-header-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--aw-muted);
}

.aw-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--aw-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 0 .3em;
    transition: opacity .15s ease, transform .15s ease;
}

    .aw-filters-badge.hidden {
        opacity: 0;
        transform: scale(.6);
        pointer-events: none;
    }

.aw-filters-chevron {
    font-size: .75rem;
    color: var(--aw-muted-light);
    transition: transform .25s ease;
}

.aw-filters-card.collapsed .aw-filters-chevron {
    transform: rotate(-180deg);
}

/* ── Corpo filtri ────────────────────────────────────────────────────────────── */
.aw-filters-body {
    padding: 1.1rem;
    overflow: visible;
    transition: max-height .3s ease, opacity .25s ease;
    max-height: 2000px;
    opacity: 1;
}

.aw-filters-card.collapsed .aw-filters-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Handle drag mobile (bottom sheet) ──────────────────────────────────────── */
.aw-filters-drag-handle {
    display: none;
    width: 36px;
    height: 4px;
    background: var(--aw-border);
    border-radius: 2px;
    margin: .75rem auto .25rem;
    flex-shrink: 0;
}

/* ── Separatori sezioni ─────────────────────────────────────────────────────── */
.aw-filters-section + .aw-filters-section {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--aw-border);
}

.aw-filters-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--aw-muted-light);
    margin-bottom: .65rem;
}

/* ── Form controls nel pannello filtri ───────────────────────────────────────── */
.aw-filters-body .form-control,
.aw-filters-body .form-select {
    font-size: .84rem;
    border-color: var(--aw-border);
    border-radius: var(--aw-radius-sm);
    color: var(--aw-text);
}

    .aw-filters-body .form-control:focus,
    .aw-filters-body .form-select:focus {
        border-color: var(--aw-accent);
        box-shadow: 0 0 0 .2rem rgba(47,128,237,.15);
    }

/* ── Checkbox / radio opzioni filtro ─────────────────────────────────────────── */
.ruolo-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: var(--aw-radius-sm);
    cursor: pointer;
    transition: background .15s ease;
    margin-bottom: .15rem;
}

    .ruolo-item:hover {
        background: #f0f5ff;
    }

    .ruolo-item:last-child {
        margin-bottom: 0;
    }

    .ruolo-item input[type="checkbox"],
    .ruolo-item input[type="radio"] {
        width: 15px;
        height: 15px;
        accent-color: var(--aw-accent);
        cursor: pointer;
        flex-shrink: 0;
    }

    .ruolo-item label {
        font-size: .82rem;
        color: var(--aw-text);
        cursor: pointer;
        margin: 0;
        line-height: 1.3;
    }

/* ── Reset / Applica ────────────────────────────────────────────────────────── */
.aw-filters-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    padding: .5rem;
    margin-top: 1.1rem;
    border-radius: var(--aw-radius-sm);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(185,28,28,.3);
    background: rgba(185,28,28,.04);
    color: var(--aw-danger);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .aw-filters-reset:hover {
        background: var(--aw-danger);
        border-color: var(--aw-danger);
        color: #fff;
    }

.aw-filters-apply {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    padding: .65rem;
    margin-top: 1rem;
    border-radius: var(--aw-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--aw-dark);
    color: #fff;
    transition: background .15s ease;
}

    .aw-filters-apply:hover {
        background: var(--aw-dark-hover);
    }

@media (max-width: 768px) {
    .aw-filters-card {
        overflow: visible;
    }

    .aw-filters-drag-handle {
        display: block;
    }

    .aw-filters-apply {
        display: flex;
    }

    /* Su mobile il collasso non serve */
    .aw-filters-header {
        display: none;
    }

    .aw-filters-body {
        padding: 1.1rem 1.1rem 0 1.1rem;
    }

    .aw-filters-card.collapsed .aw-filters-body {
        max-height: 2000px;
        opacity: 1;
        padding: 1.1rem;
    }
}

/* ── Card risultati ─────────────────────────────────────────────────────────── */
.aw-results-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow);
    overflow: hidden;
}

.aw-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--aw-border);
    background: #fafbfc;
}

.aw-results-count {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--aw-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .aw-results-count strong {
        color: var(--aw-text);
        font-weight: 700;
    }

.aw-results-page-info {
    font-size: .75rem;
    color: var(--aw-muted-light);
}
/* ── Paginazione risultati — componente globale ──────────────────────────────── */

.aw-results-pagination {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--aw-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.aw-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border-radius: var(--aw-radius-sm);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--aw-border);
    background: transparent;
    color: var(--aw-muted);
    text-decoration: none;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}

    .aw-page-btn:hover:not(:disabled):not(.active) {
        background: #f0f4f8;
        color: var(--aw-text);
    }

    .aw-page-btn.active {
        background: var(--aw-dark);
        border-color: var(--aw-dark);
        color: #fff;
        cursor: default;
    }

    .aw-page-btn:disabled,
    .aw-page-btn.disabled {
        opacity: .4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .aw-page-btn.ellipsis {
        border: none;
        cursor: default;
        color: var(--aw-muted-light);
    }

/* ── Wrapper azioni filtri ────────────────────────────────────────────────── */
.filters-actions {
    display: contents; /* desktop: wrapper invisibile */
}

@media (max-width: 768px) {
    .filters-actions {
        display: flex;
        flex-direction: column;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--aw-surface);
        border-top: 1px solid var(--aw-border);
        margin: 0 -1.1rem;
    }

        .filters-actions .aw-filters-reset {
            margin: 0;
            width: 100%;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--aw-border);
        }

        .filters-actions .aw-filters-apply {
            display: flex;
            margin: 0;
            width: 100%;
            border-radius: 0;
            padding-bottom: .65rem;
        }

            .filters-actions .aw-filters-apply:hover {
                background: #f0f4f8;
            }

    /* Bottom sheet filtri: si ferma sopra la bottom nav */
    .aw-filters-panel {
        bottom: var(--bottom-nav-h, 60px);
    }

    /* filtersActionsPortal: contenitore nel panel, fuori dallo scroll */
    #filtersActionsPortal {
        flex-shrink: 0;
    }

        /* filters-actions spostato nel portal via JS — non più sticky */
        #filtersActionsPortal .filters-actions {
            display: flex;
            flex-direction: column;
            position: static; /* non sticky — è già fuori dallo scroll */
            background: var(--aw-surface);
            border-top: 1px solid var(--aw-border);
            margin: 0;
        }

        #filtersActionsPortal .aw-filters-reset {
            margin: 0;
            width: 100%;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--aw-border);
        }

        #filtersActionsPortal .aw-filters-apply {
            display: flex;
            margin: 0;
            width: 100%;
            border-radius: 0;
            padding-bottom: .65rem;
        }

    .aw-filters-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .aw-filters-body {
        margin-bottom: 0.5rem;
    }
}

/* ── Select2 — allineamento al design system ─────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--aw-border);
    border-radius: var(--aw-radius-sm);
    font-size: .875rem;
    color: var(--aw-text);
    min-height: 38px;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    padding: .25rem .5rem;
}

    .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__choice {
        background-color: var(--aw-surface-alt, #f0f4f8);
        border: 1px solid var(--aw-border);
        border-radius: var(--aw-radius-sm);
        color: var(--aw-text);
        font-size: .8rem;
        padding: .1em .5em;
    }

    .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__choice__remove {
        color: var(--aw-muted);
    }

        .select2-container--bootstrap-5 .select2-selection--multiple
        .select2-selection__choice__remove:hover {
            color: var(--aw-danger);
            background: transparent;
        }

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--aw-border);
    border-radius: var(--aw-radius-sm);
    box-shadow: var(--aw-shadow);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--aw-accent);
}

.select2-container--bootstrap-5.select2-container--focus
.select2-selection {
    border-color: var(--aw-accent);
    box-shadow: 0 0 0 .2rem rgba(47,128,237,.15);
}


/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD — componenti condivisi tra Anagrafiche, Referenti, Clienti
   Prefisso: aw-db-*
   ══════════════════════════════════════════════════════════════════════ */

/* ── KPI card ──────────────────────────────────────────────────────── */

.aw-db-kpi-card {
    border-top: 3px solid transparent;
    transition: transform .15s, box-shadow .15s;
}

    .aw-db-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
    }

.aw-db-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Card anomalia ─────────────────────────────────────────────────── */

.aw-db-anomalia-card {
    cursor: pointer;
    border: 2px solid #f5c6c0;
    transition: border-color .15s, transform .15s;
    color: var(--aw-text);
    text-decoration: none;
}

    .aw-db-anomalia-card:hover {
        transform: translateY(-1px);
        color: var(--aw-text);
        text-decoration: none;
    }

    .aw-db-anomalia-card.active {
        border-color: #dc3545;
        background-color: #fff5f5;
    }

/* Variante warning (rivenditori, anomalie non critiche) */
.aw-db-anomalia-card-warning {
    border-color: #fde68a;
}

    .aw-db-anomalia-card-warning.active {
        border-color: var(--aw-warning);
        background-color: var(--aw-warning-bg);
    }

.aw-db-anomalia-count {
    font-size: 1.75rem;
    font-weight: 800;
    color: #dc3545;
}

.aw-db-anomalia-count-warning {
    color: var(--aw-warning);
}

.aw-db-anomalia-count-zero {
    color: #198754;
}

/* ── Lista anomalie espandibile ────────────────────────────────────── */

.aw-db-anomalia-list {
    display: none;
    margin-bottom: .75rem;
}

    .aw-db-anomalia-list.show {
        display: block;
    }

.aw-db-anomalia-list-item {
    transition: background var(--aw-transition);
    cursor: pointer;
}

    .aw-db-anomalia-list-item:hover {
        background-color: #fff5f5;
    }

    .aw-db-anomalia-list-item:last-child {
        border-bottom: none !important;
    }

/* ── Barra completezza ─────────────────────────────────────────────── */

.aw-db-completezza-bar {
    height: 5px;
    border-radius: 99px;
    background: #e9ecef;
}

    .aw-db-completezza-bar .fill {
        height: 100%;
        border-radius: 99px;
        transition: width .4s ease;
    }

.aw-db-completezza-bar-lg {
    height: 8px;
    border-radius: 99px;
    background: #e9ecef;
}

    .aw-db-completezza-bar-lg .fill {
        height: 100%;
        border-radius: 99px;
        transition: width .6s ease;
    }

/* ── Ricerca rapida dropdown ───────────────────────────────────────── */

.aw-db-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--aw-border);
    border-top: none;
    border-radius: 0 0 var(--aw-radius-sm) var(--aw-radius-sm);
    box-shadow: var(--aw-shadow);
    z-index: 200;
    max-height: 380px;
    overflow-y: auto;
    display: none;
}

    .aw-db-search-dropdown.show {
        display: block;
    }

.aw-db-search-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--aw-border);
    cursor: pointer;
    transition: background var(--aw-transition);
    color: var(--aw-text);
    text-decoration: none;
}

    .aw-db-search-item:last-child {
        border-bottom: none;
    }

    .aw-db-search-item:hover {
        background: #f0f4ff;
        color: var(--aw-text);
        text-decoration: none;
    }

/* ── Drawer laterale ───────────────────────────────────────────────── */

.aw-db-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

    .aw-db-drawer-overlay.show {
        display: block;
    }

.aw-db-drawer-panel {
    position: fixed;
    top: var(--topbar-h);
    right: -420px;
    bottom: 0;
    width: 400px;
    background: #fff;
    z-index: 1045;
    box-shadow: -4px 0 32px rgba(0, 0, 0, .15);
    transition: right .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .aw-db-drawer-panel.show {
        right: 0;
    }

    .aw-db-drawer-panel > div:first-child {
        flex-shrink: 0; /* header titolo+X sempre visibile, non compresso dal body */
    }

.aw-db-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* impedisce lo scroll orizzontale */
    padding: 1.25rem 1.5rem;
}

.aw-db-drawer-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--aw-border);
}

.aw-db-drawer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Lista anomalie espandibile — mobile ────────────────────────────── */
/* Su schermi stretti i badge traboccano: si spostano sotto il nome su colonna */
@media (max-width: 575.98px) {
    .aw-db-anomalia-list-item {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }

        .aw-db-anomalia-list-item > .cl-stato-dot,
        .aw-db-anomalia-list-item > span.cl-stato-dot {
            margin-top: .35rem;
        }

        .aw-db-anomalia-list-item > div.flex-grow-1 {
            flex: 1 1 60%;
            min-width: 0;
        }

        .aw-db-anomalia-list-item > div[style*="min-width"] {
            flex: 1 1 100%;
            min-width: 0 !important;
            justify-content: flex-start !important;
            margin-top: .3rem;
        }
}

/* ── Rank bar (dashboard Referenti — top referenti per attività) ───── */

.aw-db-rank-bar {
    height: 6px;
    border-radius: 99px;
    background: #e9ecef;
    flex-grow: 1;
}

    .aw-db-rank-bar .fill {
        height: 100%;
        border-radius: 99px;
        background: #6f42c1;
    }

@media (max-width: 575.98px) {
    .aw-db-drawer-panel {
        width: 100%;
        right: -100%;
        bottom: var(--bottom-nav-h, 64px); /* non copre la bottom nav */
    }

    .aw-db-drawer-body {
        padding: 1rem; /* padding ridotto su mobile */
    }
}



/* ══════════════════════════════════════════════════════════════════════
   ALERT ANOMALIE
   ══════════════════════════════════════════════════════════════════════ */

.aw-anomalie-banner {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1.1rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-left: 4px solid #f59e0b;
    border-radius: var(--aw-radius);
    margin-bottom: 1rem;
}

    .aw-anomalie-banner i {
        color: #f59e0b;
        font-size: 1.1rem;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .aw-anomalie-banner ul {
        margin: 0;
        padding: 0 0 0 1.1rem;
    }

    .aw-anomalie-banner li {
        font-size: .82rem;
        color: #5d4037;
        margin-bottom: .15rem;
    }

        .aw-anomalie-banner li:last-child {
            margin-bottom: 0;
        }

/* ══════════════════════════════════════════════════════════════════════
   ── DETTAGLIO REFERENTE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Layout sidebar + main ─────────────────────────────────────────────────── */
.rc-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .rc-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Sidebar sticky ────────────────────────────────────────────────────────── */
.rc-sidebar {
    position: sticky;
    top: 1rem;
}

/* ── Identity hero ─────────────────────────────────────────────────────────── */
.rc-hero {
    padding: 1.75rem 1.25rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--aw-border);
}

.rc-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--aw-dark);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
    margin-bottom: .9rem;
    box-shadow: 0 2px 8px rgba(30,45,61,.2);
}

.rc-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--aw-text);
    margin-bottom: .25rem;
    line-height: 1.3;
}

.rc-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-top: .6rem;
}

/* ── Badge archiviato ──────────────────────────────────────────────────────── */
.rc-archived {
    margin: .75rem 1.1rem 0;
    padding: .55rem .85rem;
    border-radius: var(--aw-radius-sm);
    background: rgba(185,28,28,.07);
    border: 1px solid rgba(185,28,28,.2);
    color: var(--aw-danger);
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Azioni sidebar ────────────────────────────────────────────────────────── */
.rc-actions {
    padding: .9rem 1.1rem;
}

.rc-btn-action {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .85rem;
    border-radius: var(--aw-radius-sm);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--aw-transition), box-shadow var(--aw-transition);
    text-decoration: none;
    border: 1px solid var(--aw-border);
    background: var(--aw-surface);
    color: var(--aw-text);
    margin-bottom: .45rem;
}

    .rc-btn-action:last-child {
        margin-bottom: 0;
    }

    .rc-btn-action:hover {
        background: #f0f4f8;
        color: var(--aw-text);
    }

    .rc-btn-action.primary {
        background: var(--aw-dark);
        border-color: var(--aw-dark);
        color: #fff;
    }

        .rc-btn-action.primary:hover {
            background: var(--aw-dark-hover);
            border-color: var(--aw-dark-hover);
            color: #fff;
            box-shadow: 0 2px 8px rgba(30,45,61,.22);
        }

/* ══════════════════════════════════════════════════════════════════════
   ── LAYOUT DETTAGLIO ENTITÀ (aw-detail-*)
   Usato in: DettaglioCliente, DettaglioRivenditore, DettaglioReferente
   ══════════════════════════════════════════════════════════════════════ */

/* Layout principale: sidebar fissa a sinistra + colonna destra */
.aw-detail-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}

/* Colonna destra: card informative impilate, poi le card full-width sotto */
.aw-detail-main {
    min-width: 0;
}

/* Sidebar sticky */
.aw-detail-sidebar {
    position: sticky;
    top: 1rem;
}

/* ── Hero identity ──────────────────────────────────────────────────── */
.aw-detail-hero {
    padding: 1.75rem 1.25rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--aw-border);
}

.aw-detail-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--aw-dark);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
    margin-bottom: .85rem;
    box-shadow: 0 2px 8px rgba(30,45,61,.2);
}

.aw-detail-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aw-text);
    margin-bottom: .2rem;
    line-height: 1.3;
}

.aw-detail-sub {
    font-size: .82rem;
    color: var(--aw-muted);
    margin-bottom: .2rem;
}

.aw-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-top: .6rem;
}

/* ── Badge archiviato nella sidebar ────────────────────────────────── */
.aw-detail-archived {
    margin: .75rem 1.1rem 0;
    padding: .5rem .85rem;
    border-radius: var(--aw-radius-sm);
    background: rgba(185,28,28,.07);
    border: 1px solid rgba(185,28,28,.2);
    color: var(--aw-danger);
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Azioni sidebar ─────────────────────────────────────────────────── */
.aw-detail-actions {
    padding: .9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.aw-detail-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .85rem;
    border-radius: var(--aw-radius-sm);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--aw-transition), box-shadow var(--aw-transition);
    text-decoration: none;
    border: 1px solid var(--aw-border);
    background: var(--aw-surface);
    color: var(--aw-text);
    text-align: left;
}

    .aw-detail-btn:hover {
        background: #f0f4f8;
        color: var(--aw-text);
        text-decoration: none;
    }

    .aw-detail-btn.primary {
        background: var(--aw-dark);
        border-color: var(--aw-dark);
        color: #fff;
    }

        .aw-detail-btn.primary:hover {
            background: var(--aw-dark-hover);
            border-color: var(--aw-dark-hover);
            color: #fff;
            box-shadow: 0 2px 8px rgba(30,45,61,.22);
        }

    .aw-detail-btn.warning {
        color: var(--aw-warning);
        border-color: color-mix(in srgb, var(--aw-warning) 35%, transparent);
    }

        .aw-detail-btn.warning:hover {
            background: color-mix(in srgb, var(--aw-warning) 8%, transparent);
        }

/* ── Griglia card informative (affiancate alla sidebar) ─────────────── */
.aw-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .aw-detail-layout {
        grid-template-columns: 1fr;
    }

    .aw-detail-sidebar {
        position: static;
    }

    .aw-detail-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .aw-detail-hero {
        padding: 1.25rem 1rem 1rem;
    }

    .aw-detail-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ── LAYOUT DETTAGLIO INTEGRAZIONI (partial condivise)
   ══════════════════════════════════════════════════════════════════════ */

/* Accordion generico */
.aw-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    cursor: pointer;
    user-select: none;
}

    .aw-accordion-header:hover {
        background: var(--aw-bg-hover, #f5f5f5);
    }

.aw-accordion-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .9rem;
}

    .aw-accordion-title i {
        color: var(--aw-primary);
    }

.aw-accordion-chevron {
    transition: transform .2s;
    color: var(--aw-muted);
}

.aw-accordion-header:not(.collapsed) .aw-accordion-chevron {
    transform: rotate(180deg);
}

.aw-accordion-body {
}

.aw-accordion-count {
    font-size: .75rem;
    background: var(--aw-border);
    border-radius: 999px;
    padding: .1em .55em;
    font-weight: 600;
}

.aw-accordion-external {
    color: var(--aw-muted);
}

/* Contenuto sezioni */
.aw-sezione-contenuto {
    padding: 1rem 1.1rem;
}

.aw-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: .5rem 0;
}

/* Costi */
.aw-costi-grid {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.aw-costo-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.aw-costo-label {
    color: var(--aw-muted);
    font-size: .875rem;
}

.aw-costo-valore {
    font-weight: 600;
}

.aw-costo-note {
    font-size: .82rem;
    font-weight: bold;
    border-top: 1px solid var(--aw-border);
    padding-top: .5rem;
    margin-top: .25rem;
}

/* Bottone copia recapito */
.aw-copy-btn {
    padding: .2rem .3rem;
    color: var(--aw-text-muted);
    vertical-align: middle;
    transition: color .15s;
}

    .aw-copy-btn:hover {
        color: var(--aw-primary);
    }

    .aw-copy-btn.copied {
        color: var(--aw-success);
    }

/* ── Note ──────────────────────────────────────────────────────────── */
.aw-note-testo {
    font-size: .88rem;
    color: var(--aw-text);
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.6;
}

.aw-empty-inline {
    font-size: .85rem;
    color: var(--aw-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ── BADGES GENERICI
   ══════════════════════════════════════════════════════════════════════ */

.aw-badge-success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.aw-badge-warning {
    background: #fff8e1;
    color: #b45309;
    border: 1px solid #facc15;
}

.aw-badge-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.aw-badge-info {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.aw-badge-ghost {
    background: #e9ecef;
    color: #6c757d;
    border: 1px solid #dee2e6;
}