/* ========================================
   Sidebar Glass Theme - Compatible with 
   Material Dashboard HTML Structure
   Inherits CSS variables from navbar.css
   ======================================== */

/* ========================================
   Sidebar Container
   ======================================== */
aside.sidenav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  z-index: 999 !important;
  padding: 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  transition: all var(--transition-smooth);

  /* The sidebar's layout was WRITTEN as a flex column but never switched on:
     .navbar-collapse declares `flex: 1 1 auto` and .kfsb-footer declares
     `margin-top: auto`, and both are inert inside a block parent. So the nav
     list never filled the sidebar and the user card just sat wherever the list
     happened to end — 211px above the bottom on the documents pages, and only
     near the bottom on the dashboard by coincidence.

     With the parent flex, the nav list claims the free space (and scrolls
     itself when it has too many items), and the user card is pinned to the
     bottom, which is what those two declarations always intended.

     align-items is Bootstrap's, not ours: the aside carries the `navbar` class,
     so on every page that loads Bootstrap it is already `flex` + `center`. The
     documents pages don't load Bootstrap, so restating all three here is a
     no-op there and makes the sidebar render identically everywhere. */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Belt and braces: pin the footer even if a page ever un-flexes the aside. */
aside.sidenav .kfsb-footer { margin-top: auto !important; }

aside.sidenav::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 0;
  bottom: 12px;
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);

  z-index: -1;
  transition: all var(--transition-smooth);
}

/* ========================================
   Sidebar Header
   ======================================== */
aside.sidenav .sidenav-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 16px 16px 20px;
  min-height: 76px;
  flex-shrink: 0;
}

aside.sidenav .sidenav-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none;
  transition: all var(--transition-fast);
  overflow: hidden;
}

/* Must match `aside.sidenav { width: 320px }` above and the
   `margin-left: 320px` applied to the content further down.
   This was 19.5rem — i.e. 312px — which CLAMPED the 320px-wide sidebar to
   312px while the content stayed offset by 320px, leaving an 8px strip of
   background showing down the whole left edge of every dashboard page.
   Change all three together or the gap comes back. */
.navbar-vertical.navbar-expand-xs{
    max-width: 320px !important;
}

aside.sidenav .sidenav-header .navbar-brand:hover {
  transform: translateX(4px);
}

aside.sidenav .sidenav-header .navbar-brand-img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: var(--border-radius-xs);
  object-fit: contain;
  padding: 6px;
  background: var(--accent-gradient);
  box-shadow: 0 4px 12px var(--accent-glow);
}

aside.sidenav .sidenav-header .navbar-brand span {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.3px;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button for mobile */
aside.sidenav .sidenav-header #iconSidenav,
aside.sidenav .sidenav-header .fa-times {
  position: absolute;
  top: 20px;
  right: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  background: var(--bg-glass-button);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
}

aside.sidenav .sidenav-header #iconSidenav:hover,
aside.sidenav .sidenav-header .fa-times:hover {
  background: var(--bg-glass-button-hover);
  color: var(--text-primary);
}

/* ========================================
   Horizontal Rule / Divider
   ======================================== */
aside.sidenav hr.horizontal {
  height: 1px !important;
  background: var(--border-color) !important;
  border: none !important;
  margin: 0 20px 16px 20px !important;
  opacity: 1 !important;
  flex-shrink: 0;
}

/* ========================================
   Navigation Container
   ======================================== */
aside.sidenav .navbar-collapse {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px;
  margin: 0 !important;
  min-height: 0;
  max-height: calc(100vh - 260px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color-strong) transparent;
}

aside.sidenav .navbar-collapse::-webkit-scrollbar {
  width: 4px;
}

aside.sidenav .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}

aside.sidenav .navbar-collapse::-webkit-scrollbar-thumb {
  background: var(--border-color-strong);
  border-radius: 4px;
}

/* ========================================
   Navigation List
   ======================================== */
aside.sidenav .navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ========================================
   Navigation Items
   ======================================== */
aside.sidenav .nav-item {
  margin-bottom: 4px;
  width: 100%;
}

aside.sidenav .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 11px 16px !important;
  border-radius: var(--border-radius-xs) !important;
  text-decoration: none !important;
  color: var(--text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer;
  border: none;
  background: transparent !important;
  width: 100%;
  text-align: left;
  opacity: 1 !important;
  overflow: hidden;
}

aside.sidenav .nav-link:hover {
  background: var(--bg-glass-button) !important;
  color: var(--text-primary) !important;
  transform: translateX(4px);
}

/* Icons in nav links */
aside.sidenav .nav-link i,
aside.sidenav .nav-link .material-symbols-rounded {
  font-size: 22px !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  transition: color var(--transition-fast);
  width: 24px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

aside.sidenav .nav-link:hover i,
aside.sidenav .nav-link:hover .material-symbols-rounded {
  color: var(--accent-primary) !important;
}

/* Nav link text */
aside.sidenav .nav-link .nav-link-text,
aside.sidenav .nav-link span:not(.material-symbols-rounded) {
  flex: 1;
  color: inherit !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   Active State
   ======================================== */
aside.sidenav .nav-link.active,
aside.sidenav .nav-link.bg-gradient-dark {
  background: var(--accent-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 15px var(--accent-glow);
}

aside.sidenav .nav-link.active i,
aside.sidenav .nav-link.active .material-symbols-rounded,
aside.sidenav .nav-link.bg-gradient-dark i,
aside.sidenav .nav-link.bg-gradient-dark .material-symbols-rounded {
  color: white !important;
}

aside.sidenav .nav-link.active:hover,
aside.sidenav .nav-link.bg-gradient-dark:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 20px var(--accent-glow);
  color: white !important;
}

/* ========================================
   Dropdown Toggle
   ======================================== */
aside.sidenav .nav-link.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: all var(--transition-fast);
  margin-left: auto;
  border-left: none;
  border-top: none;
}

aside.sidenav .nav-link.dropdown-toggle:hover::after {
  border-color: var(--accent-primary);
}

aside.sidenav .nav-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/* ========================================
   Dropdown Menu
   ======================================== */
aside.sidenav .dropdown-menu {
  position: static !important;
  display: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 8px 20px !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

aside.sidenav .dropdown-menu.show {
  display: block;
}

aside.sidenav .dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 10px 14px !important;
  border-radius: var(--border-radius-xs) !important;
  text-decoration: none !important;
  color: var(--text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
  position: relative;
  background: transparent !important;
}

aside.sidenav .dropdown-menu .dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--border-color-strong);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

aside.sidenav .dropdown-menu .dropdown-item:hover {
  background: var(--bg-glass-button) !important;
  color: var(--text-primary) !important;
  padding-left: 22px !important;
}

aside.sidenav .dropdown-menu .dropdown-item:hover::before {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow);
}

aside.sidenav .dropdown-menu .dropdown-item i,
aside.sidenav .dropdown-menu .dropdown-item .material-symbols-rounded {
  font-size: 18px !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

aside.sidenav .dropdown-menu .dropdown-item:hover i,
aside.sidenav .dropdown-menu .dropdown-item:hover .material-symbols-rounded {
  color: var(--accent-primary) !important;
}

/* ========================================
   Section Headers
   ======================================== */
aside.sidenav .nav-item h6,
aside.sidenav .navbar-nav h6 {
  padding: 18px 16px 8px 16px !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  opacity: 1 !important;
}

/* ========================================
   Logout Button
   ======================================== */
aside.sidenav form.nav-link {
  padding: 0 !important;
  background: none !important;
}

aside.sidenav form.nav-link button,
aside.sidenav form button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  width: 100%;
  padding: 11px 16px !important;
  border-radius: var(--border-radius-xs) !important;
  text-decoration: none;
  color: var(--text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer;
  border: none !important;
  background: transparent !important;
  text-align: left;
}

aside.sidenav form.nav-link button:hover,
aside.sidenav form button[type="submit"]:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  transform: translateX(4px);
}

aside.sidenav form.nav-link button:hover i,
aside.sidenav form.nav-link button:hover .material-symbols-rounded,
aside.sidenav form button[type="submit"]:hover i,
aside.sidenav form button[type="submit"]:hover .material-symbols-rounded {
  color: #ef4444 !important;
}

/* ========================================
   Sidebar Footer
   ======================================== */
aside.sidenav .sidenav-footer {
  position: relative !important;
  padding: 16px !important;
  margin-top: auto;
  flex-shrink: 0;
  width: 100% !important;
  bottom: auto !important;
}

aside.sidenav .sidenav-footer .mx-3 {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

aside.sidenav .sidenav-footer .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100% !important;
  padding: 11px 16px !important;
  border-radius: var(--border-radius-xs) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--transition-fast) !important;
  margin: 0 !important;
}

aside.sidenav .sidenav-footer .btn-outline-dark {
  background: transparent !important;
  border: 1px solid var(--border-color-strong) !important;
  color: var(--text-secondary) !important;
}

aside.sidenav .sidenav-footer .btn-outline-dark:hover {
  background: var(--bg-glass-button) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

aside.sidenav .sidenav-footer .btn.bg-gradient-dark {
  background: var(--accent-gradient) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px var(--accent-glow);
}

aside.sidenav .sidenav-footer .btn.bg-gradient-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* ========================================
   Mobile Responsive
   ======================================== */
@media (max-width: 1199px) {
  /* CLOSED must be fully off-canvas. material-dashboard.css hides the sidenav
     with `.g-sidenav-show .sidenav { translateX(-17.125rem) }` — that's -274px
     for a sidebar that is 320px wide here, AND its two-class selector beats
     the old single-class rule below. Net effect: a ~46px strip of sidebar sat
     permanently on top of the content on every phone. -110% clears any width;
     !important settles the cascade for good. */
  aside.sidenav {
    transform: translateX(-110%) !important;
    /* The aside carries ms-2/my-2 margins + rounded corners for the desktop
       floating look; as a mobile drawer it must sit flush and full-height. */
    margin: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    z-index: 1080 !important;          /* above content and the overlay (998) */
    transition: transform .25s ease !important;
  }

  /* OPEN: .open/.show (the partial's toggleSidenav) is the ONLY way to show
     the drawer — deliberately NOT body.g-sidenav-pinned. The MD bundle binds
     its own toggler to the same burger on some pages and flips that body
     class independently; if pinned could open the drawer too, the two
     handlers would fight and every second tap appeared to do nothing. With
     .open as the single source of truth, MD's class toggling is inert here. */
  aside.sidenav.show,
  aside.sidenav.open {
    transform: translateX(0) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, .35);
  }

  /* The content area takes the full width — no desktop sidebar offset. */
  .main-content,
  .main-content-with-sidenav {
    margin-left: 0 !important;
    width: 100% !important;
  }

  aside.sidenav .sidenav-header #iconSidenav,
  aside.sidenav .sidenav-header .fa-times {
    display: flex;
  }
}

@media (max-width: 576px) {
  aside.sidenav {
    width: 100% !important;
    max-width: 300px;
    padding: 12px !important;
  }
}

/* ========================================
   Main Content Offset
   ======================================== */
@media (min-width: 1200px) {
  .main-content,
  .main-content-with-sidenav {
    margin-left: 320px !important;
    transition: margin-left var(--transition-smooth);
  }
}

/* ========================================
   Overlay for Mobile
   ======================================== */
.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.sidenav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Fix for nested elements & overrides
   ======================================== */
aside.sidenav * {
  box-sizing: border-box;
}

/* Remove any conflicting text colors */
aside.sidenav .text-dark {
  color: var(--text-secondary) !important;
}

aside.sidenav .text-white {
  color: white !important;
}

aside.sidenav .opacity-5 {
  opacity: 1 !important;
}

/* Fix fixed-start class interference */
aside.sidenav.fixed-start {
  left: 0 !important;
  margin-left: 0 !important;
}

/* Fix my-2 margin interference */
aside.sidenav.my-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Fix ms-2 margin interference */
aside.sidenav.ms-2 {
  margin-left: 0 !important;
}

/* Fix border-radius-lg interference */
aside.sidenav.border-radius-lg {
  border-radius: 0 !important;
}

/* Fix bg-white interference */
aside.sidenav.bg-white {
  background: transparent !important;
}