/* ============================================
   LAYOUT
   Main app structure, containers, and panels
   ============================================ */

/* App Container */
.app-container {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* Main Two-Column Layout */
.main-layout {
    display: grid;
    grid-template-columns: auto 12px 1fr;
    gap: 20px;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
}

.main-layout.resizing {
    cursor: col-resize;
    user-select: none;
    transition: none;
}

/* Left Panel: the side pane (Search by default; any dockable panel can be
   docked here, docs/layout/side-pane-plan.md). It carries the width; its
   content fills it. */
.side-pane {
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.side-pane.collapsed {
    width: 0 !important;
    overflow: hidden;
    padding: 0;
}

.search-panel {
    min-width: 0;
    overflow: hidden;
    /* No width transition, deliberately. Animating this panel's width relayouts the
       entire workspace (deck lists, grids, stacks) every frame for the duration:
       open/close became a 200ms stutter and dragging the resizer fought the
       transition the whole way. Instant is one reflow and feels immediate. */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.search-panel.collapsed {
    width: 0 !important;
    overflow: hidden;
    padding: 0;
}

.search-panel.collapsed * {
    visibility: hidden;
}

/* Panel Divider: the drag handle between the panes. The rail's tabs open and
   close the side pane, so it carries no button. */
.panel-divider {
    width: 8px;
    background: transparent;
    border-right: 1px solid var(--divider-border);
    cursor: col-resize;
    position: relative;
    height: 100%;
    transition: background 0.2s ease;
}

.panel-divider:hover {
    border-right-color: var(--accent-color);
    background: transparent;
}

.panel-divider:active {
    border-right-color: var(--accent-color);
    box-shadow: 1px 0 8px var(--accent-glow);
    background: transparent;
}

/* Side pane collapsed: its column and the divider go to zero, but the divider
   keeps its box. Removing it from the grid would auto-place the content into
   the divider's column and shrink it to its minimum. */
.main-layout:has(.side-pane.collapsed) {
    grid-template-columns: 0 0 1fr;
    gap: 0;
}

.panel-divider.search-collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    pointer-events: none;
}

/* Right Panel */
.right-panel {
    min-width: 320px;
    height: 100%;
    overflow: hidden;
    position: relative; /* Anchor for full-column overlays like Goldfish */
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Panel Content */
.panel-content {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding: 0 16px 16px 16px;
    flex: 1;
}

.panel-content>* {
    min-width: 0;
    min-height: 0;
}

/* Common panel styles */
.deck-panel,
.stats-panel,
.genome-panel,
.library-panel,
.evolution-panel,
.home-panel {
    /* Removed position: relative here to allow overlays to reach .right-panel */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    /* Enable single main scrollbar */
    overflow-x: hidden;
    border: none !important;
    box-sizing: border-box !important;
    /* Ensure padding doesn't break height */
}

/* Main content container (wraps list or empty message) */
.deck-list-container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    /* Positioning context for the absolute-positioned DeckLoadingOverlay, which masks the
       sort / image-load flicker on initial render. */
    position: relative;
}

/* On a phone the page is the only thing that scrolls, so the panels release
   their own scrollbox. `overflow-x` has to go to `clip` in the same breath:
   a `visible` axis paired with a `hidden` one computes to `auto`, which would
   leave the panel a scroll container that never scrolls — and a sticky
   command bar inside one of those can never move. */
@media (max-width: 768px) {
    .deck-panel,
    .library-panel,
    .collection-panel,
    .pod-panel,
    .evolution-panel,
    .stats-panel,
    .genome-panel,
    .home-panel {
        height: auto !important;
        min-height: 100%;
        /* Both axes visible, so the panel is neither a scroll container nor a
           clipping box. `clip` on the x axis looked harmless but cut the
           command bar's full-bleed edges off at the panel's padding, which is
           why the fade stopped short of the screen on every panel except the
           Builder, whose container has no overflow of its own. Sideways
           overflow is stopped at `html`, which is the right place for it. */
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

/* Stats Panel Override */
.stats-panel {
    overflow-y: auto !important;
    padding-right: 6px;
    box-sizing: border-box;
}

/* ============================================
   MEDIA QUERIES
   ============================================ */

/* Mobile Layout Override */
@media (max-width: 768px) {
    /* The page scrolls on `html`, and only on `html`.

       Two rules here are load-bearing for every sticky element on a phone. A
       scroll container that never scrolls is one that `position: sticky`
       inside it can never move against, so `body` must not be one: its
       `overflow-y` stays `visible`, and sideways overflow is stopped with
       `clip` rather than `hidden`, because `hidden` would make it a scroll
       container too. Together these are why the panels' command bars can pin
       to the top of the content as the page scrolls. */
    html {
        overflow-y: auto !important;
        overflow-x: clip !important;
        height: auto !important;
        min-height: 100vh !important;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-y: visible !important;
        overflow-x: clip !important;
        height: auto !important;
        min-height: 100vh !important;
        margin: 0;
        padding: 0;
    }

    .app-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 10px !important;
        width: 100%;
    }

    .main-layout {
        display: block !important;
        /* Single column, no grid/flex split */
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: relative;
        width: 100%;
        /* Anchor for absolute positioned search overlay */
    }

    /* Hide the panel divider on mobile - replaced by FAB */
    .panel-divider {
        display: none !important;
    }

    /* Phones have no side pane: its children (the Search overlay) lay out as
       direct children of the main layout, exactly as before. */
    .side-pane {
        display: contents;
    }

    /* Search Panel: Hidden by default, becomes slide-over overlay */
    .search-panel {
        display: none;
        /* Hidden by default on mobile */
    }

    /* When explicitly shown via mobile overlay, use mobile_fab.css styles */
    .search-panel.mobile-overlay {
        display: flex;
    }

    /* Right Panel: Grow with content */
    .right-panel {
        width: 100%;
        max-width: 100vw;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        border-radius: 12px 12px 0 0;
        padding-bottom: var(--mobile-bottom-bars); /* space for the fixed bottom nav + sub-tab bars */
        border-left: none;
        border-top: none;
        /* Disable all blurs on mobile - causes rendering artifacts */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--widget-bg) !important;
    }

    .mobile-search-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }

    .panel-content {
        flex: 1;
        min-height: 0;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        height: auto !important;
        padding: 0 !important;
    }

    /* Internal panels handle their own scrolling - Handled at top of file now */
    .library-content {
        flex: 1;
        min-height: 0;
        box-sizing: border-box !important;
    }

}

/* Ultrawide Layout Override */
@media (min-width: 1921px) {
    .main-layout {
        max-width: none;
        margin: 0;
        border: none;
        box-shadow: none;
        /* Ensure gap handles sidebar correctly */
        gap: 24px;
        padding-right: 24px;
    }
}

/* App Footer */
.app-footer {
    padding: 8px 12px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

.app-footer p {
    margin: 0;
    line-height: 1.4;
}

.app-footer:hover {
    opacity: 1;
}