/* ============================================================
   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). */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm):not(.arsn-dialog):not(.prof-dialog) {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm):not(.arsn-dialog):not(.prof-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; }
}