/* Custom CSS for the monitoring application */

/* Fix for tables overflowing into the sidebar */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Ensure tables don't extend beyond their container */
table.dataTable {
  width: 100% !important;
  max-width: 100%;
}

/* Navigation styling */
.nav-section {
  margin-bottom: 0.75rem;
  position: relative; /* Establish positioning context for children */
  display: block; /* Ensure proper display for children */
  width: 100%;
}

.nav-section-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  font-weight: 500;
  cursor: pointer;
}

.nav-section-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #0d6efd;
  text-decoration: none;
  transform: translateX(2px); /* Subtle hover effect */
}

/* Enhanced collapsible menu with proper animations */
.nav-section .collapse:not(.show) {
  display: none;
}

.nav-section .collapsing {
  height: 0;
  overflow: hidden;
  /* Speed up the collapse animation slightly for smoother transitions */
  transition: height 0.3s ease;
}

.nav-section .collapse.show {
  display: block;
}

/* Ensure all navigation elements stack properly */
.nav-section .collapse .nav,
.nav-section .collapsing .nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

/* Ensure each nav item takes full width and is positioned correctly */
.nav-section .nav-item {
  display: block !important; /* Force block display */
  width: 100%;
  position: relative; /* Establish positioning context */
  height: auto; /* Allow natural height */
  clear: both; /* Prevent horizontal alignment */
}

.nav-section .collapse .nav-item,
.nav-section .collapsing .nav-item {
  width: 100%;
  opacity: 0;
  /* Initially ensure items are invisible until ready to animate */
  transform: translateY(-5px);
  position: relative;
  /* Speed up the animation */
  animation: fadeIn 0.4s forwards;
  float: none; /* Prevent floating */
  margin-bottom: 2px; /* Add small spacing between items */
}

/* Improve staggering for fade-in animation */
.nav-section .collapse.show .nav-item:nth-child(1) { animation-delay: 0.05s; }
.nav-section .collapse.show .nav-item:nth-child(2) { animation-delay: 0.08s; }
.nav-section .collapse.show .nav-item:nth-child(3) { animation-delay: 0.11s; }
.nav-section .collapse.show .nav-item:nth-child(4) { animation-delay: 0.14s; }
.nav-section .collapse.show .nav-item:nth-child(5) { animation-delay: 0.17s; }
.nav-section .collapse.show .nav-item:nth-child(6) { animation-delay: 0.20s; }

/* Ensure all items in a collapsing menu fade out quickly */
.nav-section .collapse:not(.show) .nav-item {
  animation: none;
  transition: opacity 0.2s ease;
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
    visibility: visible;
    position: relative;
    display: block;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    position: relative;
    display: block;
  }
}

/* Sidebar styling */
.sidebar {
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  transition: height 0.3s ease;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 0;
    height: auto;
    max-height: 90vh; /* Limit height on mobile while allowing scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  
  /* Ensure menu items appear in a stack on mobile */
  .sidebar .nav-section {
    width: 100%;
    clear: both;
  }
  
  /* Improve transitions when collapsing on mobile */
  .sidebar .collapse {
    transition: height 0.25s ease-out;
  }

  /* Smoother transitions for mobile menu */
  #sidebarMenu.collapsing {
    transition-duration: 0.25s;
    transition-property: height, visibility;
    overflow-y: hidden;
  }
  
  /* Ensure nav sections appear in a clean vertical stack */
  .nav-section {
    clear: both;
    width: 100%;
    float: none;
    margin-bottom: 0.5rem;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Prevent overlap during animations */
  .nav-section .nav-item {
    clear: both;
    display: block !important;
    float: none;
    position: relative;
  }
  
  /* Ensure collapsed sections don't take up space */
  .nav-section .collapse:not(.show) {
    height: 0 !important;
    overflow: hidden;
    display: none;
  }
  
  /* Better spacing for mobile navigation */
  .sidebar .nav-link {
    padding: 0.65rem 0.75rem 0.65rem 2.5rem;
    margin-bottom: 0.25rem;
  }
}

.sidebar .nav-link {
  font-weight: 400;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  color: #656565;
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-link:hover {
  color: #0d6efd;
}

.sidebar .nav-link.active {
  color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.1);
  border-radius: 0.25rem;
}

.feather-sm {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.section-toggle {
  transition: transform 0.35s ease;
}

.nav-section-header[aria-expanded="false"] .section-toggle {
  transform: rotate(-90deg);
}

/* Header styling */
.navbar {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 0.5rem 1rem;
}

.logo-image {
  transition: transform 0.3s ease;
}

.navbar-brand {
  box-shadow: none;
  background-color: transparent;
}

.navbar-brand:hover .logo-image {
  transform: scale(1.05);
}

/* Improve table visualization on smaller screens */
@media screen and (max-width: 992px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dt-buttons {
    text-align: left;
    float: none;
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5rem;
  }
}

/* Ensure the main content area doesn't overflow */
.col-md-9.ms-sm-auto.col-lg-10 {
  overflow-x: hidden;
}