/* Tahap 136H1 — Fix mika overlay + Performance UI Lightweight E-LOK.
   Tujuan: kurangi repaint berat dari blur, shadow, glow, dan animasi global tanpa mengubah alur aplikasi. */

:root {
    --elok-motion-fast: .12s;
    --elok-motion-normal: .16s;
}

html[data-theme="dark"] {
    --elok-bg:
        radial-gradient(circle at 8% 0%, rgba(var(--elok-accent-rgb), .16), transparent 22rem),
        linear-gradient(135deg, #020617 0%, rgba(var(--elok-accent-end-rgb), .18) 55%, #020617 100%) !important;
    --elok-shadow: 0 16px 42px rgba(2, 6, 23, .34) !important;
    --elok-shadow-soft: 0 8px 24px rgba(2, 6, 23, .22) !important;
    --elok-focus: 0 0 0 3px rgba(var(--elok-accent-rgb), .16) !important;
}

html[data-theme="light"] {
    --elok-bg:
        radial-gradient(circle at 8% 0%, rgba(var(--elok-accent-rgb), .10), transparent 20rem),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    --elok-shadow: 0 14px 34px rgba(15, 23, 42, .095) !important;
    --elok-shadow-soft: 0 7px 20px rgba(15, 23, 42, .07) !important;
    --elok-focus: 0 0 0 3px rgba(var(--elok-accent-rgb), .12) !important;
}

html[data-theme] body,
html[data-theme] body.elok-theme-page,
html[data-theme] body.elok-login-body,
html[data-theme] body.elok-landing-body,
html[data-theme] .elok-theme-page,
html[data-theme] .elok-landing-main,
html[data-theme] .elok-error-page,
html[data-theme] .elok-error-shell {
    background: var(--elok-bg) !important;
}

/* Grid/ornamen dibuat ringan supaya scroll dashboard dan table tidak repaint besar. */
html[data-theme] body::before,
html[data-theme] .elok-theme-page::before,
html[data-theme] .elok-login-body::before,
html[data-theme] .elok-landing-body::before,
html[data-theme] .elok-grid,
html[data-theme] .elok-page-grid {
    opacity: .26 !important;
    background-size: 48px 48px !important;
}

html[data-theme] .elok-landing-main::after,
html[data-theme] .elok-dashboard-main::after {
    opacity: .22 !important;
    background:
        radial-gradient(circle at 10% 8%, rgba(var(--elok-accent-rgb), .10), transparent 18rem),
        radial-gradient(circle at 88% 16%, rgba(var(--elok-accent-end-rgb), .08), transparent 20rem) !important;
}

html[data-theme] .elok-dashboard-glow,
html[data-theme] .elok-glow,
html[data-theme] .elok-geo-1,
html[data-theme] .elok-geo-2,
html[data-theme] .elok-geo-3,
html[data-theme] .elok-geo-4,
html[data-theme] .elok-confirm-glow {
    opacity: .18 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Blur dan shadow global dikurangi. Ini yang paling terasa di laptop/Chrome saat scroll. */
html[data-theme] header,
html[data-theme] .elok-list-pantau-fixed-header,
html[data-theme] .elok-sidebar,
html[data-theme] .elok-sidebar-brand,
html[data-theme] .elok-brand-box,
html[data-theme] .elok-error-brand,
html[data-theme] .elok-system-pill,
html[data-theme] .elok-logo-only-link,
html[data-theme] .elok-theme-switch,
html[data-theme] .elok-theme-switch-track,
html[data-theme] .elok-accent-summary,
html[data-theme] .elok-accent-dropdown,
html[data-theme] .elok-notification-dropdown,
html[data-theme] .elok-card,
html[data-theme] .elok-auth-card,
html[data-theme] .elok-form-panel,
html[data-theme] .elok-panel,
html[data-theme] .elok-panel-2,
html[data-theme] .elok-glass,
html[data-theme] .elok-captcha-panel,
html[data-theme] .elok-visual-panel,
html[data-theme] .elok-running-card,
html[data-theme] .elok-landing-running-card,
html[data-theme] .elok-list-update-card,
html[data-theme] .elok-list-security-note,
html[data-theme] .elok-list-pantau-window,
html[data-theme] .elok-list-pantau-item,
html[data-theme] .elok-error-card,
html[data-theme] .elok-error-help-item,
html[data-theme] .elok-table-tools,
html[data-theme] .elok-filter-panel,
html[data-theme] .elok-soft-panel,
html[data-theme] [class*="bg-white/"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--elok-shadow-soft) !important;
}

html[data-theme] .elok-confirm-backdrop,
html[data-theme] [data-progress-modal-backdrop],
html[data-theme] [data-progress-list-backdrop] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(2, 6, 23, .66) !important;
}

html[data-theme="light"] .elok-confirm-backdrop,
html[data-theme="light"] [data-progress-modal-backdrop],
html[data-theme="light"] [data-progress-list-backdrop] {
    background: rgba(15, 23, 42, .42) !important;
}

html[data-theme] .elok-dashboard-stat::before {
    opacity: .44 !important;
    background: radial-gradient(circle at 100% 0%, rgba(var(--elok-accent-rgb), .10), transparent 9rem) !important;
}

html[data-theme] .elok-dashboard-stat,
html[data-theme] .elok-dashboard-stat-card,
html[data-theme] .elok-dashboard-panel,
html[data-theme] .elok-filter-panel,
html[data-theme] .elok-table-tools,
html[data-theme] .elok-soft-panel,
html[data-theme] .elok-confirm-dialog,
html[data-theme] .elok-pagination-panel {
    contain: layout paint !important;
}

html[data-theme] .elok-dashboard-stat-icon,
html[data-theme] .elok-lock-icon-badge,
html[data-theme] .elok-progress-bar,
html[data-theme] .elok-action-detail,
html[data-theme] .elok-btn-primary,
html[data-theme] .elok-login-button,
html[data-theme] .elok-confirm-submit,
html[data-theme] .elok-pagination-page.is-active {
    box-shadow: none !important;
}

html[data-theme] .elok-alert-toast {
    box-shadow: 0 12px 34px rgba(2, 6, 23, .28) !important;
}

html[data-theme="light"] .elok-alert-toast {
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14) !important;
}

html[data-theme] .elok-progress-bar {
    transition: width .24s ease !important;
}

/* Batasi animasi/hover supaya tidak semua kartu menciptakan layer GPU baru. */
html[data-theme] .elok-accent-summary,
html[data-theme] .elok-accent-option,
html[data-theme] .elok-menu-caret,
html[data-theme] .elok-scope-tab,
html[data-theme] .elok-theme-switch-option,
html[data-theme] .elok-theme-switch-thumb,
html[data-theme] .elok-pagination-page,
html[data-theme] .elok-pagination-arrow,
html[data-theme] :where(a, button).elok-action-iconized .elok-action-icon {
    transition-duration: var(--elok-motion-fast) !important;
}

@media (hover: hover) {
    html[data-theme] .elok-accent-summary:hover,
    html[data-theme] .elok-accent-option:hover,
    html[data-theme] .elok-scope-tab:hover,
    html[data-theme] .elok-running-card-item:hover,
    html[data-theme] [data-progress-list-item]:hover,
    html[data-theme] .elok-dashboard-workflow-item:hover,
    html[data-theme] .elok-action-detail:hover,
    html[data-theme] .elok-action-zip:hover,
    html[data-theme] .elok-pagination-page:hover,
    html[data-theme] .elok-pagination-arrow:not(.is-disabled):hover,
    html[data-theme] :where(a, button).elok-action-iconized:hover .elok-action-icon {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    html[data-theme] body::before,
    html[data-theme] .elok-theme-page::before,
    html[data-theme] .elok-login-body::before,
    html[data-theme] .elok-landing-body::before,
    html[data-theme] .elok-landing-main::after,
    html[data-theme] .elok-dashboard-main::after,
    html[data-theme] .elok-dashboard-glow,
    html[data-theme] .elok-glow,
    html[data-theme] .elok-geo-1,
    html[data-theme] .elok-geo-2,
    html[data-theme] .elok-geo-3,
    html[data-theme] .elok-geo-4 {
        display: none !important;
    }

    html[data-theme] .elok-card,
    html[data-theme] .elok-panel,
    html[data-theme] .elok-panel-2,
    html[data-theme] .elok-dashboard-panel,
    html[data-theme] .elok-filter-panel,
    html[data-theme] .elok-table-tools,
    html[data-theme] .elok-pagination-panel {
        box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* Tahap 136H1 — Fix kertas mika: container halaman jangan diberi opacity.
   Di 136H, .elok-grid/.elok-page-grid ikut selector ornamen sehingga seluruh halaman terlihat redup. */
html[data-theme] .elok-grid,
html[data-theme] .elok-page-grid {
    opacity: 1 !important;
}

html[data-theme] body::before,
html[data-theme] .elok-theme-page::before,
html[data-theme] .elok-login-body::before,
html[data-theme] .elok-landing-body::before {
    opacity: .18 !important;
    pointer-events: none !important;
}

html[data-theme] .elok-landing-main,
html[data-theme] .elok-dashboard-main,
html[data-theme] .elok-theme-page {
    position: relative !important;
    isolation: isolate !important;
}

html[data-theme] .elok-landing-main::after,
html[data-theme] .elok-dashboard-main::after {
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .16 !important;
}

html[data-theme] .elok-landing-main > :not(.pointer-events-none),
html[data-theme] .elok-dashboard-main > :not(.pointer-events-none),
html[data-theme] .elok-theme-page > :not(.pointer-events-none) {
    position: relative;
    z-index: 1;
}


/* Tahap 136H2 — Fix navbar landing/list pantau + logo opacity.
   Penyebab: patch performance memberi position:relative ke direct child elok-landing-main,
   sehingga header fixed ikut turun menjadi relative. Class .elok-glow juga ikut diredupkan. */
html[data-theme] .elok-landing-main > .elok-landing-header,
html[data-theme] .elok-theme-page > .elok-landing-header,
html[data-theme] body.elok-landing-body .elok-landing-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 60 !important;
    opacity: 1 !important;
    transform: none !important;
    contain: none !important;
}

html[data-theme] .elok-landing-main > .elok-list-pantau-fixed-header,
html[data-theme] .elok-theme-page > .elok-list-pantau-fixed-header,
html[data-theme] body.elok-landing-body .elok-list-pantau-fixed-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    contain: none !important;
    border-bottom: 1px solid rgba(var(--elok-accent-rgb), .22) !important;
    background: linear-gradient(90deg, rgba(2, 6, 23, .94), rgba(var(--elok-accent-end-rgb), .16), rgba(2, 6, 23, .92)) !important;
    box-shadow: 0 12px 32px rgba(2, 6, 23, .22) !important;
}

html[data-theme="light"] body.elok-landing-body .elok-list-pantau-fixed-header {
    border-bottom-color: rgba(15, 23, 42, .10) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(var(--elok-accent-rgb), .06), rgba(255, 255, 255, .96)) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important;
}

html[data-theme] .elok-landing-header .elok-brand-mark,
html[data-theme] .elok-list-pantau-fixed-header .elok-brand-mark,
html[data-theme] .elok-landing-header .elok-brand-logo,
html[data-theme] .elok-list-pantau-fixed-header .elok-brand-logo,
html[data-theme] img.elok-brand-mark.elok-glow,
html[data-theme] img.elok-brand-logo.elok-glow {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    mix-blend-mode: normal !important;
}

html[data-theme] .elok-landing-header .elok-glow,
html[data-theme] .elok-list-pantau-fixed-header .elok-glow {
    opacity: 1 !important;
}

html[data-theme] body.elok-landing-body .elok-list-pantau-section {
    padding-top: clamp(6.25rem, 8vw, 7.25rem) !important;
}

@media (max-width: 640px) {
    html[data-theme] body.elok-landing-body .elok-list-pantau-section {
        padding-top: 6rem !important;
    }
}