/* =====================================================================
   mobile.css — uso da smartphone delle pagine del gestionale.
   Caricato da layouts/components/styles.php DOPO football-theme.css.

   Perche' esiste: su uno schermo da 375 px il contenuto arrivava con
   128 px di margini sommati (main-content 12+12, container-fluid 12+12,
   .p-4 24+24, tab-pane 16+16). Alla tabella dei convocati restavano
   243 px su 375: si vedevano la casella "Seleziona" e il numero di
   maglia, e il cognome usciva dallo schermo.

   Due parti:
   1) MARGINI E SPAZI — vale per tutte le pagine, senza toccarne nessuna.
   2) TABELLE A SCHEDA (.tbl-mob) — si attiva pagina per pagina mettendo
      la classe sulla tabella e data-label sulle celle: sotto i 576 px
      ogni riga diventa una scheda e le intestazioni spariscono.
   ===================================================================== */

/* ============ 1. MARGINI E SPAZI ============ */
@media (max-width: 767.98px) {

    /* La catena di contenitori del template: qui si recuperano ~90 px */
    .main-content.app-content { padding-left: .5rem !important; padding-right: .5rem !important; }
    /* Attenzione: NON scendere sotto .75rem. Le .row di Bootstrap hanno margini
       negativi di 12 px per lato e li assorbe proprio questo padding: con 4 px
       il modulo di Dati Societa' usciva dallo schermo di 8 px per lato. */
    .main-content .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
    /* .p-4 / .p-3 sul contenitore di pagina: sul telefono e' spazio sprecato */
    .main-content .container-fluid.p-4,
    .main-content .container-fluid.p-3 { padding: .75rem !important; }

    /* Schede: bordi piu' vicini al contenuto */
    .card.custom-card { margin-bottom: .75rem; }
    .card.custom-card > .card-body { padding: .85rem; }
    .card.custom-card > .card-header { padding: .65rem .85rem; }
    .card.custom-card > .card-body.p-0 { padding: 0 !important; }
    .tab-content > .tab-pane { padding-left: .6rem !important; padding-right: .6rem !important; }

    /* Titoli di pagina piu' bassi */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.15rem; }
    .page-header-breadcrumb { margin-bottom: .75rem !important; }

    /* Tabelle che restano tabelle: piu' strette e senza testo su una riga sola */
    .table > :not(caption) > * > * { padding: .5rem .4rem; }
    .table { font-size: .85rem; }
    .table.text-nowrap, .table .text-nowrap { white-space: normal !important; }
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Bottoni e campi: bersagli piu' grandi, testo che non deborda */
    .btn { white-space: normal; }
    .btn-list > .btn, .d-flex.gap-2 > .btn { flex: 1 1 auto; }
    .form-control, .form-select { font-size: 16px; } /* < 16px iOS ingrandisce da solo */

    /* Barre di filtri: una riga per campo invece di colonne strizzate */
    .filtri-riga > * { width: 100%; }

    /* Le .row di Bootstrap hanno margini negativi pari a meta' gutter: dentro a
       una card stretta uscivano di 12 px per lato (si vedeva in Dati Societa').
       Con il gutter piu' piccolo rientrano nel padding della card. */
    .card.custom-card .row { --bs-gutter-x: 1rem; }
    .card.custom-card .row > [class*="col-"] { margin-bottom: .25rem; }
}

/* Schermi molto stretti: si toglie anche l'ultimo margine */
@media (max-width: 400px) {
    .main-content.app-content { padding-left: 0 !important; padding-right: 0 !important; }
    .card.custom-card > .card-body { padding: .7rem; }
}

/* ============ 2. TABELLE A SCHEDA ============ */
/* Ogni riga diventa una scheda: niente scorrimento orizzontale, niente
   colonne larghe 100 px per una casella di spunta.
   Uso: <table class="table tbl-mob"> e su ogni <td> il suo data-label.
   Le celle senza data-label (nome, pulsanti) escono senza etichetta. */
@media (max-width: 575.98px) {

    .tbl-mob, .tbl-mob tbody, .tbl-mob td { display: block; width: 100%; }
    .tbl-mob thead { display: none; }

    /* La riga-scheda e' una colonna flessibile, non un blocco: cosi' il nome
       puo' salire in cima anche quando nella tabella e' la seconda o terza
       colonna. Prima la scheda partiva con "NUMERO —" e il nome del giocatore
       arrivava dopo: sul telefono la prima cosa che si legge dev'essere chi e'. */
    .tbl-mob tr { display: flex; flex-wrap: wrap; align-items: baseline; width: 100%; }
    .tbl-mob td { flex: 1 1 100%; }

    .tbl-mob tr {
        border: 1px solid var(--default-border, #e9edf6);
        border-radius: .5rem;
        margin-bottom: .5rem;
        padding: .55rem .7rem;
        background: var(--custom-white, #fff);
        position: relative;
    }
    .tbl-mob tr:last-child { margin-bottom: 0; }

    .tbl-mob td {
        border: 0 !important;
        padding: .12rem 0 !important;
        white-space: normal !important;
        text-align: left !important;
        min-height: 0;
    }
    .tbl-mob td:empty { display: none; }

    .tbl-mob td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 5.5rem;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--text-muted, #8c9097);
        margin-right: .4rem;
    }

    /* Cella principale (nome/titolo della riga): grande, senza etichetta, in cima */
    .tbl-mob td.mob-title {
        order: -2;
        flex: 1 1 100%;
        font-weight: 700;
        font-size: .95rem;
        padding-bottom: .3rem !important;
    }
    /* Casella di spunta ancorata in alto a destra della scheda */
    .tbl-mob td.mob-check {
        position: absolute;
        top: .5rem; right: .6rem;
        width: auto !important;
        padding: 0 !important;
    }
    .tbl-mob td.mob-check + td, .tbl-mob td.mob-check ~ td.mob-title { padding-right: 2.2rem !important; }
    /* Riga di pulsanti in fondo alla scheda */
    .tbl-mob td.mob-actions {
        order: 10;
        flex: 1 1 100%;
        padding-top: .45rem !important;
        margin-top: .35rem;
        border-top: 1px dashed var(--default-border, #e9edf6) !important;
        display: flex; flex-wrap: wrap; gap: .35rem;
    }
    /* Il .btn-group tiene i pulsanti attaccati su una riga sola: sul telefono
       devono poter andare a capo. */
    .tbl-mob td.mob-actions .btn-group { display: flex; flex-wrap: wrap; gap: .35rem; }
    .tbl-mob td.mob-actions .btn-group > .btn {
        border-radius: .35rem !important;
        flex: 0 1 auto;
    }
    .tbl-mob td.mob-actions .btn { font-size: .75rem; padding: .3rem .5rem; }
    /* Nome diviso in due colonne (Cognome | Nome): sul telefono devono
       stare sulla stessa riga, non una sopra l'altra. */
    .tbl-mob td.mob-name {
        order: -2;
        flex: 0 0 auto;
        display: inline-block;
        width: auto !important;
        font-weight: 700;
        font-size: .95rem;
        margin-right: .3rem;
        padding-bottom: .25rem !important;
    }
    .tbl-mob td.mob-name a { color: inherit; }

    /* Campi dentro la scheda: accanto all'etichetta, non a tutta larghezza */
    .tbl-mob td .form-select,
    .tbl-mob td .form-control {
        display: inline-block;
        width: auto !important;
        max-width: 62%;
        vertical-align: middle;
    }
    .tbl-mob td .form-select-sm, .tbl-mob td .form-control-sm { font-size: .82rem; }

    /* Celle secondarie che stanno in fila sotto al titolo (badge di ruolo,
       tipo, categoria): senza questo ognuna si prendeva una riga intera. */
    .tbl-mob td.mob-sub {
        order: -1;
        flex: 0 0 auto;
        display: inline-block;
        width: auto !important;
        margin-right: .3rem;
        font-size: .8rem;
    }
    /* Numero di posizione in classifica: pallino davanti al nome */
    .tbl-mob td.mob-pos {
        position: absolute;
        top: .55rem; left: .7rem;
        width: 1.6rem !important;
        padding: 0 !important;
        font-weight: 800;
        color: var(--primary-color, #0c5a14);
    }
    .tbl-mob td.mob-pos ~ td.mob-title { padding-left: 1.9rem !important; }

    /* Cella da non mostrare sul telefono (dato ripetuto o di servizio) */
    .tbl-mob td.mob-hide, .tbl-mob th.mob-hide { display: none !important; }

    /* La scheda non ha piu' bisogno del contenitore che scorre */
    .table-responsive:has(> .tbl-mob) { overflow-x: visible; }
}

/* ============ 3. BARRE DI AZIONE IN FONDO ============ */
/* La barra che resta attaccata al fondo mentre si scorre (i "Salva" di
   Convocati e simili). Sul telefono si prendeva un ottavo di schermo
   perche' andava a capo in due righe, e la freccia "torna su" ci finiva
   sopra coprendo proprio il pulsante di salvataggio. */
@media (max-width: 767.98px) {
    .card-footer.sticky-bottom {
        padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)) !important;
        gap: .4rem !important;
    }
    /* Lo sfondo pieno NON si mette qui: il tema lo forza a trasparente con
       `.card.custom-card .card-footer { background: transparent !important }`,
       che ha il selettore piu' pesante. Lo rimette la pagina che ha la barra
       (convocati.php), cosi' vale anche sul computer. */
    /* Il "Verifica prima di salvare" e' un promemoria, non un comando:
       sul telefono vale piu' lo spazio. Cosi' la barra torna a una riga. */
    .card-footer.sticky-bottom > .text-muted.small { display: none; }
    .card-footer.sticky-bottom > .d-flex { flex: 1 1 auto; }
    .card-footer.sticky-bottom .btn { flex: 1 1 auto; white-space: nowrap; }

    /* La freccia "torna su" sale sopra alla barra invece di coprirla.
       Le pagine con DUE barre sovrapposte (il tabellino) la nascondono
       del tutto: li' lo spazio non c'e' e la navigazione ce l'hanno gia'. */
    .scrollToTop {
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        right: 12px !important;
    }
}

/* Nasconde un elemento solo sul telefono, anche fuori dalle tabelle */
@media (max-width: 575.98px) {
    .mob-hide { display: none !important; }
}
/* ...e il contrario: si vede solo sul telefono */
.mob-only { display: none; }
@media (max-width: 575.98px) {
    .mob-only { display: block; }
    span.mob-only, a.mob-only { display: inline; }
}