/* =========================================================
   Kanban · Sustentio  —  Application Styles
   ========================================================= */

/* ---------- Tokens: Light Theme ---------- */
:root {
  --accent: #1c856c;
  --accent-soft: #d9eee5;
  --accent-strong: #14654f;

  --bg: #f7f6f1;
  --bg-elevated: #ffffff;
  --bg-sunken: #efeee8;
  --bg-card: #ffffff;
  --bg-hover: #f1efe8;

  --text: #1f1f1d;
  --text-muted: #6b6960;
  --text-faint: #9a978c;

  --border: #e5e3da;
  --border-strong: #d6d3c7;
  --border-focus: #9bcdb7;

  --shadow-sm: 0 1px 2px rgba(31, 31, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 31, 29, 0.06), 0 1px 2px rgba(31, 31, 29, 0.04);
  --shadow-lg: 0 16px 48px rgba(31, 31, 29, 0.12), 0 2px 8px rgba(31, 31, 29, 0.06);

  --col-salbei: #cbd9b9;
  --col-moos:   #aebd95;
  --col-sand:   #ecdfba;
  --col-terra:  #e3b39a;
  --col-lehm:   #cf9b7a;
  --col-himmel: #c3d6df;
  --col-lavendel: #cdc1e2;
  --col-schiefer: #c4c8ce;
  --col-sonne:  #ecd99c;
  --col-koral:  #e0afa6;

  --sidebar-w: 260px;
  --topbar-h: 60px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;

  --danger: #b14a4a;
  --danger-soft: #f8e3df;
}

/* ---------- Tokens: Dark Theme ---------- */
[data-theme="dark"] {
  --accent: #4cb89a;
  --accent-soft: #163027;
  --accent-strong: #6dd2b3;

  --bg: #1a1a18;
  --bg-elevated: #232220;
  --bg-sunken: #141413;
  --bg-card: #2a2926;
  --bg-hover: #2f2e2a;

  --text: #ebe9e2;
  --text-muted: #9c9a90;
  --text-faint: #6a685f;

  --border: #34322d;
  --border-strong: #45433d;
  --border-focus: #1c856c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);

  --col-salbei: #6f8a5c;
  --col-moos:   #5d7349;
  --col-sand:   #a08c5b;
  --col-terra:  #a4694a;
  --col-lehm:   #8e5a3c;
  --col-himmel: #5b7b88;
  --col-lavendel: #7c6da3;
  --col-schiefer: #62656b;
  --col-sonne:  #a8923f;
  --col-koral:  #9c5a52;

  --danger: #d97770;
  --danger-soft: #3d2a28;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* Restore the HTML5 [hidden] default. Components like .btn or
   .settings__pill set an explicit `display: inline-flex` which would
   otherwise win over the user-agent `[hidden] { display: none }` rule
   and leak hidden elements into the layout. The !important here is
   intentional and limited to this single global rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
/* SVG icons inside buttons must not steal pointer events from the button.  */
button svg, .icon-btn svg, .nav-item svg, .name-pill svg, .aside-btn svg, .menu button svg, .view-cycle svg, [data-close] svg { pointer-events: none; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 600; }
.muted { color: var(--text-muted); font-size: 12px; }

/* ---------- App Shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  transition: grid-template-columns 0.25s ease;
}
/* Desktop: User kann die Sidebar manuell zuklappen */
.app.is-sidebar-collapsed { grid-template-columns: 0 1fr; }
.app[hidden] { display: none; }

/* ---------- Login Screen ---------- */
.login {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 20px;
}
.login[hidden] { display: none; }
.login__card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.login__brand { display: flex; gap: 10px; margin-bottom: 22px; align-items: center; }
.login__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.login__sub { color: var(--text-muted); margin: 0 0 20px; }
.login__form { display: flex; flex-direction: column; gap: 14px; }
.login__known { padding: 8px 0; }
.login__known-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.login__known-list button {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text);
  transition: background 0.15s;
}
.login__known-list button:hover { background: var(--accent-soft); }
.login__error { color: var(--danger); margin: 0; font-size: 13px; }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.brand__by { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.sidebar__brand {
  height: var(--topbar-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar__search {
  margin: 14px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color 0.2s, background 0.2s;
}
.sidebar__search:focus-within { border-color: var(--border-focus); background: var(--bg-elevated); }
.sidebar__search svg { color: var(--text-muted); flex-shrink: 0; }
.sidebar__search input { border: none; background: none; outline: none; flex: 1; min-width: 0; }
.sidebar__search input::placeholder { color: var(--text-faint); }

.sidebar__new {
  margin: 4px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  transition: background 0.2s, transform 0.05s;
}
.sidebar__new:hover { background: var(--accent-strong); }
.sidebar__new:active { transform: translateY(1px); }
[data-theme="dark"] .sidebar__new { color: #0d1814; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }

.nav-section { margin-top: 8px; }
.nav-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.nav-section__add,
.nav-section__edit {
  opacity: 0.5; transition: opacity 0.15s, background 0.12s, color 0.12s;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  flex-shrink: 0;
}
@media (hover: hover) {
  .nav-section__add,
  .nav-section__edit { opacity: 0; }
  .nav-section__head:hover .nav-section__add,
  .nav-section__head:hover .nav-section__edit { opacity: 1; }
}
.nav-section__add:hover,
.nav-section__edit:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.nav-section__head > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-section__head > span.is-editing {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  white-space: normal;
}
.nav-section.is-drop-target { background: var(--accent-soft); border-radius: 6px; }
.nav-section.is-drop-target .nav-section__head { color: var(--accent-strong); }
.nav-item-wrap[draggable="true"] { cursor: grab; }
.nav-item-wrap.is-dragging { opacity: 0.45; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text); text-align: left;
  font-weight: 400; position: relative;
  transition: background 0.12s;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; }
[data-theme="dark"] .nav-item.is-active { color: var(--accent); }
.nav-item__icon { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; background: var(--col-schiefer); }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__count { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.nav-section--archived { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 8px; }
.nav-section__toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 6px 10px;
  font-size: 12px; color: var(--text-muted);
  background: none; text-align: left;
  border-radius: 6px;
}
.nav-section__toggle:hover { color: var(--text); background: var(--bg-hover); }
.nav-section__chevron { transition: transform 0.15s ease; pointer-events: none; }
.nav-section__toggle[aria-expanded="false"] .nav-section__chevron { transform: rotate(-90deg); }

.nav-item-wrap { position: relative; display: flex; }
.nav-item-wrap .nav-item { flex: 1 1 auto; min-width: 0; padding-right: 32px; }
.nav-item-wrap--archived .nav-item { opacity: 0.55; cursor: default; pointer-events: none; }
.nav-item-wrap--archived:hover .nav-item { opacity: 0.8; }
.nav-item__action {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent; color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
@media (hover: hover) {
  /* Auf Geräten mit echtem Hover (Desktop) blenden wir das Icon aus, bis
     der User die Zeile berührt — sonst flimmert das in der Sidebar.
     Touch-Geräte (kein Hover) sehen das Icon dauerhaft halbtransparent. */
  .nav-item__action { opacity: 0; }
  .nav-item-wrap:hover .nav-item__action,
  .nav-item-wrap:focus-within .nav-item__action,
  .nav-item-wrap .nav-item.is-active ~ .nav-item__action { opacity: 1; }
}
.nav-item__action:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }

.sidebar__footer { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sidebar__footer-actions { display: flex; gap: 4px; }
.sidebar__footer-actions button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.sidebar__footer-actions button:hover { background: var(--bg-hover); color: var(--text); }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 8px;
  border-radius: var(--radius-md);
  text-align: left; transition: background 0.15s;
}
.user-chip:hover { background: var(--bg-hover); }
.user-chip__name {
  flex: 1; min-width: 0;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip svg { color: var(--text-faint); flex-shrink: 0; }

/* ---------- Avatar ---------- */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--avatar-bg, var(--accent-soft));
  color: var(--avatar-fg, var(--accent-strong));
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
[data-theme="dark"] .avatar { color: var(--avatar-fg, var(--accent)); }
.avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.avatar--lg { width: 36px; height: 36px; font-size: 13px; }

/* ---------- Main / Topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg); position: relative; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
  gap: 16px;
}
.topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.topbar__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar__divider { width: 1px; height: 24px; background: var(--border); }

#sidebarOpen { display: none; }
/* Hamburger nur sichtbar, wenn die Sidebar tatsächlich versteckt ist */
.app.is-sidebar-collapsed #sidebarOpen { display: inline-grid; }
@media (max-width: 1024px) {
  .app:not(.is-sidebar-open) #sidebarOpen { display: inline-grid; }
}

.board-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.board-title__category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.board-title__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  border-radius: 4px;
  padding: 0;
  margin: 0;
}
.board-title__name[contenteditable="true"]:focus {
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 1px 4px;
  margin: -1px -4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn--sm { padding: 5px 10px; font-size: 13px; }
.btn--ghost { color: var(--text); }
.btn--ghost:hover { background: var(--bg-hover); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); }
[data-theme="dark"] .btn--primary { color: #0d1814; }
.btn--block { width: 100%; justify-content: center; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #8c3838; }
[data-theme="dark"] .btn--danger { color: #1a1a18; background: var(--danger); }

.icon-btn { width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-grid; place-items: center; color: var(--text); transition: background 0.15s, color 0.15s; }
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn--ghost { color: var(--text-muted); }

#themeToggle .icon-moon { display: none; }
[data-theme="dark"] #themeToggle .icon-sun { display: none; }
[data-theme="dark"] #themeToggle .icon-moon { display: block; }

/* ---------- View Cycle Button ---------- */
.view-cycle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  height: 36px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.view-cycle:hover { background: var(--bg-hover); box-shadow: var(--shadow-sm); }
.view-cycle__icon { display: inline-flex; color: var(--text-muted); }
.view-cycle:hover .view-cycle__icon { color: var(--text); }
.view-cycle__icon svg { display: block; }
.view-cycle__label { white-space: nowrap; }

/* ---------- Board Meta ---------- */
.board-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.board-meta[hidden] { display: none; }
.board-meta__filters {
  display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto;
}
.board-meta__actions { display: flex; gap: 4px; }

.board-info {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.board-info:hover { background: var(--bg-hover); color: var(--text); }
.board-info svg { display: block; }

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-chip:hover { background: var(--bg-hover); color: var(--text); }
.filter-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.filter-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.filter-chip:disabled:hover { background: transparent; color: var(--text-muted); }
.filter-chip__count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .filter-chip__count {
  background: rgba(255,255,255,0.6);
  color: var(--accent-strong);
}
[data-theme="dark"] .filter-chip.is-active .filter-chip__count {
  background: rgba(0,0,0,0.35);
  color: var(--accent-strong);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: 12px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
}
.badge strong { font-weight: 600; }
.badge--soft { background: transparent; color: var(--text-muted); }

/* ---------- Empty ---------- */
.empty {
  position: absolute;
  inset: var(--topbar-h) 0 0 0;
  display: grid;
  place-items: center;
  padding: 40px;
  pointer-events: none;
}
.empty[hidden] { display: none; }
.empty__inner { text-align: center; max-width: 360px; pointer-events: auto; }
.empty h2 { font-size: 22px; margin-bottom: 6px; font-family: var(--font-serif); }
.empty p { color: var(--text-muted); margin-bottom: 20px; }

/* =========================================================
   BOARD VIEWS
   ========================================================= */
.board { flex: 1; overflow: auto; padding: 20px 24px 24px; }
/* Horizontal scrollers: padding-right is not honored while scrolled to the
   end in most browsers, so we use a trailing flex spacer instead. The
   container itself drops its own padding-right to avoid doubled space. */
.board[data-view="kanban"] { display: flex; gap: 16px; align-items: flex-start; padding-right: 0; }
.board[data-view="kanban"]::after,
.board[data-view="list-h"]::after {
  content: '';
  flex: 0 0 24px;
  align-self: stretch;
}
.board[data-view="list-h"] { padding-right: 0; }
.column {
  flex: 0 0 320px;
  width: 320px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 65px - 40px);
  box-shadow: var(--shadow-sm);
}
.column__header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}
.column__color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.column__title { font-family: var(--font-serif); font-weight: 600; font-size: 14px; outline: none; flex: 1; min-width: 0; padding: 1px 4px; margin: -1px -4px; border-radius: 4px; cursor: text; }
.column__title:focus { background: var(--accent-soft); color: var(--accent-strong); }
.column__count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.column__menu { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--text-muted); flex-shrink: 0; }
.column__menu:hover { background: var(--bg-hover); color: var(--text); }
/* flex-basis: auto so the body keeps its natural content height when the
   column is short (otherwise the column collapses to header+add only).
   min-height: 0 lets the body shrink below its content when the column
   hits max-height — that's what makes overflow-y: auto actually scroll
   instead of pushing the "+ Karte hinzufügen" button out of view. */
.column__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.column__add { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin: 4px 8px 10px; border-radius: var(--radius-md); color: var(--text-muted); font-size: 13px; transition: background 0.15s, color 0.15s; border: 1px dashed transparent; flex-shrink: 0; }
.column__add:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }

.column--add-new {
  flex: 0 0 280px;
  width: 280px;
  border: 2px dashed var(--border-strong);
  background: transparent;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
  max-height: 200px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.column--add-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- Card ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.18s ease, border-color 0.18s;
  cursor: pointer;
  /* Column body is a vertical flex container with overflow-y: auto; without
     this, cards would shrink below their natural height when many siblings
     compete for space, and `overflow: hidden` would clip the title/meta. */
  flex-shrink: 0;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card__cover { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-sunken); }
.card__body { padding: 10px 12px 12px; }
.card__title { font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--text); }
.card__due-row { margin-top: 6px; display: flex; min-width: 0; }
.card__due-row .card__due { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.card__meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.card__due-row + .card__meta { margin-top: 6px; }
.card__meta-items {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 10px;
  align-items: center;
  min-width: 0;
}
.card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.card__meta-item svg { color: var(--text-faint); }
.card__avatars { display: flex; gap: 0; flex-shrink: 0; align-self: end; }
.card__avatars .avatar { border: 2px solid var(--bg-card); margin-left: -8px; }
.card__avatars .avatar:first-child { margin-left: 0; }
.card__avatars .avatar--more {
  --avatar-bg: var(--bg-sunken);
  --avatar-fg: var(--text-muted);
  font-size: 10px;
}
.avatar.avatar--archived {
  outline: 1.5px dashed var(--text-faint);
  outline-offset: -2px;
  opacity: 0.75;
}

/* Due-date badge on cards */
.card__due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__due svg { color: var(--text-faint); }
.card__due.is-near {
  background: color-mix(in srgb, var(--col-sand) 35%, transparent);
  color: var(--text);
}
.card__due.is-near svg { color: var(--text); }
.card__due.is-soon {
  background: color-mix(in srgb, var(--col-terra) 45%, transparent);
  color: var(--text);
  font-weight: 500;
}
.card__due.is-soon svg { color: var(--text); }
.card__due.is-overdue {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}
.card__due.is-overdue svg { color: var(--danger); }
.card__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.card__tag { display: inline-block; height: 6px; border-radius: 3px; width: 32px; }
/* Pill-Variante: Wenn das Board für diese Farbe ein eigenes Label vergeben
   hat, wird der reine Strich zu einer Pille mit Text. Nur Kanban-View. */
.card__tag--pill {
  height: auto;
  width: auto;
  max-width: 160px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-radius: 999px;
  background: var(--tag-bg, var(--bg-sunken));
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-ticket color override: a thin colored stripe on the leading edge so
   the override is visible in every view (kanban tag-bar already reflects
   it, but list-h/list-v have no tag-bar). */
/* Per-ticket Akzentfarbe als inset-Shadow — keine Border, damit der
   Cardinhalt nicht horizontal eingerückt wird. Der Standard-Cardschatten
   wird dabei mitgerendert (zweiter Layer im box-shadow-Stack). */
.card--own-color {
  box-shadow: inset 3px 0 0 0 var(--card-accent, transparent), var(--shadow-sm);
}
.card--own-color:hover {
  box-shadow: inset 3px 0 0 0 var(--card-accent, transparent), var(--shadow-md);
}

/* ---------- List Views ---------- */
.board[data-view="list-h"] { display: flex; gap: 16px; align-items: flex-start; }
.board[data-view="list-h"] .column { flex: 0 0 360px; width: 360px; }
.board[data-view="list-h"] .card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}
/* Cover füllt die volle Card-Höhe — dadurch bleibt es ein Block, nicht ein
   freischwebendes Quadrat in einer großen leeren Zelle. Andere Spalten
   (Body, Avatar) bleiben mittig zentriert über das Grid-default. */
.board[data-view="list-h"] .card__cover,
.board[data-view="list-h"] .card__cover-empty {
  width: 56px;
  min-height: 56px;
  align-self: stretch;
  border-radius: 6px;
}
.board[data-view="list-h"] .card__cover-empty {
  background: var(--bg-sunken);
  display: grid; place-items: center;
  color: var(--text-faint);
}
.board[data-view="list-h"] .card__body { padding: 0; min-width: 0; }
.board[data-view="list-h"] .card__meta { margin-top: 4px; }
.board[data-view="list-h"] .card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.board[data-view="list-v"] { display: flex; flex-direction: column; gap: 18px; max-width: 1400px; margin: 0 auto; width: 100%; }
.board[data-view="list-v"] .column { flex: 1; width: auto; max-height: none; }
/* No vertical gap between compact rows — cards use border-top as dividers. */
.board[data-view="list-v"] .column__body { display: grid; grid-template-columns: 1fr; padding: 0; gap: 0; }
.board[data-view="list-v"] .card {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  box-shadow: none;
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.board[data-view="list-v"] .card:first-child { border-top: none; }
.board[data-view="list-v"] .card:hover { transform: none; background: var(--bg-hover); }
/* Im Kompakt-Layout haben Cards selbst keinen Drop-Shadow (border: none,
   box-shadow: none) — daher hier nur den inset-Akzent setzen, ohne den
   Standard-Card-Schatten anzuhängen. */
.board[data-view="list-v"] .card--own-color,
.board[data-view="list-v"] .card--own-color:hover {
  box-shadow: inset 4px 0 0 0 var(--card-accent, transparent);
}
/* Cover füllt die Card-Höhe statt mittig in der leeren Zelle zu schweben.
   Andere Zellen bleiben mittig (Grid-default align-items: center). */
.board[data-view="list-v"] .card__cover,
.board[data-view="list-v"] .card__cover-empty {
  width: 40px;
  min-height: 40px;
  align-self: stretch;
  border-radius: 4px;
}
.board[data-view="list-v"] .card__cover-empty { background: var(--bg-sunken); display: grid; place-items: center; color: var(--text-faint); }
.board[data-view="list-v"] .card__body { padding: 0; min-width: 0; }
.board[data-view="list-v"] .card__meta { margin-top: 2px; }
.board[data-view="list-v"] .card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__teaser {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 18, 0.5);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.18s ease;
}
.modal__dialog {
  position: relative;
  width: min(92vw, 980px);
  max-height: 90vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "body aside";
  overflow: hidden;
  animation: popIn 0.2s ease;
}
.modal__dialog--narrow {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "body" "footer";
  width: min(92vw, 460px);
}
/* Tabbed narrow modals (e.g. settings) need an extra row between header and
   body for the tab strip. Keyed off the modifier class so other narrow
   modals (confirm, search, password prompts, …) keep the simpler layout. */
.modal__dialog--narrow.modal__dialog--tabbed {
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header" "tabs" "body" "footer";
}
.modal__header {
  grid-area: header;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.modal__title { font-family: var(--font-serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; outline: none; padding: 1px 4px; margin: 8px -4px 0; border-radius: 4px; }
.modal__title[contenteditable="true"]:focus { background: var(--accent-soft); color: var(--accent-strong); }
.modal__dialog--narrow .modal__title { margin: 0; padding: 0; }

.modal__body { grid-area: body; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.modal__body--narrow { padding: 18px 20px; }
.modal__body--settings { gap: 0; }
.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.settings-section:first-child { padding-top: 0; }
.settings-section:last-child { border-bottom: none; }
.settings-section__title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.settings-section__hint { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.settings-section--footer-note .settings-section__hint { margin-bottom: 0; }
/* The submit button inside a settings section anchors to the left and
   inherits the .form-row + button margin (14px) when it follows a form
   row. align-self: flex-start prevents the .modal__body--settings flex
   container from stretching the button to full width. */
.settings-section .btn--sm { align-self: flex-start; }
.settings__btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings__btn-row .btn--sm { margin-top: 0; }

/* Tabbed settings modal: header strip below the title with a single underline
   moving with the active tab. Keeps the panels lightweight (just toggle
   .is-active + the hidden attribute). */
.modal__tabs {
  grid-area: tabs;
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken, transparent);
}
.modal__tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.modal__tab:hover { color: var(--text); }
.modal__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent, currentColor);
}
.modal__tab:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: -2px;
  border-radius: 4px;
}
.settings-tab { display: none; }
.settings-tab.is-active { display: block; }
.settings__pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft, #fff5e1);
  color: var(--accent-strong, #8a5a00);
}

.modal__aside {
  grid-area: aside;
  background: var(--bg-sunken);
  border-left: 1px solid var(--border);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
.modal__aside h4 {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 4px 0 4px;
}
.modal__aside hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

.modal__footer {
  grid-area: footer;
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}

.modal__section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.modal__section-head h3 { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.modal__section-head--toggle { cursor: pointer; user-select: none; padding: 2px 0; border-radius: 4px; }
.modal__section-head--toggle:hover h3 { color: var(--text); }
.modal__section-head--toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__section-chevron { margin-left: auto; align-self: center; color: var(--text-muted); transition: transform 0.2s ease; pointer-events: none; }
.modal__section--collapsible.is-collapsed .modal__section-chevron { transform: rotate(-90deg); }
.modal__section--collapsible.is-collapsed .modal__section-head { margin-bottom: 0; }
.modal__section--collapsible.is-collapsed > *:not(.modal__section-head) { display: none; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 11px; background: var(--bg-sunken); color: var(--text-muted); border-radius: 999px; font-weight: 500; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; }

.aside-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-md);
  color: var(--text); text-align: left; font-size: 13px;
  transition: background 0.15s;
}
.aside-btn:hover { background: var(--bg-hover); }
.aside-btn svg { color: var(--text-muted); }
.aside-btn--danger { color: var(--danger); }
.aside-btn--danger svg { color: var(--danger); }
.aside-btn--ghost { color: var(--text-muted); border: 1px dashed var(--border-strong); justify-content: center; }
.aside-btn--ghost:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* Due date input */
.aside-due { display: flex; gap: 6px; align-items: center; }
.aside-due__input {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.aside-due__input:focus { outline: none; border-color: var(--border-focus); }
.aside-due__clear {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.aside-due__clear:hover { background: var(--bg-hover); color: var(--danger); }

/* Assignee chips in aside */
.aside-assign { display: flex; flex-wrap: wrap; gap: 6px; }
.assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text);
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.assign-chip:hover { background: var(--danger-soft); color: var(--danger); }
.assign-chip:hover svg { color: var(--danger); }
.assign-chip svg { color: var(--text-faint); }
.assign-chip__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-chip.is-archived { opacity: 0.7; }
.assign-chip.is-archived .avatar { outline: 1.5px dashed var(--text-faint); outline-offset: -2px; }

.select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  outline: none;
}
.select:focus { border-color: var(--border-focus); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gallery__item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-sunken);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gallery__item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.gallery__item.is-cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery__item-actions {
  position: absolute;
  inset: auto 4px 4px auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.gallery__item:hover .gallery__item-actions { opacity: 1; }
.gallery__item-actions button {
  background: rgba(0,0,0,0.7);
  color: white;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
}
.gallery__item-actions button:hover { background: rgba(0,0,0,0.9); }
.gallery__item-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  pointer-events: none;
}
.gallery__item-badge svg { display: block; }

.gallery__add {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  border: 2px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.gallery__add svg { display: block; }
.gallery__add:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.gallery__add.is-drop { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }

/* ---------- Rich editor ---------- */
.rich-editor { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); overflow: hidden; }
.rich-editor:focus-within { border-color: var(--border-focus); }
.rich-editor__toolbar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
.rich-editor__toolbar button { width: 28px; height: 28px; border-radius: 5px; display: grid; place-items: center; color: var(--text-muted); }
.rich-editor__toolbar button:hover { background: var(--bg-hover); color: var(--text); }
.rich-editor__sep { width: 1px; background: var(--border); margin: 4px 4px; }
.rich-editor__content { padding: 12px 14px; outline: none; min-height: 60px; }
.rich-editor__content[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
.rich-editor__content p { margin: 0 0 8px; }
.rich-editor__content p:last-child { margin-bottom: 0; }
.rich-editor__content ul, .rich-editor__content ol { margin: 4px 0 8px 18px; padding: 0; }
.rich-editor__content a { color: var(--accent); }
.rich-editor--compact .rich-editor__content { min-height: 40px; padding: 10px 12px; }
.rich-editor__footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-top: 1px solid var(--border); background: var(--bg-sunken); }
.rich-editor__toolbar--inline { padding: 0; border: none; background: none; }

/* ---------- Comments ---------- */
.comments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.comment { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.comment__body { background: var(--bg-sunken); padding: 10px 12px; border-radius: var(--radius-md); position: relative; }
.comment__body header { font-size: 12px; margin-bottom: 4px; display: flex; gap: 4px; align-items: center; }
.comment__body p { margin: 0; font-size: 14px; }
.comment__body p:last-child { margin-bottom: 0; }
.comment__delete {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.comment:hover .comment__delete { opacity: 1; }
.comment__delete:hover { background: var(--danger-soft); color: var(--danger); }
.comment-compose { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-top: 14px; }

/* ---------- Color grid ---------- */
.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.color-swatch {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.15s;
  cursor: pointer;
  position: relative;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.is-active { border-color: var(--text); }
/* Eigener Tooltip oberhalb des Swatches — zeigt das Label (falls in „Farben"
   gepflegt) plus den Palette-Slug. Erscheint sofort beim Hover, im
   Gegensatz zum nativen `title`-Tooltip mit ~1 s Verzögerung. */
.color-swatch[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
/* "Wie Spalte" reset swatch: dashed border, neutral fill so it doesn't
   read as a real color choice. */
.color-swatch--reset {
  background: var(--bg-sunken);
  border: 2px dashed var(--border-strong);
  position: relative;
}
.color-swatch--reset::before {
  content: '';
  position: absolute; inset: 4px;
  background: linear-gradient(135deg, transparent calc(50% - 1px), var(--text-faint) 50%, transparent calc(50% + 1px));
  border-radius: 3px;
  pointer-events: none;
}
.color-swatch--reset.is-active { border-style: solid; border-color: var(--text); }

/* ---------- Name picker ---------- */
.name-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 10px 0 16px; }
.name-pill-wrap { position: relative; min-width: 0; width: 100%; display: flex; }
.name-pill-wrap .name-pill { flex: 1 1 auto; min-width: 0; }
.name-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-weight: 500; text-align: left;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  width: 100%;
}
.name-pill:hover { background: var(--bg-hover); }
.name-pill.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.name-pill--new { color: var(--text-muted); border: 1px dashed var(--border); background: transparent; }
.name-pill--new:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.name-pill--new.is-active { background: var(--accent-soft); border-color: var(--accent); border-style: solid; color: var(--accent-strong); }
.name-pill-wrap--has-action .name-pill { padding-right: 34px; }
.name-pill-wrap--archived .name-pill { opacity: 0.6; }
.name-pill-wrap--archived:hover .name-pill { opacity: 0.9; }
.name-pill__action {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent; color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.name-pill-wrap:hover .name-pill__action,
.name-pill-wrap:focus-within .name-pill__action { opacity: 1; }
.name-pill__action:hover { background: var(--bg-hover); color: var(--text); }
.name-pill__action--danger:hover { background: rgba(220, 80, 80, 0.12); color: #c44; }
.avatar--ghost { background: var(--bg-sunken) !important; color: var(--text-muted) !important; --avatar-bg: var(--bg-sunken); --avatar-fg: var(--text-muted); }

/* "Wer bist Du?"-Modal: das globale .modal__body { gap: 22px } und der
 * Margin auf .name-grid führten zu sehr viel Luft ohne Funktion. Hier
 * verdichten wir gezielt und ziehen eine sichtbare Trennlinie zwischen
 * Identitäts-Pick und Profil-Form (Name + Avatar-Farbe). */
#userModal .modal__body { gap: 12px; }
#userModal .name-grid   { margin: 2px 0 0; }
/* Erste .form-row im Body bekommt einen Trenner — `:first-of-type` würde
 * fälschlich auf `.name-grid` matchen (gleicher Tag-Name). */
#userModal .form-row { margin: 0; }
#userModal[data-required] .form-row.is-section-start {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* "User wechseln" sits left of the cancel/save cluster — auto-margin is the
 * cleanest way to keep the rest right-aligned without restructuring. The
 * danger-text variant flags it as a destructive escape hatch. */
#userModalSwitch { margin-right: auto; }
.btn--danger-text { color: var(--danger, #b94a4a); }
.btn--danger-text:hover { color: var(--danger-strong, #993939); background: rgba(220, 80, 80, 0.08); }

.link-btn {
  background: none; border: 0; padding: 4px 0;
  text-align: left; font-size: 13px;
  color: var(--accent-strong); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.link-btn--muted { color: var(--text-muted); }
.link-btn--muted:hover { color: var(--text); }

.form-row { display: flex; flex-direction: column; gap: 6px; }
/* Vertical breathing room between consecutive form rows. The 6px gap
   inside a row pairs label and input tightly; the 14px between rows
   keeps the next label visually separate so the eye treats each row
   as its own unit. Adjacent-sibling selector means stand-alone rows
   (e.g. login screen with one input) stay unchanged. */
.form-row + .form-row { margin-top: 14px; }
.form-row label, .form-row > span { font-size: 12px; color: var(--text-muted); }
.form-row input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  outline: none;
}
.form-row input:focus { border-color: var(--border-focus); }
/* Buttons that follow a row of inputs get the same generous gap as
   between rows, so the submit doesn't visually hug the last input. */
.form-row + button,
.form-row + .settings__btn-row { margin-top: 14px; }

/* ---------- Combobox (custom datalist replacement) ---------- */
.combo { position: relative; }
.combo__input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  outline: none;
}
.combo__input:focus { border-color: var(--border-focus); }
.combo__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--text-muted);
  border-radius: 6px;
}
.combo__toggle:hover { background: var(--bg-hover); color: var(--text); }
/* Pop is positioned via fixed + getBoundingClientRect in bindCombo so it
   floats above modal content and is not clipped or counted as body scroll height. */
.combo__pop {
  position: fixed;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 11000;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  /* top/left/width set in JS when opened */
}
.combo__pop[hidden] { display: none; }
.combo__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  color: var(--text);
}
.combo__opt:hover, .combo__opt.is-active { background: var(--bg-hover); }
.combo__opt--new { color: var(--accent); font-style: italic; }
.combo__opt--empty { color: var(--text-muted); font-style: italic; padding: 10px; pointer-events: none; }

/* ---------- Color picker (avatar / general) ---------- */
.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.15s;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.color-picker__swatch:hover { transform: scale(1.08); }
.color-picker__swatch.is-active { border-color: var(--text); }
.color-picker__swatch.is-active::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* ---------- Subtasks ---------- */
.subtasks { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.subtask {
  display: grid; grid-template-columns: 22px 1fr 24px; gap: 8px; align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.subtask:hover { background: var(--bg-hover); }
.subtask__check {
  width: 18px; height: 18px;
  border: 1.6px solid var(--border-strong);
  border-radius: 4px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.subtask__check:hover { border-color: var(--accent); }
.subtask.is-done .subtask__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.subtask.is-done .subtask__check svg { display: block; }
.subtask__check svg { display: none; color: #fff; }
.subtask__text {
  outline: none; min-height: 18px;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  word-wrap: break-word; min-width: 0;
}
.subtask__text:focus { background: var(--accent-soft); color: var(--accent-strong); }
.subtask.is-done .subtask__text { color: var(--text-faint); text-decoration: line-through; }
.subtask__remove {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.subtask:hover .subtask__remove { opacity: 1; }
.subtask__remove:hover { background: var(--danger-soft); color: var(--danger); }
.subtasks__add {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  border: 1px dashed transparent;
}
.subtasks__add:hover { color: var(--text); background: var(--bg-hover); border-color: var(--border); }
.subtasks__progress {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 8px;
}
.subtasks__bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.subtasks__bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}

/* Card subtask progress */
.card__progress {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.card__progress-bar {
  width: 24px; height: 3px; border-radius: 2px;
  background: var(--bg-sunken);
  overflow: hidden;
  margin-left: 2px;
}
.card__progress-bar-fill {
  height: 100%;
  background: var(--accent);
}

/* ---------- Animations ---------- */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.98) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* ---------- Drag & Drop ---------- */
.card.is-dragging { opacity: 0.5; transform: rotate(1deg); }
.column__body.is-drop-target {
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}
.card.is-drop-above { box-shadow: 0 -3px 0 var(--accent); }
.card.is-drop-below { box-shadow: 0 3px 0 var(--accent); }

.column__header { cursor: grab; user-select: none; }
.column__header:active { cursor: grabbing; }
.column.is-col-dragging { opacity: 0.5; }
.column.is-drop-left { box-shadow: -3px 0 0 var(--accent); }
.column.is-drop-right { box-shadow: 3px 0 0 var(--accent); }

/* ---------- Attachments (non-image files) ---------- */
.attach-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 4px;
  min-height: 40px;
  margin: 0;
  list-style: none;
}
.attach-list:empty { padding: 0; border-style: dashed; min-height: 0; }
.attach-list:empty::before {
  content: 'Noch keine Anhänge — Datei hierher ziehen oder unten hinzufügen';
  display: block;
  padding: 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}
.attach-list.is-drop {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}
.attach-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.attach-item:hover { background: var(--bg-hover); }
.attach-item__icon { display: grid; place-items: center; color: var(--text-muted); }
.attach-item__name {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.attach-item__name:hover { color: var(--accent-strong); text-decoration: underline; }
.attach-item__meta {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.attach-item__remove {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.attach-item__remove:hover { background: var(--danger-soft); color: var(--danger); }
.attach-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.attach-add:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

/* ---------- Dropzone (board-wide for image upload to card) ---------- */
.card.is-image-drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.column.is-image-drop {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
/* Hint-Banner als Block im Layout-Flow — schiebt die Karten nach unten,
   überlappt damit nichts. Sticky am oberen Rand, damit es auch beim Drag
   über lange Spalten sichtbar bleibt.

   Das Banner ist immer aktiv, sobald man über einer Spalte hovert; ob über
   Karte oder daneben ändert nur den Banner-Text via `has-card-target`. So
   gibt es zwischen den beiden Drop-Modi KEINEN Layout-Shift und kein
   Flickern, wenn der Cursor nahe der Karten-Unterkante schwebt. */
.column.is-image-drop .column__body::before {
  content: 'Loslassen → neue Karte';
  display: block;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.column.is-image-drop.has-card-target .column__body::before {
  content: 'Loslassen → an diese Karte';
}
[data-theme="dark"] .column.is-image-drop .column__body::before { color: #0d1814; }

/* ---------- Search Modal (Spotlight-style) ---------- */
.modal--search { align-items: flex-start; padding-top: 12vh; }
.modal__dialog--search {
  width: min(92vw, 640px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.search__input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.search__icon { color: var(--text-muted); flex-shrink: 0; }
.search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  padding: 4px 0;
  min-width: 0;
}
.search__input::placeholder { color: var(--text-faint); }
.search__kbd {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.search__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.search__result {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
}
.search__result:hover,
.search__result.is-active {
  background: var(--bg-hover);
  border-color: var(--border);
}
.search__result-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.search__result-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.search__result-col {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.search__result-snippet {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
/* Field-icon (Beschreibung/Aufgabe/Kommentar) sits centered against the first
   text line. 12 px font × 1.45 line-height ≈ 17.4 px, icon is 13 px → ~2 px
   top inset keeps it visually centered without baseline drift. */
.search__result-field {
  display: inline-flex;
  align-items: center;
  height: calc(12px * 1.45);
  color: var(--text-faint);
  flex-shrink: 0;
}
.search__result-snippet-text {
  flex: 1;
  min-width: 0;
  /* Clamp to 2 lines so long descriptions don't blow up the row height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search__result-fields {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.search__result-fchip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
}
.search__result mark {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}
.search__foot {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .modal--search { padding-top: 0; align-items: stretch; }
  .modal__dialog--search { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .search__kbd { display: none; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.2s, transform 0.25s;
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { background: var(--danger); color: #fff; }

/* ---------- Popover Menu ---------- */
.menu {
  position: fixed;
  z-index: 150;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 180px;
  animation: popIn 0.12s ease;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
}
.menu button:hover { background: var(--bg-hover); }
.menu button svg { color: var(--text-muted); flex-shrink: 0; }
.menu button.is-danger { color: var(--danger); }
.menu button.is-danger svg { color: var(--danger); }
.menu button.is-active { color: var(--accent-strong); }
.menu button.is-active span { font-weight: 600; }
.menu__check { margin-left: auto; color: var(--accent-strong); }
.menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.menu .menu__label { padding: 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }

/* ---------- Board-Info Popover ---------- */
.info-pop {
  position: fixed;
  z-index: 150;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 12px;
  animation: popIn 0.14s ease;
  font-size: 13px;
  color: var(--text);
}
.info-pop[hidden] { display: none; }
.info-pop__head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.info-pop__title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-pop__chip {
  display: inline-flex; align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.info-pop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 4px;
  margin-bottom: 10px;
}
.info-pop__row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.info-pop__icon { color: var(--text-muted); display: inline-flex; }
.info-pop__icon svg { display: block; }
.info-pop__label { color: var(--text-muted); }
.info-pop__value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.info-pop__muted { color: var(--text-faint); font-weight: 500; }
.info-pop__section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.info-pop__section-head {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.info-pop__section-head svg { color: var(--text-muted); }
.info-pop__avatars {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
/* Avatar-Wrapper mit Online-Punkt unten rechts. Sichtbar nur, wenn der User
 * in den letzten ACTIVE_THRESHOLD_MIN etwas getan hat (write-driven). */
.info-pop__avatar-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.info-pop__avatar-cell::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2bb673;
  border: 2px solid var(--bg-elevated, #fff);
  display: none;
  pointer-events: none;
}
.info-pop__avatar-cell.is-active::after { display: block; }
.info-pop__active-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2bb673;
  margin: 0 4px 0 6px;
  vertical-align: 1px;
}
.info-pop__more {
  display: inline-grid; place-items: center;
  height: 22px; min-width: 26px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.info-pop__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 12px;
}
.info-pop__foot > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-pop__foot span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.info-pop__foot strong { color: var(--text); font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .info-pop { width: calc(100vw - 24px); }
  .info-pop__grid { grid-template-columns: 1fr; }
  .info-pop__foot { grid-template-columns: 1fr; }
}

/* ---------- Scrollbar polish ---------- */
.board::-webkit-scrollbar, .column__body::-webkit-scrollbar, .modal__body::-webkit-scrollbar, .sidebar__nav::-webkit-scrollbar { height: 10px; width: 10px; }
.board::-webkit-scrollbar-thumb, .column__body::-webkit-scrollbar-thumb, .modal__body::-webkit-scrollbar-thumb, .sidebar__nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
.board::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .view-cycle { padding: 6px 10px; gap: 6px; }
  .view-cycle__label { display: none; }
}
@media (max-width: 920px) {
  .modal__dialog { grid-template-columns: 1fr; grid-template-areas: "header" "body" "aside"; max-height: 95vh; }
  .modal__aside { border-left: none; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px; }
  .modal__aside h4 { width: 100%; margin: 6px 0 2px; }
  .modal__aside hr { width: 100%; }
  .modal__aside .aside-btn { width: auto; }
  .modal__aside .color-grid { width: 100%; }
  .modal__aside .select { width: 100%; }
}

/* ----- Tablet & Mobile (≤1024px): Sidebar off-canvas ----- */
@media (max-width: 1024px) {
  .app {
    display: block;
    grid-template-columns: none;
    width: 100%;
  }
  .main {
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(84vw, 320px);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  /* Sidebar ist auf Tablet/Mobile per Default versteckt; nur wenn der User
     sie aktiv öffnet (Hamburger), wird sie eingefahren. */
  .app.is-sidebar-open .sidebar { transform: translateX(0); }
  .app.is-sidebar-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(20, 20, 18, 0.4);
    z-index: 49;
  }
  .topbar__divider { display: none; }
  .board { padding: 16px; }
  .board[data-view="kanban"], .board[data-view="list-h"] { padding-right: 0; }
  .board[data-view="kanban"]::after,
  .board[data-view="list-h"]::after { flex-basis: 16px; }
  .board[data-view="kanban"] .column { flex: 0 0 300px; width: 300px; }
}

/* ----- Mobile (≤760px): kompakte UI ----- */
@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .topbar {
    width: 100%;
    padding: max(0px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  /* On mobile the view-cycle button moves into the topbar's "..." menu —
     hide it here so the topbar stays compact (search button + kebab). */
  .view-cycle { display: none; }
  .board-meta {
    padding: 10px 12px;
  }
  .board-meta__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -2px;
  }
  .board-meta__filters::-webkit-scrollbar { display: none; }
  .board-meta__filters .filter-chip { flex: 0 0 auto; }
  .board-meta__actions { width: 100%; }
  .board {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  .board[data-view="kanban"] .column { flex: 0 0 86vw; width: 86vw; max-width: 320px; }
  .board[data-view="kanban"] { scroll-snap-type: x mandatory; padding-right: 0; }
  .board[data-view="kanban"]::after,
  .board[data-view="list-h"]::after { flex-basis: 14px; }
  .board[data-view="kanban"] .column { scroll-snap-align: start; }
  .board[data-view="list-h"] .column { flex: 0 0 86vw; width: 86vw; max-width: 360px; }
  .board[data-view="list-v"] { gap: 12px; }
  .topbar__right { gap: 4px; }
  .board-title__category { font-size: 10px; }
  .board-title__name { font-size: 16px; }
  .modal__dialog { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal__body { padding: 16px; gap: 18px; }
  .modal__header { padding: 14px 16px 10px; }
  .modal__title { font-size: 18px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .form-row input { padding: 10px 12px; font-size: 16px; }
  .login__card { padding: 24px 20px; }
}

/* =========================================================
   LIGHTBOX (image viewer + hotspot annotations)
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-columns: 1fr min(360px, 38vw); background: rgba(15, 15, 14, 0.92); color: #ebe9e2; }
.lightbox[hidden] { display: none; }
.lightbox__stage {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: 24px;
}
.lightbox__canvas {
  position: relative;
  max-width: 100%; max-height: 100%;
  display: inline-block;
  user-select: none;
}
.lightbox__img {
  display: block;
  max-width: min(100%, calc(100vw - 360px - 60px));
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 96px rgba(0,0,0,0.6);
}
.lightbox__topbar {
  position: absolute; top: 12px; left: 12px; right: calc(min(360px, 38vw) + 12px);
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.lightbox__topbar > * { pointer-events: auto; }
.lightbox__title {
  flex: 1; min-width: 0;
  font-size: 13px; color: rgba(235, 233, 226, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.lightbox__btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #ebe9e2;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}
.lightbox__btn:hover { background: rgba(0, 0, 0, 0.75); }
.lightbox__btn.is-active { background: var(--accent); color: #fff; }

.lightbox__navs { position: absolute; top: 50%; left: 12px; right: calc(min(360px, 38vw) + 12px); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.lightbox__nav { width: 44px; height: 44px; pointer-events: auto; background: rgba(0,0,0,0.5); border-radius: 50%; display: grid; place-items: center; color: #ebe9e2; transition: background 0.15s; }
.lightbox__nav:hover { background: rgba(0,0,0,0.75); }
.lightbox__nav:disabled { opacity: 0.3; cursor: default; }

.lightbox__canvas.is-pin-mode { cursor: crosshair; }
.lightbox__canvas.is-pin-mode .lightbox__img { box-shadow: 0 0 0 2px var(--accent), 0 24px 96px rgba(0,0,0,0.6); }

/* Hotspot pin */
.hotspot {
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 3;
}
.hotspot:hover { transform: scale(1.15); }
.hotspot.is-active { background: #fff; color: var(--accent); transform: scale(1.2); box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.hotspot.is-done { background: #6b6960; opacity: 0.7; }
.hotspot.is-done.is-active { background: #fff; color: #6b6960; opacity: 1; }
.hotspot--draft {
  background: #fff;
  color: var(--accent);
  border: 2px dashed var(--accent);
  pointer-events: none;
  animation: hotspot-pulse 1.4s ease-in-out infinite;
}
@keyframes hotspot-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 0 rgba(28,133,108,0.55); }
  50%     { box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 10px rgba(28,133,108,0); }
}

/* Side panel */
.lightbox__side {
  background: #232220;
  border-left: 1px solid #34322d;
  display: flex; flex-direction: column;
  overflow: hidden;
  --avatar-bg: var(--accent-soft);
  --avatar-fg: var(--accent-strong);
}
.lightbox__side-head {
  padding: 14px 16px;
  border-bottom: 1px solid #34322d;
  display: flex; align-items: center; justify-content: space-between;
}
.lightbox__side-head h3 { font-family: var(--font-serif); font-size: 16px; }
.lightbox__side-info { font-size: 11px; color: #9c9a90; margin-top: 2px; }

.lightbox__hint {
  padding: 16px;
  font-size: 13px;
  color: #c9c6bc;
  line-height: 1.55;
  border-bottom: 1px solid #34322d;
}
.lightbox__hint kbd {
  background: #34322d; border-radius: 4px; padding: 1px 5px; font-family: inherit; font-size: 12px; border: 1px solid #45433d;
}

.lightbox__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.lightbox__list-empty {
  padding: 24px 16px;
  color: #9c9a90;
  font-size: 13px;
  text-align: center;
}
.hotspot-card {
  background: #2a2926;
  border: 1px solid #34322d;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
  cursor: pointer;
}
.hotspot-card:hover { border-color: #45433d; }
.hotspot-card.is-active { border-color: var(--accent); }
.hotspot-card.is-done { opacity: 0.65; }
.hotspot-card__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.hotspot-card__num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.hotspot-card.is-done .hotspot-card__num { background: #6b6960; }
.hotspot-card__author { font-size: 12px; color: #c9c6bc; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hotspot-card__time { font-size: 11px; color: #9c9a90; }
.hotspot-card__body { font-size: 13px; color: #ebe9e2; line-height: 1.45; word-wrap: break-word; }
.hotspot-card.is-done .hotspot-card__body { text-decoration: line-through; color: #9c9a90; }
.hotspot-card__actions {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.hotspot-card__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #c9c6bc;
  transition: background 0.15s, color 0.15s;
}
.hotspot-card__btn:hover { background: #34322d; color: #ebe9e2; }
.hotspot-card__btn--done { color: var(--accent); }
.hotspot-card__btn.is-danger:hover { background: #3d2a28; color: var(--danger); }

.hotspot-card__replies {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid #34322d;
  display: flex; flex-direction: column; gap: 6px;
}
.hotspot-reply {
  font-size: 12px;
  color: #c9c6bc;
  line-height: 1.5;
}
.hotspot-reply__head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
  font-size: 11px;
  color: #9c9a90;
}
.hotspot-reply__author { color: #c9c6bc; font-weight: 500; }

.hotspot-card__compose {
  margin-top: 8px;
}
.hotspot-card__compose textarea {
  width: 100%;
  min-height: 36px; max-height: 120px;
  padding: 7px 10px;
  background: #1a1a18;
  border: 1px solid #34322d;
  border-radius: 6px;
  color: #ebe9e2;
  font: inherit;
  font-size: 12px;
  resize: vertical;
  outline: none;
}
.hotspot-card__compose textarea:focus { border-color: var(--accent); }
.hotspot-card__compose-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.hotspot-card__btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hotspot-card__btn--primary:hover { background: var(--accent-strong); color: #fff; }
.hotspot-card--draft {
  border: 1px dashed var(--accent);
  background: rgba(28, 133, 108, 0.08);
}
.hotspot-card--draft .hotspot-card__num--draft {
  background: #fff;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
}
.hotspot-card__compose--draft textarea { min-height: 64px; }

.lightbox__compose {
  border-top: 1px solid #34322d;
  padding: 12px 14px;
  background: #1f1e1c;
}
.lightbox__compose textarea {
  width: 100%;
  min-height: 56px; max-height: 160px;
  padding: 9px 12px;
  background: #2a2926;
  border: 1px solid #34322d;
  border-radius: var(--radius-md);
  color: #ebe9e2;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
}
.lightbox__compose textarea:focus { border-color: var(--accent); }
.lightbox__compose-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.lightbox__compose-meta { font-size: 11px; color: #9c9a90; }

/* Tablet / Phone: nur Vollbild-Bildansicht, keine Hotspot-Leiste */
@media (max-width: 1024px) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: rgba(10, 10, 9, 0.97);
  }
  .lightbox__stage {
    min-height: 0;
    padding:
      max(10px, calc(env(safe-area-inset-top) + 4px))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .lightbox__canvas {
    max-width: 100%;
    max-height: 100%;
  }
  .lightbox__topbar {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, calc(env(safe-area-inset-top) + 4px));
  }
  .lightbox__navs {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
  }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px);
  }
  .lightbox__side,
  .lightbox--simple .lightbox__side {
    display: none !important;
  }
  #lightboxPinMode { display: none !important; }
  .lightbox__hint { display: none !important; }
  .lightbox .hotspot {
    display: none !important;
    pointer-events: none;
    visibility: hidden;
  }
}

/* ---------- Color labels modal ---------- */
.color-labels__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px 0 2px;
}
.color-labels__row {
  display: grid;
  grid-template-columns: 18px 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}
.color-labels__swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.color-labels__slug {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-labels__input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.color-labels__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(28, 133, 108, 0.15));
}