/* ═══════════════════════════════════════════
   "Done" on a deadline — the tick in front of a card, "Splněné", the sheet
   that asks first, and done deadlines in the calendar
   (components/deadlineDone.js)
   ═══════════════════════════════════════════

   Everything is prefixed .dl- and loaded on every page (index.html). The
   tick sits in the card's left padding but outside its link, so the card
   reads as one piece while the checkbox stays a control of its own. Green
   is for done and nothing else; done deadlines are grey and struck through,
   never red — a deadline handed in is not overdue. The dark block at the
   end uses the --d-* tokens of app.css. */

/* Read by a screen reader, never seen. */
.dl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── A card with its tick ── */
.dl-row { position: relative; }
.dl-row > .card { padding-left: 2.75rem; }
.dl-tick {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  width: 2.75rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 12px 0 0 12px;
}
/* The checkbox itself covers the whole strip: a 44 px wide target however
   small the box looks, and the real control a screen reader finds. */
.dl-tick-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.dl-tick-box {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 6px;
  border: 2px solid #d1d5db; background: #fff; color: transparent;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s;
  pointer-events: none;
}
.dl-tick-box svg { width: .8rem; height: .8rem; }
.dl-tick:hover .dl-tick-box { border-color: #10b981; color: #a7f3d0; }
.dl-tick-input:checked + .dl-tick-box { background: #10b981; border-color: #10b981; color: #fff; }
.dl-tick-input:focus-visible + .dl-tick-box { outline: 2px solid #6366f1; outline-offset: 2px; }
.dl-tick-input:active + .dl-tick-box { transform: scale(.92); }
.dl-row[aria-busy="true"] .dl-tick { cursor: progress; }
.dl-row[aria-busy="true"] .dl-tick-box { opacity: .6; }
/* A private IS deadline hidden or shared from its own card's buttons
   (views/isMuni.js) loses its card, or the card turns into a link to the
   course's copy; the tick, which was the private one's, goes with it. */
.dl-row:not(:has(> .card)) { display: none; }
.dl-row[data-dl-type="schoolItem"]:has(> a.card[href^="#/deadline/"]) > .dl-tick { display: none; }
.dl-row[data-dl-type="schoolItem"]:has(> a.card[href^="#/deadline/"]) > .card { padding-left: 1rem; }

/* Folding away once ticked (components/deadlineDone.js sets the height). */
.dl-row.is-leaving {
  opacity: 0; transform: translateX(1rem);
  transition: height .24s ease .08s, opacity .18s ease, transform .18s ease;
}
.space-y-2 > .dl-row.is-leaving { margin-top: 0 !important; transition: height .24s ease .08s, margin .24s ease .08s, opacity .18s ease, transform .18s ease; }

/* Where it landed: a short green glow on the row, or on the summary of a
   shut "Splněné". */
.dl-row.is-arrived > .card { animation: dl-arrive 1.4s ease; }
.dl-done-summary.is-arrived .dl-done-count,
.deadline-overdue-summary.is-arrived .deadline-overdue-count { animation: dl-bump .6s ease; }
@keyframes dl-arrive {
  0%, 35% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .35); border-color: #6ee7b7; }
  100% { box-shadow: none; }
}
@keyframes dl-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); background: #10b981; color: #fff; }
  100% { transform: scale(1); }
}

/* ── "Splněné" ── */
.dl-done-section { border: 1px solid #e5e7eb; border-radius: 12px; background: #f8fafc; }
.dl-done-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .75rem; min-height: 2.75rem; color: #475569; border-radius: 12px;
}
.dl-done-summary::-webkit-details-marker { display: none; }
.dl-done-summary:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dl-done-heading { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.dl-done-heading svg { width: 1rem; height: 1rem; color: #10b981; }
.dl-done-summary-meta { display: inline-flex; align-items: center; gap: .4rem; }
.dl-done-count {
  min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #d1fae5; color: #047857; font-size: .72rem; font-weight: 700;
}
.dl-done-chevron { transition: transform .15s ease; }
.dl-done-section[open] .dl-done-chevron { transform: rotate(180deg); }
.dl-done-body { border-top: 1px solid #e5e7eb; padding: .65rem; }

/* A done deadline's own small card */
.dl-row.is-done > .card { padding-right: 5rem; background: #fcfcfd; }
.dl-done-card:hover { border-color: #c7d2fe; }
.dl-done-title {
  font-size: .875rem; font-weight: 600; color: #6b7280;
  text-decoration: line-through; text-decoration-color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two lines at most: on a phone the course and the day do not fit one. */
.dl-done-meta {
  margin-top: .125rem; font-size: .75rem; color: #9ca3af; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dl-done-when { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: #059669; }
.dl-done-when svg { width: .8rem; height: .8rem; flex-shrink: 0; }
.dl-undo {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); z-index: 1;
  min-height: 2.25rem; padding: 0 .75rem; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #4f46e5; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.dl-undo:hover { background: #eef2ff; }
.dl-undo:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

.dl-all-done {
  display: flex; align-items: center; gap: .4rem; padding: .25rem .25rem .5rem;
  font-size: .8125rem; color: #059669; font-weight: 500;
}
.dl-all-done svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── The tick on a deadline's own page ── */
.dl-toggle-wrap { display: inline-flex; }
.dl-toggle {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem .35rem .5rem; border-radius: 8px; border: 1px solid #d1d5db; background: #fff;
  font-size: .75rem; font-weight: 500; color: #374151; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.dl-toggle:hover { background: #f9fafb; border-color: #6ee7b7; }
.dl-toggle.is-on { border-color: #6ee7b7; background: #ecfdf5; color: #047857; }
.dl-toggle-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dl-toggle .dl-tick-box { width: 1rem; height: 1rem; border-radius: 4px; }
.dl-toggle .dl-tick-box svg { width: .65rem; height: .65rem; }
.dl-toggle-input:checked + .dl-tick-box { background: #10b981; border-color: #10b981; color: #fff; }
.dl-toggle-input:focus-visible + .dl-tick-box { outline: 2px solid #6366f1; outline-offset: 2px; }

/* ── The sheet that asks first ── */
.dl-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .4); animation: fade-in .15s ease; }
.dl-sheet {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(24rem, calc(100vw - 2rem)); max-height: 85vh; overflow-y: auto;
  padding: 1.125rem 1.125rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(17, 24, 39, .3); animation: fade-in .15s ease; outline: none;
}
.dl-sheet-title { font-size: 1rem; font-weight: 700; color: #111827; }
.dl-sheet-what {
  display: flex; align-items: flex-start; gap: .625rem; margin-top: .75rem;
  padding: .625rem .75rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb;
}
.dl-sheet-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem;
  border-radius: 999px; background: #d1fae5; color: #047857;
}
.dl-sheet-icon svg { width: .9rem; height: .9rem; }
.dl-sheet-text { min-width: 0; }
.dl-sheet-name { font-size: .875rem; font-weight: 600; color: #111827; overflow-wrap: anywhere; }
.dl-sheet-sub { margin-top: .125rem; font-size: .75rem; color: #6b7280; }
.dl-sheet-sub.is-past { color: #b91c1c; }
.dl-sheet-note { margin-top: .75rem; font-size: .8125rem; color: #4b5563; line-height: 1.45; }
.dl-sheet-private { display: block; margin-top: .25rem; font-size: .75rem; color: #9ca3af; }
.dl-sheet-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.dl-sheet-confirm { background: #10b981; color: #fff; font-weight: 600; }
.dl-sheet-confirm:hover { background: #059669; }
.dl-sheet-confirm svg { width: .9rem; height: .9rem; }
.dl-sheet-actions .btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

@media (max-width: 767px) {
  .dl-sheet {
    top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: 85vh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: 16px 16px 0 0; animation: slide-up .2s ease;
  }
  .dl-sheet-actions { flex-direction: column-reverse; }
  .dl-sheet-actions .btn { justify-content: center; min-height: 2.75rem; }
}
/* Fingers: a bigger box, and an Undo as tall as a finger is wide. */
@media (pointer: coarse) {
  .dl-tick-box { width: 1.375rem; height: 1.375rem; }
  .dl-undo { min-height: 2.75rem; }
  .dl-toggle { min-height: 2.75rem; padding-left: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-sheet, .dl-sheet-backdrop { animation: none; }
  .dl-row.is-arrived > .card, .dl-done-summary.is-arrived .dl-done-count { animation: none; }
  .dl-tick-box { transition: none; }
}

/* ── The calendar: a done deadline stays on its day ── */
.cal-event-pill.is-done { text-decoration: line-through; opacity: .5; }
.cal-list-item.is-done .cal-list-title { text-decoration: line-through; color: #9ca3af; }
.cal-list-item.is-done .cal-list-icon { color: #10b981 !important; background: #ecfdf5 !important; }
.cal-list-item.is-done .cal-list-time { color: #9ca3af; }

/* ── Dark ── */
.dark .dl-tick-box { background: var(--d-surface2); border-color: var(--d-border); }
.dark .dl-tick:hover .dl-tick-box { border-color: #34d399; color: rgba(52, 211, 153, .4); }
.dark .dl-tick-input:checked + .dl-tick-box,
.dark .dl-toggle-input:checked + .dl-tick-box { background: #10b981; border-color: #10b981; color: #052e16; }
.dark .dl-done-section { background: var(--d-surface); border-color: var(--d-border); }
.dark .dl-done-summary { color: var(--d-text2); }
.dark .dl-done-body { border-top-color: var(--d-border); }
.dark .dl-done-count { background: #064e3b; color: #6ee7b7; }
.dark .dl-row.is-done > .card { background: var(--d-surface2); }
.dark .dl-done-title { color: var(--d-text3); text-decoration-color: var(--d-text3); }
.dark .dl-done-meta { color: var(--d-text3); }
.dark .dl-done-when, .dark .dl-all-done { color: #34d399; }
.dark .dl-undo { color: var(--d-brand); }
.dark .dl-undo:hover { background: var(--d-brand-bg); }
.dark .dl-toggle { background: var(--d-surface); border-color: var(--d-border); color: var(--d-text); }
.dark .dl-toggle:hover { background: var(--d-surface2); border-color: #047857; }
.dark .dl-toggle.is-on { background: #022c22; border-color: #047857; color: #6ee7b7; }
.dark .dl-sheet { background: var(--d-surface); border-color: var(--d-border); }
.dark .dl-sheet-title, .dark .dl-sheet-name { color: var(--d-text); }
.dark .dl-sheet-what { background: var(--d-surface2); border-color: var(--d-border); }
.dark .dl-sheet-icon { background: #064e3b; color: #6ee7b7; }
.dark .dl-sheet-sub, .dark .dl-sheet-private { color: var(--d-text3); }
.dark .dl-sheet-sub.is-past { color: #f87171; }
.dark .dl-sheet-note { color: var(--d-text2); }
.dark .cal-list-item.is-done .cal-list-title,
.dark .cal-list-item.is-done .cal-list-time { color: var(--d-text3); }
.dark .cal-list-item.is-done .cal-list-icon { background: #022c22 !important; color: #34d399 !important; }
@keyframes dl-arrive-dark {
  0%, 35% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .35); border-color: #047857; }
  100% { box-shadow: none; }
}
.dark .dl-row.is-arrived > .card { animation-name: dl-arrive-dark; }