/* Sidebar styles extracted from _Sidebar.cshtml */
:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 52px;
  --sidebar-top: 56px;
  --sidebar-bg: #111827;
  --sidebar-text: #ffffff;
  --sidebar-hover-bg: #1f2937;
  --sidebar-active-bg: #0b5ed7;
  --sidebar-active-text: #ffffff;
}

#appSidebar.sidebar {
  position: fixed;
  left: 0;
  top: var(--sidebar-top);
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  z-index: 1050;
  overflow: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform .18s ease, width .18s ease;
}

#appSidebar.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
#appSidebar.sidebar.collapsed .menu-title { display: none !important; }
#appSidebar.sidebar.collapsed .chevron { display: none !important; }
#appSidebar.sidebar.collapsed .sidebar-link { justify-content: center; padding: .5rem 0; }
#appSidebar.sidebar.collapsed .sidebar-link i { margin: 0 !important; }
#appSidebar.sidebar.collapsed .menu-children { display: none !important; }
#appSidebar .menu-children { padding-left: 1rem; margin: .25rem 0 .5rem; }
#appSidebar .menu-children > .inner { list-style: none; margin: 0; padding-left: 0; }
#appSidebar .menu-children .sidebar-link { padding-left: .75rem; }
#appSidebar button.sidebar-link { border: 0; background: transparent; text-align: left; }
#appSidebar .sidebar-inner { padding-bottom: 3rem; }
#appSidebar .sidebar-header { padding-top: .5rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.04); }
#appSidebar .sidebar-nav { padding-top: .5rem; }
#appSidebar .sidebar-link,
#appSidebar .menuLink,
#appSidebar .toggle {
  color: var(--sidebar-text);
  text-decoration: none;
  display:flex;
  align-items:center;
  gap:.5rem;
  border-radius:6px;
  padding:.5rem .5rem;
/*  width:100%;
*/  background: transparent;
  transition: background .12s ease, color .12s ease;
}

#appSidebar .sidebar-link:hover,
#appSidebar .menuLink:hover,
#appSidebar .toggle:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-active-text); }

ul.inner { list-style:none; padding-left: .5rem; margin: .25rem 0 .5rem 0; }
.chevron { margin-left: auto; transition: transform .18s ease; }
.chevron.rotated { transform: rotate(90deg); }

#appSidebar li.open > .toggle,
#appSidebar .toggle[aria-expanded="true"] {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

/* Ensure pin/unpin icons are visible and sized */
#sidebarPinBtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; }
#sidebarPinBtn svg, #sidebarPinBtn i { width: 18px; height: 18px; color: var(--sidebar-text); pointer-events: none; }
#sidebarPinBtn .pin-icon { display: inline-block; line-height: 0; }
#sidebarPinBtn .unpin-icon { display: none; line-height: 0; }
/* JS will toggle inline styles; keep CSS fallback too */
#appSidebar.pinned #sidebarPinBtn .pin-icon { display: none !important; }
#appSidebar.pinned #sidebarPinBtn .unpin-icon { display: inline-block !important; }

/* On hover, slightly highlight the pin button */
#sidebarPinBtn:hover { background: rgba(255,255,255,.03); }

/* When sidebar is collapsed, keep the pin button visible and centered */
#appSidebar.collapsed .sidebar-header .d-flex.align-items-center.gap-2 { justify-content: center; }

/* Move main content according to sidebar width */
body.has-sidebar main.layout-content {
  margin-left: var(--sidebar-width);
  transition: margin-left .18s ease;
}
body.has-sidebar.sidebar-collapsed main.layout-content {
  margin-left: var(--sidebar-collapsed-width);
}
@media (max-width: 768px) {
  body.has-sidebar main.layout-content {
    margin-left: 0;
  }
}

/* On small screens, keep content full width (sidebar acts as overlay) */
#appSidebar.sidebar.open,
#appSidebar.sidebar.pinned { transform: none !important; }

/* Sidebar base (handled by #appSidebar styles above) */
/* Keep generic .sidebar minimal to avoid conflicts */
.sidebar {}

/* Menu item text & icons – ensure white on dark sidebar */
.sidebar .sidebar-link,
.sidebar .sidebar-link i,
.sidebar .sidebar-link .menu-title {
    color: #ffffff !important;
}

/* Hover / active */
.sidebar .sidebar-link:hover,
.sidebar .sidebar-link.active {
    background-color: #1f2937;
    color: #ffffff !important;
}

.sidebar .sidebar-link:hover i,
.sidebar .sidebar-link:hover .menu-title,
.sidebar .sidebar-link.active i,
.sidebar .sidebar-link.active .menu-title {
    color: #ffffff !important;
}

/* Keep menu text on one line with ellipsis */
#appSidebar .menu-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Base link look */
#appSidebar .sidebar-link {
    border-left: 3px solid transparent;
}

/* Active state: subtle highlight, amber accent */
#appSidebar .sidebar-link.active {
    background-color: #0b1120 !important;
    color: #fbbf24 !important;
    border-left-color: #fbbf24 !important;
    font-weight: 600;
}

#appSidebar .sidebar-link.active i,
#appSidebar .sidebar-link.active .menu-title {
    color: #fbbf24 !important;
}

/* Hover active: slightly darker but same accent */
#appSidebar .sidebar-link.active:hover {
    background-color: #020617 !important;
    color: #facc15 !important;
}