/* BO Tasks – Stylesheet.
   Design-Tokens aus dem Layout-Prototyp (docs/design/design.html):
   Akzent #5b5bd6, Schrift Manrope/JetBrains Mono, weiche Grautöne. */

:root {
    --accent:          #5b5bd6;
    --accent-hover:    #4f4fc9;
    --accent-soft:     #eeeefb;

    --bg:              #f4f5f7;
    --card:            #ffffff;
    --bg-subtle:       #fafbfc;
    --bg-hover:        #f8f9fa;

    --border:          #ebecf0;
    --border-light:    #e3e5e9;

    --text:            #1c1d21;
    --text-secondary:  #3a3d44;
    --muted:           #7c828b;
    --muted-light:     #a3a7ae;

    --error:           #e5484d;

    --radius:          9px;
    --radius-sm:       6px;

    --font:            'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --shadow-card:     0 1px 2px rgba(20, 21, 26, .04);
    --shadow-btn:      0 1px 2px rgba(91, 91, 214, .4);

    /* Dringlichkeitsstufen: Hintergrund / Text / Punkt */
    --u-niedrig-bg: #f1f3f5; --u-niedrig-fg: #54595f; --u-niedrig-dot: #8b94a3;
    --u-mittel-bg:  #fbf3e0; --u-mittel-fg:  #86641a; --u-mittel-dot:  #d99a2b;
    --u-hoch-bg:    #fbeede; --u-hoch-fg:    #9a4a12; --u-hoch-dot:    #e8833a;
    --u-prod-bg:    #fdecec; --u-prod-fg:    #a32c30; --u-prod-dot:    #e5484d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Schmale, zentrierte Seiten (Login, Home) ---------- */

.container {
    max-width: 640px;
    margin: 6vh auto;
    padding: 0 1.25rem;
}

h1 { margin-top: 0; letter-spacing: -.02em; }
.lead { color: var(--muted); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; }

/* ---------- Formular-Grundelemente ---------- */

label { font-weight: 600; }

input, textarea, select {
    font-family: var(--font);
    padding: .6rem .7rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--text);
    background: #fff;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.25rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.card label { margin-top: .5rem; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .55rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
}
.btn:hover { background: var(--accent-hover); }

.btn--ghost {
    background: #fff;
    color: var(--text-secondary);
    border-color: var(--border-light);
    box-shadow: none;
}
.btn--ghost:hover { background: var(--bg-hover); }

/* Entfernen-/Löschen-Aktionen: roter Hintergrundton. */
.btn--danger {
    background: var(--u-prod-bg); color: var(--u-prod-fg); border-color: #f0d4d5;
}
.btn--danger:hover { background: #f9dcdd; color: var(--u-prod-fg); }

button:not(.btn):not(.btn-add):not(.icon-btn):not(.chip-x):not(.tags-trigger):not(.picklist__item):not(.fact-link) {
    margin-top: 1rem;
    padding: .6rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
}
button:not(.btn):not(.btn-add):not(.icon-btn):not(.chip-x):not(.tags-trigger):not(.picklist__item):not(.fact-link):hover { background: var(--accent-hover); }

.error {
    color: var(--u-prod-fg);
    background: var(--u-prod-bg);
    border: 1px solid #f0d4d5;
    border-radius: var(--radius);
    padding: .6rem .8rem;
}

.field-error { color: var(--error); font-size: .8rem; font-weight: 600; margin: 4px 0 0; }

.flash {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid #d9d9f7;
    border-radius: var(--radius);
    padding: .6rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    margin: 0 0 18px;
}

/* ---------- App-Shell (Sidebar + Topbar + Content) ---------- */

.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.app-main { display: flex; flex-direction: column; min-width: 0; }

.sidebar {
    background: var(--bg-subtle);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    gap: 2px;
}
.sidebar__brand {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px 14px; font-weight: 800; font-size: 16px; letter-spacing: -.02em;
}
.sidebar__logo {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: #5b616e;
}
.nav-item:hover { background: #f5f5f7; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item__icon { display: flex; flex: none; }
.nav-item__icon svg { width: 17px; height: 17px; display: block; }
.nav-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item--muted { color: var(--muted-light); cursor: default; }
.nav-item .nav-badge {
    margin-left: auto;
    background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 700;
    border-radius: 9px; padding: 1px 7px;
}
/* Board-Punkt + Privat-Schloss in der Sidebar (analog Prototyp). */
.nav-item--board { font-size: 13px; }
.board-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.nav-item__lock { margin-left: auto; display: flex; flex: none; color: var(--muted-light); }
.nav-item__lock svg { width: 13px; height: 13px; display: block; }
.sidebar__section {
    margin-top: 16px; padding: 4px 9px 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted-light);
}
.sidebar__spacer { flex: 1; }

/* Profilblock unten links (analog Prototyp). */
.sidebar__profile {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; margin-top: 4px; border-top: 1px solid #f0f1f3;
}
.sidebar__profile-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; border-radius: 8px; padding: 3px; }
.sidebar__profile-link:hover { background: #f5f5f7; }
.sidebar__profile.is-active .sidebar__profile-link { background: var(--accent-soft); }
.sidebar__profile-id { line-height: 1.25; overflow: hidden; }
.sidebar__profile-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__profile-role { display: block; font-size: 11px; color: var(--muted-light); text-transform: capitalize; }
.sidebar__profile-logout { margin: 0; }

.topbar {
    display: flex; align-items: center; gap: 14px;
    height: 56px; padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.topbar__title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: 9px; }
.topbar__user-link { display: flex; align-items: center; gap: 9px; color: inherit; border-radius: 8px; padding: 2px 4px; }
.topbar__user-link:hover { background: var(--bg-hover); }
.topbar__user-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.topbar__user-role { font-size: 11px; color: var(--muted-light); }
.logout-btn {
    background: none; border: 0; padding: 4px; margin: 0;
    color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; box-shadow: none;
}
.logout-btn:hover { color: var(--text); background: none; }

.avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: #6366f1; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }

.content { padding: 24px 30px; }
.content--flush { padding: 0; }

/* ---------- Inbox ---------- */

.inbox { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 56px); }

.inbox__list { border-right: 1px solid var(--border); overflow-y: auto; background: #fff; }
.inbox__list-head {
    padding: 16px 16px 10px; border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; gap: 8px;
}
.inbox__list-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.inbox__count { font-size: 12px; color: var(--muted); }

.inbox-row {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.inbox-row:hover { background: var(--bg-hover); }
.inbox-row.is-active { background: var(--accent-soft); }
.inbox-row__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.inbox-row__id { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-light); }
.inbox-row__time { margin-left: auto; font-size: 10.5px; color: #b0b4ba; }
.inbox-row__title {
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    color: var(--text); margin-bottom: 6px;
}
.inbox-row__foot { display: flex; align-items: center; gap: 8px; }
.inbox-row__sender {
    font-size: 11.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-row__foot .badge { margin-left: auto; }

.inbox__empty, .inbox__detail-empty {
    padding: 40px; color: var(--muted-light); font-size: 13.5px; text-align: center;
}

.inbox__detail { overflow-y: auto; padding: 26px 30px; }
.detail__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.detail__id {
    font-family: var(--font-mono); font-size: 11px; color: #9b9fa6;
    background: #f3f4f6; padding: 3px 8px; border-radius: var(--radius-sm);
}
.detail__status {
    font-size: 11px; font-weight: 600; color: var(--accent);
    background: var(--accent-soft); padding: 3px 9px; border-radius: var(--radius-sm);
}
.detail__title {
    margin: 0 0 16px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
}
.detail__facts {
    display: flex; flex-wrap: wrap; gap: 24px;
    padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.detail__fact-label { font-size: 11px; color: var(--muted-light); margin-bottom: 3px; }
.detail__fact-value { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.detail__body { font-size: 14px; line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; }

/* Zweispaltiges Detail-Layout: Inhalt links, Benutzer-Verknüpfungen rechts. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } .detail-side { position: static; } }

.detail__fact--grow { flex: 1 1 240px; min-width: 0; }
.tags-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Kompakter Hinzufügen-Button: hellgrauer Kreis mit dunkelgrauem + (22×22). */
.btn-add {
    width: 22px; height: 22px; border-radius: 50%; flex: none; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: #e9eaee; color: var(--text-secondary);
    cursor: pointer; box-shadow: none; list-style: none;
}
.btn-add:hover { background: #dcdee3; color: var(--text); }
.btn-add svg { width: 13px; height: 13px; }
.btn-add--inline { width: 20px; height: 20px; }
.btn-add--inline svg { width: 12px; height: 12px; }
summary.btn-add::-webkit-details-marker { display: none; }
summary.btn-add::marker { content: ''; }

/* Neutrales Icon-Button (z. B. Verlauf-Sortierung). */
.icon-btn {
    width: 28px; height: 28px; border-radius: 7px; padding: 0; margin: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-light); background: #fff; color: var(--muted); cursor: pointer; box-shadow: none;
}
.icon-btn:hover { border-color: var(--muted-light); color: var(--text-secondary); background: var(--bg-hover); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.is-desc { color: var(--accent); border-color: var(--accent); }
.icon-btn--round { border-radius: 50%; }

/* Titelzeile: Titel + Bearbeiten-Stift. */
.detail__titlebar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.detail__titlebar .detail__title { margin: 0; flex: 0 1 auto; min-width: 0; }
.detail__titlebar .icon-btn { flex: none; margin-top: 2px; margin-left: auto; }
.titlebar__action { flex: none; margin: 0; }
.detail__title-prio { color: var(--muted); font-weight: 700; }

/* Verknüpfte Boards direkt unter dem Titel: einfacher Link mit Board-Icon. */
.detail__boards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; }
.board-link-wrap { display: inline-flex; align-items: center; gap: 4px; }
.board-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.board-link:hover { color: var(--accent); }
.board-link.is-primary { color: var(--accent); }
.board-link svg { width: 15px; height: 15px; flex: none; }
.board-link__vis { font-size: 10px; color: var(--muted); }

/* Kleines ×-Lösch-/Entfernen-Icon (Boards, Abhängigkeiten, Eltern). */
.chip-x {
    width: 18px; height: 18px; border-radius: 50%; flex: none; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: none;
}
.chip-x--danger { background: var(--u-prod-bg); color: var(--u-prod-fg); }
.chip-x--danger:hover { background: #f9dcdd; }

/* Abhängigkeiten in der Sidebar (Vorher/Nachher vertikal gestapelt). */
.dep-group + .dep-group { margin-top: 12px; }
.dep-group .dep-col__title { margin: 0 0 6px; }
.dep-group .inline-pick { margin-top: 8px; }

/* Tags-Auslöser (klickbar → Modal). */
.tags-trigger {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; padding: 2px;
    background: none; border: none; box-shadow: none; font: inherit; color: inherit; text-align: left;
}
.tags-trigger:hover .btn-add { border-color: var(--muted-light); color: var(--text-secondary); background: var(--bg-hover); }

/* Verlauf-Eintrag als ein Block (für Sortier-Umkehr). */
.tl-item { display: flex; flex-direction: column; gap: 10px; }

/* Modal (natives <dialog>). */
.modal { border: none; border-radius: 14px; padding: 0; width: calc(100% - 32px); max-width: 440px; box-shadow: 0 20px 60px rgba(20,21,26,.28); color: var(--text); }
.modal::backdrop { background: rgba(20,21,26,.45); }
.modal__head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal__title { font-size: 15px; font-weight: 700; margin: 0; }
.modal__head .btn-add { margin-left: auto; font-size: 16px; line-height: 1; }
.modal__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.modal__body select, .modal__body input[type="text"], .modal__body input[type="file"] { width: 100%; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.modal .inline-add__form { width: 100%; }

/* Inline-Hinzufügen mit Popover (Board/Tags in der Info-Zeile). */
.inline-add { position: relative; display: inline-flex; }
.inline-add[open] > .btn-add, .inline-add[open] > .tags-summary .btn-add { border-color: var(--accent); color: var(--accent); }
.inline-add__pop {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
    min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(20,21,26,.14); padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.inline-add__pop--wide { min-width: 280px; }
.inline-add__form { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.inline-add__form select { flex: 1; min-width: 0; }
.tagpop-current { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* Tags-Feld: per Klick aufklappbares Menü. */
.tags-details { display: inline-block; }
.tags-summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.tags-summary::-webkit-details-marker { display: none; }
.tags-summary::marker { content: ''; }
.tags-summary:hover .btn-add { border-color: var(--accent); color: var(--accent); }

/* Bucket direkt als Dropdown in der Info-Zeile. */

/* Sidebar-Karten (Beteiligte). */
.side-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.side-card__title { font-size: 13px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.side-card__hint { font-size: 11px; color: var(--muted-light); margin: 0 0 10px; line-height: 1.4; }
.side-card .member-list { max-width: none; }
.side-card .member-row { padding: 6px 0; }
.side-card .member-add { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.side-card .member-add select { flex: 1; min-width: 0; max-width: 100%; }

/* ---------- Dringlichkeits-Badge ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 5px;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge--niedrig { background: var(--u-niedrig-bg); color: var(--u-niedrig-fg); }
.badge--niedrig .badge__dot { background: var(--u-niedrig-dot); }
.badge--mittel { background: var(--u-mittel-bg); color: var(--u-mittel-fg); }
.badge--mittel .badge__dot { background: var(--u-mittel-dot); }
.badge--hoch { background: var(--u-hoch-bg); color: var(--u-hoch-fg); }
.badge--hoch .badge__dot { background: var(--u-hoch-dot); }
.badge--produktionsgefaehrdend { background: var(--u-prod-bg); color: var(--u-prod-fg); }
.badge--produktionsgefaehrdend .badge__dot { background: var(--u-prod-dot); }

/* ---------- Ticket-Formular ---------- */

.form-wrap { max-width: 680px; }
.form-card {
    background: #fff; border: 1px solid var(--border); border-radius: 13px;
    padding: 22px 24px; box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 18px;
}
.form-field { display: flex; flex-direction: column; }
.form-field > label {
    font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px;
}
.form-field .req { color: var(--error); }
.form-field input[type="text"], .form-field textarea {
    width: 100%; border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 11px 13px; font-size: 15px; font-weight: 600; color: var(--text);
}
.form-field textarea { font-size: 14px; font-weight: 400; line-height: 1.6; min-height: 104px; resize: vertical; }
.form-field input.has-error, .form-field textarea.has-error { border-color: var(--error); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.sender-box {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-light); border-radius: var(--radius); padding: 8px 11px;
}
.sender-box__name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.sender-box__sub { font-size: 11px; color: var(--muted-light); }

/* Dringlichkeits-Auswahl (Radiogruppe als Segment-Buttons) */
.urgency-pick { display: flex; gap: 5px; }
.urgency-pick input { position: absolute; opacity: 0; pointer-events: none; }
.urgency-pick label {
    flex: 1; text-align: center; cursor: pointer;
    border: 1px solid var(--border-light); border-radius: 8px;
    padding: 8px 4px; font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.urgency-pick input:checked + label.u-niedrig { border-color: var(--u-niedrig-dot); background: var(--u-niedrig-bg); color: var(--u-niedrig-fg); font-weight: 700; }
.urgency-pick input:checked + label.u-mittel  { border-color: var(--u-mittel-dot);  background: var(--u-mittel-bg);  color: var(--u-mittel-fg);  font-weight: 700; }
.urgency-pick input:checked + label.u-hoch    { border-color: var(--u-hoch-dot);    background: var(--u-hoch-bg);    color: var(--u-hoch-fg);    font-weight: 700; }
.urgency-pick input:checked + label.u-prod    { border-color: var(--u-prod-dot);    background: var(--u-prod-bg);    color: var(--u-prod-fg);    font-weight: 700; }
.urgency-pick label:focus-within { outline: 2px solid var(--accent); }

/* Arbeitstage-Auswahl (Profil): umschaltbare Tages-Pillen. */
.weekday-pick { display: flex; gap: 5px; flex-wrap: wrap; }
.weekday-pick input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-pick label {
    min-width: 46px; text-align: center; cursor: pointer;
    border: 1px solid var(--border-light); border-radius: 8px;
    padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.weekday-pick input:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.weekday-pick label:focus-within { outline: 2px solid var(--accent); }

/* Sichtbarkeit (Intern/Extern-Segment) */
.seg { display: inline-flex; gap: 2px; background: #f3f4f6; padding: 3px; border-radius: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
    cursor: pointer; font-size: 11.5px; font-weight: 500; color: #9b9fa6;
    padding: 4px 11px; border-radius: var(--radius-sm);
}
.seg input:checked + label { background: #fff; color: var(--text-secondary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.form-row { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #f1f2f4; }
.form-hint { font-size: 11px; color: var(--muted-light); }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

/* ---------- Sidebar: Boards ---------- */

.sidebar__section--link { display: block; }
.sidebar__section--link:hover { color: var(--muted); }
.sidebar__section--link.is-active { color: var(--accent); }
.nav-lock { color: var(--muted-light); font-weight: 700; }
.nav-item--add { color: var(--muted); font-weight: 600; }
.nav-item--add:hover { color: var(--accent); background: var(--accent-soft); }

/* ---------- Boards ---------- */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.page-head__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.page-head__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.page-head__actions form { margin: 0; }

.vis-tag {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px;
    background: var(--accent-soft); color: var(--accent);
}
.vis-tag--private { background: #f1f3f5; color: var(--muted); }
.closed-tag {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px;
    background: var(--u-prod-bg); color: var(--u-prod-fg);
}

.board-empty { color: var(--muted-light); font-size: 13.5px; }

.board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.board-card {
    display: block; background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 18px; box-shadow: var(--shadow-card);
}
.board-card:hover { border-color: var(--border-light); background: var(--bg-hover); }
.board-card.is-closed { opacity: .65; }
.board-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.board-card__name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.board-card__head .vis-tag { margin-left: auto; }
.board-card__meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }

.board-desc {
    font-size: 14px; line-height: 1.65; color: var(--text-secondary);
    white-space: pre-wrap; margin-bottom: 22px;
}

.board-section { border-top: 1px solid var(--border); padding-top: 20px; }
/* Direkt auf die Faktenzeile folgender Abschnitt: deren untere Trennlinie reicht
   (keine doppelte Linie). */
.detail__facts + .board-section { border-top: none; padding-top: 0; }
.board-section__title { font-size: 14px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-section__count { font-size: 11.5px; font-weight: 600; color: var(--muted); background: #f3f4f6; padding: 1px 8px; border-radius: 9px; }
/* Kombinierter Titel „Subtasks / Elternaufgabe". */
.seg-title__part { display: inline-flex; align-items: center; gap: 6px; }
.seg-title__sep { color: var(--muted-light); font-weight: 400; }

.member-list { display: flex; flex-direction: column; gap: 2px; max-width: 720px; }
.member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid #f3f4f6;
}
.member-row__id { min-width: 0; }
.member-row__name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.member-row__mail { font-size: 11px; color: var(--muted-light); }
.member-row__role { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.member-row__form { margin: 0; display: flex; align-items: center; gap: 6px; }
.member-row__form:first-of-type { margin-left: auto; }
.member-row select { padding: .35rem .5rem; font-size: 12px; }

.member-add {
    margin: 16px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    max-width: 720px; padding-top: 14px; border-top: 1px solid #f1f2f4;
}
.member-add select { padding: .45rem .6rem; font-size: 13px; }

.btn--sm { padding: .35rem .6rem; font-size: 12px; box-shadow: none; }
.btn--danger { background: var(--error); box-shadow: none; }
.btn--danger:hover { background: #cf3f44; }

/* ---------- Triage (Inbox-Detail) ---------- */

.triage {
    margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.triage__reject { margin: 0; display: flex; align-items: center; gap: 8px; }
.triage__reject input[type="text"] { font-size: 13px; padding: .5rem .7rem; min-width: 220px; }

/* ---------- Qualifizieren / Aufgaben-Detail ---------- */

.qualify-ticket {
    background: #fff; border: 1px solid var(--border); border-radius: 13px;
    padding: 18px 22px; box-shadow: var(--shadow-card);
}
.qualify-ticket .detail__title { font-size: 18px; margin-bottom: 10px; }
.qualify-ticket .detail__body { font-size: 13.5px; }
.form-field select { width: 100%; font-size: 14px; }

.reject-note {
    background: var(--u-prod-bg); color: var(--u-prod-fg); border: 1px solid #f0d4d5;
    border-radius: var(--radius); padding: .7rem .9rem; font-size: 13px; margin-bottom: 6px;
}

.entry-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.seg--tlfilter { margin-bottom: 14px; }
.entry-list.is-log-hidden .tl-item--log { display: none; }
.entry { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; }
.entry__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 11.5px; }
.entry__author { font-weight: 700; color: var(--text); }
.entry__type { color: var(--muted); }
.entry__vis {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 5px;
    background: #f1f3f5; color: var(--muted);
}
.entry__time { margin-left: auto; color: var(--muted-light); }
.entry__body { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; }

/* Antworten (zweite Ebene) eingerückt unter dem Eltern-Kommentar. */
.entry-replies {
    max-width: 760px; margin: 8px 0 4px 26px; padding-left: 14px;
    border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px;
}
.entry--reply { background: var(--bg-subtle); }
.entry-reply { font-size: 12.5px; }
.entry-reply > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.entry-reply > summary::-webkit-details-marker { display: none; }
.entry-reply[open] > summary { margin-bottom: 8px; }
.comment-form--reply { margin-bottom: 0; }
.comment-form--reply textarea { min-height: 56px; }

/* Verlauf-Ereignisse (Anlage, Bucket-Wechsel …) – abgeleitet, nicht editierbar. */
.timeline-event {
    display: flex; align-items: center; gap: 8px; max-width: 760px;
    font-size: 12.5px; color: var(--muted); padding: 2px 2px;
}
.timeline-event__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-light); flex: none; }
.timeline-event strong { color: var(--text-secondary); font-weight: 600; }
.timeline-event .entry__time { margin-left: auto; }

/* ---------- Board: Bucket-/Kanban-Ansicht ---------- */

.content--board { padding-bottom: 30px; }

.kanban {
    display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px;
    align-items: stretch;
}
/* Spalten füllen die gesamte Reihenhöhe (align-items: stretch) und sind als
   Flex-Spalte aufgebaut, damit der leere Bereich die ganze Höhe als Drop-Zone
   abdeckt – unabhängig von der Zahl der Karten (Sitzung 2026-06-25). */
.kanban-col { display: flex; flex-direction: column; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-height: 220px; }
.kanban-col__head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.kanban-col__title { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.kanban-col__count { font-size: 11px; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 0 7px; }
.kanban-col__empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted-light); font-size: 13px; padding: 10px 0; margin: 0; }
.kanban-col.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }

.kcard {
    background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--muted-light);
    border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; box-shadow: var(--shadow-card);
}
.kcard--niedrig { border-left-color: var(--u-niedrig-dot); }
.kcard--mittel  { border-left-color: var(--u-mittel-dot); }
.kcard--hoch    { border-left-color: var(--u-hoch-dot); }
.kcard--produktionsgefaehrdend { border-left-color: var(--u-prod-dot); }
/* Ziehbare Elemente zeigen die offene Hand; während des Ziehens die geschlossene
   Hand – global, damit der Cursor auch über Drop-Zonen „grabbing" bleibt. */
.kcard[draggable="true"], .week-bar[draggable="true"] { cursor: grab; }
.kcard.dragging, .week-bar.dragging { cursor: grabbing; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.kcard__main { display: block; }
.kcard__main:hover .kcard__title { color: var(--accent); }
.kcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kcard__id { font-family: var(--font-mono); font-size: 10px; color: var(--muted-light); }
.kcard__top .badge { margin-left: auto; }
.kcard__title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }
.kcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.kcard__chip { font-size: 10.5px; font-weight: 600; color: var(--muted); background: #f1f3f5; border-radius: 5px; padding: 1px 6px; }
.kcard__due { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.kcard__due.is-overdue { color: var(--u-prod-fg); }
.kcard__move { display: flex; gap: 4px; margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.kcard__move select { flex: 1; padding: .25rem .4rem; font-size: 11.5px; }
.kcard__move-btn {
    margin: 0; padding: 0 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    background: #fff; color: var(--text-secondary); font-size: 13px; cursor: pointer; box-shadow: none;
}
.kcard__move-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* Karten-Look am Prototyp (docs/design): Dringlichkeitspunkt + Titel, Tag-Chips,
   Fußzeile mit Fälligkeit (Icon), Subtask-Häkchen, Bearbeiter-Avataren. */
.kanban-col__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kcard__head { display: flex; align-items: flex-start; gap: 8px; }
.kcard__udot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted-light); }
.kcard__udot--niedrig { background: var(--u-niedrig-dot); }
.kcard__udot--mittel  { background: var(--u-mittel-dot); }
.kcard__udot--hoch    { background: var(--u-hoch-dot); }
.kcard__udot--produktionsgefaehrdend { background: var(--u-prod-dot); }
.kcard__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.kcard__subtag { font-size: 10px; font-weight: 600; color: var(--muted); background: #f1f3f5; padding: 2px 7px; border-radius: 5px; width: fit-content; margin-top: 2px; }
.kcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.kcard__board { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; min-width: 0; }
.kcard__board .board-dot { width: 7px; height: 7px; border-radius: 3px; flex: none; }
.kcard__due { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--muted); }
.kcard__due svg { width: 12px; height: 12px; }
.kcard__due.is-overdue { color: var(--u-prod-fg); }
.kcard__sub { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.kcard__sub svg { width: 12px; height: 12px; }
.kcard__effort { color: var(--muted-light); font-weight: 500; }
/* Sortier-Steuerung im Board-Kopf (persönlich, pro Board). */
.board-sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.board-sort__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.board-sort select { padding: .35rem .5rem; font-size: 12.5px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
/* Priorität als Zahl-Präfix im Titel (z. B. „5: …"); Höhe spiegelt sich zusätzlich
   in der linken Kartenkante wider (rot = hoch … grün = niedrig/keine, inline gesetzt). */
.kcard__pnum { color: var(--muted); font-weight: 700; }
/* Überfällige Karten (Fälligkeit in der Vergangenheit): zarter roter Hintergrund,
   Textfarbe bleibt unverändert. */
.kcard.is-past { background: #f3e4e4; }
.kcard__avatars { margin-left: auto; display: flex; align-items: center; }
.kavatar {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; color: #fff; border: 2px solid #fff; margin-left: -6px;
    background: var(--muted-light);
}
.kavatar:first-child { margin-left: 0; }
.kavatar--more { background: #eef0f3; color: var(--muted); }
.kcard__main:hover .kcard__title { color: var(--accent); }

/* „Meine Aufgaben": Karte ist selbst der Link (Planner-Spalten). */
a.kcard { display: flex; flex-direction: column; gap: 9px; text-decoration: none; }

/* Projekt-Filter (Meine Aufgaben) – Toggle-Chips, client-seitig. */
.proj-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.proj-filter__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.proj-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0;
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; box-shadow: none;
}
.proj-toggle .board-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.proj-toggle.is-off { color: var(--muted-light); background: var(--bg-subtle); text-decoration: line-through; }
.proj-toggle.is-off .board-dot { opacity: .35; }

.bucket-move { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bucket-move select { padding: .4rem .6rem; font-size: 13px; }

.comment-form { max-width: 760px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.comment-form textarea {
    width: 100%; border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 10px 12px; font-size: 14px; line-height: 1.6; min-height: 80px; resize: vertical;
}
.comment-form__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry--hidden { background: var(--bg-subtle); }
.entry__hidden { font-size: 12.5px; font-style: italic; color: var(--muted); }

/* ---------- Meine Aufgaben ---------- */

.mine-group { margin-bottom: 22px; }
.mine-group__title { font-size: 13px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.mine-list { display: flex; flex-direction: column; gap: 7px; }
.mine-row {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--muted-light);
    border-radius: 9px; padding: 10px 14px; box-shadow: var(--shadow-card);
}
.mine-row:hover { background: var(--bg-hover); }
.mine-row__id { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-light); flex: none; width: 64px; }
.mine-row__title { font-size: 13.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.mine-row__sub { font-size: 10px; font-weight: 600; color: var(--muted); background: #f1f3f5; border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
.mine-row__board { font-size: 11.5px; color: var(--muted); flex: none; }
.mine-row__due { font-size: 11px; font-weight: 600; color: var(--muted); flex: none; width: 78px; text-align: right; }
.mine-row__due.is-overdue { color: var(--u-prod-fg); }

/* ---------- Subtasks ---------- */

/* Inline-Auswahl (Eltern-Aufgabe / Abhängigkeit hinzufügen). */
.inline-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.inline-pick label { font-size: 12px; font-weight: 600; color: var(--muted); }
.inline-pick select { font-size: 13px; padding: .45rem .6rem; max-width: 320px; }

/* Vorher/Nachher (Abhängigkeiten) – Titel + Zeile mit Entfernen-Icon. */
.dep-col__title { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.dep-item { display: flex; align-items: center; gap: 6px; }
.dep-item .linkrow { flex: 1; min-width: 0; }
.dep-rm { margin: 0; flex: none; }

/* Verknüpfungs-Zeile (Abhängigkeiten/Eltern): Ticket-ID als kleine Dachzeile,
   darunter der Titel mit dem meisten Platz. */
.linkrow {
    display: flex; flex-direction: column; gap: 1px; min-width: 0; text-decoration: none;
    background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--muted-light);
    border-radius: 8px; padding: 6px 10px;
}
.linkrow:hover { background: var(--bg-hover); }
.linkrow__id { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-light); line-height: 1.2; letter-spacing: .02em; }
.linkrow__title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswahlliste im Modal (z. B. Abhängigkeit hinzufügen) – klickbare Zeilen statt Dropdown. */
.picklist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.picklist form { margin: 0; }
.picklist__item {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
    cursor: pointer; box-shadow: none; margin: 0; color: var(--text);
}
.picklist__item:hover { background: var(--bg-hover); border-color: var(--muted-light); }
.picklist__item.is-current { border-color: var(--accent); background: var(--accent-soft); }
.picklist__id { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-light); line-height: 1.2; }
.picklist__title { font-size: 13px; font-weight: 600; line-height: 1.3; }

/* Klickbarer Faktenwert (z. B. Bucket) – sieht aus wie ein Link, öffnet ein Modal. */
.fact-link {
    margin: 0; padding: 0; border: none; background: none; box-shadow: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
    cursor: pointer; text-align: left;
}
.fact-link:hover { text-decoration: underline; }

.subtask-list { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.subtask-row {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--muted-light);
    border-radius: 8px; padding: 8px 12px;
}
.subtask-row:hover { background: var(--bg-hover); }
.subtask-row__check {
    width: 18px; height: 18px; border-radius: 5px; flex: none;
    border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #fff;
}
.subtask-row__check.is-done { background: #2f9e6f; border-color: #2f9e6f; }
.subtask-row__id { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-light); flex: none; width: 58px; }
.subtask-row__title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtask-row__bucket { font-size: 11px; color: var(--muted); flex: none; }

.subtask-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; max-width: 760px; flex-wrap: wrap; }
.subtask-add input[type="text"] { flex: 1; min-width: 200px; font-size: 13px; padding: .5rem .7rem; }
.subtask-add select { font-size: 13px; padding: .5rem .6rem; }

/* ---------- Tags ---------- */

.tags-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tags-row__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f1f3f5; border: 1px solid var(--border-light); border-radius: 20px;
    padding: 2px 9px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}
.tag-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tag-chip__x {
    margin: 0 0 0 1px; padding: 0 2px; border: 0; background: none; box-shadow: none;
    color: var(--u-prod-fg); font-size: 14px; line-height: 1; cursor: pointer;
}
.tag-chip__x:hover { color: var(--error); background: none; }
.tag-chip--mini { padding: 1px 7px; font-size: 10px; border-radius: 5px; }

.tag-assign { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tag-assign select { font-size: 12px; padding: .3rem .5rem; }
.tag-create { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.tag-create input[type="text"] { font-size: 13px; padding: .45rem .6rem; min-width: 180px; }
.tag-create input[type="color"] { width: 36px; height: 34px; padding: 2px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: #fff; }
.tag-create__global { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

.kcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

/* ---------- Filterleiste ---------- */

.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-bar select { font-size: 12.5px; padding: .4rem .6rem; }

/* ---------- Gantt ---------- */

.gantt { display: flex; flex-direction: column; gap: 4px; }
.gantt-row { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: center; }
.gantt-row__label { font-size: 12.5px; min-width: 0; }
.gantt-row__label a { font-weight: 600; }
.gantt-row__label a:hover { color: var(--accent); }
.gantt-row__id { font-family: var(--font-mono); font-size: 10px; color: var(--muted-light); }
.gantt-row__dates { font-size: 10.5px; color: var(--muted); }
.gantt-warn { font-size: 10.5px; font-weight: 700; color: var(--u-prod-fg); margin-left: 6px; }
.gantt-row__track { position: relative; height: 22px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.gantt-row__nodate { position: absolute; left: 8px; top: 3px; font-size: 10.5px; color: var(--muted-light); }
.gantt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--muted-light); min-width: 6px; }
.gantt-bar--niedrig { background: var(--u-niedrig-dot); }
.gantt-bar--mittel  { background: var(--u-mittel-dot); }
.gantt-bar--hoch    { background: var(--u-hoch-dot); }
.gantt-bar--produktionsgefaehrdend { background: var(--u-prod-dot); }
.gantt-deps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px 8px; margin-bottom: 4px; border-bottom: 1px dashed #eceef1; }
.gantt-deps__label { font-size: 11px; color: var(--muted); }
.dep-chip { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 10.5px; background: #f1f3f5; border-radius: 5px; padding: 1px 6px; }
.dep-chip.is-violation { background: var(--u-prod-bg); color: var(--u-prod-fg); }
.dep-add { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.dep-add select { font-size: 11.5px; padding: .25rem .4rem; max-width: 220px; }

/* ---------- Wochenansicht ---------- */

/* Segmentierter Umschalter Woche/Buckets (analog Prototyp). */
.seg--nav { gap: 2px; background: #f3f4f6; padding: 3px; border-radius: 9px; }
.seg--nav a { padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); border-radius: 7px; }
.seg--nav a:hover { color: var(--text-secondary); }
.seg--nav a.is-active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: start; }
.week--rolling { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.week-col { border: 1px solid transparent; border-radius: 12px; padding: 12px 11px; min-height: 340px; }
.week-col.is-today { background: #fbfbff; border-color: #dcdcf7; }
.week-col.is-nonwork { background: repeating-linear-gradient(45deg, transparent, transparent 7px, #fafbfc 7px, #fafbfc 14px); }
.week-col__head { margin-bottom: 12px; }
.week-col__top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; }
.week-col__name { font-size: 12px; font-weight: 700; color: var(--muted); }
.week-col.is-today .week-col__name, .week-col.is-today .week-col__date { color: var(--accent); }
.week-col.is-nonwork .week-col__name, .week-col.is-nonwork .week-col__date { color: var(--muted-light); }
.week-col__date { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.week-col__today { margin-left: auto; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 6px; }
.week-col__cap { display: flex; align-items: center; gap: 7px; }
.week-col__bar { flex: 1; height: 5px; background: #eceef1; border-radius: 3px; overflow: hidden; }
.week-col__fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.week-col__fill.is-over { background: var(--u-hoch-dot); }
.week-col__caplabel { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--muted-light); white-space: nowrap; }
.week-col__caplabel.is-over { color: #c2410c; }
.week-col__overload {
    display: flex; align-items: center; gap: 5px; margin-top: 9px;
    font-size: 10.5px; font-weight: 600; color: #c2410c; background: var(--u-hoch-bg);
    padding: 4px 7px; border-radius: 6px;
}
.week-col__overload svg { width: 12px; height: 12px; flex: none; }
.week-col__body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.week-col.drag-over .week-col__body { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
.week-block {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
    border-left: 3px solid var(--muted-light); border-radius: 8px; padding: 9px 10px; cursor: grab;
    box-shadow: 0 1px 2px rgba(20,21,26,.04);
}
.week-block:hover { background: var(--bg-hover); }
.week-block.kcard--niedrig { border-left-color: var(--u-niedrig-dot); }
.week-block.kcard--mittel  { border-left-color: var(--u-mittel-dot); }
.week-block.kcard--hoch    { border-left-color: var(--u-hoch-dot); }
.week-block.kcard--produktionsgefaehrdend { border-left-color: var(--u-prod-dot); }
.week-block__title { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text); }
.week-block__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.week-block__board { display: flex; align-items: center; gap: 5px; min-width: 0; }
.week-block__board .board-dot { width: 6px; height: 6px; border-radius: 2px; }
.week-block__boardname { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-block__hours { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--muted); }
.week-block.dragging { opacity: .5; }

/* Wochenansicht als Leisten (Sitzung 2026-06-25): Kopfzeile mit Kapazität je
   Tag, darunter ein Spaltenraster, in dem jede Aufgabe als durchgehende Leiste
   über ihren Zeitraum liegt. */
.week-head { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 8px; }
.week-head .week-col { min-height: auto; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.week-head .week-col.is-today { background: #fbfbff; border-color: #dcdcf7; }
.week-head .week-col.is-nonwork { background: repeating-linear-gradient(45deg, transparent, transparent 7px, #fafbfc 7px, #fafbfc 14px); }
.weeklanes { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 6px 12px; grid-auto-rows: minmax(34px, auto); }
.weeklanes__cell { z-index: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); min-height: 40px; }
.weeklanes__cell.is-today { background: #fbfbff; border-color: #dcdcf7; }
.weeklanes__cell.is-nonwork { background: repeating-linear-gradient(45deg, transparent, transparent 7px, #fafbfc 7px, #fafbfc 14px); }
.weeklanes__cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -3px; }
.weeklanes__empty { align-self: center; color: var(--muted-light); font-size: 13px; }
.week-bar {
    z-index: 2; align-self: center; display: flex; align-items: center; gap: 8px; min-width: 0;
    background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--muted-light);
    border-radius: 8px; padding: 6px 10px; margin: 3px 0; text-decoration: none; box-shadow: var(--shadow-card);
}
.week-bar:hover { background: var(--bg-hover); }
.week-bar.kcard--niedrig { border-left-color: var(--u-niedrig-dot); }
.week-bar.kcard--mittel  { border-left-color: var(--u-mittel-dot); }
.week-bar.kcard--hoch    { border-left-color: var(--u-hoch-dot); }
.week-bar.kcard--produktionsgefaehrdend { border-left-color: var(--u-prod-dot); }
/* Überfällige Leisten (Fälligkeit in der Vergangenheit): zarter roter Hintergrund. */
.week-bar.is-past { background: #f3e4e4; }
.week-bar.is-past:hover { background: #efd9d9; }
.week-bar .board-dot { width: 7px; height: 7px; border-radius: 3px; flex: none; }
.week-bar__title { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-bar__hours { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--muted); flex: none; }
.week-bar.dragging { opacity: .5; }

/* Bild-Anhänge: Vorschau-Thumbnails + Lightbox (Sitzung 2026-06-25). */
.attach-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.attach-thumb { display: block; width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--bg-subtle); }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15, 18, 24, .82); cursor: zoom-out; padding: 28px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }

/* Abschluss-Banner im Aufgaben-Detail (Sitzung 2026-06-25). */
.complete-banner { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; padding: 8px 12px; border-radius: 9px; background: #eafaf2; border: 1px solid #b7e6cf; }
.complete-banner__text { font-size: 13px; font-weight: 600; color: #0a7d54; }
.complete-banner form { margin-left: auto; }

/* ---------- Anhänge ---------- */

.attach-list { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.attach-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f3f4f6; }
.attach-row__name { font-size: 13px; font-weight: 600; color: var(--accent); }
.attach-row__name:hover { text-decoration: underline; }
.attach-row__meta { font-size: 11px; color: var(--muted); margin-left: auto; }
.attach-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.attach-add input[type="file"] { font-size: 12.5px; }

/* ---------- Audit-Tabelle ---------- */

.audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.audit-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.audit-table td { padding: 7px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.audit-table__time { color: var(--muted); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }
.audit-action { font-family: var(--font-mono); font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 5px; }
.audit-table__diff { font-size: 11.5px; }
.audit-old { color: var(--u-prod-fg); }
.audit-new { color: #2f9e6f; }

/* ---------- Benachrichtigungen ---------- */

.bell { position: relative; display: inline-flex; text-decoration: none; line-height: 1; padding: 4px; color: var(--muted); }
.bell:hover { color: var(--text-secondary); }
.bell svg { width: 19px; height: 19px; display: block; }
.bell__dot {
    position: absolute; top: 1px; right: 2px; width: 8px; height: 8px;
    background: var(--error); border-radius: 50%; border: 1.5px solid #fff;
}
.bell__count {
    position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--error); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-list { display: flex; flex-direction: column; gap: 4px; }
.notif { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; }
.notif.is-unread { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.notif__urgent { color: var(--u-prod-dot); font-size: 12px; }
.notif__body { flex: 1; min-width: 0; font-size: 13px; }
.notif__trigger { font-weight: 700; }
.notif__body a { color: var(--accent); font-weight: 600; }
.notif__time { font-size: 11px; color: var(--muted-light); margin-top: 2px; }

.pref-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pref-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); font-size: 11.5px; color: var(--muted); }
.pref-table th:not(:first-child), .pref-table__cell { text-align: center; width: 90px; }
.pref-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }

/* ---------- Benutzerverwaltung ---------- */

.user-create {
    display: grid; grid-template-columns: 1.4fr 1.6fr .9fr 1.2fr auto; gap: 12px; align-items: end;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow-card); margin-bottom: 8px;
}
.user-create .form-field { margin: 0; }
.user-rowhead, .user-row { display: grid; grid-template-columns: 1fr 130px 50px 64px 130px 96px; gap: 10px; align-items: center; }
.user-rowhead { padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-light); }
.user-row { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; box-shadow: var(--shadow-card); }
.user-row.is-inactive { opacity: .55; }
.user-row__name { font-size: 13px; font-weight: 600; }
.user-row__mail { font-size: 11px; color: var(--muted-light); }
.user-row select, .user-row__cap, .user-row__pw { font-size: 12.5px; padding: .35rem .5rem; width: 100%; }