/* Keep internal console pages in desktop layout on narrow screens. */

:root {
    --console-min-width: 1076px;
    --console-shell-height: 100dvh;
    --console-sidebar-width: 160px;
}

body.console-shell {
    width: 100%;
    height: var(--console-shell-height);
    overflow-x: auto;
    overflow-y: hidden;
}

body.console-shell .app-container {
    width: max(100%, var(--console-min-width));
    min-width: var(--console-min-width);
    height: var(--console-shell-height);
    overflow: visible;
}

body.console-shell .sidebar {
    flex: 0 0 var(--console-sidebar-width);
    width: var(--console-sidebar-width);
}

body.console-shell .main-content {
    min-width: calc(var(--console-min-width) - var(--console-sidebar-width));
    overflow-x: visible;
    overflow-y: auto;
}

body.console-shell .content-page {
    min-width: calc(var(--console-min-width) - var(--console-sidebar-width));
}

body.console-shell .tabs,
body.console-shell .tabs-left,
body.console-shell .tabs-right {
    flex-wrap: nowrap;
}

body.console-shell .tab-btn,
body.console-shell .nav-link {
    white-space: nowrap;
}

body.admin-shell {
    overflow-x: auto;
    overflow-y: auto;
}

body.admin-shell .container {
    width: max(100%, var(--console-min-width));
    min-width: var(--console-min-width);
}

body.admin-shell .dashboard-grid {
    grid-template-columns: 220px minmax(1120px, 1fr);
}

@media (max-width: 960px) {
    body.admin-shell .dashboard-grid {
        grid-template-columns: 220px minmax(1120px, 1fr);
    }
}

@media (max-width: 768px) {
    body.console-shell .header-content {
        flex-direction: row !important;
        align-items: center !important;
    }

    body.console-shell .header-nav {
        width: auto !important;
        justify-content: flex-end !important;
    }

    body.console-shell .app-grid {
        grid-template-columns: repeat(auto-fill, minmax(11.75rem, 1fr)) !important;
        gap: var(--spacing-4) !important;
    }

    body.console-shell .app-card {
        min-height: 3.5rem !important;
        padding: var(--spacing-1) !important;
        gap: var(--spacing-4) !important;
    }

    body.console-shell .search-results {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }

    body.console-shell .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    body.console-shell .audio-container {
        padding: 30px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
}

@media (max-width: 600px) {
    body.console-shell .input-container {
        flex-direction: row !important;
    }

    body.console-shell .submit-btn {
        width: auto !important;
    }
}