/* Tahap 4 hotfix: cegah glitch render/GPU Chrome Android pada efek glass berat. */
@media (max-width: 767.98px) {
  html,
  body,
  .rs-app-body {
    background-attachment: scroll !important;
  }

  .rs-app-main,
  .rs-app-content,
  .rs-app-content__inner {
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
  }

  .rs-app-topbar {
    position: sticky !important;
    top: .65rem !important;
    z-index: 1500 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  html[data-rs-theme="terang"] .rs-app-topbar,
  html[data-rs-theme="terang"] .rs-page-header,
  html[data-rs-theme="terang"] .rs-card,
  html[data-rs-theme="terang"] .rs-dashboard-card,
  html[data-rs-theme="terang"] .rs-kpi-card,
  html[data-rs-theme="terang"] .rs-summary-card,
  html[data-rs-theme="terang"] .rs-data-card,
  html[data-rs-theme="terang"] .rs-shortcut-card,
  html[data-rs-theme="terang"] .rs-quick-link,
  html[data-rs-theme="terang"] .modal-content,
  html[data-rs-theme="terang"] .offcanvas {
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .rs-dashboard-card,
  .rs-kpi-card,
  .rs-summary-card,
  .rs-quick-link,
  .rs-wave-chart,
  .rs-wave-chart svg {
    transform: none !important;
    will-change: auto !important;
    contain: paint;
  }

  .rs-wave-chart::before,
  .rs-kpi-card::before,
  .rs-kpi-card::after,
  .rs-summary-card::after {
    display: none !important;
  }

  .rs-wave-chart__glow,
  .rs-wave-chart__line,
  .rs-wave-chart__point circle {
    filter: none !important;
  }

  .rs-card:hover,
  .rs-data-card:hover,
  .rs-dashboard-card:hover,
  .rs-auth-card:hover,
  .rs-kpi-card:hover,
  .rs-summary-card:hover,
  .rs-quick-link:hover,
  .rs-btn:hover,
  .btn:hover,
  button:not(.btn-close):hover {
    transform: none !important;
  }

  .rs-wave-chart {
    background: rgba(255, 255, 255, .72) !important;
  }
}

/* Tahap 5 minor: landing/auth offcanvas mobile harus kontras dan terbaca. */
@media (max-width: 767.98px) {
  html[data-rs-theme="terang"] body.rs-public-body .ck2-public-offcanvas,
  html[data-rs-theme="terang"] body.rs-auth-body .ck2-public-offcanvas,
  body.rs-public-body .ck2-public-offcanvas,
  body.rs-auth-body .ck2-public-offcanvas {
    background: linear-gradient(180deg, rgba(7, 18, 44, .98), rgba(10, 24, 58, .96)) !important;
    border-left: 1px solid rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
    box-shadow: -18px 0 48px rgba(3, 7, 18, .34) !important;
  }

  body.rs-public-body .ck2-public-offcanvas .offcanvas-header,
  body.rs-auth-body .ck2-public-offcanvas .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  }

  body.rs-public-body .ck2-public-offcanvas .ck2-water-brand__text strong,
  body.rs-auth-body .ck2-public-offcanvas .ck2-water-brand__text strong {
    color: #ec1b7f !important;
    text-shadow: none !important;
  }

  body.rs-public-body .ck2-public-offcanvas .ck2-water-brand__text strong span,
  body.rs-auth-body .ck2-public-offcanvas .ck2-water-brand__text strong span {
    color: #58a6ff !important;
  }

  body.rs-public-body .ck2-public-offcanvas .btn-close,
  body.rs-auth-body .ck2-public-offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
    opacity: .95 !important;
  }

  body.rs-public-body .ck2-public-offcanvas__nav,
  body.rs-auth-body .ck2-public-offcanvas__nav {
    gap: .45rem !important;
  }

  body.rs-public-body .ck2-public-offcanvas__nav a,
  body.rs-auth-body .ck2-public-offcanvas__nav a {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .94) !important;
    text-shadow: none !important;
  }

  body.rs-public-body .ck2-public-offcanvas__nav a:hover,
  body.rs-public-body .ck2-public-offcanvas__nav a.is-active,
  body.rs-auth-body .ck2-public-offcanvas__nav a:hover,
  body.rs-auth-body .ck2-public-offcanvas__nav a.is-active {
    background: linear-gradient(135deg, rgba(236, 27, 127, .92), rgba(236, 27, 127, .68)) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #ffffff !important;
  }

  body.rs-public-body .ck2-public-offcanvas__actions .ck2-water-register,
  body.rs-auth-body .ck2-public-offcanvas__actions .ck2-water-register {
    display: inline-flex !important;
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
  }

  body.rs-public-body .ck2-public-offcanvas__actions .ck2-water-login--primary,
  body.rs-auth-body .ck2-public-offcanvas__actions .ck2-water-login--primary {
    color: #ffffff !important;
  }
}


/* Tahap 5 minor: tombol akun offcanvas landing icon-only. */
@media (max-width: 767.98px) {
  body.rs-public-body .ck2-public-offcanvas__actions,
  body.rs-auth-body .ck2-public-offcanvas__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    margin-top: auto !important;
    padding-top: 1rem !important;
  }

  body.rs-public-body .ck2-public-offcanvas__actions .ck2-public-offcanvas__action-icon,
  body.rs-auth-body .ck2-public-offcanvas__actions .ck2-public-offcanvas__action-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 0 !important;
  }

  body.rs-public-body .ck2-public-offcanvas__actions .ck2-public-offcanvas__action-icon svg,
  body.rs-auth-body .ck2-public-offcanvas__actions .ck2-public-offcanvas__action-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}