/* ==========================================
   1. PENCEGAH ANIMASI REFRESH (ANTI-GOYANG)
   ========================================== */

body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.tooltip {
  pointer-events: none !important;
}

/* ==========================================
   2. STYLING HANYA UNTUK DESKTOP ( >= 992px )
   ========================================== */
@media (min-width: 992px) {
  /* POSISI NORMAL (TERBUKA) */
  #sidebar-main {
    width: 15rem !important;
    transition: width 0.2s ease-in-out;
  }

  /* Transisi halus untuk area konten utama */
  .page, 
  .page-wrapper {
    transition: margin-left 0.2s ease-in-out, padding-left 0.2s ease-in-out !important;
  }

  /* Buat submenu menyatu dalam alur sidebar di desktop */
  body:not(.navbar-vertical-condensed) #sidebar-main .dropdown-menu {
    position: static !important;
    float: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
    margin: 0 !important;
    transform: none !important;
  }

  body:not(.navbar-vertical-condensed) #sidebar-main .nav-link-title,
  body:not(.navbar-vertical-condensed) #sidebar-main .hr-text,
  body:not(.navbar-vertical-condensed) #sidebar-main .brand-full {
    display: inline-block !important;
  }

  body:not(.navbar-vertical-condensed) #sidebar-main .brand-small {
    display: none !important;
  }

  /* POSISI MINIMIZED (CONDENSED - 4.5rem) */
  body.navbar-vertical-condensed #sidebar-main {
    width: 4.5rem !important;
  }

  /* PERBAIKAN GAP: Menghapus offset ganda & mengunci jarak persis 4.5rem */
  body.navbar-vertical-condensed .page {
    padding-left: 4.5rem !important;
    margin-left: 0 !important;
  }

  body.navbar-vertical-condensed .page-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body.navbar-vertical-condensed #sidebar-main .nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.navbar-vertical-condensed #sidebar-main .nav-link-icon {
    margin-right: 0 !important;
  }

  body.navbar-vertical-condensed #sidebar-main .nav-link-title,
  body.navbar-vertical-condensed #sidebar-main .dropdown-toggle::after,
  body.navbar-vertical-condensed #sidebar-main .hr-text,
  body.navbar-vertical-condensed #sidebar-main .brand-full,
  body.navbar-vertical-condensed #sidebar-main .dropdown-menu {
    display: none !important;
  }

  body.navbar-vertical-condensed #sidebar-main .brand-small {
    display: inline-block !important;
  }

  body.navbar-vertical-condensed #btn-toggle-sidebar i {
    transform: rotate(180deg);
  }
}

/* ==========================================
   3. STYLING HANYA UNTUK MOBILE ( < 992px )
   ========================================== */
@media (max-width: 991.98px) {
  #sidebar-main {
    width: 100% !important;
  }

  #sidebar-main .brand-small {
    display: none !important;
  }

  #sidebar-main .brand-full {
    display: inline-block !important;
  }

  /* Reset Margin & Padding Konten di Mobile */
  .page, 
  .page-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* MATIKAN DELAY & ANIMASI TINGGI BOOTSTRAP */
  #sidebar-menu.collapsing {
    height: 100vh !important;
    transition: none !important;
  }

  /* SLIDE OFFCANVAS (RESPONSIF INSTAN VIA GPU) */
  #sidebar-menu.navbar-collapse {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    background-color: #1e293b !important;
    padding: 1.25rem 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    /* Hardware Acceleration agar super smooth 60 FPS */
    transform: translate3d(-100%, 0, 0) !important;
    will-change: transform;
    transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) !important;
    display: block !important;
  }

  /* SAAT MENU TERBUKA */
  #sidebar-menu.navbar-collapse.show {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
  }

  /* BACKDROP / OVERLAY GELAP DI OUTSIDE AREA */
  #sidebar-menu.navbar-collapse.show::after {
    content: '';
    position: fixed;
    top: 0;
    left: 270px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    pointer-events: auto;
  }
}