/* MOKA Biodiversitas - mobile-only layout */
@media screen and (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    display: block !important;
    min-height: 100vh;
  }

  body > .sidebar.sidebar-fixed-layout {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .sidebar.sidebar-fixed-layout .logo-main {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  .sidebar.sidebar-fixed-layout .logo-tree {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    overflow: hidden !important;
  }

  .sidebar.sidebar-fixed-layout .logo-tree img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .sidebar.sidebar-fixed-layout .logo-main > div:last-child {
    min-width: 0 !important;
  }

  .sidebar .logo-title,
  .sidebar .brand-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .sidebar .logo-title + .logo-title,
  .sidebar .brand-title span {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .sidebar .logo-sub,
  .sidebar .logo-tagline,
  .sidebar .brand-sub {
    display: none !important;
  }

  .sidebar.sidebar-fixed-layout > .sidebar-menu-scroll {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  .sidebar.sidebar-fixed-layout .menu-title,
  .sidebar.sidebar-fixed-layout .section {
    display: none !important;
  }

  .sidebar.sidebar-fixed-layout nav.menu {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  .sidebar.sidebar-fixed-layout .menu a,
  .sidebar.sidebar-fixed-layout a.menu {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .sidebar.sidebar-fixed-layout > .sidebar-user {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 4px 2px !important;
    box-sizing: border-box !important;
  }

  body > main.main,
  body > main.page,
  body > .main,
  body > .page,
  body > main {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body > main img,
  body > main video {
    max-width: 100%;
    height: auto;
  }

  body > main input,
  body > main select,
  body > main textarea {
    max-width: 100%;
    font-size: 16px;
    box-sizing: border-box;
  }
}

/* MOKA MOBILE COMPACT HEADER — mobile only; desktop tidak berubah */
@media screen and (max-width: 760px) {

  /* Pangkas ruang kosong di header logo */
  body > .sidebar.sidebar-fixed-layout > .brand,
  body > .sidebar.sidebar-fixed-layout > .logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 4px 10px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-sizing: border-box !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-tree {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-tree img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-title,
  body > .sidebar.sidebar-fixed-layout .brand-title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-title + .logo-title,
  body > .sidebar.sidebar-fixed-layout .brand-title span {
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  body > .sidebar.sidebar-fixed-layout .logo-sub,
  body > .sidebar.sidebar-fixed-layout .logo-tagline,
  body > .sidebar.sidebar-fixed-layout .brand-sub {
    display: none !important;
  }

  /* Menu horizontal satu baris, dapat digeser */
  body > .sidebar.sidebar-fixed-layout > .sidebar-menu-scroll {
    display: flex !important;
    flex: 0 0 50px !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  body > .sidebar.sidebar-fixed-layout > .sidebar-menu-scroll::-webkit-scrollbar {
    display: none !important;
  }

  body > .sidebar.sidebar-fixed-layout .sidebar-menu-scroll nav.menu {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 4px !important;
  }

  body > .sidebar.sidebar-fixed-layout .sidebar-menu-scroll .menu a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Baris identitas pengguna dibuat ringkas */
  body > .sidebar.sidebar-fixed-layout > .sidebar-user {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border-top: 1px solid rgba(255,255,255,.10);
    box-sizing: border-box !important;
  }

  body > .sidebar.sidebar-fixed-layout .sidebar-user .avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 18px !important;
  }

  body > .sidebar.sidebar-fixed-layout .sidebar-user-info strong {
    font-size: 11px !important;
  }

  body > .sidebar.sidebar-fixed-layout .sidebar-user-info span {
    font-size: 9px !important;
  }
}

/* DASHBOARD MOBILE FIX — tidak mengubah tampilan desktop */
@media screen and (max-width: 760px) {

  body > .app {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body > .app > aside.sidebar.sidebar-fixed-layout {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body > .app > aside.sidebar > .logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 4px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body > .app > aside.sidebar .logo-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > .app > aside.sidebar .logo-tree {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  body > .app > aside.sidebar .logo-tree img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body > .app > aside.sidebar .logo-title {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  body > .app > aside.sidebar .logo-sub,
  body > .app > aside.sidebar .logo-tagline {
    display: none !important;
  }

  body > .app > aside.sidebar > .sidebar-menu-scroll {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  body > .app > aside.sidebar > .sidebar-menu-scroll::-webkit-scrollbar {
    display: none !important;
  }

  body > .app > aside.sidebar .sidebar-menu-scroll .menu-title {
    display: none !important;
  }

  body > .app > aside.sidebar .sidebar-menu-scroll nav.menu {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  body > .app > aside.sidebar .sidebar-menu-scroll nav.menu a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  body > .app > aside.sidebar > .sidebar-user {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    box-sizing: border-box !important;
  }

  body > .app > .content {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body > .app > .content > main.page {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  body > .app > .content img,
  body > .app > .content video,
  body > .app > .content iframe {
    max-width: 100%;
  }

  body > .app > .content input,
  body > .app > .content select,
  body > .app > .content textarea {
    max-width: 100%;
    font-size: 16px;
    box-sizing: border-box;
  }
}

/* DASHBOARD MOBILE — HILANGKAN RUANG KOSONG HEADER */
@media screen and (max-width: 760px) {
  body > .app > aside.sidebar.sidebar-fixed-layout {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
  }

  body > .app > .content {
    align-self: stretch !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body > .app > .content > .topbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > .app > .content > #dashboard-datetime {
    margin-top: 0 !important;
  }

  body > .app > .content > main.page {
    margin-top: 0 !important;
  }
}

/* SENTINEL-2 DAN HOTSPOT — MOBILE ONLY */
@media screen and (max-width: 760px) {

  body > .layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body > .layout > aside.sidebar.sidebar-fixed-layout {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body > .layout > aside.sidebar > .brand {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 4px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body > .layout > aside.sidebar .logo-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > .layout > aside.sidebar .logo-tree {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  body > .layout > aside.sidebar .logo-tree img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body > .layout > aside.sidebar .logo-title {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  body > .layout > aside.sidebar .brand-sub {
    display: none !important;
  }

  body > .layout > aside.sidebar > .sidebar-menu-scroll {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  body > .layout > aside.sidebar > .sidebar-menu-scroll::-webkit-scrollbar {
    display: none !important;
  }

  body > .layout > aside.sidebar .sidebar-menu-scroll .section {
    display: none !important;
  }

  body > .layout > aside.sidebar .sidebar-menu-scroll a.menu {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 36px !important;
    width: auto !important;
    margin: 0 4px 0 0 !important;
    padding: 7px 9px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  body > .layout > aside.sidebar > .sidebar-user {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    box-sizing: border-box !important;
  }

  body > .layout > main.main {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body > .layout > main.main img,
  body > .layout > main.main video,
  body > .layout > main.main canvas,
  body > .layout > main.main iframe {
    max-width: 100%;
  }

  body > .layout > main.main input,
  body > .layout > main.main select,
  body > .layout > main.main textarea {
    max-width: 100%;
    font-size: 16px;
    box-sizing: border-box;
  }

  #sentinel-map {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* MOKA ORBIT TIME — SMARTPHONE ONLY
   Desktop/PC tidak terpengaruh.
*/
@media screen and (max-width: 760px) {
  .moka-orbit-time-panel {
    width: min(300px, calc(100vw - 76px)) !important;
    max-width: calc(100vw - 76px) !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .moka-orbit-time-panel > b {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
  }

  .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: none !important;
    overflow: visible !important;
    font-size: 11px !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 5px 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row > span {
    flex: 0 0 34% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row > b {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 10px !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }
}

/* MOKA ORBIT TIME — MOBILE COMPACT V2
   Hanya smartphone, desktop/PC tetap.
*/
@media screen and (max-width: 760px) {
  .moka-orbit-time-panel {
    width: min(265px, calc(100vw - 90px)) !important;
    max-width: calc(100vw - 90px) !important;
    max-height: 175px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .moka-orbit-time-panel > b {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .moka-orbit-time-panel #moka-orbit-time-content {
    font-size: 10px !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row {
    gap: 4px !important;
    padding: 4px 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row > b {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
}

/* MOKA HOTSPOT — COMPACT ORBIT + SATELLITE STATS
   Smartphone saja. Desktop/PC tidak diubah.
*/
@media screen and (max-width: 760px) {

  /* Panel waktu lintasan satelit */
  .moka-orbit-time-panel {
    width: 205px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 105px) !important;
    max-height: 135px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 6px 7px !important;
    box-sizing: border-box !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .moka-orbit-time-panel > b {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
    white-space: normal !important;
  }

  .moka-orbit-time-panel #moka-orbit-time-content {
    font-size: 9px !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 65px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row span,
  .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  /* Statistik satelit di kiri bawah peta */
  #hotspot-map .moka-satellite-overlay {
    left: 3px !important;
    bottom: 3px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    padding: 2px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .satellite-summary {
    width: auto !important;
    max-width: 100% !important;
    padding: 2px !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .satellite-row {
    grid-template-columns: minmax(88px, 1fr) 22px 22px 22px 38px !important;
    column-gap: 2px !important;
    align-items: center !important;
    padding: 1px 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  #hotspot-map .satellite-row b,
  #hotspot-map .satellite-row span,
  #hotspot-map .satellite-row strong {
    min-width: 0 !important;
    margin-left: 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

/* MOKA ORBIT TOGGLE — SMARTPHONE ONLY */
@media screen and (max-width: 760px) {
  .moka-orbit-time-panel {
    width: 178px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 100px) !important;
    max-height: 150px !important;
    overflow: hidden !important;
    padding: 5px !important;
    box-sizing: border-box !important;
  }

  .moka-orbit-time-panel .moka-orbit-toggle {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 5px 4px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: left !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: 105px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .moka-orbit-time-panel #moka-orbit-time-content[hidden] {
    display: none !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px 0 !important;
  }

  .moka-orbit-time-panel .moka-orbit-time-row span,
  .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 9px !important;
  }
}

/* MOKA ORBIT — SEPARATE FROM STATS ON MOBILE */
@media screen and (max-width: 760px) {
  /* Posisi kontrol jadwal di kanan atas peta */
  #hotspot-map .leaflet-bottom.leaflet-right
  .moka-orbit-time-panel {
    width: 178px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 100px) !important;
    max-height: 150px !important;
    margin-bottom: 8px !important;
  }

  /* Ketika dibuka, panel tetap ringkas dan dapat digulir */
  #hotspot-map .moka-orbit-time-panel:has(
    .moka-orbit-toggle[aria-expanded="true"]
  ) {
    max-height: 190px !important;
    overflow: visible !important;
  }

  #hotspot-map .moka-orbit-time-panel
  .moka-orbit-toggle[aria-expanded="true"] ~ #moka-orbit-time-content {
    max-height: 145px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  /* Baris jadwal lebih rapat agar lima satelit dapat digulir */
  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 4px 0 !important;
  }

  #hotspot-map .moka-orbit-time-panel
  .moka-orbit-time-row span,
  #hotspot-map .moka-orbit-time-panel
  .moka-orbit-time-row b {
    font-size: 9px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* FINAL ORBIT PANEL — SMARTPHONE ONLY */
@media screen and (max-width: 760px) {
  #hotspot-map .moka-orbit-time-panel {
    width: 178px !important;
    max-width: calc(100vw - 100px) !important;
    max-height: 220px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel:has(
    .moka-orbit-toggle[aria-expanded="true"]
  ) {
    max-height: 220px !important;
    overflow: hidden !important;
  }

  #hotspot-map .moka-orbit-time-panel
  .moka-orbit-toggle[aria-expanded="true"] ~ #moka-orbit-time-content {
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    padding-right: 3px !important;
  }
}

/* MOKA ORBIT — RAPATKAN KOLOM JADWAL DI SMARTPHONE */
@media screen and (max-width: 760px) {
  #hotspot-map .moka-orbit-time-panel {
    width: 168px !important;
    max-width: 168px !important;
    min-width: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    align-items: start !important;
    padding: 3px 0 !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 9px !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* MOKA ORBIT — LEBIH SEMPIT, POSISI BELUM DIUBAH */
@media screen and (max-width: 760px) {
  #hotspot-map .moka-orbit-time-panel {
    width: 145px !important;
    min-width: 0 !important;
    max-width: 145px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    padding: 4px 2px !important;
    font-size: 9px !important;
  }

  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 45px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    padding: 3px 0 !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span {
    font-size: 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
  }
}

/* FINAL WIDTH LOCK — ORBIT PANEL SMARTPHONE */
@media screen and (max-width: 760px) {
  #hotspot-map .leaflet-control .moka-orbit-time-panel,
  #hotspot-map .moka-orbit-time-panel {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 9px !important;
    white-space: normal !important;
  }

  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    width: 100% !important;
    grid-template-columns: 45px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span,
  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* MOKA ORBIT — TOMBOL JUDUL LEBIH RINGKAS */
@media screen and (max-width: 760px) {
  #hotspot-map .moka-orbit-time-panel {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel
  .moka-orbit-toggle[aria-expanded="true"] ~ #moka-orbit-time-content {
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 2px !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span,
  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    font-size: 7px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }
}

/* ORBIT TOGGLE — UKURAN TOMBOL TERTUTUP */
@media screen and (max-width: 760px) {
  #hotspot-map .moka-orbit-time-panel {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 2px !important;
    gap: 2px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 175px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* MOKA ORBIT — MOBILE NO OVERLAP */
@media screen and (max-width: 760px) {
  /* Panel jadwal kecil dan menempel di sisi kanan */
  #hotspot-map .moka-orbit-time-panel {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    max-height: 155px !important;
    margin: 0 0 48px 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Judul ringkas */
  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* Isi jadwal digulir, bukan memperpanjang panel */
  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: 115px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    padding: 3px 0 !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span,
  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Statistik tetap di kiri bawah */
  #hotspot-map .moka-satellite-overlay {
    z-index: 1000 !important;
  }

  #hotspot-map .leaflet-bottom.leaflet-right
  .moka-orbit-time-panel {
    margin-bottom: 48px !important;
  }
}

/* MOKA ORBIT — FINAL MOBILE LAYOUT */
@media screen and (max-width: 760px) {
  #hotspot-map .leaflet-bottom.leaflet-right
  .moka-orbit-time-panel {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    margin: 0 0 52px 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #hotspot-map .moka-orbit-time-panel #moka-orbit-time-content {
    max-height: 115px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 3px 0 !important;
  }

  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row span,
  #hotspot-map .moka-orbit-time-panel .moka-orbit-time-row b {
    min-width: 0 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* MOKA ORBIT — POSISI DI ATAS ATRIBUSI PETA */
@media screen and (max-width: 760px) {
  #hotspot-map .leaflet-bottom.leaflet-right
  .moka-orbit-time-panel {
    margin-bottom: 8px !important;
  }
}

/* SENTINEL-2 — ANGKA LEBIH RINGKAS DI SMARTPHONE */
@media screen and (max-width: 760px) {
  /* Angka utama: tile, tanggal, dan tutupan awan */
  body:has(#last-scene) .card-value {
    font-size: 19px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  /* Label kartu */
  body:has(#last-scene) .card-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Catatan dan waktu akuisisi */
  body:has(#last-scene) .card-note {
    font-size: 10px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  /* Judul halaman Sentinel-2 */
  body:has(#last-scene) .top h1 {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }
}

/* SENTINEL-2 — UKURAN ANGKA MOBILE FINAL */
@media screen and (max-width: 760px) {
  body:has(#last-scene) .card-value {
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#last-scene) .card-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  body:has(#last-scene) .card-note {
    font-size: 9px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#last-scene) .top h1 {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }
}

/* SENTINEL-2 — ANGKA MOBILE LEBIH KECIL */
@media screen and (max-width: 760px) {
  body:has(#last-scene) .card-value {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body:has(#last-scene) .card-label {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body:has(#last-scene) .card-note {
    font-size: 8px !important;
    line-height: 1.35 !important;
  }

  body:has(#last-scene) .top h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* DASHBOARD — HEADER RINGKAS SMARTPHONE SAJA */
@media screen and (max-width: 760px) {

  /* Logo dan identitas MOKA */
  body > .app > aside.sidebar.sidebar-fixed-layout > .logo {
    flex: 0 0 auto !important;
    padding: 5px 4px 7px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  body > .app > aside.sidebar .logo-main {
    gap: 7px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  body > .app > aside.sidebar .logo-tree {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  body > .app > aside.sidebar .logo-title {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body > .app > aside.sidebar .logo-title + .logo-title {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  /* Menu satu baris, bisa digeser ke samping */
  body > .app > aside.sidebar > .sidebar-menu-scroll {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  body > .app > aside.sidebar .sidebar-menu-scroll nav.menu {
    gap: 4px !important;
  }

  body > .app > aside.sidebar .sidebar-menu-scroll nav.menu a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 33px !important;
    padding: 5px 8px !important;
    gap: 5px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Baris pengguna */
  body > .app > aside.sidebar > .sidebar-user {
    min-height: 42px !important;
    padding: 4px 3px !important;
    gap: 7px !important;
  }

  body > .app > aside.sidebar .sidebar-user .avatar {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
  }

  body > .app > aside.sidebar .sidebar-user-info strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body > .app > aside.sidebar .sidebar-user-info span {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body > .app > aside.sidebar .sidebar-user > a {
    font-size: 11px !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }
}

/* DASHBOARD HERO — RINGKAS KHUSUS SMARTPHONE */
@media screen and (max-width: 760px) {
  body > .app .page > section.hero {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-position: center 24% !important;
    background-size: cover !important;
  }

  body > .app .page > section.hero .hero-kalimantan-title {
    left: 12px !important;
    top: 9px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: .3px !important;
    white-space: normal !important;
  }

  body > .app .page > section.hero .hero-content {
    padding: 0 12px 8px !important;
    max-width: 100% !important;
  }

  body > .app .page > section.hero .hero-content h1 {
    margin: 30px 0 5px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body > .app .page > section.hero .hero-content p {
    margin: 4px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body > .app .page > section.hero .hero-content p strong {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  body > .app .page > section.hero .hero-badges {
    gap: 4px !important;
    margin-top: 6px !important;
  }

  body > .app .page > section.hero .hero-badge {
    padding: 3px 5px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
}

/* DASHBOARD — FINAL COMPACT HEADER & HERO GAP
   Smartphone saja; desktop tidak berubah. */
@media screen and (max-width: 760px) {

  /* Header logo MOKA */
  body > .app > aside.sidebar.sidebar-fixed-layout > .logo {
    padding: 3px 3px 5px !important;
  }

  body > .app > aside.sidebar .logo-tree {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }

  body > .app > aside.sidebar .logo-title {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  body > .app > aside.sidebar .logo-title + .logo-title {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  /* Navigasi lebih pendek */
  body > .app > aside.sidebar > .sidebar-menu-scroll {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    padding: 3px 0 !important;
  }

  body > .app > aside.sidebar .sidebar-menu-scroll nav.menu a {
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  /* Baris pengguna lebih ringkas */
  body > .app > aside.sidebar > .sidebar-user {
    min-height: 38px !important;
    padding: 3px 2px !important;
  }

  body > .app > aside.sidebar .sidebar-user .avatar {
    flex: 0 0 29px !important;
    width: 29px !important;
    height: 29px !important;
    font-size: 18px !important;
  }

  /* Kurangi jarak antara banner dan Ringkasan Monitoring */
  body > .app .page > section.hero {
    margin-bottom: 10px !important;
  }

  body > .app .page > section.hero + * {
    margin-top: 0 !important;
  }

  body > .app .page {
    padding-top: 8px !important;
  }
}

/* DASHBOARD — RAPATKAN JARAK BANNER KE RINGKASAN
   Khusus smartphone */
@media screen and (max-width: 760px) {
  body > .app .page > section.hero {
    margin-bottom: 0 !important;
  }

  body > .app .page > section.hero + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body > .app .page > section.hero + * h2 {
    margin-top: 8px !important;
  }
}

/* DASHBOARD — BANNER LEBIH PENDEK DI SMARTPHONE */
@media screen and (max-width: 760px) {
  body > .app .page > section.hero {
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  body > .app .page > section.hero .hero-kalimantan-title {
    top: 7px !important;
    font-size: 11px !important;
  }

  body > .app .page > section.hero .hero-content {
    padding: 0 10px 5px !important;
  }

  body > .app .page > section.hero .hero-content h1 {
    margin-top: 25px !important;
    margin-bottom: 3px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  body > .app .page > section.hero .hero-content p {
    margin-top: 3px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body > .app .page > section.hero .hero-badges {
    margin-top: 4px !important;
    gap: 3px !important;
  }

  body > .app .page > section.hero .hero-badge {
    padding: 2px 4px !important;
    font-size: 8px !important;
  }
}

/* DASHBOARD — ANGKA KARTU LEBIH KECIL DI SMARTPHONE */
@media screen and (max-width: 760px) {
  body > .app .page .card-value,
  body > .app .page .stat-value,
  body > .app .page .metric-value,
  body > .app .page .summary-value,
  body > .app .page .stat-number,
  body > .app .page .number-value {
    font-size: 23px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
  }
}