/* ============================================
   File: modern-sidebar-fixes.css
   Deskripsi: Mengatur layout utama, terutama untuk sidebar dinamis.
   ============================================ */

/* ============== BASE ============== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ============== LAYOUT WRAPPER ============== */
.layout-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ============== LAYOUT PAGE (KONTEN UTAMA) ============== */
.layout-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0; /* Mencegah flex item meluap */
  /* Transisi untuk margin-left agar pergeseran konten halus */
  transition: margin-left 0.28s ease-in-out;
  margin-top: -67px;
}

/* State default / role lain (non-Pengusul) - sidebar collapsed 70px */
@media (min-width: 1200px) {
  .layout-page:not(.sidebar-collapsed-content):not(.sidebar-expanded-content) {
    margin-left: 70px; /* Sidebar width when collapsed */
    margin-right: 45px;
  }
}

/* Role 'Pengusul' saat sidebar collapsed (70px) */
@media (min-width: 1200px) {
  .layout-page.sidebar-collapsed-content {
    margin-left: 70px !important;
    margin-right: 45px !important;
  }
}

/* Role 'Pengusul' saat sidebar expanded (260px) */
@media (min-width: 1200px) {
  .layout-page.sidebar-expanded-content {
    margin-left: 260px !important;
    margin-right: 45px !important; /* Keep right margin consistent */
  }
}

/* Di layar kecil, sidebar tidak memakan ruang */
@media (max-width: 1199px) {
  .layout-page {
    margin-left: 0;
  }
}

/* ============== ELEMEN LAINNYA ============== */
.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ============== CONTAINER - PADDING RULES ============== */
.container-fluid-full {
    width: 100%;
    padding: 0.25rem;/* Default for mobile and if no specific rule applies */
    flex: 1;
}

.layout-navbar {
  position: sticky;
  margin-bottom: 20px;
  top: 0;
  z-index: 999;
}

.content-footer {
  margin-top: auto;
}

.layout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.layout-overlay.show {
  opacity: 1;
  visibility: visible;
}

.menu-mobile-toggler {
  position: flex;
  bottom: 2rem;
  right: 4rem;
  z-index: 1060;
  display: none;
}

@media (max-width: 1199px) {
  .menu-mobile-toggler {
    display: block;
  }
}