/* ============================================================
   RESPONSIVE — APP (not login — see login.css for login MQs)
   ============================================================ */

/* ── 1024px ─────────────────────────────────────────── */

@media (max-width: 1024px) {
    .main-content { padding: 24px; }
}

/* ── 768px ──────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Sidebar becomes an overlay drawer */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        box-shadow: var(--shadow-xl);
    }

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

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

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

    .mobile-menu-btn { display: flex; }

    /* Main content fills full width */
    .main-content {
        margin-left: 0;
        padding: 20px;
        padding-top: 64px; /* room for fixed mobile top bar */
    }

    /* Dashboard */
    .dashboard-header h1 { font-size: 22px; }
    .dashboard-grid { gap: 20px; }
    .dashboard-container { padding: 20px; }
    .pinned-dashboard-grid { grid-template-columns: 1fr; }
    .pinned-card-graph,
    .pinned-card-empty { min-height: 280px; }
    .pinned-card-graph iframe { min-height: 280px; height: 280px; }
    .dashboard-modal { max-width: calc(100vw - 20px); }
    .dashboard-run-item { flex-direction: column; }

    /* History items */
    .history-item { padding: 10px 12px; }

    /* Admin tabs scroll horizontally */
    .admin-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form rows collapse */
    .form-row { grid-template-columns: 1fr; }

    /* Admin list items */
    .admin-list-item { flex-direction: column; align-items: flex-start; }
    .admin-list-item-actions { width: 100%; justify-content: flex-end; }
}

/* ── 480px ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .main-content { padding: 14px; padding-top: 60px; }

    .section-header h2 { font-size: 18px; }

    .dashboard-header h1 { font-size: 18px; }
    .dashboard-header p  { font-size: 13px; }

    .dashboard-container { padding: 14px; }
    .pinned-card-actions .btn-secondary,
    .pinned-card-actions .btn-primary { width: 100%; }

    .query-input-container { padding: 14px; }

    .admin-card { padding: 16px; }

    .wizard-steps { gap: 0; }
    .wizard-step-label { display: none; }

    .form-actions { flex-direction: column; }
    .form-actions .btn-primary,
    .form-actions .btn-secondary { width: 100%; text-align: center; justify-content: center; }

    .admin-tabs { gap: 2px; padding: 4px; }
    .admin-tab  { padding: 8px 12px; font-size: 12px; }
}