/**
 * Theme DashDark X - Berdasarkan template/template (React DashDark X)
 * 
 * Sumber Aset Template:
 * - Warna: template/src/theme/colors.ts & palette.ts
 * - Shadows: template/src/theme/shadows.ts
 * - Typography: template/src/theme/typography.ts
 * - Components: template/src/theme/components/
 * - Font: template/src/assets/fonts/mona-sans/
 * - Icon: template/public/dashdarkx.ico
 * 
 * Warna Utama:
 * - Sidebar: #081028 (blue[900]), border #0B1739 (blue[700])
 * - Primary: #CB3CFF (purple[500])
 * - Card BG: #0B1739 (blue[700])
 * - Body BG: #081028 (blue[900])
 * 
 * Shadows:
 * - Card: 0px 8px 28px 0px rgba(1, 5, 17, 0.3)
 * - Input: 0px 2px 4px 0px rgba(1, 5, 17, 0.2)
 */
body {
  font-family: 'Mona Sans', 'Work Sans', sans-serif !important;
}

/* Scrollbar styles from template/src/theme/styles/scrollbar.ts */
@supports (-moz-appearance:none) {
  * {
    scrollbar-color: #AEB9E1 transparent;
  }
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  -webkit-appearance: none;
  background-color: transparent;
  visibility: hidden;
}

*::-webkit-scrollbar-track {
  margin: 0;
}

*::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #0B1739; /* blue[700] */
  visibility: hidden;
}

*:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

/* Sidebar - sesuai template DashDark X - HARUS di awal untuk base styles */
#sidenav-main {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  background: var(--sidebar-bg, #081028) !important;
  border-color: var(--sidebar-border, #0B1739) !important;
  border-right: 1px solid var(--sidebar-border, #0B1739) !important;
  z-index: 1050 !important;
  box-shadow: 0px 8px 28px 0px rgba(1, 5, 17, 0.3) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  position: fixed !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(0px) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override untuk semua kemungkinan inline styles - HARUS di akhir */
#sidenav-main[style],
body #sidenav-main,
body #sidenav-main[style],
html body #sidenav-main,
html body #sidenav-main[style],
html body #sidenav-main[style*="width"],
html body #sidenav-main[style*="15rem"],
html body #sidenav-main[style*="240px"] {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  background: var(--sidebar-bg, #081028) !important;
  border-color: var(--sidebar-border, #0B1739) !important;
  border-right: 1px solid var(--sidebar-border, #0B1739) !important;
  z-index: 1050 !important;
  box-shadow: 0px 8px 28px 0px rgba(1, 5, 17, 0.3) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  position: fixed !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(0px) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Override Bootstrap classes */
#sidenav-main.border-radius-lg,
#sidenav-main.border-radius-lg[style] {
  border-radius: 0 !important;
}
#sidenav-main.fixed-start,
#sidenav-main.fixed-start[style] {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
}
#sidenav-main.bg-white,
#sidenav-main.bg-white[style] {
  background: var(--sidebar-bg, #081028) !important;
}

#sidenav-main .sidenav-header {
  background: var(--sidebar-bg, #081028) !important;
  padding: 1.25rem 0.875rem 1rem 0.875rem !important;
  border-bottom: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  min-height: auto !important;
}

#sidenav-main .sidenav-header .navbar-brand {
  color: var(--sidebar-text, #ffffff) !important;
  padding: 0 !important;
  width: 100% !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  transition: opacity 0.2s ease !important;
}

#sidenav-main .sidenav-header .navbar-brand:hover {
  opacity: 0.9 !important;
}

#sidenav-main .sidenav-header .navbar-brand .sidenav-logo-img {
  height: 24px !important;
  width: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

#sidenav-main .sidenav-header .navbar-brand .sidenav-logo-initial {
  font-size: 1.5rem !important;
  color: var(--sidebar-text, #ffffff) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#sidenav-main .sidenav-header .navbar-brand .sidenav-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--sidebar-text, #ffffff) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sidenav-main .sidenav-header .navbar-brand span {
  color: var(--sidebar-text, #ffffff) !important;
}

#sidenav-main .collapse,
#sidenav-main .navbar-nav,
#sidenav-main .nav-sm {
  background: var(--sidebar-bg, #081028) !important;
}
#sidenav-main .navbar-collapse {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

/* Remove Perfect Scrollbar styles jika ada */
#sidenav-main .navbar-collapse.ps--active-y,
#sidenav-main .navbar-collapse .ps__rail-x,
#sidenav-main .navbar-collapse .ps__rail-y,
#sidenav-main .navbar-collapse .ps__thumb-x,
#sidenav-main .navbar-collapse .ps__thumb-y {
  display: none !important;
}

/* Sidebar menu list - sesuai template DashDark X */
#sidenav-main .sidenav-menu-list {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Sidebar nav links - sesuai template DashDark X (opacity 0.3 untuk non-active, 1 untuk active) */
#sidenav-main .navbar-nav > .nav-item > .nav-link {
  color: var(--sidebar-text, #ffffff) !important;
  opacity: 0.3 !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border-left: none !important;
  padding: 0.75rem 1rem !important;
  margin: 0.125rem 0.5rem !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  position: relative !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* Icon styling untuk top level menu */
#sidenav-main .navbar-nav > .nav-item > .nav-link iconify-icon {
  font-size: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 0.3 !important;
  transition: all 0.2s ease !important;
}

/* Active state untuk top level menu - sesuai template */
#sidenav-main .navbar-nav > .nav-item > .nav-link.active {
  background: transparent !important;
  color: var(--primary-color, #CB3CFF) !important;
  opacity: 1 !important;
  border-left: none !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active .nav-link-text {
  color: var(--primary-color, #CB3CFF) !important;
  font-weight: 500 !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active iconify-icon {
  color: var(--primary-color, #CB3CFF) !important;
  opacity: 1 !important;
}

/* Hover state untuk top level menu */
#sidenav-main .navbar-nav > .nav-item > .nav-link:hover {
  background: rgba(11, 23, 57, 0.3) !important;
  color: var(--sidebar-text, #ffffff) !important;
  opacity: 0.6 !important;
  border-left: none !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link:hover iconify-icon {
  opacity: 0.6 !important;
}

/* Collapse menu hover */
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"]:hover {
  background: rgba(11, 23, 57, 0.3) !important;
  color: var(--sidebar-text, #ffffff) !important;
  opacity: 0.6 !important;
}

#sidenav-main .nav-sm .nav-link {
  opacity: 0.3 !important;
  padding: 0.625rem 1.5rem 0.625rem 2.5rem !important;
  margin: 0.125rem 0.875rem !important;
  background: transparent !important;
  border-left: 4px solid transparent !important;
  color: var(--template-card-text-secondary, #AEB9E1) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

#sidenav-main .nav-sm .nav-link:hover {
  background: rgba(11, 23, 57, 0.5) !important;
  opacity: 0.6 !important;
  border-left: 4px solid transparent !important;
  color: var(--sidebar-text, #ffffff) !important;
}

#sidenav-main .nav-sm .nav-link.active {
  opacity: 1 !important;
  color: var(--sidebar-text, #ffffff) !important;
  background: rgba(10, 19, 48, 1) !important; /* info.dark = #0A1330 */
  border-left: 4px solid var(--primary-color, #CB3CFF) !important;
}

#sidenav-main .nav-sm .nav-link.active .sidenav-normal {
  color: var(--sidebar-text, #ffffff) !important;
  font-weight: 500 !important;
}

#sidenav-main .nav-sm .nav-link.active .sidenav-mini-icon {
  color: var(--sidebar-text, #ffffff) !important;
  opacity: 1 !important;
}

/* Nested submenu (ms-3) - untuk submenu dalam submenu */
#sidenav-main .nav-sm .nav-sm .nav-link {
  padding-left: 3.5rem !important;
  margin-left: 0.875rem !important;
}
#sidenav-main .nav-sm .nav-sm .nav-link.active {
  background: rgba(10, 19, 48, 1) !important;
  border-left: 4px solid var(--primary-color, #CB3CFF) !important;
}

/* Collapse arrow - sesuai template DashDark X */
#sidenav-main .nav-link[data-bs-toggle="collapse"] {
  position: relative !important;
}

#sidenav-main .nav-link[data-bs-toggle="collapse"]::after {
  content: "" !important;
  display: none !important;
}

/* Collapse arrow iconify - sesuai template */
#sidenav-main .sidenav-collapse-arrow {
  margin-left: auto !important;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease, color 0.2s ease !important;
  font-size: 1rem !important;
  opacity: 0.3 !important;
  color: var(--sidebar-text, #ffffff) !important;
  flex-shrink: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Expanded state */
#sidenav-main .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .sidenav-collapse-arrow {
  transform: rotate(90deg) !important;
  opacity: 0.6 !important;
}

/* Hover state */
#sidenav-main .nav-link[data-bs-toggle="collapse"]:hover .sidenav-collapse-arrow {
  opacity: 0.6 !important;
}

/* Active state */
#sidenav-main .nav-link[data-bs-toggle="collapse"].active .sidenav-collapse-arrow,
#sidenav-main .nav-link[data-bs-toggle="collapse"][aria-expanded="true"].active .sidenav-collapse-arrow {
  color: var(--primary-color, #CB3CFF) !important;
  opacity: 1 !important;
}

/* Submenu collapse arrow */
#sidenav-main .nav-sm .sidenav-collapse-arrow {
  font-size: 0.875rem !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
}

/* Sidebar header - sesuai template */
#sidenav-main .sidenav-header .navbar-brand {
  color: var(--sidebar-text, #ffffff) !important;
}

#sidenav-main .sidenav-header .navbar-brand span {
  color: var(--sidebar-text, #ffffff) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

#sidenav-main ul,
#sidenav-main li,
#sidenav-main .navbar-collapse,
#sidenav-main .navbar-nav > li,
#sidenav-main .nav-item {
  background: var(--sidebar-bg) !important;
}

#sidenav-main .nav-sm,
#sidenav-main .nav-sm ul {
  background: var(--sidebar-bg) !important;
}

#sidenav-main .horizontal.dark,
#sidenav-main hr.horizontal.dark {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  margin: 0.5rem 0 !important;
  height: 1px !important;
}

/* Iconify - ukuran & align seperti template (sidebar & navbar) */
#sidenav-main iconify-icon,
#sidenav-main .nav-link iconify-icon {
  font-size: 1.25rem !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  opacity: inherit !important;
  color: inherit !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  align-items: center !important;
  justify-content: center !important;
}
#sidenav-main .sidenav-mini-icon,
#sidenav-main iconify-icon.sidenav-mini-icon {
  font-size: 0.875rem !important;
  opacity: inherit !important;
  color: inherit !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
}
#navbarBlur iconify-icon {
  font-size: 1.25rem !important;
  vertical-align: middle !important;
  display: inline-flex !important;
}

/* Sidebar logo wrap - untuk layout lama (tidak digunakan lagi) */
#sidenav-main .sidenav-logo-wrap {
  width: 130px !important;
  height: 130px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.75rem !important;
}

/* Logo image di header - override untuk layout baru */
#sidenav-main .sidenav-header .sidenav-logo-img.d-none {
  display: none !important;
}

#sidenav-main .sidenav-header .sidenav-logo-initial.d-none {
  display: none !important;
}

/* Sidebar Search Box - sesuai template */
#sidenav-main .sidenav-search-box {
  padding: 0.5rem 0.875rem 0.75rem 0.875rem !important;
}

#sidenav-main .sidenav-search-input {
  background: rgba(11, 23, 57, 0.5) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
}

#sidenav-main .sidenav-search-input:focus {
  background: rgba(11, 23, 57, 0.8) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  outline: none !important;
  box-shadow: none !important;
}

#sidenav-main .sidenav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Sidebar Header - styling sudah diupdate di atas */

/* Sidebar Profile Item - sesuai template */
#sidenav-main .nav-link.d-flex.flex-column {
  opacity: 1 !important;
  padding: 0.75rem 0.875rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease !important;
}

#sidenav-main .nav-link.d-flex.flex-column:hover {
  background: rgba(11, 23, 57, 0.5) !important;
}

#sidenav-main .nav-link.d-flex.flex-column .text-white {
  color: var(--sidebar-text, #ffffff) !important;
}

#sidenav-main .nav-link.d-flex.flex-column .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Sidebar Logout Button - sesuai template */
#sidenav-main .btn-primary.w-100 {
  background: var(--primary-color, #CB3CFF) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#sidenav-main .btn-primary.w-100:hover {
  background: linear-gradient(195deg, var(--primary-color, #CB3CFF), #A458F6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(203, 60, 255, 0.3) !important;
}

#sidenav-main .btn-primary.w-100 iconify-icon {
  transition: transform 0.2s ease !important;
}

#sidenav-main .btn-primary.w-100:hover iconify-icon {
  transform: translateX(4px) !important;
}

/* Sidebar close icon */
#sidenav-main .sidenav-close-icon {
  font-size: 1.5rem !important;
  color: var(--sidebar-text, #ffffff) !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}
#sidenav-main .sidenav-close-icon:hover {
  opacity: 1 !important;
}

/* Sidebar icon colors untuk infrastruktur */
#sidenav-main .sidenav-icon-olt {
  color: #dc3545 !important;
}
#sidenav-main .sidenav-icon-odc {
  color: #ff6600 !important;
}
#sidenav-main .sidenav-icon-odp {
  color: #ffc107 !important;
}
#sidenav-main .sidenav-icon-closure {
  color: #9c27b0 !important;
}
#sidenav-main .sidenav-icon-tiang {
  color: #ffffff !important;
}

/* Sidebar notification badge */
#sidenav-main .sidenav-notification-badge,
#sidenav-main .sidenav-notification-badge[style] {
  font-size: 0.65rem !important;
  padding: 0.25rem 0.4rem !important;
  display: inline-block !important;
}
#sidenav-main .sidenav-notification-badge.d-none,
#sidenav-main .sidenav-notification-badge.d-none[style],
#sidenav-main .sidenav-notification-badge[style*="display: none"],
#sidenav-main .sidenav-notification-badge[style*="display:none"] {
  display: none !important;
}
#sidenav-main .sidenav-notification-badge.d-inline-block {
  display: inline-block !important;
}

/* Nav link text - sesuai template DashDark X */
#sidenav-main .nav-link-text {
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
}

/* Active nav link text */
#sidenav-main .nav-link.active .nav-link-text {
  font-weight: 500 !important;
  color: var(--primary-color, #CB3CFF) !important;
}
#sidenav-main .sidenav-normal {
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.5 !important;
}

/* Logout link */
#sidenav-main .nav-link.text-danger {
  color: #ef5350 !important;
  opacity: 0.7 !important;
  margin-top: 0.5rem !important;
}
#sidenav-main .nav-link.text-danger:hover {
  opacity: 1 !important;
  color: #ef5350 !important;
  background: rgba(239, 83, 80, 0.1) !important;
}
#sidenav-main .nav-link.text-danger iconify-icon {
  color: #ef5350 !important;
  opacity: inherit !important;
}
#sidenav-main .nav-link.text-danger .nav-link-text {
  color: #ef5350 !important;
}

/* Override inline styles dengan CSS yang lebih spesifik - HARUS di akhir untuk override semua */
@media (min-width: 1200px) {
  /* Override semua kemungkinan inline styles di desktop */
  html body #sidenav-main[style],
  html body #sidenav-main[style*="width"],
  html body #sidenav-main[style*="max-width"],
  html body #sidenav-main[style*="min-width"],
  html body #sidenav-main[style*="15rem"],
  html body #sidenav-main[style*="240px"],
  html body #sidenav-main[style*="width: 15rem"],
  html body #sidenav-main[style*="width:15rem"],
  html body #sidenav-main[style*="width: 240px"],
  html body #sidenav-main[style*="width:240px"],
  html body #sidenav-main[style*="transform"],
  html body #sidenav-main[style*="visibility"],
  html body #sidenav-main[style*="opacity"],
  html body #sidenav-main[style*="display"] {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    transform: translateX(0px) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    background: var(--sidebar-bg, #081028) !important;
    border-right: 1px solid var(--sidebar-border, #0B1739) !important;
    z-index: 1050 !important;
  }
}

/* Scrollbar styling untuk sidebar */
#sidenav-main::-webkit-scrollbar {
  width: 6px !important;
}
#sidenav-main::-webkit-scrollbar-track {
  background: transparent !important;
}
#sidenav-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
}
#sidenav-main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Navbar nav - padding dan spacing */
#sidenav-main .navbar-nav {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Nav item dengan mt-3 (untuk logout) */
#sidenav-main .nav-item.mt-3 {
  margin-top: 1rem !important;
}

/* Nav link dengan icon dan text - alignment */
#sidenav-main .nav-link iconify-icon:first-of-type {
  margin-right: 0 !important;
}
#sidenav-main .nav-link .ms-1 {
  margin-left: 0.25rem !important;
}

/* Submenu ul - padding dan margin */
#sidenav-main .nav-sm {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}
#sidenav-main .nav-sm .nav-sm {
  padding-left: 0 !important;
}

/* Active state untuk parent collapse - sesuai template DashDark X */
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"],
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"].active {
  opacity: 1 !important;
  color: var(--primary-color, #CB3CFF) !important;
  background: transparent !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .nav-link-text,
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"].active .nav-link-text {
  color: var(--primary-color, #CB3CFF) !important;
  font-weight: 500 !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] iconify-icon:first-of-type,
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"].active iconify-icon:first-of-type {
  color: var(--primary-color, #CB3CFF) !important;
  opacity: 1 !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .sidenav-collapse-arrow,
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"].active .sidenav-collapse-arrow {
  color: var(--primary-color, #CB3CFF) !important;
  opacity: 1 !important;
}

/* Collapse transition */
#sidenav-main .collapse {
  transition: height 0.35s ease !important;
}
#sidenav-main .collapse.show {
  display: block !important;
}
#sidenav-main .collapse:not(.show) {
  display: none !important;
}

/* Nav item spacing */
#sidenav-main .nav-item {
  margin-bottom: 0 !important;
  list-style: none !important;
}
#sidenav-main .navbar-nav {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

/* Badge di sidebar */
#sidenav-main .nav-link .badge,
#sidenav-main .nav-link .badge[style] {
  margin-left: auto !important;
  font-size: 0.65rem !important;
  padding: 0.25rem 0.4rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.625rem !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#sidenav-main .nav-link .badge.d-none,
#sidenav-main .nav-link .badge.d-none[style],
#sidenav-main .nav-link .badge[style*="display: none"],
#sidenav-main .nav-link .badge[style*="display:none"] {
  display: none !important;
}
#sidenav-main .nav-link .badge.d-inline-block {
  display: inline-flex !important;
}
#sidenav-main .nav-link.active .badge {
  background-color: rgba(239, 83, 80, 0.2) !important;
  color: #ef5350 !important;
}
#sidenav-main .nav-link .badge + .sidenav-collapse-arrow {
  margin-left: 0.5rem !important;
}
#sidenav-main .nav-sm .nav-link .badge {
  font-size: 0.6rem !important;
  padding: 0.2rem 0.35rem !important;
  min-width: 1.1rem !important;
  height: 1.1rem !important;
}

/* Nav link text - flex grow untuk push arrow ke kanan - sesuai template DashDark X */
#sidenav-main .navbar-nav > .nav-item > .nav-link .nav-link-text {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sidenav-main .nav-link .sidenav-normal {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Icon di nav-link - sesuai template DashDark X */
#sidenav-main .navbar-nav > .nav-item > .nav-link iconify-icon:first-of-type {
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icon untuk submenu */
#sidenav-main .nav-sm .nav-link iconify-icon:first-of-type {
  flex-shrink: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Body background - sesuai template */
body.theme-dashdarkx-components {
  background-color: var(--template-body-bg, #081028) !important;
}

html.theme-dashdarkx-components {
  background-color: var(--template-body-bg, #081028) !important;
}

/* Main content - sesuai template (padding: xs: 2, sm: 3, lg: 5) */
.main-content {
  margin-left: 0 !important;
  background-color: var(--template-body-bg, #081028) !important;
  padding: 1rem !important; /* xs: 2 = 16px */
  min-height: 100vh !important;
  color: var(--template-card-text, #ffffff) !important;
  transition: margin-left 0.3s ease !important;
}

@media (min-width: 600px) {
  .main-content {
    padding: 1.5rem !important; /* sm: 3 = 24px */
  }
}

@media (min-width: 1200px) {
  /* Sidebar selalu terlihat di desktop untuk semua role (termasuk pelanggan) - PRIORITAS TINGGI */
  body #sidenav-main,
  body.g-sidenav-show #sidenav-main,
  body.g-sidenav-pinned #sidenav-main,
  body:not(.g-sidenav-hidden) #sidenav-main,
  html body #sidenav-main,
  html body.g-sidenav-show #sidenav-main,
  html body.g-sidenav-pinned #sidenav-main {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    background: var(--sidebar-bg, #081028) !important;
    border-right: 1px solid var(--sidebar-border, #0B1739) !important;
  }
  
  /* Main content margin - selalu ada margin di desktop */
  body .main-content,
  body.g-sidenav-show .main-content,
  body.g-sidenav-pinned .main-content,
  body:not(.g-sidenav-hidden) .main-content {
    margin-left: 300px !important;
  }
  
  .main-content {
    padding: 2.5rem !important; /* lg: 5 = 40px */
  }
}

@media (max-width: 1199.98px) {
  #sidenav-main {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
  }
  #sidenav-main.show {
    transform: translateX(0) !important;
  }
  .main-content {
    margin-left: 0 !important;
  }
}

/* Container fluid - spacing sesuai template */
.theme-dashdarkx-components .main-content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Content spacing - sesuai template (spacing: xs: 2.5, sm: 3, lg: 3.75) */
/* Spacing diterapkan pada direct children dari main-content */
.theme-dashdarkx-components .main-content > #navbarBlur + .container-fluid,
.theme-dashdarkx-components .main-content > .navbar-main + .container-fluid {
  margin-top: 1.25rem !important; /* xs: 2.5 = 20px */
}

@media (min-width: 600px) {
  .theme-dashdarkx-components .main-content > #navbarBlur + .container-fluid,
  .theme-dashdarkx-components .main-content > .navbar-main + .container-fluid {
    margin-top: 1.5rem !important; /* sm: 3 = 24px */
  }
}

@media (min-width: 1200px) {
  .theme-dashdarkx-components .main-content > #navbarBlur + .container-fluid,
  .theme-dashdarkx-components .main-content > .navbar-main + .container-fluid {
    margin-top: 1.875rem !important; /* lg: 3.75 = 30px */
  }
}

/* Primary buttons & gradient - DashDark X purple */
.bg-gradient-primary:not([type="submit"]):not(.w-100),
.btn-primary:not([type="submit"]):not(.w-100),
.btn.bg-gradient-primary:not([type="submit"]):not(.w-100) {
  background: linear-gradient(195deg, var(--primary-color), var(--primary-color)) !important;
}

/* Tombol CARI navbar - purple agar selaras tema */
button.btn.bg-gradient-primary[type="submit"],
.btn.bg-gradient-primary[type="submit"].w-100,
button.btn.bg-gradient-primary.w-100,
#btnQuickSearch.btn-primary,
#navbarBlur .btn-primary[type="button"] {
  background: linear-gradient(195deg, var(--primary-color), #A458F6) !important;
}
button.btn.bg-gradient-primary[type="submit"]:hover,
.btn.bg-gradient-primary[type="submit"].w-100:hover,
button.btn.bg-gradient-primary.w-100:hover,
#btnQuickSearch.btn-primary:hover,
#navbarBlur .btn-primary[type="button"]:hover {
  background: linear-gradient(195deg, #A458F6, #8A31F2) !important;
}

.card-background-mask-primary {
  background: linear-gradient(195deg, var(--primary-color), #A458F6) !important;
}

/* Theme init - optimized: body is visible by default, no flash */
body {
  visibility: visible !important;
}
body.theme-initialized {
  visibility: visible !important;
}

/* Navbar visibility */
#navbarBlur,
#navbarBlur .container-fluid,
#navbarBlur .d-flex,
#monthFilterForm,
#monthSelect,
#quickSearch,
#btnQuickSearch {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#monthFilterForm,
#monthSelect,
#quickSearch,
#btnQuickSearch {
  display: inline-block !important;
}

/* Z-index */
.card,
.content-section {
  z-index: 1 !important;
  position: relative;
}
#navbarBlur,
#navbarBlur .navbar,
.navbar-main {
  z-index: 10 !important;
  position: relative;
}
#navbarBlur .container-fluid,
#navbarBlur .d-flex,
#navbarBlur .input-group,
#navbarBlur .form-control,
#navbarBlur .btn:not(.dropdown-toggle),
#navbarBlur form,
#navbarBlur select {
  position: relative;
}
#navbarBlur .dropdown-menu.show {
  z-index: 1055 !important;
  position: absolute !important;
}

/* Navbar - sesuai template (transparent background, spacing sesuai template) */
.theme-dashdarkx-components .navbar-main,
.theme-dashdarkx-components #navbarBlur {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1.25rem !important; /* xs: 2.5 = 20px spacing */
}

@media (min-width: 600px) {
  .theme-dashdarkx-components .navbar-main,
  .theme-dashdarkx-components #navbarBlur {
    margin-bottom: 1.5rem !important; /* sm: 3 = 24px */
  }
}

@media (min-width: 1200px) {
  .theme-dashdarkx-components .navbar-main,
  .theme-dashdarkx-components #navbarBlur {
    margin-bottom: 1.875rem !important; /* lg: 3.75 = 30px */
  }
}

.theme-dashdarkx-components .navbar-main .container-fluid,
.theme-dashdarkx-components #navbarBlur .container-fluid {
  background: transparent !important;
  padding: 0 !important;
}

/* Text colors di navbar */
.theme-dashdarkx-components .navbar-main,
.theme-dashdarkx-components #navbarBlur {
  color: var(--template-card-text, #ffffff) !important;
}

.theme-dashdarkx-components .navbar-main .text-dark,
.theme-dashdarkx-components #navbarBlur .text-dark {
  color: var(--template-card-text, #ffffff) !important;
}

.theme-dashdarkx-components .navbar-main .text-muted,
.theme-dashdarkx-components #navbarBlur .text-muted {
  color: var(--template-card-text-secondary, #AEB9E1) !important;
}

/* Footer - sesuai template */
.theme-dashdarkx-components .footer {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 1.25rem !important; /* xs: 2.5 = 20px spacing */
  color: var(--template-card-text-secondary, #AEB9E1) !important;
}

@media (min-width: 600px) {
  .theme-dashdarkx-components .footer {
    margin-top: 1.5rem !important; /* sm: 3 = 24px */
  }
}

@media (min-width: 1200px) {
  .theme-dashdarkx-components .footer {
    margin-top: 1.875rem !important; /* lg: 3.75 = 30px */
  }
}

.theme-dashdarkx-components .footer .text-muted {
  color: var(--template-card-text-secondary, #AEB9E1) !important;
}

.theme-dashdarkx-components .footer .container-fluid {
  padding: 0 !important;
}

/* Topbar styling - sesuai template DashDark X */
.topbar,
.d-flex.flex-column.flex-md-row.align-items-center.justify-content-between {
  margin-bottom: 1.25rem !important;
}

@media (min-width: 600px) {
  .topbar,
  .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between {
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 1200px) {
  .topbar,
  .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between {
    margin-bottom: 1.875rem !important;
  }
}

/* Profile menu dropdown styling */
.dropdown-menu {
  border-radius: 0.5rem !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  transition: background-color 0.2s ease !important;
}

.dropdown-item:hover {
  background-color: rgba(203, 60, 255, 0.1) !important;
}

.dropdown-item.text-danger:hover {
  background-color: rgba(239, 83, 80, 0.1) !important;
}

/* Topbar button styling */
.btn-link {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.btn-link:hover {
  opacity: 0.7 !important;
}

/* Topbar profile button - sesuai template */
.btn-link.d-flex.flex-column {
  gap: 0.25rem !important;
}

/* Topbar mobile logo styling */
.d-lg-none img,
.d-lg-none span {
  transition: opacity 0.2s ease !important;
}

.d-lg-none a:hover img,
.d-lg-none a:hover span {
  opacity: 0.8 !important;
}

/* Topbar desktop title styling */
h5.d-none.d-lg-block {
  color: var(--template-card-text, #ffffff) !important;
  font-family: 'Mona Sans', 'Work Sans', sans-serif !important;
}

/* Notification badge positioning */
.position-relative .badge {
  top: -2px !important;
  right: -2px !important;
}

/* Profile menu dropdown header */
.dropdown-menu li.px-3.py-2:first-child {
  background: rgba(203, 60, 255, 0.05) !important;
}

/* Profile menu avatar in dropdown */
.dropdown-menu .d-flex.align-items-center.gap-2 {
  padding: 0.5rem 0 !important;
}

/* Sidebar divider styling */
#sidenav-main hr.horizontal.dark {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  margin: 0.5rem 0.875rem !important;
  height: 1px !important;
  border: none !important;
}

/* Sidebar search input focus state */
#sidenav-main .sidenav-search-input:focus {
  box-shadow: 0 0 0 2px rgba(203, 60, 255, 0.2) !important;
}

/* Month filter form styling */
#monthFilterForm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

#monthSelect {
  background: transparent !important;
  border: none !important;
  color: var(--template-card-text, #ffffff) !important;
  font-weight: 600 !important;
}

#monthSelect:focus {
  outline: none !important;
  box-shadow: none !important;
}

#monthSelect option {
  background: var(--template-body-bg, #081028) !important;
  color: var(--template-card-text, #ffffff) !important;
}

/* Month filter container */
.d-flex.align-items-center.flex-wrap.gap-2.mb-3 {
  color: var(--template-card-text-secondary, #AEB9E1) !important;
}

.d-flex.align-items-center.flex-wrap.gap-2.mb-3 .text-warning {
  color: #ffc107 !important;
}

/* Quick search input styling */
#quickSearch {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #d2d6da !important;
  color: #212529 !important;
}

#quickSearch::placeholder {
  color: #6c757d !important;
}

#quickSearch:focus {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--primary-color, #CB3CFF) !important;
  box-shadow: 0 0 0 3px rgba(203, 60, 255, 0.1) !important;
  color: #212529 !important;
}

/* Quick search input group */
.input-group {
  transition: all 0.3s ease !important;
}

.input-group:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--primary-color, #CB3CFF) !important;
}

/* Quick search button */
#btnQuickSearch {
  background: linear-gradient(195deg, var(--primary-color, #CB3CFF), #A458F6) !important;
  color: #ffffff !important;
  border: none !important;
}

#btnQuickSearch:hover {
  background: linear-gradient(195deg, #A458F6, #8A31F2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(203, 60, 255, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .d-flex.flex-column.flex-md-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .d-flex.flex-column.flex-md-row > div:last-child {
    margin-top: 1rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Ensure proper spacing for navbar content */
.main-content > .d-flex.flex-column.flex-md-row {
  margin-bottom: 1.25rem !important;
}

@media (min-width: 600px) {
  .main-content > .d-flex.flex-column.flex-md-row {
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 1200px) {
  .main-content > .d-flex.flex-column.flex-md-row {
    margin-bottom: 1.875rem !important;
  }
}

/* Sidebar profile item hover effect */
#sidenav-main .nav-link.d-flex.flex-column:hover {
  background: rgba(11, 23, 57, 0.5) !important;
  border-radius: 0.5rem !important;
}

/* Sidebar logout button container */
#sidenav-main .px-3.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Ensure sidebar search box doesn't interfere with menu */
#sidenav-main .sidenav-search-box {
  position: relative !important;
  z-index: 1 !important;
}

/* Sidebar navbar collapse - ensure proper flex layout */
#sidenav-main .navbar-collapse {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

/* Remove Perfect Scrollbar elements */
#sidenav-main .navbar-collapse .ps__rail-x,
#sidenav-main .navbar-collapse .ps__rail-y,
#sidenav-main .navbar-collapse .ps__thumb-x,
#sidenav-main .navbar-collapse .ps__thumb-y {
  display: none !important;
  visibility: hidden !important;
}

/* Sidebar menu list - ensure proper spacing */
#sidenav-main .navbar-nav:not(:last-child) {
  margin-bottom: 0 !important;
}

/* Topbar spacing adjustments */
.d-flex.flex-column.flex-md-row.align-items-center.justify-content-between.w-100 {
  margin-bottom: 1.25rem !important;
}

@media (min-width: 600px) {
  .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between.w-100 {
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 1200px) {
  .d-flex.flex-column.flex-md-row.align-items-center.justify-content-between.w-100 {
    margin-bottom: 1.875rem !important;
  }
}

/* Notification dropdown styling */
.dropdown-menu.shadow-lg {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Profile menu dropdown header avatar */
.dropdown-menu li.px-3.py-2 .d-flex.align-items-center.gap-2 {
  padding: 0.5rem 0 !important;
}

/* Ensure iconify icons are properly aligned */
iconify-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Mobile sidebar toggle button styling */
#mobileSidebarToggle {
  color: var(--template-card-text, #ffffff) !important;
}

#mobileSidebarToggle:hover {
  opacity: 0.7 !important;
}

/* Desktop title color */
h5.d-none.d-lg-block.mb-0 {
  color: var(--template-card-text, #ffffff) !important;
}

/* Quick search container spacing */
.d-flex.align-items-center.justify-content-start.mb-3:last-child {
  margin-bottom: 0 !important;
}