/* =============================================================================
   LAYOUT-DESKTOP.CSS — Desktop overrides (min-width: 768px / 1024px / 1440px+)
   =============================================================================
   Mobile-first: base.css and components.css define mobile layout.
   This file adds ONLY desktop-specific overrides.

   Breakpoints used:
   - @media (min-width: 768px)  → tablets / small desktop
   - @media (min-width: 1024px) → full desktop
   - @media (min-width: 1440px) → large screens
   - @media (min-width: 1920px) → FHD / ultrawide
   - @media (min-width: 2560px) → QHD / 4K
   ============================================================================= */

@layer layout {

/* =============================================================================
   CABINET LAYOUT — Desktop: sidebar visible, no bottom nav
   ============================================================================= */

@media (min-width: 768px) {
    /* Sidebar: always visible on desktop */
    #cabinetSidebar {
        transform: translateX(0) !important;
        position: relative;
        padding-top: 0;
    }

    /* Overlay: never shown on desktop */
    #cabinetSidebarOverlay {
        display: none !important;
    }

    /* Bottom nav: hidden on desktop */
    #cabinetBottomNav {
        display: none;
    }

    /* Cabinet burger: hidden on desktop */
    #cabinetBurger {
        display: none !important;
    }

    /* Content area: no bottom padding for nav */
    .cabinet-content-area {
        padding-bottom: 2rem;
    }
}

/* ds-container, ds-cta-row, ds-scroll-x → now in components.css (@layer components) */

/* =============================================================================
   WIDE SCREENS — cabinet content fills available space
   No max-width constraint: sidebar provides left anchor, content flows naturally.
   Readability limit only on ultra-wide (2560px+) to prevent extreme line lengths.
   ============================================================================= */

@media (min-width: 2560px) {
    .cabinet-content-area {
        max-width: 1800px;
    }
}

} /* end @layer layout */