* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-style: normal;
}

::-webkit-scrollbar {
  display: none;
}

body {
  background: #f4f6f8;
  color: #2b2d42;
}

ul {
  list-style-position: inside;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: #1c57ad;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.sidebar .logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sidebar .logo {
  max-width: 100px;
}

.sidebar h2 {
  font-size: 20px;
  margin-bottom: 30px;
}

.sidebar a {
  color: #cbd5e1;
  text-decoration: none;
  margin: 10px 0;
  font-weight: 500;
}

.sidebar a:hover {
  color: #fff;
}

/* Main Content */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: #fff;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workspace-name {
  font-size: 18px;
  font-weight: bold;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}
.content.vertical {
  flex-direction: column;
}

/* Main Panels */
.panel {
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex: 1;
  overflow-y: auto;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
}

.panel h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.right-sidebar {
  width: 250px;
  background: #f8fafc;
  padding: 15px;
  border-left: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.fab {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .container {
    flex-direction: column;
  }

  .sidebar {
    display: none;
  }

  .topbar {
    justify-content: center;
  }

  .content {
    flex-direction: column;
    padding: 10px;
  }

  .right-sidebar {
    display: none;
  }

  /* Bottom Navigation */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e293b;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }

  .bottom-nav a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
  }

  .bottom-nav a.active {
    color: #fff;
    font-weight: bold;
  }
}
.highlighted-section {
  outline: 2px solid #3f20fb;
  background-color: rgba(63, 32, 251, 0.1);
}

.edit-button {
  position: absolute;
  z-index: 1000;
}
:root {
  /* Base colors */
  --color-base: #ffffff;
  --color-base-50: #f9fafb;
  --color-base-100: #f3f4f6;
  --color-base-200: #e5e7eb;
  --color-base-300: #d1d5db;
  --color-base-400: #9ca3af;
  --color-base-500: #6b7280;
  --color-base-600: #4b5563;
  --color-base-700: #374151;
  --color-base-800: #1f2937;
  --color-base-900: #111827;
  --color-base-content: #1f2937;

  /* Primary colors */
  --color-primary: #3b82f6;
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-focus: #2563eb;
  --color-primary-content: #ffffff;

  /* Secondary colors */
  --color-secondary: #8b5cf6;
  --color-secondary-50: #f5f3ff;
  --color-secondary-100: #ede9fe;
  --color-secondary-200: #ddd6fe;
  --color-secondary-300: #c4b5fd;
  --color-secondary-400: #a78bfa;
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #7c3aed;
  --color-secondary-700: #6d28d9;
  --color-secondary-800: #5b21b6;
  --color-secondary-900: #4c1d95;
  --color-secondary-focus: #7c3aed;
  --color-secondary-content: #ffffff;

  /* Accent colors */
  --color-accent: #f472b6;
  --color-accent-50: #fdf2f8;
  --color-accent-100: #fce7f3;
  --color-accent-200: #fbcfe8;
  --color-accent-300: #f9a8d4;
  --color-accent-400: #f472b6;
  --color-accent-500: #ec4899;
  --color-accent-600: #db2777;
  --color-accent-700: #be185d;
  --color-accent-800: #9d174d;
  --color-accent-900: #831843;
  --color-accent-focus: #db2777;
  --color-accent-content: #ffffff;

  /* Neutral colors */
  --color-neutral: #6b7280;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-focus: #4b5563;
  --color-neutral-content: #ffffff;

  /* Info colors */
  --color-info: #3b82f6;
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;
  --color-info-focus: #2563eb;
  --color-info-content: #ffffff;

  /* Success colors */
  --color-success: #10b981;
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;
  --color-success-focus: #059669;
  --color-success-content: #ffffff;

  /* Warning colors */
  --color-warning: #f59e0b;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  --color-warning-focus: #d97706;
  --color-warning-content: #ffffff;

  /* Error colors */
  --color-error: #ef4444;
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;
  --color-error-focus: #dc2626;
  --color-error-content: #ffffff;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Green */
  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;

  /* Blue */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Indigo */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;

  /* Yellow / Amber */
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;

  /* Purple */
  --color-purple-50: #ede9fe;
  --color-purple-100: #ddd6fe;
  --color-purple-200: #ddd6fe;
  --color-purple-300: #c4b5fd;
  --color-purple-400: #a78bfa;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-800: #5b21b6;
  --color-purple-900: #4c1d95;

  /* Pink */
  --color-pink-50: #fce7f3;
  --color-pink-100: #fbcfe8;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;

  /* Orange */
  --color-orange-50: #ffedd5;
  --color-orange-100: #fed7aa;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
}
/* ── Gridstack panel layout ── */
/* Override GridStack's default z-index:100 so panels don't cover slide-in panels */
.grid-stack-item {
  z-index: auto !important;
}

/* Mobile: disable gridstack absolute positioning, stack panels vertically */
@media (max-width: 767px) {
  #project-grid {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    height: auto !important;
    min-height: 0 !important;
  }
  #project-grid > .grid-stack-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #project-grid > .grid-stack-item > .grid-stack-item-content {
    position: static !important;
    height: auto !important;
    overflow: visible;
  }
  #project-grid > .grid-stack-item > .grid-stack-item-content > div {
    height: auto;
    min-height: 300px;
    max-height: 500px;
  }
}

.grid-stack-item-content {
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Each panel card fills the grid-stack-item height */
.grid-stack-item-content > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Scrollable content area within each panel */
.panel-body {
  flex: 1;
  overflow-y: auto;
}

/* Panel filter input (hidden by default, shown when search icon clicked) */
.panel-filter-bar {
  display: none;
}
.panel-filter-bar.active {
  display: flex;
}
.panel-filter-bar.active + .panel-header-default {
  display: none;
}

/* Scroll overflow fade indicators */
.scroll-fade {
  position: relative;
}

.scroll-fade::before,
.scroll-fade::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 24px;
  display: block;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.scroll-fade::before {
  top: 0;
  background: linear-gradient(to bottom, white, transparent);
  margin-bottom: -24px;
}

.scroll-fade::after {
  bottom: 0;
  background: linear-gradient(to top, white, transparent);
  margin-top: -24px;
}

.scroll-fade.fade-top::before {
  opacity: 1;
}

.scroll-fade.fade-bottom::after {
  opacity: 1;
}

/* ── Chat input: Trix editor overrides ── */

/* Hide the form <p> wrapper and label that as_p generates */
.chat-editor-wrap p {
  margin: 0;
  padding: 0;
}
.chat-editor-wrap label {
  display: none;
}

/* Toolbar: hidden by default, shown when toggled */
.chat-input-container trix-toolbar {
  display: none;
  border: none !important;
  background-color: transparent !important;
  padding: 4px 8px !important;
  border-top: 1px solid #e5e7eb !important;
  flex-wrap: wrap;
  gap: 2px;
}
.chat-input-container.show-toolbar trix-toolbar {
  display: flex;
}

/* Reorder: toolbar appears below editor (Trix default is above) */
.chat-input-container .django-prose-editor-container {
  display: flex;
  flex-direction: column-reverse;
}

/* Slim down toolbar buttons */
.chat-input-container trix-toolbar .trix-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none !important;
  border-radius: 4px;
  background-color: transparent !important;
}
.chat-input-container trix-toolbar .trix-button:hover {
  background-color: #e5e7eb !important;
}
.chat-input-container trix-toolbar .trix-button.trix-active {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
}

/* Remove button-group borders and spacing */
.chat-input-container trix-toolbar .trix-button-group {
  border: none !important;
  margin: 0 !important;
  display: flex;
  gap: 1px;
}
.chat-input-container trix-toolbar .trix-button-group + .trix-button-group {
  border: none !important;
  margin-left: 4px !important;
}

/* Hide buttons not needed in chat: heading, indent, outdent, file attach, undo, redo */
.chat-input-container trix-toolbar .trix-button--icon-heading-1,
.chat-input-container trix-toolbar .trix-button--icon-decrease-nesting-level,
.chat-input-container trix-toolbar .trix-button--icon-increase-nesting-level,
.chat-input-container trix-toolbar .trix-button--icon-attach,
.chat-input-container trix-toolbar .trix-button--icon-undo,
.chat-input-container trix-toolbar .trix-button--icon-redo {
  display: none !important;
}

/* Hide the file-tools and history button groups entirely if empty after hiding */
.chat-input-container trix-toolbar .trix-button-group--file-tools,
.chat-input-container trix-toolbar .trix-button-group--history-tools {
  display: none !important;
}

/* Editor area: compact chat-style */
.chat-input-container trix-editor {
  min-height: 40px !important;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.875rem;
  line-height: 1.4;
}
.chat-input-container trix-editor:empty::before {
  color: #9ca3af;
}

/* Remove the default Trix editor focus outline — container handles it */
.chat-input-container trix-editor:focus {
  outline: none;
  box-shadow: none !important;
}

/* ── Note editor: Trix overrides ── */

/* Hide the form label for the text field */
.note-editor-wrap label[for$="_text"] {
  display: none;
}

/* Toolbar: always visible, clean flat style */
.note-editor-wrap trix-toolbar {
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: none !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  padding: 4px 6px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Compact toolbar buttons */
.note-editor-wrap trix-toolbar .trix-button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none !important;
  border-radius: 4px;
  background-color: transparent !important;
}
.note-editor-wrap trix-toolbar .trix-button:hover {
  background-color: #e5e7eb !important;
}
.note-editor-wrap trix-toolbar .trix-button.trix-active {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
}

/* Clean button group separators */
.note-editor-wrap trix-toolbar .trix-button-group {
  border: none !important;
  margin: 0 !important;
  display: flex;
  gap: 1px;
}
.note-editor-wrap trix-toolbar .trix-button-group + .trix-button-group {
  border: none !important;
  margin-left: 6px !important;
  padding-left: 6px;
  border-left: 1px solid #e5e7eb !important;
}

/* Hide undo/redo and file attach — Cmd+Z works, files not needed for notes */
.note-editor-wrap trix-toolbar .trix-button--icon-attach,
.note-editor-wrap trix-toolbar .trix-button--icon-undo,
.note-editor-wrap trix-toolbar .trix-button--icon-redo {
  display: none !important;
}
.note-editor-wrap trix-toolbar .trix-button-group--file-tools,
.note-editor-wrap trix-toolbar .trix-button-group--history-tools {
  display: none !important;
}

/* Editor area: clean with connected border to toolbar */
.note-editor-wrap trix-editor {
  min-height: 200px !important;
  max-height: 50vh;
  overflow-y: auto;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-top: none !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  background-color: #ffffff !important;
  font-size: 0.875rem;
  line-height: 1.6;
}
.note-editor-wrap trix-editor:focus {
  outline: none;
  box-shadow: none !important;
  border-color: #a5b4fc !important;
}
/* Also highlight toolbar border when editor is focused */
.note-editor-wrap trix-editor:focus ~ trix-toolbar,
.note-editor-wrap:has(trix-editor:focus) trix-toolbar {
  border-color: #a5b4fc !important;
}

/* ── File folder collapsible caret ── */
details.file-folder-group > summary {
  list-style: none;
}
details.file-folder-group > summary::-webkit-details-marker {
  display: none;
}
details[open].file-folder-group .folder-caret {
  transform: rotate(90deg);
}

/* ── File drop overlay ── */
#file-drop-overlay {
  transition: opacity 0.15s ease;
}

/* ── Image lightbox zoom ── */
#lightbox-img {
  transition: transform 0.2s ease;
}

/* ── Dark theme */
.dark {
  /* Base colors */
  --color-base: #1f2937;
  --color-base-50: #111827;
  --color-base-100: #1f2937;
  --color-base-200: #374151;
  --color-base-300: #4b5563;
  --color-base-400: #6b7280;
  --color-base-500: #9ca3af;
  --color-base-600: #d1d5db;
  --color-base-700: #e5e7eb;
  --color-base-800: #f3f4f6;
  --color-base-900: #f9fafb;
  --color-base-content: #f9fafb;

  /* Primary colors */
  --color-primary: #60a5fa;
  --color-primary-50: #1e3a8a;
  --color-primary-100: #1e40af;
  --color-primary-200: #1d4ed8;
  --color-primary-300: #2563eb;
  --color-primary-400: #3b82f6;
  --color-primary-500: #60a5fa;
  --color-primary-600: #93c5fd;
  --color-primary-700: #bfdbfe;
  --color-primary-800: #dbeafe;
  --color-primary-900: #eff6ff;
  --color-primary-focus: #3b82f6;
  --color-primary-content: #1f2937;

  /* Secondary colors */
  --color-secondary: #a78bfa;
  --color-secondary-50: #4c1d95;
  --color-secondary-100: #5b21b6;
  --color-secondary-200: #6d28d9;
  --color-secondary-300: #7c3aed;
  --color-secondary-400: #8b5cf6;
  --color-secondary-500: #a78bfa;
  --color-secondary-600: #c4b5fd;
  --color-secondary-700: #ddd6fe;
  --color-secondary-800: #ede9fe;
  --color-secondary-900: #f5f3ff;
  --color-secondary-focus: #8b5cf6;
  --color-secondary-content: #1f2937;

  /* Accent colors */
  --color-accent: #f472b6;
  --color-accent-50: #831843;
  --color-accent-100: #9d174d;
  --color-accent-200: #be185d;
  --color-accent-300: #db2777;
  --color-accent-400: #ec4899;
  --color-accent-500: #f472b6;
  --color-accent-600: #f9a8d4;
  --color-accent-700: #fbcfe8;
  --color-accent-800: #fce7f3;
  --color-accent-900: #fdf2f8;
  --color-accent-focus: #ec4899;
  --color-accent-content: #1f2937;

  /* Neutral colors remain the same as light theme */

  /* Info colors */
  --color-info: #60a5fa;
  --color-info-50: #1e3a8a;
  --color-info-100: #1e40af;
  --color-info-200: #1d4ed8;
  --color-info-300: #2563eb;
  --color-info-400: #3b82f6;
  --color-info-500: #60a5fa;
  --color-info-600: #93c5fd;
  --color-info-700: #bfdbfe;
  --color-info-800: #dbeafe;
  --color-info-900: #eff6ff;
  --color-info-focus: #3b82f6;
  --color-info-content: #1f2937;

  /* Success colors */
  --color-success: #34d399;
  --color-success-50: #064e3b;
  --color-success-100: #065f46;
  --color-success-200: #047857;
  --color-success-300: #059669;
  --color-success-400: #10b981;
  --color-success-500: #34d399;
  --color-success-600: #6ee7b7;
  --color-success-700: #a7f3d0;
  --color-success-800: #d1fae5;
  --color-success-900: #ecfdf5;
  --color-success-focus: #10b981;
  --color-success-content: #1f2937;

  /* Warning colors */
  --color-warning: #fbbf24;
  --color-warning-50: #78350f;
  --color-warning-100: #92400e;
  --color-warning-200: #b45309;
  --color-warning-300: #d97706;
  --color-warning-400: #f59e0b;
  --color-warning-500: #fbbf24;
  --color-warning-600: #fcd34d;
  --color-warning-700: #fde68a;
  --color-warning-800: #fef3c7;
  --color-warning-900: #fffbeb;
  --color-warning-focus: #f59e0b;
  --color-warning-content: #1f2937;

  /* Error colors */
  --color-error: #f87171;
  --color-error-50: #7f1d1d;
  --color-error-100: #991b1b;
  --color-error-200: #b91c1c;
  --color-error-300: #dc2626;
  --color-error-400: #ef4444;
  --color-error-500: #f87171;
  --color-error-600: #fca5a5;
  --color-error-700: #fecaca;
  --color-error-800: #fee2e2;
  --color-error-900: #fef2f2;
  --color-error-focus: #ef4444;
  --color-error-content: #1f2937;

  /* Red — dark tinted backgrounds, brighter text */
  --color-red-50: #451a1a;
  --color-red-100: #5a2020;
  --color-red-200: #7f1d1d;
  --color-red-300: #991b1b;
  --color-red-400: #ef4444;
  --color-red-500: #f87171;
  --color-red-600: #f87171;
  --color-red-700: #fca5a5;
  --color-red-800: #fecaca;
  --color-red-900: #fef2f2;

  /* Green */
  --color-green-50: #14362a;
  --color-green-100: #1a4434;
  --color-green-200: #065f46;
  --color-green-300: #059669;
  --color-green-400: #34d399;
  --color-green-500: #34d399;
  --color-green-600: #34d399;
  --color-green-700: #6ee7b7;
  --color-green-800: #a7f3d0;
  --color-green-900: #ecfdf5;

  /* Blue */
  --color-blue-50: #172554;
  --color-blue-100: #1e3a5f;
  --color-blue-200: #1e40af;
  --color-blue-300: #2563eb;
  --color-blue-400: #60a5fa;
  --color-blue-500: #60a5fa;
  --color-blue-600: #60a5fa;
  --color-blue-700: #93c5fd;
  --color-blue-800: #bfdbfe;
  --color-blue-900: #eff6ff;

  /* Indigo */
  --color-indigo-50: #1e1b4b;
  --color-indigo-100: #272363;
  --color-indigo-200: #3730a3;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #c7d2fe;
  --color-indigo-900: #312e81;

  /* Yellow / Amber */
  --color-yellow-50: #422d0a;
  --color-yellow-100: #523a0e;
  --color-yellow-200: #92400e;
  --color-yellow-300: #d97706;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #fbbf24;
  --color-yellow-600: #fbbf24;
  --color-yellow-700: #fcd34d;
  --color-yellow-800: #fef3c7;
  --color-yellow-900: #fffbeb;

  /* Purple — dark tinted backgrounds, brighter text */
  --color-purple-50: #2e1065;
  --color-purple-100: #3b1a80;
  --color-purple-200: #4c1d95;
  --color-purple-300: #6d28d9;
  --color-purple-400: #a78bfa;
  --color-purple-500: #a78bfa;
  --color-purple-600: #a78bfa;
  --color-purple-700: #c4b5fd;
  --color-purple-800: #ddd6fe;
  --color-purple-900: #f5f3ff;

  /* Pink — dark tinted backgrounds, brighter text */
  --color-pink-50: #500724;
  --color-pink-100: #6b0f30;
  --color-pink-200: #831843;
  --color-pink-300: #be185d;
  --color-pink-400: #f472b6;
  --color-pink-500: #f472b6;
  --color-pink-600: #f472b6;
  --color-pink-700: #f9a8d4;
  --color-pink-800: #fbcfe8;
  --color-pink-900: #fdf2f8;

  /* Orange — dark tinted backgrounds, brighter text */
  --color-orange-50: #431407;
  --color-orange-100: #5c1e0e;
  --color-orange-200: #7c2d12;
  --color-orange-300: #c2410c;
  --color-orange-400: #fb923c;
  --color-orange-500: #fb923c;
  --color-orange-600: #fb923c;
  --color-orange-700: #fdba74;
  --color-orange-800: #fed7aa;
  --color-orange-900: #fff7ed;

  /* bg-white and border-white overrides (white stays #fff for text) */
  .bg-white { background-color: var(--color-base) !important; }
  .border-white { border-color: var(--color-base-200) !important; }

  /* Scroll fade dark theme */
  .scroll-fade::before {
    background: linear-gradient(to bottom, var(--color-base-100), transparent);
  }
  .scroll-fade::after {
    background: linear-gradient(to top, var(--color-base-100), transparent);
  }
}

/* ── Dark theme: non-variable overrides ──
   Colors are now handled via CSS variables in :root / .dark above.
   These rules cover elements not controlled by Tailwind utilities. */

/* Body background (set via plain CSS, not Tailwind) */
.dark body { background-color: #111827; color: #f9fafb; }
.dark .panel { background: var(--color-base); }
.dark .topbar { background: var(--color-base); }
.dark .right-sidebar { background: var(--color-base-50); border-left-color: var(--color-base-200); }

/* Shadows — deeper in dark mode */
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4) !important; }
.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3) !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }

/* Divide colors (Tailwind uses border-color internally) */
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-base-200); }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-base-200); }

/* ── Dark theme: task item done state ── */
.dark .bg-gray-50\/50 { background-color: rgba(55, 65, 81, 0.3) !important; }

/* ── @mention spans in rendered content ── */
.mention {
  background-color: #e0e7ff;
  color: #4338ca;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── @mention autocomplete dropdown ── */
.mention-dropdown {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 4px 0;
  max-height: 192px;
  overflow-y: auto;
  width: 224px;
  z-index: 50;
}

.mention-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}

.mention-dropdown-item:hover,
.mention-dropdown-item-active {
  background-color: #eef2ff;
}

.mention-dropdown-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-avatar {
  height: 24px;
  width: 24px;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Dark theme: mentions ── */
.dark .mention {
  background-color: #312e81;
  color: #a5b4fc;
}
.dark .mention-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}
.dark .mention-dropdown-item:hover,
.dark .mention-dropdown-item-active {
  background-color: #374151;
}
.dark .mention-dropdown-item {
  color: #e5e7eb;
}

/* ── Dependency picker ─────────────────────────────────────── */
.dep-picker-wrap {
  position: relative;
}
.dep-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 6px;
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  cursor: text;
}
.dep-picker-chips:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.dep-picker-search {
  flex: 1;
  min-width: 80px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 4px;
  font-size: 0.875rem;
  background: transparent !important;
}
.dep-picker-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  max-height: 192px;
  overflow-y: auto;
  z-index: 50;
  padding: 4px 0;
}
.dep-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}
.dep-picker-option:hover {
  background-color: #eef2ff;
}
.dep-picker-option-active {
  background-color: #eef2ff;
}
.dep-picker-empty {
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: #9ca3af;
  text-align: center;
}
.dep-picker-chip {
  animation: dep-chip-in 0.15s ease;
}
@keyframes dep-chip-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Dark theme: dependency picker ── */
.dark .dep-picker-chips {
  background-color: #1f2937;
  border-color: #4b5563;
}
.dark .dep-picker-chips:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.dark .dep-picker-search {
  color: #f3f4f6;
}
.dark .dep-picker-search::placeholder {
  color: #6b7280;
}
.dark .dep-picker-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}
.dark .dep-picker-option:hover,
.dark .dep-picker-option-active {
  background-color: #374151;
}
.dark .dep-picker-option {
  color: #e5e7eb;
}
.dark .dep-picker-empty {
  color: #6b7280;
}
.dark .dep-picker-chip {
  background-color: #312e81;
  color: #a5b4fc;
}
.dark .dep-picker-chip-remove {
  color: #818cf8;
}
.dark .dep-picker-chip-remove:hover {
  color: #c7d2fe;
}

/* ── Dark theme: Trix editor ── */
.dark trix-editor {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}
.dark trix-toolbar {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
.dark trix-toolbar .trix-button {
  background-color: transparent !important;
  color: #d1d5db !important;
  border-color: #4b5563 !important;
}
.dark trix-toolbar .trix-button:hover {
  background-color: #374151 !important;
}
.dark trix-toolbar .trix-button.trix-active {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
}
.dark trix-toolbar .trix-button-group {
  border-color: #4b5563 !important;
}
.dark trix-toolbar .trix-button-group + .trix-button-group {
  border-left-color: #4b5563 !important;
}
.dark trix-editor .attachment__caption-editor {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
}

/* ── Dark theme: chat input container ── */
.dark .chat-input-container {
  background-color: #1f2937;
  border-color: #374151;
}
.dark .chat-input-container:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}
.dark .chat-input-container trix-editor {
  background: transparent !important;
}
.dark .chat-input-container trix-toolbar {
  border-top-color: #374151 !important;
}
.dark .chat-input-container trix-toolbar .trix-button:hover {
  background-color: #374151 !important;
}
.dark .chat-input-container trix-toolbar .trix-button.trix-active {
  background-color: #312e81 !important;
  color: #a5b4fc !important;
}
.dark .chat-input-container .border-gray-100 {
  border-color: #374151;
}
.dark #chat-format-toggle {
  color: #6b7280;
}
.dark #chat-format-toggle:hover {
  color: #d1d5db;
  background-color: #374151;
}
.dark #chat-format-toggle.text-indigo-600 {
  color: #a5b4fc !important;
  background-color: #312e81 !important;
}

/* ── Dark theme: note editor ── */
.dark .note-editor-wrap trix-toolbar {
  background-color: #111827 !important;
  border-color: #374151 !important;
}
.dark .note-editor-wrap trix-toolbar .trix-button:hover {
  background-color: #374151 !important;
}
.dark .note-editor-wrap trix-toolbar .trix-button.trix-active {
  background-color: #312e81 !important;
  color: #a5b4fc !important;
}
.dark .note-editor-wrap trix-toolbar .trix-button-group + .trix-button-group {
  border-left-color: #374151 !important;
}
.dark .note-editor-wrap trix-editor {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}
.dark .note-editor-wrap trix-editor:focus {
  border-color: #6366f1 !important;
}
.dark .note-editor-wrap:has(trix-editor:focus) trix-toolbar {
  border-color: #6366f1 !important;
}
.dark .note-editor-wrap .border-gray-100 {
  border-color: #374151;
}

/* ── Dark theme: file drop overlay ── */
.dark #file-drop-overlay {
  background-color: rgba(17, 24, 39, 0.9);
}

/* ── Dark theme: confirm modal ── */
.dark #confirm-modal {
  background-color: #1f2937;
  border-color: #374151;
}

/* ── Dark theme: form inputs (global override for non-Tailwind inputs) ── */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark textarea,
.dark select {
  background-color: #1f2937;
  color: #f3f4f6;
  border-color: #4b5563;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #6b7280;
}

/* ── Gantt chart status bar colors ── */
.gantt-status-open .bar {
  fill: #60a5fa;
}
.gantt-status-open .bar-progress {
  fill: #3b82f6;
}
.gantt-status-in-progress .bar {
  fill: #fbbf24;
}
.gantt-status-in-progress .bar-progress {
  fill: #f59e0b;
}
.gantt-status-done .bar {
  fill: #34d399;
}
.gantt-status-done .bar-progress {
  fill: #10b981;
}
.gantt-status-done .bar-label {
  text-decoration: line-through;
}

/* ── Dark theme: Gantt overlay ── */
.dark #gantt-overlay {
  background-color: #111827;
}
.dark #gantt-overlay .border-b {
  border-color: #374151;
}
.dark #gantt-overlay h2 {
  color: #f9fafb;
}
.dark #gantt-overlay .text-gray-400 {
  color: #9ca3af;
}
.dark #gantt-excluded-notice {
  background-color: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

/* ── Dark theme: Frappe Gantt internals ── */
.dark .gantt-container {
  background: #1f2937;
}
.dark .gantt .grid-header {
  fill: #1f2937;
  stroke: #374151;
}
.dark .gantt .grid-row {
  fill: #1f2937;
}
.dark .gantt .grid-row:nth-child(even) {
  fill: #111827;
}
.dark .gantt .row-line {
  stroke: #374151;
}
.dark .gantt .tick {
  stroke: #374151;
}
.dark .gantt .today-highlight {
  fill: rgba(99, 102, 241, 0.15);
}
.dark .gantt .upper-text,
.dark .gantt .lower-text {
  fill: #d1d5db;
}
.dark .gantt .bar-label {
  fill: #f9fafb;
}
.dark .gantt .arrow {
  stroke: #6b7280;
}
.dark .gantt .handle {
  fill: #6b7280;
}
.dark .gantt .popup-wrapper .pointer {
  fill: #374151;
}
.dark .gantt .popup-wrapper .details-container {
  background: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}