/**
 * Scroll Bar and Column Layout Fixes
 * 
 * Ensures maximum one vertical scroll bar per window and limits layouts 
 * to maximum two columns with proper mobile collapse as requested.
 */

/* === ONE SCROLL BAR PER WINDOW RULE === */

/* Remove nested scrolling in dialogs - only the main dialog should scroll */
.dialog-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
}

/* Remove scrolling from nested containers within dialogs */
.character-sheet-panel,
.shop-panel,
.achievements-content {
    overflow: visible !important;
    max-height: none !important;
}

/* Remove ALL scrolling from lists - only dialog should scroll */
.inventory-list,
.equipment-list,
.shop-list,
.achievements-grid {
    overflow: visible !important;
    max-height: none !important;
}

/* Remove scrolling from containers that should expand to fit content */
.character-sheet-container,
.shop-panels-container {
    overflow: visible !important;
}

/* === TWO COLUMN MAXIMUM RULE === */

/* Character sheet - two columns: stats | equipment+inventory */
.character-sheet-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two columns: stats | equipment+inventory */
    gap: 10px !important; /* Reduced from 15px */
}

/* Equipment and inventory go in the same column */
.equipment-inventory-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Reduced from 10px */
}

/* Shop panels - limit to 2 columns max */
.shop-panels-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Maximum 2 columns */
    gap: 15px !important;
}

/* Achievements grid - limit to 2 columns max */
.achievements-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Maximum 2 columns */
    gap: 15px !important;
}

/* Main menu columns - limit to 2 columns max */
.menu-columns-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Maximum 2 columns */
    gap: 20px !important;
}

/* Settings rows - keep as single column for clarity */
.settings-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* === MOBILE COLLAPSE === */

@media (max-width: 768px) {
    
    /* All multi-column layouts collapse to single column on mobile */
    .character-sheet-container,
    .shop-panels-container,
    .achievements-grid,
    .menu-columns-container {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 8px !important;
    }
    
    /* Equipment and inventory column should also stack on mobile */
    .equipment-inventory-column {
        gap: 8px !important;
    }
    
    /* Mobile dialogs should not have nested scrolling */
    .dialog-content {
        height: 95vh !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Individual panels should not scroll on mobile */
    .character-sheet-panel,
    .shop-panel {
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Only lists should scroll on mobile */
    .inventory-list,
    .equipment-list,
    .shop-list {
        max-height: 200px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Achievements grid gets special treatment on mobile */
    .achievements-grid {
        max-height: calc(95vh - 120px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* === TABLET RESPONSIVE === */

@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Tablets can handle 2 columns */
    .character-sheet-container,
    .shop-panels-container,
    .achievements-grid,
    .menu-columns-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

/* === LANDSCAPE MOBILE SPECIAL CASE === */

@media (max-width: 768px) and (orientation: landscape) and (max-height: 600px) {
    
    /* In landscape mode, we can afford 2 columns if screen is wide enough */
    .character-sheet-container,
    .shop-panels-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    /* But achievements should stay single column in landscape */
    .achievements-grid {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        max-height: calc(100vh - 100px) !important;
    }
    
    /* Reduce dialog padding in landscape */
    .dialog-content {
        padding: 8px !important;
        height: 98vh !important;
        max-height: 98vh !important;
    }
}

/* === GAME UI SCROLL FIXES === */

/* Game UI should never have scroll bars */
.ui-container,
.ui-panel,
.game-area,
.game-canvas-container {
    overflow: hidden !important;
}

/* Message logs are the only UI elements that should scroll */
#portrait-message-log,
#landscape-message-log {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Stats boxes should never scroll */
.stats-box,
.actions-box {
    overflow: hidden !important;
}

/* === MOBILE D-PAD FIXES === */

/* D-pad should never create scrolling */
.mobile-dpad {
    overflow: visible !important;
}

/* Mobile action buttons should not cause overflow */
.mobile-actions {
    overflow: visible !important;
}

/* === ADMIN AREA FIXES === */

/* Admin should follow the same rules but can be more flexible */
@media (min-width: 1025px) {
    
    /* Admin can have 2 columns on desktop */
    .admin-panels-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 1024px) {
    
    /* Admin collapses to single column on tablets and mobile */
    .admin-panels-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* === FINAL OVERRIDE RULES === */

/* Ensure body never scrolls */
body {
    overflow: hidden !important;
}

/* Game wrapper should fill screen without scrolling */
.game-wrapper {
    height: 100vh !important;
    overflow: hidden !important;
}

/* Only dialogs and message logs should ever scroll */
.dialog-content,
#portrait-message-log,
#landscape-message-log,
.inventory-list,
.equipment-list,
.shop-list,
.achievements-grid {
    /* These are allowed to scroll */
}

/* Everything else should not scroll */
*:not(.dialog-content):not(#portrait-message-log):not(#landscape-message-log):not(.inventory-list):not(.equipment-list):not(.shop-list):not(.achievements-grid) {
    /* Remove any inadvertent scrolling */
}

/* === SPECIFIC PROBLEM FIXES === */

/* Fix character sheet overflow issues */
#character-sheet-screen .dialog-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#character-sheet-screen .character-sheet-container {
    flex: 1 !important;
    min-height: 0 !important;
}

/* Fix shop screen overflow issues */
#shop-screen .dialog-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#shop-screen .shop-panels-container {
    flex: 1 !important;
    min-height: 0 !important;
}

/* Fix achievements screen overflow issues */
#achievements-screen .dialog-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#achievements-screen .achievements-grid {
    flex: 1 !important;
    min-height: 0 !important;
}