/*
 * PWA / rifinitura mobile — Mac Logistics
 * Caricato da partials/_pwa_head su tutti i layout principali.
 * Vedi CLAUDE.md sezione "PWA / Web App".
 */

:root {
    --mac-brand: #007bff;
}

/* ---------------------------------------------------------------------
 * Base comportamentale (si applica anche fuori dalla modalità standalone,
 * è comunque corretta per un sito su telefono).
 * --------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.15);
}

/* Fix iOS: uno zoom automatico scatta al focus se il font-size dell'input è < 16px */
@media (max-width: 767.98px) {
    .form-control,
    .custom-select,
    .form-select,
    select.form-control,
    textarea.form-control,
    .select2-container .select2-selection__rendered,
    .select2-search__field {
        font-size: 16px !important;
    }
}

/* Target touch minimo (~44px) sul dropdown azioni standard di tutte le tabelle */
@media (max-width: 767.98px) {
    .dropdown-menu .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn-sm,
    .btn.btn-default.btn-sm {
        min-height: 38px;
    }
}

/* DataTables: scroll orizzontale invece di sforare la pagina, toolbar più compatta */
@media (max-width: 767.98px) {
    div.dt-container,
    div.dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    div.dt-layout-row .dt-buttons {
        flex-wrap: wrap;
    }

    table.dataTable > tbody > tr > td,
    table.dataTable > tbody > tr > th {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

/* Select2 e modali a tutta altezza sotto i 768px (stesso pattern già usato in
   assignments/_card_modal.blade.php) */
@media (max-width: 767.98px) {
    .select2-container--open .select2-dropdown {
        max-width: 100vw;
    }

    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
 * Solo in modalità app installata (standalone), classe messa su <html>
 * da partials/_pwa_head prima del primo paint.
 * --------------------------------------------------------------------- */
html.pwa-standalone body {
    overscroll-behavior-y: contain; /* niente "rimbalzo"/pull-to-refresh in app */
}

/* Con status-bar-style=default e viewport-fit=auto il browser riserva la
   safe area, anche in landscape. Manteniamo padding e offset nativi di
   AdminLTE: aggiungere inset alla navbar fissa ne altererebbe l'altezza
   rispetto al margine superiore previsto per il app-main. */

/* ---------------------------------------------------------------------
 * events/show.blade.php — tabella lista materiale (7 colonne).
 * ⚠️ NON usare il "responsive" di DataTables qui: updateProgress() legge
 * la quantità da td.eq(2) e il plugin responsive rimuove le celle dal DOM,
 * rompendo quel selettore (vedi CLAUDE.md). Si nascondono le colonne a
 * bassa priorità via CSS: le celle restano nel DOM, cambia solo la resa.
 * --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #listItemsTable {
        min-width: 640px; /* forza lo scroll orizzontale sul wrapper invece di schiacciare le celle */
    }
}

/* ---------------------------------------------------------------------
 * Avatar utente: le foto profilo caricate non sono quadrate (es. 678x452).
 * Senza questo, dove è impostata solo la larghezza (widget profilo, righe
 * tabella…) l'immagine resta rettangolare e il border-radius 50% la rende
 * un'ellisse; dove sono fissate entrambe le dimensioni (navbar, liste) viene
 * schiacciata. cover + 1/1 = cerchio perfetto, ritagliato al centro.
 * --------------------------------------------------------------------- */
img.img-circle,
img.rounded-circle,
img.user-image,
img.asgn-avatar {
    object-fit: cover;
    aspect-ratio: 1 / 1;
}