/*
==========================================================
COHERENCE PORTALE PROFESSIONISTI
Responsive comune
Priorità: TABLET -> TELEFONO -> DESKTOP
==========================================================
*/


/* -------------------------------------------------------
   BASE TOUCH
------------------------------------------------------- */

button,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.action-placeholder,
input[type="submit"],
input[type="button"] {
    touch-action: manipulation;
}

input,
select,
textarea,
button {
    font-family: inherit;
}


/* =======================================================
   TABLET
   iPad / tablet Android / tablet portrait e landscape
======================================================= */

@media (max-width: 1024px) {

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }


    /* ---------------- HEADER ---------------- */

    .topbar,
    header {
        min-height: 64px;
    }

    .topbar {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .topbar-inner {
        width: 100%;
        max-width: 100% !important;
        gap: 14px;
    }

    .brand {
        line-height: 1.2;
    }


    /* ---------------- CONTENITORI ---------------- */

    .page,
    .portal-shell,
    .container,
    .wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .portal-shell {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    /* ---------------- TITOLI ---------------- */

    h1 {
        line-height: 1.12;
    }

    h2,
    h3 {
        line-height: 1.2;
    }


    /* ---------------- CARD ---------------- */

    .card,
    .hero,
    .table-card,
    .totals,
    .payments {
        max-width: 100%;
    }


    /* ---------------- DASHBOARD ---------------- */

    .dashboard-grid,
    .dashboard-layout,
    .main-grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-grid,
    .kpis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .kpi-card {
        min-height: 105px;
    }


    /* ---------------- CLIENTI ---------------- */

    .clients-grid,
    .client-grid,
    .clienti-grid {
        grid-template-columns: 1fr !important;
    }

    .client-row,
    .cliente-row {
        min-height: 58px;
    }


    /* ---------------- SCHEDA CENTRO ---------------- */

    .center-grid,
    .centro-grid,
    .scheda-grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .action-placeholder {
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px !important;
        text-align: center;
    }


    /* ---------------- FORM ---------------- */

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px;
    }

    button,
    .btn {
        min-height: 48px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }


    /* ---------------- ORDINE ---------------- */

    .qty {
        min-width: 74px;
        min-height: 48px;
        font-size: 17px !important;
    }

    table th,
    table td {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }


    /* ---------------- PAGAMENTO ---------------- */

    .payments {
        padding: 18px !important;
    }

    .payment {
        min-height: 56px;
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 10px 6px !important;
        cursor: pointer;
    }

    .payment input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
        flex: 0 0 auto;
    }


    /* ---------------- AZIONI ---------------- */

    .actions {
        gap: 14px;
    }

    .actions .btn {
        min-width: 145px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}



/* =======================================================
   TELEFONO
======================================================= */

@media (max-width: 640px) {

    body {
        font-size: 15px;
    }


    /* ---------------- HEADER ---------------- */

    .topbar {
        padding: 14px 14px !important;
    }

    .topbar-inner {
        align-items: center;
    }

    .brand,
    .topbar strong {
        font-size: 13px !important;
    }

    .topbar .back,
    .back {
        font-size: 13px !important;
        white-space: nowrap;
    }


    /* ---------------- CONTENITORI ---------------- */

    .page {
        padding: 20px 12px 44px !important;
    }

    .portal-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 44px !important;
    }

    .wrap {
        margin: 30px auto !important;
        padding: 12px !important;
    }


    /* ---------------- HERO / TITOLI ---------------- */

    .hero {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    h1 {
        font-size: 25px !important;
        line-height: 1.08 !important;
    }

    h2 {
        font-size: 20px !important;
    }

    .sub {
        font-size: 14px;
        line-height: 1.45;
    }


    /* ---------------- CARD ---------------- */

    .card,
    .table-card,
    .totals,
    .payments {
        border-radius: 15px !important;
    }


    /* ---------------- KPI ---------------- */

    .kpi-grid,
    .kpis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .kpi-card {
        min-width: 0;
        min-height: 98px;
        padding: 12px 8px !important;
    }

    .kpi-name {
        font-size: 11px !important;
    }

    .kpi-value {
        font-size: 21px !important;
    }


    /* ---------------- AZIONI CENTRO ---------------- */

    .actions-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .actions-grid > a {
        display: block;
        width: 100%;
    }

    .action-placeholder {
        width: 100%;
        min-height: 54px;
    }


    /* ---------------- TABELLA ORDINE ---------------- */

    .table-card {
        overflow: visible !important;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }

    table th,
    table td {
        padding: 12px 8px !important;
        font-size: 13px;
    }

    table th:first-child,
    table td:first-child {
        width: auto;
    }

    .product {
        font-size: 14px;
        line-height: 1.25;
    }

    .note {
        font-size: 11px !important;
        line-height: 1.3;
    }

    .price {
        font-size: 14px;
    }

    .qty {
        width: 64px !important;
        min-width: 64px !important;
        min-height: 48px;
        padding: 7px !important;
    }


    /* ---------------- RIEPILOGO ORDINE ---------------- */

    .row {
        grid-template-columns:
            minmax(0, 1fr)
            48px
            82px !important;

        gap: 6px !important;
        padding: 13px 10px !important;
    }

    .row > * {
        min-width: 0;
    }

    .row > *:nth-child(3) {
        display: none !important;
    }

    .row.header > *:nth-child(3) {
        display: none !important;
    }

    .row strong {
        overflow-wrap: anywhere;
    }


    /* ---------------- TOTALI ---------------- */

    .totals {
        padding: 16px !important;
    }

    .total-line {
        gap: 16px;
    }

    .grand {
        font-size: 19px !important;
    }


    /* ---------------- PAGAMENTO ---------------- */

    .payments {
        padding: 16px !important;
    }

    .payment {
        min-height: 60px;
        font-size: 16px;
        border-top: 1px solid #edf1ef;
    }

    .payment:first-of-type {
        margin-top: 8px;
    }


    /* ---------------- BOTTONI ---------------- */

    .actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 10px !important;
    }

    .actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    /* ---------------- LOGIN ---------------- */

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

    input[type="email"],
    input[type="password"] {
        font-size: 16px !important;
    }
}



/* =======================================================
   TELEFONI MOLTO STRETTI
======================================================= */

@media (max-width: 390px) {

    .kpi-grid,
    .kpis-grid {
        grid-template-columns: 1fr !important;
    }

    h1 {
        font-size: 23px !important;
    }

    .row {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            74px !important;
    }

    .actions {
        grid-template-columns: 1fr !important;
    }
}



/* =======================================================
   LANDSCAPE MOBILE / TABLET
======================================================= */

@media (max-height: 600px) and (orientation: landscape) {

    .page {
        padding-top: 18px !important;
        padding-bottom: 32px !important;
    }

    .hero {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .payment {
        min-height: 48px;
    }
}


/* ======================================================
   ORDINI APERTI - DASHBOARD
====================================================== */

.portal-orders-open-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-top:7px;
    padding:6px 9px;
    border-radius:999px;
    background:#edf4f1;
    color:#174b3a !important;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.portal-orders-open-link strong{
    font-size:13px;
}

@media(max-width:640px){

    .portal-orders-open-link{
        min-height:38px;
        width:100%;
        margin-top:8px;
    }
}