/*
  JARVIS Projects + Tasks — scoped redesign. (Phase 10b.)
  Loaded by projects.html AND tasks.html ONLY. Requires
  jarvis-design-system.css + jarvis-components.css loaded first.
  Replaces projects-tasks-redesign.css (Phase 4's purple/dark override
  layer, left on disk untouched/unloaded — same posture Phase 10a took
  with the old per-page dashboard.css). projects.css / tasks.css (the
  original base files) stay loaded underneath, same as styles.css does
  for chrome on every other page.
*/

/* ============ Chrome — identical markup to Home, same overrides ============ */

html, body {
  background: var(--db-bg);
  color: var(--db-text);
  font-family: var(--font-body);
}

.user-avatar {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)) !important;
}

/* ============ Main content ============ */

.projects-main,
.dashboard-main3 {
  margin-left: 0 !important;
  width: auto !important;
  background: var(--db-bg);
  color: var(--db-text);
  min-height: calc(100vh - var(--jx-shell-h, 52px));
  padding: var(--space-6) var(--space-8) var(--space-10);
}

.projects-main *,
.dashboard-main3 * {
  box-sizing: border-box;
}

/* ============ Page headers ============ */

.projects-header h1,
.content-header3 h1 {
  font-family: var(--font-display);
  font-size: var(--text-page-title-size);
  font-weight: var(--text-page-title-weight);
  color: var(--db-text);
}

.projects-header p,
.content-header3 p {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  color: var(--db-text-muted);
}

/* ============ Projects: stat strip ============ */

.projects-stats {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.stat-card-small {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  min-width: 180px;
}

.stat-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--db-radius-sm);
  background: var(--db-primary-soft);
  flex-shrink: 0;
}

.stat-content-small h3 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--db-text);
  margin: 0;
}

.stat-content-small p {
  font-size: var(--text-metadata-size);
  color: var(--db-text-muted);
  margin: 2px 0 0;
}

/* ============ Projects: filter row (chip-toggle look) ============ */

.projects-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.project-filter {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text-muted);
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: var(--db-radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.project-filter:hover {
  border-color: var(--db-primary);
  color: var(--db-primary);
}

.project-filter.active {
  background: var(--db-primary);
  border-color: var(--db-primary);
  color: white;
}

/* ============ Projects: header actions ============ */

.projects-header-actions .btn,
#new-project-btn,
#reports-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--db-radius-full);
  border: 1px solid transparent;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.projects-header-actions .btn-primary {
  background: var(--db-primary);
  color: white;
}

.projects-header-actions .btn-primary:hover {
  background: var(--db-primary-hover);
}

.projects-header-actions .btn-secondary {
  background: var(--db-surface);
  border-color: var(--db-border);
  color: var(--db-text);
}

.projects-header-actions .btn-secondary:hover {
  border-color: var(--db-primary);
  color: var(--db-primary);
}

/* ============ Projects: card grid ============ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-5);
}

.project-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.project-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.project-key {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--db-primary);
  background: var(--db-primary-soft);
  padding: 3px 9px;
  border-radius: var(--db-radius-full);
}

.project-card-actions {
  display: flex;
  gap: 4px;
}

.project-action-btn {
  background: transparent;
  border: none;
  border-radius: var(--db-radius-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.project-action-btn:hover {
  opacity: 1;
  background: var(--db-surface-hover);
}

.project-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border-radius: var(--db-radius-sm);
  background: var(--db-primary-soft);
  margin: var(--space-3) 0 var(--space-2);
}

.project-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-card-title-size);
  font-weight: 700;
  color: var(--db-text);
  margin: 0 0 4px;
}

.project-card > p {
  font-size: var(--text-body-size);
  color: var(--db-text-muted);
  margin: 0 0 var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: var(--db-radius-full);
  text-transform: capitalize;
  background: var(--db-surface-sunken);
  color: var(--db-text-muted);
  border: 1px solid var(--db-border);
}

.project-status.active   { background: var(--db-success-soft); color: var(--db-success); border-color: transparent; }
.project-status.planning { background: var(--db-info-soft);    color: var(--db-info);    border-color: transparent; }
.project-status.on-hold  { background: var(--db-warning-soft); color: var(--db-warning); border-color: transparent; }
.project-status.completed{ background: var(--db-success-soft); color: var(--db-success); border-color: transparent; }
.project-status.archived { background: var(--db-surface-sunken); color: var(--db-text-faint); border-color: var(--db-border); }

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--db-border);
}

.project-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.project-progress {
  text-align: right;
}

.project-progress-text {
  font-size: 11px;
  color: var(--db-text-faint);
  margin-bottom: 4px;
}

.project-progress-bar {
  width: 96px;
  height: 5px;
  border-radius: var(--db-radius-full);
  background: var(--db-surface-sunken);
  overflow: hidden;
}

.project-progress-fill {
  height: 100%;
  background: var(--brand-accent);
  border-radius: var(--db-radius-full);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-5);
  gap: var(--space-2);
  color: var(--db-text-muted);
}

.empty-state-icon {
  font-size: 28px;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.empty-state h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--db-text);
  margin: 0;
}

.empty-state .btn-primary {
  margin-top: var(--space-2);
  background: var(--db-primary);
  color: white;
  border: none;
  border-radius: var(--db-radius-full);
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
}

/* ============ Modals (New Project wizard, Edit Project, Reports,
   Task Creation, Sprint, Label) — restyle the existing .modal shell
   shared by every modal on both pages. Cosmetic only; no JS changed. ============ */

/* The base .modal system (z-index:1000, tasks.css) now sits below the
   Task Details .jdrawer (--z-drawer: 1150) — a modal opened from
   within the drawer (e.g. the Label picker, via addLabel()) would
   render invisibly behind it without this. */
.modal {
  z-index: var(--z-modal) !important;
}

.modal.active {
  background: rgba(11, 22, 38, 0.45);
}

.modal-content {
  background: var(--db-surface) !important;
  border-radius: var(--db-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--db-border);
}

.modal-header {
  border-bottom: 1px solid var(--db-border) !important;
}

.modal-header h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--db-text) !important;
}

.modal-close {
  color: var(--db-text-faint) !important;
}

.modal-close:hover {
  background: var(--db-surface-hover) !important;
  color: var(--db-text) !important;
}

.modal label {
  color: var(--db-text-muted) !important;
}

.modal input[type="text"],
.modal input[type="date"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="color"],
.modal select,
.modal textarea {
  background: var(--db-bg) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
  border-radius: var(--db-radius-sm) !important;
}

.modal input[type="text"]:focus,
.modal input[type="date"]:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none !important;
  border-color: var(--db-primary) !important;
  box-shadow: 0 0 0 3px var(--db-primary-soft) !important;
}

.modal .btn {
  font-family: inherit;
  border-radius: var(--db-radius-full) !important;
  font-weight: 600 !important;
}

.modal .btn-primary {
  background: var(--db-primary) !important;
  border-color: var(--db-primary) !important;
  color: white !important;
}

.modal .btn-primary:hover {
  background: var(--db-primary-hover) !important;
}

.modal .btn-secondary {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
}

.modal .btn-secondary:hover {
  border-color: var(--db-primary) !important;
  color: var(--db-primary) !important;
}

.modal .btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.modal-actions {
  border-top: 1px solid var(--db-border) !important;
}

/* Edit Project modal's Project Key field had a hardcoded dark inline
   background (#1a1a1a) that would show through as a black box on the
   new light modal. */
#edit-project-key {
  background: var(--db-surface-sunken) !important;
  color: var(--db-text-muted) !important;
}

/* New Project wizard: step progress indicator */

.setup-progress {
  background: var(--db-surface-sunken);
  border-bottom: 1px solid var(--db-border);
}

.setup-step .step-number {
  background: var(--db-border);
  color: var(--db-text-muted);
}

.setup-step.active .step-number {
  background: var(--db-primary);
  color: white;
}

.setup-step .step-label {
  color: var(--db-text-faint);
}

.setup-step.active .step-label {
  color: var(--db-text);
}

.config-list {
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  overflow: hidden;
}

.config-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--db-surface) !important;
  color: var(--db-text) !important;
  border-bottom: 1px solid var(--db-border);
  padding: 10px 12px;
}

.config-item:last-child {
  border-bottom: none;
}

.config-item-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.config-item span {
  flex: 1;
  font-size: 13px;
  color: var(--db-text);
}

.config-item-remove {
  background: transparent;
  border: none;
  color: var(--db-danger);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
}

.config-item-remove:hover {
  opacity: 1;
}

.column-config-item {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.column-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.column-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--db-text);
}

.column-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--db-surface-sunken) !important;
}

.status-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.status-checkbox-label {
  font-size: 11px;
  font-weight: 650;
  color: white;
  padding: 2px 8px;
  border-radius: var(--db-radius-full);
}

.config-item-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}

.config-item-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--db-border-strong);
  border-radius: var(--db-radius-full);
  transition: background var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.config-item-toggle input:checked + .toggle-slider {
  background: var(--db-primary);
}

.config-item-toggle input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.config-item-badge {
  font-size: 10.5px;
  font-weight: 650;
  color: white;
  background: var(--db-text-faint);
  padding: 2px 8px;
  border-radius: var(--db-radius-full);
  flex-shrink: 0;
}

.add-item-form input,
.add-item-form select {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
}

/* Reports modal's own inline-styled result panel */
#report-content {
  background: var(--db-surface-sunken) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
}

/* ============ Tasks: My Tasks / Project Board segmented switch ============ */

.pt-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-full);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.pt-tab {
  border: none;
  background: transparent;
  color: var(--db-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--db-radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.pt-tab:hover {
  color: var(--db-text);
}

.pt-tab.active {
  background: var(--db-primary);
  color: white;
}

/* ============ Tasks: My Tasks cross-project columns ============
   Same task-row visual language as Home's My Work section, for
   cross-page consistency. */

.pt-mytasks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.pt-mytasks-col {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.pt-mytasks-col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--db-text-faint);
  margin-bottom: var(--space-3);
}

.pt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pt-dot-danger  { background: var(--db-danger); }
.pt-dot-warning { background: var(--db-warning); }
.pt-dot-neutral { background: var(--db-text-faint); }

.pt-mytasks-empty {
  font-size: 12.5px;
  color: var(--db-text-faint);
  padding: var(--space-3) 2px;
}

.pt-mytask-item {
  padding: 9px 6px;
  border-radius: var(--db-radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.pt-mytask-item:hover {
  background: var(--db-surface-hover);
}

.pt-mytask-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--db-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-mytask-meta {
  display: flex;
  gap: var(--space-3);
  font-size: 11.5px;
  color: var(--db-text-faint);
  margin-top: 2px;
}

.pt-mytask-project {
  color: var(--db-primary);
}

/* ============ Tasks: Project Board — filters, view switcher ============ */

#new-task-btn,
#manage-sprints-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--db-radius-full) !important;
  border: 1px solid transparent;
  padding: 9px 18px;
  cursor: pointer;
}

#new-task-btn.btn-primary {
  background: var(--db-primary) !important;
  color: white !important;
}

#new-task-btn.btn-primary:hover {
  background: var(--db-primary-hover) !important;
}

#manage-sprints-btn.btn-secondary {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
}

.tasks-filters {
  margin: var(--space-4) 0;
}

.filter-dropdowns select,
#filter-sprint, #filter-status, #filter-priority, #filter-sort, #filter-timeline {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
  border-radius: var(--db-radius-sm) !important;
  font-size: 12.5px !important;
  padding: 7px 10px !important;
}

.view-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  margin-bottom: var(--space-4);
}

.view-btn {
  background: transparent;
  border: none;
  border-radius: var(--db-radius-sm);
  color: var(--db-text-faint);
  padding: 7px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.view-btn:hover {
  background: var(--db-surface-hover);
  color: var(--db-text-muted);
}

.view-btn.active {
  background: var(--db-primary-soft);
  color: var(--db-primary);
}

/* ============ Tasks: Kanban ============ */

.tasks-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-4);
  align-items: start;
  width: 100% !important;
  margin-bottom: 0;
}

.task-column {
  background: var(--db-surface-sunken);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: var(--space-3);
}

.task-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px var(--space-3);
}

.task-column-header h3 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--db-text);
  margin: 0;
}

.task-column-header .task-count {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text-faint);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--db-radius-full);
  padding: 1px 8px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.task-list.drag-over {
  background: var(--db-primary-soft);
  border-radius: var(--db-radius-sm);
}

.task-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-left: 3px solid var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.task-card:hover {
  box-shadow: var(--shadow-md);
}

.task-card.completed {
  opacity: 0.6;
}

.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.task-card h4 {
  font-size: 13px;
  font-weight: 650;
  color: var(--db-text);
  margin: 0 0 4px;
}

.task-card p {
  font-size: 12px;
  color: var(--db-text-muted);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--db-radius-full);
}

.task-priority.high   { background: var(--db-danger-soft);  color: var(--db-danger); }
.task-priority.medium { background: var(--db-warning-soft); color: var(--db-warning); }
.task-priority.low    { background: var(--db-surface-sunken); color: var(--db-text-faint); }

.task-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--db-text-faint);
  margin-bottom: 8px;
}

.task-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--db-text-muted);
}

.assignee-avatar,
.list-assignee-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
}

.task-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.task-label-tag {
  font-size: 10px;
  font-weight: 650;
  color: white;
  padding: 2px 8px;
  border-radius: var(--db-radius-full);
}

/* ============ Tasks: List view ============ */

.list-container {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  overflow: hidden;
}

.tasks-table {
  width: 100%;
  border-collapse: collapse;
}

.tasks-table th {
  text-align: left;
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--db-text-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--db-border);
  background: var(--db-surface-sunken);
}

.tasks-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--db-border);
  vertical-align: top;
}

.tasks-table tbody tr {
  transition: background var(--duration-fast) var(--ease-standard);
}

.tasks-table tbody tr:hover {
  background: var(--db-surface-hover);
}

.list-task-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--db-text);
}

.list-task-desc {
  font-size: 11.5px;
  color: var(--db-text-faint);
  margin-top: 2px;
}

.list-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--db-text-muted);
}

/* ============ Tasks: Gantt view ============ */

.tasks-gantt-view {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
}

.gantt-container {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: var(--space-4);
  overflow-x: auto;
}

.gantt-header {
  border-bottom: 1px solid var(--db-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.timeline-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  color: var(--db-text-faint);
  background: var(--db-surface-sunken) !important;
  margin-right: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--db-radius-sm);
}

.gantt-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 4px;
  background: var(--db-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--db-border);
}

.gantt-task-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 220px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--db-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-bar-container {
  position: relative;
  flex: 1;
  height: 22px;
}

.gantt-bar {
  position: absolute;
  height: 20px;
  border-radius: var(--db-radius-sm);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 650;
  color: white;
  white-space: nowrap;
  overflow: hidden;
}

.gantt-bar.high   { background: var(--db-danger); }
.gantt-bar.medium { background: var(--db-warning); }
.gantt-bar.low    { background: var(--db-text-faint); }

/* ============ Tasks: Task Details drawer ============
   #task-details-modal is now a .jdrawer.jdrawer-lg (see tasks.html) —
   widened further here since its two-column body (main content +
   320px metadata sidebar) needs more room than the generic 760px
   jdrawer-lg variant gives most content. */

#task-details-modal.jdrawer {
  width: 920px;
}

.task-details-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-type-badge {
  background: var(--db-primary-soft);
  color: var(--db-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--db-radius-full);
}

.task-id {
  font-size: 12px;
  color: var(--db-text-faint);
  font-weight: 650;
}

.task-details-body {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: var(--space-5) !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.detail-title-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 650;
  color: var(--db-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
}

.detail-title-input:focus {
  outline: none;
  border-bottom-color: var(--db-primary);
}

.detail-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--db-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
}

.detail-textarea,
.sidebar-select,
.sidebar-input,
.time-input {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
  border-radius: var(--db-radius-sm) !important;
  font-family: inherit;
}

.detail-textarea:focus,
.sidebar-select:focus,
.sidebar-input:focus {
  outline: none !important;
  border-color: var(--db-primary) !important;
  box-shadow: 0 0 0 3px var(--db-primary-soft) !important;
}

.sidebar-field {
  border-bottom: 1px solid var(--db-border);
  padding-bottom: var(--space-3);
}

.sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--db-text-faint);
}

.meta-text {
  font-size: 12.5px;
  color: var(--db-text-muted);
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--db-primary);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.btn-icon:hover {
  text-decoration: underline;
}

.subtasks-list,
.linked-issues-list,
.attachments-list,
.comments-list,
.activity-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subtasks-list > *,
.linked-issues-list > *,
.attachments-list > * {
  background: var(--db-surface-sunken);
  border-radius: var(--db-radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--db-text);
}

.comment-input-container {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.comment-textarea {
  flex: 1;
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text) !important;
  border-radius: var(--db-radius-sm) !important;
}

.time-progress {
  height: 4px;
  background: var(--db-surface-sunken);
  border-radius: var(--db-radius-full);
  overflow: hidden;
  margin-top: 6px;
}

.time-progress-bar {
  height: 100%;
  background: var(--brand-accent);
}

.assignee-selector,
.watchers-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.assignee-selector {
  background: var(--db-surface-sunken) !important;
  border: 1px solid var(--db-border) !important;
}

.assignee-selector span {
  color: var(--db-text) !important;
}

/* Buttons inside the Task Details drawer — previously scoped under
   ".modal .btn-primary" etc., which no longer reaches here now that
   this panel is a .jdrawer rather than a .modal. */
#task-details-modal .btn {
  font-family: inherit;
  border-radius: var(--db-radius-full);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

#task-details-modal .btn-primary {
  background: var(--db-primary) !important;
  border-color: var(--db-primary) !important;
  color: white !important;
}

#task-details-modal .btn-primary:hover {
  background: var(--db-primary-hover) !important;
}

.btn-add-label,
.btn-add-watcher {
  background: var(--db-surface-sunken);
  border: 1px dashed var(--db-border-strong);
  color: var(--db-text-muted);
  font-size: 11px;
  font-weight: 650;
  border-radius: var(--db-radius-full);
  padding: 3px 10px;
  cursor: pointer;
}

/* ============ Sprint management modal ============ */

.sprint-section .detail-section-title {
  color: var(--db-text);
}

.sprint-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ============ Label color picker modal ============ */

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.color-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-option.selected {
  border-color: var(--db-text);
}

/* ============ Dark-background leak sweep ============
   projects.css/tasks.css hardcode dark hex backgrounds (#1e293b,
   #0f172a, #1a1a1a, #334155, black) on dozens of individual selectors
   beyond the ones already covered above — found via a full grep sweep
   of both base files rather than waiting to hit each one by screenshot. */

.filter-select,
#filter-sprint, #filter-status, #filter-priority, #filter-sort, #filter-timeline {
  background: var(--db-surface) !important;
  color: var(--db-text) !important;
  border: 1px solid var(--db-border) !important;
}

.tasks-list-view {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
}

.task-filter {
  background-color: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
  color: var(--db-text-muted) !important;
}

.task-filter.active {
  background-color: var(--db-primary) !important;
  border-color: var(--db-primary) !important;
  color: white !important;
}

.btn-icon:hover {
  background: var(--db-surface-hover) !important;
  border-color: var(--db-primary) !important;
  color: var(--db-primary) !important;
}

.activity-item {
  background: var(--db-surface-sunken) !important;
}

.activity-icon {
  background: var(--db-border) !important;
}

.activity-text {
  color: var(--db-text) !important;
}

.activity-time {
  color: var(--db-text-faint) !important;
}

.sprint-item {
  background: var(--db-surface) !important;
  border: 1px solid var(--db-border) !important;
}

.sprint-progress {
  background: var(--db-surface-sunken) !important;
}

.gantt-bar-container {
  background: var(--db-surface-sunken) !important;
}

.tasks-table thead {
  background: var(--db-surface-sunken) !important;
}

.report-table thead,
.report-table tfoot {
  background: var(--db-surface-sunken) !important;
  color: var(--db-text) !important;
}

.report-table tbody tr:hover {
  background: var(--db-surface-hover) !important;
}

/* ============ Responsive ============ */

@media (max-width: 980px) {
  .pt-mytasks-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .projects-main,
  .dashboard-main3 {
    padding: var(--space-4);
  }
  
  #task-details-modal.jdrawer {
    width: 100vw;
  }
  .task-details-body {
    grid-template-columns: 1fr !important;
  }
}