/* =========================================================
   AMURUSU RESIDENCE
   Gestione Sdraio
   Versione 1.0 Beta
========================================================= */

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

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f2f2f2;
    color:#333;

}

/* ================= HEADER ================= */

header{

    background:#ffffff;

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

    padding:12px 16px;

    box-shadow:0 2px 8px rgba(0,0,0,.10);

    position:sticky;
    top:0;
    z-index:1000;

}

.logo{

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

}

.logo img{

    width:60px;
    height:60px;
    object-fit:contain;

}

.logo h1{

    font-size:20px;
    color:#2c7a3f;

}

.logo p{

    font-size:14px;
    color:#777;

}

/* ================= BARRA DESTRA ================= */

.azioni{

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

}

#data{

    padding:8px;

    border:1px solid #ccc;

    border-radius:8px;

}

#btnPrenota{

    background:#2c7a3f;
    color:white;

    border:none;

    border-radius:8px;

    padding:10px 16px;

    cursor:pointer;

    font-size:15px;
    font-weight:bold;

}

#btnPrenota:hover{

    background:#256733;

}

/* ================= PLANIMETRIA ================= */

main{

    padding:20px;

}

#mappa{

    position:relative;

    max-width:900px;

    margin:auto;

}

#planimetria{

    width:100%;

    display:block;

    border-radius:12px;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}

/* layer sopra la planimetria */

#layerSdraie{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

}

/* ================= SDRAIE ================= */

.sdraia{

    position:absolute;

    width:32px;
    height:62px;

    background:#ffffff;

    border:1px solid #777;

    border-radius:4px;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:10px;
    font-weight:bold;

    cursor:pointer;

    transition:.15s;

    user-select:none;

}

.sdraia.orizzontale{

    width:62px;
    height:32px;

}

.sdraia:hover{

    transform:scale(1.08);

    border:2px solid #2196F3;

    z-index:999;

}

/* ================= COLORI ================= */

.libera{

    background:#ffffff;

}

.occupata{

    color:#fff;

}

/* ================= PANNELLO ================= */

#scheda{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    background:white;

    min-height:52px;

    padding:15px 20px;

    box-shadow:0 -3px 12px rgba(0,0,0,.15);

    font-size:18px;

}

#scheda.selezione-attiva{

    pointer-events:none;

}

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

@media(max-width:700px){

    header{

        flex-direction:column;

        gap:12px;

    }

    .azioni{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }

    #btnPrenota{

        width:100%;

    }

    main{

        padding:10px;

    }

    .logo img{

        width:50px;
        height:50px;

    }

}
/* ==========================================
   MODAL
========================================== */

.hidden{

    display:none !important;

}

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal-box{

    background:white;

    width:380px;

    border-radius:12px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.modal-box h2{

    margin-bottom:20px;

}

.modal-box label{

    display:block;

    margin-top:15px;

    margin-bottom:5px;

    font-weight:bold;

}

.modal-box input,
.modal-box select,
.modal-box textarea{

    width:100%;

    padding:10px;

    border:1px solid #ccc;

    border-radius:8px;

}

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:25px;

}

.modal-buttons button{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}

#btnAnnulla{

    background:#999;
    color:white;

}

#btnSalva{

    background:#2e7d32;
    color:white;

}
/* ==========================================
   MODAL PRENOTAZIONE
========================================== */

.hidden{
    display:none;
}

.modal{

    position:fixed;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);

    z-index:9999;

}

.modal-box{

    background:#fff;

    width:420px;

    max-width:90%;

    border-radius:12px;

    padding:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.modal-box h2{

    margin-bottom:20px;

    color:#2c7a3f;

}

.modal-box label{

    display:block;

    margin-top:15px;
    margin-bottom:6px;

    font-weight:bold;

}

.modal-box input,
.modal-box select{

    width:100%;

    padding:10px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:15px;

}

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:25px;

}

.modal-buttons button{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

}

#btnAnnulla{

    background:#9e9e9e;
    color:white;

}

#btnSalva{

    background:#2c7a3f;
    color:white;

}

#btnSalva:hover{

    background:#256733;

}
/* ==========================================
   SCHEDA CLIENTE
========================================== */

.scheda-cliente{

    background:white;

    border-radius:12px;

    padding:18px;

}

.scheda-titolo{

    font-size:22px;

    color:#2c7a3f;

    margin-bottom:15px;

}

#mappaViewport{

    width:100%;

    overflow:auto;

    -webkit-overflow-scrolling:touch;

}

.controlli-mappa{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:10px;

}

.controlli-mappa button{

    min-width:44px;

    min-height:40px;

    border:1px solid #b8cabb;

    border-radius:8px;

    background:white;

    color:#245f34;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}

#btnStatistiche{

    background:#1976d2;

    color:white;

    border:none;

    border-radius:8px;

    padding:10px 16px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

}

#btnManuale{

    background:#546e7a;
    color:white;
    border:none;
    border-radius:8px;
    padding:10px 16px;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;

}

#btnEsportaBackup,
#btnRipristinaBackup{

    background:#455a64;
    color:white;
    border:none;
    border-radius:8px;
    padding:10px 12px;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;

}

#btnTariffe{

    background:#6a1b9a;

    color:white;

    border:none;

    border-radius:8px;

    padding:10px 16px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

}

#btnIncassi{

    background:#e66a00;

    color:white;

    border:none;

    border-radius:8px;

    padding:10px 16px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

}

#btnEsci{

    min-height:36px;

    padding:8px 12px;

    border:1px solid #9e9e9e;

    border-radius:8px;

    background:white;

    color:#555;

    cursor:pointer;

}

.link-esci{
    text-decoration:none;
    text-align:center;
}

@media(max-width:700px){
    .menu-mobile .link-esci{display:block;min-height:42px;border:0;border-radius:8px;background:#f3f5f7;text-align:left;padding:11px 12px;font-size:15px;color:#b3261e;}
}

.badge-incassi{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    margin-left:6px;

    padding:0 5px;

    border-radius:10px;

    background:#d32f2f;

    color:white;

    font-size:12px;

    font-weight:bold;

}

.modal-accesso{

    width:400px;

    text-align:left;

}

.modal-accesso h2{

    margin-bottom:10px;

}

.btn-accesso{

    width:100%;

    min-height:48px;

    margin-top:20px;

    border:0;

    border-radius:8px;

    background:#2c7a3f;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

.btn-link{

    width:100%;

    margin-top:12px;

    border:0;

    background:transparent;

    color:#1976d2;

    text-decoration:underline;

    cursor:pointer;

}

body.collaboratore #btnPrenota,
body.collaboratore #btnTariffe,
body.collaboratore #btnStatistiche,
body.collaboratore #btnEsportaBackup,
body.collaboratore #btnRipristinaBackup,
body.collaboratore #btnModifica,
body.collaboratore #btnPostazioni,
body.collaboratore #btnElimina{

    display:none;

}

body.non-autenticato header,
body.non-autenticato main,
body.non-autenticato #scheda{

    display:none !important;

}

#btnAnnullaTariffe{

    background:#9e9e9e;

    color:white;

}

#btnSalvaTariffe{

    background:#2c7a3f;

    color:white;

}

.navigazione-data{

    display:flex;

    align-items:center;

    gap:6px;

}

.navigazione-data button{

    min-width:36px;

    height:36px;

    padding:0 8px;

    border:1px solid #ccc;

    border-radius:8px;

    background:#fff;

    color:#2c7a3f;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

.btn-chiudi-scheda{

    float:right;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:#f1f1f1;
    color:#555;
    font-size:24px;
    line-height:1;
    cursor:pointer;

}

.scheda-dati{

    display:grid;

    grid-template-columns:130px 1fr;

    row-gap:10px;

    column-gap:10px;

}

.scheda-sdraie{

    margin-top:18px;

    padding-top:15px;

    border-top:1px solid #ddd;

}

.scheda-azioni{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.scheda-azioni button{

    flex:1;

    padding:10px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

}

#btnModifica{

    background:#1976d2;

    color:white;

}

#btnElimina{

    background:#d32f2f;

    color:white;

}
/* ==========================================
   EVIDENZIA GRUPPO
========================================== */

.sdraia.highlight{

    outline:4px solid #FFD600;

    outline-offset:2px;

    transform:scale(1.12);

    transition:.2s;

}
/* ==========================================
   BARRA STATO
========================================== */

#barraStato{

    display:flex;

    gap:18px;

    align-items:center;

    font-weight:bold;

    font-size:15px;

    margin-left:20px;

}

#libere{

    color:#2e7d32;

}

#occupate{

    color:#c62828;

}
/* ==========================================
   ERRORI FORM
========================================== */

.errore{

    color:#d32f2f;

    font-size:13px;

    min-height:18px;

    margin-top:3px;

}

.inputErrore{

    border:2px solid #d32f2f !important;

}

/*==========================================
    NUOVO LAYOUT MODAL
==========================================*/

.modal-box{

    width:420px;

    max-width:95vw;

}

.riga{

    display:flex;

    gap:12px;

    margin-top:6px;

}

.campo{

    flex:1;

}

.modal-box label{

    display:block;

    font-size:13px;

    font-weight:600;

    margin-top:8px;

    margin-bottom:3px;

}

.modal-box input,
.modal-box select{

    width:100%;

    box-sizing:border-box;

}

.check{

    display:flex !important;

    align-items:center;

    gap:8px;

    margin-top:10px;

}

.check input{

    width:auto !important;

}

.modal-buttons{

    margin-top:18px;

}

/*==========================================
    PULSANTE CHIUSURA MODAL
==========================================*/

.btn-close{

    width:36px;
    height:36px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    color:#666;

    font-size:26px;

    line-height:1;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:center;

    align-items:center;

}

.btn-close:hover{

    background:#e53935;

    color:white;

    transform:rotate(90deg) scale(1.1);

}

/*==========================================
    HEADER DEL MODAL
==========================================*/

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.modal-header h2{

    margin:0;

    color:#2c7a3f;

}
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.no-spin{
    -moz-appearance:textfield;
    appearance:textfield;
}

.scheda-contatti{

    display:flex;

    gap:10px;

    margin-top:16px;

}

.btn-contatto{

    flex:1;

    padding:10px;

    border-radius:8px;

    color:white;

    text-align:center;

    text-decoration:none;

    font-size:15px;

}

.btn-chiama{

    background:#1976d2;

}

.btn-whatsapp{

    background:#25d366;

}

.btn-sumup{

    border:0;

    background:#6138f5;

    cursor:pointer;

}

.btn-sumup:disabled{

    opacity:.65;

    cursor:wait;

}

@media(max-width:700px){

    .scheda-azioni,
    .scheda-contatti{

        flex-direction:column;

    }

    .scheda-azioni button,
    .btn-contatto{

        flex:none;

        width:100%;

    }

}

@media(max-width:700px){

    #scheda{

        min-height:48px;

        padding:10px 12px;

        line-height:1.35;

    }

}

/* Le regole finali prevalgono sui vecchi layout mobili. */
@media(max-width:700px){

    header{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px;align-items:center;padding:7px 8px 6px;}
    .logo{grid-column:1;width:auto;}
    .logo img{width:38px;height:38px;}
    .logo > div{display:none;}
    .azioni{display:contents;}

    .navigazione-data{grid-column:2;grid-row:1;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;min-height:38px;width:auto;}
    .navigazione-data #btnOggi{display:none;}
    .navigazione-data #data,.navigazione-data button{min-height:38px;height:38px;padding:3px;font-size:14px;}

    #barraStato{grid-column:1 / -1;grid-row:2;display:flex;justify-content:center;gap:14px;margin:0;font-size:12px;width:auto;}
    #barraStato .check{display:none;}

    #btnPrenota,#btnStatistiche,#btnTariffe,#btnIncassi,#btnEsci,#btnEsportaBackup,#btnRipristinaBackup{display:none !important;}
    .btn-menu-mobile{display:block;grid-column:3;grid-row:1;width:42px;height:38px;border:0;border-radius:9px;background:#f0f3f6;color:#234;font-size:24px;line-height:1;}

    .menu-mobile{position:fixed;top:54px;right:8px;z-index:1002;width:170px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.2);}
    .menu-mobile:not(.hidden){display:grid;gap:5px;}
    .menu-mobile button{min-height:42px;border:0;border-radius:8px;background:#f3f5f7;text-align:left;padding:0 12px;font-size:15px;}
    #btnEsciMobile{color:#b3261e;}

    main{position:relative;padding:8px 8px 120px;}
    .azioni-rapide-mobile{position:static;margin:0 4px 8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .azioni-rapide-mobile button{min-height:42px;border:0;border-radius:11px;color:#fff;font-size:15px;font-weight:bold;box-shadow:0 3px 10px rgba(0,0,0,.2);}
    #btnPrenotaMobile{background:#1976d2;}
    #btnIncassiMobile{background:#7b1fa2;}

    body.collaboratore #btnPrenotaMobile{display:none;}
    body.collaboratore .azioni-rapide-mobile{grid-template-columns:1fr;left:25%;right:25%;}
    body.collaboratore #btnTariffeMobile,body.collaboratore #btnStatisticheMobile,body.collaboratore #btnEsportaBackupMobile,body.collaboratore #btnRipristinaBackupMobile{display:none;}

}

/* ==========================================
   BARRA COMPATTA SMARTPHONE
========================================== */

.btn-menu-mobile,
.menu-mobile,
.azioni-rapide-mobile{

    display:none;

}

@media(max-width:700px){

    header{

        display:grid;

        grid-template-columns:42px minmax(0, 1fr) 42px;

        gap:6px;

        align-items:center;

        padding:7px 8px 6px;

    }

    .logo{

        grid-column:1;

        width:auto;

    }

    .logo img{

        width:38px;

        height:38px;

    }

    .logo > div{

        display:none;

    }

    .azioni{

        display:contents;

    }

    .navigazione-data{

        grid-column:2;

        grid-row:1;

        display:grid;

        grid-template-columns:34px minmax(0, 1fr) 34px;

        gap:4px;

        min-height:38px;

    }

    .navigazione-data #btnOggi{

        display:none;

    }

    .navigazione-data #data,
    .navigazione-data button{

        min-height:38px;

        height:38px;

        padding:3px;

        font-size:14px;

    }

    #barraStato{

        grid-column:1 / -1;

        grid-row:2;

        display:flex;

        justify-content:center;

        gap:14px;

        margin:0;

        font-size:12px;

    }

    #barraStato .check{

        display:none;

    }

    #btnPrenota,
    #btnStatistiche,
    #btnTariffe,
    #btnIncassi,
    #btnEsci{

        display:none;

    }

    .btn-menu-mobile{

        display:block;

        grid-column:3;

        grid-row:1;

        width:42px;

        height:38px;

        border:0;

        border-radius:9px;

        background:#f0f3f6;

        color:#234;

        font-size:24px;

        line-height:1;

    }

    .menu-mobile{

        position:fixed;

        top:54px;

        right:8px;

        z-index:1002;

        width:170px;

        padding:6px;

        border-radius:12px;

        background:#fff;

        box-shadow:0 8px 22px rgba(0,0,0,.2);

    }

    .menu-mobile:not(.hidden){

        display:grid;

        gap:5px;

    }

    .menu-mobile button{

        min-height:42px;

        border:0;

        border-radius:8px;

        background:#f3f5f7;

        text-align:left;

        padding:0 12px;

        font-size:15px;

    }

    #btnEsciMobile{

        color:#b3261e;

    }

    .azioni-rapide-mobile{

        position:absolute;

        top:18px;

        left:14px;

        right:14px;

        z-index:20;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px;

        pointer-events:none;

    }

    .azioni-rapide-mobile button{

        min-height:42px;

        border:0;

        border-radius:11px;

        color:#fff;

        font-size:15px;

        font-weight:bold;

        box-shadow:0 3px 10px rgba(0,0,0,.2);

        pointer-events:auto;

    }

    #btnPrenotaMobile{

        background:#1976d2;

    }

    #btnIncassiMobile{

        background:#7b1fa2;

    }

    main{

        position:relative;

        padding:8px 8px 120px;

    }

    body.collaboratore #btnPrenotaMobile{

        display:none;

    }

    body.collaboratore .azioni-rapide-mobile{

        grid-template-columns:1fr;

        left:25%;

        right:25%;

    }

    body.collaboratore #btnTariffeMobile,
    body.collaboratore #btnStatisticheMobile{

        display:none;

    }

}

/* ==========================================
   ESPERIENZA MOBILE
========================================== */

@media(max-width:700px){

    body{

        font-size:16px;

    }

    header{

        padding:8px 12px 12px;

    }

    .logo{

        width:100%;

        gap:8px;

    }

    .logo h1{

        font-size:18px;

    }

    .logo p{

        font-size:13px;

    }

    .azioni{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px;

    }

    .navigazione-data,
    #btnPrenota,
    #btnStatistiche,
    #btnTariffe,
    #btnIncassi,
    #btnEsci,
    #barraStato{

        grid-column:1 / -1;

        width:100%;

    }

    .navigazione-data,
    #btnPrenota,
    #btnStatistiche,
    #btnTariffe,
    #btnIncassi,
    #btnEsci{

        min-height:48px;

        font-size:16px;

    }

    .navigazione-data{

        display:grid;

        grid-template-columns:44px 1fr 58px 44px;

        gap:6px;

    }

    .navigazione-data #data,
    .navigazione-data button{

        width:100%;

        min-height:48px;

        height:48px;

        font-size:16px;

    }

    #barraStato{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:6px 10px;

        margin:0;

        font-size:14px;

    }

    #barraStato .check{

        grid-column:1 / -1;

    }

    main{

        padding:10px 8px 120px;

    }

    #mappa{

        width:100%;

    }

    .sdraia{

        width:5.333%;

        height:6.613%;

        font-size:clamp(9px, 2.1vw, 10px);

    }

    .sdraia.orizzontale{

        width:10.333%;

        height:3.413%;

    }

    #scheda{

        max-height:48dvh;

        overflow-y:auto;

        padding:12px;

        font-size:16px;

    }

    .scheda-cliente{

        padding:14px;

    }

    .scheda-dati{

        grid-template-columns:105px 1fr;

        font-size:15px;

    }

    .modal{

        align-items:flex-end;

    }

    .modal-box{

        width:100%;

        max-width:none;

        max-height:92dvh;

        overflow-y:auto;

        overscroll-behavior:contain;

        border-radius:20px 20px 0 0;

        padding:18px 16px calc(16px + env(safe-area-inset-bottom));

    }

    #mappa{

        margin:0;

    }

    .controlli-mappa button{

        min-width:52px;

        min-height:48px;

    }

    .modal-incassi{

        width:100%;

    }

    .scheda-incasso{

        grid-template-columns:1fr auto;

    }

    .scheda-incasso > div:first-child{

        grid-column:1 / -1;

    }

    .modal-box input,
    .modal-box select,
    .modal-box textarea{

        min-height:48px;

        padding:12px;

        font-size:16px;

    }

    .modal-box label{

        font-size:14px;

        margin-top:12px;

    }

    .riga{

        gap:10px;

    }

    .modal-buttons{

        position:sticky;

        bottom:-18px;

        margin:18px -16px -16px;

        padding:12px 16px calc(12px + env(safe-area-inset-bottom));

        background:#fff;

        box-shadow:0 -4px 12px rgba(0,0,0,.08);

    }

    .modal-buttons button{

        flex:1;

        min-height:48px;

        padding:12px;

        font-size:16px;

        font-weight:bold;

    }

    .btn-close{

        width:44px;

        height:44px;

    }

}

.modal-incassi{

    width:560px;

}

.modal-incassi > select{

    margin-top:10px;

}

.lista-incassi{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:14px;

}

.scheda-incasso{

    display:grid;

    grid-template-columns:1fr auto auto;

    align-items:center;

    gap:12px;

    padding:12px;

    border:1px solid #d8e3da;

    border-radius:10px;

}

.scheda-incasso > div:first-child{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.scheda-incasso span{

    font-size:13px;

    color:#5d6b60;

}

.importi-incasso{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.scheda-incasso button{

    min-height:42px;

    padding:8px 12px;

    border:0;

    border-radius:8px;

    color:white;

    font-weight:bold;

    cursor:pointer;

}

.scheda-incasso button:disabled{

    cursor:default;

}

.scheda-incasso button.incasso-da-saldare{

    background:#d32f2f;

}

.scheda-incasso button.incasso-saldato{

    background:#2c7a3f;

}

.lista-vuota{

    padding:18px 0;

    text-align:center;

    color:#5d6b60;

}

.tariffe-speciali{

    margin-top:18px;

    padding-top:14px;

    border-top:1px solid #ddd;

}

.btn-secondario{

    width:100%;

    min-height:42px;

    margin-top:12px;

    border:1px solid #2c7a3f;

    border-radius:8px;

    background:white;

    color:#2c7a3f;

    font-weight:bold;

    cursor:pointer;

}

.lista-tariffe-speciali{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:12px;

}

.riga-tariffa-speciale{

    display:grid;

    grid-template-columns:1fr auto 34px;

    align-items:center;

    gap:10px;

    padding:9px 10px;

    border-radius:8px;

    background:#f3f7f4;

}

.riga-tariffa-speciale button{

    width:30px;

    height:30px;

    border:0;

    border-radius:50%;

    background:#d32f2f;

    color:white;

    font-size:20px;

    cursor:pointer;

}

/* I pagamenti vengono registrati dalla sezione Incassi. */
.modal-box .riga:has(#txtAcconto){

    display:none;

}

.scheda-statistiche{

    background:white;

    border-radius:12px;

    padding:18px;

}

.griglia-statistiche{

    display:grid;

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

    gap:10px;

}

.selettore-statistiche{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:6px;

    margin-bottom:12px;

}

.selettore-statistiche button{

    min-height:38px;

    border:1px solid #b8cabb;

    border-radius:8px;

    background:white;

    color:#245f34;

    font-weight:bold;

    cursor:pointer;

}

.selettore-statistiche button.attivo{

    background:#2c7a3f;

    border-color:#2c7a3f;

    color:white;

}

.griglia-statistiche div{

    display:flex;

    flex-direction:column;

    gap:5px;

    padding:12px;

    border-radius:8px;

    background:#f3f7f4;

}

.griglia-statistiche span{

    font-size:13px;

    color:#5d6b60;

}

.griglia-statistiche strong{

    font-size:18px;

    color:#245f34;

}

.nota-statistiche{

    margin-top:12px;

    font-size:13px;

    color:#6b5a00;

}

/* ==========================================
   ALLINEAMENTO BARRA DESKTOP
========================================== */

@media(min-width:701px){

    .azioni{

        margin-left:auto;

        align-items:center;

        gap:12px;

    }

    .navigazione-data{

        height:40px;

        align-items:center;

    }

    .navigazione-data #data,
    .navigazione-data button,
    #btnPrenota,
    #btnStatistiche,
    #btnTariffe,
    #btnIncassi,
    #btnEsci{

        height:40px;

        min-height:40px;

        display:inline-flex;

        align-items:center;

        justify-content:center;

    }

    .navigazione-data #data{

        display:block;

    }

    #barraStato{

        height:40px;

        margin-left:0;

        gap:12px;

        align-items:center;

        white-space:nowrap;

    }

    #barraStato .check{

        height:40px;

        margin:0;

        align-items:center;

        white-space:nowrap;

    }

}

@media(max-width:700px){

    .selettore-statistiche{

        grid-template-columns:repeat(2, 1fr);

    }

    .modal-incassi{

        width:100%;

    }

    .scheda-incasso{

        grid-template-columns:1fr auto;

    }

    .scheda-incasso > div:first-child{

        grid-column:1 / -1;

    }

}

/* Layout compatto: dichiarato per ultimo per prevalere sul CSS storico. */
@media(max-width:700px){
    header{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px;align-items:center;padding:7px 8px 6px;}
    .logo{grid-column:1;width:auto;}
    .logo img{width:38px;height:38px;}
    .logo > div{display:none;}
    .azioni{display:contents;}
    .navigazione-data{grid-column:2;grid-row:1;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;min-height:38px;width:auto;}
    .navigazione-data #btnOggi{display:none;}
    .navigazione-data #data,.navigazione-data button{min-height:38px;height:38px;padding:3px;font-size:14px;}
    #barraStato{grid-column:1 / -1;grid-row:2;display:flex;justify-content:center;gap:14px;margin:0;font-size:12px;width:auto;}
    #barraStato .check{display:none;}
    #btnPrenota,#btnStatistiche,#btnTariffe,#btnIncassi,#btnEsci,#btnEsportaBackup,#btnRipristinaBackup{display:none !important;}
    .btn-menu-mobile{display:block;grid-column:3;grid-row:1;width:42px;height:38px;border:0;border-radius:9px;background:#f0f3f6;color:#234;font-size:24px;line-height:1;}
    .menu-mobile{position:fixed;top:54px;right:8px;z-index:1002;width:170px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.2);}
    .menu-mobile:not(.hidden){display:grid;gap:5px;}
    .menu-mobile button{min-height:42px;border:0;border-radius:8px;background:#f3f5f7;text-align:left;padding:0 12px;font-size:15px;}
    #btnEsciMobile{color:#b3261e;}
    main{position:relative;padding:8px 8px 120px;}
    .azioni-rapide-mobile{position:static;margin:0 4px 8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .azioni-rapide-mobile button{min-height:42px;border:0;border-radius:11px;color:#fff;font-size:15px;font-weight:bold;box-shadow:0 3px 10px rgba(0,0,0,.2);}
    #btnPrenotaMobile{background:#1976d2;}
    #btnIncassiMobile{background:#7b1fa2;}
    body.collaboratore #btnPrenotaMobile{display:none;}
    body.collaboratore .azioni-rapide-mobile{grid-template-columns:1fr;left:25%;right:25%;}
    body.collaboratore #btnTariffeMobile,body.collaboratore #btnStatisticheMobile,body.collaboratore #btnEsportaBackupMobile,body.collaboratore #btnRipristinaBackupMobile{display:none;}
}

@media(max-width:700px){
    #scheda{min-height:48px;padding:10px 12px;line-height:1.35;}
    #scheda.selezione-attiva{pointer-events:none;}
}

/* Controlli pratici per inserimento e consultazione da smartphone. */
.number-stepper{display:flex;align-items:stretch;gap:5px;}
.number-stepper input{min-width:0;text-align:center;}
.number-stepper button{width:46px;min-height:46px;border:0;border-radius:9px;background:#1976d2;color:#fff;font-size:28px;font-weight:bold;line-height:1;cursor:pointer;box-shadow:0 2px 5px rgba(25,118,210,.28);}
.telefono-conferma{display:flex;gap:7px;align-items:stretch;}
.telefono-conferma input{min-width:0;flex:1;}
.telefono-conferma button{min-width:52px;border:0;border-radius:8px;background:#1976d2;color:#fff;font-weight:bold;font-size:15px;cursor:pointer;}

#btnSalvaScelta{margin-left:8px;min-height:36px;padding:7px 11px;border:0;border-radius:8px;background:#1976d2;color:#fff;font-weight:bold;font-size:14px;cursor:pointer;}

@media(max-width:700px){
    #btnManuale{display:none !important;}
}
.riepilogo-prossime-prenotazioni{margin-top:16px;border-top:1px solid #e2e7eb;padding-top:12px;}
.riepilogo-prossime-prenotazioni h3{margin:0 0 8px;font-size:16px;color:#16324a;}
.riepilogo-prossime-prenotazioni p{margin:0;color:#667;}
.riga-prossima-prenotazione{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf0f2;font-size:14px;}
@media(max-width:700px){
    .navigazione-data{grid-template-columns:34px minmax(0,1fr) 42px 34px !important;}
    .navigazione-data #btnOggi{display:block !important;font-size:12px !important;}
    .riga-prossima-prenotazione{grid-template-columns:auto 1fr;}
    .riga-prossima-prenotazione span:last-child{grid-column:2;color:#52606d;}
}