/* ============================================================
   ContentSERP V2 — RESPONSIVE FOUNDATION
   Breakpoints: 390 / 430 / 768 / 1024 / 1280 / 1440
   ============================================================ */

/* ── ≤1024px: sidebar collapses to icon rail, grids shrink ── */
@media (max-width: 1024px) {
    :root { --cs-sidebar-width: var(--cs-sidebar-collapsed-width); }
    .cs-sidebar__nav a { justify-content: center; padding: var(--cs-space-3); }
    .cs-sidebar__nav .cs-nav-text,
    .cs-sidebar__plan,
    .cs-sidebar__user span,
    .cs-sidebar__footer .cs-btn span { display: none; }
    .cs-sidebar__brand .cs-sidebar__text { display: none; }
    .cs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≤768px: sidebar becomes an off-canvas drawer ─────── */
@media (max-width: 768px) {
    .cs-root { grid-template-columns: 1fr; }
    .cs-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1500;
        width: var(--cs-sidebar-width);
        transform: translateX(-100%);
        transition: transform 0.18s ease;
    }
    .cs-root.cs-drawer-open .cs-sidebar { transform: translateX(0); box-shadow: var(--cs-shadow-lg); }
    .cs-sidebar__nav a { justify-content: flex-start; padding: var(--cs-space-2) var(--cs-space-3); }
    .cs-sidebar__nav .cs-nav-text,
    .cs-sidebar__plan,
    .cs-sidebar__user span,
    .cs-sidebar__footer .cs-btn span { display: inline; }
    .cs-sidebar__brand .cs-sidebar__text { display: inline; }
    .cs-workspace { padding: var(--cs-space-4); }
    .cs-grid--2, .cs-grid--3, .cs-grid--4 { grid-template-columns: 1fr; }
    .cs-topbar { padding: 0 var(--cs-space-4); }
    .cs-topbar__user { display: none; }
    /* tables collapse to cards via component markup; wrapper scrolls only if needed */
    .cs-table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ── ≤430px: tighter spacing, stack actions ──────────── */
@media (max-width: 430px) {
    .cs-page-header__actions { width: 100%; }
    .cs-page-header__actions .cs-btn { flex: 1 1 auto; }
    .cs-workspace { padding: var(--cs-space-3); }
    .cs-card__body { padding: var(--cs-space-3); }
}

/* ── ≥1280px: give the workspace breathing room ───────── */
@media (min-width: 1280px) {
    .cs-workspace__inner { max-width: var(--cs-content-max-width); }
}