/* ===================================================================
   LAYOUT - Sidebar, Header, Content Structure
   =================================================================== */

/* -------------------------------------------------------------------
   Global Body Styles
   ------------------------------------------------------------------- */
body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* -------------------------------------------------------------------
   Fixed Sidebar and Header Positioning
   ------------------------------------------------------------------- */
.main-sidebar,
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
}

.main-header {
  width: 100%;
  height: 50px;
  z-index: 1100;
  background-color: var(--primary-gradient) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.main-header .navbar {
  background-color: var(--primary-dark) !important;
}

.main-header .navbar-brand {
  color: white !important;
  font-weight: 600;
  font-size: 24px;
}

.skin-blue .main-header .logo {
  background-color: #16486a;
}

.content-wrapper,
.right-side {
  margin-left: 250px;
  padding-top: 50px;
}

.content-wrapper {
  background-color: var(--light-gray) !important;
  min-height: 1500px !important;
}

/* -------------------------------------------------------------------
   Sidebar Styling
   ------------------------------------------------------------------- */
.main-sidebar {
  background-color: #1b557d !important;
}

.sidebar-menu > li > a {
  color: #ecf0f1 !important;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.sidebar-menu > li > a:hover {
  background-color: var(--primary-light) !important;
  border-left: 3px solid var(--accent-green);
}

.sidebar-menu li.active > a {
  background-color: var(--accent-yellow) !important;
  color: var(--dark-gray) !important;
  font-weight: bold;
  border-left: 3px solid var(--accent-green);
}

.sidebar-menu .treeview-menu > li.active > a {
  background-color: #f3e2a3 !important;
  color: var(--dark-gray) !important;
  font-weight: 500;
}

.sidebar-menu .treeview-menu > li > a {
  color: #bdc3c7 !important;
  padding-left: 20px;
}

.sidebar-menu .treeview-menu > li > a:hover {
  background-color: rgba(46, 162, 220, 0.3) !important;
}

/* -------------------------------------------------------------------
   Responsive Layout
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .main-header .navbar-brand {
    font-size: 20px;
  }
}