/* ══════════════════════════════════════════════════════
   Responsive — mobile / tablet / desktop overrides
   ══════════════════════════════════════════════════════ */

/* ── Mobile menu (hidden on desktop) ─────────────── */
#mobile-menu-btn { display: none; }
#mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgb(var(--c-surface-2));
    border-bottom: 1px solid rgb(var(--c-brd));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 12px;
    flex-direction: column;
    gap: 2px;
}
#mobile-nav.open {
    display: flex;
    animation: mobileNavIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mobileNavIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#mobile-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgb(156 163 175);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}
#mobile-nav a:hover,
#mobile-nav a.mob-active {
    background: rgba(255,255,255,0.05);
    color: rgb(229 231 235);
}
#mobile-nav .mob-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgb(var(--c-brd));
    margin-top: 4px;
}
html:not(.dark) #mobile-nav {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
html:not(.dark) #mobile-nav a { color: #64748b; }
html:not(.dark) #mobile-nav a:hover,
html:not(.dark) #mobile-nav a.mob-active {
    background: rgba(99,102,241,0.04);
    color: #1e293b;
}
html:not(.dark) #mobile-menu-btn { color: #64748b; }
html:not(.dark) #mobile-menu-btn:hover { background: rgba(0,0,0,0.04); color: #1e293b; }


/* ══════════════════════════════════════════════════════
   SIDEBAR → STACK  ≤ 1023px
   ══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .lottery-layout { flex-direction: column; }
    .lottery-sidebar { width: 100%; order: -1; margin-bottom: 12px; overflow-y: visible; }
    .lottery-sidebar .leaderboard-grid { grid-template-columns: repeat(2, 1fr); }
}


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

    /* ── Body: allow natural scrolling ─────────────── */
    body {
        height: auto !important;
        min-height: 100vh;
        overflow: auto !important;
    }

    /* ── Main content container ─────────────────────── */
    #main-content {
        padding: 12px !important;
        overflow: visible !important;
        flex: none !important;
        min-height: auto !important;
    }

    /* ── Nav: compact ──────────────────────────────── */
    nav {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .user-dropdown-wrapper { display: none !important; }
    .nav-user-pic { width: 24px !important; height: 24px !important; }
    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: rgb(156 163 175);
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.15s, color 0.15s;
    }
    #mobile-menu-btn:hover {
        background: rgba(255,255,255,0.05);
        color: rgb(229 231 235);
    }
    #mobile-menu-btn svg {
        width: 20px;
        height: 20px;
    }

    /* ── KPI grid: 2 columns ───────────────────────── */
    #kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #kpi-grid .kpi-card {
        padding: 14px !important;
    }
    #kpi-grid .kpi-card .text-\[32px\] {
        font-size: 24px !important;
    }
    /* Buttons row: span full width */
    #kpi-buttons {
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        grid-column: 1 / -1;
        padding-top: 0 !important;
    }

    /* ── Table: horizontal scroll ──────────────────── */
    #table-container {
        flex: none !important;
        min-height: auto !important;
        max-height: 60vh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #table-container > table {
        min-width: 700px;
    }

    /* ── Info popover: full-width overlay ──────────── */
    #info-popover {
        position: fixed !important;
        top: 52px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
    }

    /* ── Filter popover: fixed on mobile ──────────── */
    #filter-popover {
        position: fixed !important;
        top: 52px !important;
        right: 12px !important;
    }

    /* ── Profile info popover: full-width on mobile ── */
    #profile-info-popover {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
    }

    /* ── Month pills: compact ─────────────────────── */
    .month-pills {
        gap: 2px !important;
    }
    .month-pills a {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* ── Login card: compact padding ──────────────── */
    .login-card {
        padding: 24px !important;
        margin: 0 12px;
        max-width: 100% !important;
    }

    /* ── Profile: compact broker header ───────────── */
    .broker-header {
        padding: 14px !important;
    }
    .broker-header .broker-info {
        flex-direction: column;
        gap: 8px !important;
    }
    .broker-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .broker-details {
        font-size: 10px !important;
    }

    /* ── Profile: month pills ─────────────────────── */
    .profile-months a {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}


/* ══════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 380px
   ══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    /* Stack KPI cards to single column */
    #kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .month-pills a,
    .profile-months a {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    nav > a:first-child {
        font-size: 13px !important;
    }

    .login-card {
        padding: 20px !important;
    }

    /* ── Leaderboard mobile ──────────────────────── */
    .leaderboard-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .lb-entry { padding: 8px 10px !important; }
    .lb-avatar { width: 26px !important; height: 26px !important; font-size: 9px !important; }
}


/* ══════════════════════════════════════════════════════
   TABLET  641px – 1024px
   ══════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {

    /* Allow scrolling on tablet too */
    body {
        height: auto !important;
        min-height: 100vh;
        overflow: auto !important;
    }

    #main-content {
        padding: 16px !important;
        overflow: visible !important;
        flex: none !important;
        min-height: auto !important;
    }

    #kpi-grid {
        gap: 12px !important;
    }
    #kpi-grid .kpi-card {
        padding: 16px !important;
    }

    /* Info popover: narrower */
    #info-popover {
        width: 420px !important;
    }

    /* Table: horizontal scroll on tablet */
    #table-container {
        flex: none !important;
        min-height: auto !important;
        max-height: 70vh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #table-container > table {
        min-width: 700px;
    }

}