/* E2 WhatsApp - Responsive breakpoints (desktop-first per CLAUDE.md) */

/* Tablet */
@media (max-width: 1199.98px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* grid-cols-3 sections are always either a 2:1 split (col-span-2 +
       a plain sidebar card) or exactly 3 equal fields - forcing either
       shape into 2 columns strands the last item alone in column 1 with
       an empty gap beside it. Stack to a single column instead so there
       is never an orphaned cell. */
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-3 > .col-span-2,
    .grid-cols-3 > .col-span-3 {
        grid-column: span 1;
    }
}

@media (max-width: 991.98px) {
    .app-shell:not(.sidebar-mobile-open) .sidebar {
        transform: translateX(-100%);
    }

    .app-shell.sidebar-mobile-open .sidebar {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    .main,
    .app-shell.sidebar-collapsed .main {
        margin-left: 0;
    }

    .topbar-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-toggle {
        display: none;
    }

    .grid-cols-2,
    .grid-cols-4,
    .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-span-2,
    .col-span-3 {
        grid-column: span 2;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .content {
        padding: var(--space-4);
    }

    .topbar {
        padding: 0 var(--space-4);
        gap: var(--space-2);
    }

    .topbar-search {
        display: none;
    }

    .topbar-status-pill {
        display: none;
    }

    .topbar-user .name,
    .topbar-user .role {
        display: none;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }

    .col-span-2,
    .col-span-3 {
        grid-column: span 1;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-actions .btn {
        flex: 1;
    }

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