/* ================================================================
   mobile.css — Server Tracker — chargé via header.php sur toutes les pages
   ================================================================ */

/* ── BASE : prévention overflow horizontal ── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── SMALL TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  .lb-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════════════ */
@media (max-width: 768px) {

  body { font-size: 15px; line-height: 1.6; }

  /* ─ Conteneurs ─ */
  .mns-wrap, .lb-page, .pg,
  .container, .wrap, .page, .content,
  [class*="container"], [class*="wrapper"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─ Grilles → colonne unique ─ */
  .grid, [class*="grid-"], [class*="cols-"] { grid-template-columns: 1fr !important; }
  .flex-row { flex-direction: column !important; }
  .col, .column, [class*="col-"] { width: 100% !important; max-width: 100% !important; }

  /* ─ Titres ─ */
  h1 { font-size: 26px !important; line-height: 1.2 !important; }
  h2 { font-size: 21px !important; }
  h3 { font-size: 18px !important; }

  /* ══ INDEX : HERO ══ */
  .st-hero { padding: 24px 12px 14px !important; }
  .st-hero-title { font-size: 34px !important; line-height: 1.1 !important; }
  .st-hero-sub { font-size: 14px !important; }
  .st-hero-btn { width: min(340px, 100%) !important; font-size: 15px !important; }
  .st-section-title h2 { font-size: 22px !important; }

  /* ══ LISTES SERVEURS (MNS) ══ */
  .mns-row { border-radius: 12px; }
  .mns-row-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    align-items: stretch !important;
  }
  .mns-rank { justify-content: flex-start !important; font-size: 14px !important; }
  .mns-banner {
    width: 100% !important; height: 80px !important;
    border-radius: 10px !important; overflow: hidden !important;
  }
  .mns-banner img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .mns-right {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important;
    flex-wrap: wrap !important; gap: 8px !important; width: 100% !important;
    min-width: 0 !important;
  }
  .mns-right > * { min-width: 0 !important; }
  .mns-stat { font-size: 13px !important; gap: 5px !important; white-space: nowrap; }
  .mns-actions { justify-content: flex-start !important; gap: 6px !important; flex-wrap: wrap !important; }
  .mns-action {
    height: 34px !important; padding: 0 12px !important;
    font-size: 13px !important; border-radius: 9px !important;
  }
  .mns-pill { padding: 8px 14px !important; font-size: 13px !important; border-radius: 10px !important; }

  /* ══ FILTRES ══ */
  .st-filter-grid,
  [class*="filter-grid"],
  [class*="filter-bar"],
  .st-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .st-filter-grid > *,
  [class*="filter-grid"] > *,
  .st-filters > * { width: 100% !important; }
  .st-filter-actions { min-width: 0 !important; }
  .st-filter-actions-inner { justify-content: space-between !important; }

  /* ══ PAGE JEUX (games.php) ══ */
  .mns-wrap > h1 { font-size: 22px !important; margin-bottom: 8px !important; }
  /* Override inline style sur la grille filtres jeux */
  .st-filter-grid[style] {
    grid-template-columns: 1fr !important;
    display: flex !important; flex-direction: column !important;
  }

  /* ══ PAGE SERVEUR DÉTAIL (server.php) ══ */
  .server-detail { margin: 16px auto !important; padding: 0 12px !important; }
  .server-header { padding: 16px !important; border-radius: 14px !important; }
  .server-title { font-size: 22px !important; }
  .server-meta { gap: 10px !important; font-size: 14px !important; flex-wrap: wrap !important; }
  .server-actions { flex-direction: column !important; }
  .server-actions .btn { width: 100% !important; justify-content: center !important; }
  .server-info-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .info-card { padding: 16px !important; border-radius: 12px !important; }
  .description-card { padding: 16px !important; border-radius: 12px !important; }
  .info-value { font-size: 16px !important; word-break: break-all !important; }

  /* ══ CLASSEMENT (leaderboard.php) ══ */
  .lb-page { padding: 0 12px 48px !important; }
  .lb-hero { padding: 32px 0 0 !important; margin-bottom: 24px !important; }
  .lb-hero-title { font-size: 44px !important; }
  .lb-hero-inner { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .lb-hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: unset !important; width: 100% !important;
  }
  .lb-hstat { padding: 14px 10px !important; }
  .lb-hstat-val { font-size: 24px !important; }
  .lb-filters { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .lb-type-toggle { margin-left: 0 !important; width: 100% !important; }
  .lb-table-hd, .lb-row {
    grid-template-columns: 36px 1fr 70px 90px !important;
    padding: 0 12px !important;
  }
  .lb-th.c-active, .lb-stat.c-active,
  .lb-th.c-done, .lb-stat.c-done { display: none !important; }
  .lb-player-name { font-size: 14px !important; }
  .lb-grid { grid-template-columns: 1fr !important; }
  .lb-sidebar {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 12px !important;
  }

  /* ══ PAGE JOUEURS (players.php) ══ */
  .pl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .pl-search-bar { flex-direction: column !important; gap: 10px !important; }
  .pl-search { min-width: 0 !important; width: 100% !important; }

  /* ══ PAGE ÉQUIPES (teams.php) ══ */
  .t-grid { grid-template-columns: 1fr !important; }
  .t-header { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .t-create-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* ══ ADD_SERVER / TEAM_CREATE ══ */
  .two, .fg-grid, .form-two { grid-template-columns: 1fr !important; }
  .panel-bd { padding: 16px 14px 16px 16px !important; }

  /* ══ PROFIL ══ */
  .bc-inner { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .bc-inner .btn { width: 100% !important; justify-content: center !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .two { grid-template-columns: 1fr !important; }
  .tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .tab-bar { flex-wrap: nowrap !important; white-space: nowrap !important; }

  /* ══ ME/SERVERS ══ */
  .tr { grid-template-columns: 1fr !important; }
  .tr > div { grid-column: 1 !important; }
  .center { padding: 0 10px !important; }

  /* ══ VIP / AUTH ══ */
  .grid2 { grid-template-columns: 1fr !important; }
  .auth-card { width: min(100%, 440px) !important; margin: 0 auto !important; }

  /* ══ BREADCRUMB ══ */
  .bc { padding: 32px 0 26px !important; }
  .bc-title { font-size: 22px !important; }

  /* ══ FORMULAIRES ══ */
  form { max-width: 100% !important; }
  input, select, textarea {
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; font-size: 15px !important;
  }
  table { display: block !important; width: 100% !important; overflow-x: auto !important; }
  th, td { white-space: nowrap !important; }

  /* ══ FOOTER ══ */
  .site-footer__inner { flex-direction: column !important; gap: 16px !important; }
  .footer-links { min-width: 0 !important; width: 100% !important; }
  .footer-links__list { gap: 8px !important; }

  /* ══ UTILITAIRES ══ */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Dark inputs */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #EAF0FF !important;
  }
  input:focus, select:focus, textarea:focus {
    border-color: rgba(0,212,255,.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.12) !important;
  }
}

/* ── TRÈS PETIT ÉCRAN  ≤ 420px ── */
@media (max-width: 420px) {
  body { font-size: 14px !important; }
  .mns-wrap, .container, .pg, .lb-page {
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .st-hero-title { font-size: 28px !important; }
  .mns-banner { height: 65px !important; }
  .lb-hero-title { font-size: 36px !important; }
  .lb-hero-stats { grid-template-columns: 1fr 1fr !important; }
  .pl-grid { grid-template-columns: 1fr 1fr !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  .server-title { font-size: 19px !important; }
  .info-value { font-size: 14px !important; }
}

/* ── TABLETTE ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .mns-wrap, .container { padding-left: 20px !important; padding-right: 20px !important; }
  .mns-row-inner { grid-template-columns: 52px 1fr auto !important; }
  .st-hero-title { font-size: 46px !important; }
  .lb-grid { grid-template-columns: 1fr !important; }
}