/* =============================================================
   ipad.css — Caricato DOPO layout.css e Bootstrap
   Copre tutti i modelli iPad: 768px → 1366px
   ============================================================= */

/* ============================================================
   RANGE COMPLETO TABLET
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 1366px) {

    /* Forza scroll orizzontale su TUTTE le tabelle */
    .orders-table,
    .assembly-table,
    .sub-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Elimina min-width rigido che causa overflow */
    .user-create-card {
        min-width: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Touch target minimo 44px sui bottoni veri.
       NB: .nav-link e .checkbox-item esclusi intenzionalmente:
       - .nav-link a 44px faceva sforare Impostazioni dalla sidebar
       - .checkbox-item a 44px + width:100% del checkbox rompeva il layout */
    .btn-primary,
    .btn-secondary,
    .btn-icon,
    .btn-assembly,
    .open-component-scanner,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        touch-action: manipulation;
    }

    .nav-link,
    .checkbox-item {
        touch-action: manipulation;
    }

    /* =====================================================
       FIX CHECKBOX — CAUSA PRINCIPALE DEL LAYOUT ROTTO
       layout.css ha "input { width: 100%; }" che si applica
       anche a input[type="checkbox"] dentro il flex .checkbox-item.
       Su iPad Safari questo fa sì che il checkbox occupi tutta
       la riga e il testo del label venga spostato su righe
       successive, separandosi visivamente dal suo checkbox.
       ===================================================== */
    .checkbox-item input[type="checkbox"] {
        width: auto !important;
        flex-shrink: 0;
        min-height: auto !important;
    }

    /* Checkbox del filtro Tipo: compatti e allineati */
    .checkbox-group {
        flex-wrap: wrap;
        gap: 6px 14px;
    }
    .checkbox-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        min-height: 36px;
        white-space: nowrap;
    }

    /* Evita zoom automatico iOS su focus — esclusi i checkbox */
    input:not([type="checkbox"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ============================================================
   iPad Pro 12.9" Landscape (1025px – 1366px)
   Sidebar rimane a 220px, layout normale ma compresso
   ============================================================ */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {

    /* ===== SIDEBAR: compatta per far entrare anche Impostazioni ===== */
    .sidebar {
        padding: 14px 14px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
    .sidebar .nav-link {
        padding: 8px 12px !important;
        margin-bottom: 4px;
        font-size: 14px;
        line-height: 1.3;
        min-height: auto !important;
    }
    #sidebar-logo {
        width: 52px;
        margin: 0.5rem auto;
    }
    .sidebar .mb-3 { margin-bottom: 0.5rem !important; }

    /* KPI: 4 → 2 colonne */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    .kpi-value {
        font-size: 24px;
    }

    /* Content grid: 1 colonna */
    .content-grid {
        grid-template-columns: 1fr !important;
    }

    /* ===== SETTINGS: 2 colonne con scroll interno alle card ===== */
    .settings-page {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .settings-page .user-create-card {
        overflow-x: auto;
    }

    .user-create-card table {
        font-size: 13px;
    }
    .user-create-card th {
        padding: 8px 6px;
        font-size: 12px;
        white-space: nowrap;
    }
    .user-create-card td {
        padding: 8px 6px;
        font-size: 13px;
    }

    /* ===== FILTRI MOVIMENTI: 2 colonne, Componenti su tutta la riga ===== */
    .filters {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 24px;
    }

    .filter-block.component-filter {
        grid-column: span 2 !important;
    }

    .filter-actions {
        grid-column: span 2 !important;
        justify-content: flex-end;
        padding-top: 8px;
    }

    .component-dropdown {
        width: 100% !important;
        min-width: 320px;
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* Widget previsione */
    #widget-previsione .controls {
        flex-wrap: wrap;
        gap: 12px;
    }

    #widget-previsione input[type="number"] {
        width: 80px;
    }

    .avvisi-order-row td,
    .assembly_component td {
        padding: 12px 8px;
    }
}


/* ============================================================
   iPad Air / standard Landscape + iPad Pro Portrait
   (769px – 1024px) con sidebar 170px attiva
   ============================================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* ===== SIDEBAR: ultra-compatta per far entrare anche Impostazioni ===== */
    .sidebar {
        padding: 10px 10px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
    .sidebar h5 {
        font-size: 11px;
        margin-bottom: 10px;
    }
    .sidebar .nav-link {
        padding: 6px 8px !important;
        margin-bottom: 2px;
        font-size: 13px;
        line-height: 1.25;
        min-height: auto !important;
    }
    .sidebar .nav-link i { font-size: 14px; }

    #sidebar-logo {
        width: 44px;
        margin: 0.4rem auto;
    }
    .sidebar .mb-3 { margin-bottom: 0.25rem !important; }

    /* KPI: 4 → 2 colonne */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }

    .kpi-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpi-card {
        height: auto;
        min-height: 100px;
        padding: 16px;
    }

    .kpi-value {
        font-size: 22px;
    }

    /* Content grid: 1 colonna */
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Charts: 1 colonna */
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    /* Form: 1 colonna */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .form-group.full-width {
        grid-column: span 1 !important;
    }

    .form-actions {
        grid-column: span 1 !important;
        justify-content: stretch;
    }

    .form-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* ===== SETTINGS: niente scroll a destra ===== */
    .settings-page {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .settings-page .user-create-card:nth-child(3),
    .settings-page .user-create-card:nth-child(4) {
        grid-column: span 1 !important;
    }

    .settings-page .user-create-card {
        padding: 18px !important;
        overflow-x: auto;
    }

    .user-create-card table {
        font-size: 12px;
    }
    .user-create-card th {
        padding: 6px 5px;
        font-size: 11px;
        white-space: nowrap;
    }
    .user-create-card td {
        padding: 6px 5px;
        font-size: 12px;
    }

    /* Required component assembly */
    .required-component {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        padding: 10px;
    }

    .required-component .component-name {
        grid-column: span 2;
        font-size: 14px;
    }

    .required-component .component-qr { grid-column: 1; }
    .required-component .open-component-scanner { grid-column: 2; }

    /* Assembly selector */
    .assembly-selector {
        flex-wrap: wrap;
        gap: 10px;
    }

    .assembly-option span {
        display: block;
        padding: 12px 20px;
        font-size: 13px;
    }

    /* ===== FILTRI MOVIMENTI: 2 colonne, Componenti su tutta la riga ===== */
    .filters {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 16px;
    }

    .filter-block.component-filter {
        grid-column: span 2 !important;
    }

    .filter-actions {
        grid-column: span 2 !important;
        padding-top: 8px;
        justify-content: flex-end;
    }

    .component-dropdown {
        width: 100% !important;
        min-width: unset;
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 20px;
    }

    /* User form in settings: 1 colonna */
    .user-form {
        grid-template-columns: 1fr !important;
    }

    .user-form .full-width,
    .user-form .form-actions {
        grid-column: span 1 !important;
    }

    /* Widget previsione */
    #widget-previsione .controls {
        flex-wrap: wrap;
        gap: 12px;
    }

    #widget-previsione .controls > div {
        flex: 1 1 140px;
    }

    #widget-previsione input[type="number"] {
        width: 100%;
    }

    /* Assembly footer */
    .assembly-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .assembly-footer .btn-primary,
    .assembly-footer #openScanner {
        width: 100%;
        justify-content: center;
    }

    .topbar-left {
        overflow: hidden;
        max-width: 45%;
    }

    .topbar-logo {
        width: 140px;
        max-width: 100%;
    }

    .delivery-row {
        grid-template-columns: 1fr 90px 40px !important;
    }

    iframe {
        height: 240px;
    }
}


/* ============================================================
   iPad standard Portrait esatto (768px)
   Sidebar diventa overlay — già gestita in layout.css
   ============================================================ */
@media only screen and (max-width: 768px) and (min-width: 481px) {

    .assembly-option {
        width: 100%;
    }

    .assembly-option span {
        display: block;
        text-align: center;
        padding: 14px;
        width: 100%;
        box-sizing: border-box;
    }

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

    .open-component-scanner {
        width: 100%;
        justify-content: center;
    }

    .assembly-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .assembly-footer button {
        width: 100% !important;
        justify-content: center;
    }

    #widget-previsione .controls {
        flex-direction: column;
        align-items: stretch;
    }

    #widget-previsione input[type="number"],
    #btn-calcola-previsione {
        width: 100%;
    }

    .component-dropdown {
        width: calc(100vw - 32px);
        grid-template-columns: 1fr 1fr !important;
    }
}