/* ============================================================
   mobile.css — Ottimizzazione mobile globale
   v2.6 - 2026-06-11
   Caricato da includes/theme_loader.php DOPO style.css e gli stili inline.
   Strategia: le pagine usano molti stili inline (grid, flex, width fissi)
   che non si possono modificare pagina per pagina. Qui li sovrascriviamo
   con selettori per attributo + !important, SOLO sotto i 768px.
   ============================================================ */

@media (max-width: 768px) {

    /* ── Layout generale ─────────────────────────────────── */
    .container,
    div[style*="max-width: 1200px"],
    div[style*="max-width:1200px"],
    div[style*="max-width: 1400px"] {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body {
        overflow-x: hidden;
    }

    img, canvas, svg, video {
        max-width: 100%;
        height: auto;
    }

    /* ── Titoli (anche quelli con font-size inline) ──────── */
    h1, h1[style] { font-size: 1.35rem !important; }
    h2, h2[style] { font-size: 1.1rem  !important; }
    h3, h3[style] { font-size: 1rem    !important; }

    /* ── Griglie inline → adattive ───────────────────────────
       repeat(4, 1fr), "1fr 380px", minmax(250px,1fr) ecc.
       diventano colonne flessibili: le card grandi si impilano,
       i box piccoli (es. pronostici AI) stanno 2 per riga. */
    div[style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 8px !important;
    }

    /* ── Anti "grid blowout": le celle di griglie e flex devono
       potersi restringere sotto la larghezza del contenuto,
       altrimenti una tabella interna sfonda tutta la pagina ── */
    div[style*="grid-template-columns"] > *,
    div[style*="display: flex"] > *,
    div[style*="display:flex"] > * {
        min-width: 0;
    }

    .card, .glass {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ── Layout a 2 colonne (sidebar + contenuto) → impila ──
       es. "300px 1fr" (archivio schedine), "1fr 550px", "1fr 350px":
       su mobile devono andare uno sotto l'altro, non stringersi. */
    /* (doppio [style] = specificità più alta: vince anche sul blocco <420px) */
    div[style][style*="grid-template-columns: 300px 1fr"],
    div[style][style*="grid-template-columns:300px 1fr"],
    div[style][style*="grid-template-columns: 1fr 550px"],
    div[style][style*="grid-template-columns: 1fr 350px"],
    div[style][style*="grid-template-columns: 1fr 380px"],
    div[style][style*="grid-template-columns: 250px 1fr"],
    div[style][style*="grid-template-columns: 280px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* La lista archivio non deve occupare tutto lo schermo in altezza */
    div[style*="grid-template-columns: 300px 1fr"] > div[style*="max-height: 80vh"] {
        max-height: 40vh !important;
    }

    /* ── Griglie-tabella larghe (es. "60px 1fr repeat(...)") →
       mantieni la struttura e scorri in orizzontale ─────── */
    div[style][style*="grid-template-columns: 60px 1fr repeat"] {
        grid-template-columns: 60px minmax(120px, 1fr) repeat(8, minmax(45px, 70px)) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Flex inline → consenti il wrap ──────────────────── */
    div[style*="display: flex"],
    div[style*="display:flex"] {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }

    /* ── Tabelle: compatte + scroll orizzontale fluido ───── */
    th, td,
    th[style], td[style] {
        padding: 7px 8px !important;
        font-size: 0.8rem !important;
    }

    div[style*="overflow-x"] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Ogni tabella larga scorre da sola invece di essere
       tagliata dal bordo dello schermo (body ha overflow-x hidden) */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Dettaglio schedina (archivio): righe → card verticali ──
       Niente scroll laterale: nome partita a tutta larghezza,
       mercato/esito/quota/prob in chip sotto. */
    table.slip-detail-table {
        display: block;
        overflow-x: visible;
    }

    table.slip-detail-table thead {
        display: none; /* le celle sono autoesplicative */
    }

    table.slip-detail-table tbody {
        display: block;
        width: 100%;
    }

    table.slip-detail-table tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 10px 8px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
    }

    table.slip-detail-table tbody td,
    table.slip-detail-table tbody td[style] {
        display: inline-block;
        width: auto !important;
        border: none !important;
        padding: 3px 8px 3px 0 !important;
        vertical-align: middle;
        white-space: normal !important;
    }

    /* Prima cella (Partita) a tutta larghezza, in evidenza */
    table.slip-detail-table tbody td:first-child {
        display: block;
        width: 100% !important;
        padding-bottom: 6px !important;
        margin-bottom: 4px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    }

    /* ── Modal (dettagli schedina, config, ecc.) ─────────── */
    .modal-content,
    div[class*="modal-content"] {
        width: 96% !important;
        max-width: 96% !important;
        margin: 4% auto !important;
        padding: 14px !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ── Form e input: niente zoom automatico su iOS ─────── */
    input, select, textarea {
        font-size: 16px !important;
    }

    input[type="date"],
    input[type="number"],
    select {
        max-width: 100%;
    }

    /* ── Pulsanti: target touch adeguati ─────────────────── */
    button, .btn, a.btn {
        min-height: 40px;
        font-size: 0.9rem !important;
    }

    /* Pulsanti affiancati nelle intestazioni → si impilano bene */
    div[style*="justify-content: space-between"] {
        gap: 8px;
    }

    /* ── Selezione leghe (predictions.php) ───────────────────
       Su mobile: una lega per riga, elenco verticale.
       (sovrascrive lo scroll orizzontale di style.css) */
    .filter-section .filter-row:last-child {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: visible !important;
        gap: 6px !important;
    }

    .filter-chip {
        width: 100%;
        padding: 8px 12px !important;
        gap: 8px !important;
        border-width: 1px !important;
        border-radius: 8px !important;
        justify-content: flex-start !important;
    }

    .filter-chip span {
        font-size: 0.85rem !important;
        white-space: normal !important;
    }

    .filter-chip img {
        width: 16px !important;
        height: auto !important;
    }

    /* Select giornata allineato a destra dentro il chip */
    .filter-chip .matchday-select {
        margin-left: auto;
    }

    /* ── Card statistiche (numeri grandi) ────────────────── */
    div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    /* ── Badge e pill ────────────────────────────────────── */
    span[style*="padding: 4px"] {
        font-size: 0.75rem !important;
    }
}

/* ── Schermi molto piccoli (<420px) ──────────────────────── */
@media (max-width: 420px) {

    div[style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }

    h1, h1[style] { font-size: 1.2rem !important; }

    .container,
    div[style*="max-width: 1200px"],
    div[style*="max-width:1200px"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    th, td,
    th[style], td[style] {
        padding: 6px 6px !important;
        font-size: 0.75rem !important;
    }
}