/* ─── Loader ─────────────────────────────────────────────── */
.loader-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toolbar buttons ────────────────────────────────────── */
.view-btn {
  background: transparent;
  color: #9ca3af;
  border: 1px solid transparent;
  transition: all .15s;
}
.view-btn:hover { color: #e5e7eb; background: #374151; }
.view-btn.active { color: #fff; background: #2563eb; border-color: #2563eb; }

/* ─── Filter buttons ─────────────────────────────────────── */
.filter-btn {
  background: #1f2937;
  color: #9ca3af;
  border: 1px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}
.filter-btn:hover { color: #e5e7eb; }
.filter-btn.active { color: #fff; background: #1d4ed8; }

/* ─── Sidebar (mobile overlay) ───────────────────────────── */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: 52px; left: 0; bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: 280px !important;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
}

/* ─── Tree ───────────────────────────────────────────────── */
.stage-row {
  display: flex; align-items: center;
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 4px;
  gap: 6px;
  user-select: none;
}
.stage-row:hover { background: rgba(255,255,255,.05); }

.stage-stripe {
  width: 3px; flex-shrink: 0; border-radius: 2px;
  align-self: stretch; min-height: 20px;
}

.block-row {
  display: flex; align-items: center;
  padding: 4px 8px 4px 14px;
  cursor: pointer;
  border-radius: 5px;
  margin: 1px 4px;
  gap: 5px;
  user-select: none;
}
.block-row:hover { background: rgba(255,255,255,.04); }

.task-row {
  display: flex; align-items: flex-start;
  padding: 3px 8px 3px 26px;
  cursor: pointer;
  border-radius: 4px;
  margin: 1px 4px;
  gap: 6px;
  line-height: 1.3;
}
.task-row:hover { background: rgba(255,255,255,.04); }
.task-row.selected { background: rgba(37,99,235,.25); }

.task-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.dot-todo { background: #6b7280; }
.dot-in_progress { background: #f59e0b; }
.dot-blocked { background: #ef4444; }
.dot-done { background: #10b981; }

.tree-progress {
  height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); flex-shrink: 0;
}
.tree-progress-inner { height: 3px; border-radius: 2px; transition: width .3s; }

/* ─── Task card ──────────────────────────────────────────── */
.breadcrumb { font-size: 11px; color: #6b7280; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.breadcrumb span { color: #9ca3af; }
.breadcrumb .sep { color: #4b5563; }

.task-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #f9fafb; }

.desc-view {
  min-height: 44px; padding: 8px 10px;
  background: rgba(255,255,255,.03); border: 1px solid transparent;
  border-radius: 6px; font-size: 0.875rem; color: #d1d5db; line-height: 1.6;
  cursor: text; transition: border-color .15s;
}
.desc-view:hover { border-color: rgba(255,255,255,.1); }
.desc-view.empty { color: #4b5563; font-style: italic; }

.desc-edit {
  width: 100%; min-height: 100px; padding: 8px 10px;
  background: #111827; border: 1px solid #3b82f6;
  border-radius: 6px; font-size: 0.875rem; color: #f3f4f6; line-height: 1.6;
  resize: vertical; outline: none; font-family: inherit;
}

.step-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; cursor: pointer;
}
.step-item input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  accent-color: #3b82f6; cursor: pointer;
}
.step-item.done span { text-decoration: line-through; color: #6b7280; }
.step-item span { font-size: 0.875rem; color: #d1d5db; line-height: 1.5; }

.pitfalls-box {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px; padding: 10px 12px;
}
.pitfalls-box .box-label { font-size: 11px; font-weight: 600; color: #f87171; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }

.criteria-box {
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
  border-radius: 8px; padding: 10px 12px;
}
.criteria-box .box-label { font-size: 11px; font-weight: 600; color: #34d399; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }

.box-text { font-size: 0.8125rem; color: #d1d5db; line-height: 1.6; white-space: pre-wrap; }

/* ─── Status + priority badges ───────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-todo { background: rgba(107,114,128,.2); color: #9ca3af; }
.badge-in_progress { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-blocked { background: rgba(239,68,68,.15); color: #f87171; }
.badge-done { background: rgba(16,185,129,.15); color: #34d399; }
.badge-high { background: rgba(239,68,68,.15); color: #f87171; }
.badge-normal { background: rgba(107,114,128,.15); color: #9ca3af; }
.badge-low { background: rgba(59,130,246,.12); color: #93c5fd; }

/* ─── Action buttons ─────────────────────────────────────── */
.action-btn {
  height: 36px; padding: 0 14px; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 500; transition: all .15s; white-space: nowrap;
}
.btn-start { background: #2563eb; color: #fff; }
.btn-start:hover { background: #1d4ed8; }
.btn-complete { background: #059669; color: #fff; }
.btn-complete:hover { background: #047857; }
.btn-block { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.btn-block:hover { background: rgba(239,68,68,.25); }

/* ─── Notes ──────────────────────────────────────────────── */
.note-item {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 6px;
}
.note-author { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 2px; }
.note-content { font-size: 0.8125rem; color: #d1d5db; line-height: 1.5; white-space: pre-wrap; }

/* ─── Kanban ─────────────────────────────────────────────── */
.kanban-col { min-width: 220px; max-width: 240px; flex-shrink: 0; }
.kanban-col-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.kanban-card {
  background: #1f2937; border: 1px solid #374151; border-radius: 6px; padding: 8px 10px;
  cursor: pointer; transition: border-color .15s; margin-bottom: 6px;
}
.kanban-card:hover { border-color: #4b5563; }
.kanban-card-num { font-size: 10px; color: #6b7280; margin-bottom: 2px; }
.kanban-card-title { font-size: 0.8125rem; color: #e5e7eb; line-height: 1.4; }

/* ─── Mindmap ────────────────────────────────────────────── */
#mindmap-canvas {
  width: 100%; height: 100%; cursor: grab; display: block;
}
#mindmap-canvas:active { cursor: grabbing; }
.mm-toolbar {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 5;
}
.mm-btn {
  height: 34px; padding: 0 12px; background: #1f2937; border: 1px solid #374151;
  border-radius: 6px; color: #d1d5db; font-size: 0.8125rem; cursor: pointer; transition: background .15s;
}
.mm-btn:hover { background: #374151; }

/* ─── Dividers / sections ────────────────────────────────── */
.section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #4b5563; margin-bottom: 6px;
}