/* =========================================================
   MERCANTICO - MOBILE TABELLARE
   Mantiene le tabelle su mobile, senza trasformarle in schede.
   ========================================================= */

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

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
video,
canvas,
svg,
iframe{
    max-width:100%;
    height:auto;
}

input,
select,
textarea,
button,
a{
    max-width:100%;
}

.main{
    min-width:0;
    max-width:100%;
}

.flash{
    overflow-wrap:anywhere;
}

/* Topbar e menu mobile */
.mobile-topbar{
    display:none;
    position:sticky;
    top:0;
    z-index:9000;
    height:56px;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    background:linear-gradient(#4b4b4b,#333);
    color:#fff;
    border-bottom:3px solid #155e63;
    box-shadow:0 2px 8px rgba(0,0,0,.22);
}

.mobile-topbar strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:20px;
    color:#cce7e8;
    text-shadow:0 1px 1px #000;
}

.mobile-sale{
    margin-left:auto;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:900;
    padding:8px 11px;
    border-radius:9px;
    background:linear-gradient(#2f7a7e,#155e63);
    border:1px solid rgba(0,0,0,.25);
    position:relative;
    z-index:9002;
    white-space:nowrap;
}

.menu-toggle{
    width:44px;
    height:40px;
    min-width:44px;
    border:1px solid rgba(0,0,0,.3);
    border-radius:9px;
    background:linear-gradient(#666,#3f3f3f);
    display:grid;
    place-items:center;
    gap:3px;
    padding:8px;
    cursor:pointer;
    position:relative;
    z-index:9002;
}

.menu-toggle span{
    display:block;
    width:22px;
    height:3px;
    background:#fff;
    border-radius:99px;
}

.side-backdrop{
    display:none;
}

/* Tabelle sempre tabellari */
.table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    border-radius:10px;
}

main table{
    border-collapse:collapse;
}

main table th,
main table td{
    white-space:nowrap;
    vertical-align:middle;
}

/* Celle testuali lunghe: non rompono tutta la pagina */
main table td{
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Colonne azioni più usabili */
main table td:last-child,
main table th:last-child{
    max-width:none;
}

main table td:last-child{
    white-space:normal;
    min-width:150px;
}

main table td:last-child .btn,
main table td:last-child button,
main table td:last-child a{
    margin:2px;
}

/* Form e pannelli */
.panel,
.card,
.box,
.form-card,
.dashboard-card,
.stat,
.widget,
fieldset{
    max-width:100%;
    overflow:hidden;
}

.grid,
.cards,
.stats,
.row,
.form-grid,
.dashboard-grid,
.kpi-grid{
    max-width:100%;
    min-width:0;
}

form{
    max-width:100%;
}

label{
    max-width:100%;
    overflow-wrap:anywhere;
}

input,
select,
textarea{
    width:100%;
    min-width:0;
    font-size:16px;
}

input[type="checkbox"],
input[type="radio"]{
    width:auto;
}

textarea{
    min-height:110px;
    resize:vertical;
}

.btn,
button,
input[type="submit"],
input[type="button"],
a.button{
    max-width:100%;
    overflow-wrap:anywhere;
    text-align:center;
}

.modal,
.qrscan-box{
    max-width:calc(100vw - 24px) !important;
}

/* Mobile */
@media(max-width:980px){
    body{
        padding:0 !important;
    }

    .mobile-topbar{
        display:flex !important;
    }

    .side{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        bottom:0 !important;
        width:min(86vw,320px) !important;
        height:100vh !important;
        max-height:100vh !important;
        padding:14px 10px 120px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        transform:translateX(-105%) !important;
        transition:transform .22s ease !important;
        z-index:9200 !important;
        visibility:visible !important;
        display:block !important;
    }

    body.menu-open .side{
        transform:translateX(0) !important;
    }

    .side-backdrop{
        position:fixed !important;
        inset:0 !important;
        background:rgba(0,0,0,.38) !important;
        z-index:9100 !important;
        display:none !important;
        pointer-events:auto !important;
    }

    body.menu-open .side-backdrop{
        display:block !important;
    }

    body.menu-open{
        overflow:hidden !important;
    }

    .main{
        margin-left:0 !important;
        width:100% !important;
        max-width:100% !important;
        padding:12px 10px 80px !important;
        overflow-x:hidden !important;
    }

    h1{
        font-size:24px !important;
        line-height:1.15 !important;
        overflow-wrap:anywhere;
        margin:10px 0 12px !important;
    }

    h2{
        font-size:19px !important;
        line-height:1.2 !important;
    }

    .panel,
    .card,
    .box,
    .form-card,
    .dashboard-card,
    .stat,
    .widget,
    fieldset{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:12px !important;
        border-radius:10px !important;
    }

    .grid,
    .cards,
    .stats,
    .row,
    .form-grid,
    .dashboard-grid,
    .kpi-grid{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    .grid > *,
    .cards > *,
    .stats > *,
    .row > *,
    .form-grid > *,
    .dashboard-grid > *,
    .kpi-grid > *{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        margin-bottom:10px !important;
    }

    .toolbar,
    .filters,
    .filterbar,
    .searchbar,
    .actions,
    .btn-row,
    .form-row,
    .field-row{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    .toolbar > *,
    .filters > *,
    .filterbar > *,
    .searchbar > *,
    .actions > *,
    .btn-row > *,
    .form-row > *,
    .field-row > *{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 8px 0 !important;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    a.button{
        min-height:40px;
        padding:9px 10px;
    }

    /* Ripristino tabellare mobile */
    .table-wrap{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        -webkit-overflow-scrolling:touch !important;
        border:1px solid #ddd;
        background:#fff;
    }

    main table{
        display:table !important;
        width:max-content !important;
        min-width:100% !important;
        max-width:none !important;
        border-collapse:collapse !important;
        overflow:visible !important;
    }

    main table thead{
        display:table-header-group !important;
    }

    main table tbody{
        display:table-row-group !important;
    }

    main table tr{
        display:table-row !important;
        width:auto !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    main table tr:first-child{
        display:table-row !important;
    }

    main table th,
    main table td{
        display:table-cell !important;
        width:auto !important;
        max-width:220px !important;
        padding:8px 9px !important;
        border:1px solid #ddd !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        vertical-align:middle !important;
    }

    main table td::before{
        content:none !important;
        display:none !important;
    }

    main table th{
        position:sticky;
        top:0;
        z-index:2;
        background:#f2f2f2 !important;
        font-weight:900;
    }

    main table td:last-child,
    main table th:last-child{
        max-width:260px !important;
        min-width:150px !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }

    main table td a,
    main table td button,
    main table td .btn{
        width:auto !important;
        min-height:32px !important;
        margin:2px !important;
        padding:6px 8px !important;
        display:inline-flex !important;
    }

    .table-pagination,
    .pagination{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:6px !important;
        width:100% !important;
    }

    .table-pagination-info,
    .pagination-info{
        width:100%;
        margin-right:0 !important;
    }

    .table-pagination button,
    .pagination a,
    .pagination strong{
        width:auto !important;
        min-width:34px !important;
    }

    .modal{
        width:calc(100vw - 20px) !important;
        max-width:calc(100vw - 20px) !important;
        max-height:calc(100vh - 20px) !important;
        overflow:auto !important;
    }

    .qrscan-box{
        width:calc(100vw - 18px) !important;
        max-width:calc(100vw - 18px) !important;
        max-height:calc(100vh - 18px) !important;
    }

    .qrscan-camera{
        max-height:46vh;
    }
}

@media(max-width:420px){
    .mobile-topbar{
        gap:7px;
        padding-left:8px;
        padding-right:8px;
    }

    .mobile-topbar strong{
        font-size:18px;
    }

    .mobile-sale{
        padding:8px 9px;
        font-size:13px;
    }

    .main{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    main table th,
    main table td{
        max-width:190px !important;
        padding:7px 8px !important;
        font-size:13px;
    }
}

@media print{
    .mobile-topbar,
    .side,
    .side-backdrop,
    .table-pagination,
    .pagination{
        display:none !important;
    }

    .main{
        margin:0 !important;
        padding:0 !important;
    }

    main table{
        width:100% !important;
    }
}