/**
 * Global Mobile Fixes
 * Comprehensive mobile layout fixes for ALL pages
 */

@media (max-width: 768px) {

    /* ==========================================================================
       HIDE FOOTER ON MOBILE - ALL PAGES (Desktop only)
       ========================================================================== */

    footer,
    .footer,
    .game-footer,
    .footer-content,
    .footer-bottom,
    .landing-footer,
    .footer-section,
    .footer-links,
    .footer-copyright,
    [class*="footer"],
    #footer,
    .site-footer {
        display: none !important;
    }

    /* ==========================================================================
       APP-LIKE FEEL (POLISH)
       ========================================================================== */

    html,
    body {
        overscroll-behavior-y: contain;
        /* Disable pull-to-refresh / bounce */
    }

    /* Disable text selection for UI feel */
    body {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Allow selection in inputs */
    input,
    textarea,
    [contenteditable] {
        user-select: text;
        -webkit-user-select: text;
    }

    /* ==========================================================================
       FIX BODY AND MAIN CONTAINERS
       ========================================================================== */

    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Remove footer padding from all main areas */
    .game-main,
    main,
    .main-content,
    .container,
    .content-wrapper {
        padding-bottom: 80px !important;
        /* Only nav bar space */
        margin-bottom: 0 !important;
    }

    /* ==========================================================================
       CENTER ALL CONTENT
       ========================================================================== */

    /* Main containers */
    .game-container,
    .main-container,
    .container,
    .content-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Game main area */
    .game-main {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Tab content */
    .tab-content {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       FIX GRID LAYOUTS
       ========================================================================== */

    /* Center all grids */
    .card-grid,
    .regional-market-items,
    .player-market-listings,
    .market-sell-list,
    .player-sell-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* =========================================
       REGIONAL MARKET FIX (The screenshot issue)
       ========================================= */
    .rm-header-row {
        display: none !important;
    }

    .rm-item-card {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px !important;
        height: auto !important;
        padding: 15px !important;
        position: relative !important;
        align-items: center !important;
    }

    /* 1. Main Info (Icon + Name) - Full Width */
    .rm-item-main {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .rm-item-icon-box {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
        flex-shrink: 0 !important;
    }

    .rm-item-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rm-item-name {
        font-size: 1.1rem !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    /* 2. Rarity Badge - Top Right Absolute */
    .rm-badge-cell {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
    }

    .rm-badge {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        width: auto !important;
    }

    /* 3. Stats - Full Width */
    .rm-stats-box {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }

    /* 4. Type Info - Hidden (Redundant) */
    .rm-type-info {
        display: none !important;
    }

    /* 5. Stock & Price - Split Row */
    .rm-stock-box {
        grid-column: 1 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rm-stock-val {
        font-size: 1.2rem !important;
    }

    .rm-price-box {
        grid-column: 2 !important;
        justify-self: end !important;
        font-size: 1.2rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* 6. Action Button - Full Width Bottom */
    .rm-action-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 5px !important;
    }

    .rm-buy-btn {
        width: 100% !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    /* Regional Market Info Header */
    .regional-market-info {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .info-part {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-bottom: 10px !important;
    }

    /* Redesigned Mobile Market Card (Old/Simple Market) */
    .market-item,
    .listing-card,
    .sell-item-card {
        display: grid !important;
        grid-template-columns: 70px 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "icon name"
            "icon price"
            "action action" !important;
        gap: 8px !important;
        padding: 12px !important;
        min-height: auto !important;
        text-align: left !important;
        align-items: center !important;
    }

    .market-item-icon {
        grid-area: icon !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
}

.market-item-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.market-item-name {
    grid-area: name !important;
    text-align: left !important;
    font-size: 1rem !important;
    white-space: normal !important;
    /* Allow wrapping */
    align-self: end !important;
    padding-left: 4px !important;
}

.market-item-price {
    grid-area: price !important;
    justify-content: flex-start !important;
    background: none !important;
    padding: 0 !important;
    padding-left: 4px !important;
    font-size: 0.9rem !important;
    align-self: start !important;
    margin: 0 !important;
}

.btn-buy-market,
.btn-list-item,
.btn-sell-npc {
    grid-area: action !important;
    margin-top: 4px !important;
    padding: 10px !important;
    width: 100% !important;
}

/* Adjust Rarity Badge Position */
.item-rarity {
    top: 8px !important;
    right: 8px !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    z-index: 5 !important;
}

/* Center all grids */
.action-grid,
.menu-grid,
.grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    justify-content: center !important;
    justify-items: center !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Menu cards */
.menu-card,
.action-card,
.card {
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 auto !important;
}

/* ==========================================================================
       FIX BUTTONS
       ========================================================================== */

/* Toggle buttons (KARAKTER, GÖREVLER) */
.toggle-panel-btn,
.btn-toggle-character,
.btn-toggle-quest,
[class*="toggle"] {
    width: 48% !important;
    margin: 0 1% !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}

/* Button containers */
.panel-toggles,
.toggle-buttons,
.button-group {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

/* ==========================================================================
       FIX SPECIFIC PAGE ELEMENTS
       ========================================================================== */

/* Header */
.game-header,
header {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
}

/* Stats display */
.stats-display,
.player-stats {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
       FIX PANELS & LAYOUT STACKING (Guild, PvP, etc.)
       ========================================================================== */

.left-panel,
.right-panel {
    width: 85vw !important;
    max-width: 350px !important;
}

/* Force Stack Layout for Guild */
.guild-content,
.guild-container {
    display: flex !important;
    flex-direction: column !important;
}

.guild-sidebar,
.guild-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    display: block !important;
    /* Ensure visibility */
}

/* PvP Layout - pvp.css'de mobil/masaüstü ayrı yönetiliyor, burada override yok */

/* Force Stack Layout for Market */
.market-layout,
.regional-market-container {
    display: flex !important;
    flex-direction: column !important;
}

.market-sidebar,
.market-content,
.market-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
}

/* ==========================================================================
       PREVENT HORIZONTAL SCROLL
       ========================================================================== */

* {
    max-width: 100vw !important;
}

html {
    overflow-x: hidden !important;
    width: 100vw !important;
}

/* ==========================================================================
       FIX SPECIFIC GAME ELEMENTS
       ========================================================================== */

/* Background image container */
.game-bg,
.background-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main game area background */
.main-game-area {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
}

/* ==========================================================================
   DESKTOP ONLY - Show footer
   ========================================================================== */

@media (min-width: 769px) {

    footer,
    .footer,
    .game-footer,
    .landing-footer {
        display: block !important;
    }
}