/* /public/assets/css/dashboard-header-mobile.css */

@media (max-width: 820px) {
    .workspace > .page-header {
        display: none;
    }

    .sidebar:not(.sidebar-right) > .page-header {
        position: static;
        z-index: auto;
        display: flex;
        width: auto;
        min-width: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        margin: 0 0 20px;
        padding: 0 0 20px;
        border-bottom: 1px solid var(--line);
        background: transparent;
    }

    .sidebar:not(.sidebar-right) > .page-header h1 {
        margin: 0 0 8px;
        font-size: 24px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .sidebar:not(.sidebar-right) > .page-header .subtitle {
        overflow-wrap: anywhere;
    }

    .sidebar:not(.sidebar-right) > .page-header .header-actions {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .sidebar:not(.sidebar-right) > .page-header .header-actions > form,
    .sidebar:not(.sidebar-right) > .page-header .header-actions > a,
    .sidebar:not(.sidebar-right) > .page-header .header-actions > button,
    .sidebar:not(.sidebar-right) > .page-header .header-actions > div {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .sidebar:not(.sidebar-right) > .page-header .theme-toggle,
    .sidebar:not(.sidebar-right) > .page-header form .theme-toggle {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .sidebar:not(.sidebar-right) > .page-header .ai-model-switch {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .sidebar:not(.sidebar-right) > .page-header .ai-model-switch label,
    .sidebar:not(.sidebar-right) > .page-header .ai-model-switch select,
    .sidebar:not(.sidebar-right) > .page-header .ai-model-switch .button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-header-anchor {
        display: none;
    }
}