/* ============================================================
 * Boardly Modal-Layer — CardDetailModal + ModalOverlay — Story 0064b / ADR-0035
 *
 * Reverse-engineered aus .project/design/styles.css Zeilen 547-682.
 * Sprint-8-MVP: ModalOverlay (Backdrop + Close-on-Outside-Click) +
 * CardDetailModal (Body + Sidebar mit Status/Owner/Due/Estimate/Tags/Activity).
 *
 * Reihenfolge im HTML (App.razor): tokens.css -> shell.css -> chrome.css
 * -> board.css -> card.css -> modal.css -> pages.css.
 * ============================================================ */

/* ---------- Backdrop ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(from var(--ink) l c h / 0.35);
    backdrop-filter: blur(6px);
    z-index: 50;
    display: grid;
    place-items: start center;
    padding: 60px 20px;
    overflow-y: auto;
    animation: boardly-modal-fade-in 0.15s var(--ease);
}

@keyframes boardly-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Modal-Box ---------- */
.modal {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    width: min(820px, 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: boardly-modal-rise 0.2s var(--ease);
}

@keyframes boardly-modal-rise {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: oklch(from var(--surface) l c h / 0.8);
    border: 0;
    border-radius: var(--r-2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.modal-close:hover {
    background: var(--surface);
}

/* ---------- Modal-Body (zwei-Spalten: main + side-panel) ---------- */
.modal-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
    padding: 20px 24px 24px;
}

.modal-body-main {
    min-width: 0;
}

.modal-breadcrumb {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.modal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 2px 0;
    flex: 1;
}

.section-title {
    font-size: 11px;
    font-family: var(--f-mono);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 8px;
}

.desc-box {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    margin-bottom: 8px;
}

/* ---------- Comment-List (Boardly.html .comment) ---------- */
.modal .comment {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.modal .comment:first-child {
    border-top: 0;
}

.modal .comment .body {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.modal .comment .body .head {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 4px;
}

.modal .comment .body .head time {
    color: var(--ink-3);
    font-family: var(--f-mono);
    font-size: 11px;
}

.card-detail-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---------- Side-Panel (Sidebar mit Status/Owner/Due/Estimate/Tags/Activity) ---------- */
.side-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.side-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* KB3 (ADR-0046) — Workflow-Automatik-Vorschlag (Glass-Box) in der Modal-Sidebar. */
.followup-suggestion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--accent-soft);
    border-radius: 8px;
    background: var(--accent-soft);
}

.followup-suggestion .k {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.followup-suggestion .followup-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.followup-suggestion.is-activated {
    background: var(--bg-sunken);
    border-color: transparent;
}

.side-group .k {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.side-group .v {
    font-size: 12.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Sprint-8-MVP Sidebar-Placeholder: dimmed Look. */
.side-group .v.ink-3 {
    color: var(--ink-3);
    font-style: italic;
    font-size: 11.5px;
}

/* Story 0085 — funktionale Sidebar-Inline-States. */
.side-group select.td-input.v,
.side-group input.td-input.v {
    width: 100%;
    font-size: 12.5px;
    padding: 4px 6px;
}

/* Story 0089 — Jira-artiges TagInput (Chips + Typeahead-Dropdown). */
.tag-input {
    position: relative;
    width: 100%;
}

.tag-input-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
}

.tag-input-box:focus-within { border-color: var(--ink-3); }

.tag-input-field {
    flex: 1 1 80px;
    min-width: 80px;
    border: 0;
    outline: 0;
    background: none;
    font-size: 12.5px;
    color: var(--ink);
}

.tag-input-field::placeholder { color: var(--ink-3); }

.tag-input-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tag-input-suggestion,
.tag-input-create {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 12.5px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.tag-input-suggestion:hover,
.tag-input-create:hover { background: var(--surface-2, rgb(0 0 0 / 4%)); }

.tag-input-create {
    color: var(--ink-2);
    border-top: 1px solid var(--line);
    margin-top: 2px;
}

.tag-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tag-color, #64748b);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: #fff;
    background: var(--tag-color, #64748b);
}

.tag-chip-remove {
    border: 0;
    background: none;
    color: #fff;
    opacity: .8;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.tag-chip-remove:hover { opacity: 1; }

/* Tag-CRUD (Story 0092) */
/* Suggestion-Zeile: Vorschlag-Button + Edit/Delete-Affordance (erst beim Hover sichtbar). */
.tag-input-suggestion-row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
}

.tag-input-suggestion-row .tag-input-suggestion { flex: 1 1 auto; }

.tag-input-affordance {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .12s ease;
}

.tag-input-suggestion-row:hover .tag-input-affordance,
.tag-input-suggestion-row:focus-within .tag-input-affordance { opacity: 1; }

.tag-input-edit-btn,
.tag-input-delete-btn {
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.tag-input-edit-btn:hover,
.tag-input-delete-btn:hover {
    background: var(--surface-2, rgb(0 0 0 / 6%));
    color: var(--ink);
}

.tag-input-delete-btn:hover { color: #ef4444; }

/* Story 0092 — Markierung bereits zugewiesener Tags in der Vorschlagsliste. */
.tag-suggestion-check {
    margin-left: 4px;
    color: #22c55e;
    font-size: 11px;
    font-weight: 700;
}

/* Inline-Edit-Form (Rename + Recolor). */
.tag-input-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
}

.tag-input-edit-name {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
    font-size: 12.5px;
    color: var(--ink);
    padding: 4px 6px;
    outline: 0;
}

.tag-input-edit-name:focus-within,
.tag-input-edit-name:focus { border-color: var(--ink-3); }

/* Farb-Swatches (Recolor) — ersetzen das zickige native <input type=color>. */
.tag-input-edit-swatches {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 1px 0;
}

.tag-input-swatch {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch, #64748b);
    cursor: pointer;
    transition: transform .1s ease;
}

.tag-input-swatch:hover { transform: scale(1.12); }

.tag-input-swatch.is-selected {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--surface);
}

/* Save/Cancel ans rechte Ende der umgebrochenen Edit-Zeile. */
.tag-input-edit-save { margin-left: auto; }

.tag-input-edit-save,
.tag-input-edit-cancel {
    flex: 0 0 auto;
    border: 0;
    background: none;
    font-size: 13px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
}

.tag-input-edit-save { color: #22c55e; }
.tag-input-edit-cancel { color: var(--ink-3); }

.tag-input-edit-save:hover,
.tag-input-edit-cancel:hover { background: var(--surface-2, rgb(0 0 0 / 6%)); }

.sidebar-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sidebar-activity-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
}

.sidebar-activity-item .activity-label {
    color: var(--ink);
}

.sidebar-activity-item time {
    font-size: 10.5px;
}

/* ---------- Card-Detail Action-Menu (Sprint-5-Pattern, in Modal eingebaut) ---------- */
.modal .card-detail-actions {
    position: relative;
}

.modal .card-detail-actions[open] .card-detail-actions-content {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px;
    z-index: 10;
    min-width: 180px;
}

.modal .card-detail-actions .card-detail-actions-content {
    display: none;
}

/* ---------- Edit-Form & Comment-Form-Spacing ---------- */
.modal .card-detail-edit-form,
.modal .card-detail-comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

/* Sprint-8-Hotfix: textarea-Default 'resize: both' liess den User die Textarea
   ueber die Body-Spalte hinaus in die Sidebar ziehen. Vertikal-Resize reicht;
   width: 100% + box-sizing zwingen die Textarea in die Grid-Zelle. */
.modal textarea {
    resize: vertical;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    min-height: 80px;
}

.modal .form-actions {
    display: flex;
    gap: 8px;
}

.modal .markdown-help {
    font-size: 11.5px;
    margin: 0;
}

/* Mobile-Fallback (Sprint 9 macht echtes Mobile-Layout) */
@media (max-width: 720px) {
    .modal-body {
        grid-template-columns: 1fr;
    }
    .side-panel {
        order: 2;
    }
}

/* Checklists (Story 0093) */
.card-detail-checklists {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
}

.checklist {
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 10px 12px;
    background: var(--surface-2);
}

.checklist-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.checklist-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.checklist-progress-label {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-3);
}

.checklist-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin-bottom: 8px;
}

.checklist-progress-fill {
    height: 100%;
    background: var(--accent, #3b82f6);
    transition: width 0.2s ease;
}

.checklist-items {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checklist-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}

/* Checkbox auf feste Groesse zwingen — sonst kann sie die Zeile sprengen und den Text
   auf 1ch zusammendruecken (vertikaler Zeichenumbruch). */
.checklist-item-row > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent, #3b82f6);
    cursor: pointer;
}

.checklist-item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checklist-item-text.is-done {
    text-decoration: line-through;
    color: var(--ink-3);
}

/* Kompakte Icon-Buttons fuers Loeschen (Checkliste + Item) statt grosser Text-Buttons. */
.checklist-remove,
.checklist-item-remove {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.checklist-remove:hover,
.checklist-item-remove:hover {
    background: var(--surface-2, rgb(0 0 0 / 6%));
    color: #ef4444;
}

/* Story 0093 (Drag-Reorder) — Drag-Handle + Drop-Ziel-Markierung. */
.checklist-drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1;
    padding: 2px 2px;
    user-select: none;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.checklist-item-row:hover .checklist-drag-handle { opacity: 0.55; }
.checklist-drag-handle:hover { color: var(--ink); opacity: 1; }
.checklist-drag-handle:active { cursor: grabbing; }

/* Drop-Ziel: blaue Oberkante zeigt, wohin einsortiert wird. */
.checklist-item-row.is-drag-over { box-shadow: inset 0 2px 0 0 var(--accent, #3b82f6); }

.checklist-add-item,
.card-detail-add-checklist {
    display: flex;
    gap: 6px;
    align-items: center;
}

.checklist-add-item .td-input,
.card-detail-add-checklist .td-input {
    flex: 1 1 auto;
    min-width: 0;
}

.card-detail-add-checklist {
    margin-top: 8px;
}

/* Attachments (Story 0096) */
.card-detail-attachments {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface-2);
}

.attachment-icon {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}

.attachment-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Dateiname als Link-artiger Button (loest den authentifizierten Download aus). */
.attachment-name {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--accent, #3b82f6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.attachment-name:hover {
    text-decoration: underline;
}

.attachment-meta {
    font-size: 11px;
}

.attachment-remove {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.attachment-remove:hover {
    background: var(--surface-2, rgb(0 0 0 / 6%));
    color: #ef4444;
}

.card-detail-add-attachment {
    margin-top: 8px;
}

/* Native File-Input optisch verstecken — das umgebende <label> ist der sichtbare Button. */
.attachment-upload-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.attachment-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Attachment-Thumbnails (Story 0097) — kleine Bild-Vorschau fuer Bild-Anhaenge (statt 📎),
   plus Cover-Toggle + Markierung des aktiven Covers. */
.attachment-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--r-2, 6px);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

/* Aktiver Cover bekommt einen Accent-Rahmen. */
.attachment.is-cover {
    border-color: var(--accent, #3b82f6);
}

.attachment-cover-toggle {
    align-self: flex-start;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.attachment-cover-toggle:hover {
    text-decoration: underline;
}

.attachment-cover-toggle.is-active {
    color: var(--accent, #3b82f6);
}

/* Dependencies (Story 0100) — zwei Gruppen ("Blockiert von" / "Blockiert") mit Karten-Liste
   + Typeahead-Picker. Stil lehnt sich an die Checklist-/Attachment-Sektion an. */
.card-detail-dependencies {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
}

.dependency-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.dependency-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dependency-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface-2);
}

.dependency-card-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status-Punkt (todo/in-progress/done/blocked) via data-status. */
.dependency-status,
.card-picker-status {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ink-3);
}

.dependency-status[data-status="in-progress"],
.card-picker-status[data-status="in-progress"] {
    background: var(--accent, #3b82f6);
}

.dependency-status[data-status="done"],
.card-picker-status[data-status="done"] {
    background: var(--good, #22c55e);
}

.dependency-status[data-status="blocked"],
.card-picker-status[data-status="blocked"] {
    background: var(--danger, #ef4444);
}

.dependency-remove {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.dependency-remove:hover {
    background: var(--surface-2, rgb(0 0 0 / 6%));
    color: #ef4444;
}

/* Karten-Typeahead (CardPicker, Story 0100) — Suggestion-Dropdown analog TagInput. */
.card-picker {
    position: relative;
}

.card-picker-menu {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.card-picker-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

.card-picker-suggestion:hover {
    background: var(--surface-2);
}

.card-picker-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}