/* Tahap 136K35 — UI Mobile Final Check E-LOK.
   Fokus: dashboard, daftar laporan, detail item, tabel admin, pagination, dan List Pantau nyaman di HP. */
@media (max-width: 767px) {
    html { scroll-padding-top: 5.25rem; }
    body { overscroll-behavior-y: contain; }

    .elok-admin-topbar {
        padding: .62rem .78rem !important;
        border-bottom-color: rgba(125, 211, 252, .14) !important;
    }
    .elok-admin-topbar > div {
        gap: .55rem !important;
    }
    .elok-admin-topbar h1 {
        max-width: 100% !important;
        font-size: 1.08rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }
    .elok-admin-topbar p {
        font-size: .72rem !important;
        line-height: 1.35 !important;
    }
    .elok-admin-topbar .flex.min-w-0.flex-wrap.items-center.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: .12rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .elok-admin-topbar .flex.min-w-0.flex-wrap.items-center.gap-2::-webkit-scrollbar { display: none; }
    .elok-admin-topbar .flex.min-w-0.flex-wrap.items-center.gap-2 > * { flex: 0 0 auto; }
    .elok-sidebar-toggle,
    .elok-admin-topbar summary,
    .elok-admin-topbar button,
    .elok-admin-topbar a { min-height: 2.65rem !important; }

    .elok-dashboard-main {
        padding: .78rem .78rem calc(1.2rem + env(safe-area-inset-bottom)) !important;
    }
    .elok-dashboard-content,
    .elok-dashboard-content > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .elok-breadcrumb {
        margin-bottom: .85rem !important;
        border-radius: 1rem !important;
        padding: .58rem .64rem !important;
    }
    .elok-breadcrumb-list {
        gap: .25rem !important;
        font-size: .68rem !important;
        letter-spacing: 0 !important;
    }
    .elok-breadcrumb-link,
    .elok-breadcrumb-current {
        max-width: 74vw !important;
        padding: .36rem .52rem !important;
    }

    main .grid,
    main [class*="grid-cols-"],
    main [class*="sm:grid-cols-"],
    main [class*="md:grid-cols-"],
    main [class*="lg:grid-cols-"],
    main [class*="xl:grid-cols-"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    main [class*="col-span-"],
    main [class*="sm:col-span-"],
    main [class*="md:col-span-"],
    main [class*="lg:col-span-"],
    main [class*="xl:col-span-"] {
        grid-column: auto / auto !important;
    }
    main .rounded-3xl,
    main .rounded-\[2rem\],
    main section[class*="rounded"],
    main article[class*="rounded"],
    main div[class*="rounded"][class*="border"] {
        border-radius: 1.15rem !important;
    }
    main .p-8,
    main .p-7,
    main .p-6,
    main .lg\:p-8,
    main .xl\:p-8 {
        padding: 1rem !important;
    }
    main .text-4xl { font-size: 1.85rem !important; line-height: 1.05 !important; }
    main .text-3xl { font-size: 1.55rem !important; line-height: 1.08 !important; }
    main .text-2xl { font-size: 1.25rem !important; line-height: 1.15 !important; }

    main .flex.flex-wrap,
    main .flex.sm\:flex-row,
    main .flex.md\:flex-row,
    main .flex.lg\:flex-row {
        align-items: stretch !important;
    }
    main .flex.flex-wrap > a[class*="rounded"],
    main .flex.flex-wrap > button[class*="rounded"],
    main .flex.flex-wrap > form,
    main .flex.flex-wrap > form > button,
    main .\[\&\>form\]\:inline-flex > form,
    main .\[\&\>form\]\:inline-flex > form > button {
        width: 100% !important;
        justify-content: center !important;
    }
    main a[class*="elok-action-"],
    main button[class*="elok-action-"],
    main .elok-btn-primary,
    main .elok-btn-secondary {
        min-height: 2.75rem !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .elok-table-tools {
        margin: .75rem 0 .85rem !important;
        border-radius: 1.15rem !important;
        padding: .78rem !important;
    }
    .elok-table-tools-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .5rem !important;
    }
    .elok-table-tools-title { letter-spacing: .12em !important; }
    .elok-table-tools-count { width: 100% !important; text-align: center !important; }
    .elok-table-tools-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .55rem !important;
    }
    .elok-table-tools input,
    .elok-table-tools select,
    .elok-table-tools button {
        min-height: 2.75rem !important;
        width: 100% !important;
        border-radius: .95rem !important;
        font-size: .88rem !important;
    }

    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]),
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) thead,
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) tbody,
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) tr,
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) thead { display: none !important; }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) tr {
        margin: 0 0 .75rem !important;
        overflow: hidden !important;
        border-radius: 1rem !important;
        border: 1px solid rgba(148, 163, 184, .14) !important;
        background: rgba(15, 23, 42, .54) !important;
        box-shadow: 0 12px 34px rgba(2, 6, 23, .16) !important;
    }
    html[data-theme="light"] main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) tr {
        background: rgba(255,255,255,.92) !important;
        border-color: rgba(15,23,42,.10) !important;
        box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
    }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td {
        position: relative !important;
        min-height: 2.9rem !important;
        padding: 2rem .86rem .72rem !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td:last-child { border-bottom: 0 !important; }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td::before {
        content: attr(data-label);
        position: absolute !important;
        top: .62rem !important;
        left: .86rem !important;
        right: .86rem !important;
        color: #7dd3fc !important;
        font-size: .66rem !important;
        font-weight: 1000 !important;
        line-height: 1.15 !important;
        letter-spacing: .07em !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }
    html[data-theme="light"] main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td::before { color: #0369a1 !important; }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td[data-label="" ]::before { display: none !important; }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td[data-label="" ] { padding-top: .72rem !important; }
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td .flex,
    main table:not(.elok-native-table):not([data-elok-mobile-table="scroll"]) td form {
        justify-content: flex-start !important;
    }

    .elok-pagination-wrap { margin-top: .85rem !important; }
    .elok-pagination-panel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .68rem !important;
        padding: .75rem !important;
        border-radius: 1.15rem !important;
    }
    .elok-pagination-summary,
    .elok-pagination-per-page {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: .72rem !important;
    }
    .elok-pagination-main {
        justify-content: center !important;
        width: 100% !important;
    }
    .elok-pagination-pages { display: none !important; }
    .elok-pagination-mobile-current { display: inline-flex !important; }
    .elok-pagination-arrow,
    .elok-pagination-page,
    .elok-pagination-mobile-current {
        min-width: 2.65rem !important;
        min-height: 2.65rem !important;
        border-radius: .95rem !important;
    }

    .elok-notification-dropdown,
    .elok-admin-topbar details .absolute.right-0 {
        position: fixed !important;
        left: .78rem !important;
        right: .78rem !important;
        top: 4.75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 10rem) !important;
        overflow-y: auto !important;
        border-radius: 1.15rem !important;
    }
}

@media (max-width: 767px) {
    body.elok-landing-body .elok-landing-header { position: sticky !important; top: 0 !important; }
    body.elok-landing-body .elok-landing-navbar {
        padding: .68rem .86rem !important;
        gap: .55rem !important;
    }
    body.elok-landing-body .elok-landing-navbar .elok-brand-mark {
        width: 2.35rem !important;
        height: 2.35rem !important;
        border-radius: .95rem !important;
    }
    body.elok-landing-body .elok-landing-actions {
        gap: .42rem !important;
    }
    body.elok-landing-body [data-landing-mobile-menu] {
        padding: .78rem !important;
        max-height: calc(100dvh - 4.2rem) !important;
        overflow-y: auto !important;
    }
    body.elok-landing-body [data-landing-mobile-menu] nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }
    body.elok-landing-body [data-landing-mobile-menu] .elok-spa-nav-link,
    body.elok-landing-body [data-landing-mobile-menu] .elok-btn-primary {
        min-height: 2.8rem !important;
        border-radius: 1rem !important;
        justify-content: center !important;
        text-align: center !important;
    }
    body.elok-landing-body [data-landing-mobile-menu] .elok-btn-primary { grid-column: 1 / -1; }
    body.elok-landing-body #home { padding-top: 6.2rem !important; }
    body.elok-landing-body #home .mt-9.flex { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
    .elok-landing-mobile-cta {
        grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) !important;
        left: .72rem !important;
        right: .72rem !important;
        bottom: calc(.65rem + env(safe-area-inset-bottom)) !important;
        border-radius: 1.15rem !important;
        padding: .5rem !important;
    }
    .elok-landing-mobile-login,
    .elok-landing-mobile-secondary { min-height: 2.78rem !important; border-radius: .9rem !important; }

    .elok-list-pantau-fixed-header .max-w-7xl,
    .elok-list-pantau-fixed-header .flex {
        align-items: stretch !important;
    }
    .elok-list-pantau-section {
        padding: .9rem .72rem 1.4rem !important;
    }
    .elok-list-shell {
        border-radius: 1.15rem !important;
        padding: .85rem !important;
    }
    .elok-list-columns {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .85rem !important;
    }
    .elok-list-column {
        border-radius: 1.15rem !important;
        padding: .85rem !important;
    }
    .elok-list-column-window {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 1rem !important;
        padding: .55rem !important;
    }
    .elok-list-column-track { animation: none !important; gap: .62rem !important; }
    .elok-list-stepper-row {
        border-radius: 1rem !important;
        padding: .8rem !important;
    }
    .elok-list-stepper-scroll {
        margin-inline: -.15rem !important;
        padding-bottom: .38rem !important;
    }
    .elok-list-stepper-months {
        min-width: 34rem !important;
        grid-template-columns: repeat(12, minmax(2.45rem, 1fr)) !important;
    }
    .elok-list-status-circle {
        width: 2.1rem !important;
        height: 2.1rem !important;
        font-size: .74rem !important;
    }
    .elok-list-month-label { font-size: .58rem !important; }
}

@media (max-width: 380px) {
    .elok-admin-topbar .elok-theme-switch-track { width: 3.1rem !important; }
    .elok-landing-mobile-cta { grid-template-columns: minmax(0, 1fr) !important; }
    .elok-list-stepper-months { min-width: 31.5rem !important; }
}

/* Tahap 136K35A — Fix sidebar dashboard mobile.
   Public CSS ini sengaja tidak menunggu npm build. Sidebar mobile kembali menjadi drawer yang dibuka dari tombol Menu. */
@media (max-width: 767px) {
    .elok-sidebar-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .45rem !important;
        min-width: 5.35rem !important;
        min-height: 2.65rem !important;
        border-radius: 9999px !important;
        background: linear-gradient(135deg, rgba(14, 165, 233, .92), rgba(37, 99, 235, .92)) !important;
        border-color: rgba(125, 211, 252, .35) !important;
        color: #fff !important;
        box-shadow: 0 12px 34px rgba(14, 165, 233, .24) !important;
    }
    .elok-sidebar-toggle [data-sidebar-label] {
        display: inline !important;
        font-size: .78rem !important;
        font-weight: 1000 !important;
    }

    .elok-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 70 !important;
        display: none !important;
        border: 0 !important;
        background: rgba(2, 6, 23, .68) !important;
        -webkit-backdrop-filter: blur(7px) !important;
        backdrop-filter: blur(7px) !important;
        opacity: 0 !important;
        transition: opacity .18s ease !important;
    }

    .elok-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 80 !important;
        width: min(86vw, 20rem) !important;
        max-width: 20rem !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        transform: translateX(-105%) !important;
        translate: none !important;
        padding: .85rem !important;
        border-right: 1px solid rgba(125, 211, 252, .20) !important;
        border-top: 0 !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98)) !important;
        box-shadow: 28px 0 70px rgba(2, 6, 23, .48) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        backdrop-filter: blur(18px) !important;
        transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html[data-theme="light"] .elok-sidebar {
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98)) !important;
        border-right-color: rgba(15, 23, 42, .12) !important;
        box-shadow: 28px 0 55px rgba(15, 23, 42, .16) !important;
    }

    html[data-sidebar-mobile="open"] .elok-sidebar {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
    html[data-sidebar-mobile="open"] .elok-sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
    }

    .elok-sidebar-inner {
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        flex-direction: column !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .elok-sidebar .elok-sidebar-inner > .mb-4,
    .elok-sidebar [data-sidebar-close] {
        display: flex !important;
    }
    .elok-sidebar-brand {
        display: flex !important;
    }
    .elok-sidebar-status {
        display: block !important;
    }

    .elok-sidebar-nav {
        display: block !important;
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 .25rem .5rem 0 !important;
        scrollbar-width: none !important;
        scroll-snap-type: none !important;
    }
    .elok-sidebar-nav::-webkit-scrollbar { display: none !important; }

    .elok-menu-group {
        display: block !important;
        margin-bottom: .5rem !important;
        border-radius: 1.2rem !important;
    }
    .elok-menu-summary {
        display: flex !important;
    }
    .elok-menu-group > div {
        display: block !important;
        margin-top: .35rem !important;
        padding: 0 0 0 .25rem !important;
    }
    .elok-sidebar-nav a {
        width: 100% !important;
        min-height: 2.9rem !important;
        flex: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: .7rem !important;
        border-radius: 1rem !important;
        padding: .62rem .72rem !important;
        font-size: .82rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
        scroll-snap-align: unset !important;
    }
    .elok-sidebar-nav a > span:first-child {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: .8rem !important;
        flex: 0 0 2rem !important;
    }
    .elok-sidebar-nav a > span:nth-child(2) {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .elok-sidebar-nav a .ml-auto {
        position: static !important;
        margin-left: auto !important;
        min-width: 1.35rem !important;
    }

    .elok-dashboard-main {
        padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)) !important;
    }
}

/* Tahap 136K35B — Fix final sidebar mobile drawer.
   Override total rule lama Tahap 100 yang mengubah sidebar menjadi bottom navigation.
   Target: saat HP/tablet (<1280px), sidebar harus drawer kiri penuh menu vertikal. */
@media (max-width: 1279px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body:not(.elok-landing-body) {
        padding-bottom: 0 !important;
    }

    html[data-sidebar-mobile="open"] body {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body:not(.elok-landing-body) .elok-sidebar-overlay,
    html[data-sidebar-mobile="closed"] body:not(.elok-landing-body) .elok-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 80 !important;
        display: none !important;
        width: 100vw !important;
        height: 100dvh !important;
        border: 0 !important;
        opacity: 0 !important;
        background: rgba(2, 6, 23, .70) !important;
        -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
        backdrop-filter: blur(8px) saturate(1.1) !important;
        transition: opacity .18s ease !important;
    }

    html[data-sidebar-mobile="open"] body:not(.elok-landing-body) .elok-sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 90 !important;
        display: flex !important;
        width: min(92vw, 22rem) !important;
        max-width: 22rem !important;
        min-width: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        translate: none !important;
        transform: translate3d(-108%, 0, 0) !important;
        padding: .85rem !important;
        opacity: 1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(125, 211, 252, .22) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, .985), rgba(2, 6, 23, .985)) !important;
        box-shadow: 30px 0 74px rgba(2, 6, 23, .54) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
        backdrop-filter: blur(18px) saturate(1.1) !important;
        transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease !important;
    }

    html[data-theme="light"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.985)) !important;
        border-right-color: rgba(15, 23, 42, .12) !important;
        box-shadow: 30px 0 62px rgba(15, 23, 42, .18) !important;
    }

    html[data-sidebar-mobile="open"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-inner > .mb-4 {
        display: flex !important;
        flex: 0 0 auto !important;
        margin-bottom: .72rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] [data-sidebar-close] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-brand {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: .75rem !important;
        border-radius: 1.25rem !important;
        padding: .72rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-brand img,
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-brand-mark {
        width: 2.45rem !important;
        height: 2.45rem !important;
        flex: 0 0 2.45rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 .2rem .65rem 0 !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav::-webkit-scrollbar {
        display: none !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-group {
        display: block !important;
        width: 100% !important;
        margin: 0 0 .58rem !important;
        border-radius: 1.2rem !important;
        padding: .35rem !important;
        overflow: hidden !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-summary {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        gap: .65rem !important;
        min-height: 2.55rem !important;
        border-radius: 1rem !important;
        padding: .58rem .62rem !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-group > div {
        display: block !important;
        width: 100% !important;
        margin-top: .38rem !important;
        padding: 0 !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a {
        display: flex !important;
        flex: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .68rem !important;
        width: 100% !important;
        min-height: 2.85rem !important;
        margin: 0 0 .25rem !important;
        border-radius: 1rem !important;
        padding: .58rem .68rem !important;
        font-size: .82rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
        scroll-snap-align: unset !important;
        position: relative !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a > span:first-child {
        display: grid !important;
        width: 2rem !important;
        height: 2rem !important;
        flex: 0 0 2rem !important;
        place-items: center !important;
        border-radius: .8rem !important;
        font-size: .92rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a > span:nth-child(2) {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a .ml-auto {
        position: static !important;
        margin-left: auto !important;
        min-width: 1.35rem !important;
        height: auto !important;
        padding: .12rem .42rem !important;
        font-size: .62rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-status {
        display: block !important;
        flex: 0 0 auto !important;
        margin-top: .68rem !important;
        border-radius: 1.15rem !important;
        padding: .85rem !important;
    }

    body:not(.elok-landing-body) .elok-admin-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }
}

@media (max-width: 380px) {
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        width: min(94vw, 21rem) !important;
        padding: .72rem !important;
    }
}


/* Tahap 136K35C — iPhone SE hardening.
   Override paling akhir untuk mematikan sisa bottom navigation lama dan menjaga drawer tetap muat di 375px. */
@media (max-width: 767px) {
    body:not(.elok-landing-body) .elok-grid {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        width: min(82vw, 19.25rem) !important;
        max-width: calc(100vw - 3rem) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        translate: none !important;
        transform: translate3d(-110%, 0, 0) !important;
        padding: .72rem !important;
    }
    html[data-sidebar-mobile="open"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        transform: translate3d(0, 0, 0) !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 .15rem .55rem 0 !important;
        scroll-snap-type: none !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-group {
        display: block !important;
        width: 100% !important;
        margin: 0 0 .5rem !important;
        padding: .3rem !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-summary {
        display: flex !important;
        min-height: 2.35rem !important;
        padding: .48rem .55rem !important;
        font-size: .63rem !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-menu-group > div {
        display: block !important;
        width: 100% !important;
        margin-top: .32rem !important;
        padding: 0 !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a {
        display: flex !important;
        flex: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .58rem !important;
        width: 100% !important;
        min-height: 2.58rem !important;
        margin: 0 0 .22rem !important;
        border-radius: .92rem !important;
        padding: .48rem .58rem !important;
        font-size: .78rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: normal !important;
        scroll-snap-align: unset !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a > span:first-child {
        width: 1.82rem !important;
        height: 1.82rem !important;
        flex: 0 0 1.82rem !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav a > span:nth-child(2) {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        -webkit-line-clamp: initial !important;
    }
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-status {
        padding: .7rem !important;
        border-radius: 1rem !important;
    }
}

@media (max-width: 380px) {
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        width: min(84vw, 18.25rem) !important;
        max-width: calc(100vw - 2.75rem) !important;
        padding: .62rem !important;
    }
}

/* Tahap 136K35D — final fix sidebar iPhone SE.
   Mobile memakai menu vertikal khusus dan tidak mengunci touch scroll. */
.elok-mobile-sidebar-nav { display: none; }

@media (max-width: 767px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body:not(.elok-landing-body) .elok-grid {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 90 !important;
        width: min(86vw, 20rem) !important;
        max-width: calc(100vw - 2rem) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        padding: .72rem !important;
        overflow: hidden !important;
        transform: translate3d(-110%, 0, 0) !important;
        pointer-events: none !important;
    }

    html[data-sidebar-mobile="open"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-inner {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        padding-bottom: calc(.85rem + env(safe-area-inset-bottom)) !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-sidebar-nav {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin-top: .2rem !important;
        overflow: visible !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-group {
        display: block !important;
        width: 100% !important;
        margin: 0 0 .65rem !important;
        border-radius: 1.15rem !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        background: rgba(255,255,255,.035) !important;
        padding: .46rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-title {
        display: block !important;
        margin: .1rem .34rem .38rem !important;
        color: rgb(125 211 252) !important;
        font-size: .63rem !important;
        font-weight: 950 !important;
        letter-spacing: .16em !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .28rem !important;
        width: 100% !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .62rem !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.65rem !important;
        border-radius: .95rem !important;
        padding: .48rem .58rem !important;
        color: rgb(203 213 225) !important;
        font-size: .8rem !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        text-align: left !important;
        text-decoration: none !important;
        background: rgba(255,255,255,.025) !important;
        scroll-snap-align: none !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-link.is-active {
        color: #fff !important;
        background: rgba(14,165,233,.18) !important;
        box-shadow: inset 0 0 0 1px rgba(125,211,252,.25) !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-icon {
        display: grid !important;
        width: 1.85rem !important;
        height: 1.85rem !important;
        flex: 0 0 1.85rem !important;
        place-items: center !important;
        border-radius: .75rem !important;
        background: rgba(255,255,255,.06) !important;
        color: rgb(125 211 252) !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-label {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-badge {
        flex: 0 0 auto !important;
        border-radius: 9999px !important;
        background: #f43f5e !important;
        color: white !important;
        padding: .12rem .45rem !important;
        font-size: .62rem !important;
        font-weight: 950 !important;
    }

    body:not(.elok-landing-body) .elok-dashboard-main {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}

@media (max-width: 380px) {
    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="hidden"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar],
    html[data-sidebar="visible"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] {
        width: min(88vw, 18.75rem) !important;
        max-width: calc(100vw - 2rem) !important;
        padding: .62rem !important;
    }

    body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-mobile-nav-link {
        min-height: 2.5rem !important;
        font-size: .76rem !important;
    }
}

/* Tahap 136K35E — kembalikan scroll mobile seperti biasa.
   Root dashboard sebelumnya h-screen + overflow-hidden, di iPhone SE bisa membuat halaman tidak bisa scroll. */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html[data-sidebar-mobile="open"] body:not(.elok-landing-body),
    body:not(.elok-landing-body) {
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: auto !important;
        overscroll-behavior-y: auto !important;
    }

    body:not(.elok-landing-body) .elok-grid.elok-dashboard-shell,
    body:not(.elok-landing-body) .elok-grid {
        display: flex !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow: visible !important;
    }

    body:not(.elok-landing-body) .elok-dashboard-frame {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow: visible !important;
    }

    body:not(.elok-landing-body) main.elok-dashboard-main,
    body:not(.elok-landing-body) .elok-dashboard-main {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: auto !important;
    }

    html[data-sidebar-mobile="open"] body:not(.elok-landing-body) aside.elok-sidebar[data-sidebar] .elok-sidebar-inner {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}