/* Heliactyl Modern Polish CSS - Flexbox Strategy */

:root {
  --app-navbar-height: 60px;
  --app-sidebar-width: 244px;
  --app-sidebar-width-collapsed: 70px;
}

/* --- Global overrides --- */
body {
  background-color: #0f1015;
  overflow-x: hidden;
}

/* --- Layout Structure (Flexbox) --- */
.container-scroller {
  display: flex !important;
  min-height: 100vh;
  width: 100%;
  overflow: hidden; /* Prevent body scroll if content scrolls */
}

/* Sidebar: Sticky and Flex Item */
nav#sidebar.sidebar {
  width: var(--app-sidebar-width) !important;
  min-width: var(--app-sidebar-width) !important; /* Prevent shrinking */
  height: 100vh !important;
  position: sticky !important; /* Stays fixed while scrolling content */
  top: 0;
  z-index: 1100;
  background: #191c24;
  border-right: 1px solid rgba(255,255,255,0.02);
  transition: width 0.25s ease, min-width 0.25s ease;
  transition: none; /* Disable initially */
  flex-shrink: 0; /* Do not shrink */
  display: flex;
  flex-direction: column;
}

/* Enable transitions only after JS has initialized */
body.sidebar-ready nav#sidebar.sidebar {
  transition: width 0.25s ease, min-width 0.25s ease;
}

/* Content Wrapper: Fills remaining space */
.container-fluid.page-body-wrapper {
  flex-grow: 1 !important;
  margin-left: 0 !important; /* Flex handles placement */
  width: auto !important;    /* Flex handles width */
  padding-top: 0 !important;
  background-color: #0f1015;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

/* --- Collapsed Toggle State --- */
body.sidebar-icon-only nav#sidebar.sidebar {
  width: var(--app-sidebar-width-collapsed) !important;
  min-width: var(--app-sidebar-width-collapsed) !important;
}
/* Ensure inner nav allows internal scrolling if needed but hides the bar */
nav#sidebar.sidebar .nav {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-grow: 1; /* Take remaining height */
  min-height: 0; /* Allow shrinking below content size */
}
nav#sidebar.sidebar .nav::-webkit-scrollbar {
  display: none;
}

/* Hide Labels in Collapsed Mode */
body.sidebar-icon-only nav#sidebar.sidebar .nav .nav-item .menu-title,
body.sidebar-icon-only nav#sidebar.sidebar .nav .nav-item .menu-arrow, 
body.sidebar-icon-only nav#sidebar.sidebar .nav .nav-category {
  display: none !important;
}

/* Center Icons in Collapsed Mode */
body.sidebar-icon-only nav#sidebar.sidebar .nav .nav-item .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Sidebar Logo Handling */
nav#sidebar.sidebar .sidebar-brand-wrapper {
  width: 100% !important;
  height: var(--app-navbar-height) !important;
  background: #191c24;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Align left */
  flex-shrink: 0;
  padding: 0 !important;
}

nav#sidebar.sidebar .sidebar-brand-wrapper .brand-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Align left */
  width: 100% !important;
  height: 100% !important;
  color: #fff;
  text-decoration: none;
  padding: 0 !important; /* ZERO padding as requested */
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: translateX(-90px) !important; /* Force visual shift left */
}

nav#sidebar.sidebar .sidebar-brand-wrapper .brand-logo-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Center alignment */
  width: 100% !important;
  height: 100% !important;
  color: #fff;
  text-decoration: none;
  padding: 0 !important;
  margin: 0 !important;
}

nav#sidebar.sidebar .sidebar-brand-wrapper .brand-logo-mini {
  display: none !important;
}

/* Collapsed Sidebar: Center Alignment Fixes */
body.sidebar-icon-only nav#sidebar.sidebar .sidebar-brand-wrapper {
  justify-content: center !important;
  padding: 0 !important;
}

body.sidebar-icon-only nav#sidebar.sidebar .sidebar-brand-wrapper .brand-logo { 
  display: none !important; 
}

body.sidebar-icon-only nav#sidebar.sidebar .sidebar-brand-wrapper .brand-logo-mini { 
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove extra top gap from the first category label */
nav#sidebar.sidebar .nav .nav-item.nav-category:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- Navbar (Sticky w/ Content) --- */
.navbar.app-navbar {
  background: #191c24;
  height: var(--app-navbar-height) !important;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100% !important; /* Force full width */
  padding-right: 0 !important;
}

/* Fix Navbar Inner Alignments */
.navbar .navbar-menu-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important; /* Zero padding to hit edge */
  padding-right: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  color: #ffffff;
}

.app-navbar-left {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-left: 10px !important; /* Keep left breathing room */
}

.app-navbar-right {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: auto !important;
  padding-right: 0 !important; /* Ensure flush right */
}

/* Force the very last item to touch the edge */
.app-navbar-right .navbar-nav .nav-item:last-child .nav-link {
  padding-right: 0 !important;
}

/* Navbar Profile Constraints - Fix for "too big" */
ul.navbar-nav {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important; 
  flex-direction: row !important;
  align-items: center;
  height: 100% !important;
}

.navbar-nav .nav-item {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.navbar-nav .nav-item .nav-link {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important; /* Reduced padding */
  white-space: nowrap !important;
}

.navbar-profile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  max-width: 100%;
}

.navbar-profile img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block !important;
}


.navbar-profile-name {
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  white-space: nowrap;
  line-height: normal !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 991px) {
  .container-scroller {
    display: block !important; /* Revert to block for mobile overlays */
  }

  nav#sidebar.sidebar {
    position: fixed !important;
    left: -100% !important; /* Hide off-screen */
    width: var(--app-sidebar-width) !important;
    transition: left 0.25s ease;
  }
  
  nav#sidebar.sidebar.active {
    left: 0 !important;
  }
  
  .container-fluid.page-body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* --- Polish --- */
.content-wrapper {
  flex-grow: 1; /* Pushes footer down if exists */
  padding: 1.5rem;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #191c24; }
::-webkit-scrollbar-thumb { background: #2c2e33; border-radius: 4px; }