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

/* Modal size variants (desktop only). The general modal defaults to
   max-w-[560px]; injected content can opt into a wider width by including an
   element with data-modal-size="wide"|"xl". Self-resetting: when a small modal
   loads (no marker) the :has() rule stops matching and it returns to 560px.
   Scoped to >=768px so mobile keeps the full-width, single-column layout. */
@media (min-width: 768px) {
  #general-modal:has([data-modal-size="wide"]) { max-width: 820px; }
  #general-modal:has([data-modal-size="xl"])   { max-width: min(1100px, 92vw); }
}

/* Bounded-dialog pattern: cap any modal to the viewport and scroll internally so
   it never runs off the bottom of the screen. The header stays pinned at the top
   of the scroll area (sticky). */
#general-modal { max-height: 90vh; overflow-y: auto; }
#general-modal > #modal-header {
  position: sticky;
  top: -1.5rem;            /* cancel the modal's top padding so it hugs the edge */
  background-color: inherit;   /* opaque; follows light/dark modal bg */
  z-index: 2;
  padding-top: 1.5rem;
  margin-top: -1.5rem;
}

/* Task description editor height (the note editor is sized by its dedicated
   rule further down). Window-relative height that shrinks on short screens and
   scrolls internally so it never dominates the modal. */
.task-description-field trix-editor { height: clamp(140px, 38vh, 480px); overflow-y: auto; }

/* Prevent iOS/Safari date & time inputs from forcing intrinsic width past their container */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

::-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. Tall, viewport-relative
   writing surface that scrolls internally past the cap so Save stays visible. */
.note-editor-wrap trix-editor {
  height: clamp(160px, 50vh, 620px) !important;   /* window-relative: shrinks on short screens */
  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: activity filter chips ── */
.dark .activity-filter-chip.bg-gray-100 {
  background-color: rgba(55, 65, 81, 0.5) !important;
  color: #d1d5db !important;
}
.dark .activity-filter-chip.bg-gray-100:hover {
  background-color: rgba(75, 85, 99, 0.6) !important;
}
.dark .activity-filter-chip.bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
}

/* ── 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); }
}

/* ── Tag picker (mirrors the dependency picker; chips carry their own tag colour) ── */
.tag-picker-wrap {
  position: relative;
}
.tag-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;
}
.tag-picker-chips:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.tag-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;
}
.tag-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;
}
.tag-picker-option,
.tag-picker-create {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}
.tag-picker-option:hover,
.tag-picker-option-active {
  background-color: #eef2ff;
}
.tag-picker-create {
  color: #4f46e5;
  font-weight: 500;
  border-top: 1px solid #f3f4f6;
}
.tag-picker-swatch {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.tag-picker-chip {
  animation: dep-chip-in 0.15s ease;
}

/* ── Dark theme: tag picker ── */
.dark .tag-picker-chips {
  background-color: #1f2937;
  border-color: #4b5563;
}
.dark .tag-picker-chips:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.dark .tag-picker-search { color: #f3f4f6; }
.dark .tag-picker-search::placeholder { color: #6b7280; }
.dark .tag-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 .tag-picker-option { color: #e5e7eb; }
.dark .tag-picker-option:hover,
.dark .tag-picker-option-active { background-color: #374151; }
.dark .tag-picker-create {
  color: #a5b4fc;
  border-top-color: #374151;
}

/* ── 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: Analytics overlay ── */
.dark #analytics-overlay {
  background-color: #111827;
}
.dark #analytics-overlay .border-b,
.dark #analytics-overlay .border {
  border-color: #374151;
}
.dark #analytics-overlay h2,
.dark #analytics-overlay h3 {
  color: #f9fafb;
}
.dark #analytics-overlay .bg-white {
  background-color: #1f2937;
}
.dark #analytics-overlay .text-gray-900 {
  color: #f9fafb;
}
.dark #analytics-overlay .text-gray-700 {
  color: #d1d5db;
}
.dark #analytics-overlay .text-gray-500 {
  color: #9ca3af;
}
.dark #analytics-overlay .text-gray-400 {
  color: #6b7280;
}
.dark #analytics-overlay .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}
.dark #analytics-overlay .border-gray-100 {
  border-color: #374151;
}
.dark #analytics-overlay table th {
  color: #9ca3af;
}
.dark #analytics-overlay table td {
  color: #d1d5db;
}

/* ── Dark theme: Dashboard overdue border ── */
.dark .border-red-200 { border-color: #7f1d1d !important; }
.dark .border-red-100 { border-color: #5a2020 !important; }
.dark .hover\:bg-red-50:hover { background-color: rgba(127, 29, 29, 0.2) !important; }
.dark .bg-amber-50 { background-color: rgba(146, 64, 14, 0.2) !important; }
.dark .hover\:bg-amber-100:hover { background-color: rgba(146, 64, 14, 0.3) !important; }
.dark .border-amber-200 { border-color: rgba(146, 64, 14, 0.4) !important; }
.dark .text-amber-800 { color: #fbbf24 !important; }
.dark .text-amber-700 { color: #fcd34d !important; }
.dark .text-amber-500 { color: #f59e0b !important; }
.dark .bg-amber-600 { background-color: #b45309 !important; }
.dark .hover\:bg-amber-700:hover { background-color: #92400e !important; }

/* ── 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;
}

/* ── Main view "Quiet Grid" reskin ──
   Dissolves the panel cards into flat regions on one near-white surface:
   no shadows, hairline edges, small uppercase panel labels, header actions
   revealed on hover. Chrome-only — gridstack drag/resize, panel IDs and
   HTMX targets are untouched. */

.project-surface {
  background: #ffffff;
  min-height: 100%;
}

/* Panels: hairline edge instead of a floating card. Square corners and a
   surface that matches the panel background make the tight gridstack gutters
   disappear — panels read as regions of one continuous surface. */
#project-grid .grid-stack-item-content,
#project-grid .grid-stack-item-content > div {
  border-radius: 0;
}
#project-grid .grid-stack-item-content > div {
  box-shadow: none;
  border: 1px solid #e8eaee;
}

/* Denser rows inside the regions */
#project-grid #task_list [data-task-status],
#takeover-content #task_list [data-task-status] {
  padding-top: 6px;
  padding-bottom: 6px;
}
#project-grid #note-card-list > [id^="note-"],
#takeover-content #note-card-list > [id^="note-"] {
  padding: 10px;
}
#project-grid #note-card-list > * + *,
#takeover-content #note-card-list > * + * {
  margin-top: 10px;
}

/* A panel being dragged or resized regains elevation ("in hand"),
   then settles back flat */
#project-grid .grid-stack-item.ui-draggable-dragging .grid-stack-item-content > div,
#project-grid .grid-stack-item.ui-resizable-resizing .grid-stack-item-content > div {
  box-shadow: 0 12px 32px rgba(15, 18, 25, 0.16);
  border-color: var(--color-base-300);
}

/* Panel headers: big titles become quiet uppercase labels */
#project-grid .panel-drag-handle,
#takeover-content .panel-drag-handle {
  padding: 9px 14px 5px;
  border-bottom: 0;
}
#project-grid .panel-header-default h2,
#takeover-content .panel-header-default h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-base-500);
}
#project-grid .panel-body,
#takeover-content .panel-body {
  padding: 4px 14px 12px;
}

/* Header action icons appear on hover/focus only. Pointer devices only —
   touch has no hover, so actions stay visible there. :has() keeps them
   visible while one of their dropdown menus is open. */
@media (hover: hover) and (min-width: 768px) {
  #project-grid .panel-header-default > div:last-child {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  #project-grid .grid-stack-item-content > div:hover .panel-header-default > div:last-child,
  #project-grid .panel-header-default > div:last-child:focus-within,
  #project-grid .panel-header-default > div:last-child:has(.absolute:not(.hidden)) {
    opacity: 1;
  }
}

/* Dark theme: the surface matches the panel background (bg-white maps to
   --color-base in dark) so the gutters vanish there too */
.dark .project-surface {
  background: var(--color-base);
}
.dark #project-grid .grid-stack-item-content > div {
  border-color: var(--color-base-200);
}
.dark #project-grid .grid-stack-item.ui-draggable-dragging .grid-stack-item-content > div,
.dark #project-grid .grid-stack-item.ui-resizable-resizing .grid-stack-item-content > div {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ── Task "View options" popover ──
   One labeled menu replaces the old row of ten icon toggles. Desktop: anchored
   dropdown (position set inline by toggleTaskViewMenu so it escapes the
   panel's overflow clipping). Mobile: bottom sheet with 44px touch rows. */

.task-view-menu {
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
.tvm-label {
  padding: 8px 12px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}
.tvm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  font-size: 13px;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.tvm-row:hover { background: #f9fafb; }
.tvm-icon { width: 16px; text-align: center; color: #9ca3af; font-size: 12px; flex: none; }
.tvm-check { margin-left: auto; font-size: 11px; color: #4f46e5; visibility: hidden; }
.tvm-row.on { color: #4338ca; font-weight: 500; }
.tvm-row.on .tvm-check { visibility: visible; }
.tvm-sub { padding-left: 36px; }
.tvm-divider { height: 1px; background: #e5e7eb; margin: 6px 0; }
.tvm-seg { display: flex; gap: 4px; padding: 4px 12px 6px; }
.tvm-seg-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  font-size: 12.5px;
  color: #6b7280;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
}
.tvm-seg-btn.on { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; font-weight: 600; }
.tvm-disabled { opacity: 0.4; pointer-events: none; }

@media (max-width: 767px) {
  #task-view-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    margin: 0;
    border-radius: 14px 14px 0 0;
    max-height: 75vh;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    z-index: 70;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  #task-view-menu .tvm-row { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
  #task-view-menu .tvm-seg-btn { padding: 10px; font-size: 14px; }
  #task-view-menu .tvm-label { padding-top: 12px; }
}

/* Dark theme */
.dark .tvm-label { color: #6b7280; }
.dark .tvm-row { color: #d1d5db; }
.dark .tvm-row:hover { background: #374151; }
.dark .tvm-row.on { color: #a5b0fc; }
.dark .tvm-check { color: #818cf8; }
.dark .tvm-divider { background: #374151; }
.dark .tvm-seg-btn { border-color: #4b5563; color: #9ca3af; }
.dark .tvm-seg-btn.on { background: #312e81; border-color: #4338ca; color: #c7d2fe; }

/* ── Panel takeover (temporary expand-to-fullscreen) ── */
#takeover-frame {
  width: min(1500px, 96vw);
  height: min(92vh, 1000px);
}
/* The moved section keeps its own card classes (bg, radius, shadow) and must
   fill the frame; discussion_section lacks flex-col so force it here. */
.takeover-active {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.takeover-active .takeover-btn { display: none; }
.takeover-active .panel-drag-handle { cursor: default; }
@media (max-width: 767px) {
  #takeover-overlay { padding: 0; }
  #takeover-frame { width: 100vw; height: 100dvh; }
  #takeover-frame > button { top: 6px; right: 6px; }
  .takeover-active { border-radius: 0; }
}
/* While a takeover is open, gridstack resize handles (z-index ~100) would
   paint above the overlay backdrop — hide them */
body.takeover-open .ui-resizable-handle { display: none !important; }

/* ── Search results dropdown ──
   Hide the container unless it holds actual result ELEMENTS. Tailwind's
   `empty:hidden` relies on :empty, which any stray whitespace text node
   defeats — then the bordered box paints as a stray line at z-50 (above the
   z-45 takeover overlay). :not(:has(*)) ignores text nodes, so this survives
   template reformatting. Also force-hidden during a takeover, where the
   header search sits under the overlay and can't be used anyway. */
#search-results:not(:has(*)) { display: none; }
body.takeover-open #search-results { display: none; }

/* ── Task row badges (status / priority) ───────────────────────── */
.task-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.task-badge i { font-size: 9px; }
.task-badge-status-open        { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.task-badge-status-in_progress { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.task-badge-status-done        { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.task-badge-priority-high      { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.task-badge-priority-medium    { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.task-badge-priority-low       { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

.dark .task-badge-status-open        { background: rgba(148,163,184,.12); color: #cbd5e1; border-color: rgba(148,163,184,.25); }
.dark .task-badge-status-in_progress { background: rgba(59,130,246,.15);  color: #93c5fd; border-color: rgba(59,130,246,.35); }
.dark .task-badge-status-done        { background: rgba(16,185,129,.15);  color: #6ee7b7; border-color: rgba(16,185,129,.35); }
.dark .task-badge-priority-high      { background: rgba(239,68,68,.15);   color: #fca5a5; border-color: rgba(239,68,68,.35); }
.dark .task-badge-priority-medium    { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.35); }
.dark .task-badge-priority-low       { background: rgba(148,163,184,.10); color: #94a3b8; border-color: rgba(148,163,184,.22); }

/* Task row layout: one line (details right-aligned) when the row is wide;
   details drop to their own left-aligned line when the panel is narrow.
   Container query on the row itself so nested subtasks decide independently. */
.task-row { container-type: inline-size; }
.task-row-details { margin-left: auto; justify-content: flex-end; }
@container (max-width: 30rem) {
  .task-row-details { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
}