/* Styles for grouped tags page */

/* Main Content Area Grouping */
.tag-group {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--vscode-sidebar); /* Use sidebar background for contrast */
  border: 1px solid var(--vscode-active);
  border-radius: 4px;
}

.tag-group-header {
  font-size: 1.4em;
  color: var(--vscode-accent); /* Use accent color for the letter */
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vscode-border);
}

.tag-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem; /* Spacing between tag links */
}

/* Individual tag link style in the main area (already defined in tags-overview .tag-link) */
.tags-overview .tag-link {
  display: inline-flex;
  align-items: center;
  background-color: var(--vscode-active);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--vscode-text);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.tags-overview .tag-link:hover {
  background-color: var(--vscode-highlight);
  transform: translateY(-1px);
}

.tags-overview .tag-link i {
  margin-right: 0.4rem;
  color: #c2975b; /* Keep original icon color */
}

.tags-overview .tag-link .count {
  margin-left: 0.5rem;
  font-size: 0.8em;
  color: #808080;
  background-color: var(--vscode-sidebar); /* Slightly different background for count */
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}


/* Sidebar Grouping */
.tag-sidebar-list {
  padding-left: 10px; /* Indent the whole list slightly */
}

.tag-group-sidebar {
  margin-bottom: 0.8rem;
}

.tag-group-header-sidebar {
  font-weight: bold;
  color: var(--vscode-accent-light); /* Lighter accent for sidebar header */
  margin-bottom: 0.4rem;
  padding-left: 5px; /* Align with tag items */
  font-size: 0.95em;
}

/* Sidebar tag item style (already defined as .tag-item) */
.tag-item {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem; /* Slightly smaller padding */
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--vscode-text);
  font-size: 0.9em; /* Slightly smaller font in sidebar */
  margin-left: 10px; /* Indent tags under the letter */
}

.tag-item:hover {
  background: var(--vscode-active);
}

.tag-item i {
  margin-right: 0.4rem;
  color: #c2975b;
  font-size: 0.8em;
}

.tag-item span {
  flex-grow: 1; /* Allow tag name to take available space */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-item .count {
  color: #808080;
  font-size: 0.8em;
  margin-left: auto; /* Push count to the right */
  flex-shrink: 0; /* Prevent count from shrinking */
  min-width: 20px; /* Ensure minimum width for alignment */
  text-align: right; /* Right align the numbers */
  padding-left: 8px; /* Add some spacing */
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
  .tag-group {
    padding: 0.8rem;
  }
  .tag-group-header {
    font-size: 1.2em;
  }
  .tags-overview .tag-link {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
}