/* ==========================================
   ONCHAIN ETH - Master Layout & Responsive
   ========================================== */

/* ===== Desktop Layout Fix ===== */
.dashboard-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px !important;
    flex-shrink: 0 !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 100 !important;
}

.main-content {
    margin-left: 260px !important;
    flex: 1 !important;
    padding: 30px 40px !important;
    max-width: calc(100% - 260px) !important;
    width: calc(100% - 260px) !important;
    box-sizing: border-box !important;
}

/* Center content properly */
.main-content > * {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== Tablet (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .main-content {
        padding: 20px !important;
    }
    
    .balance-grid, .stats-row, .balance-cards, .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .active-stats {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* ===== Mobile (max-width: 768px) ===== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    .dashboard-container {
        flex-direction: column !important;
    }

    /* Sidebar → Bottom Navigation */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
        flex-direction: column !important;
        border-right: none !important;
        border-top: 1px solid #2a2a2a !important;
        z-index: 1000 !important;
        overflow: visible !important;
        background: #0f0f0f !important;
    }

    .sidebar-logo {
        display: none !important;
    }

    .sidebar-menu {
        flex-direction: row !important;
        justify-content: space-around !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 8px 5px !important;
        overflow-x: auto !important;
        border-bottom: 1px solid #2a2a2a !important;
    }

    .menu-item {
        flex-direction: column !important;
        gap: 3px !important;
        padding: 8px 5px !important;
        font-size: 9px !important;
        text-align: center !important;
        flex: 1 !important;
        min-width: 45px !important;
        border-radius: 8px !important;
        border-left: none !important;
        justify-content: center !important;
    }

    .menu-item i {
        font-size: 16px !important;
        width: auto !important;
    }

    .menu-item.active {
        border-left: none !important;
        border-top: 2px solid #C0C0C0 !important;
        background: #1a1a1a !important;
    }

    .sidebar-user {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 15px !important;
        border-top: none !important;
        margin-top: 0 !important;
        background: #0a0a0a !important;
        width: 100% !important;
    }

    .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .user-name {
        font-size: 12px !important;
        color: #C0C0C0 !important;
    }

    .user-email {
        font-size: 10px !important;
        color: #666 !important;
    }

    .logout-btn {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 12px !important;
        background: #ff4444 !important;
        color: white !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        margin-top: 0 !important;
    }

    /* Main Content Mobile */
    .main-content {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 15px !important;
        padding-bottom: 130px !important;
    }

    .main-content > * {
        max-width: 100% !important;
    }

    /* Page Header */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .page-header h1 { font-size: 20px !important; }

    /* Dashboard */
    .bonus-banner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .balance-amount { font-size: 32px !important; }

    .balance-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
    }

    .grid-value { font-size: 15px !important; }
    .grid-label { font-size: 8px !important; }

    .profit-info {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start !important;
    }

    .tier-header {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .tier-right { text-align: center !important; }

    .tier-footer {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    /* Deposit/Withdrawal */
    .balance-cards, .stats-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .balance-item { padding: 12px !important; }
    .item-value { font-size: 15px !important; }

    .network-option { padding: 12px !important; }
    .network-left { gap: 10px !important; }
    .network-left h4 { font-size: 14px !important; }
    .network-left p { font-size: 11px !important; }

    .coin-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 10px !important;
    }

    /* Ethereum/USDT */
    .qr-box {
        width: 180px !important;
        height: 180px !important;
    }

    .wallet-address { font-size: 11px !important; }

    .quick-amounts {
        grid-template-columns: 1fr 1fr !important;
    }

    .amount-input-box { padding: 12px !important; }
    .amount-input-box input { font-size: 16px !important; }

    /* Withdrawal Form */
    .asset-buttons {
        grid-template-columns: 1fr 1fr !important;
    }

    .asset-btn {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .address-input {
        padding: 12px !important;
        font-size: 13px !important;
    }

    .history-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .history-left { width: 100% !important; }
    .status-badge { align-self: flex-end !important; }

    /* Records */
    .summary-cards {
        grid-template-columns: 1fr !important;
    }

    .tabs {
        overflow-x: auto !important;
        gap: 5px !important;
    }

    .tab-btn {
        flex-shrink: 0 !important;
        padding: 8px 15px !important;
        font-size: 12px !important;
    }

    .record-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .record-left { width: 100% !important; }

    .record-right {
        text-align: left !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Mining Pool */
    .active-stats {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-value { font-size: 16px !important; }
    .stat-label { font-size: 9px !important; }

    .mining-tier {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    .tier-info { justify-content: space-between !important; }

    .tier-middle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px solid #2a2a2a !important;
        border-bottom: 1px solid #2a2a2a !important;
        padding: 10px 0 !important;
        min-width: auto !important;
    }

    .tier-middle h3 {
        display: inline-block !important;
        font-size: 18px !important;
    }

    .tier-middle p { display: inline-block !important; }

    .tier-action {
        min-width: auto !important;
        text-align: center !important;
        width: 100% !important;
    }

    .claim-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .countdown-box { width: 100% !important; }

    .total-claimed-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }

    /* Privacy/Terms */
    .header-card {
        flex-direction: column !important;
        text-align: center !important;
    }

    .header-icon { margin: 0 auto !important; }

    .policy-card, .terms-card {
        padding: 20px 15px !important;
    }

    .policy-header, .terms-header {
        flex-wrap: wrap !important;
    }

    .policy-header h3, .terms-header h3 {
        font-size: 14px !important;
    }

    .policy-card p, .terms-card p,
    .policy-card ul li, .terms-card ul li {
        font-size: 12px !important;
    }

    /* Chat */
    .chat-btn {
        bottom: 140px !important;
        right: 15px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    .chat-popup {
        bottom: 200px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    /* Login/Apply */
    .login-page, .apply-page {
        padding: 15px !important;
    }

    .login-box, .apply-box {
        padding: 25px 20px !important;
    }

    .login-box h2, .apply-box h2 {
        font-size: 20px !important;
    }
}

/* ===== Extra Small Mobile (max-width: 400px) ===== */
@media (max-width: 400px) {
    .main-content {
        padding: 10px !important;
        padding-bottom: 130px !important;
    }

    .balance-grid, .active-stats {
        grid-template-columns: 1fr !important;
    }

    .quick-amounts, .asset-buttons {
        grid-template-columns: 1fr 1fr !important;
    }

    .menu-item {
        font-size: 8px !important;
        padding: 6px 3px !important;
    }

    .menu-item span { display: none !important; }
    .menu-item i { font-size: 18px !important; }

    .page-header h1 { font-size: 18px !important; }
    .balance-amount { font-size: 26px !important; }

    .qr-box {
        width: 150px !important;
        height: 150px !important;
    }

    .wallet-address { font-size: 10px !important; }
    
    .user-name {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .user-email { display: none !important; }
}