/* Modern Sidebar Styles - Enhanced UI/UX */
/* 
 * SINGLE SOURCE OF TRUTH: This file is the ONLY sidebar CSS file.
 * - static/css/sidebar.css = source file (in git)
 * - staticfiles/css/sidebar.css = copy created by collectstatic (not in git)
 * 
 * All environments (local, dev, prod) use the SAME file.
 * Theme colors are applied via CSS variables (--color-primary, --color-accent).
 */
.app-sidebar {
  /* Consistent light sidebar across all sites - theme colors show in interactive elements */
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #1e293b !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08) !important;
}

.sidebar-collapsed {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
}

/* Modern Link Styling */
.sidebar-link {
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.sidebar-link::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 3px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  transform: scaleY(0) !important;
  transform-origin: bottom !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-link--active::before,
.sidebar-link:hover::before {
  transform: scaleY(1) !important;
}

.sidebar-link--icon {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-accent-rgb), 0.08)) !important;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.2) !important;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding: 0.75rem !important;
  position: relative !important;
}

.sidebar-link--icon:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2), rgba(var(--color-accent-rgb), 0.15)) !important;
  border-color: rgba(var(--color-primary-rgb), 0.4) !important;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
}

.sidebar-link--icon.sidebar-link--active {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-accent-rgb), 0.2)) !important;
  border-color: rgba(var(--color-primary-rgb), 0.5) !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Icon Styling */
.sidebar-link__icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: var(--color-primary) !important;
  opacity: 1 !important;
  display: block !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: drop-shadow(0 1px 2px rgba(var(--color-primary-rgb), 0.2)) !important;
}

.sidebar-link:hover .sidebar-link__icon {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.3)) !important;
}

.sidebar-link--active .sidebar-link__icon {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 2px 6px rgba(var(--color-primary-rgb), 0.4)) !important;
}

.sidebar-link__icon path,
.sidebar-link__icon line,
.sidebar-link__icon circle,
.sidebar-link__icon rect {
  stroke-width: 2 !important;
  transition: stroke-width 0.2s ease !important;
}

.sidebar-link:hover .sidebar-link__icon path,
.sidebar-link:hover .sidebar-link__icon line,
.sidebar-link:hover .sidebar-link__icon circle,
.sidebar-link:hover .sidebar-link__icon rect {
  stroke-width: 2.2 !important;
}

.sidebar-collapsed .sidebar-link__icon {
  color: var(--color-primary) !important;
  opacity: 1 !important;
}

/* Pin Button Enhancement */
.sidebar-icon-button--pin {
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.4) !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2), rgba(var(--color-accent-rgb), 0.15)) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  position: relative !important;
  z-index: 25 !important;
  margin-left: auto !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-icon-button--pin:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.35), rgba(var(--color-accent-rgb), 0.3)) !important;
  border-color: rgba(var(--color-primary-rgb), 0.6) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.sidebar-icon-button--pin.sidebar-icon-button--active {
  border-color: rgba(var(--color-primary-rgb), 0.7) !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.4), rgba(var(--color-accent-rgb), 0.35)) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.sidebar-brand__actions {
  position: relative !important;
  z-index: 20 !important;
}

/* Section Enhancements */
.sidebar-section {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* Tooltip for Collapsed State */
.sidebar-link--icon[title] {
  position: relative !important;
}

.sidebar-collapsed .sidebar-link--icon:hover::after {
  content: attr(title) !important;
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
  color: white !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  animation: tooltipFadeIn 0.2s ease-out !important;
}

.sidebar-collapsed .sidebar-link--icon:hover::before {
  content: '' !important;
  position: absolute !important;
  left: calc(100% + 6px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 6px solid transparent !important;
  border-right-color: rgba(15, 23, 42, 0.95) !important;
  z-index: 1001 !important;
  pointer-events: none !important;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Smooth Scrollbar */
.sidebar-nav {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--color-primary-rgb), 0.3) transparent !important;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px !important;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.3) !important;
  border-radius: 3px !important;
  transition: background 0.2s ease !important;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.5) !important;
}

/* Mobile Responsive Enhancements */
@media (max-width: 1024px) {
  .app-sidebar {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
  }
  
  .sidebar-link--icon {
    padding: 0.875rem !important;
  }
}

/* ========== Dark mode – sidebar matches app dark theme ========== */
.dark .app-sidebar,
[data-theme="dark"] .app-sidebar,
html.dark .app-sidebar,
html[data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 50%, #0f172a 100%) !important;
  color: #f1f5f9 !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35) !important;
}

.dark .app-sidebar .sidebar-brand,
[data-theme="dark"] .app-sidebar .sidebar-brand,
html.dark .app-sidebar .sidebar-brand,
html[data-theme="dark"] .app-sidebar .sidebar-brand {
  background-color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark .app-sidebar .sidebar-meta,
[data-theme="dark"] .app-sidebar .sidebar-meta {
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark .sidebar-collapsed,
[data-theme="dark"] .sidebar-collapsed {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}

.dark .sidebar-link--icon,
[data-theme="dark"] .sidebar-link--icon,
html.dark .sidebar-link--icon,
html[data-theme="dark"] .sidebar-link--icon {
  background: #334155 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  color: #e2e8f0 !important;
}

.dark .sidebar-link--icon:hover,
[data-theme="dark"] .sidebar-link--icon:hover,
html.dark .sidebar-link--icon:hover,
html[data-theme="dark"] .sidebar-link--icon:hover {
  background: #475569 !important;
  border-color: rgba(var(--color-primary-rgb), 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.dark .sidebar-link--icon.sidebar-link--active,
[data-theme="dark"] .sidebar-link--icon.sidebar-link--active,
html.dark .sidebar-link--icon.sidebar-link--active,
html[data-theme="dark"] .sidebar-link--icon.sidebar-link--active {
  background: #1e293b !important;
  border-color: rgba(var(--color-primary-rgb), 0.6) !important;
  border-left-width: 3px !important;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25) !important;
}

.dark .sidebar-link__icon,
[data-theme="dark"] .sidebar-link__icon {
  color: var(--color-primary) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

.dark .sidebar-icon-button--pin,
[data-theme="dark"] .sidebar-icon-button--pin {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  border-color: rgba(var(--color-primary-rgb), 0.4) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.dark .sidebar-icon-button--pin:hover,
[data-theme="dark"] .sidebar-icon-button--pin:hover {
  background: rgba(var(--color-primary-rgb), 0.35) !important;
  color: #e2e8f0 !important;
}

.dark .sidebar-section:hover,
[data-theme="dark"] .sidebar-section:hover,
html.dark .sidebar-section:hover,
html[data-theme="dark"] .sidebar-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Sidebar sections (Overview, Workspace, Firm Admin) – dark background and light text in dark mode */
.dark .app-sidebar .sidebar-section,
[data-theme="dark"] .app-sidebar .sidebar-section,
html.dark .app-sidebar .sidebar-section,
html[data-theme="dark"] .app-sidebar .sidebar-section {
  background-color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.dark .app-sidebar .sidebar-section--accent,
[data-theme="dark"] .app-sidebar .sidebar-section--accent,
html.dark .app-sidebar .sidebar-section--accent,
html[data-theme="dark"] .app-sidebar .sidebar-section--accent {
  background-color: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.dark .app-sidebar .sidebar-section__label,
[data-theme="dark"] .app-sidebar .sidebar-section__label,
html.dark .app-sidebar .sidebar-section__label,
html[data-theme="dark"] .app-sidebar .sidebar-section__label {
  color: #94a3b8 !important;
}

/* Sidebar link text (wide/expanded) – ensure tab names are visible */
.dark .app-sidebar .sidebar-link--wide,
.dark .app-sidebar .sidebar-link--wide span:not(.sidebar-link__icon):not([class*="sr-only"]),
[data-theme="dark"] .app-sidebar .sidebar-link--wide,
[data-theme="dark"] .app-sidebar .sidebar-link--wide span:not(.sidebar-link__icon):not([class*="sr-only"]),
html.dark .app-sidebar .sidebar-link--wide,
html.dark .app-sidebar .sidebar-link--wide span:not(.sidebar-link__icon):not([class*="sr-only"]),
html[data-theme="dark"] .app-sidebar .sidebar-link--wide,
html[data-theme="dark"] .app-sidebar .sidebar-link--wide span:not(.sidebar-link__icon):not([class*="sr-only"]) {
  color: #e2e8f0 !important;
}

.dark .app-sidebar .sidebar-link--wide:hover,
.dark .app-sidebar .sidebar-link--wide.sidebar-link--active,
[data-theme="dark"] .app-sidebar .sidebar-link--wide:hover,
[data-theme="dark"] .app-sidebar .sidebar-link--wide.sidebar-link--active,
html.dark .app-sidebar .sidebar-link--wide:hover,
html.dark .app-sidebar .sidebar-link--wide.sidebar-link--active,
html[data-theme="dark"] .app-sidebar .sidebar-link--wide:hover,
html[data-theme="dark"] .app-sidebar .sidebar-link--wide.sidebar-link--active {
  color: #f1f5f9 !important;
}

.dark .app-sidebar .sidebar-link--wide .sidebar-link__icon,
[data-theme="dark"] .app-sidebar .sidebar-link--wide .sidebar-link__icon,
html.dark .app-sidebar .sidebar-link--wide .sidebar-link__icon,
html[data-theme="dark"] .app-sidebar .sidebar-link--wide .sidebar-link__icon {
  color: var(--color-primary) !important;
}

/* Sidebar brand / logo text and cards – light text in dark mode */
.dark .sidebar-logo__title,
.dark .sidebar-logo__subtitle,
.dark .sidebar-card__label,
.dark .sidebar-card__value,
.dark .sidebar-card__stat,
.dark .sidebar-section__label,
[data-theme="dark"] .sidebar-logo__title,
[data-theme="dark"] .sidebar-logo__subtitle,
[data-theme="dark"] .sidebar-card__label,
[data-theme="dark"] .sidebar-card__value,
[data-theme="dark"] .sidebar-card__stat,
[data-theme="dark"] .sidebar-section__label {
  color: #e2e8f0 !important;
}

.dark .sidebar-logo__subtitle,
.dark .sidebar-card__label,
.dark .sidebar-card__stat,
[data-theme="dark"] .sidebar-logo__subtitle,
[data-theme="dark"] .sidebar-card__label,
[data-theme="dark"] .sidebar-card__stat {
  color: #94a3b8 !important;
}

.dark .sidebar-card,
[data-theme="dark"] .sidebar-card {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(30, 41, 59, 0.5) !important;
}

/* Sidebar link text when expanded (wide mode) – light in dark mode */
.dark .sidebar-link,
.dark .sidebar-link span:not(.sidebar-link__icon):not([class*="sr-only"]),
[data-theme="dark"] .sidebar-link,
[data-theme="dark"] .sidebar-link span:not(.sidebar-link__icon):not([class*="sr-only"]) {
  color: #e2e8f0 !important;
}

.dark .sidebar-link:hover,
[data-theme="dark"] .sidebar-link:hover {
  color: #f1f5f9 !important;
}

/* Search icon inside sidebar – light in dark mode */
.dark .sidebar-search-icon,
.dark .sidebar-search-icon svg,
[data-theme="dark"] .sidebar-search-icon,
[data-theme="dark"] .sidebar-search-icon svg {
  color: #94a3b8 !important;
}

.dark .sidebar-search-clear,
.dark .sidebar-search-clear svg,
[data-theme="dark"] .sidebar-search-clear,
[data-theme="dark"] .sidebar-search-clear svg {
  color: #94a3b8 !important;
}

.dark .sidebar-search-clear:hover,
[data-theme="dark"] .sidebar-search-clear:hover {
  color: #e2e8f0 !important;
}

/* Search input inside sidebar */
.dark .sidebar-nav input,
.dark .sidebar-search-input,
[data-theme="dark"] .sidebar-nav input,
[data-theme="dark"] .sidebar-search-input {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  color: #f1f5f9 !important;
}

.dark .sidebar-nav input::placeholder,
.dark .sidebar-search-input::placeholder,
[data-theme="dark"] .sidebar-nav input::placeholder,
[data-theme="dark"] .sidebar-search-input::placeholder {
  color: #94a3b8 !important;
}

/* Sidebar footer (avatar area) – dark background so no white box in dark mode */
.dark .app-sidebar .sidebar-footer,
[data-theme="dark"] .app-sidebar .sidebar-footer {
  background-color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ========== Dashboard tabs – force light text in dark mode (loads after output.css) ========== */
.dark .dashboard-tab,
.dark .dashboard-tab *,
[data-theme="dark"] .dashboard-tab,
[data-theme="dark"] .dashboard-tab *,
html.dark .dashboard-tab,
html.dark .dashboard-tab *,
html[data-theme="dark"] .dashboard-tab,
html[data-theme="dark"] .dashboard-tab * {
  color: #f1f5f9 !important;
}

.dark .dashboard-tab:not(.active),
.dark .dashboard-tab:not(.active) *,
[data-theme="dark"] .dashboard-tab:not(.active),
[data-theme="dark"] .dashboard-tab:not(.active) *,
html.dark .dashboard-tab:not(.active),
html.dark .dashboard-tab:not(.active) *,
html[data-theme="dark"] .dashboard-tab:not(.active),
html[data-theme="dark"] .dashboard-tab:not(.active) * {
  color: #94a3b8 !important;
}

.dark .dashboard-tab:not(.active):hover,
.dark .dashboard-tab:not(.active):hover *,
[data-theme="dark"] .dashboard-tab:not(.active):hover,
[data-theme="dark"] .dashboard-tab:not(.active):hover *,
html.dark .dashboard-tab:not(.active):hover,
html.dark .dashboard-tab:not(.active):hover *,
html[data-theme="dark"] .dashboard-tab:not(.active):hover,
html[data-theme="dark"] .dashboard-tab:not(.active):hover * {
  color: #e2e8f0 !important;
}