/* =========================================================
   deeBoard — Task Progress Bar
   Bar memanjang di bawah layar menampilkan persentase
   no-progress / in-progress / completed dari task aktif.
========================================================= */

.task-progress-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400; /* below floating windows (500) & popovers, above board content */
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  font-family: "Inter", sans-serif;
  user-select: none;
  pointer-events: none; /* purely informational, never blocks clicks */
}
.task-progress-bar.hidden { display: none; }

.task-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--border-soft);
}
.task-progress-seg {
  height: 100%;
  transition: width 0.25s ease;
  flex-shrink: 0;
}
.task-progress-seg.no-progress { background: var(--text-tertiary); opacity: 0.55; }
.task-progress-seg.in-progress { background: var(--accent); }
.task-progress-seg.completed   { background: var(--accent-strong, var(--accent)); }

.task-progress-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.task-progress-legend .item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.task-progress-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.task-progress-legend .dot.no-progress { background: var(--text-tertiary); opacity: 0.55; }
.task-progress-legend .dot.in-progress { background: var(--accent); }
.task-progress-legend .dot.completed   { background: var(--accent-strong, var(--accent)); }

/* Push page content up so the fixed bar never overlaps the board */
.main { padding-bottom: 34px; }

@media (max-width: 640px) {
  .task-progress-bar {
    height: 30px;
    padding: 0 10px;
    gap: 8px;
  }
  .task-progress-legend { gap: 8px; font-size: 10px; }
  .main { padding-bottom: 30px; }
}

@media (max-width: 420px) {
  /* Very narrow screens: keep percentages, hide text labels, dots only */
  .task-progress-legend .label-text { display: none; }
}