/* =========================================================
   VARIABILI GENERALI
========================================================= */

:root{
    --blu:#38509e;
    --blu-dark:#2d407f;
    --rosso:#d40000;
    --rosso-dark:#b60000;
    --giallo:#ffd400;
    --oro:#ffb000;
    --testo:#222;
    --grigio:#666;
    --bordo:#e5e5e5;
    --bianco:#fff;
    --ombra:0 10px 30px rgba(0,0,0,.16);
    --radius:18px;
}


/* =========================================================
   RESET BASE
========================================================= */

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

html,
body{
    min-height:100%;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#0f3d91;
    background:linear-gradient(180deg,#1147a7 0%,#0b347e 100%);
    color:var(--testo);
    min-height:100vh;

    display:flex;
    flex-direction:column;
}


/* =========================================================
   TOPBAR / MENU
========================================================= */

.topbar{
    background:#0b347e;
    border-bottom:3px solid #ffd400;
    box-shadow:0 4px 18px rgba(0,0,0,.18);
    position:sticky;
    top:0;
    z-index:999;
}

.topbar-inner{
    max-width:1500px;
    margin:0 auto;
    padding:14px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.brand img{
    height:90px;
    width:auto;
    display:block;
}

.main-menu{
    display:flex;
    align-items:center;
    gap:8px;
}

.main-menu a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    padding:12px 15px;
    border-radius:8px;
    transition:.2s;
}

.main-menu a:hover,
.main-menu a.active{
    background:#ffd400;
    color:#0b347e;
}

.menu-toggle{
    display:none;
    background:var(--blu);
    color:var(--bianco);
    border:0;
    width:46px;
    height:46px;
    border-radius:8px;
    font-size:24px;
    cursor:pointer;
}


/* =========================================================
   BOX UTENTE
========================================================= */

.user-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:20px;
    padding-left:20px;
    border-left:1px solid #ddd;
}

.user-icon{
    font-size:20px;
	color:#fff;
}

.user-name{
    color:#fff;
    font-weight:bold;
    white-space:nowrap;
}

.logout,
.main-menu a.logout{
    display:inline-block;
    background:var(--rosso);
    color:var(--bianco) !important;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.2s;
}

.logout:hover,
.main-menu a.logout:hover{
    background:var(--rosso-dark);
}


/* =========================================================
   CONTENITORE PAGINA
========================================================= */

.page-content{
    width:100%;
    max-width:1500px;
    margin:0 auto;
    padding:35px 22px;

    flex:1;
}


/* =========================================================
   HERO / HEADER PAGINA
========================================================= */

.home-hero,
.page-header{
    background:var(--bianco);
    border-radius:20px;
    box-shadow:var(--ombra);
    border-left:10px solid #ffd400;
    margin-bottom:20px;
}

.home-hero{
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.page-header{
    padding: 32px 36px;
}

.hero-left{
    flex:1;
}

.hero-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.home-hero h1,
.page-header h1{
    color:var(--blu);
    font-size:38px;
    margin-bottom:7px;
}

.page-header h1{
    font-size:36px;
}

.home-hero p,
.page-header p{
    color:var(--grigio);
    font-size:20px;
}

.page-header p{
    font-size:17px;
}


/* =========================================================
   BOTTONI
========================================================= */

.btn-new,
.btn-save,
.btn-cancel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

.btn-new{
    gap:10px;
    background:#0b4db7;
    color:var(--bianco);
    font-size:18px;
    padding:16px 28px;
    box-shadow:0 6px 15px rgba(212,0,0,.35);
}

.btn-new:hover{
    background:#ffd400;
    color:#003b8f;
    transform:translateY(-2px);
}

.btn-save,
.btn-cancel{
    min-width:180px;
    height:50px;
    padding:0 25px;
    font-size:16px;
}

.btn-save{
    background:var(--rosso);
    color:var(--bianco);
    box-shadow:0 5px 15px rgba(212,0,0,.25);
}

.btn-save:hover{
    background:var(--rosso-dark);
    transform:translateY(-2px);
}

.btn-cancel{
    background:var(--blu);
    color:var(--bianco);
    box-shadow:0 5px 15px rgba(56,80,158,.25);
}

.btn-cancel:hover{
    background:var(--blu-dark);
    transform:translateY(-2px);
}


/* =========================================================
   DASHBOARD CARD
========================================================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.dashboard-card{
    position:relative;
    background:var(--bianco);
    color:var(--testo);
    text-decoration:none;
    border-radius:var(--radius);
    padding:28px;
    min-height:210px;
    box-shadow:var(--ombra);
    transition:.2s;
    border-top:5px solid #ffd400;
    border-bottom:none;
}

.dashboard-card:hover{
    transform:translateY(-5px);
    border-bottom-color:var(--rosso);
}

.dashboard-card h2{
    color:var(--blu);
    font-size:24px;
    margin-bottom:10px;
}

.dashboard-card p{
    color:var(--grigio);
    font-size:15px;
    line-height:1.5;
}

.card-badge{
    position:absolute;
    top:20px;
    right:20px;
    min-width:30px;
    height:30px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--rosso);
    color:var(--bianco);
    font-size:14px;
    font-weight:800;
    line-height:1;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(212,0,0,.35);
}

.card-number{
    font-size:42px;
    font-weight:800;
    color:#0b4db7;
    margin-bottom:12px;
}

.card-icon{
    font-size:48px;
    color:#0b4db7;
    margin-bottom:15px;
}

.card-icon i{
    display:block;
}


/* =========================================================
   FORM
========================================================= */

.form-card{
    background:var(--bianco);
    border-radius:20px;
    padding:28px;
    box-shadow:var(--ombra);
}

.form-section-title{
    background:var(--blu);
    color:var(--bianco);
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    padding:10px 15px;
    border-radius:8px;
    margin-bottom:25px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px 22px;
}

.field{
    min-width:0;
}

.col-1{grid-column:span 1;}
.col-2{grid-column:span 2;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-10{grid-column:span 10;}
.col-11{grid-column:span 11;}
.col-12{grid-column:span 12;}

.field label{
    display:block;
    color:var(--blu);
    font-size:14px;
    font-weight:bold;
    margin-bottom:7px;
}

.field input,
.field select,
.field textarea{
    width:100%;
    border:2px solid #d9d9d9;
    border-radius:8px;
    padding:12px 13px;
    font-size:15px;
    background:var(--bianco);
    outline:none;
    transition:.2s;
}

.field input,
.field select{
    height:48px;
}

.field textarea{
    min-height:100px;
    resize:vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--blu);
    box-shadow:0 0 0 3px rgba(56,80,158,.14);
}

.form-actions{
    margin-top:35px;
    padding-top:25px;
    border-top:1px solid var(--bordo);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}


/* =========================================================
   TABELLE
========================================================= */

.table-card{
    background:var(--bianco);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.table-toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.search-box{
    width:350px;
    max-width:100%;
    height:46px;
    border:2px solid #ddd;
    border-radius:8px;
    padding:0 15px;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.search-box:focus{
    border-color:var(--blu);
    box-shadow:0 0 0 3px rgba(56,80,158,.14);
}

.table-responsive{
    overflow-x:auto;
}

.table-interventi{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

.table-interventi thead{
    background:#0b347e;
    color:var(--bianco);
}

.table-interventi th,
.table-interventi td{
    padding:12px 10px;
    text-align:left;
    vertical-align:top;
    font-size:14px;
}

.table-interventi th{
    white-space:nowrap;
    text-transform:uppercase;
    font-size:12.5px;
    letter-spacing:.4px;
    border-bottom:3px solid #ffd400;
}

.table-interventi th:not(:last-child),
.table-interventi tbody tr.riga-record td:not(:last-child){
    border-right:1px solid #e2eaf7;
}

.table-interventi tbody tr{
    cursor:pointer;
    transition:.2s;
}


/* =========================================================
   RAGGRUPPAMENTO INTERVENTI (riga record + riga dettaglio)
========================================================= */

.table-interventi tbody tr.riga-spazio td{
    padding:0;
    height:14px;
    border:0;
}

.table-interventi tbody tr.riga-record td{
    background:var(--riga-colore, #38509e);
    color:#fff;
    border-top:2px solid rgba(255,255,255,.4);
    border-bottom:2px solid rgba(255,255,255,.4);
    transition:.2s;
}

.table-interventi tbody tr.riga-record.riga-dispari td{
    background:color-mix(in srgb, var(--riga-colore, #38509e) 78%, #000 22%);
}

.table-interventi tbody tr.riga-record td:first-child{
    border-left:8px solid color-mix(in srgb, var(--riga-colore, #38509e) 65%, #000 35%);
    border-top-left-radius:12px;
    border-bottom-left-radius:12px;
}

.table-interventi tbody tr.riga-record td:last-child{
    border-right:2px solid rgba(255,255,255,.4);
    border-top-right-radius:12px;
    border-bottom-right-radius:12px;
}

.table-interventi tbody tr.riga-record small{
    color:rgba(255,255,255,.85);
}

.table-interventi tbody tr.riga-dettaglio td{
    padding:10px 16px;
    background:color-mix(in srgb, var(--riga-colore, #38509e) 55%, #000 45%);
    border:2px solid rgba(255,255,255,.4);
    border-left:8px solid color-mix(in srgb, var(--riga-colore, #38509e) 65%, #000 35%);
    border-top:none;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    font-size:13px;
    color:rgba(255,255,255,.92);
    transition:.2s;
}

.table-interventi tbody tr.riga-dettaglio.riga-dispari td{
    background:color-mix(in srgb, var(--riga-colore, #38509e) 45%, #000 55%);
}

.table-interventi tbody tr.riga-record:hover td{
    background:color-mix(in srgb, var(--riga-colore, #38509e) 88%, #fff 12%);
}

.table-interventi tbody tr.riga-record:hover + tr.riga-dettaglio td{
    background:color-mix(in srgb, var(--riga-colore, #38509e) 65%, #000 35%);
}

.riga-dettaglio-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
}

.dettaglio-percorso{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;




    text-overflow:ellipsis;
}

.dettaglio-percorso i{
    flex:0 0 auto;
    color:#fff;
}


.dettaglio-totale{
    flex:0 0 auto;
    font-weight:bold;
    color:var(--blu);
    white-space:nowrap;
}

.table-interventi td.col-totale-riga{
    font-weight:800;
    font-size:15px;
    color:#fff;
    background:rgba(0,0,0,.18) !important;
}

.table-interventi th.col-azioni-interventi,
.table-interventi td.col-azioni-interventi{
    width:60px;
    text-align:center;
}

.btn-elimina-riga{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:2px solid rgba(255,255,255,.55);
    border-radius:50%;
    background:rgba(0,0,0,.18);
    color:#fff;
    cursor:pointer;
    transition:.2s;
}

.btn-elimina-riga:hover{
    background:var(--rosso);
    border-color:var(--rosso);
    transform:translateY(-1px);
}


/* =========================================================
   BADGE STATO
========================================================= */

.stato{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    color:var(--bianco);
    font-size:13px;
    font-weight:bold;
    white-space:nowrap;
    border:2px solid rgba(255,255,255,.55);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.stato-da-assegnare{
    background:#ff9800;
}

.stato-assegnato{
    background:#2196f3;
}

.stato-in-corso{
    background:#4caf50;
}

.stato-chiuso{
    background:#777;
}

/*=========================================================
  FOOTER
=========================================================*/

.footer{

    margin-top:auto;

    background:#08275e;

    color:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:25px;

    padding:16px 35px;

    border-top:4px solid #ffb000;

    font-size:14px;

}

.footer-left{

    display:flex;
    align-items:center;
    gap:15px;

}

.footer-left i{

    font-size:30px;
    color:#ffd34d;

}

.footer-title{

    font-size:18px;
    font-weight:700;

}

.footer-subtitle{

    font-size:12px;
    color:rgba(255,255,255,.75);

}

.footer-center{

    display:flex;
    align-items:center;
    gap:15px;

}

.footer-center span{

    display:flex;
    align-items:center;
    gap:8px;

}

.footer-center i{

    color:#ffd34d;

}

.separator{

    width:1px;
    height:18px;

    background:rgba(255,255,255,.25);

}

.footer-right{

    color:rgba(255,255,255,.80);

    text-align:right;

}

.footer-right strong{

    color:#fff;
    font-weight:600;

}

.footer-right a{

    color:#ffd34d;

    text-decoration:none;

    font-weight:bold;

}

.footer-right a:hover{

    text-decoration:underline;

}

@media(max-width:1100px){

    .footer{

        flex-direction:column;
        text-align:center;
        gap:18px;

    }

    .footer-center{

        flex-wrap:wrap;
        justify-content:center;

    }

    .footer-right{

        text-align:center;

    }

}
/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media(max-width:900px){

    .brand img{
        height:80px;
    }

    .menu-toggle{
        display:block;
    }

    .main-menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--bianco);
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:15px 22px 22px;
        box-shadow:0 12px 20px rgba(0,0,0,.16);
    }

    body.menu-open .main-menu{
        display:flex;
    }

    .main-menu a{
        width:100%;
        text-align:center;
    }

    .main-menu a.logout{
        margin-left:0;
    }

    .user-box{
        margin-left:0;
        padding-left:0;
        border-left:0;
        justify-content:center;
        flex-wrap:wrap;
    }

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

    .home-hero h1{
        font-size:34px;
    }

    .table-card{
        padding:15px;
    }

    .footer{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .footer-info{
        flex-direction:column;
        width:100%;
        gap:12px;
    }

    .footer-item{
        width:100%;
        justify-content:center;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4{
        grid-column:span 6;
    }

    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12{
        grid-column:span 12;
    }
}


/* =========================================================
   RESPONSIVE SMARTPHONE
========================================================= */

@media(max-width:768px){

    .home-hero{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-right{
        width:100%;
        flex-direction:column;
        gap:12px;
    }

    .btn-new{
        width:100%;
    }
}

/* =========================================================
   TABELLA INTERVENTI SU MOBILE -> SCHEDE
========================================================= */

@media(max-width:768px){

    .table-responsive{
        overflow-x:visible;
    }

    .table-interventi thead{
        display:none;
    }

    .table-interventi,
    .table-interventi tbody{
        display:block;
        width:100%;
    }

    .table-interventi tbody tr.riga-spazio{
        display:none;
    }

    .table-interventi tbody tr.riga-record,
    .table-interventi tbody tr.riga-dettaglio{
        display:block;
        width:100%;
    }

    .table-interventi tbody tr.riga-record{
        display:grid;
        grid-template-columns:1fr 1fr;
        margin-top:20px;
        border:2px solid rgba(255,255,255,.4);
        border-left:8px solid color-mix(in srgb, var(--riga-colore, var(--blu)) 65%, #000 35%);
        border-radius:14px;
        box-shadow:0 6px 18px rgba(0,0,0,.14);
        overflow:hidden;
        padding:0;
        background:var(--riga-colore, var(--blu));
        color:#fff;
    }

    .table-interventi tbody tr.riga-record.riga-dispari{
        background:color-mix(in srgb, var(--riga-colore, var(--blu)) 78%, #000 22%);
    }

    .table-interventi tbody tr:first-child.riga-record{
        margin-top:0;
    }

    .table-interventi tbody tr.riga-dettaglio{
        border:2px solid rgba(255,255,255,.4);
        border-left:8px solid color-mix(in srgb, var(--riga-colore, var(--blu)) 65%, #000 35%);
        border-top:none;
        border-radius:0 0 14px 14px;
        box-shadow:0 6px 18px rgba(0,0,0,.14);
        margin-bottom:0;
        background:color-mix(in srgb, var(--riga-colore, var(--blu)) 55%, #000 45%);
    }

    .table-interventi tbody tr.riga-dettaglio.riga-dispari{
        background:color-mix(in srgb, var(--riga-colore, var(--blu)) 45%, #000 55%);
    }

    .table-interventi tbody tr.riga-record td{
        display:block;
        width:auto;
        padding:10px 12px;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:#fff;
        border-right:1px solid rgba(255,255,255,.3) !important;
        border-bottom:1px solid rgba(255,255,255,.3) !important;
        font-size:14px;
    }

    .table-interventi tbody tr.riga-record small{
        color:rgba(255,255,255,.85);
    }

    .table-interventi tbody tr.riga-record td[data-label="Targa"],
    .table-interventi tbody tr.riga-record td[data-label="Luogo destinazione"]{
        border-right:0 !important;
    }

    .table-interventi td[data-label]::before{
        content:attr(data-label);
        display:block;
        font-size:11px;
        font-weight:bold;
        text-transform:uppercase;
        color:rgba(255,255,255,.8);
        margin-bottom:3px;
    }

    /* Su mobile mostro solo Data, Targa, Cliente, Destinazione, Totale €. */
    .table-interventi th.no-mobile,
    .table-interventi td.no-mobile{
        display:none !important;
    }

    .table-interventi td.col-totale-riga{
        grid-column:1 / -1;
        border-right:0 !important;
        border-bottom:0 !important;
        text-align:right;
        font-size:18px;
        color:#fff;
        background:rgba(0,0,0,.18) !important;
    }

    .table-interventi td.col-azioni-interventi{
        grid-column:1 / -1;
        border-right:0 !important;
        border-bottom:0 !important;
        text-align:center;
        padding:10px 12px 14px;
    }

    .table-interventi td.col-azioni-interventi::before{
        display:none;
    }


    .table-interventi tbody tr.riga-dettaglio td{
        padding:12px 16px 14px;
        border:0 !important;
        border-radius:0 !important;
        color:rgba(255,255,255,.92);
    }

    .riga-dettaglio-inner{
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        gap:6px;
    }

    .dettaglio-percorso{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }
}

@media(max-width:600px){

    .form-grid{
        gap:16px;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12{
        grid-column:span 12;
    }

    .form-actions{
        flex-direction:column-reverse;
    }

    .btn-save,
    .btn-cancel{
        width:100%;
    }
}

@media(max-width:520px){

    .topbar-inner{
        padding:12px 15px;
    }

    .brand img{
        height:52px;
    }

    .page-content{
        padding:25px 15px;
    }

    .home-hero{
        padding:28px 22px;
        border-left-width:7px;
    }

    .home-hero h1{
        font-size:28px;
    }

    .home-hero p{
        font-size:16px;
    }

    .page-header{
        padding:26px 22px;
        border-left-width:7px;
    }

    .page-header h1{
        font-size:28px;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .dashboard-card{
        min-height:auto;
        padding:24px;
    }

    .footer{
        padding:20px;
    }

    .footer-logo{
        flex-direction:column;
    }
}


.percorso-box{
    margin-top:20px;
    background:#fff;
    border:1px solid #d9e3f5;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.percorso-header{
    background:#00357a;
    color:#fff;
    padding:14px 18px;
    font-size:18px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
}

.percorso-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    padding:20px;
}

.percorso-card{
    background:#f8f9fc;
    border:1px solid #dfe5ef;
    border-radius:8px;
    text-align:center;
    padding:18px;
    transition:.2s;
}

.percorso-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.10);
}

.percorso-titolo{
    color:#666;
    font-size:14px;
    margin-bottom:12px;
    font-weight:600;
}

.percorso-titolo i{
    color:#00357a;
    margin-right:5px;
}

.percorso-valore{
    font-size:34px;
    font-weight:bold;
    color:#00357a;
}

.percorso-card.totale{
    background:#00357a;
    color:#fff;
}

.percorso-card-full{
    grid-column:1 / -1;
}

.percorso-card.totale .percorso-titolo,
.percorso-card.totale .percorso-titolo i,
.percorso-card.totale .percorso-valore{
    color:#fff;
}

.percorso-card.verde{
    background:#1f8a3b;
    color:#fff;
}

.percorso-card.verde .percorso-titolo,
.percorso-card.verde .percorso-titolo i,
.percorso-card.verde .percorso-valore{
    color:#fff;
}

.percorso-card.verde .percorso-costo{
    color:#fff;
}

@media(max-width:900px){

    .percorso-grid{
        grid-template-columns:1fr;
    }

}


.percorso-costo{
    margin-top:10px;
    font-size:14px;
    font-weight:bold;
    color:#28a745;
}

.percorso-card.totale .percorso-costo{
    color:#fff;
    font-size:18px;
}

.percorso-dettaglio{
    margin-top:4px;
    font-size:24px;
    font-weight:600;
    color:#666;
}

.percorso-card.totale .percorso-dettaglio,
.percorso-card.verde .percorso-dettaglio{
    color:#fff;
    opacity:1;
}
/* =========================================================
   PAGINA IMPOSTAZIONI
========================================================= */

.settings-header h1 i{
    margin-right:10px;

    color:var(--rosso);
}

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
}

.settings-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    min-height:145px;
    padding:25px 28px;
    background:var(--bianco);
    color:var(--testo);
    text-decoration:none;
    border-radius:var(--radius);
    border-left:7px solid var(--blu);
    box-shadow:var(--ombra);
    transition:transform .2s, border-color .2s, box-shadow .2s;
}

.settings-card:hover{
    transform:translateY(-4px);
    border-left-color:var(--rosso);
    box-shadow:0 14px 34px rgba(0,0,0,.20);
}

.settings-icon{
    flex:0 0 72px;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:rgba(56,80,158,.10);
    color:var(--blu);
    font-size:31px;
    transition:.2s;
}

.settings-card:hover .settings-icon{
    background:var(--blu);
    color:var(--bianco);
}

.settings-content{
    flex:1;
    min-width:0;
}

.settings-content h2{
    margin:0 0 8px;
    color:var(--blu);
    font-size:24px;
}

.settings-content p{
    margin:0;
    color:var(--grigio);
    font-size:15px;
    line-height:1.5;
}

.settings-arrow{
    flex:0 0 auto;
    color:#b8b8b8;
    font-size:20px;
    transition:.2s;
}

.settings-card:hover .settings-arrow{
    color:var(--rosso);
    transform:translateX(4px);
}

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

@media(max-width:520px){
    .settings-card{
        gap:15px;
        min-height:125px;
        padding:20px;
    }

    .settings-icon{
        flex-basis:58px;
        width:58px;
        height:58px;
        border-radius:14px;
        font-size:25px;
    }

    .settings-content h2{
        font-size:21px;
    }

    .settings-content p{
        font-size:14px;
    }
}

/* =========================================================
   IMPOSTAZIONI - ELENCO CAUSALI
========================================================= */

.table-toolbar{
    gap:15px;
    align-items:center;
}

.btn-toolbar{
    min-width:auto;
    height:46px;
    padding:0 18px;
    gap:8px;
    white-space:nowrap;
}

.table-impostazioni .col-azioni{
    width:100px;
    text-align:center;
}

.azioni-riga{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.color-preview{
    display:inline-block;
    width:24px;
    height:24px;
    margin-right:8px;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 1px #ccc;
    vertical-align:middle;
}

.color-code{
    vertical-align:middle;
    font-family:monospace;
    font-size:13px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:20px;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    white-space:nowrap;
}

.status-active{
    background:#28a745;
}

.status-disabled{
    background:#777;
}

.btn-edit-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border-radius:8px;
    background:var(--blu);
    color:var(--bianco);
    text-decoration:none;
    font-size:14px;
    transition:.2s;
}

.btn-edit-row:hover{
    background:var(--rosso);
    transform:translateY(-1px);
}

.table-empty{
    padding:35px !important;
    color:var(--grigio);
    text-align:center !important;
    cursor:default;
}

@media(max-width:700px){
    .table-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .search-box,
    .btn-toolbar{
        width:100%;
    }
}



/* MODIFICA CAUSALE */
.alert-error{
    margin-bottom:20px;
    padding:15px 18px;
    border-radius:10px;
    background:#ffe5e5;
    border:1px solid #ef9a9a;
    color:#a40000;

    font-weight:bold;
}

.alert-error i{
    margin-right:8px;
}

.color-field{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:8px;
}

.color-field input[type="color"]{
    width:58px;
    padding:4px;
    cursor:pointer;
}

.causale-preview{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border:2px dashed #d9d9d9;
    border-radius:10px;
    background:#f8f9fc;
}

.causale-preview .stato{
    font-size:16px;
    padding:10px 20px;
}

.btn-save i,
.btn-cancel i,
.btn-new i{
    margin-right:8px;
}

@media(max-width:600px){
    .color-field{
        grid-template-columns:70px 1fr;
    }
}


.alert-success{
    margin:20px 0;
    padding:15px 20px;
    background:#eaf8ee;
    border:1px solid #b9e4c9;
    border-left:6px solid #28a745;
    border-radius:8px;
    color:#155724;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    animation:fadeSuccess .35s ease;
}

.alert-success i{
    font-size:22px;
    color:#28a745;
}

@keyframes fadeSuccess{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* =========================================================
   FIX MENU MOBILE - override sicuro
========================================================= */
@media (max-width:900px){
    .main-menu{
        background:#0b347e;
        padding:12px 15px 18px;
        border-top:3px solid #ffd400;
        box-shadow:0 12px 20px rgba(0,0,0,.25);
    }

    .main-menu a{
        width:100%;
        padding:15px 18px;
        color:#fff;
        text-align:center;
        border-radius:8px;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    .main-menu a:hover{
        background:#214b9c;
        color:#fff;
    }

    .main-menu a.active{
        background:#ffd400;
        color:#0b347e;
    }

    .main-menu a.logout{
        margin-top:10px;
        background:#d40000;
        color:#fff !important;
        border-bottom:0;
    }

    .main-menu a.logout:hover{
        background:#b60000;
    }

    .user-box{
        margin-left:0;
        padding:15px 0 0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.15);
        justify-content:center;
    }

    .user-name,
    .user-icon{
        color:#fff;
    }
}

/* =========================================================
   SERVIZI AGGIUNTIVI (checkbox intervento)
========================================================= */

.servizi-checkbox-group{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:4px 2px;
}

.servizio-checkbox{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    font-size:12.5px;
    font-weight:600;
    color:#00357a;
    background:#f2f6fc;
    border:1.5px solid #d9e3f5;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
    user-select:none;
}

.servizio-checkbox:hover{
    border-color:#a9c2ea;
}

.servizio-checkbox:has(input:checked){
    background:#00357a;
    border-color:#00357a;
    color:#fff;
}

.servizio-checkbox:has(input:checked) small{
    color:#cfe0f7;
}

.servizio-checkbox input[type="checkbox"]{
    width:14px;
    height:14px;
    margin:0;
    accent-color:#00357a;
    cursor:pointer;
}

.servizio-checkbox small{
    font-weight:500;
    color:#7c8aa3;
}



/* Contenitore del campo indirizzo con bottoni azione integrati */
.campo-indirizzo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.campo-indirizzo input {
    width: 100%;
    min-width: 0; /* permette all'input di restringersi invece di spingere i bottoni fuori dal contenitore */
    flex: 1 1 auto;
}

.btn-posizione-attuale,
.btn-naviga {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #555;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.btn-posizione-attuale:hover,
.btn-naviga:hover {
    color: #000;
}

.btn-posizione-attuale:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Il bottone naviga usa il colore "brand" per distinguersi visivamente
   dalla crocetta di geolocalizzazione (stessa famiglia di grigio). */
.btn-naviga {
    color: #38509e;
}

.btn-naviga:hover {
    color: #26386f;
}

/* Su mobile li rendo leggermente più grandi, più facili da toccare */
@media (max-width: 768px) {
    .btn-posizione-attuale,
    .btn-naviga {
        font-size: 18px;
        padding: 8px;
    }
}

/* Bottone "chiama" accanto al campo telefono (riusa il contenitore .campo-indirizzo) */
.btn-chiama {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #2e7d32;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.btn-chiama:hover {
    color: #1b5e20;
}

@media (max-width: 768px) {
    .btn-chiama {
        font-size: 18px;
        padding: 8px;
    }
}

.committente-interventi {
	margin-top: 5px!important;
	font-weight: 600;
	color: black!important;
	color: #F8F8F8;
}


.switch-sosta {
				display: flex;
				align-items: center;
				gap: 8px;
				cursor: pointer;
				height: 38px;
				user-select: none;
			}
			.switch-sosta input {
				position: absolute;
				opacity: 0;
				width: 0;
				height: 0;
			}
			.switch-sosta-track {
				position: relative;
				display: inline-block;
				width: 42px;
				height: 24px;
				background-color: #d7dbe0;
				border-radius: 999px;
				transition: background-color .15s ease-in-out;
				flex-shrink: 0;
			}
			.switch-sosta-track::before {
				content: "";
				position: absolute;
				top: 3px;
				left: 3px;
				width: 18px;
				height: 18px;
				background-color: #fff;
				border-radius: 50%;
				box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
				transition: transform .15s ease-in-out;
			}
			.switch-sosta input:checked + .switch-sosta-track {
				background-color: #00357a;
			}
			.switch-sosta input:checked + .switch-sosta-track::before {
				transform: translateX(18px);
			}
			.switch-sosta-label {
				font-size: 14px;
				color: #4a4f57;
			}