/* ==========================================================================
   G-SIP - Global-Systematic Investment Plan
   Enhanced Mobile Responsive Design & Margin Optimization
   ========================================================================== */

/* Universal Mobile Overflow & Layout Resets */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
    background-color: var(--bg-app) !important;
}

/* Large Desktops & Wide Screens (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }
}

/* Tablets & Small Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets Portrait (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 260px;
    }

    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .app-main {
        margin-left: 0;
        padding-bottom: 70px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .chart-wrapper {
        height: 240px;
    }
}

/* ==========================================================================
   Comprehensive Smartphone Optimization (max-width: 540px)
   Covers standard smartphones (360px - 540px)
   ========================================================================== */
@media (max-width: 540px) {
    /* Container & Frame Resets: completely eliminate black side bars & shifts */
    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
    }

    /* Content Area: Consistent edge-to-edge padding with ample bottom clearance */
    .app-content {
        padding: 0.85rem 0.75rem calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 24px) 0.75rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Top Header Bar */
    .app-header-bar {
        padding: 0.85rem 0.75rem 1.25rem !important;
        border-bottom-left-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
        margin-bottom: 0.85rem !important;
    }

    .header-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 0.65rem !important;
        gap: 0.4rem !important;
    }

    .brand-header-logo {
        font-size: 1.15rem !important;
        gap: 0.45rem !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .brand-header-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .brand-header-badge {
        font-size: 0.58rem !important;
        padding: 0.1rem 0.35rem !important;
        white-space: nowrap !important;
    }

    .theme-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .lang-dropdown-btn {
        font-size: 0.725rem !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    .announcement-bar {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.725rem !important;
        border-radius: 10px !important;
        gap: 0.4rem !important;
    }

    .announcement-text {
        font-size: 0.725rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Quick Action Pills Row (Deposit / Withdraw) */
    .header-action-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .header-action-pill {
        padding: 0.65rem 0.75rem !important;
        border-radius: 14px !important;
        font-size: 0.85rem !important;
        box-sizing: border-box !important;
    }

    .header-action-pill span {
        font-size: 0.85rem !important;
    }

    .header-action-pill i,
    .header-action-pill svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Action Grid Card (About Us, Agent Partnership, Invite Friends, Customer Support) */
    .action-grid-card {
        padding: 0.85rem 0.75rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .action-grid-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .action-grid-item {
        font-size: 0.825rem !important;
        gap: 0.45rem !important;
        min-width: 0 !important;
    }

    .action-grid-item span {
        font-size: 0.825rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .action-grid-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    .grid-divider {
        margin: 0.65rem 0 !important;
    }

    /* Standard Cards: Normalized mobile padding & margins */
    .card {
        padding: 0.85rem 0.75rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* ==========================================================================
       Portfolio Summary 6-Box Grid: Precision Mobile Layout & Zero Overflow
       ========================================================================== */
    .portfolio-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }

    .portfolio-box {
        padding: 0.75rem 0.65rem !important;
        border-radius: 14px !important;
        min-width: 0 !important;
        min-height: 95px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .portfolio-box-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.25rem !important;
        margin-bottom: 0.35rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .portfolio-title {
        font-size: 0.64rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .portfolio-icon {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .view-options-btn {
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        padding: 0.15rem 0.38rem !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.18rem !important;
    }

    .view-options-btn i,
    .view-options-btn svg {
        width: 10px !important;
        height: 10px !important;
    }

    .portfolio-value {
        font-size: 1.18rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin-bottom: 0.18rem !important;
        word-break: break-word !important;
    }

    .portfolio-subtitle {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--text-secondary) !important;
    }

    [data-theme="light"] .portfolio-title {
        color: #475569 !important;
    }

    [data-theme="light"] .portfolio-subtitle {
        color: #64748b !important;
    }

    /* Team Page 7-Box Grid on Mobile */
    .team-7box-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        margin-bottom: 0.85rem !important;
        width: 100% !important;
    }

    .team-card-box {
        padding: 0.85rem 0.75rem !important;
        min-height: 90px !important;
        border-radius: 12px !important;
        min-width: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .team-card-box.box-featured {
        grid-column: 1 / -1 !important;
        padding: 1rem 0.85rem !important;
    }

    .team-card-title {
        font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
        font-weight: 800 !important;
        color: var(--text-primary) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.35rem !important;
        position: relative !important;
        z-index: 2 !important;
        word-break: break-word !important;
    }

    [data-theme="light"] .team-card-title {
        color: #0f172a !important;
    }

    [data-theme="light"] .team-card-val {
        color: #047857 !important;
    }

    [data-theme="dark"] .team-card-title {
        color: #ffffff !important;
    }

    .team-card-val {
        font-size: clamp(0.72rem, 2.8vw, 0.825rem) !important;
        font-weight: 700 !important;
        color: var(--accent-emerald) !important;
        line-height: 1.2 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .team-card-watermark {
        position: absolute !important;
        bottom: 4px !important;
        right: 6px !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 0.15 !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .team-card-view-btn {
        margin-top: 0.5rem !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Spin Wheel Game Mobile Engine Responsive Optimizations */
    .jackpot-hero-card {
        padding: 1rem 0.85rem !important;
        border-radius: 14px !important;
    }

    .jackpot-amount-display {
        font-size: clamp(1.75rem, 6.5vw, 2.4rem) !important;
    }

    .wheel-stage {
        padding: 1rem 0.5rem !important;
        border-radius: 16px !important;
        margin: 0.75rem 0 !important;
    }

    .wheel-wrapper {
        width: min(280px, calc(100vw - 48px)) !important;
        height: min(280px, calc(100vw - 48px)) !important;
    }

    .spin-center-btn {
        width: clamp(52px, 15vw, 64px) !important;
        height: clamp(52px, 15vw, 64px) !important;
        font-size: clamp(0.72rem, 2.6vw, 0.85rem) !important;
    }

    .package-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .package-card {
        padding: 0.75rem 0.4rem !important;
    }

    .package-card .package-spins {
        font-size: 1rem !important;
    }

    .package-card .package-price {
        font-size: 1.15rem !important;
    }

    .package-ribbon {
        top: 4px !important;
        right: -24px !important;
        font-size: 0.5rem !important;
        padding: 1px 22px !important;
    }

    .referral-scroll-list {
        max-height: 84px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fixed 5-Tab Bottom Navigation Bar: Safe-Area & Visual Perfection */
    .fixed-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--bottom-nav-height) !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-card-solid) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-top: 1px solid var(--border-color) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
        z-index: 1000 !important;
    }

    [data-theme="light"] .fixed-bottom-nav {
        background: rgba(255, 255, 255, 0.96) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .nav-tab-item {
        color: #64748b !important;
    }

    [data-theme="light"] .nav-tab-item.active {
        color: #4f46e5 !important;
    }

    [data-theme="dark"] .fixed-bottom-nav {
        background: rgba(18, 26, 43, 0.96) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
    }

    [data-theme="dark"] .nav-tab-item {
        color: #94a3b8 !important;
    }

    [data-theme="dark"] .nav-tab-item.active {
        color: #818cf8 !important;
    }

    .nav-tab-item {
        padding: 0.35rem 0.2rem !important;
        font-size: 0.68rem !important;
        gap: 0.2rem !important;
    }

    .nav-tab-item svg,
    .nav-tab-item i {
        width: 20px !important;
        height: 20px !important;
    }

    /* Rewards / Tasks Tabs & Cards */
    .task-nav-tabs {
        display: flex !important;
        gap: 0.4rem !important;
        overflow-x: auto !important;
        padding: 0.2rem 0.25rem 0.5rem 0.25rem !important;
        margin-bottom: 0.75rem !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .task-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .task-tab-btn {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.78rem !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .task-hall-card {
        flex-direction: column !important;
        border-radius: 16px !important;
    }

    .task-card-left {
        padding: 0.85rem !important;
        gap: 0.65rem !important;
    }

    .task-card-right {
        min-width: 100% !important;
        padding: 0.65rem 0.85rem !important;
        text-align: left !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Team Business Milestone Card */
    .referral-rates-card {
        padding: 0.6rem !important;
    }

    /* Modals & Dialogs Mobile Perfection Engine */
    .modal, .modal-overlay {
        padding: max(10px, env(safe-area-inset-top, 10px)) 8px max(10px, env(safe-area-inset-bottom, 10px)) 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-content,
    .modal-container {
        padding: 0 !important;
        margin: auto !important;
        width: 100% !important;
        max-width: calc(100% - 10px) !important;
        max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 10px) + env(safe-area-inset-bottom, 10px))) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .modal-header {
        padding: 0.85rem 1rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        background: var(--bg-card-solid) !important;
        border-bottom: 1px solid var(--border-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 25 !important;
    }

    .modal-header h3,
    .modal-header h4 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        max-width: calc(100% - 44px) !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }

    .modal-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 1.5rem !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        background: rgba(255, 255, 255, 0.16) !important;
        color: var(--text-primary) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .modal-body {
        padding: 0.9rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        max-height: 100% !important;
        overscroll-behavior: contain !important;
    }

    .modal-container > form {
        padding: 0.9rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        overscroll-behavior: contain !important;
    }

    /* Toast Notifications */
    .toast {
        min-width: calc(100vw - 1.5rem) !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }

    /* Form Elements & Inputs with Icons */
    .form-group {
        margin-bottom: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-label {
        font-size: 0.825rem !important;
        margin-bottom: 0.35rem !important;
        display: block !important;
    }

    .input-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-input, .form-select, .form-textarea {
        font-size: 0.875rem !important;
        padding: 0.75rem 0.95rem !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* CRITICAL: Inputs with leading icons MUST have sufficient left padding */
    .input-has-icon .form-input,
    .input-has-icon input.form-input,
    .input-wrapper.input-has-icon .form-input {
        padding-left: 2.85rem !important;
    }

    .currency-input-dollar,
    #compoundingAmountInput {
        padding-left: 34px !important;
    }

    /* Inputs with trailing action (e.g. password eye toggle or copy button) */
    .input-wrapper.has-toggle-pwd .form-input,
    .input-wrapper input[type="password"],
    .input-wrapper .form-input[style*="padding-right"] {
        padding-right: 2.85rem !important;
    }

    /* Icon positioning and z-index to prevent overlapping */
    .input-icon {
        position: absolute !important;
        left: 0.95rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        z-index: 5 !important;
        color: var(--text-muted) !important;
    }

    .input-icon svg,
    .input-icon i {
        width: 18px !important;
        height: 18px !important;
    }

    .input-toggle-pwd {
        position: absolute !important;
        right: 0.75rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .input-toggle-pwd svg,
    .input-toggle-pwd i {
        width: 18px !important;
        height: 18px !important;
    }

    /* Mobile Phone Number & Country Code Layout */
    .phone-input-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .country-code-select {
        flex: 0 0 105px !important;
        width: 105px !important;
        min-width: 100px !important;
        max-width: 120px !important;
        height: 44px !important;
        padding: 0.5rem 0.35rem !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        background: var(--bg-input, rgba(255, 255, 255, 0.06)) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15)) !important;
        border-radius: var(--radius-md, 10px) !important;
        color: var(--text-primary, #fff) !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    .phone-input-row .input-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .captcha-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .captcha-row .input-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .captcha-visual-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
    }

    .captcha-canvas {
        width: 110px !important;
        height: 40px !important;
        border-radius: 8px !important;
    }

    .captcha-refresh-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .captcha-hint {
        margin-top: 0.35rem !important;
        font-size: 0.7rem !important;
    }

    /* Investment VIP Plan Cards */
    .plan-vip-card {
        border-radius: 14px !important;
        margin-bottom: 0.75rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .plan-vip-left {
        padding: 0.85rem 0.75rem !important;
        gap: 0.75rem !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .plan-vip-left > div {
        min-width: 0 !important;
    }

    .plan-vip-right {
        min-width: 105px !important;
        max-width: 120px !important;
        padding: 0.75rem 0.65rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        text-align: right !important;
    }

    .plan-vip-right .text-lg {
        font-size: 1.05rem !important;
    }
}

/* ==========================================================================
   Compact / Narrow Smartphones (max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {
    .app-content {
        padding: 0.65rem 0.5rem calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) 0.5rem !important;
    }

    .portfolio-box {
        padding: 0.6rem 0.45rem !important;
        min-height: 90px !important;
    }

    .portfolio-title {
        font-size: 0.58rem !important;
    }

    .portfolio-value {
        font-size: 1.05rem !important;
    }

    .portfolio-subtitle {
        font-size: 0.58rem !important;
    }

    .brand-header-logo {
        font-size: 1rem !important;
    }

    .lang-dropdown-btn span {
        display: none !important;
    }

    .lang-dropdown-btn {
        padding: 0.25rem 0.4rem !important;
    }

    .input-has-icon .form-input,
    .input-has-icon input.form-input,
    .input-wrapper.input-has-icon .form-input {
        padding-left: 2.75rem !important;
    }

    .input-icon {
        left: 0.8rem !important;
    }

    .input-icon svg,
    .input-icon i {
        width: 16px !important;
        height: 16px !important;
    }

    .captcha-canvas {
        width: 96px !important;
        height: 38px !important;
    }

    .captcha-refresh-btn {
        width: 38px !important;
        height: 38px !important;
    }
}