/* ═══════════════════════════════════════════════════════
   GameTracker — Responsive CSS
   Developed by templuxo.com
   Covers: all pages, mobile-first fixes
   ═══════════════════════════════════════════════════════ */

/* ─── Overflow helpers ─── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body { overflow-x: hidden; }

/* ─── Layout classes used by PHP pages ─── */
.profile-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}
.widget-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}
.user-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* ═══════════════════
   TABLET  (≤1024px)
═══════════════════ */
@media (max-width: 1024px) {
    .hero-banner-space { width: 260px; }
    .detail-body       { grid-template-columns: 1fr; }
    .stats-grid        { grid-template-columns: repeat(3, 1fr); }
    .admin-layout      { grid-template-columns: 1fr; }
    .premium-grid      { grid-template-columns: repeat(2, 1fr); }
    .games-grid        { grid-template-columns: repeat(3, 1fr) !important; }
    .games-list-grid   { grid-template-columns: 1fr !important; }
    .footer-grid       { grid-template-columns: 1fr 1fr; gap: 30px; }
    .profile-layout    { grid-template-columns: 190px 1fr; }
    .widget-layout     { grid-template-columns: 280px 1fr; }
}

/* ═══════════════════
   SMALL TABLET (≤900px)
═══════════════════ */
@media (max-width: 900px) {
    /* Hero */
    .hero-banner-space   { display: none !important; }
    .hero-slider         { display: none !important; }
    .hero-floating-icons { display: none !important; visibility: hidden !important; }
    .hero-float-icon     { display: none !important; }
    .hero-title { font-size: 26px; }
    .hero-sub   { font-size: 13px; }

    /* Layouts */
    .stats-grid      { grid-template-columns: repeat(3, 1fr); }
    .premium-grid    { grid-template-columns: 1fr; }
    .profile-layout  { grid-template-columns: 1fr; }
    .widget-layout   { grid-template-columns: 1fr; }
    .user-profile-grid { grid-template-columns: 1fr; }

    /* Server detail */
    .detail-body    { grid-template-columns: 1fr; }
    .detail-actions { flex-wrap: wrap; gap: 6px; }
    .detail-actions .btn { font-size: 11px; padding: 5px 10px; }

    /* Webhook dual-card grid */
    .wh-dual-grid   { grid-template-columns: 1fr !important; }
}

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

    /* ── Global ── */
    .container { padding: 0 12px; }

    /* ── HEADER ── */
    .nav              { display: none !important; }
    .mobile-toggle    { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }
    .lang-switch      { display: none !important; }
    .logo-sub         { display: none; }
    .header-inner     { padding: 0 10px; gap: 4px; flex-wrap: nowrap; }
    .header-actions   { gap: 4px; flex-wrap: nowrap; }
    .hide-mobile-auth { display: none !important; }
    .theme-toggle     {
        width: 36px; height: 36px; flex-shrink: 0;
        position: relative; z-index: 1001 !important;
        pointer-events: all !important;
        touch-action: manipulation;
    }
    .notif-dropdown   { z-index: 1001; }
    .user-btn         { padding: 4px 8px; flex-shrink: 0; }
    .user-name        { display: none; }
    .topbar           { font-size: 10px; padding: 3px 0; }
    .topbar-left .topbar-stat:nth-child(n+3)  { display: none; }
    .topbar-right .topbar-stat:nth-child(n+2) { display: none; }

    /* ── HERO (index.php) ── */
    .hero {
        padding: 20px 14px 24px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .hero-floating-icons, .hero-float-icon,
    #heroCanvas, .hero-slider, .hero-banner-space {
        display: none !important;
        visibility: hidden !important;
    }
    .hero-parallax-layer {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .hero-title      { font-size: 22px; line-height: 1.3; }
    .hero-sub        { font-size: 12px; margin-bottom: 14px; }
    .hero-stats      { gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .hero-stat-val   { font-size: 20px; }
    .hero-stat-label { font-size: 9px; }
    .hero-search     { flex-direction: column; gap: 8px; width: 100%; }
    .hero-search .form-control,
    .hero-search .btn { width: 100%; }
    .hero-search .btn { justify-content: center; }

    /* ── SERVERS PAGE ── */
    .filter-bar       { flex-direction: column; gap: 8px; }
    .filter-bar .form-control,
    .filter-bar select,
    .filter-bar input  { width: 100%; min-width: 0; }
    .filter-bar .btn   { width: 100%; justify-content: center; }
    .view-toggle       { align-self: flex-end; }
    .server-table      { font-size: 11px; white-space: nowrap; }
    .server-table th, .server-table td { padding: 6px 8px; }
    .server-name       { font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
    .server-ip         { font-size: 10px; }
    .map-name          { font-size: 11px; }
    .game-badge        { font-size: 9px; padding: 1px 5px; }
    .players-bar       { height: 2px; }
    .votes-count       { font-size: 11px; }
    .server-tags       { display: none; }
    .server-table .hide-mobile { display: none; }

    /* ── SERVER DETAIL (server.php) ── */
    .detail-header     { padding: 14px; }
    .detail-name       { font-size: 17px; }
    .detail-meta       { font-size: 11px; flex-wrap: wrap; }
    .detail-actions    { flex-wrap: wrap; gap: 4px; }
    .detail-actions .btn { font-size: 10px; padding: 4px 8px; }
    .detail-body       { grid-template-columns: 1fr; }
    .sidebar-card      { padding: 14px; }
    .info-row          { font-size: 12px; }
    .stats-grid        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card         { padding: 12px; }
    .stat-card-value   { font-size: 18px; }
    .stat-card-label   { font-size: 10px; }
    .banner-tabs       { flex-wrap: wrap; }
    .banner-tab        { font-size: 11px; padding: 4px 10px; }

    /* ── GAMES PAGE ── */
    .games-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .game-card         { height: 145px; }
    .game-card-name    { font-size: 12px; }
    .game-card-icon-wrap { width: 52px; height: 52px; }
    .games-list-grid   { grid-template-columns: 1fr !important; }
    /* games.php list card */
    .game-list-card    { flex-direction: column; }
    .game-list-img     { width: 100% !important; height: 100px !important; border-radius: 8px 8px 0 0 !important; }

    /* ── PREMIUM PAGE ── */
    .premium-grid      { grid-template-columns: 1fr; gap: 12px; }
    .premium-card-name { font-size: 13px; }
    .premium-card-bottom { font-size: 12px; }
    .plan-grid         { grid-template-columns: 1fr !important; }

    /* ── PROFILE PAGE ── */
    .profile-layout    { grid-template-columns: 1fr; }
    .profile-sidebar   { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .profile-sidebar .sidebar-link { flex: 1; min-width: 120px; text-align: center; }

    /* ── MY SERVERS PAGE ── */
    .my-server-header  { flex-direction: column; gap: 8px; }
    .group-controls    { flex-wrap: wrap; }

    /* ── ADD SERVER / EDIT SERVER ── */
    .form-row          { flex-direction: column; }
    .detect-row        { flex-direction: column !important; }
    .detect-row .form-group { max-width: 100% !important; }

    /* ── COMPARE PAGE ── */
    .compare-grid      { grid-template-columns: 1fr !important; }
    .compare-selects   { flex-direction: column; }

    /* ── WEBHOOK PAGE ── */
    .wh-dual-grid      { grid-template-columns: 1fr !important; }
    .notify-grid       { grid-template-columns: repeat(2, 1fr) !important; }
    .wh-section-body   { padding: 14px; }

    /* ── WIDGET PAGE ── */
    .widget-layout     { grid-template-columns: 1fr; }

    /* ── MAPS PAGE ── */
    .maps-filters      { flex-direction: column; gap: 8px; }
    .maps-filters .form-control { width: 100%; }

    /* ── PLAYERS / PLAYER PAGES ── */
    .player-header     { flex-direction: column; gap: 12px; }
    .player-stats-row  { flex-wrap: wrap; }

    /* ── CLAIM PAGE ── */
    .claim-layout      { grid-template-columns: 1fr; }

    /* ── AUTH PAGES ── */
    .auth-wrap         { padding: 16px 0; }
    .auth-card         { padding: 20px 16px; }
    .auth-title        { font-size: 20px; }

    /* ── ADMIN ── */
    .admin-stats       { grid-template-columns: 1fr 1fr; }
    .admin-layout      { grid-template-columns: 1fr; }
    .admin-search-row  { flex-direction: column; gap: 8px; }

    /* ── USER PROFILE (user.php) ── */
    .user-profile-grid { grid-template-columns: 1fr; }

    /* ── SECTIONS ── */
    .section-header    { flex-direction: column; gap: 8px; align-items: flex-start; }
    .section-title     { font-size: 17px; }
    .card-header       { flex-wrap: wrap; gap: 8px; }

    /* ── FOOTER ── */
    .footer-grid       { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-bottom     { flex-direction: column; gap: 8px; text-align: center; }
}

/* ═══════════════════
   SMALL PHONE  (≤480px)
═══════════════════ */
@media (max-width: 480px) {
    .container         { padding: 0 10px; }
    .hero              { padding: 14px 10px 18px !important; }
    .hero-title        { font-size: 18px; }
    .hero-stat-val     { font-size: 17px; }
    .hero-stat         { min-width: 55px; }

    .games-grid        { grid-template-columns: repeat(2, 1fr) !important; }
    .game-card         { height: 125px; }
    .game-card-icon-wrap { width: 44px; height: 44px; }
    .game-card-name    { font-size: 11px; }

    .stats-grid        { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stat-card         { padding: 10px; }
    .stat-card-value   { font-size: 15px; }

    .premium-card-content { padding: 14px; }
    .premium-card-name    { font-size: 12px; }

    .detail-name       { font-size: 15px; }
    .detail-header     { padding: 12px; }
    .section-title     { font-size: 15px; }
    .footer-grid       { grid-template-columns: 1fr; gap: 16px; }
    .admin-stats       { grid-template-columns: 1fr; }
    .auth-card         { padding: 16px 12px; }
    .notify-grid       { grid-template-columns: 1fr !important; }

    .server-table .server-ip { display: none; }
    .server-name       { max-width: 130px; }
}

/* ═══════════════════
   VERY SMALL (≤360px)
═══════════════════ */
@media (max-width: 360px) {
    .hero-title        { font-size: 16px; }
    .hero-stat-val     { font-size: 15px; }
    .game-card         { height: 112px; }
    .server-table th, .server-table td { padding: 4px 5px; font-size: 10px; }
    .server-name       { max-width: 110px; font-size: 10px; }
}

/* ═══════════════════
   TOUCH — tap targets
═══════════════════ */
@media (hover: none) and (pointer: coarse) {
    .btn               { min-height: 40px; }
    .btn-sm            { min-height: 34px; }
    .nav-link          { padding: 12px 14px; }
    .mobile-nav-link   { padding: 14px 20px; }
    .form-control      { min-height: 42px; font-size: 16px; }
    select.form-control { min-height: 42px; }
    .theme-toggle      { min-width: 42px; min-height: 42px; touch-action: manipulation; }
    .btn-vote          { min-width: 36px; min-height: 36px; }
    .server-table a    { padding: 2px 0; }
    .dropdown-menu a   { padding: 10px 16px; }
}

/* ═══════════════════
   LANDSCAPE PHONE
═══════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero              { min-height: auto !important; padding: 12px !important; }
    .hero-floating-icons, #heroCanvas { display: none !important; }
}

/* ═══════════════════
   SAFE AREA (notch)
═══════════════════ */
@supports (padding: env(safe-area-inset-left)) {
    .header-inner {
        padding-left:  max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .container {
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* ═══════════════════
   PRINT
═══════════════════ */
@media print {
    .header, .topbar, .footer, .mobile-nav, .mobile-toggle,
    .btn-vote, .detail-actions, #heroCanvas,
    .hero-floating-icons { display: none !important; }
    body               { background: #fff; color: #000; }
    .card, .sidebar-card, .glass-card { border: 1px solid #ddd; box-shadow: none; }
}

/* ════════════════════════════════════════════════
   PAGE-SPECIFIC MOBILE RULES
   ════════════════════════════════════════════════ */

/* ─── SERVERS PAGE ─── */
@media (max-width: 768px) {
    /* Filter bar stacks vertically */
    .filter-bar select,
    .filter-bar .form-control { min-width: 0 !important; width: 100% !important; }
    /* View toggle full width */
    .view-toggle { width: 100%; }
    .view-toggle-btn { flex: 1; justify-content: center; }
    /* Server card items */
    .server-card-item { padding: 10px 12px; }
    .server-card-item .server-name { font-size: 12px; }
    /* Hide some table columns */
    .server-table .col-map,
    .server-table .col-country { display: none; }
}

/* ─── SERVER DETAIL PAGE ─── */
@media (max-width: 768px) {
    /* Stats row: 2 per row */
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    /* Player chart full width */
    .player-chart { width: 100% !important; }
    /* Banner embed codes */
    .banner-tabs { flex-wrap: wrap; }
    .banner-code-wrap { overflow-x: auto; }
    /* Top buttons */
    .detail-actions .btn-vote { width: 100%; margin-bottom: 4px; }
    /* Review form */
    .review-form textarea { min-height: 80px; }
    /* Info rows: label on top */
    .info-row { flex-direction: column; gap: 2px; }
    .info-row .label { font-size: 10px; color: var(--text-muted); }
}

/* ─── GAMES PAGE ─── */
@media (max-width: 768px) {
    .game-list-card { flex-direction: column !important; }
    .game-list-img  { width: 100% !important; height: 120px !important; }
    .game-list-info { padding: 10px 12px !important; }
}
@media (max-width: 480px) {
    .games-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── PREMIUM PAGE ─── */
@media (max-width: 768px) {
    .premium-plans-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .plan-card  { padding: 20px 16px !important; }
}
@media (max-width: 480px) {
    .plan-card  { padding: 16px 12px !important; }
}

/* ─── PROFILE PAGE ─── */
@media (max-width: 768px) {
    /* Profile header: stack avatar + info */
    .profile-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .profile-avatar { margin: 0 auto 12px !important; }
    /* Sidebar tabs: horizontal scroll */
    .profile-tabs   { overflow-x: auto; white-space: nowrap; }
    .profile-tab    { display: inline-flex !important; }
    /* Tables in profile */
    .profile-table  { font-size: 11px; }
    /* API key input */
    .api-key-wrap   { flex-direction: column !important; gap: 8px !important; }
    .api-key-wrap input { width: 100% !important; }
    /* Content grids */
    div[style*="display:grid"][style*="1fr 1fr"],
    div[style*="display:grid"][style*="1fr 2fr"],
    div[style*="display:grid"][style*="2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── MY SERVERS PAGE ─── */
@media (max-width: 768px) {
    /* Server groups: stack */
    .server-groups  { flex-direction: column !important; }
    .group-new-form { flex-wrap: wrap !important; }
    .group-new-form input { width: 100% !important; }
    /* Server list row */
    .my-server-row  { flex-direction: column !important; gap: 8px !important; }
    .my-server-actions { justify-content: flex-start !important; }
}

/* ─── ADD/EDIT SERVER ─── */
@media (max-width: 768px) {
    /* Port fields side by side */
    .port-row { flex-direction: column !important; }
    .port-row .form-group { max-width: 100% !important; }
    /* Detect button */
    #detectBtn { width: 100%; }
    /* Game select */
    .game-select-wrap { width: 100% !important; }
}

/* ─── WEBHOOK PAGE ─── */
@media (max-width: 768px) {
    /* Two-card grid → single column */
    div[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
        grid-template-columns: 1fr !important;
    }
    /* Notify grid */
    .notify-grid { grid-template-columns: 1fr 1fr !important; }
    /* Webhook table: horizontal scroll */
    .webhook-table-wrap { overflow-x: auto !important; }
}

/* ─── COMPARE PAGE ─── */
@media (max-width: 768px) {
    .compare-form { flex-direction: column !important; }
    .compare-form .form-group { min-width: 0 !important; width: 100% !important; }
    .compare-table { font-size: 11px; }
    .compare-table .metric-col { min-width: 100px; }
}

/* ─── MAPS PAGE ─── */
@media (max-width: 768px) {
    .maps-search-bar { flex-direction: column !important; gap: 8px !important; }
    .maps-search-bar input { max-width: 100% !important; width: 100% !important; }
    .map-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── PLAYERS / PLAYER PAGE ─── */
@media (max-width: 768px) {
    .player-header { flex-wrap: wrap !important; gap: 12px !important; }
    .player-header > div[style*="min-width:200px"] { min-width: 0 !important; width: 100% !important; }
    .player-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── WIDGET PAGE ─── */
@media (max-width: 768px) {
    .widget-layout { flex-direction: column !important; }
    .widget-config  { width: 100% !important; }
    .widget-preview-wrap { width: 100% !important; overflow-x: auto; }
}

/* ─── ADMIN ─── */
@media (max-width: 768px) {
    .admin-search-wrap { flex-direction: column !important; gap: 8px !important; }
    .admin-search-wrap input { width: 100% !important; }
    /* Admin plan limits table */
    .plan-limits-grid { grid-template-columns: 1fr 1fr !important; }
    /* Admin games form */
    .admin-game-form .form-row { flex-direction: column; }
}

/* ─── CLAIM PAGE ─── */
@media (max-width: 768px) {
    .claim-phrase-code { word-break: break-all; font-size: 12px !important; }
}

/* ─── GENERAL INLINE FLEX/GRID FIXES ─── */
@media (max-width: 600px) {
    /* Any inline flex row with gap that might overflow */
    div[style*="display:flex"][style*="gap:"] {
        flex-wrap: wrap;
    }
    /* Two-column user profile sections */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}