/* ===================================
   CitadelVest Pro - Responsive Styles
   File: public/css/responsive.css
   Mobile & Tablet Optimizations
   =================================== */

/* === TABLET (1024px and below) === */
@media screen and (max-width: 1024px) {
    main {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 1rem 0;
        padding: 0 1rem;
    }

    main section.middle {
        width: 100%;
    }
    
    nav .menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    nav .profile-area {
        gap: 1rem;
    }
    
    nav .logo {
        font-size: 1.5rem;
    }
    
    main aside {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 1000;
        background: var(--color-white);
        width: 280px;
        height: 100vh;
        box-shadow: 2rem 0 2rem rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        overflow-y: auto;
        display: flex;
    }
    
    main aside.show {
        left: 0;
    }
    
    main section.middle .cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* === MOBILE (768px and below) === */
@media screen and (max-width: 768px) {
    /* Balance Cards Mobile */
    main section.middle .cards {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    /* USDT takes full width */
    main section.middle .cards .card:first-child {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* BTC and ETH take half width each */
    main section.middle .cards .card:nth-child(2),
    main section.middle .cards .card:nth-child(3) {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
        width: calc(50% - 0.5rem) !important;
    }
    
    main section.middle .cards .card {
        min-width: auto;
        width: 100%;
    }
    
    /* Monthly Report Mobile */
    main .monthly-report {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    
    main .monthly-report .report {
        padding: 1rem;
    }
    
    main .monthly-report h1 {
        font-size: 1.3rem;
    }
    
    /* Right Section Mobile */
    main section.right {
        grid-column: 1;
        width: 100%;
    }

    /* Deposit Funding Grid Mobile */
    .deposit-funding-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Wallet Box Mobile */
    .wallet-box {
        padding: 1.5rem !important;
    }
    
    .wallet-box h3 {
        font-size: 1.1rem !important;
    }
    
    /* Wallet Stats Mobile */
    .wallet-stats {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .wallet-stats > div {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 120px !important;
    }

    /* Investment Card Mobile */
    #activeInvestmentCard > div > div > div {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    #activeInvestmentCard > div > div > div > div {
        border: none !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    #activeInvestmentCard > div > div > div > div:last-child {
        border-bottom: none !important;
    }
}

/* === SMALL MOBILE (600px and below) === */
@media screen and (max-width: 600px) {
    nav .container {
        width: 94%;
    }
    
    nav .logo {
        font-size: 1.3rem;
    }
    
    nav .theme-btn {
        width: 4rem;
        height: 1.8rem;
    }
    
    nav .profile h5 {
        display: none;
    }

    /* All modals on small mobile */
    #depositInfoModal > div,
    #depositClaimModal > div,
    #investmentModal > div,
    #withdrawModal > div,
    #withdrawToWalletModal > div {
        width: 95% !important;
        padding: 1.5rem !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Modal headings */
    #depositInfoModal h2,
    #depositClaimModal h2,
    #investmentModal h2,
    #withdrawModal h2,
    #withdrawToWalletModal h2 {
        font-size: 1.3rem !important;
    }
    
    /* Modal emojis */
    #depositInfoModal > div > div:first-child > div:first-child,
    #depositClaimModal > div > div:first-child > div:first-child,
    #investmentModal > div > div:first-child > div:first-child {
        font-size: 3rem !important;
    }
}

/* === DEPOSIT INFO MODAL MOBILE === */
@media screen and (max-width: 768px) {
    #depositInfoModal > div {
        padding: 1.5rem !important;
        width: 95% !important;
        max-height: 95vh !important;
        font-size: 0.9rem !important;
    }
    
    #depositInfoModal h2 {
        font-size: 1.5rem !important;
    }
    
    #depositInfoModal h3 {
        font-size: 0.95rem !important;
    }
    
    #depositInfoModal h4 {
        font-size: 0.9rem !important;
    }
    
    #depositInfoModal ol,
    #depositInfoModal ul {
        padding-left: 1.2rem !important;
        font-size: 0.85rem !important;
    }
    
    #depositInfoModal button {
        padding: 12px !important;
        font-size: 0.95rem !important;
    }
    
    #depositInfoWallet,
    #depositInfoMemo {
        font-size: 0.75rem !important;
    }
}

@media screen and (max-width: 480px) {
    #depositInfoModal > div {
        padding: 1rem !important;
    }
    
    #depositInfoModal .emoji {
        font-size: 3rem !important;
    }
    
    #depositInfoWallet,
    #depositInfoMemo {
        font-size: 0.7rem !important;
    }
}

/* =====================================================
   MOBILE FIXES — All pages (added 2026-02-18)
   ===================================================== */

/* ── Issues 4: Dashboard stats-grid — 2 cards per row on mobile ── */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Issue 6: Transactions stat boxes — 2 per row on mobile ── */
@media (max-width: 768px) {
    .transaction-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .stat-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 1rem !important;
    }
}

/* ── Issue 8: Activity security overview — 2 per row on mobile ── */
@media (max-width: 768px) {
    .security-overview {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .security-card {
        padding: 1rem !important;
    }
}

/* ── Issue 9: Referrals earnings overview — 2 per row on mobile ── */
@media (max-width: 768px) {
    .earnings-overview {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .earnings-card {
        padding: 1rem !important;
    }
}

/* ── Issue 7: Wallet — QR code square, no horizontal scroll ── */
@media (max-width: 1024px) {
    .qr-code {
        width: 100% !important;
        max-width: 200px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
    }
    .qr-code img,
    .qr-code canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 768px) {
    /* Prevent wallet page from getting horizontal scrollbar */
    .deposit-address-section,
    .withdrawal-addresses-section,
    .recent-transactions-section {
        overflow: hidden;
        max-width: 100%;
    }

    /* Pagination: never overflow horizontally */
    .pagination {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        overflow: hidden !important;
    }
    .page-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.3rem !important;
    }
    .page-btn {
        padding: 6px 10px !important;
        font-size: 0.82rem !important;
        min-width: 34px !important;
    }
}

/* ── Issue 11: Floating help button hidden — replaced by nav chat link ── */
/* The floating-help-btn is hidden because we add the chat widget instead */
/* This rule is a safety net for pages that still have it */
/* .floating-help-btn { */
    /* Kept visible as fallback — override in individual pages if needed */
/* } */