/**
 * Au Bavarois Dart Liga - Fix responsive ciblees
 * Inclus apres public.css dans includes/public_nav.php.
 * Cible des inline-styles cassants identifies par audit (cycle 36 vague responsive).
 *
 * Pattern : selecteurs d'attribut [style*="..."] pour ne pas devoir editer
 * chaque fichier PHP. Sur ecrans <=480px on neutralise les minmax(>=200px)
 * et autres min-width fixes qui debordaient sur 320px.
 */

/* ===========================================================
   320px - 480px : telephones serres
   =========================================================== */
@media (max-width: 480px) {

    /* Grilles inline minmax >= 200px : forcer 1 colonne */
    .resp-grid-highlights,
    [style*="minmax(200px"],
    [style*="minmax(220px"],
    [style*="minmax(240px"],
    [style*="minmax(260px"],
    [style*="minmax(280px"],
    [style*="minmax(300px"] {
        grid-template-columns: 1fr !important;
    }

    /* Grilles inline minmax(160-199px) : laisser auto-fit mais reduire min */
    [style*="minmax(160px"],
    [style*="minmax(180px"] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }

    /* Stat cards : flex:1 + min-width:120px deborde a 4 cartes */
    .stat-card,
    .stats-grid > div,
    .elo-stats > div {
        min-width: calc(50% - 6px) !important;
        flex: 1 1 calc(50% - 6px) !important;
    }

    /* live.php : container max-width:480px deborde avec padding */
    .live-container {
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* hall-of-fame : grilles 2 colonnes a 480-640px deviennent 1 col */
    .hof-alltime,
    .hof-grid,
    .hof-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* predictions / formulaires inline flex : stack vertical */
    .predictions-form,
    form[style*="display:flex"][style*="flex-wrap"] {
        flex-direction: column !important;
    }
    .predictions-form select,
    .predictions-form button,
    form[style*="display:flex"][style*="flex-wrap"] > select,
    form[style*="display:flex"][style*="flex-wrap"] > button {
        width: 100% !important;
    }

    /* Tables publiques : padding cellules plus serre */
    .public-table td,
    .public-table th {
        padding: 6px 6px !important;
        font-size: 12px !important;
    }
    .public-table img {
        max-width: 24px !important;
        max-height: 24px !important;
    }

    /* H1/H2 de page-header : reduction taille */
    .page-header h1,
    .page-header h2,
    .public-main h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    .page-header h2 + p,
    .public-main h1 + p {
        font-size: 13px !important;
    }
}

/* ===========================================================
   320px : telephones tres petits (iPhone SE 1ere gen, etc.)
   =========================================================== */
@media (max-width: 360px) {
    .public-table td,
    .public-table th {
        padding: 4px 4px !important;
        font-size: 11px !important;
    }
    .stat-card,
    .stats-grid > div,
    .elo-stats > div {
        min-width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* ===========================================================
   481px - 768px : tablettes en portrait
   =========================================================== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Grilles minmax >= 280px : passer a 2 colonnes max */
    [style*="minmax(280px"],
    [style*="minmax(300px"] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
}

/* ===========================================================
   Tables : wrapping horizontal universel sur petits ecrans
   =========================================================== */
@media (max-width: 768px) {
    .table-responsive,
    .public-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Si une <table> n'a pas de wrapper, on lui en simule un visuellement */
    .public-main table:not(.no-resp) {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        white-space: nowrap;
    }
}