/* Global Font Family Override */
body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
}

p, span {
  line-height: 1.7;
}

.custom-wrap-text {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.container-content {
  margin-top: 20px;
  margin-bottom: 20px;
}

.side-menu__label {
  line-height: 20px !important;
}

.app-sidebar .simplebar-content {
  padding-bottom: 0 !important;
}

.app-sidebar .side-menu__item {
  font-size: 14px;
}

/**
 * Double Menu Toggle Styles
 * Custom styles for the double menu toggle switch in main-sidebar
 */

.double-menu-toggle-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 1rem;
  gap: 0.5rem;
}

.double-menu-label {
  font-size: 0.75rem;
  color: var(--default-text-color);
  white-space: nowrap;
  font-weight: 500;
  user-select: none;
}

#double-menu-toggle {
  margin: 0 !important;
  cursor: pointer;
}

#double-menu-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark theme support */
[data-theme-mode="dark"] .double-menu-label {
  color: rgba(255, 255, 255, 0.75);
}

/* Responsive design */
@media (max-width: 992px) {
  .double-menu-toggle-container {
    padding-right: 0.5rem;
  }

  .double-menu-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .double-menu-label {
    display: none;
  }

  .double-menu-toggle-container {
    gap: 0;
  }
}

/* Animation for smooth transition */
#double-menu-toggle {
  transition: all 0.3s ease;
}

/* Hover effect */
.double-menu-toggle-container:hover .double-menu-label {
  color: var(--primary-color);
}

[data-theme-mode="dark"] .double-menu-toggle-container:hover .double-menu-label {
  color: rgba(255, 255, 255, 0.9);
}

/* Different menu styles support */
[data-vertical-style="closed"] .double-menu-toggle-container,
[data-vertical-style="icontext"] .double-menu-toggle-container,
[data-vertical-style="overlay"] .double-menu-toggle-container {
  opacity: 0.8;
}

[data-vertical-style="detached"] .double-menu-toggle-container {
  padding-right: 0.8rem;
}

/* RTL support */
[dir="rtl"] .double-menu-toggle-container {
  margin-left: 0;
  margin-right: auto;
  padding-right: 0;
  padding-left: 1rem;
}

@media (max-width: 992px) {
  [dir="rtl"] .double-menu-toggle-container {
    padding-left: 0.5rem;
  }
}

.app-sidebar {
  width: 18rem;
  /* ~320px jika 1rem = 16px */
}

.app-content {
  margin-left: 18rem;
  /* Pastikan konten tidak ketimpa */
}

.app-header {
  padding-inline-start: 20rem;
  /* 320px */
}

.app-sidebar .main-sidebar-header {
  width: 18rem;
}

.app-sidebar.sidenav-toggled {
  width: 5rem;
  /* ~80px saat collapse */
}

.app-header.sidenav-toggled {
  width: 5rem;
  /* ~80px saat collapse */
}

.app-content.sidenav-toggled {
  margin-left: 5rem;
}

/* [data-vertical-style="doublemenu"] .slide-menu.child1 {
  min-width: 18rem;
}

[data-vertical-style="doublemenu"] .app-content {
  margin-left: 18rem;
}[data-vertical-style="doublemenu"] .app-header {
  padding-inline-start: 20rem;
} */

/* Override Double Menu Mode Styles for 18rem slide menu width */
@media (min-width: 992px) {
  [data-vertical-style=overlay][data-toggled=icon-overlay-close][data-icon-overlay=open] .app-sidebar {
    width: 18rem;
  }

  [data-vertical-style=overlay][data-toggled=icon-overlay-close][data-icon-overlay=open] .app-sidebar .main-sidebar-header {
    width: 18rem;
  }

  [data-vertical-style="doublemenu"] .slide-menu.child1 {
    min-width: 18rem !important;
  }

  [data-vertical-style="doublemenu"] .side-menu__label1 {
    width: 18rem !important;
  }

  [data-vertical-style="doublemenu"] .app-header {
    padding-inline-start: 23rem !important;
  }

  [data-vertical-style="doublemenu"] .app-content {
    margin-inline-start: 23rem !important;
  }

  /* Handle closed state untuk double menu */
  [data-vertical-style="doublemenu"][data-toggled="double-menu-close"] .app-header {
    padding-inline-start: 5rem !important;
  }

  [data-vertical-style="doublemenu"][data-toggled="double-menu-close"] .app-content {
    margin-inline-start: 5rem !important;
  }
}

/* Logo Header Styles - Prevent Stretching */
.app-sidebar .main-sidebar-header .header-logo img {
  height: auto !important;
  max-height: 2.5rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Responsive Logo Styles */
@media (max-width: 991.98px) {
  .app-header .horizontal-logo .header-logo img {
    height: auto !important;
    max-height: 2rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .horizontal-logo .header-logo .toggle-logo {
    height: auto !important;
    max-height: 2rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Detached Mode Logo */
[data-vertical-style=detached] .app-header .horizontal-logo img {
  height: auto !important;
  max-height: 2rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Horizontal Layout Logo */
[data-nav-layout=horizontal] .horizontal-logo .header-logo img {
  height: auto !important;
  max-height: 2rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.card {
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0px 16px 32px rgba(33, 33, 33, 0.15);
}

.page-header:hover {
  box-shadow: 0px 16px 32px rgba(33, 33, 33, 0.15);
}

/* Page Header Styles - Reusable across pages */
.page-header {
  background: linear-gradient(135deg, #14b8a6 0%, #059669 100%);
  color: white;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.card .card-title:before {
  display: none;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="rgba(255,255,255,0.1)"/></svg>') repeat-x bottom;
  background-size: 100px 20px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

/* ====================================
   SIDEBAR STYLING - Custom Colors
   ==================================== */

/* Sidebar background white */
.app-sidebar {
    background-color: #ffffff !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
    -moz-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
    border-right: none !important;
}

.app-sidebar .main-sidebar {
  background-color: #ffffff !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  margin-bottom: 20px !important;
  margin-block-start: 0 !important;
}

/* Maintain shadow for sidebar in all states */
.app-sidebar.sticky,
.app-sidebar:before,
.app-sidebar:after {
    box-shadow: 2px 0 13px rgba(0, 0, 0, 0.03) !important;
    -webkit-box-shadow: 2px 0 13px rgba(0, 0, 0, 0.03) !important;
    -moz-box-shadow: 2px 0 13px rgba(0, 0, 0, 0.03) !important;
}

/* SimpleBar scrollbar positioning - move to right edge with 20px overlap */
.app-sidebar .simplebar-track.simplebar-vertical {
  visibility: hidden !important;
  left: auto !important;
  width: 6px !important;
  background: transparent !important;
}

.app-sidebar .simplebar-scrollbar:before {
  background: #d1d5db !important;
  opacity: 0.6 !important;
  border-radius: 10px !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

.app-sidebar .simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.8 !important;
}

.app-sidebar .simplebar-track.simplebar-vertical:hover .simplebar-scrollbar:before {
  background: #9ca3af !important;
  opacity: 1 !important;
}

/* Default menu text color - gray */
.app-sidebar .side-menu__item,
.app-sidebar .side-menu__label,
.app-sidebar .side-menu__icon {
  color: #555555 !important;
}

/* Make icon size same as text size */
.app-sidebar .side-menu__icon {
  font-size: 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  vertical-align: middle !important;
}

/* Position caret/angle icon */
.app-sidebar .side-menu__angle {
  top: 15px !important;
}

/* Make caret pink when parent menu is active/hover */
.app-sidebar .side-menu__item:hover .side-menu__angle,
.app-sidebar .side-menu__item.active .side-menu__angle,
.app-sidebar .slide.active>.side-menu__item .side-menu__angle {
  color: #DA3A96 !important;
}

.slide.has-sub.open>.side-menu__item .side-menu__angle {
  color: #DA3A96 !important;
}

/* Menu item hover and active styles with full block background */
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item.active {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border-inline-end: transparent !important;
}

.app-sidebar .side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__icon,
.app-sidebar .side-menu__item.active .side-menu__icon {
  color: #ffffff !important;
}

/* Active menu item - full block background */
.app-sidebar .slide.active>.side-menu__item,
.app-sidebar .slide.active>.side-menu__item:hover {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border-inline-end: transparent !important;
}

.app-sidebar .slide.active>.side-menu__item .side-menu__label,
.app-sidebar .slide.active>.side-menu__item .side-menu__icon {
  color: #ffffff !important;
}

/* Submenu hover and active */
.app-sidebar .slide-menu .slide>a:hover,
.app-sidebar .slide-menu .slide.active>a {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border-inline-end: transparent !important;
}

/* Full block for menu items */
.app-sidebar .side-menu__item {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px 15px !important;
  margin: 2px 0 !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

/* Ensure text and icons are white on hover/active */
.app-sidebar .side-menu__item:hover *,
.app-sidebar .side-menu__item.active *,
.app-sidebar .slide.active>.side-menu__item * {
  color: #ffffff !important;
}

/* Main sidebar header background white */
.app-sidebar .main-sidebar-header {
  background-color: #ffffff !important;
}

/* Main menu background white */
.app-sidebar .main-menu {
  background-color: #ffffff !important;
}

/* Submenu items styling */
.app-sidebar .slide-menu {
  background-color: #ffffff !important;
  padding-left: 0 !important;
}

/* Remove padding and bullets from li elements in submenu */
.app-sidebar .slide-menu li,
.app-sidebar .slide-menu .slide {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
}

.app-sidebar .slide-menu ul {
  list-style: none !important;
  list-style-type: none !important;
}

/* Force remove all bullets from child menu */
.app-sidebar .slide-menu li::before,
.app-sidebar .slide-menu li::marker {
  display: none !important;
  content: none !important;
}

/* Remove pseudo-elements from anchor tags in child menu */
.app-sidebar .slide-menu a::before,
.app-sidebar .slide-menu a::after,
.app-sidebar .slide-menu .side-menu__item::before,
.app-sidebar .slide-menu .side-menu__item::after {
  display: none !important;
  content: none !important;
}

.app-sidebar ul li,
.app-sidebar .main-menu li,
.app-sidebar .slide li {
  list-style: none !important;
  list-style-type: none !important;
}

.app-sidebar ul,
.app-sidebar .main-menu,
.app-sidebar .slide-menu {
  list-style: none !important;
  list-style-type: none !important;
}

.app-sidebar .slide-menu .side-menu__item {
  display: flex !important;
  gap: 10px !important;
  margin-left: 0 !important;
  padding-left: 30px !important;
  border-radius: 8px !important;
}

.app-sidebar .slide-menu .side-menu__item:hover,
.app-sidebar .slide-menu .side-menu__item.active {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border-inline-end: transparent !important;
}

/* Parent menu styling when submenu is open/showing */
.app-sidebar .slide.open>.side-menu__item,
.app-sidebar .slide.active.has-sub>.side-menu__item {
  background-color: #ffffff !important;
  color: #DA3A96 !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-inline-end: transparent !important;
}

.app-sidebar .slide.open>.side-menu__item::before,
.app-sidebar .slide.open>.side-menu__item::after,
.app-sidebar .slide.active.has-sub>.side-menu__item::before,
.app-sidebar .slide.active.has-sub>.side-menu__item::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

.app-sidebar .slide.open>.side-menu__item .side-menu__icon,
.app-sidebar .slide.open>.side-menu__item .side-menu__label,
.app-sidebar .slide.active.has-sub>.side-menu__item .side-menu__icon,
.app-sidebar .slide.active.has-sub>.side-menu__item .side-menu__label {
  color: #DA3A96 !important;
}

/* ====================================
   FULL WIDTH HEADER LAYOUT
   ==================================== */

/* Make header full width */
.app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding-inline-start: 0 !important;
  /* z-index: 1000 !important; */
  background-color: #461E64 !important;
}

/* Show logo in header */
.app-header .horizontal-logo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 50px !important;
}

/* Header text and icons color for dark background */


.app-header .header-link-icon {
  color: rgba(255, 255, 255, 0.6);
}

.app-header .header-link-icon:hover {
  color: #FFF !important;
  background-color: transparent !important;
}

.app-header .main-header-container {
  background-color: transparent !important;
  padding-left: 0 !important;
}

/* Dropdown menu text color - black */
.main-header-dropdown.header-profile-dropdown,
.main-header-dropdown.header-profile-dropdown * {
  color: #000000 !important;
}

.main-header-dropdown.header-profile-dropdown .dropdown-item {
  color: #000000 !important;
}

.main-header-dropdown.header-profile-dropdown .dropdown-item i {
  color: #000000 !important;
}

/* Position sidebar below header */
.app-sidebar {
  position: fixed !important;
  top: 63px !important;
  height: calc(100vh - 63px) !important;
  transition: width 0.3s ease !important;
}

/* Minimized/Collapsed Sidebar */
.app-sidebar.collapsed {
  width: 70px !important;
  /* Narrow, just for icon */
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Hide child menu labels only (inside submenus) */
.app-sidebar.collapsed .slide-menu .side-menu__label {
  display: none !important;
}

/* Show parent menu labels - positioned to the right of icon */
.app-sidebar.collapsed .main-menu>.slide>.side-menu__item .side-menu__label {
  position: fixed !important;
  left: 80px !important;
  /* Start closer to icon, overlapping sidebar edge */
  background-color: #461E64 !important;
  color: #ffffff !important;
  padding: 15px 20px !important;
  /* Extra left padding for the overlap */
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  pointer-events: auto !important;
  /* Enable hover on label itself */
  z-index: 10000 !important;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important;
  text-align: left !important;
  width: 250px !important;
}

.app-sidebar.collapsed .main-menu>.slide.has-sub>.side-menu__item .side-menu__label {
  border-radius: 10px 10px 0 0 !important;
}

/* Show label on hover over menu item OR label itself */
.app-sidebar.collapsed .main-menu>.slide>.side-menu__item:hover .side-menu__label,
.app-sidebar.collapsed .main-menu>.slide>.side-menu__item .side-menu__label:hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep label visible when hovering over the label */
.app-sidebar.collapsed .main-menu>.slide:hover>.side-menu__item .side-menu__label {
  opacity: 1 !important;
  visibility: visible !important;
}

.app-sidebar.collapsed .side-menu__icon {
  display: block !important;
  margin: 0 auto !important;
}

.app-sidebar.collapsed .side-menu__item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 15px 10px !important;
  border-radius: 8px !important;
}

.app-sidebar.collapsed .slide.has-sub>.side-menu__item .fe-chevron-right {
  display: none !important;
}

/* Hide all submenus when sidebar is collapsed */
.app-sidebar.collapsed .slide-menu {
  display: none !important;
  width: 250px !important;
}

/* Remove active state spacing issues */
.app-sidebar.collapsed .slide.active,
.app-sidebar.collapsed .slide.open {
  height: auto !important;
}

/* Show submenu as popup on hover */
.app-sidebar.collapsed .slide.has-sub {
  position: relative !important;
}

/* Create invisible bridge between icon and submenu */
.app-sidebar.collapsed .slide.has-sub::after {
  content: '' !important;
  position: fixed !important;
  left: 60px !important;
  width: 30px !important;
  height: 60px !important;
  z-index: 9998 !important;
  pointer-events: auto !important;
  display: none !important;
}

.app-sidebar.collapsed .slide.has-sub:hover::after {
  display: block !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu,
.app-sidebar.collapsed .slide.has-sub .slide-menu:hover {
  display: block !important;
  position: fixed !important;
  left: 80px !important;
  /* Closer to sidebar, minimal gap */
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 10px !important;
  width: 250px !important;
  max-height: 350px;
  overflow-y: auto !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  margin-top: 45px !important;
  top: auto !important;
}

/* Keep parent icon highlighted (pink background, white icon) when hovering child menu */
.app-sidebar.collapsed .slide.has-sub:hover > .side-menu__item,
.app-sidebar.collapsed .slide.has-sub .slide-menu:hover ~ .side-menu__item {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
}

.app-sidebar.collapsed .slide.has-sub:hover > .side-menu__item .side-menu__icon,
.app-sidebar.collapsed .slide.has-sub .slide-menu:hover ~ .side-menu__item .side-menu__icon {
  color: #ffffff !important;
}

.app-sidebar.collapsed .slide.has-sub:hover > .side-menu__item .side-menu__label,
.app-sidebar.collapsed .slide.has-sub .slide-menu:hover ~ .side-menu__item .side-menu__label {
  color: #ffffff !important;
}

/* Custom SimpleBar scrollbar styling for child menu popup */
.app-sidebar.collapsed .slide-menu .simplebar-track.simplebar-vertical {
  width: 6px !important;
  background: transparent !important;
}

.app-sidebar.collapsed .slide-menu .simplebar-scrollbar:before {
  background: #d1d5db !important;
  /* Light gray */
  opacity: 0.6 !important;
  border-radius: 10px !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

.app-sidebar.collapsed .slide-menu .simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.8 !important;
}

.app-sidebar.collapsed .slide-menu .simplebar-track.simplebar-vertical:hover .simplebar-scrollbar:before {
  background: #9ca3af !important;
  /* Darker gray on hover */
  opacity: 1 !important;
}

/* Keep submenu visible when hovering over the parent li */
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu {
  display: block !important;
}

/* Override for open menus - still show on hover even when open */
.app-sidebar.collapsed .slide.has-sub.open:hover .slide-menu {
  display: block !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item {
  text-align: left !important;
  padding: 10px 15px !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__label {
  display: inline !important;
  color: #555555 !important;
}

/* Ensure labels in submenu items are visible */
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item .side-menu__label {
  display: inline !important;
  color: #555555 !important;
}

/* Show icons in submenu items */
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item .side-menu__icon {
  display: inline !important;
  margin: 0 !important;
  margin-right: 8px !important;
  color: #555555 !important;
}

/* Show plain text in submenu items */
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item {
  color: #555555 !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item:hover,
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item.active,
.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item.active .side-menu__icon {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
  border-inline-end: transparent !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item:hover .side-menu__label {
  color: #ffffff !important;
}

.app-sidebar.collapsed .slide.has-sub:hover .slide-menu .side-menu__item:hover .side-menu__icon {
  color: #ffffff !important;
}

/* Adjust content when sidebar is collapsed */
.app-content.sidebar-collapsed {
  margin-left: 70px !important;
}

/* Sidebar toggle button styling */
.sidebar-collapse-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 70px !important;
  height: 4rem !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  background-color: #FFF;
  border-radius: 0 !important;
}

/* Adjust content for fixed header */
.app-content {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Adjust page wrapper */
.page {
  padding-top: 70px;
}

/* Hide logo in sidebar since it's in header */
.app-sidebar .main-sidebar-header {
    display: none !important;
}

.main-header-dropdown.header-profile-dropdown {
  width: 200px;
  border-radius: 10px;
  padding: 5px !important;
  border: 0;
}

.main-header-dropdown.header-profile-dropdown .dropdown-item {
  border: 0 !important;
  border-radius: 8px;
}

.main-header-dropdown.header-profile-dropdown .dropdown-item:hover {
  background-color: #DA3A96 !important;
  color: #ffffff !important;
}

.main-header-dropdown.header-profile-dropdown .dropdown-item:hover i {
  color: #FFF !important;
}

.header-link-notification {
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-link-notification.show {
  background-color: #FFF !important;
  color: #DA3A96 !important;
}

.header-link-notification.show i,
.header-link-notification.show:hover,
.header-link-notification.show:hover i {
  color: #DA3A96 !important;
}

.header-nofiication-dropdown {
  width: 300px;
  margin-top: 13px !important;
}

.header-nofiication-dropdown .dropdown-item {
  display: flex;
}

.header-nofiication-dropdown .dropdown-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #DA3A96;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #FFF;
}

/* ====================================
   MOBILE RESPONSIVE - SIDEBAR BEHAVIOR
   ==================================== */
.btn {
  border-radius: 6px;
}

.btn span {
  color: #FFF;
}

.btn-primary {
  background-color: #DA3A96 !important;
  border-color: #DA3A96 !important;
}

.btn-primary:hover {
  background-color: #c63185 !important;
  border-color: #c63185 !important;
  color: #ffffff !important;
}

.top-menu {
  min-height: calc(100vh - 250px);
}

/* On mobile/tablet screens (< 992px), sidebar slides in/out instead of minimizing */
@media (max-width: 991.98px) {
    /* Keep sidebar full width on mobile */
    .app-sidebar {
        width: 18rem !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        z-index: 1050 !important;
    }
    
    /* When collapsed on mobile, slide sidebar to the left (hide it) */
    .app-sidebar.collapsed {
        width: 18rem !important; /* Keep full width */
        padding-left: 20px !important; /* Restore normal padding */
        padding-right: 20px !important;
        transform: translateX(-100%) !important; /* Slide out to left */
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Prevent minimized icon layout on mobile */
    .app-sidebar.collapsed .side-menu__label {
        display: block !important; /* Show all labels */
    }
    
    .app-sidebar.collapsed .side-menu__icon {
        margin: 0 !important; /* Reset icon margin */
        margin-right: 8px !important; /* Space between icon and text */
    }
    
    .app-sidebar.collapsed .side-menu__item {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout */
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 15px !important;
        border-radius: 8px !important;
        min-height: auto !important;
    }
    
    /* Hide the hover labels on mobile */
    .app-sidebar.collapsed .main-menu > .slide > .side-menu__item .side-menu__label {
        position: static !important;
        background-color: transparent !important;
        color: inherit !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: inherit !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        box-shadow: none !important;
    }
    
    /* Show chevron on mobile */
    .app-sidebar.collapsed .slide.has-sub > .side-menu__item .fe-chevron-right {
        display: block !important;
    }
    
    /* Reset submenu display on mobile */
    .app-sidebar.collapsed .slide-menu {
        display: none !important;
        position: static !important;
        background-color: transparent !important;
        box-shadow: none !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    
    .app-sidebar.collapsed .slide.open .slide-menu {
        display: block !important;
    }
    
    /* Content adjustment on mobile */
    .app-content {
        margin-left: 0 !important;
        transition: margin-left 0.3s ease !important;
    }
    
    .app-content.sidebar-collapsed {
        margin-left: 0 !important;
    }
    
    /* Add backdrop when sidebar is open on mobile */
    .app-sidebar::before {
        content: '';
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFFFFF;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: -1;
    }
    
    .app-sidebar:not(.collapsed)::before {
        opacity: 1;
        visibility: visible;
    }
}

@media (min-width: 992px) {
  .footer {
    padding-inline-start: 315px;
    padding-inline-end: 25px;
  }
}