/* ============================================================
 * Boardly Card-Layer — BoardCard + Labels-Stub + Footer-Stub — Story 0064a / ADR-0030
 *
 * Reverse-engineered aus .project/design/styles.css Zeilen 412-542.
 * Sprint-7-MVP: nur Title + Description sichtbar. Labels/Footer-Pills/
 * Avatars als Slot-CSS vorbereitet, aber Markup im BoardCard rendert sie
 * nicht (Slot-Content leer).
 *
 * Existing-D&D-Klasse .board-card-item bleibt als Alias auf .card —
 * js/board-dnd.js (Story 0046) hat .board-card-item hardcoded.
 *
 * Reihenfolge im HTML (App.razor): tokens.css -> shell.css -> chrome.css
 * -> board.css -> card.css -> pages.css.
 * ============================================================ */

.card,
.board-card-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: var(--density-card-pad);
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: border-color .12s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}

.card:hover,
.board-card-item:hover {
    border-color: var(--line-strong);
}

.card.dragging,
.board-card-item.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.card.drop-target-above {
    box-shadow: 0 -2px 0 var(--accent);
}

.card.drop-target-below {
    box-shadow: 0 2px 0 var(--accent);
}

.card.filter-dim {
    opacity: 0.25;
}

/* ---------- Card-Title ---------- */
.card-title,
.board-card-item h4 {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-wrap: pretty;
    margin: 0;
}

/* ---------- Card-Description-Preview (Sprint-7-MVP rendert das) ---------- */
.card-description,
.board-card-item p {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--ink-3);
    line-height: 1.4;
}

/* ---------- Card-Title-Link (Story 0054 Card-Detail-Page) ---------- */
.card-link,
.board-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--r-2);
    padding: var(--space-1, 0.25rem);
    margin: calc(-1 * var(--space-1, 0.25rem));
}

.card-link:hover,
.board-card-link:hover {
    background: var(--accent-soft);
    cursor: pointer;
}

/* ---------- Labels (Slot vorbereitet — Sprint-7-MVP NICHT gerendert) ---------- */
.card .labels,
.card-labels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.card .label {
    height: 6px;
    width: 28px;
    border-radius: 999px;
}

/* ---------- Card-Meta / Footer (Slot vorbereitet — Sprint-7-MVP NICHT gerendert) ---------- */
.card-meta,
.card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Story 0094 — Faelligkeits-Pill auf der Karten-Face (Zustand via .is-* aus BoardViewPage). */
.card-due-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bg-sunken);
    color: var(--ink-2);
}

.card-due-pill.is-overdue {
    background: color-mix(in oklch, var(--danger) 16%, transparent);
    color: var(--danger);
    font-weight: 600;
}

.card-due-pill.is-soon {
    background: var(--accent-soft);
    color: oklch(48% 0.13 70);
}

.card-due-pill.is-done {
    text-decoration: line-through;
    opacity: 0.6;
}

/* KB1 — Prioritaets-Indikator auf der Board-Karte (farb-codiert je Stufe). */
.card-priority-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.7;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bg-sunken);
    color: var(--ink-2);
}

.card-priority-pill.is-low {
    background: var(--bg-sunken);
    color: var(--ink-3);
}

.card-priority-pill.is-medium {
    background: var(--accent-soft);
    color: oklch(48% 0.13 250);
}

.card-priority-pill.is-high {
    background: var(--accent-soft);
    color: oklch(48% 0.13 70);
}

.card-priority-pill.is-critical {
    background: color-mix(in oklch, var(--danger) 16%, transparent);
    color: var(--danger);
}

/* KB2 — Aktivierungs-Badge ("⏰ aktiv ab {Datum}"). Gedimmt: die Karte ist noch nicht
   "startklar", der CardActivationWorker aktiviert sie erst zum Zeitpunkt. */
.card-activate-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.7;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bg-sunken);
    color: var(--ink-3);
    opacity: 0.75;
}

.card-meta .meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--ink-3);
    font-family: var(--f-mono);
}

.card-meta .meta.danger {
    color: var(--danger);
}

.card-meta .meta.good {
    color: var(--good);
}

.card-meta .sep {
    flex: 1;
}

.card-meta .avatars {
    display: flex;
}

.card-meta .avatars .avatar {
    width: 18px;
    height: 18px;
    margin-left: -4px;
    font-size: 8px;
    border: 1.5px solid var(--surface);
}

/* Card-Footer (Story 0095) — Kommentar-Anzahl + Owner-Avatar im Footer-Slot.
   Baut auf den vorhandenen .card-meta-Tokens auf (.meta, .sep, .avatar). */
.card-comment-count {
    /* Erbt .meta (font-size 11px, --ink-3, Mono). Nur das Emoji minimal heben. */
    line-height: 1.7;
    white-space: nowrap;
}

/* Owner-Avatar (rechts, hinter dem .sep-Spacer). Kleiner als der SubBar-Avatar,
   passt sich der Footer-Hoehe an. Farbe via --avatar-bg (FNV aus BoardViewPage). */
.card-owner-avatar {
    width: 18px;
    height: 18px;
    font-size: 8px;
    font-weight: 700;
    border: 1.5px solid var(--surface);
}

/* Blocked-Badge (Story 0100) — Karte mit eingehender Dependency (blocked-by > 0).
   Erbt .meta (font-size 11px, Mono); rot eingefaerbt als Warn-Signal. */
.card-blocked-badge {
    color: var(--danger);
    white-space: nowrap;
    line-height: 1.7;
}

/* ---------- Card-Actions (Move-Buttons + Move-To-List) ---------- */
.card-actions,
.board-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.card-actions button,
.board-card-actions button,
.card-actions select,
.board-card-actions select {
    height: 24px;
    padding: 0 6px;
    border-radius: var(--r-2);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11px;
    cursor: pointer;
}

.card-actions button:hover:not([disabled]),
.board-card-actions button:hover:not([disabled]) {
    background: var(--bg-sunken);
    color: var(--ink);
    border-color: var(--line-strong);
}

.card-actions button[disabled],
.board-card-actions button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* UI-Restyle: das native <select> "→ Liste…" hat eine intrinsische Breite (laengste Option) und
   sprengte in schmalen (Compact-)Karten den Rand. min-width:0 + flex:1 laesst es schrumpfen;
   box-sizing haelt es innerhalb des Karten-Paddings. Die Move-Buttons behalten ihre Groesse. */
.card-actions,
.board-card-actions {
    flex-wrap: wrap;
}

.card-actions button,
.board-card-actions button {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.board-card-move-list {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

/* Card-Cover (Story 0097) — Cover-Banner ganz oben in der Karte (Trello-Stil).
   Abgerundete Oberkante (passend zur Karten-Border-Radius), fixe Hoehe ~120px, Bild gecroppt.
   Negative Margin zieht den Banner buendig ueber das .card-Padding bis an die Karten-Kante. */
.card-cover {
    display: block;
    height: 120px;
    object-fit: cover;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    margin: calc(-1 * var(--density-card-pad)) calc(-1 * var(--density-card-pad)) 2px;
    width: calc(100% + 2 * var(--density-card-pad));
    background: var(--bg-sunken);
}