body.sc-modal-open {
    overflow: hidden;
}
.sc-desktop-only { display: none; }

.sc-desktop-flex { display: none; }

/* ── App shell ── */
.sc-shell {
    min-height: 100vh;
}

.sc-main {
    min-height: 100vh;
}

/* ── Sheet / Modal — default HIDDEN ── */
.sc-sheet {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s,
                visibility 0.3s;
}

.sc-sheet.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.sc-overlay {
    pointer-events: none;
}

.sc-overlay.open {
    pointer-events: auto;
}

/* Hero actions row */
.sc-hero-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.sc-section-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Mobile page header (sub-pages) */
.sc-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
}

.sc-page-header h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.sc-page-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text);
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   MOBILE  (default, max 767px)
   ══════════════════════════════════════ */
@media (max-width: 767px) {
    .sc-desktop-only,
    .sc-desktop-flex { display: none !important; }

    .sc-sidebar { display: none !important; }

    .sc-shell,
    .sc-main {
        display: block;
    }

    .sc-page {
        max-width: 100%;
        margin: 0;
        padding: 0 16px;
    }

    .sc-subpage .sc-page-header {
        padding-top: 8px;
    }

    .sc-profile-layout,
    .sc-kegiatan-layout {
        gap: 12px;
    }

    .sc-panel {
        padding: 16px;
        border-radius: var(--sc-radius-sm);
    }

    .sc-content {
        padding: 0 16px 24px;
    }

    .sc-hero {
        border-radius: 0 0 28px 28px;
        padding: 18px 16px 24px;
    }

    .sc-hero--guest .sc-hero-greeting h1 {
        font-size: 20px;
        line-height: 1.3;
    }

    .sc-hero-greeting p {
        font-size: 13px;
    }

    /* Tombol hero — 1 baris, lebar sama */
    .sc-hero-actions-row {
        display: flex;
        gap: 8px;
        margin-top: 14px;
    }

    .sc-hero-actions-row .sc-btn-primary,
    .sc-hero-actions-row .sc-btn-outline {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Search bar */
    .sc-search-wrap {
        margin: -14px 16px 0;
    }

    /* Stats — 3 kolom 1 baris */
    .sc-stats.sc-mobile-only {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 16px 0 4px;
        padding: 0;
    }

    .sc-stats .sc-stat-card {
        padding: 12px 4px;
        min-width: 0;
    }

    .sc-stats .sc-stat-card .num {
        font-size: 17px;
    }

    .sc-stats .sc-stat-card .lbl {
        font-size: 9px;
        line-height: 1.25;
        word-break: break-word;
    }

    /* CTA banner mobile */
    .sc-cta-banner {
        flex-direction: row;
        padding: 16px;
        gap: 12px;
    }

    .sc-cta-banner .icon-wrap {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .sc-section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sc-section-tools {
        width: 100%;
        justify-content: space-between;
    }

    /* Bottom sheet login — mobile */
    .sc-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: translateY(110%);
        max-width: 100%;
        margin: 0;
        border-radius: 24px 24px 0 0;
    }

    .sc-sheet.open {
        transform: translateY(0);
    }

    .sc-bottom-nav {
        display: flex;
    }

    body.sc-app {
        padding-bottom: calc(var(--sc-nav-height) + var(--sc-safe-bottom));
    }

    .sc-pwa-banner {
        left: 16px;
        right: 16px;
        transform: translateY(120%);
    }

    .sc-pwa-banner.show {
        transform: translateY(0);
    }

    .sc-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════
   DESKTOP  (768px+)
   ══════════════════════════════════════ */
@media (min-width: 768px) {
    .sc-mobile-only { display: none !important; }
    .sc-desktop-only { display: block; }
    .sc-desktop-flex { display: flex; }

    body.sc-app {
        padding-bottom: 0;
    }

    .sc-shell {
        display: flex;
        min-height: 100vh;
    }

    /* Sidebar */
    .sc-sidebar {
        width: 300px;
        min-width: 300px;
        background: var(--sc-surface);
        border-right: 1px solid var(--sc-border);
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 24px 20px;
        box-shadow: 2px 0 16px rgba(0,0,0,0.04);
        z-index: 50;
    }

    .sc-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--sc-border);
    }

    .sc-sidebar-logo {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        object-fit: cover;
        background: var(--sc-primary-light);
        padding: 4px;
    }

    .sc-sidebar-pt {
        font-size: 11px;
        color: var(--sc-text-muted);
        font-weight: 500;
    }

    .sc-sidebar-app {
        font-size: 16px;
        font-weight: 800;
        color: var(--sc-primary-dark);
        line-height: 1.2;
    }

    .sc-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 24px;
    }

    .sc-sidebar-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: var(--sc-radius-xs);
        font-size: 14px;
        font-weight: 600;
        color: var(--sc-text-muted);
        transition: all 0.2s;
    }

    .sc-sidebar-link i {
        width: 20px;
        text-align: center;
        font-size: 16px;
    }

    .sc-sidebar-link:hover {
        background: var(--sc-bg);
        color: var(--sc-primary);
    }

    .sc-sidebar-link.active {
        background: var(--sc-primary-light);
        color: var(--sc-primary-dark);
    }

    .sc-sidebar-login {
        margin-top: auto;
        background: var(--sc-bg);
        border-radius: var(--sc-radius);
        padding: 20px;
        border: 1px solid var(--sc-border);
    }

    .sc-sidebar-login h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 4px;
    }

    .sc-sidebar-login > p {
        font-size: 12px;
        color: var(--sc-text-muted);
        margin: 0 0 16px;
        line-height: 1.4;
    }

    .sc-sidebar-login .sc-alert-info {
        font-size: 11px;
        padding: 10px 12px;
    }

    .sc-sidebar-user {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: var(--sc-primary-light);
        border-radius: var(--sc-radius-sm);
    }

    .sc-sidebar-user img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
    }

    .sc-sidebar-user strong {
        display: block;
        font-size: 13px;
    }

    .sc-sidebar-user span {
        font-size: 11px;
        color: var(--sc-text-muted);
    }

    /* Main content area */
    .sc-main {
        flex: 1;
        min-width: 0;
        background: var(--sc-bg);
    }

    .sc-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px 40px;
    }

    .sc-data-list--2col {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 24px;
    }

    .sc-profile-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .sc-profile-aside {
        width: 280px;
        min-width: 280px;
        position: sticky;
        top: 24px;
    }

    .sc-profile-main {
        flex: 1;
        min-width: 0;
    }

    .sc-kegiatan-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .sc-kegiatan-calendar-wrap {
        width: 320px;
        min-width: 320px;
        position: sticky;
        top: 24px;
    }

    .sc-kegiatan-list-wrap {
        flex: 1;
        min-width: 0;
    }

    .sc-bottom-nav {
        display: none !important;
    }

    /* Hero desktop — wide banner */
    .sc-hero {
        border-radius: var(--sc-radius);
        margin-top: 28px;
        padding: 36px 40px;
    }

    .sc-hero-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        position: relative;
        z-index: 1;
    }

    .sc-hero-greeting {
        flex: 1;
        max-width: 560px;
    }

    .sc-hero-greeting h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .sc-hero-greeting p {
        font-size: 15px;
        line-height: 1.6;
    }

    .sc-hero-stats {
        display: flex;
        gap: 12px;
        flex-shrink: 0;
    }

    .sc-hero-stats .sc-stat-card {
        min-width: 110px;
        padding: 18px 16px;
    }

    .sc-hero-stats .sc-stat-card .num {
        font-size: 26px;
    }

    .sc-search-wrap {
        margin: 24px 0 0;
        max-width: 480px;
    }

    .sc-content {
        padding: 0;
    }

    .sc-section-header {
        margin-bottom: 18px;
    }

    .sc-section-title {
        font-size: 20px;
    }

    .sc-info-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    /* Login modal — hanya mobile; desktop pakai form di sidebar */
    #menu-login,
    #menu-login.sc-sheet {
        display: none !important;
    }

    /* ID Card tetap modal di desktop */
    #menu-card.sc-sheet {
        position: fixed;
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: 440px;
        max-width: calc(100vw - 48px);
        max-height: 85vh;
        border-radius: var(--sc-radius);
        box-shadow: var(--sc-shadow-lg);
        transform: translate(-50%, -50%) scale(0.95);
    }

    #menu-card.sc-sheet.open {
        transform: translate(-50%, -50%) scale(1);
    }

    .sc-pwa-banner {
        left: auto;
        right: 32px;
        bottom: 32px;
        max-width: 360px;
        transform: translateY(120%);
    }

    .sc-pwa-banner.show {
        transform: translateY(0);
    }

    #scUpdateToast {
        bottom: 32px;
    }
}

/* Large desktop — wider service grid */
@media (min-width: 1024px) {
    .sc-service-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px 12px;
    }

    .sc-dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px 12px;
    }

    .sc-sidebar {
        width: 320px;
        min-width: 320px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sc-service-grid,
    .sc-dashboard-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}