/* Strumenti Acqua Vera - palette chiara da www.acquavera.eu ("Acqua Vera. Vita Vera.") */
:root {
    --vera-blue: #1437a2;          /* blu dei titoli e del menu del sito */
    --vera-blue-dark: #0f2a7d;
    --vera-green: #59b6a9;         /* "Vera." verde */
    --vera-green-dark: #2f8c7f;    /* verde leggibile su bianco */
    --vera-pink: #c4296d;          /* "Vera." rosa */
    --vera-pink-light: #fbe8f0;
    --vera-aqua: #89c0cc;          /* onde */
    --vera-aqua-light: #d5f0fc;
    --vera-aqua-soft: #edf8fe;
    --vera-bg: #e4f4fc;
    --vera-sky: #c9ebfb;
    --vera-bubble: #4c9dd8;
    --vera-bubble-dark: #2c68a4;
    --vera-red: #e4312c;
    --vera-text: #1d2f5e;
    --vera-muted: #56698c;
    --vera-border: #cfe6f2;

    --bs-font-sans-serif: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--vera-text);
    --bs-secondary-color: var(--vera-muted);
    --bs-primary: #1437a2;
    --bs-primary-rgb: 20, 55, 162;
    --bs-success: #2f8c7f;
    --bs-success-rgb: 47, 140, 127;
    --bs-link-color: #1437a2;
    --bs-link-color-rgb: 20, 55, 162;
    --bs-link-hover-color: #c4296d;
    --bs-link-hover-color-rgb: 196, 41, 109;
    --bs-border-color: #dde8ee;
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: 1rem;
    --sidebar-w: 250px;
    --sidebar-w-compact: 78px;
}

body { background: linear-gradient(180deg, var(--vera-sky) 0, var(--vera-bg) 320px, #eef8fd 100%) fixed; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.sidebar a:hover, .stat-card:hover, .btn:hover, .dropdown-item:hover, .nav-link:hover, .page-link:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--vera-blue); letter-spacing: -.01em; }
.min-w-0 { min-width: 0; }
.text-green { color: var(--vera-green-dark) !important; }
.text-pink { color: var(--vera-pink) !important; }

/* pulsanti */
.btn { font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--vera-blue); --bs-btn-border-color: var(--vera-blue);
    --bs-btn-hover-bg: var(--vera-blue-dark); --bs-btn-hover-border-color: var(--vera-blue-dark);
    --bs-btn-active-bg: var(--vera-blue-dark); --bs-btn-active-border-color: var(--vera-blue-dark);
    --bs-btn-disabled-bg: var(--vera-blue); --bs-btn-disabled-border-color: var(--vera-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--vera-blue); --bs-btn-border-color: #b9c6ea;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--vera-blue); --bs-btn-hover-border-color: var(--vera-blue);
    --bs-btn-active-bg: var(--vera-blue-dark); --bs-btn-active-border-color: var(--vera-blue-dark);
}
.btn-accent, .btn-pink {
    --bs-btn-color: #fff; --bs-btn-bg: var(--vera-pink); --bs-btn-border-color: var(--vera-pink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a5205a; --bs-btn-hover-border-color: #a5205a;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #a5205a;
}
.btn-green, .btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--vera-green); --bs-btn-border-color: var(--vera-green);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--vera-green-dark); --bs-btn-hover-border-color: var(--vera-green-dark);
}
.btn-outline-success { --bs-btn-color: var(--vera-green-dark); --bs-btn-border-color: #9fd3cb; --bs-btn-hover-bg: var(--vera-green); --bs-btn-hover-border-color: var(--vera-green); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--vera-muted); --bs-btn-border-color: #d3e0e6; --bs-btn-hover-bg: var(--vera-aqua-light); --bs-btn-hover-color: var(--vera-blue); --bs-btn-hover-border-color: var(--vera-aqua); }

/* badge stati: palette Vera */
.text-bg-info { background-color: var(--vera-aqua-light) !important; color: #1f6b7a !important; }
.text-bg-warning { background-color: #fff1d6 !important; color: #8a5a00 !important; }
.text-bg-success { background-color: #dff2ee !important; color: var(--vera-green-dark) !important; }
.text-bg-secondary { background-color: var(--vera-pink-light) !important; color: var(--vera-pink) !important; }
.text-bg-primary { background-color: var(--vera-blue) !important; }
.badge { font-weight: 600; }

.nav-pills { --bs-nav-pills-link-active-bg: var(--vera-blue); }
.nav-link { color: var(--vera-blue); }
.page-link { color: var(--vera-blue); }
.page-item.active .page-link { background: var(--vera-blue); border-color: var(--vera-blue); }
.form-check-input:checked { background-color: var(--vera-green); border-color: var(--vera-green); }
.form-control:focus, .form-select:focus { border-color: var(--vera-aqua); box-shadow: 0 0 0 .2rem rgba(137, 192, 204, .35); }
.card { border-radius: var(--bs-border-radius-lg); }
.shadow-sm { box-shadow: 0 1px 2px rgba(20, 55, 162, .06), 0 6px 18px rgba(20, 55, 162, .07) !important; }
.table { --bs-table-hover-bg: var(--vera-aqua-soft); }
.table-light { --bs-table-bg: #d5f0fc; --bs-table-color: var(--vera-blue); --bs-table-border-color: #b9e0f4; }
.dropdown-item.active, .dropdown-item:active { background: var(--vera-aqua-light); color: var(--vera-blue); }

/* ---------------------------------------------------------------- shell con menu laterale chiaro */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 1.5rem 1.75rem 2.5rem; }

.sidebar {
    --bs-offcanvas-width: var(--sidebar-w);
    --bs-offcanvas-bg: var(--vera-bubble-dark);
    background-color: var(--vera-bubble-dark);
    /* bolle come nelle immagini dei prodotti Vera */
    background-image:
        radial-gradient(circle at 85% 88%, rgba(183, 231, 251, .35) 0 46px, transparent 47px),
        radial-gradient(circle at 18% 78%, rgba(143, 212, 245, .22) 0 24px, transparent 25px),
        radial-gradient(circle at 92% 42%, rgba(143, 212, 245, .14) 0 34px, transparent 35px),
        radial-gradient(circle at 8% 30%, rgba(183, 231, 251, .12) 0 16px, transparent 17px),
        linear-gradient(180deg, #1f5a9e 0%, var(--vera-bubble-dark) 35%, var(--vera-bubble) 100%);
    border-right: 0;
    color: #fff;
    display: flex; flex-direction: column; transition: width .2s;
}
@media (min-width: 992px) {
    .sidebar { width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; }

    /* menu compatto: solo icone */
    .sidebar-compact .sidebar { width: var(--sidebar-w-compact); }
    .sidebar-compact .sidebar-brand { justify-content: center; padding: 1rem .5rem; }
    .sidebar-compact .sidebar-logo { width: 46px; }
    .sidebar-compact .sidebar-brand-text, .sidebar-compact .sidebar-label, .sidebar-compact .sidebar-user-text, .sidebar-compact .sidebar-collapse span { display: none; }
    .sidebar-compact .sidebar-collapse { justify-content: center; }
    .sidebar-compact .sidebar-collapse i { transform: rotate(180deg); }
    .sidebar-compact .sidebar-nav { padding: .5rem .6rem 1rem; }
    .sidebar-compact .sidebar-section { padding: 0; margin: .65rem .4rem; border-top: 1px solid rgba(255, 255, 255, .25); }
    .sidebar-compact .sidebar-section span { display: none; }
    .sidebar-compact .sidebar-link { justify-content: center; padding: .65rem 0; position: relative; }
    .sidebar-compact .sidebar-link i { font-size: 1.25rem; }
    .sidebar-compact .sidebar-badge { position: absolute; top: 3px; right: 4px; font-size: .62rem; padding: .05rem .32rem; min-width: 0; }
    .sidebar-compact .sidebar-user { flex-direction: column; gap: .4rem; margin: .5rem; padding: .55rem .3rem; }
}
.sidebar-brand { display: flex; align-items: center; padding: 1.1rem 1.25rem 1rem; }
.sidebar-logo { width: 56px; height: auto; }
.sidebar-brand-text { color: #fff; font-weight: 700; font-size: 1.3rem; line-height: 1.05; }
.sidebar-brand-text small { display: block; font-weight: 600; font-size: .95rem; color: #fff; }
.sidebar-brand-text small .tc-green { color: #9fe0d4; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .85rem 1rem; }
.sidebar-section { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #bfe6fb; padding: 1rem .85rem .4rem; }
.sidebar-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .62rem .9rem; margin-bottom: .15rem; border-radius: .75rem;
    color: rgba(255, 255, 255, .92); text-decoration: none; font-weight: 500; font-size: .98rem;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; color: #fff; opacity: .85; }
.sidebar-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar-link.active { background: #fff; color: var(--vera-blue); font-weight: 600; box-shadow: inset 4px 0 0 var(--vera-pink), 0 4px 14px rgba(15, 42, 125, .25); }
.sidebar-link.active i { opacity: 1; color: var(--vera-pink); }
.sidebar-badge { margin-left: auto; background: var(--vera-pink); color: #fff; font-size: .72rem; font-weight: 600; border-radius: 1rem; padding: .12rem .5rem; min-width: 1.5rem; text-align: center; }
.sidebar-badge-soft { background: rgba(255, 255, 255, .25); }
.sidebar-user { display: flex; align-items: center; gap: .75rem; margin: .5rem .85rem 1rem; padding: .65rem .75rem; border-radius: .9rem; background: rgba(255, 255, 255, .88); backdrop-filter: blur(4px); box-shadow: 0 4px 14px rgba(20, 55, 162, .08); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--vera-green); color: #fff; font-weight: 600; }
.sidebar-user-name { color: var(--vera-blue); font-weight: 600; }
.sidebar-user-role { font-size: .78rem; color: var(--vera-muted); }
.sidebar-logout { color: var(--vera-bubble-dark); font-size: 1.25rem; }
.sidebar-logout:hover { color: var(--vera-pink); }

.topbar { display: flex; align-items: center; gap: .75rem; background: #fff; padding: .9rem 1.75rem; position: sticky; top: 0; z-index: 1010; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--vera-blue) 0%, var(--vera-green) 40%, var(--vera-aqua) 70%, var(--vera-pink) 100%); opacity: .85; }
.topbar-toggle { font-size: 1.45rem; color: var(--vera-blue); padding: .1rem .35rem; border-radius: .5rem; }
.topbar-toggle:hover { background: var(--vera-aqua-light); color: var(--vera-pink); }
.topbar-crumbs { font-size: .9rem; color: var(--vera-muted); }
.topbar-crumbs a { color: var(--vera-muted); }
.topbar-crumbs a:hover { color: var(--vera-pink); }
.topbar-title { font-size: 1.6rem; font-weight: 700; color: var(--vera-blue); margin: 0; }
/* titoli bicolore come sul sito: "Acqua Vera." / "Vita Vera." */
.tc-green { color: var(--vera-green); }
.tc-pink { color: var(--vera-pink); }
.tc-dot { color: var(--vera-blue); }
.sidebar-brand-text small .tc-dot { color: #fff; }

/* pulsante riduci/espandi in fondo al menu */
.sidebar-collapse { display: flex; align-items: center; gap: .6rem; width: calc(100% - 1.7rem); margin: 0 .85rem; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: .7rem; background: rgba(255, 255, 255, .1); color: #fff; font-size: .85rem; }
.sidebar-collapse:hover { background: rgba(255, 255, 255, .22); }
.sidebar-collapse i { transition: transform .2s; }

@media (max-width: 991.98px) {
    .app-content { padding: 1.25rem 1rem 2rem; }
    .topbar { padding: .75rem 1rem; }
    .topbar-title { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------- login */
.login-page {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 150C240 60 420 260 720 170S1200 40 1440 90V320H0Z' fill='%23e3f2f5'/%3E%3Cpath d='M0 210C260 130 460 300 760 220S1220 120 1440 160V320H0Z' fill='%23b9dce3'/%3E%3Cpath d='M0 260C300 200 500 320 800 270S1250 210 1440 230V320H0Z' fill='%2389c0cc'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: bottom; background-size: 100% 38vh;
}
.login-logo { width: 120px; }
.login-title { color: var(--vera-blue); font-size: 2.4rem; font-weight: 700; }
.login-sub { color: var(--vera-muted); }
.login-help { color: var(--vera-muted); }

/* ---------------------------------------------------------------- KPI e cruscotto */
.kpi .kpi-label { font-size: .78rem; color: var(--vera-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--vera-blue); }
.kpi .kpi-value-sm { font-size: clamp(1.15rem, 1.5vw, 1.45rem); white-space: nowrap; }
.kpi .kpi-sub { font-size: .8rem; color: var(--vera-muted); }
.kpi { border-left: 4px solid var(--vera-blue) !important; }
.kpi-aqua { border-left-color: var(--vera-aqua) !important; }
.kpi-pink { border-left-color: var(--vera-pink) !important; }
.kpi-danger { border-left-color: var(--vera-pink) !important; }
.kpi-danger .kpi-value { color: var(--vera-pink); }
.kpi-success { border-left-color: var(--vera-green) !important; }
.kpi-success .kpi-value { color: var(--vera-green-dark); }
.kpi-warning { border-left-color: #f2b544 !important; }

.stat-card { border: 1px solid var(--vera-border); border-radius: 1.1rem; background: #fff; padding: 1.35rem; height: 100%; display: block; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 55, 162, .08); color: inherit; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: .85rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: .85rem; }
.kpi-grid .card-body { padding: .9rem 1rem; }
.stat-card .stat-value { font-size: clamp(1.7rem, 2.2vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--vera-blue); font-variant-numeric: tabular-nums; }
.stat-card .stat-label { color: var(--vera-muted); margin-top: .4rem; }
.stat-card.stat-feature { background: radial-gradient(circle at 85% 20%, rgba(183, 231, 251, .45) 0 28px, transparent 29px), linear-gradient(135deg, var(--vera-bubble-dark) 0%, var(--vera-bubble) 100%); border-color: transparent; }
.stat-card.stat-feature .stat-value, .stat-card.stat-feature .stat-label { color: #fff; }
.stat-card.stat-feature .stat-icon { background: rgba(255, 255, 255, .25); color: #fff; }
.ic-blue { background: #e7ecfa; color: var(--vera-blue); }
.ic-magenta, .ic-pink { background: var(--vera-pink-light); color: var(--vera-pink); }
.ic-aqua { background: var(--vera-aqua-light); color: #3e8a9a; }
.ic-amber { background: #fff1d6; color: #b7791f; }
.ic-green { background: #dff2ee; color: var(--vera-green-dark); }
.ic-red { background: #fde5e4; color: var(--vera-red); }
.stat-value.text-danger { color: var(--vera-red) !important; }

.alert-attention { background: var(--vera-pink-light); border: 1px solid #f3c6d9; color: #7a1844; border-radius: 1rem; }
.alert-attention .bi { color: var(--vera-pink); }

.app-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--vera-aqua-light); color: var(--vera-blue); font-size: 1.5rem;
}

/* ---------------------------------------------------------------- elenco pratiche */
.tipo-tabs .nav-link { border-bottom-color: transparent; color: var(--vera-muted); }
.tipo-tabs .nav-link.active { background: #fff; font-weight: 600; color: var(--vera-blue); box-shadow: inset 0 3px 0 var(--vera-green); }
.pratiche-table thead th { white-space: nowrap; font-weight: 600; }
.pratiche-table td { padding-top: .55rem; padding-bottom: .55rem; }
.pratiche-table .col-causale { max-width: 15rem; }
.pratiche-table .col-cliente { min-width: 9rem; max-width: 16rem; }
.importo-sub { font-size: .78rem; color: var(--vera-green-dark); white-space: nowrap; }
.row-link { cursor: pointer; }
.row-mia > td:first-child { box-shadow: inset 3px 0 0 var(--vera-pink); }
.bulk-bar { position: sticky; bottom: 1rem; z-index: 5; background: #fff; color: var(--vera-text); border: 1px solid var(--vera-border); border-radius: 1rem; padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(20, 55, 162, .15); }
.bulk-bar #bulkClear { color: var(--vera-muted) !important; }

/* assegnazione rapida dall'elenco */
.btn-assegna { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem .2rem .25rem; border: 1px dashed transparent; border-radius: 2rem; background: transparent; color: var(--vera-text); font-size: .85rem; white-space: nowrap; }
.btn-assegna:hover, .btn-assegna.show { border-color: var(--vera-aqua); background: var(--vera-aqua-soft); }
.btn-assegna.vuoto { border-color: #c9dbe2; color: var(--vera-muted); padding-left: .55rem; }
.btn-assegna.vuoto:hover, .btn-assegna.vuoto.show { border-color: var(--vera-pink); color: var(--vera-pink); background: var(--vera-pink-light); }
.btn-assegna.salvataggio { opacity: .5; pointer-events: none; }
.assegna-menu { min-width: 15rem; max-height: 20rem; overflow-y: auto; }
.assegna-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.toast-vera { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2000; background: #fff; color: var(--vera-text); border-left: 4px solid var(--vera-green); border-radius: .75rem; padding: .7rem 1rem; box-shadow: 0 10px 30px rgba(20, 55, 162, .18); transition: opacity .3s; }
.toast-vera.errore { border-left-color: var(--vera-pink); }

/* avatar */
.avatar-sm { width: 34px; height: 34px; font-size: .8rem; }
.avatar-xs { width: 24px; height: 24px; font-size: .65rem; }
.avatar-empty { background: #e9f1f4; color: var(--vera-muted); }
.assegnatario-cell { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.avatar.c1 { background: var(--vera-green); } .avatar.c2 { background: var(--vera-blue); } .avatar.c3 { background: var(--vera-pink); }
.avatar.c4 { background: #5aa5b6; } .avatar.c5 { background: #e08a3c; } .avatar.c0 { background: #7b6bc4; }

/* ---------------------------------------------------------------- report */
.report-bar { height: 5px; background: #edf4f6; border-radius: 3px; margin-top: 3px; max-width: 16rem; }
.report-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--vera-bubble-dark), var(--vera-bubble)); border-radius: 3px; }
.report-table td, .report-table th { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- storico pratica */
.timeline { position: relative; }
.timeline-item { position: relative; padding: 0 0 1.1rem 2.4rem; }
.timeline-item::before { content: ""; position: absolute; left: .85rem; top: 1.8rem; bottom: 0; border-left: 2px solid var(--vera-border); }
.timeline-item:last-child::before { display: none; }
.timeline-icon { position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.timeline-icon.text-bg-primary { background: #e7ecfa !important; color: var(--vera-blue) !important; }
.timeline-text { margin-top: .25rem; }
.timeline-cliente .timeline-text { background: var(--vera-aqua-soft); border-radius: .6rem; padding: .5rem .75rem; }
.allegato { display: inline-flex; gap: .3rem; align-items: center; margin: .35rem .5rem 0 0; font-size: .85rem; padding: .2rem .55rem; border: 1px solid var(--vera-border); border-radius: .45rem; background: #fff; }
.allegato:hover { background: var(--vera-aqua-light); text-decoration: none; }

/* ---------------------------------------------------------------- portale clienti */
.portal { background: linear-gradient(180deg, var(--vera-sky) 0, var(--vera-bg) 360px, #eef8fd 100%) fixed; }
.portal-header { background: #fff; position: relative; padding-bottom: 28px; }
.portal-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18C240 2 480 34 720 20S1200 0 1440 14V40H0Z' fill='%23b9dce3'/%3E%3Cpath d='M0 28C260 14 500 40 760 28S1220 14 1440 24V40H0Z' fill='%2389c0cc'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
.portal-logo { width: 64px; }
.portal-title { font-weight: 700; font-size: 1.35rem; color: var(--vera-blue); }
.tipo-card { border: 2px solid var(--vera-border); color: var(--bs-body-color); border-radius: 1rem; background: #fff; }
.tipo-card:hover { border-color: var(--vera-aqua); background: var(--vera-aqua-soft); color: var(--bs-body-color); }
.tipo-card i { color: var(--vera-green); }
.btn-check:checked + .tipo-card { background: var(--vera-aqua-light); border-color: var(--vera-green); color: var(--vera-blue); }
.btn-check:checked + .tipo-card .small { color: var(--vera-text); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.stepper { gap: .5rem; }
.stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; color: var(--vera-muted); font-size: .85rem; }
.stepper-item:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: calc(50% + 1.2rem); right: calc(-50% + 1.2rem); border-top: 2px solid var(--vera-border); }
.stepper-item.done:not(:last-child)::after { border-color: var(--vera-green); }
.stepper-dot { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e9f1f4; font-weight: 600; margin-bottom: .3rem; }
.stepper-item.done .stepper-dot { background: var(--vera-green); color: #fff; }
.stepper-item.current .stepper-dot { background: var(--vera-blue); color: #fff; }
.stepper-item.current { color: var(--vera-blue); font-weight: 600; }

/* ---------------------------------------------------------------- ordini (DataTables) */
#ordini thead th { white-space: nowrap; font-weight: 600; }
#ordini td { vertical-align: middle; }
div.dt-buttons .btn { margin-right: .25rem; }
div.dataTables_wrapper div.dataTables_filter input { width: 16rem; max-width: 100%; }
@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { text-align: left !important; }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: flex-start !important; }
}
@media (max-height: 940px) {
    .sidebar-link { padding: .5rem .9rem; margin-bottom: .1rem; }
    .sidebar-section { padding-top: .75rem; }
}

/* ================================================================ Pratiche: code di lavoro, righe, pannello
   Ruoli dei colori: blu = azioni e testo principale · rosa = richiede attenzione · verde = fatto/riconosciuto
   rosso = in ritardo · tutto il resto neutro */

/* code di lavoro */
.queue-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.queue-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: .8rem; background: #fff; border: 1px solid var(--vera-border); color: var(--vera-text); font-weight: 500; text-decoration: none !important; box-shadow: 0 1px 2px rgba(20, 55, 162, .05); }
.queue-tab i { color: var(--vera-bubble-dark); }
.queue-tab:hover { border-color: var(--vera-bubble); color: var(--vera-blue); }
.queue-count { background: #eef4f8; color: var(--vera-muted); border-radius: 1rem; padding: .05rem .5rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.queue-tab.attenzione .queue-count { background: var(--vera-pink); color: #fff; }
.queue-tab.active { background: var(--vera-blue); border-color: var(--vera-blue); color: #fff; box-shadow: 0 6px 16px rgba(20, 55, 162, .25); }
.queue-tab.active i { color: #fff; }
.queue-tab.active .queue-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* barra ricerca */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar-search { position: relative; flex: 1 1 18rem; min-width: 0; }
.toolbar-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--vera-muted); }
.toolbar-search input { padding-left: 2.4rem; height: 2.6rem; border-radius: .8rem; border-color: var(--vera-border); background: #fff; }
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.toolbar-actions .btn { height: 2.6rem; display: inline-flex; align-items: center; border-radius: .8rem; }
.toolbar-actions .btn-light { background: #fff; }
.filtri-attivi { border-color: var(--vera-pink) !important; color: var(--vera-pink); }
.filtri-attivi .badge { background: var(--vera-pink); }

/* chip tipo e filtri attivi */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 2rem; border: 1px solid var(--vera-border); background: #fff; color: var(--vera-muted); font-size: .85rem; text-decoration: none !important; }
.chip span { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--vera-bubble); color: var(--vera-blue); }
.chip.active { background: var(--vera-aqua-light); border-color: var(--vera-bubble); color: var(--vera-blue); font-weight: 600; }
.chip-filtro { background: var(--vera-pink-light); border-color: #f3c6d9; color: #8c1d4f; }
.chip-filtro:hover { border-color: var(--vera-pink); color: var(--vera-pink); }

.list-summary { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .85rem; color: var(--vera-muted); margin: 0 .25rem .5rem; }
.list-summary strong { color: var(--vera-text); }
.list-summary .text-green strong { color: var(--vera-green-dark); }

/* righe pratiche: griglia su desktop */
.pr-list { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(20, 55, 162, .06), 0 6px 18px rgba(20, 55, 162, .07); overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 8.5rem 9rem 9.5rem; gap: .25rem 1rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid #edf3f7; cursor: pointer; transition: background .12s; }
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: #f5fafd; }
.pr-row:focus-visible { outline: 2px solid var(--vera-bubble); outline-offset: -2px; }
.pr-row.selezionata { background: var(--vera-aqua-light); }
.pr-row.row-mia { box-shadow: inset 4px 0 0 var(--vera-pink); }
.pr-head { cursor: default; background: #f6fafd; padding-top: .55rem; padding-bottom: .55rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--vera-muted); }
.pr-head:hover { background: #f6fafd; }
.pr-cliente { font-weight: 600; color: var(--vera-text); line-height: 1.25; }
.pr-causale { color: #3d4f75; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-dettaglio { color: var(--vera-muted); }
.pr-meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .78rem; color: var(--vera-muted); margin-top: .15rem; }
.pr-codice { color: var(--vera-blue); font-weight: 600; }
.pr-flag { color: var(--vera-pink); font-weight: 500; }
.pr-importo { text-align: right; }
.pr-euro { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-stato { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.pr-storico { font-size: .72rem; color: var(--vera-muted); margin-top: .15rem; }

/* stato: pallino + testo */
.stato-dot { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.stato-dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.stato-nuova { color: var(--vera-pink); }
.stato-aperta { color: var(--vera-bubble-dark); }
.stato-chiusa { color: var(--vera-green-dark); }
.stato-non_dovuta { color: #7d8aa3; }
.age { font-size: .75rem; color: var(--vera-muted); white-space: nowrap; }
.age-amber { color: #9a6200; background: #fff1d6; border-radius: 1rem; padding: 0 .45rem; font-weight: 600; }
.age-red { color: #b4231f; background: #fde5e4; border-radius: 1rem; padding: 0 .45rem; font-weight: 600; }

/* pannello laterale */
.drawer { --bs-offcanvas-width: 460px; }
.drawer .offcanvas-header { border-bottom: 1px solid var(--vera-border); }
.drawer .offcanvas-title { color: var(--vera-blue); font-weight: 700; }
.drawer-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin-bottom: 1rem; }
.drawer-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vera-muted); font-weight: 600; }
.drawer-facts dd { margin: 0; }
.drawer-box { background: #f5fafd; border-radius: .7rem; padding: .7rem .85rem; }
.drawer-section { border-top: 1px solid var(--vera-border); padding: .9rem 0; }
.drawer-section h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vera-muted); font-weight: 600; margin-bottom: .55rem; }
.drawer-evento { padding: .35rem 0; border-bottom: 1px dashed #e3edf3; }
.drawer-evento:last-child { border-bottom: 0; }
.stato-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.stato-btn { border: 1px solid var(--vera-border); background: #fff; border-radius: 2rem; font-weight: 500; }
.btn-check:checked + .stato-btn { color: #fff; border-color: transparent; }
.btn-check:checked + .stato-btn.stato-nuova { background: var(--vera-pink); }
.btn-check:checked + .stato-btn.stato-aperta { background: var(--vera-bubble-dark); }
.btn-check:checked + .stato-btn.stato-chiusa { background: var(--vera-green-dark); }
.btn-check:checked + .stato-btn.stato-non_dovuta { background: #7d8aa3; }

/* ---------------------------------------------------------------- mobile: card, nessuno scorrimento orizzontale */
@media (max-width: 991.98px) {
    .pr-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; grid-template-areas: "sel main main main" "sel stato importo ass"; gap: .45rem .75rem; padding: .85rem .9rem; }
    .pr-meta { gap: .1rem .6rem; }
    .pr-importo { align-self: center !important; }
    .pr-importo .importo-sub { display: inline; margin-left: .3rem; }
    .pr-sel { grid-area: sel; align-self: start; padding-top: .15rem; }
    .pr-main { grid-area: main; }
    .pr-importo { grid-area: importo; align-self: start; }
    .pr-stato { grid-area: stato; flex-direction: row; align-items: center; gap: .6rem; }
    .pr-ass { grid-area: ass; justify-self: end; text-align: right; }
    .pr-head { display: none; }
    .pr-causale { white-space: normal; }
}
@media (max-width: 575.98px) {
    .queue-tabs { gap: .35rem; }
    .queue-tab { padding: .32rem .6rem; font-size: .82rem; gap: .35rem; border-radius: .65rem; }
    .queue-count { padding: 0 .4rem; font-size: .72rem; }
    .pr-stato { flex-direction: column !important; align-items: flex-start !important; gap: .15rem !important; }
    .queue-tab i { display: none; }
    .toolbar-search { flex-basis: 100%; }
    .toolbar-actions { width: 100%; }
    .toolbar-actions > :last-child { margin-left: auto; }
    .drawer { --bs-offcanvas-width: 100vw; }
    .app-content { overflow-x: hidden; }
    .bulk-bar { left: .5rem; right: .5rem; }
}