/**
 * spielleitung.css — Styles speziell für die Spielleitung-Ansicht.
 *
 * Foundation kommt aus frontend.css (Akkordeon, Buttons, Lese-Cards).
 * Voting-Anzeige aus voting.css.
 *
 * Bereinigungen (TODO 3.2 Punkt 23, 26):
 *   - Doppel-Title "Spielfortschritt" raus
 *   - Akt-freischalten-Button: sauberer Fokus-Style statt Browser-Default
 *   - Crème-Texte auf hellen Hintergründen vermeiden (Punkt 22)
 */

.kd-spielleitung { padding-bottom: 60px; }

/* =========================================================================
   Rollenübersicht — Tabelle (dunkles Plattform-Design)
   Spalten: Rolle | Spieler | Status | Link | Bearbeiten
   Zwei Sektionen: aktive Rollen oben, nicht-ausgewählte darunter ausgegraut.
   ========================================================================= */
.kd-roles-section-head {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    color: var(--jm-gold);
    letter-spacing: var(--ls-standard);
    text-transform: uppercase;
    margin: 18px 0 8px;
}
.kd-roles-section-head:first-child { margin-top: 0; }
.kd-roles-section-inactive {
    color: var(--cream-dim);
    margin-top: 28px;
}
.kd-roles-table-inactive {
    opacity: 0.55;
}
.kd-roles-table-inactive tbody tr.kd-role-row:hover td {
    background: transparent;
}

.kd-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    color: var(--jm-cream);
}
.kd-roles-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-dim);
    border-bottom: 1px solid var(--gold-edge);
    background: transparent;
}
.kd-roles-table tbody td {
    padding: 14px;
    border-bottom: 1px solid rgba(217,164,65,0.12);
    vertical-align: middle;
    font-size: 0.95rem;
}
.kd-roles-table tbody tr.kd-role-row:hover td {
    background: var(--gold-soft);
}
.kd-roles-table .kd-col-rolle { font-weight: 600; }
.kd-roles-table .kd-col-spieler { color: var(--jm-cream); }
.kd-empty-cell { color: var(--cream-dim); }

/* Pflichtrolle ohne Spielername — fällt in der „Nicht ausgewählt"-Tabelle
   visuell auf, damit der Spielleiter sieht, dass er hier nachpflegen muss.
   Die inactive-Tabelle hat opacity:0.55 — Gold + bold + leichter Hintergrund
   reichen aus, um trotzdem klar zu signalisieren. */
.kd-role-required-missing {
    display: inline-block;
    padding: 3px 8px;
    background: var(--gold-soft);
    border: 1px solid var(--gold-edge);
    border-radius: var(--kd-radius-xs);
    color: var(--jm-gold);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Status-Punkt */
.kd-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: rgba(243,235,219,0.25);
}
.kd-status-dot.online { background: var(--jm-success); box-shadow: 0 0 6px rgba(74,222,128,0.5); }
.kd-status-dot.idle   { background: rgba(243,235,219,0.35); }
.kd-status-text       { vertical-align: middle; font-size: 0.9rem; }
.kd-status-text.online { color: var(--jm-success); font-weight: 600; }
.kd-status-text.idle   { color: var(--cream-dim); }
.kd-status-text.unknown { color: var(--cream-dim); }

/* Button-Variante für Tabellenzellen — kompakter als Standard kd-btn */
.kd-btn-cell {
    padding: 7px 14px;
    font-size: 0.78rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* Inline-Edit-Zeile (eingeklappt unter der Rolle-Zeile) */
.kd-role-edit-row[hidden] { display: none; }
.kd-role-edit-row td {
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid var(--gold-edge);
    padding: 18px;
}
.kd-role-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}
.kd-role-edit-row .kd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kd-role-edit-row label {
    font-size: 0.78rem;
    color: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.kd-role-edit-row input[type="text"],
.kd-role-edit-row input[type="email"] {
    padding: 9px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--gold-edge);
    border-radius: 6px;
    color: var(--jm-cream);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
.kd-role-edit-row input:focus {
    outline: 2px solid var(--jm-gold);
    outline-offset: -2px;
    border-color: var(--jm-gold);
}
.kd-role-edit-status {
    font-size: 0.85rem;
    min-height: 1.2em;
    margin-top: 8px;
}
.kd-role-edit-status.success { color: var(--jm-success); }
.kd-role-edit-status.error   { color: var(--jm-danger); }

/* Mobile: Tabelle umbrechen */
@media (max-width: 700px) {
    .kd-roles-table thead { display: none; }
    .kd-roles-table tbody tr.kd-role-row {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--gold-edge);
    }
    .kd-roles-table tbody tr.kd-role-row td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: none;
        gap: 12px;
    }
    .kd-roles-table tbody tr.kd-role-row td::before {
        content: attr(data-label);
        color: var(--gold-dim);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .kd-role-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Akt-Wechsel-Confirm (Inline)
   ========================================================================= */
.kd-act-confirm[hidden] { display: none; }

/* =========================================================================
   Hinweise — Spielleiter-Sicht im Plattform-Design (dunkel, Gold-Akzente)
   Ausstehende als Karten mit Approve/Reject, Freigegebene einzeilig.
   ========================================================================= */
.kd-hint-section-head {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    color: var(--jm-gold);
    letter-spacing: var(--ls-standard);
    text-transform: uppercase;
    margin: 0 0 10px;
}
.kd-hint-section-approved { margin-top: 22px; }

.kd-hint-pending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 6px;
}
.kd-hint-pending {
    background: var(--gold-soft);
    border: 1px solid var(--gold-edge);
    border-left: 3px solid var(--jm-gold);
    border-radius: var(--kd-radius-sm);
    padding: 14px 16px;
}
.kd-hint-pending-meta {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 6px;
}
.kd-hint-pending-text {
    color: var(--jm-cream);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 12px;
}
.kd-hint-pending-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Danger-Variante des Buttons — für "Ablehnen". Basis bleibt kd-btn-ghost. */
.kd-btn-danger {
    color: var(--jm-danger);
    border-color: rgba(239,68,68,0.4);
}
.kd-btn-danger:hover {
    background: rgba(239,68,68,0.12);
    border-color: var(--jm-danger);
    color: var(--jm-danger);
}

/* =========================================================================
   Voting-Status-Tabelle (Spielleiter-Sicht während Finale Anklage)
   Spalten dynamisch pro aktivierte Anklage-Zeile.
   Nur "abgestimmt / offen" pro Spieler/Frage — KEIN Inhalt (Spoiler-Schutz)
   ========================================================================= */
.kd-voting-status-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    color: var(--jm-cream);
}
.kd-voting-status-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-dim);
    border-bottom: 1px solid var(--gold-edge);
}
.kd-voting-status-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(217,164,65,0.12);
    vertical-align: middle;
    font-size: 0.95rem;
}
.kd-voting-status-table tbody tr:hover td {
    background: var(--gold-soft);
}
.kd-vs-rolle   { font-weight: 600; }
.kd-vs-spieler { color: var(--cream-dim); }

.kd-vs-status {
    text-align: center;
    width: 60px;
}
.kd-vs-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}
.kd-vs-status.done .kd-vs-dot {
    background: var(--jm-success);
    box-shadow: 0 0 8px rgba(74,222,128,0.5);
}
.kd-vs-status.open .kd-vs-dot {
    background: rgba(243,235,219,0.25);
    border: 1px solid var(--gold-edge);
}

/* Screen-Reader-Hilfstext, visuell unsichtbar */
.kd-voting-status-table .screen-reader-text {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mobile: Tabelle umbrechen */
@media (max-width: 700px) {
    .kd-voting-status-table thead { display: none; }
    .kd-voting-status-table tbody tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--gold-edge);
    }
    .kd-voting-status-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
        gap: 12px;
    }
    .kd-voting-status-table tbody td.kd-vs-status {
        width: auto;
        justify-content: flex-end;
    }
    .kd-voting-status-table .screen-reader-text {
        position: static !important;
        width: auto;
        height: auto;
        color: var(--cream-dim);
        font-size: 0.85rem;
    }
    .kd-voting-status-table tbody td.kd-vs-status::before {
        content: attr(data-label);
        color: var(--gold-dim);
        font-size: 0.75rem;
        text-transform: uppercase;
    }
}

/* =========================================================================
   Empty States
   ========================================================================= */
.kd-empty-state {
    padding: 14px;
    text-align: center;
    color: var(--link-hover);
    font-style: italic;
}

/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 600px) {
    .kd-role-card { padding: 12px; }
    .kd-role-name { font-size: 1rem; }
    .kd-role-actions { gap: 6px; }
}