/* Desktop-Specific Styles (≥ 1024px) */

@media (min-width: 1024px) {

    /* ========== Sidebar Pattern ========== */
    .sidebar {
        position: fixed;
        top: 48px;
        /* Below top bar */
        right: -360px;
        width: 340px;
        max-height: calc(100vh - 48px - 16px);
        background: var(--gradient-panel);
        border: 2px solid rgba(100, 100, 150, 0.5);
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        box-shadow: var(--shadow-lg);
        backdrop-filter: var(--blur-light);
        z-index: 1400;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
        overflow: hidden;
        pointer-events: auto;
        display: none;
    }

    .sidebar--open {
        transform: translateX(-360px);
    }

    .sidebar--left {
        left: -360px;
        right: auto;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .sidebar--left.sidebar--open {
        transform: translateX(360px);
    }

    .sidebar-content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--space-4);
        /* Custom scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .sidebar-content::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .sidebar-content::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Sidebar overlay (backdrop) */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        z-index: 1399;
        opacity: 0;
        pointer-events: none;
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
        display: none;
        cursor: pointer;
    }

    .sidebar-overlay--visible {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(2px);
        pointer-events: auto;
    }

    /* No drag handle on desktop */
    .sidebar__drag-handle,
    .drag-handle {
        display: none;
    }

    /* ========== Multi-Panel Support ========== */
    .multi-panel-layout {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: var(--space-4);
    }

    .multi-panel-layout--with-right {
        grid-template-columns: 340px 1fr 340px;
    }

    /* ========== Hover States (Desktop Only) ========== */
    button:hover,
    .clickable:hover {
        transform: translateY(-1px);
    }

    button:active,
    .clickable:active {
        transform: translateY(0);
    }

    /* ========== Hide mobile-only elements ========== */
    .mobile-only {
        display: none !important;
    }

    /* Hide BottomSheet on desktop - use Sidebar instead */
    .bottom-sheet,
    .bottom-sheet-overlay {
        display: none !important;
    }

    /* Hide list screens on desktop - use EntitiesSidebar instead */
    .bases-list-screen,
    .heroes-list-screen {
        display: none !important;
    }

    /* ========== Dimmed background (less opaque on desktop) ========== */
    .overlay-backdrop--visible {
        background: rgba(0, 0, 0, 0.3);
    }

    /* Clicking dimmed area closes sidebar */
    .overlay-backdrop--desktop {
        cursor: pointer;
    }

    /* ========== Larger panels for desktop ========== */
    @media (min-width: 1920px) {
        .sidebar {
            width: 400px;
            right: -420px;
        }

        .sidebar--open {
            transform: translateX(-420px);
        }

        .sidebar--left {
            left: -420px;
        }

        .sidebar--left.sidebar--open {
            transform: translateX(420px);
        }
    }
}