/* ════════════════════════════════════════════════════════════════════
   mobile.css — Overrides responsive globaux (v688)
   Chargé en DERNIER pour avoir la priorité sur les autres feuilles.

   Stratégie : ne PAS dupliquer la logique, juste forcer des fallbacks
   à 480px et 768px pour les panels qui n'ont aucun media query dédié.

   Breakpoints standardisés :
     - 768px : tablette portrait / téléphone paysage
     - 480px : téléphone portrait standard
     - 380px : iPhone SE / petits Android
   ════════════════════════════════════════════════════════════════════ */

/* ── Anti-zoom iOS (input < 16px = zoom auto bloquant) ─────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Inputs compact dans modales peuvent overrider via classe spécifique */
  .op-input, .op-select,
  .stv2-footer-range,
  .npc-search-input {
    font-size: 14px !important;
  }
}

/* ── Tap targets : minimum 44×44 pour boutons fréquents ─────────────── */
@media (max-width: 768px) {
  button:not(.no-min-tap),
  .btn, .mg-btn, .cf-btn, .pn-tab, .pn-action {
    min-height: 40px;
  }
  /* Boutons inline (toolbars) restent compacts */
  .toolbar-btn, .filter-chip, .hsm-lot, .hsm-qty-btn,
  .rk-tab-btn, .pn-tab-mini {
    min-height: 32px;
  }
}

/* ── Account / Mon Compte : grilles fixes → flex ────────────────────── */
@media (max-width: 768px) {
  .accv2-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .accv2-quick { grid-template-columns: 1fr !important; }
  .accv2-row { flex-direction: column !important; gap: 8px !important; }
  .accv2-stat-bar { width: 100% !important; }
}
@media (max-width: 480px) {
  .accv2-kpis { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
}

/* ── Ranking : table large → simplification colonnes secondaires ────── */
.rk-table, .ranking-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .rk-row {
    grid-template-columns: 30px 1fr 60px 60px !important;
    font-size: 11.5px !important;
    padding: 6px 4px !important;
  }
  .rk-col-server, .rk-col-account, .rk-col-pseudo {
    /* Cache les colonnes secondaires sur mobile */
    display: none !important;
  }
}
@media (max-width: 480px) {
  .rk-row {
    grid-template-columns: 26px 1fr 50px !important;
  }
}

/* ── Combat dashboard : moins envahissant ──────────────────────────── */
@media (max-width: 900px) {
  .fdb-v2-grid {
    grid-template-columns: 1fr !important;
  }
  /* Quand combat actif, dashboard se contracte */
  #combat-dashboard.collapsed,
  #combat-dashboard {
    max-height: 38vh !important;
    overflow-y: auto !important;
  }
}

/* ── HDV : tables responsives ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hdv-listings-grid, .hdvm-grid, .hdvr-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .hdv-row, .hdvr-row {
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
  }
  .hdv-filter-bar, .hdvm-filters {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .hdv-filter-bar > * { font-size: 12px !important; }
  /* Modale vente : fit screen */
  .hsm-modal {
    width: 95vw !important;
    max-width: 95vw !important;
  }
  .hsm-lots {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Modales : largeur fluide ──────────────────────────────────────── */
@media (max-width: 768px) {
  .rename-modal, .modal-content, .shop-grid-modal, .grim-modal,
  .auth-features-grid, .cc-body, .forge-modal, .recipe-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
  }
  /* Modales très hautes */
  .offline-summary, .ol-summary {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  /* Modale offline : grid 4 col → 2 col */
  .ot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* offline-chars cards compactes */
  .offline-chars {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
}

/* ── Boutique jetons : grille responsive ───────────────────────────── */
@media (max-width: 768px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .shop-offer { padding: 8px !important; }
  .shop-offer-name { font-size: 12px !important; }
  .shop-offer-desc { font-size: 11px !important; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* ── Compendium : grilles 4 → 2 → 1 colonnes ───────────────────────── */
@media (max-width: 768px) {
  .cmpd-grid, .cmpd-list, .compendium-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cmpd-row { font-size: 12px !important; padding: 6px !important; }
}
@media (max-width: 480px) {
  .cmpd-grid, .cmpd-list, .compendium-grid { grid-template-columns: 1fr !important; }
}

/* ── Bureau / Missions : cards 2 → 1 ───────────────────────────────── */
@media (max-width: 768px) {
  .mission-cards, .bureau-grid, .br-grid { grid-template-columns: 1fr !important; }
  .mission-card { padding: 10px !important; }
}

/* ── Quests : liste 2 col → 1 ──────────────────────────────────────── */
@media (max-width: 768px) {
  .quests-list, .qst-grid { grid-template-columns: 1fr !important; }
  .qst-card { padding: 10px !important; }
}

/* ── Fresque : grille 5/6 → 2 sur mobile ───────────────────────────── */
@media (max-width: 768px) {
  .frq-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .frq-grid { grid-template-columns: 1fr !important; }
}

/* ── Runes catalog : grille responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .runes-grid, .rune-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .rune-tile { font-size: 11px !important; }
}

/* ── Inventaire : slots 6 → 5 → 4 col ──────────────────────────────── */
@media (max-width: 480px) {
  .inventory-grid, .inv-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
}
@media (max-width: 380px) {
  .inventory-grid, .inv-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── Banque : pagination + items resp ──────────────────────────────── */
@media (max-width: 768px) {
  .bank-grid, .bank-items {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
  .bank-filters, .bank-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}
@media (max-width: 380px) {
  .bank-grid, .bank-items { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Arène (combat) : sidebar collapse ─────────────────────────────── */
@media (max-width: 900px) {
  .arena-sidebar, .arena-side-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  .arena-main { padding: 6px !important; }
}

/* ── Notifications dropdown : largeur fluide ───────────────────────── */
@media (max-width: 480px) {
  #notif-dropdown {
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* ── Sidebar persos : compacte sur mobile portrait ─────────────────── */
@media (max-width: 480px) {
  .sidebar, #sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  .char-card { padding: 6px 8px !important; font-size: 12px !important; }
  .char-portrait { width: 32px !important; height: 32px !important; }
}

/* ── Header dashboard : pills resp ─────────────────────────────────── */
@media (max-width: 480px) {
  .dash-resources, .dash-res-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .dash-res-pill { padding: 3px 6px !important; }
}

/* ── Stats fiche perso : tooltip lisible ───────────────────────────── */
@media (max-width: 768px) {
  .stv2-grid { grid-template-columns: 1fr !important; }
  .stv2-stat-eq { font-size: 10px !important; }
  .stv2-card { padding: 10px !important; }
}

/* ── Forge / Concasseur : modales tighter ──────────────────────────── */
@media (max-width: 768px) {
  .forge-grid, .conc-grid, .concass-modal {
    grid-template-columns: 1fr !important;
  }
  .forge-aura-chip { font-size: 11px !important; padding: 3px 6px !important; }
}

/* ── Battle Pass : tier track scrollable ───────────────────────────── */
@media (max-width: 768px) {
  .bp-tiers-track, .bp-tier-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .bp-tier {
    min-width: 80px !important;
    font-size: 11px !important;
  }
}

/* ── Patchnotes : tabs scrollables ─────────────────────────────────── */
@media (max-width: 768px) {
  .pn-tabs, .pn-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .pn-tab { font-size: 11px !important; padding: 4px 8px !important; }
}

/* ── Toasts : pile en bas sur mobile, pas en top-right ─────────────── */
@media (max-width: 480px) {
  #toast-stack {
    left: 4px !important;
    right: 4px !important;
    bottom: 60px !important;
    top: auto !important;
    align-items: stretch !important;
  }
  .toast { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── Online-mode overlay : full screen mobile ──────────────────────── */
@media (max-width: 768px) {
  #op-overlay #op-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    overflow-y: auto !important;
  }
  #op-overlay #op-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  #op-overlay h2 { font-size: 13px !important; }
  #op-overlay .op-resource { font-size: 10px !important; padding: 2px 6px !important; }
}

/* ── Mode "Online active" dot : pas en sticky top-right ────────────── */
@media (max-width: 480px) {
  #online-mode-dot {
    bottom: 8px !important;
    left: 8px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  #op-launch-btn {
    bottom: 8px !important;
    left: auto !important;
    right: 8px !important;
    font-size: 10px !important;
  }
}

/* ── Safe area iOS notch ───────────────────────────────────────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── FARM mobile : bandeau donjon + plan compacts (v726) ─────────────
   Dragon Cochon : le bandeau (clé/infos/boss) + le « plan du donjon »
   prenaient une hauteur démesurée (« immense ») et repoussaient monstres
   et drops tout en bas. On compacte fortement sur téléphone, sans toucher
   la structure desktop. mobile.css est chargé en dernier → ces règles
   gagnent sur les overrides #panel-farm de style.css à largeur égale. */
@media (max-width: 640px) {
  /* Récupère la marge latérale (24px de chaque côté) gaspillée sur mobile */
  #panel-farm .farm-dungeon-banner.fdb-v2 { margin: 0 0 10px !important; }
  #panel-farm .fdb-v2-key,
  #panel-farm .fdb-v2-info,
  #panel-farm .fdb-v2-boss { padding: 9px 12px !important; gap: 9px !important; }
  #panel-farm .fdb-v2-info { gap: 4px !important; }
  #panel-farm .fdb-v2-key-img,
  #panel-farm .fdb-v2-boss-img,
  #panel-farm .fdb-v2-key-emoji,
  #panel-farm .fdb-v2-boss-emoji { width: 32px !important; height: 32px !important; font-size: 22px !important; }
  #panel-farm .fdb-v2-key-name,
  #panel-farm .fdb-v2-boss-name { font-size: 12.5px !important; }
  #panel-farm .fdb-v2-tip { display: none !important; }
  /* Plan du donjon : hauteur bornée + scroll au lieu d'une longue liste empilée */
  #panel-farm .fzd-rooms-list {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    max-height: 124px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #panel-farm .fzd-room { font-size: 11px !important; padding: 4px 8px !important; margin: 2px 3px 2px 0 !important; }
  /* En-tête de zone : titre mesuré, perceptor passe à la ligne */
  #panel-farm .fzd-header { flex-wrap: wrap !important; gap: 6px !important; padding: 12px 12px 10px !important; }
  #panel-farm .fzd-title { font-size: 15px !important; }
  /* Monstres + drops : grilles plus denses pour limiter le scroll */
  #panel-farm .fmd-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 5px !important; }
  #panel-farm .farm-drops-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important; }
  /* Sous-zones : 2 colonnes au lieu d'1 sur les téléphones standards */
  #panel-farm .fzcv2-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important; }
}
@media (max-width: 380px) {
  #panel-farm .fmd-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #panel-farm .fzcv2-grid { grid-template-columns: 1fr !important; }
}

/* ── Fix scroll horizontal global (sécurité) ───────────────────────── */
html, body {
  overflow-x: hidden;
}