/* To-Do-Liste (nur auf /alltag/todo geladen). Farben aus dem Seiten-Design (hell/dunkel automatisch). */
.td { max-width: 44rem; }
.td input[type="text"], .td input[type="search"], .td select { font-size: 16px; width: 100%; min-width: 0; }
.td button { -webkit-tap-highlight-color: transparent; }
.td-sub { margin-top: 0; }

.td-search-wrap { margin-bottom: 0.7rem; }
.td-search-hint { margin: 0.35rem 0.1rem 0; font-size: 0.78rem; color: var(--muted); }
.td-search-hint code, .td-search-hint kbd { background: var(--accent-soft); color: var(--accent); padding: 0 0.3rem; border-radius: 4px; font-size: 0.95em; }

/* Neues To-Do */
.td-add-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; align-items: stretch; }
.td-add-form #td-title-input { flex: 1 1 100%; }
.td-add-form #td-tags-input { flex: 1 1 11rem; width: auto; }
.td-add-btn { flex: 0 0 auto; width: 3rem; min-height: 2.9rem; border: 0; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }
.td-add-btn:hover { filter: brightness(1.08); }
.td-due-field { position: relative; flex: 1 1 11rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; min-height: 2.9rem; background: var(--card); border: 2px dashed var(--line); border-radius: var(--r); cursor: pointer; }
.td-due-field:hover { border-color: var(--accent); }
.td-due-field:focus-within { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.td-due-field.td-has-value { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.td-due-field-label { flex: 1; color: var(--muted); font-size: 0.92rem; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-due-field.td-has-value .td-due-field-label { color: var(--ink); font-weight: 600; }
.td-due-input-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; border: 0; padding: 0; background: transparent; }
.td-due-clear { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; border-radius: 6px; z-index: 2; position: relative; }
.td-due-clear:hover { color: var(--bad); }
.td-due-field.td-native { cursor: default; }
.td-due-field.td-native .td-due-field-label { display: none; }
.td-due-field.td-native .td-due-input-overlay { position: static; flex: 1 1 auto; min-width: 0; width: auto; height: auto; opacity: 1; color: var(--ink); cursor: text; color-scheme: light dark; outline: none; }
.td-due-field.td-native .td-due-clear { order: 2; }
.td-recur-select { flex: 1 1 9rem; width: auto !important; }

/* Leiste */
.td-toolbar { display: flex; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.8rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); }
.td-toolbar label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; font-weight: 500; }
.td-toolbar input[type="checkbox"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; }
.td-spacer { flex: 1; }
.td-small-btn { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.65rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink); cursor: pointer; }
.td-small-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Liste */
.td-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.td-todo { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.8rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: var(--r); position: relative; margin: 0; }
@media (hover: none) and (pointer: coarse) { .td-todo { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } }
.td-todo.td-important { border-left-color: var(--signal); }
.td-todo.td-important .td-title { font-weight: 700; }
.td-todo.td-done { opacity: 0.55; }
.td-todo.td-done .td-title { text-decoration: line-through; }
.td-todo.td-overdue { border-left-color: var(--bad); animation: tdGlow 2s ease-in-out infinite; }
@keyframes tdGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); } }
.td-todo.td-dragging { box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent); transform: scale(1.02); cursor: grabbing; }
.td-todo-placeholder { list-style: none; border: 2px dashed var(--accent); border-radius: var(--r); background: var(--accent-soft); opacity: 0.6; }
body.td-dragging-body { cursor: grabbing; user-select: none; -webkit-user-select: none; }

.td-check { flex: 0 0 auto; width: 1.45rem; height: 1.45rem; margin-top: 0.05rem; border: 2px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.85rem; font-weight: 800; line-height: 1; position: relative; }
.td-check:hover { border-color: var(--accent); }
.td-todo.td-done .td-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.td-body { flex: 1 1 auto; min-width: 0; }
.td-row-top { display: flex; align-items: flex-start; gap: 0.4rem; }
.td-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.td-icon-btn { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 1rem; line-height: 1; padding: 0.25rem; margin: -0.15rem 0; cursor: pointer; border-radius: 6px; }
.td-icon-btn:hover { color: var(--ink); background: var(--accent-soft); }
.td-star.td-active { color: var(--signal); }
.td-del:hover { color: var(--bad); }

.td-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; align-items: center; }
.td-tag { font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.6rem; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.td-tag:hover { filter: brightness(0.95); }
.td-tag-edit-btn { font: inherit; font-size: 0.78rem; padding: 0.1rem 0.5rem; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.td-tag-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.td .td-tag-edit-input, .td .td-title-edit-input { font-size: 16px; padding: 0.25rem 0.5rem; border: 2px solid var(--accent); border-radius: 6px; min-height: 0; }
.td .td-title-edit-input { flex: 1 1 auto; margin: -0.3rem 0; }

.td-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.8rem; margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }
.td-dates .td-due { color: var(--warn); }
.td-dates .td-due.td-overdue { color: var(--bad); font-weight: 700; }
.td-due-btn { font: inherit; font-size: inherit; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.td-due-btn:hover { color: var(--accent); }
.td-due-btn.td-recur { color: var(--accent); }
.td .td-inline-edit, .td .td-dueinput { width: auto; font-size: 16px; padding: 0.15rem 0.4rem; min-height: 0; border: 2px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--ink); color-scheme: light dark; }

.td-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); list-style: none; }
.td-count { margin: 0.8rem 0.1rem 0; color: var(--muted); font-size: 0.85rem; }

/* Hinweis unten (Rückgängig) */
.td-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 0.6rem 0.9rem; box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.35); font-size: 0.9rem; display: flex; align-items: center; gap: 0.8rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 2000; max-width: calc(100vw - 32px); }
.td-toast.td-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.td-toast-msg { flex: 1; }
.td-toast button { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0.15rem 0.4rem; border-radius: 6px; cursor: pointer; }
.td-toast button:hover { background: var(--accent-soft); }

/* Import-Dialog */
.td-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 18, 26, 0.55); }
.td-modal[hidden] { display: none; }
.td-modal-card { width: 100%; max-width: 24rem; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5); }
.td-modal-card h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.td-modal-card p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.92rem; }
.td-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.td-modal-actions button { font: inherit; min-height: 2.8rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); cursor: pointer; text-align: left; }
.td-modal-actions button small { display: block; color: var(--muted); font-size: 0.8rem; }
.td-modal-actions .td-primary { border-color: var(--accent); background: var(--accent-soft); }
.td-modal-actions .td-danger { color: var(--bad); }
.td-modal-actions .td-plain { text-align: center; color: var(--muted); }

/* Größere Trefferflächen am Handy */
@media (pointer: coarse) {
  .td-row-top { gap: 0.6rem; }
  .td-icon-btn { width: 2.5rem; height: 2.5rem; margin: -0.55rem -0.25rem; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
  .td-check::after { content: ''; position: absolute; inset: -11px; }
  .td-due-btn, .td-tag, .td-tag-edit-btn { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .td-todo.td-overdue { animation: none; box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.35); }
  .td * { transition: none !important; }
}
@media print { .td-add-form, .td-toolbar, .td-search-wrap, .td-icon-btn, .td-tag-edit-btn, .td-toast { display: none !important; } }