/* Base styles for the sidebar */
#nav-sidebar {
  box-sizing: border-box;            /* Padding included in width */
  height: 100dvh;
  max-width: 280px !important;
  display: flex;                     /* Column layout */
  flex-direction: column;
  overflow: hidden !important;
}

@media (max-width: 400px) {
  #nav-sidebar {
    max-width: none !important;
    width: 100% !important;
    flex: 0 0 100% !important; /* full row in flex parent */
    min-width: 0;              /* allow shrink within flex */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }
  /* Hide sidebar by default on mobile */
  #nav-sidebar.hidden-mobile {
    display: none !important;
  }
}

#search-wrapper {
  margin-top: 0.8rem; /* Should match board title top margin */
}

/* Sidebar item container */
#sidebar-item-container {
  padding-top: 60px; /* Account for fixed navbar */
  overflow-y: scroll;
  height: calc(100dvh - 126px); /* dynamic viewport height - toolbar height */
}

@media (max-width: 400px) {
  #sidebar-item-container {
    padding-top: 15px; /* Less padding on mobile - no fixed navbar to worry about */
  }
}

/* Sidebar animations */
@keyframes slideInFromLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
body:not(:has(.reduce-motion)) #nav-sidebar {
  transition: none;
  will-change: transform, opacity;
}
body:not(:has(.reduce-motion)) #nav-sidebar.animating-in {
  animation: slideInFromLeft 0.2s ease-out forwards;
}
body:not(:has(.reduce-motion)) #nav-sidebar.animating-out {
  animation: slideOutToLeft 0.2s ease-in forwards;
}

/* Sidebar mobile header - mobile only */
.sidebar-mobile-header {
  display: none;
}

@media (max-width: 400px) {
  .sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 8px 1.6rem;
    border-bottom: 1px solid var(--lm-border-color);
  }

  .sidebar-logo {
    display: flex;
    align-items: center;
    margin-top: 1px;
  }

  .sidebar-logo img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
  }

  .sidebar-mobile-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--lm-text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }

  body[data-theme="dark"] .sidebar-mobile-header {
    border-bottom-color: var(--dm-border-color);
  }

  body[data-theme="dark"] .sidebar-mobile-close {
    color: var(--dm-text-color);
  }
}

/* Sidebar collapsible sections */
.sidebar-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sidebar-section-toggle .sidebar-chevron {
  transition: transform 0.2s ease;
  font-size: 16px;
  opacity: 0.6;
}
.sidebar-section-toggle.collapsed .sidebar-chevron {
  transform: rotate(-90deg);
}
.sidebar-section-content {
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.sidebar-section-content.collapsed {
  display: none;
}

/* Sidebar links base styles */
.sidebar-link-wrapper {
  margin-left: 1.6rem;
  margin-right: 1.6rem; 
  border-radius: 6px;
}
.sidebar-title {
  font-weight: 600;
}
.sidebar-link {
  display: block;
  cursor: pointer;
  width: 100% !important;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1.2;
}
.sidebar-link-emoji {

}
.smart-list-ends {
  margin-bottom: 0.6em;
}

/* Board link share icons */
.board-link-share-icons {
  visibility: hidden;
}
.sidebar-link:hover .board-link-share-icons {
  visibility: visible;
}


/* Sidebar dropdown menus */
@media (hover: hover) and (pointer: fine) {
  .sidebar-link-dropdown {
    visibility: hidden; /* Hide on pointer devices */
  }
}
.sidebar-link:hover .sidebar-link-dropdown {
  visibility: visible;
}

/* Sidebar keyboard navigation */
body[data-theme="dark"] .selected .sidebar-link,
body[data-theme="light"] .selected .sidebar-link {
  outline: 2px solid var(--primary-color) !important;
}

/* Theme-specific styles */
body[data-theme="dark"] #nav-sidebar {
  border-right: 1px solid var(--dm-border-color);
  background: var(--dm-card-bg-color); 
}
body[data-theme="dark"] .sidebar-link {
  color: var(--dm-base-text-color) !important;
}
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .droppable-hover {
  background: color(display-p3 0.197 0.208 0.228 / 0.3) !important;
}
body[data-theme="dark"] .active-link-wrapper .sidebar-link {
  background: color(display-p3 0.197 0.208 0.228) !important;
}
body[data-theme="dark"] #nav-sidebar .sidebar-link-wrapper::after {
  background: color(display-p3 0.197 0.208 0.228);
}
body[data-theme="dark"] .toolbar-icon {
  color: var(--dm-light-text-color);
}

body[data-theme="light"] #nav-sidebar {
  border-right: 1px solid var(--lm-border-color);
  background: #fafafa; 
}
body[data-theme="light"] .sidebar-link {
  color: var(--lm-base-text-color) !important;
}
body[data-theme="light"] .sidebar-link:hover,
body[data-theme="light"] .droppable-hover {
  background: #f2f2f27f !important;
}
body[data-theme="light"] .active-link-wrapper .sidebar-link {
  background: #ebebebf8 !important;
}
body[data-theme="light"] #nav-sidebar .sidebar-link-wrapper::after {
  background: #f2f2f2f8;
}
body[data-theme="light"] .toolbar-icon {
  color: var(--dm-light-text-color);
}

/* Sidebar with custom background image modifiers */
body.with-background #nav-sidebar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-theme="dark"].with-background #nav-sidebar {
  background: rgba(0, 0, 0, 0.3) !important;
}
body[data-theme="dark"].with-background .active-link-wrapper .sidebar-link {
  background: color(display-p3 0 0 0 / 0.3) !important;
}
body[data-theme="dark"].with-background .sidebar-link:hover,
body[data-theme="dark"].with-background .droppable-hover {
  background: color(display-p3 0 0 0 / 0.2) !important;
}
body[data-theme="light"].with-background #nav-sidebar {
  background: rgba(255, 255, 255, 0.4) !important;
}
body[data-theme="light"].with-background .active-link-wrapper .sidebar-link {
  background: color(display-p3 1 1 1 / 0.4) !important;
}
body[data-theme="light"].with-background .sidebar-link:hover,
body[data-theme="light"].with-background .droppable-hover {
  background: color(display-p3 1 1 1 / 0.2) !important;
}