/* --- Modern Sidebar Redesign --- */
.sidebar {
  position: fixed;
  top: 3.25rem;
  left: 0;
  bottom: 0;
  width: 250px;
  background: var(--bs-dark);
  box-shadow: 2px 0 16px 0 rgba(30,41,59,0.10);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-right: 1px solid #181a20;
  transition: box-shadow 0.2s, width 0.25s ease, transform 0.25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: calc(100vh - 3.25rem - 40px);
  padding-bottom: 40px;
}
/* Hide sidebar internals when collapsed to prevent ghost text */
@media (min-width: 768px) {
  .sidebar.collapsed .sidebar-content { display: none; }
}

.sidebar-section {
  padding: 0.25rem 0 0.25rem 0;
  border-bottom: 1px solid #181a20;
}
.sidebar .sidebar-content { padding-top: 0.5rem; }
.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar .section-header {
  padding: 0.25rem 1rem 0.1rem 1rem;
  margin: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar .section-header h6 {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a1a6c6;
  font-weight: 700;
  letter-spacing: 1px;
}

.sidebar .section-content {
  padding: 0.1rem 0 0.1rem 0;
}

/* Small subheaders within nav lists */
.sidebar .nav .nav-subheader {
  padding: 0.4rem 1rem 0.2rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7f9a;
  opacity: 0.9;
}

/* Navigation links */
.sidebar .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar .nav-item {
  margin: 0;
  padding: 0;
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  font-size: 0.93rem;
  color: #4f8cff;
  font-weight: 500;
  border-radius: 0.4rem;
  margin: 0.05rem 0.25rem;
  background: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  box-shadow: none;
}
.sidebar .nav-link i {
  font-size: 1rem;
  width: 1.2rem;
  color: #a1a6c6;
  transition: color 0.15s;
}
/* Allow interactive triggers styled as nav rows */
.sidebar .nav .sidebar-hover-trigger.nav-link { cursor: pointer; }

/* Compact active state for nav links */
.sidebar .nav-link.active,
.sidebar .nav-link:focus,
.sidebar .nav-link:hover {
  background: #181a20;
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,140,255,0.08);
}
.sidebar .nav-link.active i,
.sidebar .nav-link:focus i,
.sidebar .nav-link:hover i {
  color: #4f8cff;
}

/* Project/supplier links */
.sidebar .nav-link.project-link,
.sidebar .nav-link.supplier-link {
  color: #e0e6f7;
  font-weight: 400;
  font-size: 0.91rem;
  padding-left: 1.2rem;
  border-radius: 0.3rem;
  background: none;
  margin: 0.01rem 0.1rem;
  transition: background 0.12s, color 0.12s;
}
.sidebar .nav-link.project-link.active,
.sidebar .nav-link.project-link:hover,
.sidebar .nav-link.supplier-link.active,
.sidebar .nav-link.supplier-link:hover {
  background: #181a20;
  color: #4f8cff;
}

/* Section content spacing for lists */
.sidebar .section-content ul.nav {
  margin: 0.2rem 0 0.2rem 0;
}

/* Remove default list styles */
.sidebar ul,
.sidebar li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Custom scrollbar for sidebar */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #4f8cff #181a20;
}
.sidebar::-webkit-scrollbar {
  width: 8px;
  background: #181a20;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #4f8cff;
  border-radius: 4px;
}

/* Collapsed state on desktop */
@media (min-width: 768px) {
  .sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    transform: translateX(-100%);
    overflow: visible; /* keep handle visible */
  }
}

/* Desktop collapse handle */
.main-sidebar-toggle-btn {
  position: absolute;
  right: 0; /* fully visible when open */
  top: 60px;
  width: 22px;
  height: 56px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #fff;
  background: #0d6efd;
  border: none;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 6px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 1030;
}
.sidebar.collapsed .main-sidebar-toggle-btn { right: -18px; }
@media (max-width: 767.98px) {
  .main-sidebar-toggle-btn { display: none; }
}

/* When collapsed, remove left padding from main content */
@media (min-width: 768px) {
  .sidebar.collapsed ~ .ps-sidebar { padding-left: 0 !important; }
}

/* --- Mobile Sidebar Toggle Styling --- */
.clickable-sidebar-toggle {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, box-shadow 0.2s;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 2px 8px rgba(79,140,255,0.08);
}
.clickable-sidebar-toggle:hover,
.clickable-sidebar-toggle:active {
    background: #e0e7ff !important;
    box-shadow: 0 4px 16px rgba(37,99,235,0.13);
}
.sidebar-toggle-label {
    font-size: 1.08rem;
    letter-spacing: 0.5px;
}
.sidebar-toggle-icon {
    font-size: 1.35rem;
    color: #2563eb;
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
    vertical-align: middle;
}
.clickable-sidebar-toggle:active .sidebar-toggle-icon,
.clickable-sidebar-toggle:hover .sidebar-toggle-icon {
    color: #1d4ed8 !important;
    transform: translateY(2px) scale(1.15);
}

/* --- Sidebar Hover Panels for Project Categories (Full Height) --- */
.sidebar-hover-panel {
    display: none;
    position: fixed;
    top: 3.25rem; /* align with sidebar top */
    left: 250px; /* sidebar width */
    width: 320px;
    min-width: 260px;
    max-width: 340px;
    background: #23263a;
    color: #e0e6f7;
    box-shadow: 4px 0 24px 0 rgba(30,41,59,0.18);
    border-radius: 0 0.5rem 0.5rem 0;
  z-index: 1500; /* above estimator toolbar and dropdowns */
    padding: 0;
    transition: opacity 0.18s, visibility 0.18s;
    opacity: 0;
    visibility: hidden;
    height: calc(100vh - 3.25rem - 0px); /* fill from below navbar to bottom */
    min-height: calc(100vh - 3.25rem - 0px);
    max-height: calc(100vh - 3.25rem - 0px);
    display: flex;
    flex-direction: column;
}
.sidebar-hover-panel.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}
.sidebar-hover-panel-header {
    font-size: 1rem;
    font-weight: 700;
    color: #4f8cff;
    margin: 0;
    padding: 0.75rem 1rem 0.5rem 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid #23263a;
    background: #23263a;
    flex: 0 0 auto;
}
.sidebar-hover-panel-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem 1rem;
}
.sidebar-hover-panel .nav-link.project-link {
    color: #e0e6f7;
    font-size: 0.95rem;
    border-radius: 0.3rem;
    margin-bottom: 0.05rem;
    background: none;
    transition: background 0.12s, color 0.12s;
}
.sidebar-hover-panel .nav-link.project-link.active,
.sidebar-hover-panel .nav-link.project-link:hover {
    background: #181a20;
    color: #fff;
}
.sidebar-hover-panel .nav-link i {
    color: #4f8cff;
    opacity: 0.7;
}


@media (max-width: 991.98px) {
  .sidebar {
    width: 210px;
    font-size: 0.95rem;
  }
}

@media (max-width: 767.98px) {
  .sidebar {
    width: 90vw;
    min-width: 0;
    max-width: 100vw;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1050;
    border-radius: 0 1.5rem 1.5rem 0;
    box-shadow: 4px 0 24px 0 rgba(30,41,59,0.18);
    padding-top: 2.5rem;
    background: var(--bs-dark);
  }
  .sidebar .section-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sidebar .nav-link {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-size: 1.05rem;
  }
}
/* Ensure main content is not overlapped by sidebar */
@media (min-width: 768px) {
  .ps-sidebar {
    padding-left: 250px !important;
  }
}
@media (max-width: 767.98px) {
  .ps-sidebar {
    padding-left: 0 !important;
  }
}
@media (max-width: 768px) {
    /* Sidebar mobile adjustments */
    .ps-sidebar {
        padding-left: 1rem !important; /* Remove sidebar padding on mobile */
    }

    .sidebar {
        transform: translateX(-100%); /* Hide sidebar by default on mobile */
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0); /* Show sidebar when .show class is applied */
    }
    
    body.sidebar-open {
        overflow: hidden; /* Prevent scrolling when sidebar is open */
    }
    
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1019;
    }
    
    .sidebar-backdrop.show {
        display: block;
    }
    
  /* Responsive adjustments */
  @media (max-width: 767.98px) {
    .ps-sidebar {
      padding-left: 0 !important;
    }
  }

  @media (min-width: 768px) {
    .ps-sidebar {
      padding-left: 250px !important;
    }
  }

  /* Make sure the panel is above the sidebar and does not overlap footer */
  @media (max-width: 991.98px) {
      .sidebar-hover-panel {
          left: 0;
          top: auto;
          bottom: 0;
          width: 100vw;
          min-width: 0;
          max-width: 100vw;
          border-radius: 0;
          box-shadow: none;
          height: 60vh;
          max-height: 60vh;
      }
  }
}