/* =========================================================
   ServicePro HP - MOBILE FIX V9
   Fokus:
   - menu mobile bisa diklik
   - menu mobile bisa discroll sendiri
   - halaman utama bisa scroll normal saat menu tertutup
   - dropdown part lebih rapi
   - dashboard mobile lebih rapi
   - tabel / area lebar bisa geser kanan-kiri
   - tombol Telegram disembunyikan di HP
   ========================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: static !important;
  }

  body {
    touch-action: manipulation !important;
  }

  /* =========================
     Area konten utama
     ========================= */
  .main-content,
  .content,
  .app-main,
  main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    margin-left: 0 !important;
  }

  #pageContent,
  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 70px 10px 90px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Saat menu buka, halaman belakang tidak ikut scroll */
  body.sp-menu-open .main-content,
  body.sp-menu-open .content,
  body.sp-menu-open .app-main,
  body.sp-menu-open main {
    overflow: hidden !important;
  }

  /* =========================
     Backdrop lama dimatikan total
     ========================= */
  #spMobileBackdrop,
  .sidebar-backdrop,
  .sidebar-backdrop.show,
  #spMobileBackdrop.active {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* =========================
     Tombol menu mobile
     ========================= */
  .hamburger:not(#spMobileMenuBtn),
  .mobile-menu-btn:not(#spMobileMenuBtn),
  .sidebar-toggle:not(#spMobileMenuBtn) {
    display: none !important;
    pointer-events: none !important;
  }

  #spMobileMenuBtn {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(234,179,8,.45) !important;
    background: rgba(15,23,42,.96) !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    z-index: 2147483600 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.sp-light #spMobileMenuBtn {
    background: linear-gradient(135deg, #fff7ea, #ead7b0) !important;
    color: #111827 !important;
  }

  /* =========================
     Sidebar mobile
     ========================= */
  body:not(.sp-login-page) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 286px !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-110%) !important;
    transition: transform .22s ease !important;
    z-index: 2147483500 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    background: rgba(15,23,42,.985) !important;
    backdrop-filter: none !important;
  }

  body.sp-light:not(.sp-login-page) .sidebar {
    background: #fff7ea !important;
  }

  body:not(.sp-login-page) .sidebar.sp-mobile-open,
  body:not(.sp-login-page) .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar-header {
    flex: 0 0 auto !important;
  }

  .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: 14px !important;
  }

  .sidebar-footer {
    flex: 0 0 auto !important;
  }

  .sidebar,
  .sidebar * {
    pointer-events: auto !important;
  }

  .sidebar a,
  .sidebar button,
  .sidebar .nav-item,
  .sidebar .menu-item,
  .sidebar [onclick] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* =========================
     Header / page
     ========================= */
  .page-header,
  .dashboard-header,
  .topbar-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .page-title,
  .dashboard-title,
  h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  /* =========================
     Dashboard card lebih rapi
     ========================= */
  .stats-grid,
  .dashboard-grid,
  .dashboard-cards,
  .kpi-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card,
  .panel,
  .widget,
  .stat-card,
  .dashboard-card,
  .content-card,
  .box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Elemen form */
  .form-row,
  .filters-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input,
  select,
  textarea,
  .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  button,
  .btn {
    min-height: 42px !important;
  }

  /* =========================
     Dropdown / hasil pencarian part
     Lebih rapi di HP
     ========================= */
  .autocomplete-results,
  .autocomplete-list,
  .autocomplete-dropdown,
  .search-results,
  .suggestion-box,
  .part-results,
  .part-suggestion-list,
  .dropdown-menu.show {
    max-height: 46dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    left: 0 !important;
    right: auto !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    z-index: 2147482000 !important;
  }

  /* Kalau card hasil pencarian terlalu lebar */
  .autocomplete-results *,
  .autocomplete-list *,
  .autocomplete-dropdown *,
  .search-results *,
  .suggestion-box *,
  .part-results *,
  .part-suggestion-list * {
    word-wrap: break-word !important;
    white-space: normal !important;
  }

  /* =========================
     Area tabel / konten lebar
     Biar bisa geser kanan-kiri
     ========================= */
  .table-container,
  .table-responsive,
  .sp-mobile-scroll-x,
  .part-table-wrap,
  .data-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  table,
  .data-table {
    min-width: 760px !important;
  }

  /* =========================
     Modal mobile
     ========================= */
  .modal,
  .modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-content,
  .modal-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 10px auto !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  .modal-body {
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* =========================
     Tombol Telegram & Theme
     ========================= */

  /* tombol Telegram quick disembunyikan di HP */
  #telegramSettingsQuickBtn {
    display: none !important;
  }

  /* tombol theme tetap ada, tapi kecil dan rapi */
  #spThemeToggle {
    right: 12px !important;
    bottom: 12px !important;
    z-index: 999900 !important;
    transform: scale(.92) !important;
  }

  /* login page tidak butuh mobile menu */
  body.sp-login-page #spMobileMenuBtn,
  body.sp-login-page #spMobileBackdrop,
  body.sp-login-page .sidebar-backdrop {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .stats-grid,
  .dashboard-grid,
  .dashboard-cards,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #pageContent,
  .page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  table,
  .data-table {
    min-width: 860px !important;
  }
}



/* ==================== FLOATING BUTTON STACK FIX ==================== */
#mobileFloatingActionStack {
  position: fixed !important;
  right: 14px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

#mobileFloatingActionStack > .floating-stack-item {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
}

/* supaya wrapper stack tidak menghalangi klik area lain */
#mobileFloatingActionStack,
#mobileFloatingActionStack * {
  box-sizing: border-box !important;
}

/* jika tombol aslinya punya style fixed sendiri, netralkan */
#mobileFloatingActionStack .floating-stack-item,
#mobileFloatingActionStack .floating-stack-item.btn,
#mobileFloatingActionStack .floating-stack-item button,
#mobileFloatingActionStack .floating-stack-item a {
  position: relative !important;
}

/* mobile: beri jarak ekstra biar aman dari tepi bawah */
@media (max-width: 768px) {
  #mobileFloatingActionStack {
    right: 10px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    gap: 8px !important;
  }

  #mobileFloatingActionStack > .floating-stack-item {
    max-width: calc(100vw - 20px) !important;
  }
}

/* FINAL_FLOATING_BUTTON_SIDE_BY_SIDE_START */

/* =========================================================
   FINAL FLOATING BUTTON FIX
   Telegram dan Terang/Gelap dibuat berjejer kanan-kiri.
   Telegram di kiri, Theme di kanan.
   ========================================================= */

/* Netralisir wrapper stack lama jika pernah dibuat */
#mobileFloatingActionStack {
  display: contents !important;
  position: static !important;
  pointer-events: none !important;
}

/* Tombol Telegram: sebelah kiri */
html body #telegramSettingsQuickBtn,
html body #mobileFloatingActionStack > #telegramSettingsQuickBtn,
html body #mobileFloatingActionStack #telegramSettingsQuickBtn,
html body #telegramSettingsQuickBtn.floating-stack-item {
  display: inline-flex !important;
  position: fixed !important;
  right: 148px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483000 !important;

  min-width: 122px !important;
  height: 42px !important;
  padding: 0 16px !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(15,23,42,.94) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(10px) !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Tombol Terang/Gelap: sebelah kanan */
html body #spThemeToggle,
html body #mobileFloatingActionStack > #spThemeToggle,
html body #mobileFloatingActionStack #spThemeToggle,
html body #spThemeToggle.floating-stack-item {
  display: inline-flex !important;
  position: fixed !important;
  right: 16px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483001 !important;

  min-width: 118px !important;
  height: 42px !important;
  padding: 0 16px !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Light mode */
body.sp-light #telegramSettingsQuickBtn,
body.sp-light #mobileFloatingActionStack > #telegramSettingsQuickBtn,
body.sp-light #mobileFloatingActionStack #telegramSettingsQuickBtn {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: rgba(17,24,39,.18) !important;
}

body.sp-light #spThemeToggle,
body.sp-light #mobileFloatingActionStack > #spThemeToggle,
body.sp-light #mobileFloatingActionStack #spThemeToggle {
  background: linear-gradient(135deg, #fff7ea, #ead7b0) !important;
  color: #111827 !important;
  border: 1px solid rgba(80,55,20,.18) !important;
}

/* HP: tetap berjejer, tapi lebih kecil */
@media (max-width: 900px) {
  html body #telegramSettingsQuickBtn,
  html body #mobileFloatingActionStack > #telegramSettingsQuickBtn,
  html body #mobileFloatingActionStack #telegramSettingsQuickBtn,
  html body #telegramSettingsQuickBtn.floating-stack-item {
    display: inline-flex !important;
    right: 124px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    min-width: 106px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    z-index: 2147483000 !important;
  }

  html body #spThemeToggle,
  html body #mobileFloatingActionStack > #spThemeToggle,
  html body #mobileFloatingActionStack #spThemeToggle,
  html body #spThemeToggle.floating-stack-item {
    display: inline-flex !important;
    right: 10px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    min-width: 106px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    z-index: 2147483001 !important;
  }
}

/* FINAL_FLOATING_BUTTON_SIDE_BY_SIDE_END */