/* Desktop layout - all rules gated behind 1280px+ */

/* Hide desktop nav on mobile */
.desktop-top-nav { display: none; }

/* Notification side panel - hidden by default (mobile) */
.notification-panel-container { display: none; }

/* Task side panel - hidden by default (mobile) */
.task-panel-container { display: none; }

/* Hide mobile bars on desktop */
@media (min-width: 1280px) {
    .desktop-top-nav { display: block; }
    .mobile-top-bar { display: none; }
    .mobile-bottom-bar { display: none !important; }

    /* Desktop top nav styling */
    .desktop-top-nav .mud-appbar {
        padding: 0 24px;
    }

    .desktop-top-nav .nav-active {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
        border-radius: 8px;
    }

    /* Remove bottom padding since no bottom bar */
    .main-content-area {
        padding-bottom: 16px !important;
    }

    /* Wider content area for desktop */
    .mud-main-content {
        padding-top: 64px !important;
        padding-bottom: 0 !important;
    }

    /* Constrain discussion pane on desktop */
    .chat-page {
        max-width: 800px;
        margin: 0 auto;
    }

    .chat-header,
    .compose-bar {
        max-width: 800px;
    }

    .chat-header {
        top: 64px; /* Below desktop nav */
    }

    .compose-bar {
        bottom: 0;
    }

    .chat-container {
        height: calc(100vh - 64px); /* Account for desktop nav */
        padding-top: 72px; /* Space for chat header below desktop nav */
    }

    /* Constrain and center product filter buttons on desktop */
    .product-filter-bar {
        max-width: 300px;
        margin: 0 auto;
    }

    /* Constrain product detail page on desktop */
    .product-detail-container {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
    }

    .product-detail-footer {
        max-width: 600px;
        margin: 0 auto;
        bottom: 0;
    }

    /* Constrain product edit page on desktop */
    .product-edit-container {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Constrain product tasks page on desktop */
    .tasks-page {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Generic page container for form/content pages */
    .page-container {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Panel-aware grid reflow -- panel adds .layout-with-panel to a wrapper */
    .layout-with-panel .main-content-area {
        margin-right: 320px;
        transition: margin-right 0.3s ease;
    }

    .layout-with-panel .main-content-area .product-grid {
        max-width: 100%;
    }

    /* Notification side panel */
    .notification-panel-container {
        display: block;
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        width: 320px;
        z-index: 1000;
        background: var(--mud-palette-surface);
        border-left: 1px solid var(--mud-palette-lines-default);
        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
        animation: slideInRight 0.25s ease-out;
    }

    /* Task side panel -- mirrors notification panel exactly */
    .task-panel-container {
        display: block;
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        width: 320px;
        z-index: 1000;
        background: var(--mud-palette-surface);
        border-left: 1px solid var(--mud-palette-lines-default);
        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
        animation: slideInRight 0.25s ease-out;
    }

    /* Content reflow when task panel is open */
    .layout-with-task-panel .main-content-area {
        margin-right: 320px;
        transition: margin-right 0.3s ease;
    }

    .layout-with-task-panel .main-content-area .product-grid {
        max-width: 100%;
    }

    .notification-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .notification-panel-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        flex-shrink: 0;
    }

    .notification-panel-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    @keyframes slideInRight {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
}

@media (min-width: 1920px) {
    .layout-with-panel .main-content-area {
        margin-right: 400px;
    }

    /* At 1920px+ there's enough room for full grid + panel */
    .layout-with-panel .main-content-area .product-grid {
        max-width: 1600px;
    }

    .notification-panel-container {
        width: 400px;
    }

    .task-panel-container {
        width: 400px;
    }

    .layout-with-task-panel .main-content-area {
        margin-right: 400px;
    }

    .layout-with-task-panel .main-content-area .product-grid {
        max-width: 1600px;
    }
}