/* Base sidebar container (shared) */
.sidebar {
  position: fixed;
  top: 43px;                         /* beneath your top bar */
  height: calc(100vh - 43px);        /* fill remaining viewport */
  width: var(--sidebar-w);
  overflow-y: scroll;                /* always reserve gutter */
  box-sizing: border-box;            /* padding is inside width */
  padding: 0 10px;                   /* 10px on left & right */
  z-index: 1002;
  display: none;                     /* shown via ID + media query */
  background-color: var(--light-mode-background-color);
  color: var(--light-mode-text-color);
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;

  /* hide scrollbar by making it transparent */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  /* prevent scroll “escape” into the page when user hits the ends */
  overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.sidebar::-webkit-scrollbar-track {
  background-color: var(--light-mode-background-color);
}

/* on hover, paint the reserved gutter */
.sidebar:hover {
  scrollbar-color: #888 var(--light-mode-background-color);
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background-color: #888;
}
.sidebar:hover::-webkit-scrollbar-track {
  background-color: var(--light-mode-background-color);
}

/* keep everything else the same… */
body.dark-mode .sidebar {
  background-color: var(--dark-mode-background-color);
  color: var(--dark-mode-text-color);

  /* hide scrollbar by default */
  scrollbar-color: transparent transparent;
}
body.dark-mode .sidebar::-webkit-scrollbar-track {
  background-color: var(--dark-mode-background-color);
}

/* only show on hover */
body.dark-mode .sidebar:hover {
  scrollbar-color: #888 var(--dark-mode-background-color);
}
body.dark-mode .sidebar:hover::-webkit-scrollbar-thumb {
  background-color: #888;
}
body.dark-mode .sidebar:hover::-webkit-scrollbar-track {
  background-color: var(--dark-mode-background-color);
}

/* truncate any w3-container or w3-ul links so text never wraps */
.sidebar .w3-container:not(.w3-row) a,
.sidebar .w3-ul a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* section headers (<h4>) subtly fade in/out */
.sidebar h4 {
  transition: color var(--theme-transition) ease;
  color: var(--light-mode-text-color);
}
body.dark-mode .sidebar h4 {
  color: var(--dark-mode-text-color);
}

/* “pill” style menu items */
.sidebar .w3-bar-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--pill-border-radius);
}

hr.hr-sidebar {
  height: 1px;
  color: var(--light-mode-border-color);
  background: var(--light-mode-border-color);
  font-size: 0;
  border: 0;
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

body.dark-mode hr.hr-sidebar {
  color: var(--dark-mode-border-color);
  background: var(--dark-mode-border-color);
}

/* light-mode hover/focus */
.sidebar .w3-bar-item:hover,
.sidebar .w3-bar-item:focus {
  background-color: var(--light-mode-hover-background-color) !important;
  color: var(--light-mode-text-color) !important;
}

/* light-mode “current page” pill */
.sidebar .w3-bar-item.active {
  background-color: var(--light-mode-active-background-color) !important;
  color: var(--light-mode-text-color) !important;
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

/* dark-mode hover/focus */
body.dark-mode .sidebar .w3-bar-item:hover,
body.dark-mode .sidebar .w3-bar-item:focus {
  background-color: var(--dark-mode-hover-background-color) !important;
  color: var(--dark-mode-text-color) !important;
}

/* dark-mode “current page” pill */
body.dark-mode .sidebar .w3-bar-item.active {
  background-color: var(--dark-mode-active-background-color) !important;
  color: var(--dark-mode-text-color) !important;
}

/* wrapper & header row */
.submenu-header {
  display: flex;
  align-items: center;
}

/* the main “Projects” pill */
.submenu-header .main-link {
  flex: 1;
  border-radius: var(--pill-border-radius);
  transition: background-color var(--theme-transition) ease;
}

/* the in-flow submenu */
.submenu {
  display: none;
  padding-left: 12px;
}
.submenu-wrapper.open .submenu {
  display: block;
}

.sidebar .profile-picture-icon {
  width: 46px;
}

hr.hr-sidebar-invisible {
  opacity: 0;
}

.close-side-menu {
  cursor: pointer;
}