/* Taskmanager – Layout & Theme. Farben zentral als CSS-Variablen (leicht anpassbar). */
:root {
  --bg: #0f1420;
  --bg-2: #151b2b;
  --panel: #1a2233;
  --panel-2: #202a3e;
  --line: #2a3550;
  --text: #e6ebf5;
  --muted: #8b93a7;
  --accent: #4f7cff;
  --danger: #ef4444;
  --radius: 10px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-size: 14px; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }

/* minmax(0,1fr) kappt die Zeile hart auf 100vh, statt sie mit dem Inhalt wachsen zu lassen –
   sonst überläuft der Board-Inhalt den Viewport und die unteren Karten sind unerreichbar. */
#app { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; transition: grid-template-columns .2s ease; }
/* Eingeklappte Seitenleiste: Spalte auf 0, Inhalt wird abgeschnitten. */
#app.sidebar-collapsed { grid-template-columns: 0 1fr; }
#app.sidebar-collapsed #sidebar { overflow: hidden; border-right: none; }

/* ------------------------------------------------------------- Seitenleiste */
#sidebar { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px; gap: 6px; }
.brand { font-weight: 700; font-size: 16px; padding: 6px 6px 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
/* Ein-/Ausklapp-Knöpfe der Seitenleiste */
.sb-collapse { flex: none; }
.sb-expand { display: none; flex: none; border: 1px solid var(--line); background: var(--panel); width: 32px; height: 32px; font-size: 16px; }
.sb-expand:hover { background: var(--panel-2); color: var(--text); }
#app.sidebar-collapsed .sb-expand { display: inline-flex; align-items: center; justify-content: center; }
.scopes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.scope { text-align: left; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.scope:hover { background: var(--panel); color: var(--text); }
.scope.active { background: var(--panel-2); color: var(--text); border-color: var(--line); }

.section-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 6px 4px; }
#project-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.project { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); border: 1px solid transparent; }
.project:hover { background: var(--panel); }
.project.active { background: var(--panel-2); border-color: var(--line); }
.pdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project .tiny { opacity: 0; }
.project:hover .tiny { opacity: .7; }

.sidebar-foot { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.ghost { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: 12px; flex: 1; }
.ghost:hover { background: var(--panel-2); }

.icon-btn { background: transparent; border: none; color: var(--muted); font-size: 16px; width: 26px; height: 26px; border-radius: 6px; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn.tiny { font-size: 12px; width: 20px; height: 20px; }

/* ------------------------------------------------------------------ Topbar */
#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.crumb { font-weight: 600; font-size: 15px; }
.hist { display: flex; gap: 3px; }
.hist-btn { background: var(--panel); border: 1px solid var(--line); color: var(--text); width: 30px; height: 30px; border-radius: 7px; font-size: 15px; line-height: 1; }
.hist-btn:hover:not(:disabled) { background: var(--panel-2); }
.hist-btn:disabled { opacity: .3; cursor: default; }
.views { display: flex; gap: 4px; background: var(--panel); padding: 3px; border-radius: 9px; border: 1px solid var(--line); }
.view-btn { background: transparent; border: none; color: var(--muted); padding: 6px 12px; border-radius: 7px; font-size: 13px; }
.view-btn:hover { color: var(--text); }
.view-btn.active { background: var(--accent); color: #fff; }
.view-btn.aux { margin-left: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.view-btn.aux:hover { color: var(--text); }
.spacer { flex: 1; }
.primary { background: var(--accent); border: none; color: #fff; padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; }
.primary:hover { filter: brightness(1.08); }
.danger { background: var(--danger); border: none; color: #fff; padding: 9px 14px; border-radius: 9px; }
.danger:hover { filter: brightness(1.08); }

#content { flex: 1; overflow: auto; padding: 0; position: relative; }

/* -------------------------------------------------------------------- Board */
/* Das GANZE Board scrollt vertikal (im #content), nicht jede Spalte einzeln.
   Spalten wachsen mit ihrem Inhalt; #content ist der Scrollbereich (Höhe via #app-Grid auf 100vh gekappt).
   Seitenleiste und obere Kopfleiste liegen außerhalb von #content und bleiben dadurch stehen. */
.board { display: flex; gap: 14px; padding: 18px; width: max-content; min-width: 100%; min-height: 100%; align-items: flex-start; }
.board-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; width: 270px; flex: none; display: flex; flex-direction: column; }
/* Spaltenkopf (Statusname + Anzahl) bleibt beim Scrollen oben sichtbar. */
.board-col-head { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--bg-2); border-radius: 12px 12px 0 0; }
.board-col-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.board-col-head .count { margin-left: auto; color: var(--muted); font-size: 12px; background: var(--panel); padding: 1px 8px; border-radius: 10px; }
.board-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 9px; padding: 10px 12px; }
.card:hover { background: var(--panel-2); }
.card-title { font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.project { color: #fff; border: none; }
.pill.due { color: var(--muted); }
.progress-bar { margin-top: 8px; height: 4px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; }

/* ----------------------------------------------------------------- Timeline */
.tl-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tl-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; }

/* Werkzeugleiste (Zeitraum) */
.tl-toolbar { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tl-tb-group { display: flex; align-items: center; gap: 4px; }
.tl-tb-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.tl-tb-count { font-size: 12px; color: var(--muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.tl-tbtn { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 5px 9px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.tl-tbtn:hover { background: var(--panel-2); }
.tl-tbtn.dim { opacity: .35; pointer-events: none; }
.tl-tbtn.today { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tl-tbtn.today:hover { filter: brightness(1.08); }

/* Heute-Markierung */
.tl-tick.today { background: rgba(239,68,68,.18); }
.tl-tick.today .tick-day { color: #ff6b6b; font-weight: 800; background: rgba(239,68,68,.25); border-radius: 6px; padding: 0 5px; }
.tl-gl.today { background: rgba(239,68,68,.10); border-right: 2px solid var(--danger); }
.tl-vtick.today { background: rgba(239,68,68,.18); }
.tl-vtick.today .tick-day { color: #ff6b6b; font-weight: 800; }
.tl-vgl.today { background: rgba(239,68,68,.10); border-bottom: 2px solid var(--danger); }

/* Erstell-Zeile / Hinweis-Label */
.tl-rowlabel.hint, .tl-collabel.hint { color: var(--muted); font-size: 12px; font-style: italic; justify-content: center; cursor: default; }

/* Horizontal */
.tl-h .tl-axis-row { position: sticky; top: 0; z-index: 30; display: flex; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.tl-corner { position: sticky; left: 0; z-index: 5; background: var(--bg-2); border-right: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tl-label-resize { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 8; }
.tl-label-resize::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-label-resize:hover::after { background: var(--accent); }
.tl-corner.ms { color: #e0a800; }
.tl-axis-track { position: relative; display: flex; flex-direction: column; }
.tl-kw-band { display: flex; height: 24px; border-bottom: 1px solid var(--line); }
.tl-kw-cell { border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tl-day-band { display: flex; flex: 1; }
.tl-tick { position: relative; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; }
.tl-tick.weekend { background: rgba(255,255,255,.02); }
.tl-tick.holiday { background: rgba(224,168,0,.12); }
.tick-wd { color: var(--muted); font-size: 10px; }
.tick-day { font-weight: 600; }
.tick-month { position: absolute; top: 1px; left: 3px; font-size: 9px; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }

.tl-ms-row { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-2); height: 34px; position: sticky; top: 64px; z-index: 20; }
.tl-ms-track { cursor: default; }
.tl-ms { position: absolute; top: 0; height: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.tl-ms-mark { width: 12px; height: 12px; transform: rotate(45deg); margin-top: 5px; border: 1px solid rgba(0,0,0,.3); }
.tl-ms-label { font-size: 10px; color: var(--muted); white-space: nowrap; margin-top: 2px; }

.tl-body { position: relative; }
.tl-row { display: flex; border-bottom: 1px solid var(--line); }
.tl-rowlabel { position: sticky; left: 0; z-index: 10; background: var(--bg-2); border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; }
.tl-rowlabel:hover { background: var(--panel); }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rl-proj { font-size: 10px; color: var(--muted); background: var(--panel); padding: 1px 6px; border-radius: 10px; }
.tl-track { position: relative; cursor: crosshair; }
.tl-gl { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--line); pointer-events: none; }
.tl-gl.weekend { background: rgba(255,255,255,.02); }
.tl-gl.holiday { background: rgba(224,168,0,.10); }

.tl-today-h { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 15; pointer-events: none; }
.tl-today-v { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 6; pointer-events: none; }

/* Balken */
.tl-bar { position: absolute; background: var(--panel-2); border-radius: 7px; border: 2px solid; overflow: hidden; cursor: grab; display: flex; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); user-select: none; }
.tl-bar.dragging { cursor: grabbing; z-index: 40; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.tl-bar.done { opacity: .6; }
.tl-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .55; }
.tl-v .tl-bar-fill { top: auto; bottom: 0; left: 0; right: 0; height: 0; }
/* Wochenend-Lücke im „gesplitteten" Balken */
.tl-bar-gap { position: absolute; z-index: 1; background: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 5px, rgba(0,0,0,.15) 5px 10px); border-left: 1px solid rgba(0,0,0,.3); border-right: 1px solid rgba(0,0,0,.3); }
.tl-bar-label { position: relative; z-index: 2; padding: 0 8px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tl-handle { position: absolute; z-index: 3; }
.tl-handle.start { left: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tl-handle.end { right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tl-handle.start.v { left: 0; right: 0; top: 0; bottom: auto; height: 8px; width: auto; cursor: ns-resize; }
.tl-handle.end.v { left: 0; right: 0; bottom: 0; top: auto; height: 8px; width: auto; cursor: ns-resize; }
.tl-handle:hover { background: rgba(255,255,255,.25); }

/* Vertikal */
.tl-vhead { position: sticky; top: 0; z-index: 30; display: flex; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.tl-collabel { border-right: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 10px; cursor: pointer; flex: none; }
.tl-collabel:hover { background: var(--panel); }
.tl-vbodywrap { display: flex; position: relative; }
.tl-vaxis { position: sticky; left: 0; z-index: 10; background: var(--bg-2); border-right: 1px solid var(--line); flex: none; }
.tl-vtick { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; }
.tl-vtick.weekend { background: rgba(255,255,255,.02); }
.tl-vtick.holiday { background: rgba(224,168,0,.12); }
.tl-vgl.holiday { background: rgba(224,168,0,.10); }
.tick-kw { color: var(--accent); font-size: 9px; }
.tl-vfield { position: relative; flex: none; cursor: crosshair; }
.tl-vgl { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); pointer-events: none; }
.tl-vgl.weekend { background: rgba(255,255,255,.02); }
.tl-vms { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ms); z-index: 5; }
.tl-vms-label { position: absolute; left: 4px; top: 2px; font-size: 10px; color: #fff; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }

/* Tray für Tasks ohne Termin */
.tl-tray { flex: none; background: var(--bg-2); border-top: 1px solid var(--line); padding: 8px 14px; max-height: 160px; overflow-y: auto; }
.tl-tray-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.tl-tray-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-chip { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text); padding: 5px 10px; border-radius: 8px; font-size: 12px; }
.tl-chip:hover { background: var(--panel-2); }

.tl-tip { position: fixed; z-index: 200; background: #000; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow); }

/* Feiertags-Tooltip (beim Hovern über das Datum eines markierten Feiertags) */
.tl-tick.holiday, .tl-vtick.holiday { cursor: help; }
.tl-holtip { position: fixed; z-index: 210; background: #000; color: #fff; padding: 5px 9px; border-radius: 7px; box-shadow: var(--shadow); pointer-events: none; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.tl-holtip-name { font-size: 12px; font-weight: 700; }
.tl-holtip-sub { font-size: 10px; color: #e0a800; text-transform: uppercase; letter-spacing: .05em; }

/* Reihenfolge-Menü (rechts in der Timeline-Werkzeugleiste) */
.tl-order { margin-left: auto; position: relative; }
.tl-order-btn { display: flex; align-items: center; gap: 6px; }
.tl-order-cap { color: var(--muted); }
.tl-order-cur { font-weight: 600; }
.tl-order-caret { color: var(--muted); font-size: 11px; }
.tl-order-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; min-width: 240px; }
.tl-order-opt { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: transparent; border: none; color: var(--text); padding: 7px 9px; border-radius: 7px; text-align: left; font-size: 13px; }
.tl-order-opt:hover { background: var(--panel); }
.tl-order-opt.sel { background: var(--panel); }
.tl-order-opt-hint { font-size: 11px; color: var(--muted); }

/* Freie Reihenfolge: Zeilen/Spalten per Drag & Drop umsortieren */
.tl-reorder { cursor: grab; }
.tl-reorder.reorder-dragging { opacity: .5; cursor: grabbing; }
.tl-reorder-grip { color: var(--muted); font-size: 12px; flex: none; letter-spacing: -3px; padding-right: 2px; }
.tl-rowlabel.reorder-drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.tl-rowlabel.reorder-drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.tl-collabel.reorder-drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.tl-collabel.reorder-drop-after { box-shadow: inset -3px 0 0 var(--accent); }

/* Auswahl-Leiste (schwebt unten mittig, wenn Abschnitte ausgewählt sind) */
.tl-selbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; box-shadow: var(--shadow); font-size: 13px; }
.tl-selbar-del { background: var(--danger); border: none; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.tl-selbar-del:hover { filter: brightness(1.08); }
.tl-selbar-hint { color: var(--muted); font-size: 11px; }

/* Mehrfach-Auswahl */
.tl-bar.selected { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgba(0,0,0,.25); }

/* Ziehen zum Erstellen */
.tl-create-ghost { position: absolute; z-index: 8; background: rgba(79,124,255,.22); border: 1.5px dashed var(--accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #cdd8ff; font-weight: 600; pointer-events: none; overflow: hidden; white-space: nowrap; }

/* Hover-Info (nach 1 s) */
.tl-hover { position: fixed; z-index: 210; max-width: 340px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; pointer-events: none; font-size: 12px; }
.tl-hover-title { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.tl-hover-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); margin-bottom: 4px; }
.tl-hover-meta span { background: var(--panel); padding: 1px 7px; border-radius: 10px; }
.tl-hover-dates { color: var(--text); margin-bottom: 6px; }
.tl-hover-desc { line-height: 1.4; margin-bottom: 6px; white-space: pre-wrap; }
.tl-hover-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 3px; }
.tl-hover-note { line-height: 1.4; color: var(--text); }
.tl-hover-empty { color: var(--muted); font-style: italic; }

/* Status-Manager Drag-and-drop */
.status-row[draggable] .grip { cursor: grab; }
.status-row.dragging { opacity: .5; }
.status-row.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.status-row.drop-after { box-shadow: 0 3px 0 var(--accent); }

/* --------------------------------------------------------------------- Leer */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text); gap: 4px; text-align: center; padding: 40px; }
.empty-emoji { font-size: 48px; margin-bottom: 8px; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------- Modals */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; z-index: 100; backdrop-filter: blur(2px); }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: 100%; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: 84vh; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); }
.confirm-text { line-height: 1.5; margin: 0; }

.editor { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input, select, textarea.input { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 9px 11px; border-radius: 8px; font-size: 14px; font-family: inherit; width: 100%; }
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea.input { resize: vertical; }
select { appearance: none; }
input[type="color"] { height: 38px; padding: 2px; }
.progress-field { display: flex; align-items: center; gap: 10px; }
.progress-field input[type=range] { flex: 1; }
.progress-val { font-variant-numeric: tabular-nums; color: var(--muted); width: 42px; text-align: right; }

.seg-list { display: flex; flex-direction: column; gap: 8px; }
.seg-row { display: flex; align-items: center; gap: 8px; }
.seg-row .input { flex: 1; }
.seg-dash { color: var(--muted); }
.seg-recur { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.recur-freq { width: auto; padding: 5px 8px; }
.recur-cnt { width: 62px; }

.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist-row { display: flex; align-items: center; gap: 8px; border-radius: 6px; }
.checklist-row .checklist-text { flex: 1; }
.checklist-row.done .checklist-text { text-decoration: line-through; color: var(--muted); }
.checklist-grip { color: var(--muted); cursor: grab; user-select: none; font-size: 12px; padding: 0 2px; }
.checklist-row.dragging { opacity: .5; }
.checklist-row.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.checklist-row.drop-after { box-shadow: 0 3px 0 var(--accent); }
.checklist-add { align-self: flex-start; }
.checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checklist-pct { font-size: 12px; color: var(--accent); font-weight: 600; }

.notes-box { display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.note-body { line-height: 1.4; }
.note-meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 11px; }
.link-btn:hover { color: var(--danger); }

/* -------------------------------------------------------------------- Toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #000; color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transition: all .25s; z-index: 300; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------- Toggle / Sidebar-Foot */
.toggle-btn { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 12px; border-radius: 8px; font-size: 13px; }
.toggle-btn:hover { background: var(--panel-2); }
.sidebar-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.foot-row { display: flex; gap: 6px; }
.foot-row.bottom { align-items: center; }
.icon-btn.kb { font-size: 18px; border: 1px solid var(--line); background: var(--panel); width: 34px; height: 34px; flex: none; }
.icon-btn.kb:hover { background: var(--panel-2); color: var(--text); }
#btn-settings { flex: 1; }

/* --------------------------------------------------- Farbiges Dropdown */
.cselect { position: relative; }
.cselect-btn { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 14px; text-align: left; }
.cselect.open .cselect-btn, .cselect-btn:focus { border-color: var(--accent); outline: none; }
.cselect-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cselect .caret { color: var(--muted); font-size: 11px; }
.sw { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cselect-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 120; padding: 5px; max-height: 280px; overflow-y: auto; }
.cselect-opt { width: 100%; display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--text); padding: 7px 8px; border-radius: 7px; font-size: 13px; text-align: left; }
.cselect-opt:hover { background: var(--panel); }
.cselect-opt.sel { background: var(--panel); }
.cselect-opt.extra { border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); font-weight: 600; }
.cselect-opt span:last-child { font-weight: 600; }

/* ------------------------------------------------ Farbpaletten-Auswahl */
.swatchpicker { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.swatch.custom { display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px dashed var(--line); color: var(--muted); overflow: hidden; }
.swatch.custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; }

.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.checkline.tight { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------ Status-Manager */
.status-manager { display: flex; flex-direction: column; gap: 10px; }
.status-row { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.status-row-top { display: flex; align-items: center; gap: 10px; }
.status-row-top .grip { color: var(--muted); cursor: default; }
.status-label { flex: 1; }
.status-row-actions { display: flex; gap: 4px; margin-left: auto; }
.status-row-colors { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mini { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 5px 9px; border-radius: 7px; font-size: 12px; }
.mini:hover { background: var(--panel); }
.mini.icon { width: 28px; padding: 5px 0; }
.mini.danger { background: transparent; border-color: transparent; }
.mini.danger:hover { background: rgba(239,68,68,.15); }
.mini[disabled] { opacity: .3; pointer-events: none; }
.add-status { border-top: 1px solid var(--line); padding-top: 12px; }
.add-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.add-status-row .input { flex: 1; min-width: 160px; }

/* -------------------------------------------------- Einstellungen / Zeitleiste */
.settings { display: flex; flex-direction: column; gap: 20px; }
.settings-sec { display: flex; flex-direction: column; gap: 10px; }
.settings-h { margin: 0; font-size: 14px; }
.settings-sec .primary { align-self: flex-start; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.data-btn { text-align: left; flex: none; }

.tlset { display: flex; flex-direction: column; gap: 14px; }
.tlset-row { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tlset-head { display: flex; align-items: baseline; gap: 8px; }
.tlset-label { font-weight: 600; }
.tlset-hint { font-size: 11px; color: var(--muted); }
.tlset-ctrls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tlset-val { min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); background: var(--panel); padding: 4px 8px; border-radius: 7px; }
.tlset-foot { display: flex; }
.muted.small { font-size: 11px; }
.wkset { display: flex; flex-direction: column; gap: 4px; }
.wkset select { max-width: 320px; }

/* ---------------------------------------------------------- Shortcuts */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.sc-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.sc-line { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sc-keys { display: flex; gap: 4px; min-width: 54px; }
.sc-desc { font-size: 13px; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 24px; padding: 0 7px; background: linear-gradient(180deg, #2c3752, #222c42); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.sc-foot { margin: 16px 0 0; }

/* -------------------------------------------------- Such-/Filterleiste */
#filterbar:empty { display: none; }
.filterbar { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.fb-ico { color: var(--muted); }
.fb-search { max-width: 320px; flex: 1; min-width: 180px; }
.fb-filterwrap { position: relative; }
.fb-btn { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.fb-btn.active { border-color: var(--accent); }
.fb-badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; min-width: 16px; text-align: center; }
.fb-quick { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.fb-quick.on { background: rgba(239,68,68,.15); border-color: #ef4444; color: #ff8080; }
.fb-clear { background: transparent; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
.fb-clear:hover { color: var(--text); }
.fb-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; width: 320px; }
.fb-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 6px; }
.fb-group-title:first-child { margin-top: 0; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 5px 9px; border-radius: 20px; font-size: 12px; }
.fb-chip.on { border-color: var(--accent); background: var(--bg); }
.fb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* -------------------------------------------------- Überfällig / Erledigt */
.tl-bar.overdue { box-shadow: 0 0 0 2px #ef4444, 0 2px 6px rgba(0,0,0,.3); }
.tl-bar.done .tl-bar-label { text-decoration: line-through; }
.card.done .card-title { text-decoration: line-through; opacity: .7; }
.pill.overdue { color: #fff; background: #ef4444; border: none; }

/* -------------------------------------------------- Bulk-Auswahlleiste */
.tl-selbar { flex-wrap: wrap; max-width: 94%; }
.tl-selbar-count { font-weight: 600; }
.tl-selbar-sel { min-width: 132px; }
.tl-selbar .cselect-menu { top: auto; bottom: calc(100% + 4px); } /* nach oben öffnen (Leiste unten) */

/* -------------------------------------------------- Papierkorb / Sicherungen */
.trash, .backups { display: flex; flex-direction: column; gap: 6px; }
.trash-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 14px; }
.trash-head:first-child { margin-top: 0; }
.trash-row, .backup-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.trash-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-actions { display: flex; gap: 6px; }
.backup-info { flex: 1; display: flex; flex-direction: column; }
.backup-when { font-variant-numeric: tabular-nums; }
.backup-label { font-size: 11px; color: var(--muted); }
.backup-size { color: var(--muted); font-size: 12px; }

/* Scrollbars dezent */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------- Login (HUB-Variante) */
#login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(79,124,255,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(168,85,247,.10), transparent 60%),
    var(--bg);
  padding: 20px;
}
#login-card {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-brand { text-align: center; margin-bottom: 6px; }
.login-logo { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.login-brand h1 { margin: 0; font-size: 20px; letter-spacing: .01em; }
.login-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field span { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.login-field input {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,124,255,.18); }
.login-error {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4);
  color: #fca5a5; border-radius: 10px; padding: 9px 12px; font-size: 12.5px;
}
.login-btn {
  background: var(--accent); border: none; color: #fff; font-weight: 600;
  border-radius: 10px; padding: 12px; font-size: 14px; margin-top: 2px;
  transition: filter .15s ease;
}
.login-btn:hover { filter: brightness(1.1); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-hint { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; }

/* Nutzer-Anzeige unten in der Seitenleiste */
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 4px;
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-name { flex: 1; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }