/* ==========================================================================
   RESPONSIVE — Mobile-first breakpoints
   ========================================================================== */

/* ── Tablet (< 1024px): sidebar collapsible ─────────────────────────────── */
@media (max-width: 1023px) {
    /* Hamburger hidden by default — pake bottom nav aja */
    .oct-hamburger { display: none; }
    /* Admin: tampilkan hamburger untuk akses menu admin */
    .oct-body--admin .oct-hamburger { display: flex; }

    /* Mobile nav visible */
    .oct-mobile-nav { display: flex; }

    /* Sidebar: off-canvas — full height, di atas header */
    .oct-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1001;
        width: var(--oct-sidebar-w);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .oct-sidebar.is-open { transform: translateX(0); }
    .oct-sidebar-overlay.is-open { display: block; }
    .oct-sidebar-overlay { z-index: 1000; }

    /* Layout: hilangkan padding-left karena sidebar off-canvas */
    .oct-layout { padding-left: 0; }

    /* Footer: hilangkan margin-left karena sidebar off-canvas */
    .oct-footer { margin-left: 0; }

    /* Main content: full width */
    .oct-main { padding: 20px 16px calc(var(--oct-mobile-nav-h) + 20px); }

    /* Desktop user menu: hide name */
    .oct-user-menu__name { display: none; }

    /* Detail grid: single column */
    .oct-detail-grid { grid-template-columns: 1fr; }

    /* Profile grid: single column */
    .oct-profile-grid { grid-template-columns: 1fr; }
}

/* ── Mobile (< 640px) ───────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Form grid: single column */
    .oct-form-grid--2 { grid-template-columns: 1fr; }

    /* Cards grid: single column */
    .oct-cards-grid { grid-template-columns: 1fr; }

    /* Stats: 2 columns */
    .oct-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Page header: stack */
    .oct-page-header { flex-direction: column; align-items: flex-start; }
    .oct-page-title  { font-size: 18px; }

    /* Auth card: reduce padding */
    .oct-auth-card { padding: 24px 20px; }

    /* Quick actions: 2 columns */
    .oct-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
    .oct-quick-action-btn { min-width: unset; }

    /* SC list: single column */
    .oct-sc-list { grid-template-columns: 1fr; }

    /* Radio cards: stack */
    .oct-service-type-radios { flex-direction: column; }
}

/* ── Wide (>= 1440px) ───────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    .oct-header__inner { max-width: 100%; }
    .oct-main { padding: 32px 48px calc(var(--oct-mobile-nav-h) + 20px); }
}