/* ============================================================
   AREA RISERVATA — OTTIMIZZAZIONE MOBILE / TABLET
   Layer ADDITIVO caricato DOPO area-riservata.css.
   Obiettivo: resa "app-like" su smartphone e tablet senza
   toccare la logica delle pagine. Regole conservative:
   non cambiano il desktop, migliorano solo <= 991px.
   Breakpoint: tablet <= 991.98px, phone <= 575.98px.
   ============================================================ */

:root {
    --ar-safe-top: env(safe-area-inset-top, 0px);
    --ar-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Anti-overflow orizzontale ---------- */
html { -webkit-text-size-adjust: 100%; }
.ar-main-container { max-width: 100%; }
@media (max-width: 991.98px) {
    /* Niente scroll orizzontale di pagina su mobile/tablet. Lo mettiamo sul
       CONTENITORE del contenuto (NON sul body) per non rompere la navbar
       position:sticky. Le tabelle in .table-responsive mantengono il proprio
       scroll interno. Il desktop resta invariato. */
    .ar-main-container { overflow-x: hidden; }
}
/* Media e contenuti larghi non sfondano mai la pagina */
.ar-main-container img,
.ar-main-container svg,
.ar-main-container video,
.ar-main-container canvas,
.ar-main-container iframe { max-width: 100%; height: auto; }
/* I figli flex/grid possono restringersi (evita overflow da testo/nowrap) */
.ar-main-container .row > [class*="col"] { min-width: 0; }

/* ---------- Tabelle: scroll fluido su touch ---------- */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 991.98px) {
    /* Rete di sicurezza: una tabella NON dentro un wrapper responsive
       diventa scrollabile orizzontalmente invece di sfondare la pagina.
       (Le tabelle già in .table-responsive non sono toccate.) */
    .ar-main-container table:not(.table-responsive table):not(.ar-no-mobile-scroll) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   NIENTE ZOOM AUTOMATICO SU MOBILE — stessa regola dell'AdminPanel
   (vedi admin-neumorphism.css). Due cause distinte, due rimedi:

   1) FOCUS SUI CAMPI: iOS/Safari ingrandisce la pagina quando il
      controllo che riceve il focus ha font-size < 16px. Portiamo
      TUTTI i controlli a 16px su mobile/tablet (<= 1024px), con
      !important perche' molte view hanno .form-control-sm o
      font-size inline piu' piccoli. Vale anche per select
      (le "dropdown") e per i campi generati da flatpickr/select2.

   2) DOPPIO TAP: il browser ingrandisce al secondo tap ravvicinato,
      ed e' quello che si vede tappando checkbox, radio, switch e
      voci di tendina. `touch-action: manipulation` disattiva il
      doppio-tap-zoom lasciando intatti tap e scroll.

   Il meta viewport NON usa user-scalable=no: il pinch-zoom manuale
   dell'utente resta sempre disponibile (requisito di accessibilita').
   ============================================================ */
/* `pointer: coarse` estende la regola ai tablet grandi (iPad Pro in
   orizzontale sta a 1366px e uscirebbe dal solo limite di larghezza),
   senza toccare il desktop col mouse. */
@media (max-width: 1024px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    .input-group-text,
    .flatpickr-input,
    .select2-search__field,
    .choices__input,
    .ar-input, .ar-select {
        font-size: 16px !important;
    }
}

/* Niente zoom da doppio tap su NIENTE di tappabile: checkbox, radio,
   switch, dropdown, bottoni, link, celle di tabella cliccabili. */
a,
button,
label,
summary,
select,
textarea,
input,
.btn,
.nav-link,
.dropdown-item,
.form-check,
.form-check-input,
.form-check-label,
.form-switch,
.page-link,
.list-group-item-action,
[role="button"],
[data-bs-toggle],
[onclick] {
    touch-action: manipulation;
}

/* ---------- Touch target minimi (comodità/app-like) ---------- */
@media (max-width: 991.98px) {
    .btn:not(.btn-sm):not(.btn-close),
    .ar-btn:not(.ar-btn-sm) {
        min-height: 44px;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }
    /* pulsanti dentro tabelle/gruppi restano più compatti */
    .table .btn, .btn-group-sm .btn, .input-group .btn { min-height: 38px; }
    .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
    /* Le caselle di spunta si ingrandiscono per il dito; gli INTERRUTTORI no:
       forzarli a 1.25em quadrati li trasformava in un cerchietto uguale acceso
       e spento. La levetta la disegna area-riservata-shell.css. */
    .form-check-input:not(.form-switch .form-check-input) { width: 1.25em; height: 1.25em; margin-top: .15em; }
    .form-check:not(.form-switch) .form-check-label { padding-left: .15rem; }
}

/* ---------- Modali: a tutto schermo sui telefoni (come un'app) ----------
   ECCEZIONE `.arsn-dialog`: i promemoria della home sono avvisi brevi, non
   pagine. A tutto schermo risultavano ingombranti, quindi diventano un
   foglio che sale dal basso (vedi area-riservata-shell.css).

   ECCEZIONE `.hg-cam-dialog`: la finestra della fotocamera (inserimento rapido)
   si misura da sola sulla visualViewport. Il `min-height: 100vh` qui sotto e'
   veleno per lei: su iPhone `100vh` e' il viewport GRANDE, quello senza le barre
   di Safari, quindi con le barre aperte la finestra risultava piu' alta dello
   schermo — e siccome la finestra e' anche centrata, debordava meta' sopra e
   meta' sotto: testata fuori in alto, comandi fuori in basso, irraggiungibili.
   Le due misure qui sotto vincono per specificita' su qualunque foglio di
   pagina, quindi l'unico modo di lasciarle fuori e' escluderle qui. */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm):not(.arsn-dialog):not(.prof-dialog):not(.hg-cam-dialog) {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm):not(.arsn-dialog):not(.prof-dialog):not(.hg-cam-dialog) .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    /* header/footer del modale ben tappabili e footer che va a capo */
    .modal-footer { position: sticky; bottom: 0; background: #fff; gap: .5rem; }
    .modal-footer .btn { flex: 1 1 auto; }
    .modal-body { -webkit-overflow-scrolling: touch; }
}

/* ---------- Form: campi a piena larghezza e ben distanziati ---------- */
@media (max-width: 767.98px) {
    .ar-main-container .form-control,
    .ar-main-container .form-select { width: 100%; }
    /* barre di filtri/azioni: vanno a capo invece di sfondare */
    .ar-toolbar, .d-flex.flex-nowrap.ar-toolbar { flex-wrap: wrap !important; }
    /* input-group larghi si adattano */
    .input-group { flex-wrap: wrap; }
}

/* ---------- Card / spaziature più ariose su mobile ---------- */
@media (max-width: 575.98px) {
    .ar-main-container .card-body { padding: 1rem; }
    .ar-main-container .container,
    .ar-main-container .container-fluid { padding-left: 12px; padding-right: 12px; }
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.4rem; }
    h3, .h3 { font-size: 1.2rem; }
    /* gruppi di bottoni a piena larghezza (azioni principali) */
    .ar-actions-fullwidth .btn { width: 100%; }
}

/* ---------- Navbar: modalità "app drawer" quando collassa (<= 1199px) ----------
   Con navbar-expand-xl la barra collassa a hamburger su TUTTI i telefoni e tablet
   (anche in orizzontale). Qui il menu a tendina diventa un drawer verticale pulito
   e ben tappabile. Su desktop (>= 1200px) resta la barra orizzontale invariata. */
@media (max-width: 1199.98px) {
    .ar-navbar { padding-top: var(--ar-safe-top); }

    /* Il drawer scrolla se le voci non entrano nello schermo */
    .ar-navbar .navbar-collapse {
        max-height: calc(100vh - 58px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    /* Voci a piena larghezza e tappabili */
    .ar-navbar .navbar-nav { width: 100%; }
    .ar-navbar .nav-item { width: 100%; }
    .ar-navbar .nav-link {
        padding: 12px 14px;
        margin: 2px 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
    }
    /* la sottolineatura "attivo" era pensata per la barra orizzontale */
    .ar-navbar .nav-link.active::after { display: none; }

    /* Sotto-menu (dropdown) come lista rientrata dentro il drawer */
    .ar-navbar .dropdown-menu {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
        margin: 0 0 4px .75rem;
        padding-left: .25rem;
        width: auto;
    }
    .ar-navbar .dropdown-item {
        color: rgba(255, 255, 255, 0.78);
        padding: 11px 12px;
        border-radius: 6px;
        white-space: normal;
    }
    .ar-navbar .dropdown-item:hover,
    .ar-navbar .dropdown-item.active {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }
    .ar-navbar .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); }

    /* La barra destra (Impostazioni/Esci/Filiale/Profilo) nel drawer va a piena larghezza */
    .ar-navbar .navbar-nav.align-items-center { align-items: stretch !important; }
    .ar-navbar #branchContainer { width: 100%; }
}

/* ---------- Safe-area (notch) footer ---------- */
@media (max-width: 991.98px) {
    .ar-footer { padding-bottom: calc(12px + var(--ar-safe-bottom)); }
}

/* La barra di navigazione fissa in fondo (bottom nav) e' stata rimossa:
   su telefono e tablet si naviga solo con la sidebar, che si apre dal
   pulsante menu della barra in alto. */
@media (max-width: 991.98px) {
    /* solo il respiro del notch: il contenuto arriva fino in fondo */
    body.ar-body { padding-bottom: var(--ar-safe-bottom); }
}

/* ============================================================
   LISTE — DA TABELLA A CARD SU MOBILE  (.ar-cards-table)
   ------------------------------------------------------------
   Regola dell'Area Riservata: su telefono e tablet NON si scrolla
   mai in orizzontale e NON si nascondono dati. La riga diventa una
   card che mostra in evidenza i campi identificativi e apre gli
   altri con "Dettagli" (espansione in-place, nessun cambio pagina).

   Uso nel markup (il desktop resta identico, sono solo classi in piu'):
     <div class="table-responsive ar-cards-wrap">
       <table class="table ar-cards-table"> ...
         <td class="ar-c-check">   checkbox selezione
         <td class="ar-c-title">   titolo della card (nome record)
         <td class="ar-c-status" data-label="Scad.">  stato in alto a destra
         <td class="ar-c-chip"   data-label="Lotto">  pillola sempre visibile
         <td class="ar-c-chip ar-c-bare">             pillola gia' "badge" di suo
         <td class="ar-c-detail" data-label="DDT">    riga dentro "Dettagli"
         <td class="ar-c-more">    pulsante Dettagli (invisibile su desktop)
         <td class="ar-c-actions"> pulsanti azione
   ============================================================ */

/* Celle che esistono solo nella vista a card */
.ar-cards-table td.ar-c-more,
.ar-cards-table td.ar-c-break { display: none; }

/* Contenitore del valore di una cella: su desktop resta impilato come prima
   (numero sopra, data sotto), su mobile diventa una riga etichetta/valore. */
.ar-cards-table .ar-c-val { display: block; }
.ar-cards-table .ar-c-val > small { display: block; }

@media (max-width: 991.98px) {
    /* Il wrapper .table-responsive non deve piu' scrollare: non c'e' nulla da scrollare */
    .ar-cards-wrap { overflow-x: visible; }

    .ar-cards-table,
    .ar-cards-table tbody,
    .ar-cards-table tr,
    .ar-cards-table td { display: block; width: 100%; }

    .ar-cards-table thead { display: none; }
    .ar-cards-table { border-collapse: separate; }

    /* La riga = la card */
    .ar-cards-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 7px 8px;
        background: #fff;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .ar-cards-table tbody tr:last-child { margin-bottom: 0; }
    .ar-cards-table tbody tr.selected {
        border-color: var(--primary, #667eea);
        box-shadow: 0 0 0 1px var(--primary, #667eea);
    }

    .ar-cards-table td {
        border: none !important;
        padding: 0;
        font-size: 14px;
        line-height: 1.35;
        min-width: 0;
        /* Bootstrap 5.3 colora le celle con background + box-shadow inset:
           dentro la card deve vincere lo sfondo della card (es. riga selezionata). */
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* --- riga 1: checkbox + titolo + stato --- */
    .ar-cards-table td.ar-c-check {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        padding-top: 2px;
    }
    .ar-cards-table td.ar-c-title {
        order: 2;
        flex: 1 1 55%;
        width: auto;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-dark, #1f2937);
        overflow-wrap: anywhere;
    }
    .ar-cards-table td.ar-c-status {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        text-align: right;
    }
    .ar-cards-table td.ar-c-status::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--text-light, #6b7280);
        margin-bottom: 2px;
    }

    /* Interruzione di riga: le pillole partono sempre da una riga nuova,
       anche quando il titolo e' corto e sullo schermo avanzerebbe spazio. */
    .ar-cards-table td.ar-c-break {
        display: block;
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
    }

    /* --- riga 2: pillole sempre visibili --- */
    .ar-cards-table td.ar-c-chip {
        order: 5;
        flex: 0 0 auto;
        width: auto;
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        background: var(--bg-page, #f3f4f6);
        border-radius: 999px;
        padding: 4px 11px;
        font-size: 13px;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .ar-cards-table td.ar-c-chip::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--text-light, #6b7280);
        flex: 0 0 auto;
    }
    /* pillola "nuda": il contenuto ha gia' il suo badge colorato */
    .ar-cards-table td.ar-c-chip.ar-c-bare {
        background: transparent;
        padding: 0;
        align-items: center;
    }
    .ar-cards-table td.ar-c-chip.ar-c-bare::before { content: none; }
    .ar-cards-table td.ar-c-chip code { background: transparent; padding: 0; color: inherit; font-size: 13px; }

    /* --- dettagli: nascosti finche' la card non viene aperta --- */
    .ar-cards-table td.ar-c-detail {
        order: 6;
        display: none;
        flex: 0 0 100%;
        width: 100%;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 8px 0;
        font-size: 13.5px;
        border-top: 1px dashed var(--border, #e5e7eb) !important;
    }
    .ar-cards-table td.ar-c-detail::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-light, #6b7280);
        font-weight: 600;
    }
    .ar-cards-table td.ar-c-detail .ar-c-val {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px 8px;
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .ar-cards-table tr.ar-open td.ar-c-detail,
    body.ar-details-always .ar-cards-table td.ar-c-detail { display: flex; }

    /* --- pulsante Dettagli --- */
    .ar-cards-table td.ar-c-more {
        display: block;
        order: 7;
        flex: 0 0 100%;
        width: 100%;
    }
    body.ar-details-always .ar-cards-table td.ar-c-more { display: none; }

    .ar-cards-table .ar-more-btn {
        width: 100%;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: transparent;
        border: none;
        border-top: 1px solid var(--border, #e5e7eb);
        padding: 8px 0 2px;
        margin: 0;
        color: var(--primary, #667eea);
        font-size: 13px;
        font-weight: 600;
        /* niente doppio-tap che zooma ne' selezione del testo: e' un comando */
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .ar-cards-table .ar-more-btn .ar-more-caret { font-size: 11px; transition: transform .18s ease; }
    .ar-cards-table tr.ar-open .ar-more-btn .ar-more-caret { transform: rotate(180deg); }

    /* --- azioni a tutta larghezza --- */
    .ar-cards-table td.ar-c-actions {
        order: 8;
        flex: 0 0 100%;
        width: 100%;
        text-align: left !important;
    }
    .ar-cards-table td.ar-c-actions .btn-group { display: flex; width: 100%; }
    .ar-cards-table td.ar-c-actions .btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        font-size: 12.5px;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* contenitore tabella piu' compatto quando ospita le card */
    .ar-main-container .table-container:has(.ar-cards-table) { padding: 10px; }

    /* Interruttore "mostra sempre i dettagli" */
    .ar-list-viewopts {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0 0 10px;
    }
    .ar-list-viewopts .form-check-label { font-size: 13px; color: var(--text-medium, #4b5563); }
}
/* Su desktop l'interruttore non serve: la tabella mostra gia' tutto */
@media (min-width: 992px) { .ar-list-viewopts { display: none; } }

/* Barra azioni di massa: a tutta larghezza su mobile, appoggiata in fondo */
@media (max-width: 991.98px) {
    .bulk-actions {
        left: 12px;
        right: 12px;
        bottom: calc(var(--ar-safe-bottom) + 12px);
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        padding: .85rem 1rem;
    }
    .bulk-actions #selectedCount { flex: 0 0 100%; text-align: center; }
    .bulk-actions .btn { flex: 1 1 0; min-height: 44px; }
}