/* ===== Responsive Dashboard - All Pages ===== */

/* ─── Global containment (all screens) ─── */
.main-content {
    overflow-x: hidden !important;
}

.preview-panel {
    overflow: hidden !important;
    min-width: 0 !important;
}

.preview-body {
    overflow: hidden !important;
}

.phone-frame,
.phone-preview-frame {
    max-width: 100% !important;
}

/* ─── MEDIUM PC (max-width: 1200px) ─── */
@media (max-width: 1200px) {
    .page-content {
        padding: 20px !important;
    }
}

/* ─── TABLET (max-width: 900px) ─── */
@media (max-width: 900px) {
    .dashboard-layout {
        display: block !important;
        grid-template-columns: none !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .topbar {
        padding: 12px 16px !important;
    }

    .topbar-left h1 {
        font-size: 1rem !important;
    }

    .hamburger-btn {
        display: flex !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.show {
        display: block !important;
    }

    .page-content {
        grid-template-columns: 1fr !important;
    }

    .topbar-right {
        gap: 6px !important;
        flex-wrap: wrap;
    }

    .topbar-btn {
        padding: 6px 10px !important;
        font-size: .75rem !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .phone-frame,
    .phone-preview-frame {
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .preview-body {
        padding: 16px 0 !important;
    }
}

/* ─── MOBILE (max-width: 600px) ─── */
@media (max-width: 600px) {
    .topbar {
        padding: 10px 12px !important;
    }

    .topbar-left h1 {
        font-size: .9rem !important;
    }

    .topbar-breadcrumb {
        font-size: .7rem !important;
    }

    .topbar-right {
        gap: 4px !important;
    }

    .topbar-btn {
        padding: 5px 8px !important;
        font-size: .7rem !important;
    }

    .card {
        border-radius: 12px !important;
    }

    .card-header {
        padding: 14px 16px !important;
    }

    .card-header h3 {
        font-size: .85rem !important;
    }

    .card-body {
        padding: 14px !important;
    }

    .page-content {
        padding: 12px !important;
        gap: 16px !important;
    }

    .phone-frame,
    .phone-preview-frame {
        width: 280px !important;
        max-width: 100% !important;
    }

    .sidebar {
        width: 240px !important;
    }

    .sidebar-nav li a {
        padding: 10px 14px !important;
        font-size: .8rem !important;
    }

    .download-card {
        padding: 20px !important;
    }

    .download-center {
        padding: 20px 12px !important;
    }
}

/* ─── SMALL MOBILE (max-width: 400px) ─── */
@media (max-width: 400px) {
    .topbar {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .phone-frame,
    .phone-preview-frame {
        width: 260px !important;
    }
}