/* ═══════════════════════════════════════════════════════════════
   Echo Nexus — Mobile Responsive Fix  v3
   ONLY fixes what's missing — doesn't override existing 992px CSS
═══════════════════════════════════════════════════════════════ */

/* ── 992px: Rank card + UI fixes (sidebar already handled in dashboard.html) ── */
@media (max-width: 992px) {

    /* Rank Card Preview — fix overflow and sizing */
    #rank-card-preview {
        height: 160px !important;
    }

    .rank-preview-inner {
        padding: 0 16px !important;
    }

    .rank-preview-avatar {
        width: 88px !important;
        height: 88px !important;
        border-width: 3px !important;
    }

    .rank-preview-name { font-size: 17px !important; }
    .rank-preview-tag  { font-size: 11px !important; }
    .rank-preview-bar-label { font-size: 9px !important; }

    /* Rank card preview section inner padding */
    #pane-rankcards .sec-hdr ~ div[style*="padding:30px"],
    #pane-rankcards > div[style*="padding:30px"] {
        padding: 16px !important;
    }

    /* Theme gallery: 2-col */
    .rank-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Stats: 2-col */
    .overview-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Leaderboard */
    .podium-grid {
        grid-template-columns: 1fr !important;
    }

    .podium-1, .podium-2, .podium-3 {
        order: unset !important;
        height: auto !important;
        min-height: 160px !important;
    }

    .rankings-card { padding: 20px !important; }
    .lb-header { padding: 24px 20px !important; }

    /* Ops admin */
    .ops-grid { grid-template-columns: 1fr !important; }
}

/* ── 600px: Small phones ── */
@media (max-width: 600px) {

    /* Rank Card */
    #rank-card-preview { height: 132px !important; }
    .rank-preview-avatar { width: 68px !important; height: 68px !important; }
    .rank-preview-name { font-size: 14px !important; }
    .rank-preview-inner { padding: 0 10px !important; }

    /* Stats: 1-col */
    .overview-stats-grid { grid-template-columns: 1fr !important; }

    /* Gallery: 1-col */
    .rank-theme-grid { grid-template-columns: 1fr !important; }

    /* Leaderboard controls stack */
    .lb-controls { flex-direction: column !important; gap: 10px !important; }
    .lb-control-group { width: 100% !important; }
    .lb-toggle, .lb-period-btn { flex: 1 !important; }

    /* Leaderboard server info */
    .lb-server-icon { width: 56px !important; height: 56px !important; border-radius: 14px !important; }
    .lb-server-details h1 { font-size: 18px !important; }
    .lb-header { padding: 18px 14px !important; border-radius: 18px !important; }

    /* Leaderboard table → card style */
    .lb-table thead { display: none !important; }
    .lb-table tbody tr {
        display: block !important;
        margin-bottom: 10px !important;
        background: rgba(255,255,255,0.02) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .lb-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border-radius: 0 !important;
    }

    /* Podium compact */
    .podium-card { padding: 20px 12px !important; }
    .podium-avatar { width: 68px !important; height: 68px !important; }
    .podium-1 .podium-avatar { width: 82px !important; height: 82px !important; }
    .podium-name { font-size: 14px !important; }

    /* Ops admin */
    .ops-stats { grid-template-columns: 1fr !important; }
    .ops-toolbar { flex-direction: column !important; align-items: stretch !important; }
    .ops-tools { flex-wrap: wrap !important; gap: 6px !important; }
    .ops-filter-row { flex-wrap: wrap !important; }
    .ops-filter-chip { flex: 1 1 auto !important; min-width: 70px !important; justify-content: center !important; }

    /* Section header compact */
    .user-web-actions { width: 100% !important; }
    .user-web-tab { flex: 1 !important; text-align: center !important; }

    /* Toast */
    #toast-container { top: 8px !important; left: 8px !important; right: 8px !important; }
    .toast { min-width: 0 !important; width: 100% !important; }
}