/* =============================================================================
   SIDEBAR IMPROVEMENTS - GitHub-style sidebar with larger fonts and icons
   ============================================================================= */

/* NOTE: Layout structure (.repo-layout, .repo-main, .repo-sidebar positioning)
   is defined in browse.css to avoid CSS cascade conflicts */

/* Sidebar Visual Styling */
.repo-sidebar {
  background: var(--color-canvas-subtle, #f3f2f0);
  border: 1px solid var(--color-border-default, #d0d7de);
  border-radius: 6px;
  overflow-y: auto;
  overflow-x: auto; /* Allow horizontal scrollbar when file tree gets wide */
}

/* Sidebar Section */
.sidebar-section {
  padding: 16px;
  margin-bottom: 0;
  position: relative;
}

.sidebar-section.collapsible {
  cursor: pointer;
}

.sidebar-section.collapsible:hover {
  border-color: var(--color-accent-fg);
  background: var(--color-neutral-muted);
}

/* Sidebar Section Chevron */
.sidebar-section-chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--color-fg-muted);
}

/* Sidebar Title */
.stx-shell-sidebar__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg-default, #1f2328);
  margin-bottom: 12px;
}

/* Dark theme support */
[data-theme="dark"] .repo-sidebar {
  background: var(--color-canvas-subtle, #161b22);
  border-color: var(--color-border-default, #30363d);
}

/* Enhanced sidebar item hover effects */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-fg-muted, #57606a);
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 2px 0;
  cursor: pointer;
}

.sidebar-item:hover {
  background: var(--color-accent-subtle, #ddf4ff);
  color: var(--color-accent-fg, #0969da);
  transform: translateX(4px); /* More pronounced movement */
  box-shadow: inset 3px 0 0 var(--color-accent-emphasis, #0969da);
}

.sidebar-item strong {
  color: var(--color-fg-default, #1f2328);
  font-size: 14px;
  font-weight: 600;
}

.sidebar-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
}

.sidebar-item:hover i {
  transform: scale(1.1); /* Icon grows on hover */
  color: var(--color-accent-fg, #0969da);
}

/* Dark theme */
[data-theme="dark"] .sidebar-item {
  color: var(--color-fg-muted, #8b949e);
}

[data-theme="dark"] .sidebar-item:hover {
  background: var(--color-accent-subtle, #1c2d41);
  color: var(--color-accent-fg, #58a6ff);
  box-shadow: inset 3px 0 0 var(--color-accent-emphasis, #1f6feb);
}

[data-theme="dark"] .sidebar-item strong {
  color: var(--color-fg-default, #e6edf3);
}

/* Enhanced sidebar link hover effects */
.sidebar-link {
  color: var(--color-fg-default, #1f2328);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.sidebar-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-fg-muted, #57606a);
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
}

.sidebar-link:hover {
  text-decoration: none;
  background: var(--color-accent-subtle, #ddf4ff);
  color: var(--color-accent-fg, #0969da);
  transform: translateX(4px);
  box-shadow:
    0 1px 3px rgba(9, 105, 218, 0.12),
    inset 3px 0 0 var(--color-accent-emphasis, #0969da);
}

.sidebar-link:hover i {
  color: var(--color-accent-fg, #0969da);
  transform: scale(1.1); /* Icon grows on hover */
}

/* Dark theme */
[data-theme="dark"] .sidebar-link {
  color: var(--color-fg-default, #e6edf3);
}

[data-theme="dark"] .sidebar-link i {
  color: var(--color-fg-muted, #8b949e);
}

[data-theme="dark"] .sidebar-link:hover {
  background: var(--color-accent-subtle, #1c2d41);
  color: var(--color-accent-fg, #58a6ff);
  box-shadow:
    0 1px 3px rgba(31, 111, 235, 0.12),
    inset 3px 0 0 var(--color-accent-emphasis, #1f6feb);
}

[data-theme="dark"] .sidebar-link:hover i {
  color: var(--color-accent-fg, #58a6ff);
}

/* Enhanced file tree item hover effects */
.file-tree-item {
  padding: 6px 12px; /* Increased left/right padding to prevent icon overlap */
  cursor: pointer;
  color: var(--color-fg-default, #1f2328);
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 1px 0;
  font-size: 14px;
}

.file-tree-item:hover {
  background: var(--color-neutral-subtle, #f3f2f0);
  transform: translateX(4px); /* More pronounced movement */
  box-shadow: inset 2px 0 0 var(--color-border-default, #d0d7de);
}

.file-tree-item.active {
  background: var(--color-accent-subtle, #ddf4ff);
  color: var(--color-accent-fg, #0969da);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-accent-emphasis, #0969da);
}

/* Ensure all child elements inherit proper color when active */
.file-tree-item.active .file-tree-folder,
.file-tree-item.active .file-tree-file,
.file-tree-item.active .file-tree-icon,
.file-tree-item.active .file-tree-chevron {
  color: var(--color-accent-fg, #0969da) !important;
}

/* Dark theme */
[data-theme="dark"] .file-tree-item {
  color: var(--color-fg-default, #e6edf3);
}

[data-theme="dark"] .file-tree-item:hover {
  background: var(--color-neutral-subtle, #21262d);
}

[data-theme="dark"] .file-tree-item.active {
  background: var(--color-accent-subtle, #1c2d41);
  color: var(--color-accent-fg, #58a6ff);
  box-shadow: inset 3px 0 0 var(--color-accent-emphasis, #1f6feb);
}

/* Dark theme - ensure proper color for active item children */
[data-theme="dark"] .file-tree-item.active .file-tree-folder,
[data-theme="dark"] .file-tree-item.active .file-tree-file,
[data-theme="dark"] .file-tree-item.active .file-tree-icon,
[data-theme="dark"] .file-tree-item.active .file-tree-chevron {
  color: var(--color-accent-fg, #58a6ff) !important;
}

/* Enhanced file tree folder hover effects */
.file-tree-folder {
  color: var(--color-fg-default, #1f2328);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.file-tree-folder .file-tree-icon {
  font-size: 16px;
  color: var(--color-fg-muted, #57606a);
  flex-shrink: 0;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
}

.file-tree-folder:hover {
  color: var(--color-accent-fg, #0969da);
  transform: translateX(4px);
}

.file-tree-folder:hover .file-tree-icon {
  color: var(--color-accent-emphasis, #0550ae);
  transform: scale(1.1); /* Icon grows on hover */
}

/* Enhanced file tree file hover effects */
.file-tree-file {
  color: var(--color-fg-muted, #57606a);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.file-tree-file .file-tree-icon {
  font-size: 16px;
  flex-shrink: 0;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
}

.file-tree-file:hover {
  color: var(--color-fg-default, #1f2328);
  transform: translateX(4px);
}

.file-tree-file:hover .file-tree-icon {
  color: var(--color-accent-fg, #0969da);
  transform: scale(1.1); /* Icon grows on hover */
}

/* File tree chevron */
.file-tree-chevron {
  font-size: 12px;
  width: 16px;
  text-align: center;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
  color: var(--color-fg-muted, #57606a);
}

.file-tree-item:hover .file-tree-chevron {
  color: var(--color-accent-fg, #0969da);
}

.file-tree-chevron.expanded {
  transform: rotate(90deg);
}

/* Dark theme */
[data-theme="dark"] .file-tree-folder {
  color: var(--color-fg-default, #e6edf3);
}

[data-theme="dark"] .file-tree-folder .file-tree-icon {
  color: var(--color-fg-muted, #8b949e);
}

[data-theme="dark"] .file-tree-folder:hover {
  color: var(--color-accent-fg, #58a6ff);
}

[data-theme="dark"] .file-tree-folder:hover .file-tree-icon {
  color: var(--color-accent-emphasis, #79c0ff);
}

[data-theme="dark"] .file-tree-file {
  color: var(--color-fg-muted, #8b949e);
}

[data-theme="dark"] .file-tree-file:hover {
  color: var(--color-fg-default, #e6edf3);
}

[data-theme="dark"] .file-tree-file:hover .file-tree-icon {
  color: var(--color-accent-fg, #58a6ff);
}

[data-theme="dark"] .file-tree-chevron {
  color: var(--color-fg-muted, #8b949e);
}

[data-theme="dark"] .file-tree-item:hover .file-tree-chevron {
  color: var(--color-accent-fg, #58a6ff);
}

/* Sidebar title header with padding */
.stx-shell-sidebar__title-header {
  margin-bottom: 12px;
  padding: 6px 12px; /* Increased left/right padding to prevent icon overlap */
}

/* Sidebar title link */
.stx-shell-sidebar__title-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-default);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.stx-shell-sidebar__title-link:hover {
  color: var(--color-accent-fg);
  text-decoration: none;
}

/* Sidebar title icon */
.stx-shell-sidebar__title-icon {
  fill: var(--color-accent-fg);
}

/* File tree container */
.file-tree-container {
  font-size: 14px;
  margin-top: 4px;
}

/* Tree loading state */
.tree-loading {
  color: var(--color-fg-muted);
  padding: 0.75rem;
  font-size: 14px;
}

.tree-loading i {
  font-size: 14px;
}

/* =============================================================================
   END OF SIDEBAR IMPROVEMENTS
   ============================================================================= */