/* MindState — Main Stylesheet */
/* Inspired by shadcn/ui + Tailwind slate palette */

/* Montserrat (variable, 300–700) — self-hosted per Lastenheft §2.6.1 (SIL OFL), no CDN (DSGVO) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Montserrat.woff2') format('woff2');
}

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --card: #ffffff;          /* alias used by panels/menus/overlays (was undefined → white in dark) */
  --bg-sidebar: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text: #1e293b;
  --text-strong: #0f172a;   /* near-black for task titles — higher contrast (v6 1.22) */
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-placeholder: #cbd5e1;
  --primary: #1e293b;
  --primary-fg: #ffffff;
  --accent: #3b82f6;
  --accent-light: #eff6ff;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --success: #22c55e;
  --success-light: #f0fdf4;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --purple: #8b5cf6;
  --purple-light: #f5f3ff;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --transition: 200ms ease;
  --sidebar-width: 224px;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dark {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --card: #1e293b;          /* dark-mode legibility: panels/menus no longer fall back to white (Lastenheft v2, Abb. 29/30) */
  --bg-sidebar: #1e293b;
  --border: #334155;
  --border-light: #1e293b;
  --text: #f1f5f9;
  --text-strong: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-placeholder: #475569;
  --primary: #f1f5f9;
  --primary-fg: #0f172a;
  --accent: #3b82f6;
  --accent-light: #1e3a5f;
  --danger-light: #3b1111;
  --success-light: #0f2d15;
  --warning-light: #2d2005;
  --purple-light: #1f1533;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300; /* Montserrat Light per Lastenheft §2.6.1 */
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-placeholder); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

#app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 40;
  transition: transform var(--transition);
}

#sidebar-header { padding: 16px; border-bottom: 1px solid var(--border-light); }
#sidebar-logo { display: flex; align-items: center; gap: 8px; }
.logo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--primary); color: var(--primary-fg);
  border-radius: var(--radius); font-size: 16px;
}
.logo-icon svg { width: 20px; height: 20px; }
.logo-text { font-weight: 700; font-size: 15px; color: var(--text); }
.logo-subtitle { font-size: 10px; color: var(--text-muted); }

#sidebar-nav {
  flex: 1; padding: 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}

.nav-divider {
  padding: 16px 12px 8px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition);
  text-decoration: none; border: none; background: none;
  width: 100%; text-align: left;
}
.nav-item:hover { background: var(--border-light); color: var(--text); }
.nav-item.active { background: var(--border-light); color: var(--text); }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.nav-item.active svg { opacity: 1; }
/* List rows: label fills the row, a ⋯ menu button reveals on hover (Lastenheft v6
   1.22, Fig 30-33). Drag-reorder feedback via .nav-dragging / .nav-drop-target. */
.nav-item-list { gap: 0; }
.nav-item-list .nav-item-label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item-dots { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; opacity: 0; color: var(--text-muted); transition: opacity var(--transition), background var(--transition); }
.nav-item-dots svg { opacity: 1; width: 15px; height: 15px; }
.nav-item-list:hover .nav-item-dots { opacity: 1; }
.nav-item-dots:hover { background: var(--bg); color: var(--text); }
.nav-item.nav-dragging { opacity: 0.4; }
.nav-item.nav-drop-target { box-shadow: inset 0 2px 0 0 var(--accent); }

#sidebar-footer { padding: 16px; border-top: 1px solid var(--border-light); }

#sidebar-logout-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition);
  background: none; border: none; width: 100%; text-align: left;
}
#sidebar-logout-btn:hover { background: var(--border-light); color: var(--text); }

/* Content */
#content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; }
#container { position: relative; min-height: 100vh; }

/* Login */
#loginElm {
  position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; background: var(--bg); z-index: 100;
}

.login-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 40px; width: 100%; max-width: 400px;
}
.login-brand { text-align: center; margin-bottom: 32px; }
.login-logo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--primary); color: var(--primary-fg);
  border-radius: var(--radius-lg); font-size: 22px; margin-bottom: 12px;
}
.login-logo { font-size: 22px; font-weight: 800; color: var(--text); }
.login-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.login-field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  background: var(--bg); color: var(--text); outline: none; transition: border var(--transition);
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.login-btn {
  width: 100%; padding: 10px; background: var(--primary); color: var(--primary-fg);
  border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: opacity var(--transition); margin-top: 8px;
}
.login-btn:hover { opacity: 0.9; }

/* Overlay */
#overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.1); z-index: 50; }

.loading-spinner { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Page Header */
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.page-header-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0;
}
.page-header h1 { font-size: 20px; font-weight: 700; color: var(--text); }
.page-header p { font-size: 12px; color: var(--text-muted); }

/* Cards */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-header { padding: 20px 24px 12px; }
.card-title { font-size: 16px; font-weight: 600; color: var(--text); }
.card-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.card-body { padding: 12px 24px 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; font-family: var(--font);
  cursor: pointer; transition: all var(--transition); border: 1px solid transparent; line-height: 1.4;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border-light); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: 0.9; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: none; padding: 6px 8px; }
.btn-ghost:hover { background: var(--border-light); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px; }
.btn svg { width: 16px; height: 16px; }
.btn-sm svg { width: 14px; height: 14px; }

/* Inputs */
.input, .textarea, .select-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  background: var(--bg); color: var(--text); outline: none; transition: border var(--transition);
}
.input:focus, .textarea:focus, .select-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.textarea { resize: vertical; min-height: 80px; }
.input::placeholder, .textarea::placeholder { color: var(--text-placeholder); }

/* Toggle */
.toggle {
  position: relative; width: 44px; height: 24px;
  background: var(--border); border-radius: 12px;
  cursor: pointer; transition: background var(--transition); border: none; flex-shrink: 0;
}
.toggle.on { background: var(--primary); }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: white; border-radius: 50%;
  transition: transform var(--transition);
}
.toggle.on::after { transform: translateX(20px); }

/* Checkbox */
.checkbox-item {
  width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 3px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--transition); background: var(--bg-card);
}
.checkbox-item.checked { background: var(--primary); border-color: var(--primary); }
.checkbox-item.checked::after {
  content: ''; width: 8px; height: 5px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px); z-index: 60;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal-content {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  animation: slideUp 0.2s ease;
}
.modal-header { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.modal-body { padding: 16px 24px; }
.modal-footer { padding: 0 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
/* Karten-Erstell-Format (Convert-to-Task u. a.): vollbreiter, zentrierter
   Speichern-Button + Hinweis darunter — deckungsgleich mit "Neuer Gedanke". Das
   × in der Kopfzeile ersetzt den Abbrechen-Button. */
.modal-footer-card { display: block; }
.modal-footer-card .qn-save-row { margin-top: 0; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Navigate Board */
.navigate-container { padding: 16px; overflow-x: auto; min-height: calc(100vh - 20px); }
.navigate-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
/* Responsive board: fills the available width; Person/Topic column is sized to the
   longest name (capped 25ch, set inline), the data columns share the rest equally
   (Lastenheft v2 Navigate #1). Horizontal scroll kicks in only when the data columns
   hit their min-width on small screens. */
.navigate-board { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: fit-content; }

.navigate-header-row {
  display: flex; border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 10; background: var(--bg);
}
.navigate-col-header {
  padding: 8px 10px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  flex-shrink: 0; border-right: 1px solid var(--border-light);
}
/* Calm, uniform column titles (Lastenheft v4 Navigate, Abb. 68). The per-column
   colours added no value for the user, and their coloured 2px underlines were
   the "Trennungen nicht sauber / nach links verzogen" misalignment in Abb. 57/58.
   One muted colour + the single clean rule on .navigate-header-row = bündig. */
.col-hdr-capture, .col-hdr-waiting_for, .col-hdr-next_action,
.col-hdr-reference, .col-hdr-done_history { color: var(--text-muted); }
.navigate-person-row {
  display: flex; border-bottom: 1px solid var(--border-light); transition: background var(--transition);
}
.navigate-person-row:nth-child(even) { background: rgba(248,250,252,0.6); }
.dark .navigate-person-row:nth-child(even) { background: rgba(30,41,59,0.4); }
.navigate-person-row:hover { background: rgba(239,246,255,0.4); }

.navigate-person-cell {
  padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  position: sticky; left: 0; background: inherit; z-index: 5;
}
.navigate-column-cell {
  padding: 6px 6px; flex-shrink: 0; border-right: 1px solid var(--border-light);
  min-height: 48px; display: flex; flex-direction: column; gap: 8px;  /* more breathing room between cards (v6 1.22 Fig 21/22) */
}
.nav-task-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: grab; font-size: 12px; transition: all var(--transition); position: relative;
}
.nav-task-card:hover { border-color: var(--text-placeholder); box-shadow: var(--shadow-sm); }
.nav-task-card.completed { opacity: 0.3; filter: grayscale(1); }
.nav-task-card.urgency-overdue { border-left: 3px solid #f87171; }
.nav-task-card.urgency-today { border-left: 3px solid #fb923c; }
.nav-task-card.urgency-week { border-left: 3px solid #fde047; }

/* Task titles use the near-black --text-strong for clearly better contrast than the
   greyish --text (Lastenheft v6 1.22, Fig 19/20) — font unchanged. */
.task-title-input {
  flex: 1; font-size: 12px; font-family: var(--font);
  border: none; outline: none; background: transparent; color: var(--text-strong); min-width: 0;
}
.task-title-display { flex: 1; font-size: 12px; color: var(--text-strong); min-width: 0; word-break: break-word; }

.task-actions { display: none; gap: 2px; flex-shrink: 0; }
.nav-task-card:hover .task-actions { display: flex; }

.task-action-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-muted); border-radius: 3px; display: flex; align-items: center;
}
.task-action-btn:hover { color: var(--text); background: var(--border-light); }

.reminder-badge { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* (Removed: inline "+ Add" per column — tasks are created via Quick Note only,
   Lastenheft v2 Navigate #4) */

/* List View */
.list-container { padding: 24px; max-width: 800px; margin: 0 auto; }
.list-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list-card-header {
  padding: 20px 24px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border-light);
}
.list-card-header h2 { font-size: 18px; font-weight: 600; color: var(--text); }
.list-item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.list-item-row:hover { background: var(--border-light); }
.list-item-row.completed .list-item-title { text-decoration: line-through; color: var(--text-muted); }
.list-item-title { flex: 1; font-size: 13px; color: var(--text); }
.list-add-row { display: flex; align-items: center; gap: 8px; padding: 12px 24px; }

/* Calendar */
.calendar-container { padding: 16px; display: flex; gap: 16px; height: calc(100vh - 20px); }
.calendar-grid {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: auto;
}
.calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.calendar-header h2 { font-size: 16px; font-weight: 600; }
.week-header { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.week-header-day {
  padding: 8px; text-align: center; font-size: 11px; font-weight: 600;
  text-transform: uppercase; color: var(--text-muted);
}
.week-header-day.today { color: var(--accent); }
.time-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); }
.time-label {
  padding: 4px 8px; font-size: 11px; color: var(--text-muted);
  text-align: right; border-right: 1px solid var(--border-light); height: 48px;
}
.time-cell {
  border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  height: 48px; position: relative; cursor: pointer;
}
.time-cell:hover { background: var(--accent-light); }
.calendar-event {
  position: absolute; left: 2px; right: 2px;
  background: var(--accent); color: white; font-size: 11px;
  padding: 2px 6px; border-radius: 4px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; cursor: pointer; z-index: 2;
}
.calendar-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

/* Notes */
.notes-container { display: flex; height: 100vh; }
.notes-sidebar {
  width: 260px; background: var(--bg-card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; position: relative;
}
/* Collapsible sidebar for more editing room (Lastenheft v2 Notes #6) */
.notes-sidebar.collapsed { width: 16px; min-width: 16px; overflow: visible; }
.notes-sidebar.collapsed > *:not(.notes-collapse-btn) { display: none; }
.notes-collapse-btn { position: absolute; top: 8px; right: -11px; z-index: 20; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer;
  color: var(--text-secondary); font-size: 13px; line-height: 1; box-shadow: var(--shadow-sm); }
.notes-new-page { width: calc(100% - 16px); margin: 8px; justify-content: center; }
.notes-sidebar-header {
  padding: 16px; border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.notes-sidebar-header h2 { font-size: 14px; font-weight: 600; color: var(--text); }
.notes-page-item {
  padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary);
  transition: all var(--transition); border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
}
.notes-page-item:hover { background: var(--border-light); color: var(--text); }
.notes-page-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
.notes-editor { flex: 1; padding: 24px 32px; overflow-y: auto; }
.notes-editor-title {
  width: 100%; font-size: 24px; font-weight: 700; border: none; outline: none;
  background: transparent; color: var(--text); font-family: var(--font); margin-bottom: 16px;
}
.notes-editor-content {
  width: 100%; min-height: 60vh; border: none; outline: none;
  background: transparent; color: var(--text); font-family: var(--font);
  font-size: 14px; line-height: 1.8; resize: none;
}

/* AI Dashboard */
.ai-dashboard { padding: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-change { font-size: 12px; margin-top: 8px; }
.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }
.chart-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* Topics */
.topics-container { padding: 24px; max-width: 1200px; margin: 0 auto; }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.topic-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); cursor: pointer;
}
.topic-card:hover { box-shadow: var(--shadow-md); }
.topic-color-bar { height: 4px; }
.topic-card-body { padding: 16px; }
.topic-card h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.topic-card p {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.topic-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--border-light); color: var(--text-secondary); }

/* Topic Board */
.topic-board-container { height: 100vh; display: flex; flex-direction: column; }
.topic-board-toolbar {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; background: var(--bg-card);
}
.topic-board-canvas { flex: 1; position: relative; overflow: hidden; background: var(--bg); cursor: grab; }
.topic-board-canvas:active { cursor: grabbing; }
.board-item { position: absolute; border-radius: var(--radius); box-shadow: var(--shadow); cursor: move; user-select: none; }
.board-item-note { padding: 12px; font-size: 13px; line-height: 1.5; overflow: hidden; }
.board-item-note textarea {
  width: 100%; height: calc(100% - 8px); border: none; outline: none;
  background: transparent; resize: none; font-family: var(--font); font-size: 13px; color: #1e293b;
}

/* Settings */
.settings-container { padding: 24px; max-width: 640px; margin: 0 auto; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.settings-row-label { display: flex; align-items: center; gap: 12px; }
.settings-row-label svg { width: 20px; height: 20px; color: var(--text-muted); }
.settings-row-label .label-text h4 { font-size: 14px; font-weight: 500; color: var(--text); }
.settings-row-label .label-text p { font-size: 12px; color: var(--text-muted); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.badge-blue { background: var(--accent-light); color: var(--accent); }
.badge-green { background: var(--success-light); color: var(--success); }
.badge-red { background: var(--danger-light); color: var(--danger); }
.badge-yellow { background: var(--warning-light); color: var(--warning); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.badge-gray { background: var(--border-light); color: var(--text-secondary); }
/* Small colour-coded column pill in Navigate search hits (Lastenheft v4, Abb. 67).
   Uses theme vars so the colours adapt in dark mode. */
.col-pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:10px; font-weight:600; vertical-align:baseline; }
.col-pill-capture      { background:var(--accent-light);  color:var(--accent); }
.col-pill-waiting_for  { background:var(--warning-light); color:var(--warning); }
.col-pill-next_action  { background:var(--success-light); color:var(--success); }
.col-pill-reference    { background:var(--purple-light);  color:var(--purple); }
.col-pill-done_history { background:var(--border-light);  color:var(--text-muted); }

/* Urgency dots */
.urgency-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.urgency-dot.overdue { background: #ef4444; }
.urgency-dot.today { background: #f97316; }
.urgency-dot.week { background: #eab308; }

.dragging { opacity: 0.5; }
.drag-over { background: var(--accent-light) !important; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: 0.4; }
.empty-state h3 { font-size: 14px; font-weight: 500; }
.empty-state p { font-size: 13px; margin-top: 4px; }

/* Search */
.search-box { position: relative; display: flex; align-items: center; }
/* The Navigate search fills its flex container so it sits wide and reaches the
   Filter button (Lastenheft v4 Navigate, Abb. 65/69) instead of a fixed 200px
   field stuck top-left (Abb. 64). The container's flex/max-width (set inline)
   governs the actual width. */
.search-box input {
  padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; font-family: var(--font); background: var(--bg-card); color: var(--text);
  outline: none; width: 100%; transition: border-color var(--transition);
}
.search-box input:focus { border-color: var(--accent); }
.search-box svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-muted); }

.select-wrapper { position: relative; display: inline-flex; }
.select-input { appearance: none; padding-right: 28px; cursor: pointer; min-width: 120px; }

/* AI Dashboard: Focus Distance + Planning Reliability + chart */
.fd-section-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:10px 0 4px; border-bottom:1px solid var(--border-light); margin-bottom:4px; }
.fd-task-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light); font-size:13px; }
.fd-task-row .fd-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-task-row .fd-meta { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.pr-tabs { display:flex; gap:4px; margin-left:auto; }
.pr-tab { padding:4px 10px; font-size:11px; border:1px solid var(--border); background:var(--bg); border-radius:6px; cursor:pointer; color:var(--text-secondary); font-family:var(--font); }
.pr-tab.active { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }
.pr-bar-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; }
.pr-bar-label { width:60px; color:var(--text-secondary); flex-shrink:0; }
.pr-bar-track { flex:1; height:10px; background:var(--border-light); border-radius:5px; overflow:hidden; }
.pr-bar-fill { display:block; height:100%; border-radius:5px; }
.pr-bar-count { width:32px; text-align:right; font-weight:600; }
.pr-top-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light); font-size:13px; }
.pr-top-rank { width:20px; height:20px; border-radius:50%; background:var(--border-light); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.pr-top-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-top-balls { color:var(--accent); letter-spacing:1px; }
.chart-bar-fill { width:100%; background:var(--accent); border-radius:4px 4px 0 0; transition:height .3s; }
.chart-bar:hover .chart-bar-fill { background:var(--purple,#8b5cf6); }

/* Heatmap */
.heatmap-grid { display: grid; gap: 3px; }
.heatmap-cell { width: 14px; height: 14px; border-radius: 2px; background: var(--border-light); }
.heatmap-cell.level-1 { background: #dcfce7; }
.heatmap-cell.level-2 { background: #86efac; }
.heatmap-cell.level-3 { background: #22c55e; }
.heatmap-cell.level-4 { background: #15803d; }

/* Mobile */
#mobile-topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  height: 52px; background: var(--bg-card); border-bottom: 1px solid var(--border);
  z-index: 45; align-items: center; justify-content: space-between; padding: 0 16px;
}
#mobile-logo { font-weight: 700; font-size: 15px; color: var(--text); }
#hamburger {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
}
#hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px; }
#mobile-logout { background: none; border: none; font-size: 13px; color: var(--text-secondary); cursor: pointer; font-family: var(--font); }
#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); z-index: 39; }

@media (max-width: 768px) {
  #mobile-topbar { display: flex; }
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }
  #content { margin-left: 0; padding-top: 52px; }
  .charts-row { grid-template-columns: 1fr; }
  .calendar-container { flex-direction: column; }
  .calendar-sidebar { width: 100%; }
}

/* ============================================================
   Phase 1 — Quick Note, effort, focus/Eisenhower, menus
   ============================================================ */
/* Modern, lighter dialog with breathing room to the outer edge (Lastenheft v4
   B5, Abb. 74) — the box had no inner padding. */
.quicknote-box { max-width: 560px; width: 92%; padding: 20px 22px; }
.quicknote-header { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; margin-bottom:14px; }
.qn-head-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--warning-light); color:var(--warning); flex-shrink:0; }
.qn-head-title { flex:1; }
.qn-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:22px; line-height:1; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qn-close:hover { background:var(--border-light); color:var(--text); }
.qn-person-batch:empty { display:none; }
.quicknote-text {
  width:100%; min-height:90px; resize:vertical; padding:12px; font-size:15px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text);
  font-family:inherit;
}
.quicknote-text:focus { outline:none; border-color:var(--accent); }
.quicknote-suggest, .quicknote-person-suggest { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.quicknote-meta { margin-top:12px; }
.quicknote-meta .form-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:4px; }
.quicknote-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
/* Primary action bottom-right; the Strg+Enter hint is smaller and BELOW the button
   (Lastenheft v6, p167 Fig 25 item 3). */
.quicknote-footer { display:flex; align-items:center; justify-content:flex-end; margin-top:16px; }
.qn-action { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.quicknote-count { font-size:10px; color:var(--text-muted); }
/* "Alternativ: Zu Liste hinzufügen" is now BELOW the primary action and visually
   de-emphasised so first-time users aren't overwhelmed (Lastenheft v5, p156). */
.suggest-chip {
  /* Use theme vars so the chip stays legible in dark mode (Lastenheft v4 Abb. 59:
     the old --bg-subtle fallback #f4f4f5 was near-white text-on-white in dark). */
  padding:4px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg-card); font-size:12px; cursor:pointer; color:var(--text);
}
.suggest-chip:hover { border-color:var(--accent); color:var(--accent); }
.suggest-chip-new { border-style:dashed; color:var(--text-muted); }

/* ---- Quick Note v2: inline token highlighting + chips + person dropdown ---- */
/* Backdrop-highlight technique: a div mirrors the textarea text with colored
   token spans; the textarea sits on top with transparent text + visible caret. */
/* Mic sits OUTSIDE the field, to its right (Lastenheft v5, p154 Fig 6). */
.qn-input-row { display:flex; align-items:flex-start; gap:8px; }
.qn-input-wrap { position:relative; flex:1; min-width:0; }
.qn-highlights, .qn-text-overlay {
  font-family:var(--font); font-size:15px; line-height:1.5; letter-spacing:normal;
  padding:12px; border:1px solid transparent; border-radius:var(--radius);
  white-space:pre-wrap; word-wrap:break-word; box-sizing:border-box; min-height:64px;
}
.qn-highlights {
  position:absolute; top:0; left:0; right:0; bottom:0; overflow:auto;
  color:var(--text); background:var(--bg); border-color:var(--border); pointer-events:none; z-index:1;
}
.qn-text-overlay {
  position:relative; z-index:2; width:100%; resize:none;
  background:transparent; color:transparent; caret-color:var(--text); -webkit-text-fill-color:transparent;
}
/* Single, consistent field border (on the highlight layer) that turns blue on
   all four edges when focused — the old overlay-only focus border looked off
   against the highlight layer's border, esp. at the bottom (Lastenheft v4 Abb. 60). */
/* The textarea border stays transparent on focus too — only the highlight layer
   shows the (single) blue border, so there is no doubled border (Lastenheft v5,
   p154 Fig 5). Overrides the legacy .quicknote-text:focus border-color. */
.qn-text-overlay:focus { outline:none; border-color:transparent; }
.qn-input-wrap:focus-within .qn-highlights { border-color:var(--accent); }
.qn-text-overlay { overflow:hidden; }   /* auto-grown by JS, so no inner scrollbar */
/* Typed text is transparent (shown via the highlight layer) but the PLACEHOLDER must
   stay visible (Lastenheft v6 1.22 §1) — re-enable its fill colour. */
.qn-text-overlay::placeholder { -webkit-text-fill-color:var(--text-placeholder); color:var(--text-placeholder); opacity:1; }
/* Zeichenzähler sitzt IM Feld unten rechts (Lastenheft „Neuer Gedanke", 22.07.).
   Er wandert mit, weil das Feld mitwächst, und kostet keine eigene Zeile mehr. */
.qn-charcount { position:absolute; right:10px; bottom:6px; z-index:3; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--bg) 40%); padding-left:8px; }
.qn-count-row { display:flex; justify-content:flex-end; margin-top:4px; }
.qn-tok { border-radius:4px; padding:0 1px; }
.qn-tok-date   { background:#dbeafe; color:#1d4ed8; }   /* date + time = blue */
.qn-tok-column { background:#dcfce7; color:#15803d; }   /* column = green */
.qn-tok-person { background:#ede9fe; color:#6d28d9; }   /* person = lila */
.qn-tok-recur  { background:#ccfbf1; color:#0f766e; }   /* recurrence = teal */
.dark .qn-tok-date { background:#1e3a5f; color:#93c5fd; }
.dark .qn-tok-column { background:#14532d; color:#86efac; }
.dark .qn-tok-person { background:#3b2e63; color:#c4b5fd; }
.dark .qn-tok-recur { background:#134e4a; color:#5eead4; }
.qn-charcount { font-size:11px; color:var(--text-muted); }

/* Voice "Recorder" button — beside the field, not on top of it (Lastenheft v5,
   p154 Fig 6). A flex item in .qn-input-row, top-aligned with the textarea. */
.qn-mic { flex-shrink:0; align-self:flex-start; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
  border-radius:10px; background:var(--bg-card); color:var(--text-secondary); cursor:pointer;
  transition:all var(--transition); }
.qn-mic:hover { color:var(--accent); border-color:var(--accent); }
.qn-mic.recording { color:#fff; background:var(--danger); border-color:var(--danger); animation:qnPulse 1.2s infinite; }
@keyframes qnPulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow:0 0 0 5px rgba(239,68,68,0); } }

/* Person-suggestion pop-up sits in NORMAL FLOW above the field (Lastenheft v6,
   p166 Fig 27): it reserves its own space and pushes the field down instead of
   floating/overlapping, so it is never clipped by the dialog edge, never covers the
   "Quick Note" title, and never covers the typed text. Keyboard-first (Tab/Enter). */
.qn-disambig { margin:4px 0 8px; z-index:5;
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.qn-disambig-label, .qn-suggest-label { font-size:11px; color:var(--text-muted); }
.qn-suggest-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font); }
.qn-suggest-chip svg { width:13px; height:13px; opacity:.7; }
.qn-suggest-chip:hover { border-color:var(--accent); color:var(--accent); }
.qn-suggest-chip.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.qn-suggest-hint { font-size:11px; color:var(--text-muted); margin-left:auto; white-space:nowrap; }
/* Mandatory inline surname field for a new person (Lastenheft v6, Anhang 2 §8). */
.qn-surname-input { flex:1; min-width:120px; padding:5px 8px; font-size:13px; }

.qn-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.qn-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 9px; border-radius:999px; font-size:12px; font-weight:500; }
.qn-chip-date  { background:#dbeafe; color:#1d4ed8; }
.qn-chip-col   { background:#dcfce7; color:#15803d; }
.qn-chip-recur { background:#ccfbf1; color:#0f766e; }
.qn-chip-warn  { background:#fef3c7; color:#b45309; cursor:pointer; }
.dark .qn-chip-date  { background:#1e3a5f; color:#93c5fd; }
.dark .qn-chip-col   { background:#14532d; color:#86efac; }
.dark .qn-chip-recur { background:#134e4a; color:#5eead4; }
.dark .qn-chip-warn  { background:#3a2e0a; color:#fcd34d; }
.qn-chip-x { background:none; border:none; cursor:pointer; color:inherit; opacity:.6; font-size:14px; line-height:1; padding:0 2px; }
.qn-chip-x:hover { opacity:1; }
.qn-title-preview { margin-top:6px; font-size:12px; color:var(--text-secondary); min-height:14px; }
.qn-prev-label { color:var(--text-muted); }

.qn-person-batch { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.qn-person-zone, #qn-person-zone { position:relative; }
.qn-person-dropdown { position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:25;
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15);
  max-height:200px; overflow-y:auto; }
.qn-dd-item { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:13px; cursor:pointer; color:var(--text); }
.qn-dd-item:hover { background:var(--border-light); }
.qn-dd-new { color:var(--accent); font-weight:600; border-bottom:1px solid var(--border-light); }
.qn-person-selected { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border-radius:999px;
  background:var(--accent-light); color:var(--accent); font-weight:600; font-size:13px; }
.qn-person-x { background:none; border:none; cursor:pointer; color:inherit; font-size:16px; line-height:1; opacity:.7; }
.qn-person-x:hover { opacity:1; }

.qn-col-blocks { display:flex; gap:8px; }
.qn-col-block { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-card); cursor:pointer; font-size:12px; color:var(--text); font-family:var(--font); transition:all var(--transition); }
.qn-col-block:hover { border-color:var(--text-placeholder); }
.qn-col-block span { font-weight:600; }
/* Active states use theme *-light/colour vars so they stay legible in dark mode
   (Lastenheft v4 Abb. 59 — the old hardcoded #eff6ff/#fffbeb blocks were
   bright/unreadable on the dark dialog). */
/* Die Zielspalten tragen ihre Farbe schon im RUHEZUSTAND (Lastenheft „Neuer
   Gedanke", 22.07.): Rückmeldung orange, Aufgabe grün, TBD neutral. So ist die
   Bedeutung ohne Klick ablesbar; die Auswahl hebt sich zusätzlich mit Fläche
   und kräftigerem Rahmen ab. */
.qn-col-blocks .qn-col-block.qn-col-wait { color:var(--warning); border-color:color-mix(in srgb, var(--warning) 45%, var(--border)); }
.qn-col-blocks .qn-col-block.qn-col-next { color:var(--success); border-color:color-mix(in srgb, var(--success) 45%, var(--border)); }
.qn-col-blocks .qn-col-block.qn-col-wait svg { color:var(--warning); }
.qn-col-blocks .qn-col-block.qn-col-next svg { color:var(--success); }
.qn-col-block.qn-col-uns.active  { background:var(--accent-light);  border-color:var(--accent);  color:var(--accent); }
.qn-col-block.qn-col-wait.active { background:var(--warning-light); border-color:var(--warning); color:var(--warning); }
.qn-col-block.qn-col-next.active { background:var(--success-light); border-color:var(--success); color:var(--success); }
.qn-col-block.active { border-width:2px; padding:9px 5px; }
.dark .qn-col-block.qn-col-uns.active  { color:#93c5fd; }
.dark .qn-col-block.qn-col-wait.active { color:#fcd34d; }
.dark .qn-col-block.qn-col-next.active { color:#86efac; }

/* Native date/time picker indicator icons are invisible on the dark dialog
   (Lastenheft v4 Abb. 62/63) — color-scheme:dark makes the browser render
   light calendar/clock glyphs. */
.dark input[type="date"], .dark input[type="time"] { color-scheme: dark; }

/* Effort balls */
.effort-balls { display:inline-flex; gap:3px; vertical-align:middle; margin:0 4px; }
.effort-ball { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--text-muted); cursor:pointer; display:inline-block; }
.effort-ball.filled { background:var(--accent); border-color:var(--accent); }

.task-source-icon { color:var(--text-muted); margin:0 4px; display:inline-flex; }
.task-group-label { font-size:10px; background:var(--border-light); color:var(--text-secondary); border-radius:4px; padding:1px 5px; margin-left:4px; }
.task-recur-label { font-size:10px; color:#0f766e; white-space:nowrap; }
.dark .task-recur-label { color:#5eead4; }

/* Focus split: board + Eisenhower */
.navigate-focus-split { display:flex; gap:16px; align-items:flex-start; }
.navigate-board-wrap { flex:1; overflow-x:auto; }
.eisenhower-panel { width:380px; flex-shrink:0; background:var(--card,#fff); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.eisenhower-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.eisenhower-head h3 { font-size:15px; font-weight:700; }
.eisenhower-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.eisenhower-quadrant { border:1px solid var(--border); border-radius:8px; padding:8px; min-height:120px; transition:background .15s; }
.eisenhower-quadrant.drag-over { background:rgba(59,130,246,.1); border-color:var(--accent); }
.q-do { border-top:3px solid #ef4444; }
.q-schedule { border-top:3px solid #3b82f6; }
.q-delegate { border-top:3px solid #f59e0b; }
.q-decide { border-top:3px solid #94a3b8; }
.eq-title { font-weight:700; font-size:12px; margin-bottom:6px; }
.eq-title span { display:block; font-weight:400; font-size:10px; color:var(--text-muted); }
.eq-task { display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 0; }
.eq-task.completed span { text-decoration:line-through; color:var(--text-muted); }

/* Context menu */
.context-menu { background:var(--card,#fff); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:4px; min-width:180px; }
/* Compact rows so the expanded Filter cascade does not eat the screen, sitting
   at roughly the Navigate task-text size (Lastenheft v4 Navigate, Abb. 70/71). */
.context-menu-item { padding:5px 12px; font-size:12px; border-radius:6px; cursor:pointer; color:var(--text); }
.context-menu-item:hover { background:var(--border-light); }
/* Bold, uppercase section headings (Person / Topic, Group, Column) for a clear
   hierarchy above their indented choices (Lastenheft v4 Navigate, Abb. 71). */
.context-menu-item.heading { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:0.03em; color:var(--text-secondary); }
.context-menu-item.heading:not(:first-child) { margin-top:2px; }

/* Equal 3-across grid when a single column is isolated by filter */
.navigate-column-cell.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start; }

/* Urgency colors */
.nav-task-card.urgency-today { border-left:3px solid #eab308; }
.nav-task-card.urgency-today .reminder-badge { color:#a16207; }
.nav-task-card.urgency-overdue { border-left:3px solid #ef4444; }
.nav-task-card.urgency-overdue .reminder-badge { color:#dc2626; }

@media print {
  body * { visibility:hidden; }
  #eisenhower-print-area, #eisenhower-print-area * { visibility:visible; }
  #eisenhower-print-area { position:absolute; left:0; top:0; width:100%; }
}

/* ============================================================
   Notes / LogBook rich editor (Phase 3)
   ============================================================ */
.notes-search { display:flex; align-items:center; gap:6px; padding:6px 10px; margin:4px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.notes-search input { border:none; background:transparent; outline:none; flex:1; font-size:13px; color:var(--text); font-family:inherit; }
/* Search results as an overlay panel to the RIGHT of the sidebar so it doesn't
   cover the sidebar UI (Lastenheft v2 Notes #5, Abb. 109). */
.notes-search-results { display:none; position:absolute; left:100%; top:44px; width:320px; margin-left:6px;
  max-height:60vh; overflow-y:auto; border:1px solid var(--border); border-radius:8px; background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:60; }
.notes-search-hit { padding:8px 10px; cursor:pointer; border-bottom:1px solid var(--border-light); }
.notes-search-hit:hover { background:var(--border-light); }
.nsh-title { font-size:13px; font-weight:600; }
.nsh-snip { font-size:11px; color:var(--text-muted); margin-top:2px; }
.nsh-snip mark, .notes-search-hit mark { background:#fde68a; color:inherit; padding:0 1px; }
.notes-search-empty { padding:8px 10px; font-size:12px; color:var(--text-muted); }
.notes-tree { padding:4px 0; }
.notes-page-item .np-actions { margin-left:auto; display:none; gap:2px; }
.notes-page-item:hover .np-actions { display:inline-flex; }
.notes-page-item .np-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-page-item .np-icon { margin-right:4px; }

.notes-editor-head { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border-light); }
.notes-icon-btn { font-size:22px; background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:6px; }
.notes-icon-btn:hover { background:var(--border-light); }
.notes-saved-tag { font-size:12px; color:#16a34a; min-width:64px; }
.notes-toolbar { display:flex; flex-wrap:wrap; gap:3px; padding:8px 0; border-bottom:1px solid var(--border-light); }
.notes-tool { min-width:30px; height:30px; padding:0 8px; border:1px solid var(--border); background:var(--bg); border-radius:6px; cursor:pointer; font-size:13px; color:var(--text); }
.notes-tool:hover { background:var(--border-light); }
.notes-tool-convert { margin-left:auto; background:var(--accent,#6366f1); color:#fff; border-color:var(--accent,#6366f1); font-weight:600; }
.notes-linker { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 0; }
.linker-label { font-size:12px; color:var(--text-muted); }
.linker-chip { font-size:12px; background:var(--border-light); border-radius:999px; padding:2px 9px; }
.linker-chip b { cursor:pointer; color:var(--text-muted); margin-left:3px; }
.linker-add { width:24px; height:24px; border-radius:50%; border:1px dashed var(--border); background:none; cursor:pointer; color:var(--text-muted); }
/* Linker at the foot of the note + inline person dropdown (Lastenheft v2 Notes #3) */
.notes-linker { border-top:1px solid var(--border-light); margin-top:10px; padding-top:10px; }
.linker-add-wrap { position:relative; display:inline-block; }
.linker-dropdown { position:absolute; bottom:calc(100% + 6px); left:0; min-width:200px; max-height:240px; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:40; padding:4px; }
.linker-dd-head { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:6px 8px 2px; }
.linker-dd-item { padding:6px 10px; font-size:13px; border-radius:6px; cursor:pointer; color:var(--text); }
.linker-dd-item:hover { background:var(--accent-light); color:var(--accent); }
.linker-dd-item.suggested { font-weight:600; }

/* Floating selection toolbar (Lastenheft v2 Notes #1) */
.notes-float-toolbar { position:absolute; z-index:30; display:flex; gap:2px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.2); padding:3px; }
.notes-float-btn { min-width:28px; height:28px; border:none; background:none; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text); }
.notes-float-btn:hover { background:var(--border-light); }
.notes-float-convert { background:var(--accent); color:#fff; font-weight:600; padding:0 8px; }

/* Convert-to-Task popup (Lastenheft v2 Notes #2) */
.ct-quote { font-size:13px; font-style:italic; color:var(--text-secondary); border-left:3px solid var(--accent);
  padding:4px 10px; background:var(--accent-light); border-radius:4px; }
.ct-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* "(✨ AI Suggestion)" reads as a quiet hint baked into the label (Lastenheft v5,
   p157 Fig 10); the regenerate ↻ is a small ghost icon, not a competing button. */
.ct-ai-hint { font-weight:400; font-size:11px; color:var(--text-muted); text-transform:none; letter-spacing:normal; }
.ct-ai-regen { border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:15px; line-height:1;
  width:24px; height:24px; border-radius:6px; flex-shrink:0; }
.ct-ai-regen:hover { background:var(--border-light); color:var(--accent); }
.ct-person-zone { position:relative; }
/* Footer shortcut hint sits UNDER the primary button, smaller (Lastenheft v6 1.25). */
.modal-action { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.modal-hint { font-size:10px; color:var(--text-muted); }
/* Inline token pills inside the "Markierter Text" quote (Lastenheft v6 1.25 Fig 40). */
.ct-pill { border-radius:4px; padding:0 3px; font-weight:600; }
.ct-pill-person { background:#ede9fe; color:#6d28d9; }
.ct-pill-date   { background:#dbeafe; color:#1d4ed8; }
.ct-pill-col    { background:#dcfce7; color:#15803d; }
.ct-pill-recur  { background:#ccfbf1; color:#0f766e; }
.dark .ct-pill-person { background:#3b2e63; color:#c4b5fd; }
.dark .ct-pill-date   { background:#1e3a5f; color:#93c5fd; }
.dark .ct-pill-col    { background:#14532d; color:#86efac; }
.dark .ct-pill-recur  { background:#134e4a; color:#5eead4; }
/* Reminder / Zieldatum popover — compact so it stays on-screen (v6 1.22 Fig 35). */
.reminder-popover { font-size:12px; }
.reminder-popover .input { padding:5px 8px; font-size:12px; margin-bottom:6px; }
.reminder-popover .form-label { font-size:11px; }
.reminder-popover .btn-sm { padding:4px 8px; font-size:11px; }
.ct-col-btns { display:flex; gap:6px; }
.ct-col-btn { flex:1; padding:8px 6px; border:1px solid var(--border); border-radius:8px; background:var(--bg);
  cursor:pointer; font-size:12px; color:var(--text-secondary); font-family:var(--font); }
.ct-col-btn.active { background:var(--accent-light); border-color:var(--accent); color:var(--accent); font-weight:600; }
.notes-stage { position:relative; flex:1; min-height:300px; }
.notes-stage.drag-over { outline:2px dashed var(--accent,#6366f1); outline-offset:-4px; }
/* Live drop-position preview + dragging feedback (Lastenheft v2 Notes #6) */
.notes-drop-ghost { position:absolute; width:220px; height:160px; border:2px dashed var(--accent,#6366f1);
  background:rgba(99,102,241,.08); border-radius:8px; pointer-events:none; z-index:6; }
.file-overlay.dragging { opacity:.85; box-shadow:0 12px 32px rgba(0,0,0,.28); z-index:20; }
.notes-rich { min-height:300px; padding:12px 4px; outline:none; font-size:15px; line-height:1.6; color:var(--text); }
.notes-rich:focus { outline:none; }
.notes-rich img { max-width:100%; border-radius:6px; }
.task-chip { display:inline-block; background:#dbeafe; color:#1d4ed8; border-radius:6px; padding:1px 8px; margin:0 2px; font-size:13px; cursor:pointer; }
.task-chip:hover { background:#bfdbfe; }
/* Convert-to-Task passage highlight (blue, dblclick jumps to task) */
.task-ref { background:#dbeafe; color:#1d4ed8; border-radius:3px; padding:0 2px; cursor:pointer; }
.task-ref:hover { background:#bfdbfe; }
.dark .task-ref, .dark .task-chip { background:#1e3a5f; color:#93c5fd; }
/* Green check at the end of a marked passage once its task is done — subtle, not
   intrusive (Lastenheft v6 1.25). */
.task-ref-done::after { content:' ✓'; color:#16a34a; font-weight:700; }
/* Metadata badge after a converted passage: "Person · Column · date" (v6 1.25 Fig 42). */
.task-ref-meta { display:inline; margin-left:4px; font-size:11px; font-weight:600; color:#6d28d9;
  background:#ede9fe; border-radius:999px; padding:1px 8px; cursor:pointer; white-space:nowrap; }
.task-ref-meta:hover { background:#ddd6fe; }
.task-ref-meta.done { color:#15803d; background:#dcfce7; }
.dark .task-ref-meta { background:#3b2e63; color:#c4b5fd; }
.dark .task-ref-meta.done { background:#14532d; color:#86efac; }

/* Notes sidebar: cascading context filters */
.notes-filters { padding:2px 8px 6px; border-bottom:1px solid var(--border-light); }
.notes-filter-head { padding:8px 10px 3px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.notes-filter-chips { display:flex; flex-wrap:wrap; gap:4px; padding:0 8px; }
.notes-filter-chip { padding:2px 10px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:11px; cursor:pointer; color:var(--text-secondary); font-family:var(--font); }
.notes-filter-chip.active { background:var(--success-light); border-color:#047857; color:#047857; font-weight:600; }
.notes-filter-persons { display:flex; flex-direction:column; max-height:150px; overflow-y:auto; padding:0 4px; }
.notes-filter-person { text-align:left; padding:4px 8px; border:none; background:none; font-size:12px; color:var(--text-secondary); cursor:pointer; border-radius:6px; font-family:var(--font); }
.notes-filter-person:hover { background:var(--border-light); }
.notes-filter-person.active { background:var(--accent-light); color:var(--accent); font-weight:600; }

/* Note header info row (created date + task categorization) */
.notes-info-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.notes-info-left, .notes-info-right { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav-task-card.task-highlight { box-shadow:0 0 0 3px var(--accent,#6366f1); transition:box-shadow .3s; }

.file-overlay { position:absolute; border:1px solid var(--border); border-radius:8px; background:var(--card,#fff); box-shadow:0 4px 16px rgba(0,0,0,.12); overflow:hidden; display:flex; flex-direction:column; z-index:5; resize:both; min-width:120px; min-height:90px; }
.file-overlay-bar { display:flex; justify-content:flex-end; gap:4px; padding:2px 4px; background:var(--border-light); cursor:move; }
.file-overlay-bar a, .file-overlay-bar button { background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-secondary); text-decoration:none; }
.file-overlay-body { flex:1; overflow:hidden; }
.file-overlay-generic { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:6px; color:var(--text-muted); font-size:12px; padding:8px; text-align:center; }

/* Calendar schedule sidebar (Phase 2) */
.count-badge { background:var(--accent,#6366f1); color:#fff; border-radius:999px; padding:0 7px; font-size:11px; margin-left:6px; }
.sched-task { padding:7px 8px; border:1px solid var(--border-light); border-radius:8px; margin-bottom:6px; cursor:grab; background:var(--bg); }
.sched-task.scheduled { opacity:.55; }
.sched-task.scheduled svg { color:var(--accent); }
.sched-task-title { font-size:13px; display:flex; gap:6px; align-items:flex-start; }
.stt-text { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sched-clock { flex-shrink:0; color:var(--accent); display:inline-flex; }
/* Darker, more legible meta text under "Schedule" (Lastenheft v2 Calendar #3) */
.sched-task-meta { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.time-cell.drag-over { background:rgba(99,102,241,.12); }
.calendar-event { background:#e5e7eb; color:#374151; }

/* Calendar v2: positioned week grid + month view + settings */
.cal-view-toggle { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-view-btn { padding:5px 14px; font-size:12px; border:none; background:var(--bg); color:var(--text-secondary); cursor:pointer; font-family:var(--font); }
.cal-view-btn.active { background:var(--primary); color:var(--primary-fg); font-weight:600; }
.cal-status-btn { color:var(--success); border-color:var(--success-light); }
.calendar-header { gap:12px; flex-wrap:wrap; align-items:flex-start; }
.calendar-header h2 { font-size:18px; font-weight:700; }
.cal-subline { font-size:11px; color:var(--text-muted); margin-top:1px; }
.cal-range { font-size:16px; font-weight:700; color:var(--text); margin-top:2px; }
.week-header-day .whd-num { font-size:15px; font-weight:700; color:var(--text); }
.week-header-day.today .whd-num { color:var(--accent); }
.time-grid-2 { display:grid; }
.time-label-col { border-right:1px solid var(--border-light); }
.day-col {
  position:relative; border-right:1px solid var(--border-light); overflow:hidden;
  background-image:repeating-linear-gradient(to bottom, var(--border-light) 0 1px, transparent 1px 48px);
}
.day-col.today { background-color:rgba(59,130,246,.04); }
.day-col.drag-over { background-color:rgba(99,102,241,.10); }
.now-line { position:absolute; left:0; right:0; height:2px; background:#ef4444; z-index:4; }
/* Drop preview while dragging a calendar event / Schedule task — a clean dashed
   ghost with the new start time (Lastenheft v6 1.23 Fig 37). */
.cal-drop-preview { position:absolute; left:2px; right:4px; z-index:6; pointer-events:none;
  border:2px dashed var(--accent); border-radius:6px; background:rgba(99,102,241,.12); }
.cal-drop-preview-time { position:absolute; top:-9px; left:6px; font-size:10px; font-weight:700; color:#fff;
  background:var(--accent); border-radius:4px; padding:1px 6px; line-height:1.3; white-space:nowrap; }
.cal-block {
  position:absolute; left:2px; right:4px; border-radius:5px; padding:1px 5px;
  font-size:10px; line-height:1.25; overflow:hidden; z-index:2; color:var(--text);
}
.cal-block-time { display:block; font-weight:600; font-size:9px; opacity:.8; }
.cal-block-external { z-index:1; }
.cal-block-task { background:#e5e7eb; border-left:3px solid #94a3b8; cursor:grab; z-index:3; }
.dark .cal-block-task { background:#334155; }
.cal-block-task.completed { opacity:.4; text-decoration:line-through; }
.cal-block-person { font-size:9px; color:var(--text-secondary); margin-top:2px; }
.cal-block-x { position:absolute; top:1px; right:2px; width:14px; height:14px; line-height:12px; text-align:center;
  border:none; background:rgba(0,0,0,.12); color:inherit; border-radius:3px; cursor:pointer; font-size:12px; padding:0;
  display:none; z-index:2; }
.cal-block-task:hover .cal-block-x { display:block; }
.cal-block-x:hover { background:rgba(0,0,0,.28); }
.cal-resize-handle { position:absolute; left:0; right:0; bottom:0; height:6px; cursor:ns-resize; background:rgba(0,0,0,.08); }
.cal-resize-handle:hover { background:rgba(0,0,0,.18); }
.all-day-chip { position:relative; margin:1px 2px; border-radius:4px; font-size:9px; padding:1px 4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; z-index:2; }
.month-grid { display:flex; flex-direction:column; }
.month-grid-head { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border-bottom:1px solid var(--border); }
.month-grid-head div { padding:6px; text-align:center; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; }
.month-grid-row { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; min-height:96px; border-bottom:1px solid var(--border-light); }
.month-cell { border-right:1px solid var(--border-light); padding:3px 4px; overflow:hidden; font-size:10px; }
.month-cell.other-month { opacity:.35; }
.month-cell.today { background:rgba(59,130,246,.06); }
.month-cell-num { font-size:12px; font-weight:600; margin-bottom:2px; }
.month-cell.today .month-cell-num { color:var(--accent); }
.month-entry { padding:0 3px; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--border-light); border-radius:3px; }
.month-entry span { font-weight:600; opacity:.75; }
.month-more { font-size:9px; color:var(--text-muted); }
.calendar-sidebar { position:relative; }
.sidebar-resize-handle { position:absolute; left:-3px; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:5; }
.sidebar-resize-handle:hover { background:rgba(99,102,241,.25); }
.sched-groupby { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); margin-top:6px; }
.sched-groupby .active { color:var(--text); font-weight:600; }
.sched-day-head { font-size:11px; font-weight:700; color:var(--text-secondary); padding:8px 0 3px; border-bottom:1px solid var(--border-light); margin-bottom:5px; }
.sched-person-head { font-size:9px; font-weight:600; letter-spacing:.05em; color:var(--text-muted); padding:4px 0 2px; }

/* ============================================================
   Navigate — grouped search, filters, reference panel, cards
   ============================================================ */

/* Task card: title row on top, meta row below (Lastenheft Abb. 17) */
.nav-task-card { flex-wrap: wrap; align-items: flex-start; }
.nav-task-card .task-title-display, .nav-task-card .task-title-input { width: calc(100% - 26px); }
.task-meta { width: 100%; display: flex; align-items: center; gap: 6px; padding-left: 24px; min-height: 14px; flex-wrap: wrap; }
.created-badge { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.reminder-badge.due-today { background: #fef9c3; color: #a16207; border-radius: 4px; padding: 0 4px; }
.reminder-badge.due-overdue { background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0 4px; }
/* Hover controls float just above the card's top-right edge so they never cover
   the task text (Lastenheft v2 Navigate #3). */
.task-actions { position: absolute; top: -13px; right: 2px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 6px; box-shadow: var(--shadow-sm); padding: 1px; z-index: 6; }
.eisenhower-marker { position: absolute; top: -6px; right: -6px; background: var(--purple, #8b5cf6); color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 11px; line-height: 16px; text-align: center; z-index: 3; }
.attachment-icon { cursor: pointer; font-size: 12px; line-height: 1; }
.attachment-icon:hover { transform: scale(1.2); }
.nav-task-card.file-drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-light); }
.q-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* Live grouped search dropdown */
.nav-search-suggest {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 360px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 200; max-height: 320px; overflow-y: auto;
}
.nav-search-hit { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border-light); font-size: 12px; }
.nav-search-hit:hover { background: var(--border-light); }
.nav-search-hit .nsh-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Source label legible (was too light grey, Lastenheft v2 Navigate #14) */
.nsh-task-meta { font-size: 10px; color: var(--text-secondary); white-space: nowrap; font-weight: 500; }
.nav-search-clear { position: absolute; right: 6px; background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; }
.nav-search-clear:hover { color: var(--danger); }

/* Filter chips */
.filter-chips { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin: -8px 0 10px; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.filter-chip b { cursor: pointer; font-weight: 700; opacity: .6; }
.filter-chip b:hover { opacity: 1; }
.chip-person { background: var(--accent-light); color: var(--accent); }
.chip-group { background: var(--success-light); color: #047857; }
.chip-column { background: var(--warning-light); color: #b45309; }

/* Person cell: hover actions + group label */
.person-actions { display: none; gap: 2px; flex-shrink: 0; }
.navigate-person-cell:hover .person-actions { display: inline-flex; }
.person-group-label { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* Reference Notes side panel (right, expandable) */
.reference-panel {
  position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 55;
  background: var(--bg-card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,.12); display: flex; flex-direction: column;
  animation: slideIn .2s ease;
}
.reference-panel.full { width: calc(100vw - var(--sidebar-width)); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.reference-panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border-light); }
.reference-panel-head h3 { font-size: 16px; font-weight: 700; }
.reference-panel-head p { font-size: 11px; color: var(--text-muted); }
.reference-add { padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.reference-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
.reference-note { border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg); }
.reference-note-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.reference-note-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; }

/* Quick Note: ADD TO LIST routing */
.context-menu-item.danger { color: var(--danger); }

/* Mobile Home (Phase 5) */
.mobile-home { max-width:640px; margin:0 auto; padding:8px; }
.mobile-tabs { display:flex; gap:6px; margin-bottom:12px; position:sticky; top:0; background:var(--bg); padding:6px 0; z-index:2; }
.mobile-tab { flex:1; padding:10px; border:1px solid var(--border); background:var(--bg); border-radius:10px; font-size:14px; font-weight:600; color:var(--text-secondary); cursor:pointer; }
.mobile-tab.active { background:var(--accent,#6366f1); color:#fff; border-color:var(--accent,#6366f1); }
.mobile-progress { margin-bottom:14px; }
.mobile-progress-bar { height:8px; background:var(--border-light); border-radius:999px; overflow:hidden; }
.mobile-progress-bar > div { height:100%; background:#16a34a; transition:width .3s; }
.mobile-progress-text { font-size:12px; color:var(--text-muted); margin-top:4px; }
.mobile-task { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border-light); border-radius:12px; margin-bottom:8px; background:var(--card,#fff); }
.mobile-task.completed .mobile-task-info > div:first-child { text-decoration:line-through; color:var(--text-muted); }
.mobile-task-info { flex:1; font-size:15px; }
.mobile-task-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
.mobile-dictate { display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px; }
.mobile-mic { width:88px; height:88px; border-radius:50%; border:none; background:var(--accent,#6366f1); color:#fff; font-size:36px; cursor:pointer; box-shadow:0 4px 16px rgba(99,102,241,.4); }
.mobile-mic.listening { animation:micpulse 1s infinite; background:#ef4444; }
@keyframes micpulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.mobile-dictate-status { font-size:13px; color:var(--text-muted); text-align:center; }
.mobile-transcript { width:100%; min-height:70px; padding:10px; border:1px solid var(--border); border-radius:10px; font-size:15px; font-family:inherit; background:var(--bg); color:var(--text); resize:vertical; }
.mobile-confirm { width:100%; }

/* ---- Aufwand indication on Navigate board cards (Lastenheft 02.07, p.204/209) ----
   Neutral-grey pill (icon + time anchor) when set; dashed "+ Aufwand" on hover when
   unset. Red stays reserved for urgency, so the pill is deliberately neutral. */
.aufwand-wrap { display: inline-flex; align-items: center; }
.aufwand-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--text-secondary); background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 1px 7px; cursor: pointer; white-space: nowrap; }
.aufwand-pill:hover { border-color: var(--text-muted); color: var(--text); }
.aufwand-pill svg { width: 12px; height: 12px; }
.aufwand-add { display: inline-flex; align-items: center; gap: 3px; font-size: 11px;
  color: var(--text-muted); background: transparent; border: 1px dashed var(--border);
  border-radius: 8px; padding: 1px 7px; cursor: pointer; white-space: nowrap;
  opacity: 0; transition: opacity .12s; }
.aufwand-add svg { width: 12px; height: 12px; }
.nav-task-card:hover .aufwand-add { opacity: 1; }
.aufwand-add:hover { border-color: var(--accent); color: var(--accent); }
@media (hover: none) { .aufwand-add { opacity: 1; } }

.aufwand-pop { position: fixed; z-index: 200; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.aufwand-mini { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: none;
  background: none; border-radius: 7px; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; }
.aufwand-mini svg { width: 15px; height: 15px; color: var(--text-secondary); }
.aufwand-mini .am-l { flex: 1 1 auto; }
.aufwand-mini .am-a { font-size: 11px; color: var(--text-muted); }
.aufwand-mini:hover { background: var(--border-light); }
.aufwand-mini.active { background: var(--accent-light); color: var(--accent); }
.aufwand-mini.active svg, .aufwand-mini.active .am-a { color: var(--accent); }
.aufwand-remove { display: flex; align-items: center; gap: 6px; padding: 7px 9px; margin-top: 2px;
  border: none; border-top: 1px solid var(--border-light); background: none; cursor: pointer;
  color: var(--text-secondary); font-size: 12.5px; border-radius: 0 0 7px 7px; }
.aufwand-remove svg { width: 13px; height: 13px; }
.aufwand-remove:hover { color: var(--danger); }

/* ---- Neuer Gedanke: Fällig bis / Erinnern am, Aufwand chips, i-info, centered save
   (Lastenheft "Testergebnis Prototyp 02.07.2026" §1.27) ---- */
/* ---- 24-Stunden-Zeitfeld (timeField.js, deutsche Oberfläche) ---------------
   Ersetzt das native <input type="time">, dessen Darstellung sich nicht
   beeinflussen lässt. Damit es nicht wie ein beliebiges Textfeld wirkt, trägt
   es dieselbe Uhr rechts wie das native Feld — als Hintergrundbild, damit kein
   zusätzliches Element nötig ist. */
.mt-time { padding-right: 30px; font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; }
.dark .mt-time { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }

/* ---- Datumsfeld im deutschen Format (dateField.js) -------------------------
   Ersetzt das native <input type="date">, dessen Darstellung sich nicht
   beeinflussen lässt. Sieht aus wie ein Eingabefeld, öffnet aber den
   Monatskalender — dasselbe Bedienmuster wie „Fällig bis" in der Maske. */
/* Der Umschlag tritt an die Stelle des ursprünglichen Feldes und muss sich
   genauso verhalten: in einer Flex-Zeile mitwachsen, sonst die Breite füllen.
   Eine am Original gesetzte feste Breite wird von dateField.js übernommen und
   gewinnt hier. */
.md-date { position: relative; display: inline-block; vertical-align: top;
  width: 100%; flex: 1 1 auto; min-width: 0; }
.md-date-btn { display: flex; width: 100%; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font); text-align: left; color: var(--text); }
.md-date-btn:hover { border-color: var(--text-placeholder); }
.md-date-btn.is-empty .md-date-txt { color: var(--text-placeholder); }
.md-date-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.md-date-cal { position: absolute; left: 0; top: calc(100% + 4px); z-index: 1400;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; }

/* ---- ZIELTERMIN in EINER Zeile (Lastenheft „Neuer Gedanke", 22.07.) --------
   ⚑ + Tag + „um" + Uhrzeit + ×, alles in einem Kasten. Das Datum ist ein
   eigener Knopf statt eines nativen Feldes, damit dort unabhängig vom
   Gebietsschema des Browsers „23. Jul 2026" steht und der Klick denselben
   Monatskalender öffnet wie das Karten-Popover. */
.qn-due { margin: 10px 0 4px; position: relative; }
.qn-due-row { display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 6px; }
.qn-due-date { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 8px;
  background: var(--accent-light); color: var(--accent); font-family: var(--font); font-size: 13px;
  cursor: pointer; text-align: left; transition: all var(--transition); }
.qn-due-date:hover { border-color: var(--accent); }
.qn-due-date.is-empty { background: transparent; color: var(--text-placeholder); }
.qn-due-date.is-empty:hover { border-color: var(--border); background: var(--bg); }
.qn-due-flag { display: inline-flex; flex-shrink: 0; opacity: .85; }
.qn-due-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn-due-at { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.qn-due-time { width: 108px; flex-shrink: 0; }
.qn-due-x { background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 18px; line-height: 1; padding: 0 6px; flex-shrink: 0; }
.qn-due-x:hover { color: var(--danger); }
/* Monatskalender des Zieltermins hängt unter der Zeile und überdeckt die
   Felder darunter, statt sie wegzuschieben. */
.qn-duecal { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; }
.qn-alert-banner { margin: 6px 0 2px; background: #fee2e2; color: #b91c1c; font-size: 12.5px; border-radius: 8px; padding: 8px 12px; }
.dark .qn-alert-banner { background: #4c1d1d; color: #fca5a5; }
/* effort chips reuse the column-block look; add room for the time anchor */
.qn-effort-block { flex-direction: column; }
.qn-effort-block small { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.qn-effort-block.active small { color: inherit; opacity: .85; }
/* Aufwand-Blöcke tragen den Bernstein-Akzent, damit sie sich von den Spalten-
   blöcken unterscheiden (Aufwand = Karotte, nicht Zustand). */
.qn-effort-block.active { background: var(--warning-light); border-color: var(--warning); color: var(--warning); }
.dark .qn-effort-block.active { color: #fcd34d; }

/* ---- Kalender: Zeitblock ↔ Deadline sichtbar verbinden ----------------------
   Übergabe 20.07., As-Built §6.3/§6.4. Ruhiger Default: der Block ist der
   solide Eintrag, die Fälligkeit nur eine dezente gestrichelte Andeutung —
   damit Planung und Frist unterscheidbar bleiben. Details erst auf Hover. */
/* Die Fälligkeit ist eine MARKE an ihrer Uhrzeit — kein Strich quer durch den
   Tag. Die frühere volle Linie las sich wie ein Zeitraster-Element und zog sich
   mitten durch die Tagesansicht (Rückmeldung 21.07.). Geblieben ist ein kurzer
   gestrichelter Anlauf direkt vor dem Label. */
.cal-dl-line { position: absolute; right: 4px; width: 92px; height: 0;
  border-top: 1px dashed var(--warning, #d97706); pointer-events: auto; z-index: 3; }
.cal-dl-tag { position: absolute; right: 0; top: -8px; max-width: 100%; font-size: 10px; line-height: 1;
  color: var(--warning, #d97706); background: var(--bg-card); padding: 1px 4px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* Beim Überfahren tritt der Aufgabentitel dazu — dafür darf die Marke auf die
   Spaltenbreite aufgehen. Vorher wuchs sie nach links aus der Tagesspalte
   heraus und der Titel wurde am Rand abgeschnitten. */
.cal-linked.cal-dl-line { left: 4px; width: auto; }
/* Gleicher Tag: Haarlinie zwischen Blockkante und Fähnchen — aber NUR beim
   Überfahren. Dauerhaft sichtbar zog sie sich quer durch die Tagesspalte (bei
   Block 09:00–10:30 und Frist 16:00 über mehr als fünf Stunden) und ging dabei
   zwischen den anderen Terminen verloren (Rückmeldung 21.07.). Ruhiger Default
   = nur das Fähnchen; die Verbindung erscheint auf Abruf. */
.cal-dl-hair { position: absolute; right: 12px; width: 0; border-left: 1px dashed var(--accent);
  pointer-events: none; z-index: 3; display: none; }
.cal-linked.cal-dl-hair { display: block; }
/* Der Aufgabentitel blendet erst beim Hover an der Linie ein (§6.4). */
.cal-dl-title { display: none; font-style: normal; }
.cal-linked .cal-dl-title { display: inline; }
/* Zusammenhang beim Überfahren: Person + Spalte (Rückmeldung 22.07.). Sie
   stehen in einer ZWEITEN Zeile, damit der Titel nicht abgeschnitten wird —
   im Ruhezustand bleibt die Marke einzeilig und schmal wie bisher. */
.cal-dl-meta { display: none; }
.cal-linked .cal-dl-tag { white-space: normal; overflow: visible; z-index: 6; }
/* Umbrechen statt kürzen: in einer schmalen Tagesspalte passen Name und Pille
   sonst nicht nebeneinander — aus „Thomas Dobat" wurde „Thomas". Lieber eine
   Zeile mehr als ein halber Name. */
.cal-linked .cal-dl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 3px; }
.cal-dl-who { display: inline-flex; align-items: center; gap: 3px; color: var(--text-secondary);
  font-weight: 500; white-space: nowrap; }
.cal-dl-who svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .8; }
.cal-dl-meta .col-pill { flex-shrink: 0; }
/* Fähnchen NUR im Gleicher-Tag-Fall — dort steht die echte Uhrzeit in derselben
   Spalte; bei getrennten Tagen übernimmt das Badge im Block. */
.cal-dl-flag { border-top-style: solid; }
.cal-dl-flag .cal-dl-tag { font-weight: 600; }
/* Badge sitzt INNERHALB des Blocks (Ecke oben rechts) — eine frei stehende
   Brotkrume daneben wurde bei dichten Terminen abgeschnitten und kollidierte
   mit Nachbarn; so bleibt auch ein 15-Minuten-Block sauber. */
/* Der Block reserviert Platz, damit das Badge die Start–Ende-Zeit nicht
   überdeckt (in schmalen Tagesspalten sonst unvermeidlich). */
.cal-block.cal-has-badge .cal-block-time { display: block; max-width: calc(100% - 74px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dl-badge { position: absolute; top: 2px; right: 4px; z-index: 4; font-size: 9.5px; line-height: 1;
  padding: 2px 5px; border-radius: 6px; background: var(--warning-light, #fef3c7); color: var(--warning, #b45309);
  border: 1px solid var(--warning, #d97706); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Co-Highlight: zusammengehörige Teile treten hervor, der Rest dimmt. */
.cal-dimmed .cal-block:not(.cal-linked), .cal-dimmed .cal-dl-line:not(.cal-linked) { opacity: .35; }
.cal-linked.cal-block { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-linked.cal-dl-line { border-top-color: var(--accent); }
.cal-linked .cal-dl-tag { color: var(--accent); }

/* ---- Karten-Zeitmodell: Popover, Monatskalender, Erinnerungen ---------------
   Übergabe 20.07.2026, As-Built §4.2. Zweispaltig (Kalender links, Steuerung
   rechts) — dadurch etwa halbe Höhe, damit das Menü auf 14"-Laptops OHNE
   vertikales und ohne horizontales Scrollen passt. Zeitfelder stehen
   untereinander, nie zwei nebeneinander (sonst Überlauf in schmalen Spalten). */
/* Die Karte, an der das Zeit-Popover gerade hängt (Rückmeldung 22.07.): ein
   zurückhaltender Ring am ÄUSSEREN Rand, damit sichtbar ist, welche Karte man
   gerade anpasst. Bewusst `outline` statt Rahmen oder Schatten — outline liegt
   außerhalb des Kastens, verschiebt also nichts und überschreibt weder den
   `border-left` der Dringlichkeitsfarben noch den Schatten beim Überfahren. */
.ctp-card-active {
  outline: 2px solid rgba(59, 130, 246, .45);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.dark .ctp-card-active { outline-color: rgba(96, 165, 250, .55); }
@media (prefers-reduced-motion: no-preference) {
  .ctp-card-active { transition: outline-color var(--transition); }
}

.card-time-popover { position: fixed; z-index: 1200; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.22); padding: 14px 16px; width: 620px; max-width: calc(100vw - 24px);
  overflow: auto; font-size: 13px; }
.ctp-cols { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.ctp-right { display: flex; flex-direction: column; min-width: 0; }
.ctp-lbl { margin-bottom: 4px; }
.ctp-time { width: 100%; }
.ctp-sep { height: 1px; background: var(--border-light); margin: 12px 0; }
.ctp-blockhead { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text); font-size: 13px; font-family: var(--font); text-align: left; }
.ctp-blockhead svg { width: 15px; height: 15px; color: var(--text-secondary); }
.ctp-chevron { color: var(--text-muted); }
.ctp-optional { color: var(--text-muted); font-size: 11px; }
.ctp-blocksum { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 12px; }
.ctp-block { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
/* Felder UNTEREINANDER, jedes auf voller Spaltenbreite (kein horizontales Scrollen) */
.ctp-row { display: flex; align-items: center; gap: 10px; }
.ctp-row > span { flex: 0 0 52px; color: var(--text-secondary); font-size: 12px; }
.ctp-row .input { flex: 1 1 auto; min-width: 0; }
.ctp-err { color: var(--danger); font-size: 12px; }
.ctp-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.ctp-save { background: #1E1C18; border-color: #1E1C18; }
.ctp-save:hover { background: #000; }
@media (max-width: 620px) { .ctp-cols { grid-template-columns: 1fr; } }

/* Monatskalender (Zieltermin-Wahl + „Tag wählen") */
.mc-cal { user-select: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mc-title { font-weight: 600; font-size: 14px; color: var(--text); }
.mc-nav { background: none; border: 1px solid var(--border); border-radius: 8px; width: 26px; height: 26px;
  cursor: pointer; color: var(--text-secondary); font-size: 15px; line-height: 1; }
.mc-nav:hover { border-color: var(--accent); color: var(--accent); }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-dow { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.mc-day { aspect-ratio: 1; border: none; background: none; border-radius: 8px; cursor: pointer;
  color: var(--text); font-size: 12.5px; font-family: var(--font); }
.mc-day:hover { background: var(--border-light); }
.mc-out { color: var(--text-muted); opacity: .55; }
.mc-today { background: var(--border-light); font-weight: 600; }
.mc-sel { background: #1E1C18 !important; color: #fff; font-weight: 700; }
.dark .mc-sel { background: #E5E7EB !important; color: #111827; }

/* Erinnerungs-Komponente (geteilt: Popover, Erfassung, Umwandeln) */
.rm-field { display: flex; flex-direction: column; gap: 8px; }
.rm-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.rm-head svg { width: 14px; height: 14px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chip, .rm-pick { border: 1px solid var(--border); background: var(--bg-card); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; color: var(--text); cursor: pointer; font-family: var(--font); }
.rm-chip:hover:not(:disabled), .rm-pick:hover { border-color: var(--accent); color: var(--accent); }
.rm-chip.active { border-color: var(--success); background: var(--success-light); color: var(--success); font-weight: 600; }
/* Minuten-vor-Deadline braucht einen Zeitpunkt — ohne Deadline-Uhrzeit gesperrt. */
.rm-chip:disabled { opacity: .45; cursor: not-allowed; }
.rm-pick { border-style: dashed; display: inline-flex; align-items: center; gap: 6px; }
.rm-pick svg { width: 13px; height: 13px; }
.rm-list { display: flex; flex-direction: column; gap: 6px; }
.rm-row { display: flex; align-items: center; gap: 8px; }
.rm-label { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text); }
.rm-time { flex: 0 0 110px; }
.rm-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.rm-x:hover { color: var(--danger); }
.rm-clear { background: none; border: none; color: var(--danger); font-size: 12.5px; cursor: pointer;
  font-family: var(--font); align-self: center; padding: 2px 0; }
.rm-clear:hover { text-decoration: underline; }
.rm-gatehint { font-size: 11.5px; color: var(--text-muted); }
.rm-pickwrap { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 4px; }
.rm-pickrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rm-picktime { flex: 1 1 auto; min-width: 0; }
/* Zeitblock-Chip an der Karte — eigene Rolle, deutlich vom Zieltermin getrennt */
.block-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px;
  border-radius: 7px; background: var(--accent-light); color: var(--accent); }
.block-badge svg { width: 11px; height: 11px; }

/* ---- Toast (WS.showToast) ---------------------------------------------------
   Quittiert Aktionen unten mittig. Eingeführt mit der Testrückmeldung vom
   15.07.: das Kalendermodul meldete weder Erfolg noch Fehler zurück (MP-02). */
.ms-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 14px; max-width: min(560px, 92vw);
  background: #1E1C18; color: #fff; border-radius: 12px; padding: 12px 16px;
  font-size: 13.5px; line-height: 1.45; box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.ms-toast-success { border-left: 4px solid #22c55e; }
.ms-toast-error   { border-left: 4px solid #ef4444; }
.ms-toast-info    { border-left: 4px solid #3b82f6; }
.ms-toast-x { background: none; border: none; color: #fff; opacity: .6; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.ms-toast-x:hover { opacity: 1; }
/* Fehlergrund direkt in der Kalenderzeile */
.feed-err { color: var(--danger, #ef4444); font-size: 11px; }

/* ---- Gemeinsamer Feld-Stack (thoughtMask.js) --------------------------------
   „Neuer Gedanke" und „Sortieren" nutzen dieselben Bausteine (FIX-1). Was hier
   steht, gilt automatisch für beide Masken. */
.qn-mask { display: block; }
.qn-slot-extra { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: flex-start; }
/* Speichern: schwarz, volle Breite, „Strg + Enter" mittig darunter. Die Farben
   sind fest (kein var()), damit der Button in JEDEM Container sichtbar bleibt —
   genau hier war er zuvor weiß-auf-weiß (Belege E12, E17, E-Bug). */
.qn-save-row { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 18px; }
/* Der Button erbt von .btn ein `inline-flex; align-items:center` OHNE
   justify-content. In einem width:100%-Button steht der Text dadurch links.
   Hier explizit zentrieren (Rückmeldung 22.07.). */
.qn-save-btn { width: 100%; justify-content: center; text-align: center;
  background: #1E1C18; color: #fff; border: none; border-radius: 10px;
  padding: 12px 20px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer;
  transition: background var(--transition); }
.qn-save-btn:hover:not(:disabled) { background: #000; }
.qn-save-btn:disabled, .qn-save-btn.is-disabled { background: #9CA3AF; color: #F3F4F6; cursor: not-allowed; }
.dark .qn-save-btn { background: #E5E7EB; color: #111827; }
.dark .qn-save-btn:hover:not(:disabled) { background: #fff; }
.dark .qn-save-btn:disabled, .dark .qn-save-btn.is-disabled { background: #4B5563; color: #9CA3AF; }
.qn-save-hint { font-size: 11px; color: var(--text-muted); }
/* „Sortieren": Spalten als Richtungs-Buttons (← Rückmeldung / Aufgabe →) */
.qn-col-block.qn-col-arrow { flex-direction: row; justify-content: center; padding: 12px 8px; font-size: 13.5px; }
/* Aufwand-Token-Markierung im Text (Bernstein, wie die Pill) */
.qn-tok-effort { background: #FBEBD5; color: #9A5B12; }
.dark .qn-tok-effort { background: #3a2a12; color: #E8B979; }
.qn-tok-alert { background: #dcfce7; color: #15803d; }
.dark .qn-tok-alert { background: #14532d; color: #86efac; }
.qn-tok-alert-bad { background: #fee2e2; color: #b91c1c; }
.dark .qn-tok-alert-bad { background: #4c1d1d; color: #fca5a5; }
/* Token-Chip mit Icon (Aufwand) */
.qn-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
/* i-info on the column label */
.qn-col-info { position: relative; display: inline-flex; align-items: center; color: var(--text-muted); cursor: help; vertical-align: middle; outline: none; }
.qn-col-info:hover, .qn-col-info:focus { color: var(--accent); }
/* Das Hilfe-Menü an der Zielspalte ist laut Lastenheft („Neuer Gedanke",
   Schritt 5) ein DUNKLES Kärtchen mit je Zeile: Symbol · fetter Name · Erklärung
   — in beiden Themen gleich, damit es sich klar vom Dialog abhebt. */
.qn-col-info-pop.qn-col-help { width: 290px; background: #1e293b; border-color: #334155;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px;
  /* Das Menü hängt IN der Abschnitts-Überschrift, die versal gesetzt ist —
     ohne diesen Rücksetzer stünde der ganze Hilfetext in Großbuchstaben. */
  text-transform: none; letter-spacing: normal; }
.qn-col-help .qn-help-row { display: flex; align-items: flex-start; gap: 10px; }
.qn-col-help .qn-help-ico { flex-shrink: 0; margin-top: 1px; }
.qn-col-help .qn-help-ico svg { width: 22px; height: 16px; }
.qn-col-help .qn-help-txt strong { display: block; font-size: 12.5px; color: #f8fafc; margin-bottom: 2px; }
.qn-col-help .qn-help-txt span { display: block; font-size: 11.5px; line-height: 1.45; color: #cbd5e1; }
.qn-col-help .qn-help-capture .qn-help-ico { color: #94a3b8; }
.qn-col-help .qn-help-waiting_for .qn-help-ico { color: #fbbf24; }
.qn-col-help .qn-help-next_action .qn-help-ico { color: #4ade80; }

.qn-col-info-pop { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; width: 250px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; }
.qn-col-info-row { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.qn-col-info-row strong { color: var(--text); }
.quicknote-footer-center { display: flex; justify-content: center; }
.quicknote-footer-center .qn-action { align-items: center; text-align: center; }

/* ---- Calendar: hover-slot preview + double-click to create (Lastenheft 02.07 §1.29) ---- */
.day-col { position: relative; }
.cal-hover-slot { position: absolute; left: 2px; right: 2px; background: var(--accent-light);
  border: 1px dashed var(--accent); border-radius: 5px; pointer-events: none; z-index: 1;
  display: flex; align-items: flex-start; }
.cal-hover-slot span { font-size: 10px; color: var(--accent); padding: 1px 4px; font-weight: 600; }