/* ========================================================================
   Sullaser Hub — Responsive Breakpoints (responsive.css)
   ========================================================================
   ≤ 1200px  →  Tablet / compact desktop (sidebar collapses)
   ≤  768px  →  Mobile (sidebar off-canvas, stacked grids)
   ≤  480px  →  Small mobile (single-column everything)
   ======================================================================== */

/* ==========================================================================
   ≤ 1200px — Tablet / Compact Desktop
   ========================================================================== */
@media (max-width: 1200px) {

    /* ── Grid adjustments ─────────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* ── Sidebar collapses to icon-only ───────────────────────────────── */
    .sidebar {
        width: 72px;
    }

    .sidebar-nav-text,
    .sidebar-brand,
    .sidebar-nav-section-title,
    .sidebar-user-info,
    .coming-soon {
        display: none;
    }

    .sidebar-header {
        justify-content: center;
        padding: 20px 12px;
    }

    .sidebar-nav-item {
        justify-content: center;
        padding: 12px;
    }

    .sidebar-nav-item.active::before {
        display: none;
    }

    .sidebar-footer {
        justify-content: center;
        padding: 16px 12px;
    }

    /* ── Main wrapper follows collapsed sidebar ───────────────────────── */
    .main-wrapper {
        margin-left: 72px;
    }

    /* ── Header tweaks ────────────────────────────────────────────────── */
    .header-user-info {
        display: none;
    }

    .header-search {
        width: 180px;
    }
}

/* ==========================================================================
   ≤ 768px — Mobile
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Sidebar becomes off-canvas drawer ─────────────────────────────── */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        z-index: 1000;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Restore sidebar inner elements when drawer is open */
    .sidebar.active .sidebar-nav-text,
    .sidebar.active .sidebar-brand,
    .sidebar.active .sidebar-nav-section-title,
    .sidebar.active .sidebar-user-info,
    .sidebar.active .coming-soon {
        display: block;
    }

    .sidebar.active .sidebar-user-info {
        display: block;
    }

    .sidebar.active .sidebar-header {
        justify-content: flex-start;
        padding: 20px;
    }

    .sidebar.active .sidebar-nav-item {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .sidebar.active .sidebar-footer {
        justify-content: flex-start;
        padding: 16px 20px;
    }

    /* ── Sidebar overlay backdrop ──────────────────────────────────────── */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* ── Main wrapper takes full width ─────────────────────────────────── */
    .main-wrapper {
        margin-left: 0;
    }

    /* ── Show hamburger menu ───────────────────────────────────────────── */
    .menu-toggle {
        display: flex;
    }

    /* ── Page content adjustments ──────────────────────────────────────── */
    .page-content {
        padding: 20px;
    }

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

    /* ── Grid collapses ────────────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

    /* ── Header ────────────────────────────────────────────────────────── */
    .header-search {
        display: none;
    }

    /* ── Tables go edge-to-edge ────────────────────────────────────────── */
    .table-container {
        margin: 0 -20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* ── Forms single column ───────────────────────────────────────────── */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* ── Charts stack vertically ───────────────────────────────────────── */
    .chart-row {
        flex-direction: column;
    }

    /* ── Notification panel adapts to screen ────────────────────────────── */
    .notification-panel {
        width: calc(100vw - 40px);
        right: -60px;
    }
}

/* ==========================================================================
   ≤ 480px — Small Mobile
   ========================================================================== */
@media (max-width: 480px) {

    /* ── Stats go single column ────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 16px;
    }

    /* ── Typography scales down ────────────────────────────────────────── */
    .page-title {
        font-size: 22px;
    }

    /* ── Buttons scale down ────────────────────────────────────────────── */
    .btn-lg {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* ── Header user avatar smaller ────────────────────────────────────── */
    .header-user-avatar {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* ── Hide breadcrumb on tiny screens ────────────────────────────────── */
    .breadcrumb {
        display: none;
    }

    /* ── Pagination adapts ─────────────────────────────────────────────── */
    .pagination-item {
        padding: 6px 10px;
        font-size: 13px;
    }
}