/* ============================================================
   MOBILE RESPONSIVE COMPLET - SERVER TRACKER
   Compatible avec le thème NEON
   ============================================================ */

/* ===== BASE MOBILE ===== */
@media (max-width: 768px) {
  
  /* Prévention du débordement horizontal */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* ===== CONTENEURS GÉNÉRAUX ===== */
  .container,
  .wrap,
  .page,
  .content,
  .mns-wrap,
  .main-content,
  .page-content,
  [class*="container"],
  [class*="wrapper"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  
  /* ===== GRILLES → COLONNE UNIQUE ===== */
  .grid,
  .row,
  [class*="grid-"],
  [class*="cols-"],
  [class*="row-"],
  .flex-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .col,
  .column,
  [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
  }
  
  /* ===== CARDS & BOXES ===== */
  .card,
  .box,
  .panel,
  .mns-card,
  .server-card,
  .game-card,
  .user-card,
  .vip-card,
  [class*="card-"],
  [class*="box-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 16px !important;
  }
  
  .card *,
  .box *,
  [class*="card-"] * {
    min-width: 0 !important;
  }
  
  /* ===== LISTES DE SERVEURS (MNS) ===== */
  .mns-row-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    align-items: stretch !important;
  }
  
  .mns-rank {
    justify-content: flex-start !important;
    font-size: 16px !important;
  }
  
  .mns-banner {
    width: 100% !important;
    height: 92px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  
  .mns-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Titre dans la bannière - masqué sur mobile si trop petit */
  .mns-title {
    font-size: 12px !important;
    padding: 5px 8px !important;
    max-width: calc(100% - 16px) !important;
  }
  
  /* Nom du serveur au-dessus (mobile) */
  .mns-name-top {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    padding: 0 4px !important;
  }
  
  .mns-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .mns-right > * {
    width: 100% !important;
  }
  
  /* Stats en ligne */
  .mns-stat {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
  }
  
  .mns-stat .lbl {
    font-size: 12px !important;
    opacity: 0.75 !important;
  }
  
  .mns-stat .val {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  
  /* Bouton copier IP */
  .mns-pill {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }
  
  /* Actions (boutons) */
  .mns-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  
  .mns-action {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  
  /* Form de vote */
  .vote-form {
    width: 100% !important;
  }
  
  .vote-next {
    font-size: 11px !important;
    text-align: center !important;
    margin-top: 4px !important;
  }
  
  /* ===== HERO SECTION ===== */
  .st-hero {
    padding: 24px 12px 16px !important;
  }
  
  .st-hero-title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  
  .st-hero-sub {
    font-size: 14px !important;
    margin-top: 8px !important;
  }
  
  .st-hero-actions {
    margin-top: 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .st-hero-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  /* Section titles */
  .st-section-title {
    flex-direction: column !important;
    gap: 8px !important;
    margin: 16px 0 12px !important;
  }
  
  .st-section-title h2 {
    font-size: 22px !important;
  }
  
  /* ===== FORMULAIRES ===== */
  form {
    max-width: 100% !important;
  }
  
  input,
  select,
  textarea,
  .input,
  .select,
  .textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
  
  .form-grid,
  [class*="form-grid"],
  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .form-group,
  .field,
  [class*="form-group"] {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  
  /* ===== BOUTONS ===== */
  .btn,
  button,
  [type="submit"],
  [type="button"],
  .button,
  [class*="btn-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* ===== EXCEPTIONS: boutons d'interface (burger/header) ===== */
  /* Le header v4 utilise un <button> pour le burger : on annule le width:100% global */
  .hc-burger{
    width:44px !important;
    max-width:44px !important;
    padding:0 !important;
    border-radius:10px !important;
  }
  .hc-burger span{width:20px !important;}

  /* Bouton de fermeture (si présent) */
  .hc-mclose{
    width:44px !important;
    max-width:44px !important;
    padding:0 !important;
  }
  
  /* Groupes de boutons */
  .btn-group,
  .button-group,
  [class*="btn-group"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .btn-group .btn,
  .button-group .button {
    width: 100% !important;
  }
  
  /* ===== TABLEAUX ===== */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
  }
  
  thead {
    display: none !important;
  }
  
  tbody,
  tr {
    display: block !important;
    width: 100% !important;
  }
  
  tr {
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border: none !important;
  }
  
  td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    opacity: 0.7 !important;
    font-size: 12px !important;
  }
  
  /* ===== NAVIGATION & TABS ===== */
  .nav-tabs,
  .tabs,
  [class*="tabs-"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  
  .nav-tabs a,
  .tabs a,
  .tab {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    flex-shrink: 0 !important;
  }
  
  /* ===== MODALES & POPUPS ===== */
  .modal,
  .popup,
  [class*="modal-"],
  [class*="popup-"] {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    border-radius: 16px !important;
  }
  
  .modal-content,
  .popup-content {
    padding: 20px 16px !important;
  }
  
  .modal-header,
  .popup-header {
    font-size: 18px !important;
    padding: 16px !important;
  }
  
  /* ===== IMAGES & MEDIA ===== */
  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .img-fluid,
  .responsive-img,
  [class*="img-"] {
    width: 100% !important;
    height: auto !important;
  }
  
  /* ===== AVATARS & ICONS ===== */
  .avatar,
  .user-avatar,
  [class*="avatar-"] {
    width: 48px !important;
    height: 48px !important;
  }
  
  .avatar-large {
    width: 80px !important;
    height: 80px !important;
  }
  
  .avatar-small {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* ===== BADGES & LABELS ===== */
  .badge,
  .label,
  .tag,
  [class*="badge-"],
  [class*="tag-"] {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
  }
  
  /* ===== ALERTS & MESSAGES ===== */
  .alert,
  .message,
  .notification,
  [class*="alert-"],
  [class*="message-"] {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  
  /* ===== SIDEBAR → FULL WIDTH ===== */
  .sidebar,
  .aside,
  [class*="sidebar-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    position: static !important;
  }
  
  /* ===== FILTRES (Barre de filtrage) ===== */
  .st-filters,
  .filters,
  [class*="filters-"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .st-filters > *,
  .filters > * {
    width: 100% !important;
  }
  
  /* Select et recherche */
  .st-filter-select,
  .st-filter-search,
  select.filter,
  input.search {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
  }
  
  /* ===== PAGINATION ===== */
  .pagination,
  .pager,
  [class*="pagination-"] {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .pagination a,
  .pagination button,
  .pager a,
  .pager button {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 38px !important;
  }
  
  /* ===== BREADCRUMBS ===== */
  .breadcrumb,
  [class*="breadcrumb-"] {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  /* ===== CARDS SPÉCIALES (VIP, Profile, etc) ===== */
  .vip-card,
  .profile-card,
  .stats-card {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .vip-card h2,
  .vip-card h3,
  .profile-card h2,
  .profile-card h3 {
    font-size: 20px !important;
  }
  
  .vip-features,
  .profile-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* ===== PRICING TABLES (VIP) ===== */
  .pricing-table,
  .plans,
  [class*="pricing-"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .plan,
  .pricing-card,
  [class*="plan-"] {
    width: 100% !important;
    padding: 20px !important;
  }
  
  .plan-price,
  .price {
    font-size: 32px !important;
  }
  
  /* ===== TOOLTIPS ===== */
  .tooltip,
  [class*="tooltip-"] {
    font-size: 12px !important;
    max-width: 200px !important;
  }
  
  /* ===== DROPDOWNS ===== */
  .dropdown,
  .dropdown-menu,
  [class*="dropdown-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ===== SPACING UTILITIES ===== */
  .mt-lg, .my-lg { margin-top: 16px !important; }
  .mb-lg, .my-lg { margin-bottom: 16px !important; }
  .pt-lg, .py-lg { padding-top: 16px !important; }
  .pb-lg, .py-lg { padding-bottom: 16px !important; }
  
  .mt-md, .my-md { margin-top: 12px !important; }
  .mb-md, .my-md { margin-bottom: 12px !important; }
  .pt-md, .py-md { padding-top: 12px !important; }
  .pb-md, .py-md { padding-bottom: 12px !important; }
  
  .mt-sm, .my-sm { margin-top: 8px !important; }
  .mb-sm, .my-sm { margin-bottom: 8px !important; }
  .pt-sm, .py-sm { padding-top: 8px !important; }
  .pb-sm, .py-sm { padding-bottom: 8px !important; }
  
  /* ===== TEXTE ===== */
  h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; line-height: 1.3 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; line-height: 1.4 !important; }
  h5 { font-size: 16px !important; line-height: 1.4 !important; }
  h6 { font-size: 14px !important; line-height: 1.4 !important; }
  
  p, .text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }
  
  /* ===== FLEX & GRID UTILITIES ===== */
  .d-flex,
  .flex {
    display: flex !important;
  }
  
  .flex-column {
    flex-direction: column !important;
  }
  
  .flex-wrap {
    flex-wrap: wrap !important;
  }
  
  .justify-center {
    justify-content: center !important;
  }
  
  .align-center {
    align-items: center !important;
  }
  
  /* ===== VISIBILITY ===== */
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  /* ===== TOUCH OPTIMIZATIONS ===== */
  a, button, .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* ===== ANIMATIONS RÉDUITES (Performance) ===== */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* ===== SCROLL SMOOTH ===== */
  html {
    scroll-behavior: smooth !important;
  }
  
}

/* ===== TRÈS PETITS ÉCRANS (< 380px) ===== */
@media (max-width: 380px) {
  
  body {
    font-size: 13px !important;
  }
  
  .mns-wrap,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .st-hero-title {
    font-size: 30px !important;
  }
  
  .st-section-title h2 {
    font-size: 20px !important;
  }
  
  .mns-banner {
    height: 80px !important;
  }
  
  .mns-action {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  
}

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

/* ===== OPTIMISATIONS DARK MODE (Thème Neon) ===== */
@media (max-width: 768px) {
  
  /* Contraste amélioré sur mobile */
  .mns-row {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Amélioration de la lisibilité */
  .mns-stat .lbl,
  .vote-next,
  .text-muted,
  [class*="muted"] {
    opacity: 0.85 !important;
  }
  
  /* Boutons plus visibles */
  .mns-action,
  .btn {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.15), rgba(124, 92, 255, 0.08)) !important;
  }
  
  .mns-action:hover,
  .btn:hover {
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.25), rgba(124, 92, 255, 0.15)) !important;
  }
  
  /* Inputs plus visibles */
  input,
  select,
  textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--txt, #EAF0FF) !important;
  }
  
  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(124, 92, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15) !important;
  }
  
}

/* ===== FIN DU FICHIER ===== */