/* TaskBoard -- Styles. Ein Theme, zwei Modi (hell/dunkel via prefers-color-scheme
   bzw. data-theme auf <html>). Farben zentral als Variablen. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #dfe3e8;
  --border-strong: #c6ccd4;
  --text: #1c2430;
  --text-dim: #667384;
  --text-faint: #8b97a6;

  --accent: #204ecf;
  --accent-soft: #e8edfc;
  --accent-text: #ffffff;

  --overdue: #d3352f;
  --overdue-bg: #fdecec;
  --today: #c2650a;
  --today-bg: #fdf1e3;
  --soon: #8a7407;
  --soon-bg: #fdf8e0;
  --ok: #1f7a4d;
  --ok-bg: #e8f6ee;

  --shadow-sm: 0 1px 2px rgba(23, 32, 45, .07), 0 1px 1px rgba(23, 32, 45, .04);
  --shadow-md: 0 4px 14px rgba(23, 32, 45, .10);
  --shadow-lg: 0 18px 48px rgba(23, 32, 45, .22);

  --radius: 8px;
  --radius-sm: 5px;
  --topbar-h: 52px;
  --filterbar-h: 46px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d;
    --surface: #1c2127;
    --surface-2: #21262d;
    --border: #2e353e;
    --border-strong: #414a55;
    --text: #e4e8ed;
    --text-dim: #9aa5b1;
    --text-faint: #78838f;

    --accent: #5b84f5;
    --accent-soft: #1e2942;
    --accent-text: #0d1117;

    --overdue: #f5726c;
    --overdue-bg: #3a1e1e;
    --today: #e9a14a;
    --today-bg: #38291477;
    --soon: #d8c65c;
    --soon-bg: #33301355;
    --ok: #58c98d;
    --ok-bg: #16301f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg: #14181d; --surface: #1c2127; --surface-2: #21262d;
  --border: #2e353e; --border-strong: #414a55;
  --text: #e4e8ed; --text-dim: #9aa5b1; --text-faint: #78838f;
  --accent: #5b84f5; --accent-soft: #1e2942; --accent-text: #0d1117;
  --overdue: #f5726c; --overdue-bg: #3a1e1e;
  --today: #e9a14a; --today-bg: #382914;
  --soon: #d8c65c; --soon-bg: #333013;
  --ok: #58c98d; --ok-bg: #16301f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Topbar ---------- */

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 20;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -.2px; }
.brand-mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), #7a4ee0);
  box-shadow: var(--shadow-sm);
}
.brand-name { font-size: 15px; }

.tabs { display: flex; gap: 2px; }
.tab {
  background: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 520;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab[hidden] { display: none; }
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab-badge {
  background: var(--overdue); color: #fff;
  border-radius: 9px; padding: 0 6px;
  font-size: 11px; font-weight: 700; line-height: 17px; min-width: 18px; text-align: center;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#search[hidden], #reminderBtn[hidden], #newTaskBtn[hidden] { display: none; }
.account-box { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--border); }
.account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 12px; padding: 0; border: 0; background: none; font-family: inherit; }
.account-name.is-link { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.account-name:disabled { cursor: default; }

.search {
  width: 240px; padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

/* ---------- Buttons ---------- */

.btn {
  cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 520;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-ghost { border-color: transparent; background: none; color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { border-color: transparent; background: none; color: var(--overdue); }
.btn-danger:hover { background: var(--overdue-bg); }
.btn-sm { padding: 3px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:disabled:hover { background: var(--surface); }
.btn-ghost:disabled:hover { background: none; }

/* ---------- Login ---------- */

body.auth-page { background: #e9edf3; }
body.auth-page > .topbar,
body.auth-page > .filterbar,
body.auth-page > .overlay,
body.auth-page > .toasts { display: none; }
body.auth-page > main { height: 100%; overflow: hidden; }
.login-page {
  min-height: 100%; display: grid; grid-template-columns: minmax(320px, 470px) minmax(280px, 1fr);
  background: linear-gradient(135deg, #f8fafc 0%, #e6ebf3 100%);
}
.login-panel { align-self: center; justify-self: center; width: min(100% - 48px, 360px); padding: 38px 0; }
.login-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #204ecf; box-shadow: 0 12px 28px rgba(32,78,207,.25); }
.login-mark .brand-mark { width: 24px; height: 24px; background: linear-gradient(135deg, #fff, #b7c9ff); box-shadow: none; }
.login-kicker { margin: 26px 0 10px; color: #204ecf; font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.login-page h1 { margin: 0; color: #192536; font-size: clamp(27px, 4vw, 40px); line-height: 1.1; letter-spacing: 0; }
.login-subtitle { margin: 12px 0 30px; color: #667384; font-size: 15px; }
.login-form { display: grid; gap: 9px; }
.login-form label { color: #324153; font-size: 12px; font-weight: 700; }
.login-form input { width: 100%; min-height: 46px; margin: 0 0 9px; padding: 11px 13px; border: 1px solid #cbd3df; border-radius: 8px; background: #fff; color: #192536; outline: none; }
.login-form input:focus { border-color: #204ecf; box-shadow: 0 0 0 3px rgba(32,78,207,.14); }
.login-submit { width: 100%; min-height: 46px; margin-top: 8px; border-radius: 8px; font-weight: 700; }
.auth-error { margin: 8px 0 0; padding: 10px 12px; border-radius: 7px; background: #fdecec; color: #a92925; font-size: 13px; }
.auth-info { margin: 8px 0 0; padding: 10px 12px; border-radius: 7px; background: #eaf2ff; color: #1f3e73; font-size: 13px; }
.login-forgot { margin: 10px 0 0; padding: 0; border: 0; background: none; color: #204ecf; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; justify-self: start; }
.login-language { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: #667384; font-size: 12px; }
.login-language select { border: 0; background: transparent; color: #324153; font-weight: 650; cursor: pointer; }
.login-visual { position: relative; overflow: hidden; background: #204ecf; }
.login-visual::before { content: ''; position: absolute; inset: 12% 12% 12% 8%; border: 1px solid rgba(255,255,255,.22); border-radius: 40% 60% 48% 52%; transform: rotate(-12deg); }
.login-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000 35%); }
.login-orbit { position: absolute; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { width: 430px; height: 170px; right: -90px; top: 24%; }
.orbit-two { width: 520px; height: 210px; right: -130px; top: 36%; border-color: rgba(255,255,255,.24); }
@media (max-width: 700px) { .login-page { display: block; background: #f8fafc; } .login-panel { padding-top: 12vh; } .login-visual { display: none; } }

/* ---------- Filterbar ---------- */

.filterbar {
  height: var(--filterbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  overflow-x: auto;
}
.filterbar[hidden] { display: none; }
.fld { display: flex; align-items: center; gap: 6px; color: var(--text-dim); white-space: nowrap; }
.fld select, .fld input {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 6px; color: var(--text);
  max-width: 170px;
}
.chk { display: flex; align-items: center; gap: 5px; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.chk[hidden] { display: none; }
.chk input { accent-color: var(--accent); }
.filter-count { margin-left: auto; color: var(--text-faint); white-space: nowrap; }

/* ---------- Main ---------- */

main {
  height: calc(100% - var(--topbar-h) - var(--filterbar-h));
  overflow: auto;
}
main.no-filterbar { height: calc(100% - var(--topbar-h)); }

/* ---------- Board ---------- */

/* align-items: stretch + height 100% -> alle Spalten gleich hoch.
   Sonst waere die Ablagefläche einer leeren Spalte nur ein paar Pixel hoch. */
.board {
  display: flex; gap: 12px; align-items: stretch;
  padding: 14px 16px 16px;
  height: 100%;
}

/* max-width großzügig: sind Spalten ausgeblendet, sollen die übrigen den Platz
   nutzen. Bei 3 sichtbaren Spalten füllt 640px einen 1920er Schirm aus, ohne
   dass eine einzelne Karte absurd breit wird. */
.col {
  flex: 1 1 0; min-width: 230px; max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  min-height: 0;
}
.col.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.member-graphic-placeholder { visibility: hidden; }
.member-graphic-body { flex: 1; min-height: 70px; }

.col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
}
.col-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; }
.col-head[data-status="wiederkehrend"] .dot { background: #1a9aa6; }
.col-head[data-status="aktiv"] .dot { background: var(--accent); }
.col-head[data-status="delegiert"] .dot { background: #7a4ee0; }
.col-head[data-status="warten"] .dot { background: var(--today); }
.col-head[data-status="erledigt"] .dot { background: var(--ok); }
.col-count { margin-left: auto; color: var(--text-faint); font-weight: 500; font-size: 12px; }

.col-body {
  padding: 8px; display: flex; flex-direction: column; gap: 7px;
  overflow-y: auto; flex: 1; min-height: 70px;
}
.col-empty { color: var(--text-faint); font-size: 12.5px; text-align: center; padding: 14px 6px; }
.board { overflow-x: auto; }

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card.dragging { opacity: .4; }
.card.lvl-overdue { border-left-color: var(--overdue); }
.card.lvl-today { border-left-color: var(--today); }
.card.lvl-soon { border-left-color: var(--soon); }
.card.lvl-ok { border-left-color: var(--ok); }

.card-title { font-weight: 560; line-height: 1.3; margin-bottom: 5px; overflow-wrap: anywhere; }
.card.prio-hoch .card-title::before { content: "▲ "; color: var(--overdue); font-size: 11px; }
.card.prio-niedrig .card-title::before { content: "▽ "; color: var(--text-faint); font-size: 11px; }

.card-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-person { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chip.lvl-overdue { background: var(--overdue-bg); border-color: transparent; color: var(--overdue); font-weight: 600; }
.chip.lvl-today { background: var(--today-bg); border-color: transparent; color: var(--today); font-weight: 600; }
.chip.lvl-soon { background: var(--soon-bg); border-color: transparent; color: var(--soon); }
.chip.lvl-ok { color: var(--text-dim); }
.chip-snooze { background: var(--surface); color: var(--text-faint); font-style: italic; }

/* ---------- Radar ---------- */

.radar { padding: 14px 16px 40px; max-width: 1100px; }
.radar-group { margin-bottom: 22px; }
.radar-group h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-dim); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.radar-group h2 .n { color: var(--text-faint); letter-spacing: 0; }
.radar-group.g-overdue h2 { color: var(--overdue); }
.radar-group.g-today h2 { color: var(--today); }

.rrow {
  display: grid;
  grid-template-columns: 118px 1fr 170px 170px 130px;
  gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 5px; cursor: pointer;
}
.rrow:hover { box-shadow: var(--shadow-md); }
.rrow.lvl-overdue { border-left-color: var(--overdue); }
.rrow.lvl-today { border-left-color: var(--today); }
.rrow.lvl-soon { border-left-color: var(--soon); }
.rrow.lvl-ok { border-left-color: var(--ok); }
.rrow-when { font-size: 12.5px; font-weight: 600; }
.rrow-when small { display: block; font-weight: 400; color: var(--text-faint); font-size: 11.5px; }
.rrow-title { font-weight: 540; overflow-wrap: anywhere; }
.rrow-title small { display: block; color: var(--text-faint); font-weight: 400; font-size: 11.5px; }
.rrow-cell { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow-cell b { color: var(--text); font-weight: 550; }

@media (max-width: 980px) {
  .rrow { grid-template-columns: 110px 1fr; }
  .rrow-cell { display: none; }
}

/* ---------- Tabellen / Kontakte / Einstellungen ---------- */

.page { padding: 18px 20px 50px; max-width: 900px; }
.page h1 { font-size: 17px; margin: 0 0 4px; }
.page .lead { color: var(--text-dim); margin: 0 0 18px; font-size: 13px; }
.page .lead.warn { color: var(--warn, #a4670c); font-weight: 600; }
table.grid td.muted { color: var(--text-dim); }
.page h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); margin: 26px 0 10px; }

/* ---------- Patch Management ---------- */
.patch-page {
  height: 100%; padding: 16px 20px 20px; max-width: none;
  display: flex; flex-direction: column; overflow: hidden;
}
.patch-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.patch-toolbar h1 { font-size: 17px; margin: 0 auto 7px 0; }
.patch-toolbar .fld { min-width: 240px; }
.patch-id-controls { align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-left: 4px; }
.patch-id-toggle { padding-bottom: 0; }
.patch-line-count { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.patch-meta { min-height: 20px; margin-bottom: 8px; color: var(--text-dim); font-size: 12.5px; }
.patch-table-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); }
.patch-table { width: 100%; table-layout: fixed; border: 0 !important; }
.patch-table thead { position: sticky; top: 0; z-index: 2; }
.patch-table th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.patch-table td { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.patch-table .patch-col-source_finding_id { font-family: Consolas, "Cascadia Mono", monospace; font-size: 11.5px; }
.patch-history-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.patch-table .th-btn { white-space: normal; text-align: left; }
.patch-table .th-filter { min-width: 0; }
.patch-empty { text-align: center; color: var(--text-faint); padding: 28px !important; }
.patch-history-action { white-space: normal !important; }
.patch-history-action .btn { max-width: 100%; white-space: normal; line-height: 1.25; }
.patch-status-filter { position: relative; min-width: 0; }
.patch-status-filter summary {
  cursor: pointer; list-style: none; width: 100%; padding: 3px 24px 3px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.patch-status-filter summary::-webkit-details-marker { display: none; }
.patch-status-filter summary::after { content: "▾"; position: absolute; right: 7px; }
.patch-status-filter[open] summary::after { content: "▴"; }
.patch-status-menu {
  margin-top: 3px; min-width: 150px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.patch-status-menu label {
  display: flex; align-items: center; gap: 6px; padding: 4px 5px;
  color: var(--text); font-size: 12.5px; font-family: "Segoe UI", sans-serif;
  font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer;
  paint-order: normal; -webkit-text-stroke: 0; text-shadow: none;
}
.patch-status-menu label:hover { background: var(--surface-2); }
.patch-status-menu input { width: 15px !important; height: 15px; flex: none; }
.patch-status { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 650; }
.patch-status-new { color: var(--accent); background: var(--accent-soft); }
.patch-status-existing { color: var(--text-dim); background: var(--surface-2); }
.patch-status-done { color: var(--ok); background: var(--ok-bg); }
.patch-status-reopened { color: var(--today); background: var(--today-bg); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.panel + .panel { margin-top: 12px; }

.patch-upload-status { align-self: center; color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.grid th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-weight: 600;
}
table.grid td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.right { text-align: right; white-space: nowrap; }
table.grid input, table.grid select {
  width: 100%; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 3px 6px;
}
table.grid input:hover, table.grid select:hover { border-color: var(--border); background: var(--surface-2); }
table.grid input:focus, table.grid select:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-2); }

/* Sortierbare, filterbare Tabelle */

table.grid-sortable th { vertical-align: middle; }

.th-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  font-weight: 600;
}
.th-btn:hover { color: var(--text); }
th.right .th-btn { margin-left: auto; }

.th-sort { font-size: 9px; opacity: .35; }
.th-sort.on { opacity: 1; color: var(--accent); }

tr.th-filters th {
  padding: 5px 8px 7px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0;
}
.th-filter {
  width: 100%; font-size: 12.5px; font-weight: 400;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 6px; color: var(--text);
}
.th-filter:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.th-filter::placeholder { color: var(--text-faint); font-style: italic; }

/* Mittlere Spalte 138px statt 110px: bei 110px war der laengste Auswahlwert
   („Super Pepe“ bei Darstellung) abgeschnitten -- und das in jedem Theme, also
   genau in dem Moment, in dem man ihn auswaehlt. */
.set-row { display: grid; grid-template-columns: 260px 138px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: 0; }
.set-row label { font-weight: 540; }
.set-row .hint { color: var(--text-dim); font-size: 12.5px; }
.set-row input, .set-row select {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 8px; width: 100%;
}
.role-select {
  display: grid; gap: 6px; margin: 0; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.role-select label { display: flex; gap: 7px; align-items: center; font-size: 12.5px; }

/* Benutzerverwaltung: feste Spaltenbreiten, damit die E-Mail-Spalte nicht von
   den Rollen-Haekchen und den Knoepfen zusammengedrueckt wird. */
/* Der eigene Scrollbereich haelt die Spalten auch auf schmaleren Fenstern
  stabil, statt Ueberschriften und Rollen ineinander zu quetschen. */
.users-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); }
table.grid.users-table { table-layout: fixed; min-width: 1200px; }
/* Sechs Spalten passen nicht in die 900px einer normalen Seite. */
.page.page-wide { max-width: 1320px; }
.users-table th { white-space: normal; overflow-wrap: normal; }
.users-table td { vertical-align: top; }
.users-table input[type="text"], .users-table input[type="email"] { font-size: 13px; padding: 5px 7px; border-color: var(--border); background: var(--surface-2); }
.users-table td.right { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.users-table .role-select { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px; }
/* Ohne nowrap bricht der Text im Flex-Label mitten im Wort um und macht die Zeile doppelt so hoch. */
.users-table .role-select label { width: 100%; font-size: 12px; white-space: nowrap; }
.users-table .role-select input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; padding: 0; }
/* Eingabefelder brauchen hier mehr Luft als die 138px der normalen Zeile. */
.admin-form .set-row { grid-template-columns: 180px minmax(260px, 1fr) 1.2fr; }
.set-row .role-select input { width: auto; margin: 0; padding: 0; }

/* Platzhalter-Chips der Mailvorlage */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 12px; }
.tagchip {
  cursor: pointer; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--accent-soft); border: 1px solid transparent; color: var(--accent);
}
.tagchip:hover { border-color: var(--accent); }
.tagchip:active { transform: translateY(1px); }

.mailpreview {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.mailpreview .mp-head {
  padding: 5px 11px; background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint);
}
.mailpreview .mp-subject {
  padding: 7px 11px; border-bottom: 1px solid var(--border); font-weight: 570;
  display: flex; gap: 9px; align-items: baseline;
}
.mailpreview .mp-subject span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-faint); font-weight: 600; flex: none;
}
.mailpreview .mp-body {
  padding: 9px 11px; white-space: pre-wrap; line-height: 1.5; color: var(--text-dim);
  min-height: 40px; overflow-wrap: anywhere;
}

.codebox {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px;
  overflow-x: auto; white-space: pre; color: var(--text-dim);
}

/* ---------- Task-Sheet ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 22, 30, .45);
  display: flex; justify-content: flex-end;
  backdrop-filter: blur(1.5px);
}
.overlay[hidden] { display: none; }

.sheet {
  width: min(660px, 100%); height: 100%;
  background: var(--bg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slidein .16s ease-out;
}
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } }

.sheet-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.sheet-head .lvl-pill {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; margin-top: 3px;
}
.lvl-pill.lvl-overdue { background: var(--overdue-bg); color: var(--overdue); }
.lvl-pill.lvl-today { background: var(--today-bg); color: var(--today); }
.lvl-pill.lvl-soon { background: var(--soon-bg); color: var(--soon); }
.lvl-pill.lvl-ok { background: var(--ok-bg); color: var(--ok); }
.lvl-pill.lvl-none { background: var(--surface-2); color: var(--text-faint); }

#sheetTitle {
  flex: 1; font-size: 16px; font-weight: 620; line-height: 1.3;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 6px; resize: none; overflow: hidden; min-height: 28px;
}
#sheetTitle:hover { border-color: var(--border); }
#sheetTitle:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-2); }

.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 40px; }
.sheet-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border);
}
.sheet-foot .spacer { margin-left: auto; }
.save-state { font-size: 12px; color: var(--text-faint); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

/* ---------- Faellige-Aufgaben-Popup ---------- */

.reminder-overlay { justify-content: center; align-items: center; }
.reminder-modal {
  width: min(560px, 92vw); max-height: 82vh;
  background: var(--bg); border-radius: 8px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.reminder-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.reminder-modal-head h2 { margin: 0; font-size: 15px; flex: 1; }
.reminder-modal-body { flex: 1; overflow-y: auto; padding: 10px 16px 16px; }
.reminder-group h3 {
  margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim);
}
.reminder-group:first-child h3 { margin-top: 0; }
.reminder-group h3 .n { color: var(--text-faint); font-weight: 400; }
.reminder-row {
  display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(90px, .8fr) minmax(140px, 1.4fr) minmax(100px, 1fr); gap: 10px;
  align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-sm);
}
.reminder-row:last-child { border-bottom: 0; }
.reminder-row:hover { background: var(--surface-2); }
.reminder-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-row .rr-when { font-size: 12px; color: var(--text-faint); }
.approval-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; }
.approval-check input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--ok); }
.reminder-row .rr-project, .reminder-row .rr-asg { color: var(--text-dim); font-size: 12px; }
.reminder-row .rr-title { font-weight: 650; }
@media (max-width: 620px) {
  .reminder-row { grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr); }
  .reminder-row .rr-title { grid-column: 1 / -1; }
}
.reminder-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border);
}
.f > label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.f > .sub { font-size: 11.5px; color: var(--text-faint); }
.f input, .f select, .f textarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px; width: 100%;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.f textarea { resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.5; }

.date-with-lead { display: grid; grid-template-columns: 1fr 92px; gap: 6px; }
.date-with-lead .lead-wrap { position: relative; }
.date-with-lead .lead-wrap input { padding-right: 26px; }
.date-with-lead .lead-wrap::after {
  content: "T"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 12px; pointer-events: none;
}

.section { margin-top: 20px; }
.section > h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.section > h3 .n { color: var(--text-faint); font-weight: 500; letter-spacing: 0; }

/* Projekte -- Farbwerte je Modus, damit die Chips in hell und dunkel lesbar bleiben */

.pj-blau    { --pj-bg: #e4ecfd; --pj-fg: #1b46b8; --pj-solid: #2f6fe4; }
.pj-violett { --pj-bg: #eee6fb; --pj-fg: #5b2ca6; --pj-solid: #7c4ddb; }
.pj-tuerkis { --pj-bg: #dcf1f2; --pj-fg: #10646c; --pj-solid: #1a9aa6; }
.pj-gruen   { --pj-bg: #e2f3e6; --pj-fg: #1c6b38; --pj-solid: #2c9b52; }
.pj-gelb    { --pj-bg: #fbf1d4; --pj-fg: #7a5c07; --pj-solid: #c9a017; }
.pj-orange  { --pj-bg: #fdeada; --pj-fg: #8a4708; --pj-solid: #d97316; }
.pj-rot     { --pj-bg: #fce4e4; --pj-fg: #9c2320; --pj-solid: #d8433d; }
.pj-grau    { --pj-bg: #e8eaee; --pj-fg: #4a5462; --pj-solid: #78838f; }
/* Vier weitere Farbtoene -- nur fuer Teammitglieder (TEAM_COLORS), nicht in der
   Projektauswahl. Bewusst weit auseinanderliegende Farbwinkel, damit sich bei
   zwoelf Personen keine zwei Karten aehnlich sehen. */
.pj-limette { --pj-bg: #eaf4d3; --pj-fg: #4c6608; --pj-solid: #7ca516; }
.pj-indigo  { --pj-bg: #e3e5fb; --pj-fg: #2c2f8f; --pj-solid: #4a4fc4; }
.pj-rosa    { --pj-bg: #fbe2f0; --pj-fg: #97205f; --pj-solid: #d1408c; }
.pj-braun   { --pj-bg: #eee5db; --pj-fg: #6b4522; --pj-solid: #9a6b3c; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pj-dark: 1;
  }
  :root:not([data-theme="light"]) .pj-blau    { --pj-bg: #1c2c50; --pj-fg: #9fbcfb; --pj-solid: #5b84f5; }
  :root:not([data-theme="light"]) .pj-violett { --pj-bg: #2e2350; --pj-fg: #c3a8f7; --pj-solid: #9a76ee; }
  :root:not([data-theme="light"]) .pj-tuerkis { --pj-bg: #15373b; --pj-fg: #86d7de; --pj-solid: #3fbcc8; }
  :root:not([data-theme="light"]) .pj-gruen   { --pj-bg: #17351f; --pj-fg: #8bd9a5; --pj-solid: #46b96c; }
  :root:not([data-theme="light"]) .pj-gelb    { --pj-bg: #3a3212; --pj-fg: #e2cf72; --pj-solid: #d3b03a; }
  :root:not([data-theme="light"]) .pj-orange  { --pj-bg: #3d2a14; --pj-fg: #f0ac6b; --pj-solid: #e0872e; }
  :root:not([data-theme="light"]) .pj-rot     { --pj-bg: #3d1e1d; --pj-fg: #f39a95; --pj-solid: #e2615a; }
  :root:not([data-theme="light"]) .pj-grau    { --pj-bg: #262c34; --pj-fg: #a4aeba; --pj-solid: #8b96a3; }
  :root:not([data-theme="light"]) .pj-limette { --pj-bg: #253514; --pj-fg: #bcd97a; --pj-solid: #94c02e; }
  :root:not([data-theme="light"]) .pj-indigo  { --pj-bg: #23264f; --pj-fg: #a8adf5; --pj-solid: #6f74e0; }
  :root:not([data-theme="light"]) .pj-rosa    { --pj-bg: #3d1a2e; --pj-fg: #f2a0cb; --pj-solid: #e061a4; }
  :root:not([data-theme="light"]) .pj-braun   { --pj-bg: #33261a; --pj-fg: #d3b18c; --pj-solid: #b0814f; }
}

:root[data-theme="dark"] .pj-blau    { --pj-bg: #1c2c50; --pj-fg: #9fbcfb; --pj-solid: #5b84f5; }
:root[data-theme="dark"] .pj-violett { --pj-bg: #2e2350; --pj-fg: #c3a8f7; --pj-solid: #9a76ee; }
:root[data-theme="dark"] .pj-tuerkis { --pj-bg: #15373b; --pj-fg: #86d7de; --pj-solid: #3fbcc8; }
:root[data-theme="dark"] .pj-gruen   { --pj-bg: #17351f; --pj-fg: #8bd9a5; --pj-solid: #46b96c; }
:root[data-theme="dark"] .pj-gelb    { --pj-bg: #3a3212; --pj-fg: #e2cf72; --pj-solid: #d3b03a; }
:root[data-theme="dark"] .pj-orange  { --pj-bg: #3d2a14; --pj-fg: #f0ac6b; --pj-solid: #e0872e; }
:root[data-theme="dark"] .pj-rot     { --pj-bg: #3d1e1d; --pj-fg: #f39a95; --pj-solid: #e2615a; }
:root[data-theme="dark"] .pj-grau    { --pj-bg: #262c34; --pj-fg: #a4aeba; --pj-solid: #8b96a3; }
:root[data-theme="dark"] .pj-limette { --pj-bg: #253514; --pj-fg: #bcd97a; --pj-solid: #94c02e; }
:root[data-theme="dark"] .pj-indigo  { --pj-bg: #23264f; --pj-fg: #a8adf5; --pj-solid: #6f74e0; }
:root[data-theme="dark"] .pj-rosa    { --pj-bg: #3d1a2e; --pj-fg: #f2a0cb; --pj-solid: #e061a4; }
:root[data-theme="dark"] .pj-braun   { --pj-bg: #33261a; --pj-fg: #d3b18c; --pj-solid: #b0814f; }

.chip-project {
  background: var(--pj-bg); color: var(--pj-fg); border-color: transparent; font-weight: 560;
}

.pj-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pj-solid); margin-right: 5px; vertical-align: baseline; flex: none;
}

.pj-select {
  background: var(--pj-bg) !important; color: var(--pj-fg) !important;
  border-color: transparent !important; font-weight: 560;
}

/* Projekt Status */

.stx-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 0 0 4px;
}
.stx-summary { color: var(--text-dim); font-size: 13px; }

.stx h2 { margin-top: 22px; }

/* Auf- und zuklappbare Abschnitte -- Statusreiter und Anwendungsgruppen */
.sec-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 22px 0 0; padding: 7px 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  user-select: none;
}
.sec-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); }
.sec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sec-toggle.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.sec-chevron {
  flex: none; color: var(--text-faint); font-size: 10px;
  transition: transform .12s ease; transform-origin: 45% 50%;
}
.sec-toggle.open .sec-chevron { transform: rotate(90deg); color: var(--accent); }

.sec-badge {
  margin-left: auto; font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--text-faint);
}

.sec-body {
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 11px;
}
/* Innentabellen brauchen keinen zweiten Rahmen */
.sec-body > table.grid { border: 0; }

.stx-matrix td { vertical-align: top; font-size: 13px; }
.stx-matrix tr.stx-group td { border-top: 2px solid var(--border-strong); }
.stx-matrix tbody tr:first-child td { border-top: 0; }
.stx-wp { background: var(--surface-2); }
.stx-wp small { display: block; color: var(--text-faint); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.stx-note { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.stx-leer { color: var(--text-faint); font-style: italic; }

.stx-tasktable td { vertical-align: top; }
.stx-appname { background: var(--surface-2); white-space: nowrap; }
.stx-appname small { display: block; color: var(--text-faint); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.stx-tasks { padding: 6px 8px !important; }
.stx-tasktable tr.stx-rest .stx-appname { background: var(--today-bg); }
.stx-tasktable tr.stx-rest .stx-appname b { color: var(--today); }

.stx-task {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px 8px; margin-bottom: 4px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.stx-task:last-child { margin-bottom: 0; }
.stx-task:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stx-task.lvl-overdue { border-left-color: var(--overdue); }
.stx-task.lvl-today { border-left-color: var(--today); }
.stx-task.lvl-soon { border-left-color: var(--soon); }
.stx-task.lvl-ok { border-left-color: var(--ok); }

/* Zeile 1: die Taskstammdaten (Status, Titel, Zuweisung, Fortschritt,
   Fristen-Chips). Ihre Zahl schwankt -- eine Deadline bringt einen
   Fristen-Chip mehr als keine -- darum bricht NUR diese Zeile um, nie in
   die zweite (den Verlauf) hinein. */
.stx-task-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.stx-title { font-weight: 540; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* Zeile 2: der letzte Verlaufseintrag, oder sein Platzhalter -- immer eine
   eigene, volle Zeile, unabhängig von Zeile 1. Vorher teilte sich das den
   Platz in EINER umbrechenden Zeile mit den Stammdaten (`margin-left:auto`)
   und rutschte je nach Anzahl der Fristen-Chips unterschiedlich weit ein;
   zwei Tasks mit und ohne Deadline sahen dadurch nie gleich aus. */
.stx-verlauf {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--text-dim);
}
.stx-v-icon { flex: none; opacity: .6; }
.stx-v-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 540; /* dieselbe Stärke wie der Task-Titel */
}
.stx-v-time { flex: none; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.stx-status {
  flex: none; font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .4px; padding: 2px 7px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  min-width: 96px; text-align: center;
}
.stx-status.st-wiederkehrend { background: #dcf1f2; border-color: transparent; color: #10646c; }
.stx-status.st-aktiv { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.stx-status.st-delegiert { background: #efe7fb; border-color: transparent; color: #5b2ca6; }
.stx-status.st-warten { background: var(--today-bg); border-color: transparent; color: var(--today); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stx-status.st-delegiert { background: #2e2350; color: #c3a8f7; }
  :root:not([data-theme="light"]) .stx-status.st-wiederkehrend { background: #15373b; color: #86d7de; }
}
:root[data-theme="dark"] .stx-status.st-delegiert { background: #2e2350; color: #c3a8f7; }
:root[data-theme="dark"] .stx-status.st-wiederkehrend { background: #15373b; color: #86d7de; }

@media (max-width: 1100px) {
  .stx-matrix th:last-child, .stx-matrix td:last-child { display: none; }
}

/* Stammdaten: Unterreiter */

.subtabs {
  display: flex; gap: 3px; align-items: center;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky; top: 0; z-index: 5;
}
.subtab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 7px 13px 8px; color: var(--text-dim); font-weight: 540;
  display: inline-flex; align-items: center; gap: 6px;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 620; }
.subtab-n {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--text-faint);
}
.subtab.active .subtab-n { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

tr.wp-archived { background: var(--surface-2); }
tr.wp-archived input[data-wfield="name"] { color: var(--text-dim); font-style: italic; }
tr.wp-archived .vis-toggle span { color: var(--text-faint); }

/* Anwendungen */

.chip-app { background: var(--surface); border-color: var(--border-strong); color: var(--text-dim); }

.app-group { margin-bottom: 14px; }
/* Die Panels bringen ihren eigenen Rahmen mit, hier gibt es keine .sec-body-Hülle:
   deshalb Abstand darunter und runde Ecken auch im offenen Zustand. */
.app-group > .sec-toggle { margin: 0 0 9px; }
.app-group > .sec-toggle.open { border-radius: var(--radius-sm); }

/* Panels nebeneinander, solange jedes noch genug Breite für zwei Feldspalten
   hat. minmax sorgt dafür, dass auf schmalen Fenstern automatisch eine Spalte
   bleibt, statt die Felder zusammenzuquetschen. */
.app-panels {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(680px, 1fr));
  align-items: start;
}
/* Der Abstand kommt vom Grid. Die generische Regel `.panel + .panel` würde
   sonst jedes Panel außer dem ersten um 12px nach unten schieben -- nebeneinander
   liegende Panels stünden dann versetzt. */
.app-panels > .panel + .panel { margin-top: 0; }

.app-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.app-name {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 4px 6px;
}
.app-name:hover { border-color: var(--border); background: var(--surface-2); }
.app-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-2); }
.app-count { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }

.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.app-grid select, .app-grid input {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 7px; width: 100%;
}
.app-grid select:focus, .app-grid input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.app-deps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
}
.app-deps-label {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px; margin-right: 3px;
}
.dep-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 4px; padding: 2px 4px 2px 8px; font-size: 12.5px; font-weight: 540;
}
.app-managers .dep-chip.is-primary { box-shadow: inset 0 0 0 1px currentColor; }
.dep-chip button {
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: 0 3px; border-radius: 3px; font-size: 11px; opacity: .65;
}
.dep-chip button:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.dep-add {
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: 4px; padding: 2px 6px; font-size: 12.5px; color: var(--text-dim);
}
.app-hardware { align-items: flex-start; }
.hardware-list { display: grid; gap: 6px; flex: 1; min-width: min(520px, 100%); }
.hardware-row { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr) auto; gap: 6px; }
.hardware-row input {
  min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 7px; color: var(--text);
}
.hardware-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hardware-actions { display: inline-flex; gap: 2px; align-items: center; }
.hardware-actions .btn { padding-inline: 6px; }

@media (max-width: 700px) {
  .hardware-list { min-width: 100%; }
  .hardware-row { grid-template-columns: 1fr auto; }
  .hardware-row input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Verantwortliche im Task-Detail */
.app-people {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 8px 11px; margin: -4px 0 12px;
  font-size: 12.5px;
}
.app-person { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.app-person b { color: var(--text-faint); font-weight: 600; }
.app-assign {
  background: var(--accent-soft); color: var(--accent); border: 0; cursor: pointer;
  border-radius: 3px; padding: 1px 6px; font-size: 11.5px; font-weight: 560;
}
.app-assign:hover { filter: brightness(.95); }
.app-current { color: var(--ok); font-weight: 600; font-size: 11.5px; }

select.needs-value, input.needs-value {
  border-color: var(--overdue) !important; background: var(--overdue-bg) !important;
}

@media (max-width: 700px) {
  .app-grid { grid-template-columns: 1fr; }
}

/* Sichtschutz-Schalter je Projekt */

table.grid td.center, table.grid th.center { text-align: center; }

.vis-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}
.vis-toggle input { accent-color: var(--accent); cursor: pointer; }

tr.pj-hidden { background: var(--surface-2); }
tr.pj-hidden input[data-pfield="name"] { color: var(--text-dim); font-style: italic; }
tr.pj-hidden .vis-toggle span { color: var(--today); font-weight: 600; }

.warnbox {
  background: var(--today-bg); border: 1px solid transparent; border-left: 3px solid var(--today);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; color: var(--text);
  line-height: 1.5;
}
.warnbox code {
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px;
  background: var(--surface); padding: 1px 4px; border-radius: 3px;
}

/* Sub-Tasks */

.st-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.st-toggle input { accent-color: var(--accent); }

.st-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 9px; }
.st-bar > i { display: block; height: 100%; background: var(--ok); transition: width .2s ease; }

.st-list { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.st-row {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 6px 8px;
}
.st-row.lvl-overdue { border-left-color: var(--overdue); }
.st-row.lvl-today { border-left-color: var(--today); }
.st-row.lvl-soon { border-left-color: var(--soon); }
.st-row.lvl-ok { border-left-color: var(--ok); }
.st-row.done { border-left-color: var(--border); opacity: .62; }
.st-row.done .st-title { text-decoration: line-through; color: var(--text-faint); }

.st-main { display: flex; align-items: center; gap: 7px; }
.st-main .st-check { accent-color: var(--ok); width: 15px; height: 15px; flex: none; cursor: pointer; }

.st-title {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 3px 5px; font-weight: 520;
}
.st-title:hover { border-color: var(--border); background: var(--surface-2); }
.st-title:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-2); }

.st-move { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .1s; }
.st-row:hover .st-move { opacity: 1; }

.st-btn {
  background: none; border: 0; cursor: pointer; color: var(--text-faint);
  padding: 2px 4px; border-radius: 3px; font-size: 11px; line-height: 1;
}
.st-btn:hover { background: var(--surface-2); color: var(--text); }
.st-btn:disabled { opacity: .25; cursor: default; }
.st-btn.st-del:hover { background: var(--overdue-bg); color: var(--overdue); }

.st-detail {
  display: grid; grid-template-columns: 1fr 1fr 118px 118px; gap: 5px;
  margin: 6px 0 0 22px;
}
.st-detail select, .st-detail input {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 5px; font-size: 12.5px; min-width: 0;
}
.st-detail select:focus, .st-detail input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.st-alerts { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0 22px; }

.st-add { display: flex; gap: 6px; margin-bottom: 8px; }
.st-add input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px;
}

.st-tpl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-tpl select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 6px; font-size: 12.5px; max-width: 240px;
}

.chip-progress { font-variant-numeric: tabular-nums; }

.rrow.is-sub .rrow-title { padding-left: 13px; position: relative; }
.rrow.is-sub .rrow-title::before {
  content: "└"; position: absolute; left: 0; top: 1px; color: var(--text-faint);
}
.rrow-sub { color: var(--text-dim); font-weight: 550; }

@media (max-width: 620px) {
  .st-detail { grid-template-columns: 1fr 1fr; }
}

/* Dateien */
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px;
  background: var(--surface); cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone b { color: var(--accent); }

.filelabel {
  width: 100%; margin-top: 7px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.filelist { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.filelist li {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.filelist .fi-icon { font-size: 15px; opacity: .65; flex: none; }
.filelist .fi-main { flex: 1; min-width: 0; }
.filelist .fi-name { display: block; font-weight: 540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .fi-sub { display: block; font-size: 11.5px; color: var(--text-faint); }
.filelist .fi-label { color: var(--text-dim); font-style: italic; }

.progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .1s linear; }

/* Verlauf */
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.log li:last-child { border-bottom: 0; }
.log .lt { color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log .lk { flex: none; width: 16px; text-align: center; opacity: .7; }
.log .lx { flex: 1; color: var(--text-dim); overflow-wrap: anywhere; }
.log .lt-edited { font-style: italic; opacity: .8; }
.log .log-edit, .log .log-delete, .log .log-edit-input + button, .log button[data-act="cancel-note-edit"] { flex: none; }
.log-edit-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 6px; font-size: 12.5px; color: var(--text-dim); font-family: inherit; }

.notefield { display: flex; gap: 6px; margin-top: 8px; }
.notefield input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; }

/* ---------- Toasts ---------- */

.toasts { position: fixed; bottom: 16px; left: 16px; z-index: 90; display: flex; flex-direction: column; gap: 7px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 8px 13px; box-shadow: var(--shadow-md);
  font-size: 13px; animation: pop .15s ease-out; max-width: 420px;
}
.toast.err { border-left-color: var(--overdue); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

.empty-state { text-align: center; color: var(--text-dim); padding: 60px 20px; }
.empty-state h2 { font-size: 15px; margin: 0 0 6px; color: var(--text); text-transform: none; letter-spacing: 0; }

/* ---------- PC Team Status ---------- */

/* Eine Karte je Person, nebeneinander -- die Ansicht ersetzt eine
   PowerPoint-Seite und soll auf einen Schirm passen. */
.team-grid {
  display: grid; gap: 12px;
  /* 430px: bei 360 war das Projektfeld so eng, dass Namen wie
     „AIS Datasphere Migration" abgeschnitten wurden. */
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  align-items: start;
}
/* Kante in der VOLLTONFARBE zusaetzlich zum Kopfband: der pastellige Ton des
   Bandes traegt bei Grau kaum, und genau unterscheiden soll die Farbe ja. Ein
   Volltonstreifen ist bei jeder Palettenfarbe eindeutig. */
.team-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--pj-solid, var(--border-strong));
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
  overflow: hidden;
}
/* Die eigene Karte: kraeftiger Rand in ihrer eigenen Farbe, damit sie auffaellt,
   ohne die Farbunterscheidung zu ueberdecken. */
.team-card.team-self {
  border-color: var(--pj-solid, var(--accent));
  box-shadow: 0 0 0 2px var(--pj-solid, var(--accent));
}

/* Farbiges Kopfband je Person -- die Farbe kommt aus der `pj-*`-Klasse an der
   Karte, also aus derselben Palette wie die Projektfarben (Werte fuer hell und
   dunkel stehen dort schon). */
.team-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -12px -14px 0; padding: 9px 14px;
  background: var(--pj-bg, var(--surface-2));
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.team-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--pj-solid, var(--border-strong));
}
.team-name { font-weight: 640; font-size: 15px; color: var(--pj-fg, var(--text)); }
.team-role { color: var(--pj-fg, var(--text-dim)); font-size: 12.5px; opacity: .85; }
.team-badge {
  background: var(--pj-solid, var(--accent)); color: #fff;
  border-radius: 4px; padding: 0 6px; font-size: 11px; font-weight: 700;
}

.team-projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tp-row { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 6px; align-items: center; }
.tp-row input {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 7px; min-width: 0;
}
.team-empty { color: var(--text-faint); font-size: 12.5px; }

.team-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.team-add input {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 7px; min-width: 0;
}

/* Warnung an einer doppelt vergebenen Teamfarbe */
.farb-warnung {
  display: inline-block; margin-left: 5px;
  background: var(--today-bg); color: var(--today);
  border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 600;
}

/* ---------- Statusgespräch: Themenfelder ---------- */

.mtg-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px;
}

/* Drei Blöcke nebeneinander wie in der Vorlage; bei schmalem Fenster untereinander. */
.mtg-blocks {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}
.mtg-block {
  border: 1px solid var(--border);
  border-top: 5px solid var(--pj-solid, var(--border-strong));
  border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column;
}
.mtg-block-head {
  display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; align-items: center;
  padding: 9px 10px;
  background: var(--pj-bg, var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.mtg-block-head input {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 6px; font-weight: 640; color: var(--pj-fg, var(--text)); min-width: 0;
}
.mtg-block-head input:hover { border-color: var(--border); }
.mtg-block-head input:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.mtg-image-zone {
  display: flex; flex-direction: column; min-width: 0;
  position: relative; transition: box-shadow .15s, background .15s;
}
.mtg-block .mtg-image-zone { flex: 1; }
.mtg-image-zone.drag-over {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.mtg-image-zone.uploading { opacity: .65; pointer-events: none; }
.mtg-block textarea {
  border: 0; border-radius: 0 0 var(--radius) var(--radius);
  padding: 10px; resize: vertical; flex: 1;
  background: var(--surface); color: var(--text);
  font: inherit; line-height: 1.5;
}
.mtg-block textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.mtg-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px; padding: 0 10px;
}
.mtg-images:empty { display: none; }
.mtg-image {
  position: relative; margin: 0; min-width: 0; aspect-ratio: 16 / 10;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); overflow: hidden;
}
.mtg-image a { display: block; width: 100%; height: 100%; }
.mtg-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mtg-image-del {
  position: absolute; top: 4px; right: 4px; width: 25px; height: 25px;
  border-color: var(--danger); background: var(--surface); color: var(--danger);
}
.mtg-image-actions { display: flex; justify-content: flex-end; padding: 8px 10px 10px; }
.mtg-lesen > .mtg-images { padding: 0 12px 12px; }

/* Lesemodus: der Inhalt als Text, Thema fett. Ein <textarea> kann selbst nichts
   formatieren -- darum diese Fassung, und im Bearbeitungsmodus dafuer nur das
   Textfeld (sonst stuende alles doppelt da). */
.mtg-titelzeile { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; }
.mtg-inhalt {
  padding: 11px 12px;
  font-size: 13.5px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.mtg-thema strong { display: block; }
.mtg-thema > div { color: var(--text-dim); }
.mtg-leer { color: var(--text-faint); font-style: italic; margin: 0; }
.mtg-block-titel { font-weight: 640; color: var(--pj-fg, var(--text)); padding: 3px 6px; }
/* Im Lesemodus hat die Kopfzeile nur den Titel -- keine drei Spalten. */
.mtg-lesen .mtg-block-head { display: block; }

/* #meetingNotes (Notizen/Fragen unter den Themenfeldern) hatte keine eigene
   Regel und blieb darum beim Browser-Standard: weisser Hintergrund, aber
   `color: inherit` (siehe die globale button/input/select/textarea-Zeile) zog
   die helle Textfarbe des Dunkelmodus mit ein -- heller Text auf hellem Grund,
   kaum lesbar. `.mtg-block textarea` daneben hatte genau dieses Problem schon
   einmal, hier fehlte die gleiche Behandlung. */
#meetingNotes {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; line-height: 1.5; resize: vertical;
}
#meetingNotes:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Platzhalter in der Vorschau der Rundmail: markiert die Stelle, an der die
   Anwendung Themenfelder und Notizen einsetzt. */
.mp-slot {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 4px; padding: 1px 7px; font-weight: 600;
}