/* ============================================ */
/* MOBILE RESPONSIVE STYLES - COMPLETE CLEAN */
/* ============================================ */

/* ============================================ */
/* TABLET & MOBILE - max-width: 768px */
/* ============================================ */
@media screen and (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    /* Container */
    .container {
        padding: 0 16px;
    }
    
    /* Landing Page Navigation */
    .nav-toggle {
        display: block;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow-lg);
        gap: 16px;
        z-index: 100;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-link {
        padding: 12px 16px;
        border-radius: var(--radius-sm);
    }
    
    .nav-link:hover {
        background: var(--light);
    }
    
    .nav-link::after {
        display: none;
    }
    
    /* Grid System */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tables */
    .table-container {
        margin: 0 -16px;
        overflow-x: auto;
    }
    
    table {
        font-size: 0.875rem;
    }
    
    th,
    td {
        padding: 8px 12px;
    }
    
    /* Cards */
    .card {
        padding: 16px;
    }
    
    .card-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    /* Forms */
    .form-input {
        padding: 10px 14px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: 14px 28px;
    }
    
    /* Modal */
    .modal-content {
        padding: 24px;
        margin: 16px;
        width: calc(100% - 32px);
        max-height: 90vh;
    }
    
    /* Admin Panel */
    .admin-sidebar {
        width: 100%;
        position: relative;
    }
    
    .admin-content {
        margin-left: 0;
    }

    /* ============================================ */
    /* DASHBOARD MOBILE SIDEBAR */
    /* ============================================ */
    
    /* Hide sidebar off-screen */
    .sidebar {
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        -webkit-transition: transform 0.3s ease !important;
        z-index: 250 !important;
        width: 280px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
    }
    
    /* Show sidebar when toggled */
    .sidebar.open {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Main content full width */
    .main-content {
        margin-left: 0 !important;
        padding: 16px !important;
        padding-top: 70px !important;
        width: 100% !important;
    }
    
    /* Dashboard header mobile */
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .dashboard-header h1 {
        font-size: 1.5rem !important;
    }
    
    .header-actions {
        width: 100% !important;
    }
    
    .header-actions .btn {
        flex: 1 !important;
    }
    
    /* Mobile menu hamburger button */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        z-index: 300 !important;
        width: 44px !important;
        height: 44px !important;
        background: #1e293b !important;
        color: white !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-menu-btn:active {
        transform: scale(0.95) !important;
        -webkit-transform: scale(0.95) !important;
    }
    
    /* Sidebar dark overlay */
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 199 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .sidebar-overlay.active {
        display: block !important;
    }
    
    /* Wallet card mobile */
    .wallet-card {
        padding: 20px !important;
    }
    
    .wallet-balance {
        font-size: 2rem !important;
    }
    
    .wallet-actions {
        flex-direction: column !important;
    }
    
    .wallet-actions .btn {
        width: 100% !important;
    }
    
    /* Quick actions mobile */
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .quick-action-btn {
        padding: 16px !important;
    }
    
    .quick-action-btn i {
        font-size: 1.5rem !important;
    }
    
    .quick-action-btn h4 {
        font-size: 0.875rem !important;
    }
    
    /* Profile picture mobile */
    .profile-pic-wrapper {
        width: 130px !important;
        height: 130px !important;
    }
    
    .avatar-default,
    .profile-pic-img {
        width: 130px !important;
        height: 130px !important;
    }
    
    .avatar-default i {
        font-size: 3rem !important;
    }
    
    /* Share buttons mobile */
    .share-buttons {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .share-buttons .btn {
        flex: 1 !important;
        min-width: calc(50% - 3px) !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding: 10px 12px !important;
    }
    
    /* Referral box mobile */
    .referral-box {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .referral-link {
        width: 100% !important;
    }
    
    .copy-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Filter tabs mobile */
    .filter-tabs {
        gap: 6px !important;
    }
    
    .filter-tab {
        padding: 6px 14px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Search bar mobile */
    .search-bar {
        flex-direction: column !important;
    }
    
    .search-input {
        width: 100% !important;
    }
    
    /* Stats cards mobile */
    .stat-card .stat-value {
        font-size: 1.5rem !important;
    }
    
    /* Activity list mobile */
    .activity-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .activity-amount {
        width: 100% !important;
        text-align: right !important;
    }
    
    /* Pricing cards mobile */
    .pricing-card {
        padding: 24px 16px !important;
    }
    
    .pricing-amount {
        font-size: 2rem !important;
    }
}

/* ============================================ */
/* DESKTOP - Hide mobile elements */
/* ============================================ */
@media screen and (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
    
    .sidebar {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
    
    .main-content {
        margin-left: 280px !important;
        padding: 32px !important;
    }
}

/* ============================================ */
/* VERY SMALL SCREENS - max-width: 480px */
/* ============================================ */
@media screen and (max-width: 480px) {
    /* Typography */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
    
    /* Stats */
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-card .stat-value {
        font-size: 1.25rem !important;
    }
    
    .stat-card .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    /* Notification */
    .notification {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        padding: 12px 16px !important;
        font-size: 0.875rem !important;
    }
    
    /* Sidebar narrower */
    .sidebar {
        width: 260px !important;
    }
    
    /* Quick actions single column */
    .quick-actions {
        grid-template-columns: 1fr !important;
    }
    
    /* Share buttons full width */
    .share-buttons .btn {
        min-width: 100% !important;
    }
    
    /* Buttons full width */
    .btn-lg {
        width: 100% !important;
    }
    
    /* Wallet balance smaller */
    .wallet-balance {
        font-size: 1.75rem !important;
    }
    
    /* Table smaller text */
    table {
        font-size: 0.75rem !important;
    }
    
    th,
    td {
        padding: 6px 8px !important;
    }
    
    /* Modal full screen */
    .modal-content {
        padding: 20px !important;
        margin: 10px !important;
        width: calc(100% - 20px) !important;
        max-height: 95vh !important;
    }
    
    /* Forms */
    .grid-2 .form-group {
        margin-bottom: 12px !important;
    }
    
    /* Dashboard header */
    .dashboard-header h1 {
        font-size: 1.35rem !important;
    }
    
    /* Profile picture smaller */
    .profile-pic-wrapper {
        width: 110px !important;
        height: 110px !important;
    }
    
    .avatar-default,
    .profile-pic-img {
        width: 110px !important;
        height: 110px !important;
    }
    
    .avatar-default i {
        font-size: 2.5rem !important;
    }
}

/* ============================================ */
/* LANDSCAPE MOBILE FIX */
/* ============================================ */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .sidebar {
        width: 300px !important;
    }
    
    .main-content {
        padding-top: 60px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================ */
/* TOUCH DEVICE OPTIMIZATIONS */
/* ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .btn {
        min-height: 44px;
    }
    
    .sidebar-nav li a {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch */
    .profile-pic-wrapper:hover .profile-pic-overlay {
        opacity: 0;
    }
    
    .profile-pic-wrapper:active .profile-pic-overlay {
        opacity: 1;
    }
}

/* ============================================ */
/* LEADERBOARD MOBILE */
/* ============================================ */
@media screen and (max-width: 768px) {
    .lb-tabs {
        gap: 6px;
    }
    
    .lb-tab {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    
    .podium {
        gap: 12px;
        padding: 0 10px;
    }
    
    .podium-item {
        width: 90px;
    }
    
    .podium-item .podium-avatar {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }
    
    .podium-item .podium-avatar img {
        width: 55px;
        height: 55px;
    }
    
    .podium-item .podium-name {
        font-size: 0.8125rem;
    }
    
    .podium-item .podium-earnings {
        font-size: 0.75rem;
    }
    
    .podium-rank-1 .podium-box { height: 110px; width: 45px; }
    .podium-rank-2 .podium-box { height: 85px; width: 45px; }
    .podium-rank-3 .podium-box { height: 60px; width: 45px; }
    
    .podium-medal {
        font-size: 2rem;
    }
    
    .lb-item {
        padding: 10px 14px;
    }
    
    .lb-item .lb-rank {
        font-size: 1rem;
        min-width: 35px;
    }
    
    .lb-item .lb-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .lb-item .lb-avatar img {
        width: 36px;
        height: 36px;
    }
    
    .lb-item .lb-info .lb-name {
        font-size: 0.8125rem;
    }
    
    .lb-item .lb-amount {
        font-size: 0.875rem;
    }
    
    .your-rank-card {
        padding: 16px 18px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .your-rank-card .yr-left {
        width: 100%;
    }
    
    .your-rank-card .yr-rank {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 480px) {
    .podium {
        gap: 8px;
    }
    
    .podium-item {
        width: 75px;
    }
    
    .podium-item .podium-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }
    
    .podium-item .podium-avatar img {
        width: 45px;
        height: 45px;
    }
    
    .podium-item .podium-name {
        font-size: 0.7rem;
    }
    
    .podium-rank-1 .podium-box { height: 90px; width: 35px; }
    .podium-rank-2 .podium-box { height: 70px; width: 35px; }
    .podium-rank-3 .podium-box { height: 50px; width: 35px; }
    
    .podium-medal {
        font-size: 1.5rem;
    }
}