@import url("../../general.css");
/* CSS for views/layouts/components/sidebar.ejs */
.sidebar-tools-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
  margin-top: 0.5rem; /* mt-2 */
}

.sidebar-tools-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* space-y-1 */
}

.sidebar-section-top {
  padding-top: 0.5rem; /* pt-2 */
}

.sidebar-title {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: var(--title-color, #1a202c);
}

.sidebar-title-sm {
  font-size: 1rem; /* text-md */
}

.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-link {
  display: block;
  padding: 0.25rem 0.5rem; /* py-1 px-2 */
  color: var(--page-text);
  transition: all 0.2s ease-in-out;
  border-left-width: 0;
}

/* Sm screen and up borders */
@media (min-width: 640px) {
  .sidebar-link {
    border-left: 1px solid var(--border-color);
  }
}

.sidebar-link:hover {
  background-color: var(--card-hover-bg);
  text-decoration: none;
}

/* Specific styling for 'More Calculators' links if they differed (they had hover:underline) */
.sidebar-link-secondary {
  font-size: 0.875rem; /* text-sm */
}

.sidebar-link-secondary:hover {
  background-color: transparent;
  text-decoration: underline;
}