Daily Shutdown Flow

<!-- Daily Shutdown Flow — end-of-day review, note for tomorrow, confirmation -->
<div class="ws-daily-shutdown fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4 z-50" id="shutdown-overlay" style="font-family:system-ui,sans-serif">
  <div class="bg-[var(--ws-color-surface)] rounded-2xl border border-slate-200 shadow-2xl w-full max-w-md flex flex-col overflow-hidden animate-fade-in-up">

    <!-- Header -->
    <div class="px-6 pt-6 pb-4 border-b border-slate-100">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Tagesabschluss</p>
          <h2 class="text-lg font-semibold text-slate-900 mt-0.5">Freitag, 27. März</h2>
        </div>
        <button id="close-btn"
          class="w-8 h-8 rounded-full border border-slate-200 text-slate-400 hover:text-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors flex items-center justify-center text-sm"
          aria-label="Schließen">✕</button>
      </div>

      <!-- Stats row -->
      <div class="flex items-center gap-4 mt-4">
        <div class="flex-1 bg-slate-50 rounded-xl p-3 text-center">
          <p class="text-2xl font-bold text-emerald-500">5</p>
          <p class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-wide">Erledigt</p>
        </div>
        <div class="flex-1 bg-slate-50 rounded-xl p-3 text-center">
          <p class="text-2xl font-bold text-blue-500">3h 42m</p>
          <p class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-wide">Getrackt</p>
        </div>
        <div class="flex-1 bg-slate-50 rounded-xl p-3 text-center">
          <p class="text-2xl font-bold text-violet-500">71%</p>
          <p class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-wide">Quote</p>
        </div>
      </div>
    </div>

    <!-- Completed tasks -->
    <div class="px-6 py-4 border-b border-slate-100 max-h-44 overflow-y-auto">
      <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">Erledigt heute</p>
      <ul class="flex flex-col gap-2" role="list">
        <li class="flex items-center gap-2.5 text-sm text-slate-700">
          <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px] flex-shrink-0">✓</span>
          API-Dokumentation schreiben
        </li>
        <li class="flex items-center gap-2.5 text-sm text-slate-700">
          <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px] flex-shrink-0">✓</span>
          Code Review abschließen
        </li>
        <li class="flex items-center gap-2.5 text-sm text-slate-700">
          <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px] flex-shrink-0">✓</span>
          Team-Meeting vorbereiten
        </li>
        <li class="flex items-center gap-2.5 text-sm text-slate-700">
          <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px] flex-shrink-0">✓</span>
          E-Mails beantworten
        </li>
        <li class="flex items-center gap-2.5 text-sm text-slate-700">
          <span class="w-4 h-4 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-[10px] flex-shrink-0">✓</span>
          Wochenplanung aktualisieren
        </li>
      </ul>
    </div>

    <!-- Tomorrow note -->
    <div class="px-6 py-4 border-b border-slate-100">
      <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block mb-2" for="tomorrow-note">
        Was bleibt für morgen?
      </label>
      <textarea id="tomorrow-note" rows="3"
        class="w-full text-sm text-slate-700 bg-slate-50 rounded-xl px-3 py-2.5 resize-none outline-none border border-transparent focus:border-blue-400 transition-colors placeholder:text-slate-300 dark:placeholder:text-slate-600"
        placeholder="Offene Punkte, Prios für morgen…">Backlog grooming abschließen. Präsentation für Montag vorbereiten.</textarea>
    </div>

    <!-- Footer -->
    <div class="px-6 py-4 flex items-center justify-between gap-3">
      <p class="text-xs text-slate-400 italic">Guter Tag — du hast das Wichtigste geschafft.</p>
      <button id="confirm-btn"
        class="px-5 py-2.5 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-semibold transition-colors flex-shrink-0"
        aria-label="Tagesabschluss bestätigen">
        Tag abschließen ✓
      </button>
    </div>

  </div>
</div>

<script>
  document.getElementById('confirm-btn')?.addEventListener('click', () => {
    const note = document.getElementById('tomorrow-note')?.value;
    // Persist note
    const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
    const key = `shutdown_note_${tomorrow.toISOString().slice(0,10)}`;
    try { localStorage.setItem(key, note); } catch {}
    // Fire custom event
    document.dispatchEvent(new CustomEvent('daily-shutdown', { detail: { note } }));
    // Close overlay
    document.getElementById('shutdown-overlay')?.remove();
  });

  document.getElementById('close-btn')?.addEventListener('click', () => {
    document.getElementById('shutdown-overlay')?.remove();
  });
</script>