/* Color Palette Config Variables */
:root {
  --moh-teal: #007A87;          /* Primary Theme color from image */
  --moh-teal-dark: #005F69;     /* Hover state color adjustments */
  --moh-light-blue: #E1F5F7;    /* Light backdrop for active selected lists */
  --sidebar-open-width: 16.666667%; 
  --sidebar-collapsed-width: 75px; 
  --transition-speed: 0.25s;
}

#layout-wrapper {
  display: flex;
  width: 100%;
}

/* Sidebar Wrapper Structural Base overrides */
#sidebar-container {
  width: var(--sidebar-open-width);
  min-width: var(--sidebar-open-width);
  transition: width var(--transition-speed) ease-in-out, min-width var(--transition-speed) ease-in-out;
  overflow-x: hidden;
  white-space: nowrap;
}

/* --- INNER UI SIDEBAR STYLING --- */
#custom-ncc-sidebar {
  background-color: #ffffff;
}

/* Top Navigation Banner Theme */
.sidebar-top-banner {
  background-color: var(--moh-teal);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.banner-icon-circle {
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

/* Navigation Menu Item Overrides */
.sidebar-menu-list .nav-item {
  border-bottom: 1px solid #EAEAEA; /* Light separation rule lines */
}

.sidebar-menu-list .nav-link {
  color: #555555;
  transition: all 0.15s ease-in-out;
}

.sidebar-menu-list .nav-link i:first-child {
  color: #777777; /* Default icon mute states */
}

/* Hover State Style rules */
.sidebar-menu-list .nav-link:hover {
  background-color: #F8F9FA;
  color: var(--moh-teal);
}

/* ACTIVE Menu Link Item Styling State */
.sidebar-menu-list .nav-link.active {
  background-color: var(--moh-light-blue) !important;
  color: var(--moh-teal) !important;
  border-left: 4px solid var(--moh-teal); /* Highlights active link left edge */
}

.sidebar-menu-list .nav-link.active i {
  color: var(--moh-teal) !important;
}

/* Arrow pointer properties */
.arrow-indicator {
  color: #CCCCCC;
}
.sidebar-menu-list .nav-link:hover .arrow-indicator {
  color: var(--moh-teal);
}

/* Bottom Sidebar Branding Footer */
.sidebar-footer {
  background-color: var(--moh-teal-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* --- COLLAPSIBILITY ACTIONS --- */
#layout-wrapper.sidebar-collapsed #sidebar-container {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

/* Hide target texts when user hits collapse menu button */
#layout-wrapper.sidebar-collapsed #sidebar-container .nav-text {
  display: none !important;
}

/* Adjust padding cleanly for single icon view during collapsed state */
#layout-wrapper.sidebar-collapsed .sidebar-menu-list .nav-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#layout-wrapper.sidebar-collapsed .sidebar-menu-list .nav-link i:first-child {
  margin-right: 0 !important;
  font-size: 1.3rem !important;
}

/* --- MOBILE RESPONSIVE MEDIA BREAKPOINTS --- */
@media (max-width: 767.98px) {
  :root { --sidebar-open-width: 290px; }
  
  #sidebar-container {
    position: fixed;
    height: 100vh;
    z-index: 1060;
    width: 0 !important;
    min-width: 0 !important;
  }
  
  #layout-wrapper.sidebar-collapsed #sidebar-container {
    width: var(--sidebar-open-width) !important;
    min-width: var(--sidebar-open-width) !important;
  }
  
  #layout-wrapper.sidebar-collapsed #sidebar-container .nav-text {
    display: inline-block !important;
  }
  
  #layout-wrapper.sidebar-collapsed .sidebar-menu-list .nav-link {
    justify-content: space-between !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* --- SUBMENU DROPDOWN ARCHITECTURE --- */

/* Rotate the carrot indicator smoothly when open vs closed */
.dropdown-toggle-custom[aria-expanded="true"] .submenu-caret {
  transform: rotate(180deg);
  transition: transform 0.2s ease-in-out;
}
.dropdown-toggle-custom[aria-expanded="false"] .submenu-caret {
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
}

/* Submenu Links Styles */
.submenu-link {
  font-size: 0.9rem;
  color: #666666;
  text-decoration: none;
  transition: all 0.15s ease;
}
.submenu-link:hover {
  color: var(--moh-teal);
  padding-left: 1.25rem !important; /* Slight slide animation on hover */
}
.submenu-link.active {
  color: var(--moh-teal) !important;
  font-weight: 600;
}

/* Hide complete submenus when sidebar is shrunken down to icon view */
#layout-wrapper.sidebar-collapsed .submenu-panel {
  display: none !important;
}

#layout-wrapper.sidebar-collapsed .dropdown-toggle-custom .submenu-caret {
  display: none !important;
}

/* Styling for Option A button styling integration */
.btn-outline-teal {
  color: var(--moh-teal);
  background-color: transparent;
  transition: all 0.2s ease;
}

.btn-outline-teal:hover {
  color: #ffffff;
  background-color: var(--moh-teal);
}

/* Make sure the toggle button remains clickable and looks correct when collapsed */
#sidebar-toggle-btn {
  cursor: pointer;
  z-index: 1100;
}