Sprint Overview Card with Task & Progress Widgets

<div class="relative overflow-hidden bg-gray-900/50 border-white/10 border rounded-2xl shadow-2xl backdrop-blur-lg">
  <!-- Board banner -->
  <div class="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-black/40">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard w-4.5 h-4.5"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>
      </span>
      <p class="text-sm">Sprint Alpha</p>
    </div>
    <div class="flex items-center gap-2">
      <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle2" class="lucide lucide-check-circle2 w-3.5 h-3.5"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
        On‑track
      </span>
    </div>
  </div>

  <!-- Board + Tasks -->
  <div class="grid md:grid-cols-2 gap-0">
    <!-- Left: compact board -->
    <div class="border-white/10 border-r pt-4 pr-4 pb-4 pl-4">
      <div class="grid grid-cols-3 gap-3">
        <!-- Backlog -->
        <div class="">
          <div class="flex items-center justify-between mb-2">
            <p class="text-xs text-gray-400">Backlog</p>
            <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 border border-white/10">3</span>
          </div>
          <div class="space-y-2" aria-label="Backlog column preview">
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">Auth error states</p>
            </div>
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">Refactor task card</p>
            </div>
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">Webhooks retry logic</p>
            </div>
          </div>
        </div>
        <!-- Doing -->
        <div class="">
          <div class="flex items-center justify-between mb-2">
            <p class="text-xs text-gray-400">Doing</p>
            <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 border border-white/10">2</span>
          </div>
          <div class="space-y-2">
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">New sprint template</p>
            </div>
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">Email digest</p>
            </div>
          </div>
        </div>
        <!-- Review -->
        <div class="">
          <div class="flex items-center justify-between mb-2">
            <p class="text-xs text-gray-400">Review</p>
            <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 border border-white/10">1</span>
          </div>
          <div class="space-y-2">
            <div class="rounded-lg bg-white/5 border border-white/10 p-3">
              <p class="text-sm">API docs</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Mini chart (wrapped to avoid sizing bug) -->
      <div class="mt-4 rounded-lg border border-white/10 p-3">
        <div class="flex items-center justify-between">
          <p class="text-xs text-gray-300">7‑day completion</p>
          <span class="text-xs text-gray-400"><span class="text-gray-100">+18%</span> week</span>
        </div>
        <div class="mt-2 h-16 w-full">
          <div class="w-full h-full">
            <canvas id="miniChart" width="776" height="128" style="display: block; box-sizing: border-box; height: 64px; width: 388px;" class=""></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: task list with custom checkboxes -->
    <div class="p-4">
      <div class="flex items-center justify-between">
        <p class="text-sm">My day</p>
        <span id="task-counter" class="text-xs text-gray-400">0/4 done</span>
      </div>
      <div class="mt-3 space-y-2" id="task-list">
        <!-- Task item -->
        <div class="flex items-start gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2" data-task="">
          <button type="button" class="relative mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-black/40 border border-white/15 hover:border-white/25 transition" data-checkbox="" aria-checked="false" aria-label="Toggle task">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 opacity-0 transition"><path d="M20 6 9 17l-5-5"></path></svg>
          </button>
          <div class="min-w-0">
            <p class="text-sm leading-snug">Review PR #248</p>
            <p class="text-xs text-gray-400">Core UI · Today</p>
          </div>
          <span class="ml-auto text-[10px] px-2 py-0.5 rounded bg-amber-400/10 text-amber-300 ring-1 ring-amber-400/20">P2</span>
        </div>

        <div class="flex items-start gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2" data-task="">
          <button type="button" class="relative mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-black/40 border border-white/15 hover:border-white/25 transition" data-checkbox="" aria-checked="false" aria-label="Toggle task">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 opacity-0 transition"><path d="M20 6 9 17l-5-5"></path></svg>
          </button>
          <div class="min-w-0">
            <p class="text-sm leading-snug">
              Draft weekly release notes
            </p>
            <p class="text-xs text-gray-400">Marketing · Today</p>
          </div>
        </div>

        <div class="flex items-start gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2" data-task="">
          <button type="button" class="relative mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-black/40 border border-white/15 hover:border-white/25 transition" data-checkbox="" aria-checked="false" aria-label="Toggle task">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 opacity-0 transition"><path d="M20 6 9 17l-5-5"></path></svg>
          </button>
          <div class="min-w-0">
            <p class="text-sm leading-snug">
              Sync with QA on test plan
            </p>
            <p class="text-xs text-gray-400">QA · 2:00 PM</p>
          </div>
          <span class="ml-auto text-[10px] px-2 py-0.5 rounded bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-400/20">Ready</span>
        </div>

        <div class="flex items-start gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2" data-task="">
          <button type="button" class="relative mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-black/40 border border-white/15 hover:border-white/25 transition" data-checkbox="" aria-checked="false" aria-label="Toggle task">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 opacity-0 transition"><path d="M20 6 9 17l-5-5"></path></svg>
          </button>
          <div class="min-w-0">
            <p class="text-sm leading-snug">
              Prepare operations runbook
            </p>
            <p class="text-xs text-gray-400">Ops · Tomorrow</p>
          </div>
          <span class="ml-auto text-[10px] px-2 py-0.5 rounded bg-fuchsia-400/10 text-fuchsia-300 ring-1 ring-fuchsia-400/20">Doc</span>
        </div>
      </div>

      <!-- Quick actions -->
      <div class="mt-4 flex items-center justify-between">
        <button class="text-xs text-gray-300 hover:text-white px-3 py-2 rounded-lg bg-white/5 border border-white/10 inline-flex items-center gap-2" type="button" id="clear-completed">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-check" class="lucide lucide-check-check w-4 h-4"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg>
          Clear completed
        </button>
        <button class="text-xs text-blue-300 hover:text-blue-200 inline-flex items-center gap-2" type="button" id="add-quick">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
          Quick add
        </button>
      </div>
    </div>
  </div>
</div>