/* 
 * Mobile Responsive Styles for Grand Exchange
 * Optimized for mobile-first experience
 */

/* Mobile Base Styles */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Header Optimization */
    header {
        padding: 15px 10px;
    }

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

    h1 {
        font-size: 1.8em !important;
        line-height: 1.2;
    }

    .wallet-status {
        width: 100%;
        max-width: 100%;
        padding: 10px 15px;
        font-size: 0.9em;
    }

    /* Back Link */
    .back-link {
        position: fixed;
        top: 10px;
        left: 10px;
        padding: 8px 15px;
        font-size: 0.85em;
        z-index: 1001;
        background: rgba(0,0,0,0.9);
    }

    /* Container Layout - Stack Vertically */
    .container {
        padding: 10px;
        gap: 15px;
        margin: 15px auto;
        max-width: 100%;
    }

    /* Sidebar Panels */
    .sidebar-panel {
        padding: 15px;
        margin-bottom: 15px;
    }

    .sidebar-title {
        font-size: 1.1em;
        margin-bottom: 12px;
    }

    /* Trading Panel */
    .trading-panel {
        padding: 20px 15px;
    }

    .panel-title {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    /* Tabs */
    .tabs {
        gap: 8px;
        margin-bottom: 20px;
    }

    .tab {
        padding: 12px 10px;
        font-size: 0.95em;
    }

    /* Search Input */
    .search-input {
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Item Grid - Better Mobile Layout */
    .item-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        max-height: none;
        padding-right: 0;
    }

    .item-card {
        padding: 12px;
    }

    .item-icon {
        font-size: 2.5em;
        margin-bottom: 8px;
    }

    .item-name {
        font-size: 0.85em;
        margin-bottom: 4px;
    }

    .item-price {
        font-size: 0.8em;
    }

    /* Trading Form */
    .trading-form {
        padding: 20px 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        font-size: 0.95em;
        margin-bottom: 6px;
    }

    .form-input {
        padding: 10px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Crypto Select Grid */
    .crypto-select {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .crypto-option {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    /* Submit Button */
    .submit-btn {
        padding: 14px;
        font-size: 1em;
        min-height: 48px; /* Better touch target */
    }

    /* Trade Items in Sidebar */
    .trade-item {
        padding: 10px;
        font-size: 0.9em;
        margin-bottom: 8px;
    }

    /* Market Intelligence Sections */
    #marketSentiment,
    #priceData,
    #newsSentiment,
    #tradingTips {
        margin-bottom: 15px;
    }

    #marketSentiment > div:first-child,
    #priceData > div:first-child,
    #newsSentiment > div:first-child,
    #tradingTips > div:first-child {
        font-size: 0.85em;
    }

    #sentimentIndicator,
    #newsIndicator {
        font-size: 1.1em !important;
    }

    #cryptoPrices {
        font-size: 0.85em;
    }

    #recommendationsList {
        font-size: 0.8em;
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5em !important;
    }

    .header-content {
        gap: 10px;
    }

    /* Single Column Grid for Very Small Screens */
    .item-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .panel-title {
        font-size: 1.2em;
    }

    .tab {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    /* Optimize crypto selection for small screens */
    .crypto-select {
        gap: 6px;
    }

    .crypto-option {
        padding: 8px 6px;
        font-size: 0.85em;
    }

    .back-link {
        font-size: 0.8em;
        padding: 6px 12px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .item-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-height: 300px;
        overflow-y: auto;
    }

    .container {
        margin: 10px auto;
    }
}

/* Touch Improvements */
@media (pointer: coarse) {
    /* Larger touch targets for mobile */
    .tab,
    .item-card,
    .crypto-option,
    .submit-btn {
        min-height: 44px; /* WCAG recommended minimum */
    }

    /* Add active state feedback */
    .tab:active,
    .item-card:active,
    .crypto-option:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .submit-btn:active {
        transform: scale(0.98);
    }
}

/* Improve Scrollbar on Mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.2);
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(255,215,0,0.6);
        border-radius: 2px;
    }
}

/* Loading States on Mobile */
@media (max-width: 768px) {
    .loading {
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Better Typography Scaling */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .sidebar-panel,
    .trading-panel {
        font-size: 1em;
    }
}

/* Safe Area Support for Notched Devices */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }

        .back-link {
            top: max(10px, env(safe-area-inset-top));
            left: max(10px, env(safe-area-inset-left));
        }
    }
}