/* ── Theme variables ── */
:root {
  /* Sidebar (light) */
  --sidebar-bg:          #f9fafb;
  --sidebar-text:        #6b7280;
  --sidebar-text-active: #111827;
  --sidebar-hover-bg:    #e5e7eb;
  --sidebar-active-bg:   #e5e7eb;
  --sidebar-border:      #e5e7eb;
  --sidebar-width:       240px;
  --sidebar-collapsed:   64px;

  /* Main content */
  --content-bg:          #ffffff;
  --content-text:        #111827;
  --content-muted:       #6b7280;
  --content-border:      #e5e7eb;
  --content-card-bg:     #f9fafb;

  /* Accent */
  --accent:              #6366f1;
  --accent-hover:        #4f46e5;
  --accent-text:         #ffffff;

  /* Status colours (same in both themes) */
  --status-ok:           #10b981;
  --status-warn:         #f59e0b;
  --status-error:        #ef4444;
  --status-info:         #3b82f6;
}

html.dark {
  --sidebar-bg:          #0d1117;
  --sidebar-text:        #8b949e;
  --sidebar-text-active: #e6edf3;
  --sidebar-hover-bg:    #161b22;
  --sidebar-active-bg:   #21262d;
  --sidebar-border:      #30363d;

  --content-bg:          #0d1117;
  --content-text:        #e6edf3;
  --content-muted:       #8b949e;
  --content-border:      #30363d;
  --content-card-bg:     #161b22;
}

/* ── Global theme transition ── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, fill 0.45s ease, stroke 0.45s ease !important;
}

/* ── Sidebar nav items ── */
.nav-item {
  color: var(--sidebar-text);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-active);
}

/* ── Projects list expand/collapse ── */
#projects-list {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
#projects-list.collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* ── Chevron rotation ── */
#projects-chevron {
  transition: transform 0.2s ease;
}

/* ── Utility overrides for dark mode ── */
html.dark .card {
  background: var(--content-card-bg);
  border-color: var(--content-border);
  color: var(--content-text);
}

/* ── Flyout panel ── */
#sidebar-flyout {
  position: relative;
  z-index: 20;
  transition: width 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}
#sidebar-flyout.open {
  opacity: 1;
}

#flyout-backdrop {
  transition: opacity 0.15s ease;
}

/* ── Assistant panel ── */
#assistant-panel {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}
html.dark #assistant-panel {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

@media (max-width: 639px) {
  #assistant-panel {
    width: 100% !important;
  }
}

/* ── Mobile sidebar ── */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  #mobile-overlay {
    display: none;
  }
  #sidebar.mobile-open ~ #mobile-overlay {
    display: block;
  }
  #mobile-hamburger {
    display: flex;
  }
}
@media (min-width: 768px) {
  #mobile-hamburger {
    display: none !important;
  }
  #mobile-overlay {
    display: none !important;
  }
}