/* ========================================== */
      /* GLOBAL LAYOUT & PREVENT HORIZONTAL SHIFT   */
      /* ========================================== */
      html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
      }

      body.modal-open {
        overflow-x: hidden !important;
        padding-right: 0 !important;
      }

      body.modal-open .app-wrapper,
      body.modal-open .main-header,
      body.modal-open .main-sidebar,
      body.modal-open .content-wrapper {
        filter: blur(8px) !important;
        -webkit-filter: blur(8px) !important;
        transition: filter 0.3s ease;
        pointer-events: none !important;
        max-width: 100vw !important;
        overflow: hidden !important;
      }

      .modal-backdrop {
        background-color: #000 !important;
      }
      .modal-backdrop.show {
        opacity: 0.85 !important;
        z-index: 1040 !important;
      }
      .modal {
        z-index: 1060 !important;
        overflow-x: hidden !important;
      }
      #modalYouTube {
        z-index: 1070 !important;
      }
      #modalYouTube .modal-content {
        box-shadow: 0 0 100px rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      /* ========================================== */
      /* RESPONSIVE SIDEBAR STYLES                  */
      /* ========================================== */
      .app-sidebar-right {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1038;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease-in-out, width 0.2s ease;
      }

      /* Mobile Screen (< 992px) */
      @media (max-width: 991.98px) {
        .app-sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          height: 100vh !important;
          overflow-y: auto !important;
          z-index: 1038;
        }
        .app-sidebar-right {
          width: 280px;
          max-width: 85vw;
          transform: translateX(100%);
          height: 100vh !important;
          overflow-y: auto !important;
        }
        body.sidebar-right-open .app-sidebar-right {
          transform: translateX(0);
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5) !important;
        }
        body.sidebar-right-open::after {
          content: "";
          position: fixed;
          top: 0; left: 0; right: 0; bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          z-index: 1037;
        }
      }
        
      /* Desktop Screen (992px - 1599px) */
      @media (min-width: 992px) {
        .app-header { display: none !important; }
        .app-sidebar {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          bottom: 0 !important;
          width: 250px !important;
          height: 100vh !important;
          transform: translateX(0) !important;
          overflow-y: auto;
        }
        .app-sidebar-right {
          position: fixed !important;
          top: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 260px !important;
          height: 100vh !important;
          transform: translateX(0) !important;
          overflow-y: auto;
        }
        .app-main {
          margin-left: 250px !important;
          margin-right: 260px !important;
          margin-top: 0 !important;
          padding: 0.5rem !important;
        }
        .app-main .container-fluid {
          padding-left: 0.25rem !important;
          padding-right: 0.25rem !important;
        }
      }

      /* Ultra-Wide Screen (>= 1600px) */
      @media (min-width: 1600px) {
        .app-sidebar { width: 300px !important; }
        .app-sidebar-right { width: 300px !important; }
        .app-main { 
          margin-left: 300px !important;
          margin-right: 300px !important; 
        }
      }

      .media-item {
        cursor: pointer;
        transition: background-color 0.2s;
      }
      .media-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      /* ========================================== */
      /* DROPDOWN & NAVIGASI                        */
      /* ========================================== */
      #containerNavagasi {
        overflow: visible !important;
      }
      #containerNavagasi .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 9999 !important;
        min-width: 200px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }
      .col-md-3.order-md-2 {
        position: relative;
        z-index: 10;
      }
      #containerNavagasi .container-fluid {
        padding: 0 5px !important;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
      #containerNavagasi .nav-link {
        padding: 5px 8px !important;
      }
      @media (max-width: 1200px) {
        #containerNavagasi .d-none.d-md-inline {
          display: none !important;
        }
      }

@media (min-width: 768px) {
    #modalDinamis .modal-dialog {
        width: 75vw !important;
        max-width: 75vw !important;
        min-width: 75vw !important;
        margin: 30px auto !important;
    }

    #modalDinamis .modal-content {
        max-height: 85vh !important;
    }

    #modalDinamis .modal-body {
        max-height: calc(85vh - 60px) !important;
        overflow-y: auto !important;
    }
}

/* ========================================== */
/* MODAL DINAMIS - HP / SMARTPHONE (< 768px)  */
/* ========================================== */
@media (max-width: 767.98px) {
    #modalDinamis {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }

    /* Kunci 100% Layar Penuh di HP */
    #modalDinamis .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #modalDinamis .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important; /* Hilangkan sudut melengkung agar pas penuh layar */
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #modalDinamis .modal-body {
        flex: 1 1 auto !important;
        height: calc(100vh - 55px) !important;
        max-height: calc(100vh - 55px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px !important;
    }
}    

/* Background Gradasi Hitam ke Biru Gelap Presisi Mobile Header */
.app-header.custom-mobile-header {
  background: linear-gradient(135deg, #0a0c10 0%, #101828 50%, #0d47a1 100%) !important;
  border-bottom: 1px solid rgba(13, 110, 253, 0.25) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
  height: 56px !important;
}

/* Memaksa Semua Elemen Tetap Sejajar 1 Baris */
.app-header.custom-mobile-header .container-fluid {
  flex-wrap: nowrap !important;
}

/* Styling Teks Brand Agar Tidak Bertumpuk / Pindah Baris */
.app-header.custom-mobile-header .brand-text {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 1.2rem !important; /* Proporsional untuk layar HP */
  white-space: nowrap !important; /* Mencegah teks melipat ke bawah */
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* Menampilkan '...' jika layar sangat sempit */
}

/* Memastikan Kontras Ikon Kanan Tetap Terang */
.app-header.custom-mobile-header .bi-folder-plus,
.app-header.custom-mobile-header .bi-person-bounding-box {
  filter: drop-shadow(0 0 4px rgba(255, 77, 77, 0.4));
}


/* ===================================================
   GLOBAL THIN SCROLLBAR (Chrome, Edge, Safari, Opera)
   =================================================== */
::-webkit-scrollbar {
    width: 5px;  /* Ketebalan scrollbar vertikal */
    height: 5px; /* Ketebalan scrollbar horizontal (jika ada) */
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* Latar belakang jalur scroll */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* Warna batang scroll */
    border-radius: 10px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4); /* Warna saat kursor di-hover */
}

/* ===================================================
   GLOBAL THIN SCROLLBAR (Firefox)
   =================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2);
}