/* todo.css — task list, filters, progress bar */

/* ─── TODO VIEW ─── */
#view-todo { padding: 0; gap: 0; }

/* ── Todo inner layout ── */
.todo-inner { display: flex; flex-direction: column; height: 100%; }

/* ── Hero: title + filters + progress + stats ── */
.todo-hero {
  padding: 24px 32px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}

.todo-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--gold), var(--amber), transparent);
  opacity: 0.5;
}

.todo-hero-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.todo-hero-title {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

#view-todo .todo-filter-tabs {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
  gap: 6px;
}

#view-todo .todo-filter-tab {
  flex: 1;
  padding: 9px 12px;
  font-size: 11px;
  text-align: center;
}

/* ── Progress + stats panel ── */
.todo-progress-panel { display: flex; align-items: center; gap: 20px; }

.todo-progress-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0% 0%, rgba(217,119,87,0.08) 0% 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.7s ease;
  filter: drop-shadow(0 0 6px rgba(217,119,87,0.15));
}

.todo-ring-inner {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.todo-ring-pct {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 300;
  color: var(--gold2);
  line-height: 1;
}

.todo-ring-label {
  font-family: var(--font-ui);
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.todo-stats-col {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-stats-total-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.todo-stats-total-num {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}

.todo-stats-total-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.todo-progress-track {
  height: 6px;
  background: rgba(217,119,87,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.todo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(217,119,87,0.5);
}

.todo-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.todo-stats-done { color: var(--gold); display: flex; align-items: center; gap: 5px; }
.todo-stats-left { color: var(--amber); display: flex; align-items: center; gap: 5px; }

.todo-stat-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.todo-stat-dot.done      { background: var(--gold); }
.todo-stat-dot.remaining { background: var(--amber); }

.todo-stats-sep { color: var(--text-muted); opacity: 0.4; padding: 0 2px; }

/* ── Task list section ── */
.todo-list-section {
  padding: 20px 32px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* FAB create task button */
.fab-create-task {
  position: fixed;
  bottom: 100px; right: 32px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  border: none;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(217,119,87,0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fab-create-task:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 30px rgba(217,119,87,0.5);
  background: var(--gold2);
}

.fab-create-task:active { transform: scale(0.95); }

/* ── Drag and drop ── */
.todo-drag-handle {
  font-size: 16px;
  color: var(--text-muted);
  cursor: grab;
  padding: 0;
  margin-right: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.todo-drag-handle:hover { opacity: 1; color: var(--gold); }
.todo-drag-handle:active { cursor: grabbing; }

.todo-item.dragging {
  opacity: 0.4;
  transform: scale(0.95);
  cursor: grabbing;
  position: relative;
  z-index: 1000;
}

.todo-item.drag-over-top {
  border-top: 3px solid var(--gold);
  box-shadow: 0 -2px 8px rgba(217, 119, 87, 0.3);
}

.todo-item.drag-over-bottom {
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.3);
}

.todo-item.drag-placeholder {
  background: rgba(217, 119, 87, 0.08);
  border: 2px dashed var(--gold);
  min-height: 50px;
  margin: 6px 0;
  position: relative;
  transition: all 0.25s ease;
  opacity: 0.7;
}

.todo-item.drag-placeholder::before {
  content: 'Drop here';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

.todo-item:not(.dragging):not(.drag-placeholder) {
  transition: transform 0.25s ease, margin 0.25s ease;
}

/* ── Task input ── */
.todo-input-wrapper { display: flex; gap: 12px; margin-bottom: 24px; }

.todo-input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}

.todo-input:focus { border-color: var(--gold); }
.todo-input::placeholder { color: var(--text-muted); font-style: italic; }

.add-todo-btn {
  padding: 14px 32px;
  border: 1px solid var(--border-bright);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.add-todo-btn:hover { background: var(--gold2); }

/* ── Task list ── */
.todo-list { display: flex; flex-direction: column; gap: 6px; }

.todo-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.todo-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  opacity: 0;
  transition: opacity 0.2s;
}

.todo-item:hover { border-color: var(--border-bright); }
.todo-item:hover::before { opacity: 0.6; }

.todo-item.completed { opacity: 0.6; }
.todo-item.first-completed { margin-top: 14px; }
.todo-item.completed::before { background: var(--gold); opacity: 1; }

.todo-main { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }

.todo-checkbox {
  width: 20px; height: 20px;
  border: 1px solid var(--border-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.todo-checkbox.checked { background: var(--gold); color: var(--bg); border-color: var(--gold); }

.todo-body {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.todo-text {
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.3;
}

.todo-date-chip {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.todo-date-chip.overdue { color: var(--amber); }

.todo-item.completed .todo-text { text-decoration: line-through; color: var(--text-dim); }

.todo-star-indicator { color: var(--gold); font-size: 14px; flex-shrink: 0; }

/* Important item highlight */
.todo-item.important-item { border-color: rgba(217,119,87,0.3); }
.todo-item.important-item::before { background: var(--gold); opacity: 0.8; }
.todo-item.important-item .todo-checkbox { border-color: var(--gold); }

/* Completed section divider */
.todo-completed-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.todo-completed-divider::before,
.todo-completed-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Expanded item panel */
.todo-expanded {
  border-top: 1px solid var(--border);
  background: var(--bg3);
  padding: 10px 16px;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; padding: 0 16px; }
  to   { opacity: 1; max-height: 200px; padding: 10px 16px; }
}

.todo-expanded-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.todo-expanded-btn {
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.todo-expanded-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--glow); }
.todo-expanded-btn.delete { color: var(--text-muted); }
.todo-expanded-btn.delete:hover { color: var(--amber); border-color: var(--amber); background: rgba(203,77,46,0.1); }

/* Empty state */
.empty-todos { text-align: center; padding: 60px 20px; color: var(--text-muted); font-style: italic; font-size: 16px; }
.empty-todos-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }

/* ── Filter tabs ── */
.todo-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.todo-filter-tab {
  padding: 8px 20px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.todo-filter-tab:hover { border-color: var(--border-bright); color: var(--text); }
.todo-filter-tab.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }