/**
 * Mon Petit Tartan - Mobile Layout Fix
 * Winamax-style mobile topbar & layout
 */

html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }

body.with-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    width: 100%;
}

/* Dropdown click support */
.user-dropdown-menu.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; }
.user-dropdown-toggle { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; cursor: pointer; }


/* ===== Topbar league selector — readable at all widths ===== */
.topbar-league-selector select { color: #fff; background: transparent; }
.topbar-league-selector select option { background: #1a1a1a; color: #fff; }
body.theme-light .topbar-league-selector select { color: #1a1a1a; }
body.theme-light .topbar-league-selector select option { background: #fff; color: #1a1a1a; }

/* ===== MOBILE TOPBAR - Winamax style ===== */
@media (max-width: 992px) {
    .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

    /* Topbar: [burger] [logo] [--- league selector ---] [coins] [notif] [avatar] */
    .topbar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: 100vw !important;
        height: 52px !important;
        z-index: 1000;
        background: var(--color-bg-secondary) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 0 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* Burger menu */
    .menu-toggle {
        display: flex !important;
        order: 1;
        flex-shrink: 0;
        width: 32px !important; height: 32px !important;
        font-size: 16px;
    }

    /* League selector - takes remaining space */
    .topbar-league-selector {
        order: 2 !important;
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: var(--color-bg-tertiary) !important;
        padding: 4px 10px !important;
        border-radius: 100px !important;
        border: 1px solid var(--border-color) !important;
        height: 34px !important;
        box-sizing: border-box !important;
        max-width: none !important;
        margin: 0 4px !important;
    }
    .topbar-league-selector i {
        color: var(--color-primary) !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }
    .topbar-league-selector select {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 0 !important; margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        text-overflow: ellipsis;
    }
    .topbar-league-selector select:focus { outline: none !important; }
    .topbar-league-selector select option { background: #1a1a1a; color: #fff; }

    /* Stats desktop hidden */
    .topbar-stats { display: none !important; }

    /* Actions group - right side
       Stats étant masquées sur mobile, c'est .topbar-actions qui absorbe
       l'espace via margin-left:auto pour rester collée à droite. */
    .topbar-actions {
        order: 3 !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0;
    }

    /* Coins pill compact */
    .topbar-actions .topbar-stat-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        background: rgba(255,200,0,0.1) !important;
        border-radius: 100px !important;
        border: 1px solid rgba(255,200,0,0.15) !important;
        height: 30px !important;
    }
    .topbar-actions .topbar-stat-item i { font-size: 0.7rem !important; color: var(--color-primary) !important; }
    .topbar-actions .topbar-stat-value { font-size: 0.72rem !important; font-weight: 700 !important; color: var(--color-primary) !important; }
    .topbar-actions .topbar-stat-label { display: none !important; }

    /* Notification button compact */
    .action-btn {
        width: 32px !important; height: 32px !important;
        font-size: 14px !important;
    }
    .action-btn .badge {
        top: -3px !important; right: -3px !important;
        min-width: 16px !important; height: 16px !important;
        font-size: 9px !important;
    }

    /* Avatar dropdown compact */
    .user-dropdown-toggle {
        padding: 2px !important;
        padding-right: 2px !important;
        height: 32px;
    }
    .user-dropdown-toggle img { width: 28px !important; height: 28px !important; }
    .user-dropdown-toggle i { display: none !important; }

    /* Dropdown menu */
    .user-dropdown-menu {
        width: 180px;
        right: 0 !important; left: auto !important;
        position: absolute;
        top: 100%;
        margin-top: 6px;
    }
    .user-dropdown:hover .user-dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-10px); }
    .user-dropdown-menu.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; z-index: 9999 !important; }
    .dropdown-item { padding: 12px 14px; font-size: 14px; }

    /* Page content with fixed topbar + bottom nav */
    .page-content {
        flex: 1;
        margin-top: 52px !important;
        padding: 12px !important;
        padding-bottom: 72px !important;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100% !important; max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Bottom nav */
    .mobile-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: 100vw !important;
        height: 56px !important;
        background: var(--color-bg-secondary) !important;
        border-top: 1px solid var(--border-color) !important;
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Sidebar hidden */
    .sidebar { transform: translateX(-100%); position: fixed; z-index: 1100; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: flex !important; }
}

/* ===== SMALL SCREENS ===== */
@media (max-width: 768px) {
    .topbar { height: 48px !important; }
    .page-content { margin-top: 48px !important; padding: 10px !important; padding-bottom: 68px !important; }
    .mobile-nav { height: 52px !important; }

    .topbar-league-selector { height: 30px !important; padding: 3px 8px !important; }
    .topbar-league-selector select { font-size: 0.72rem !important; }

    .dashboard-stats, .quick-actions, .section, .card, .welcome-banner { width: 100% !important; max-width: 100% !important; overflow: hidden; box-sizing: border-box; }
    .quick-actions { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 !important; }
    .quick-action-card { width: 100% !important; margin: 0 !important; }
    .logo-text { display: none; }
}

@media (max-width: 400px) {
    .topbar { padding: 0 6px !important; gap: 4px !important; }
    .topbar-league-selector { padding: 2px 6px !important; height: 28px !important; }
    .topbar-league-selector select { font-size: 0.68rem !important; }
    .menu-toggle { width: 28px !important; height: 28px !important; font-size: 14px !important; }
    .action-btn { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .user-dropdown-toggle img { width: 26px !important; height: 26px !important; }
    .mobile-nav-item span { font-size: 9px; }
    .mobile-nav-item i { font-size: 17px; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-nav { padding-bottom: env(safe-area-inset-bottom) !important; height: calc(52px + env(safe-area-inset-bottom)) !important; }
    .page-content { padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important; }
}

/* ===== MISC ===== */
.dashboard-welcome { width: 100%; max-width: 100%; box-sizing: border-box; }
.row, .col, .container, .section { max-width: 100%; overflow-x: hidden; }

/* Nav section titles */
.nav-section-title { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text-muted); padding: 16px 16px 6px; font-weight: 600; opacity: 0.7; }
.nav-badge.coins { background: linear-gradient(135deg, #FFC800, #FF9500); color: #0a0a0a; font-size: 0.6rem; padding: 2px 7px; border-radius: 10px; margin-left: auto; font-weight: 700; }

/* Hide mobile coins pill on desktop, show only on mobile */
.mobile-coins { display: none !important; }
@media (max-width: 992px) {
    .mobile-coins { display: flex !important; }
}

/* ===== MOBILE WALLET BUTTON + POPUP (Winamax balance style) ===== */
.mobile-wallet-wrapper { position: relative; display: none; }
@media (max-width: 992px) { .mobile-wallet-wrapper { display: block; } }

.mobile-wallet-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.2);
    border-radius: 100px;
    color: #FFC800;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    height: 30px;
    white-space: nowrap;
}
.mobile-wallet-btn:hover { background: rgba(255,200,0,0.15); }
.mobile-wallet-btn i { font-size: 0.7rem; }

/* Popup */
.mobile-wallet-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 8px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}
.mobile-wallet-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-wallet-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.mobile-wallet-popup-item:hover { background: rgba(255,255,255,0.04); }

.mwp-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: rgba(255,200,0,0.12);
    color: #FFC800;
    flex-shrink: 0;
}
.mwp-icon.coins { background: rgba(255,200,0,0.12); color: #FFC800; }
.mwp-icon.points { background: rgba(255,200,0,0.12); color: #FFC800; }
.mwp-icon.tokens { background: rgba(167,139,250,0.16); color: #C4B5FD; }

.mwp-info { display: flex; flex-direction: column; }
.mwp-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); font-weight: 500; }
.mwp-value { font-size: 0.9rem; font-weight: 800; color: #fff; }

/* ===== LIGHT THEME ===== */
body.theme-light {
    --color-bg-primary: #f2f2f2;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8e8e8;
    --color-bg-card: #ffffff;
    --color-bg-input: #f5f5f5;
    --color-bg-hover: #e0e0e0;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-text-inverse: #ffffff;
    --border-color: rgba(0,0,0,0.08);
    --border-color-light: rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}
body.theme-light .topbar,
body.theme-light .sidebar,
body.theme-light .mobile-nav { background: #ffffff; }
body.theme-light .mobile-wallet-btn { color: #b38f00; background: rgba(255,200,0,0.08); border-color: rgba(255,200,0,0.15); }
body.theme-light .mobile-wallet-popup { background: #ffffff; border-color: rgba(0,0,0,0.1); }
body.theme-light .user-dropdown-menu { background: #ffffff; }
body.theme-light .dropdown-item:hover { background: #f5f5f5; }
body.theme-light .action-btn { background: #f2f2f2; border-color: rgba(0,0,0,0.08); color: #666; }
body.theme-light .user-dropdown-toggle { background: #f2f2f2; border-color: rgba(0,0,0,0.08); }
body.theme-light .topbar-league-selector { background: #f2f2f2 !important; border-color: rgba(0,0,0,0.08) !important; }
body.theme-light .topbar-league-selector select { color: #1a1a1a !important; }
body.theme-light .topbar-league-selector select option { background: #fff; color: #1a1a1a; }
body.theme-light .topbar-stat-item { background: #f2f2f2 !important; border-color: rgba(0,0,0,0.08) !important; }
body.theme-light .topbar-stat-value { color: #1a1a1a !important; }
body.theme-light .nav-link { color: #666; }
body.theme-light .nav-link:hover { background: #f5f5f5; color: #1a1a1a; }
body.theme-light .nav-link.active { background: rgba(255,200,0,0.08); color: #b38f00; }
body.theme-light .mwp-label { color: rgba(0,0,0,0.5); }
body.theme-light .mwp-value { color: #1a1a1a; }

/* ===== LIGHT THEME - EXTENDED ===== */
body.theme-light .card,
body.theme-light .stat-card,
body.theme-light .wcard,
body.theme-light .wlist { background: #ffffff; border-color: rgba(0,0,0,0.08); }

body.theme-light .page-content { background: #f2f2f2; }

body.theme-light .page-header,
body.theme-light .welcome-banner { background: #ffffff; border-color: rgba(0,0,0,0.08); }

body.theme-light .section,
body.theme-light .ranking-list,
body.theme-light .table-container { background: #ffffff; border-color: rgba(0,0,0,0.08); }

body.theme-light .stat-card-icon.primary,
body.theme-light .stat-card-icon.bg-primary { background: rgba(255,200,0,0.1); }

body.theme-light .tabs { background: #e8e8e8; border-color: rgba(0,0,0,0.06); }
body.theme-light .tab.active { background: #ffffff; }
body.theme-light .tab { color: #666; }

body.theme-light .form-control,
body.theme-light .form-select { background: #f5f5f5; border-color: rgba(0,0,0,0.1); color: #1a1a1a; }

body.theme-light .modal { background: #ffffff; border-color: rgba(0,0,0,0.1); }
body.theme-light .modal-header,
body.theme-light .modal-footer { border-color: rgba(0,0,0,0.06); }

body.theme-light .athlete-card,
body.theme-light .league-card,
body.theme-light .match-card { background: #ffffff; border-color: rgba(0,0,0,0.08); }
body.theme-light .athlete-card-header { background: #f8f8f8; }

body.theme-light .ranking-item:hover,
body.theme-light .wlist-item:hover { background: #f5f5f5; }
body.theme-light .ranking-item { border-color: rgba(0,0,0,0.06); }

body.theme-light .filter-btn { background: #e8e8e8; border-color: rgba(0,0,0,0.06); color: #666; }
body.theme-light .filter-btn.active { background: #FFC800; color: #0a0a0a; }

body.theme-light .badge-primary { background: rgba(255,200,0,0.1); }
body.theme-light .badge-neutral { background: #e8e8e8; color: #666; }

body.theme-light .alert-warning { background: rgba(255,200,0,0.08); border-color: rgba(255,200,0,0.15); }
body.theme-light .alert-success { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.15); }
body.theme-light .alert-danger { background: rgba(255,59,59,0.08); border-color: rgba(255,59,59,0.15); }

body.theme-light .progress { background: #e8e8e8; }

body.theme-light .team-card-actions { background: #f8f8f8; border-color: rgba(0,0,0,0.08); }

body.theme-light .empty-state-icon { background: #e8e8e8; }

body.theme-light .tag { background: #e8e8e8; border-color: rgba(0,0,0,0.06); color: #666; }

body.theme-light .wpill { background: #e8e8e8; border-color: rgba(0,0,0,0.06); color: #666; }
body.theme-light .wpill.active { background: #FFC800; color: #0a0a0a; border-color: #FFC800; }

body.theme-light .wodd { background: #f2f2f2; }

body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* Trading cards keep dark look even in light mode */
body.theme-light .card-front { color: #fff; }