/* Responsive layout — drawer, stacking, overflow control */

@media (max-width: 1024px) {
    .crm-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--topbar-height) minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }

    .crm-shell__menu-toggle {
        display: inline-flex;
    }

    .crm-shell__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(var(--sidebar-width), calc(100vw - 3rem));
        z-index: var(--z-drawer);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-lg);
    }

    .crm-shell.is-drawer-open .crm-shell__sidebar {
        transform: translateX(0);
    }

    .crm-shell__search {
        max-width: none;
    }

    .crm-shell__user-name,
    .crm-shell__user-meta {
        max-width: 10rem;
    }
}

@media (max-width: 768px) {
    .auth-shell {
        grid-template-columns: 1fr;
        align-content: center;
    }

    .auth-shell__brand-panel {
        min-height: 11rem;
        padding: var(--space-6);
    }

    .auth-shell__panel {
        width: 100%;
    }

    .crm-shell__main {
        padding: var(--space-4);
    }

    .crm-shell__topbar {
        gap: var(--space-2);
        padding: 0 var(--space-3);
    }

    .crm-shell__user {
        display: none;
    }

    .card__meta-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .dashboard-profile {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .dashboard-profile .card__meta {
        grid-template-columns: 1fr;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form .form-field {
        width: 100%;
        min-width: 0;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .data-table th,
    .data-table td,
    .table-wrap > table th,
    .table-wrap > table td {
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 390px) {
    html,
    body {
        overflow-x: hidden;
    }

    .auth-shell {
        padding: var(--space-4);
    }

    .auth-shell__brand-panel {
        min-height: 10rem;
        padding: var(--space-6);
    }

    .auth-shell__brand {
        font-size: 2rem;
    }

    .auth-shell__panel {
        padding: var(--space-6);
    }

    .crm-shell__main {
        padding: var(--space-3);
    }

    .crm-shell {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .crm-shell__topbar {
        flex-wrap: wrap;
        padding-block: var(--space-3);
    }

    .crm-shell__search {
        order: 3;
        flex-basis: 100%;
    }

    .crm-shell__page-title {
        font-size: var(--font-size-xl);
    }

    .crm-shell__settings-nav-list {
        flex-direction: column;
    }

    .crm-shell__settings-nav-link {
        width: 100%;
    }

    .form-actions,
    .crm-shell__actions,
    .crm-shell__footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .crm-shell__topbar .btn,
    .dashboard-profile .btn {
        width: auto;
    }

    .data-table,
    .table-wrap > table {
        font-size: var(--font-size-xs);
    }
}