/*
 * Fuehrungszeugnis-Verwaltung: Upload-Panel, Admin-Uebersicht und die
 * Pruefer-Modale der Reviewer-Tabelle (klubboard-listsandtables).
 *
 * Ersetzt den :root---fz-*-Block aus custom.css (eigene Tailwind-Palette,
 * eigene Schrift, rem-Sonderskala) und den Inline-<style> aus
 * class-fuehrungszeugnisse.php (Slate-Palette, Schrift "Inter").
 * Grundbausteine (Karte, Seitenkopf, Badge, Dropzone, Kennzahlen, Dialog,
 * Leiste) kommen aus kb-base.css - hier steht nur, was diese Oberflaeche
 * zusaetzlich braucht. Regeln: wp-content/plugins/STYLEGUIDE.md.
 *
 * Eingebunden vom Plugin ueber das Handle 'kb-fuehrungszeugnis'
 * (kb_enqueue_theme_style() in klubboard-core); registriert in
 * functions.php, klubboard_register_component_styles().
 *
 * Viele fz-*-Klassen sind JS-Hooks (fz-script.js bzw. das Inline-Script der
 * Reviewer-Tabelle) und bleiben deshalb bestehen; die Optik haengt, wo
 * moeglich, an den zusaetzlichen kb-*-Klassen im Markup.
 */

/* ---- Upload-Panel ------------------------------------------------------- */

/* Das Panel ist eine .kb-card; 720px, damit die Lesebreite der Hinweise
   ertraeglich bleibt. Die Admin-Uebersicht laeuft breiter. */
#fz-user-panel {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Bruecke fuer den JS-Hook: fz-script.js setzt .fz-dragover (nicht
   .is-dragover) - eine CSS-Zeile ist billiger als ein Hook-Umbau (Regel 3). */
.kb-dropzone.fz-dragover {
    border-color: var(--kb-accent);
    background: color-mix(in srgb, var(--kb-accent) 6%, transparent);
}

/* Gewaehlte Datei unter der Ablagezone. */
.fz-selected-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--kb-accent) 6%, var(--kb-bg));
    border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, var(--kb-bg));
    border-radius: var(--kb-radius-inner);
    margin: 12px 0;
    font-size: 0.9rem;
}

.fz-selected-file .kb-iconbtn {
    margin-left: auto;
}

/* PIN-Eingabe (Upload wie Pruefer-Modal): zentrierte Ziffern mit
   Letter-Spacing - das einzige Feld-Styling dieser Oberflaeche. */
.kb-pin-input {
    width: 130px;
    text-align: center;
    letter-spacing: 8px;
    font-size: 22px;
    font-weight: 700;
}

.fz-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fz-actions .button {
    margin: 0;
}

.fz-hint {
    font-size: 0.9rem;
    color: var(--kb-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ---- Admin-Uebersicht ---------------------------------------------------- */

.fz-admin-filter {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.fz-admin-filter input {
    flex: 1;
}

.fz-admin-filter select {
    flex: 0 0 200px;
}

/* Tabelle im rahmenlosen Suite-Standard, nur Zeilen-Haarlinien und Hover. */
.fz-table th,
.fz-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--kb-line);
}

.fz-table th {
    font-weight: 600;
    color: var(--kb-muted);
    white-space: nowrap;
}

.fz-table tbody tr:last-child td {
    border-bottom: none;
}

.fz-table tbody tr:hover {
    background: var(--kb-page);
}

.fz-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fz-avatar {
    border-radius: 50%;
}

.fz-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fz-action-btns .button {
    margin: 0;
}

/* ---- Reviewer: PIN- und Pruef-Modal -------------------------------------- */

/* Sichtbarkeit haengt an der ID + .is-open (das Inline-Script schaltet die
   Klasse). Bewusst ID-gebunden statt global .is-open - Bulma-Kollision,
   siehe STYLEGUIDE Anhang D. Optik kommt aus .kb-modal-overlay/.kb-modal. */
#fz-pin-modal,
#fz-review-modal {
    display: none;
}

#fz-pin-modal.is-open,
#fz-review-modal.is-open {
    display: flex;
}

.fz-pin-modal-box {
    text-align: center;
}

.fz-pin-modal-box h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--kb-heading);
}

.fz-pin-modal-box p {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--kb-muted);
}

#fz-pin-entry {
    width: 160px;
    letter-spacing: 10px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.fz-pin-error {
    color: var(--kb-error);
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 18px;
}

.fz-pin-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.fz-pin-modal-actions .button {
    margin: 0;
}

/* Vorschau links: bewusst dunkle Flaeche (Dokument-Viewer), wie die
   Files-Theatre-Ansicht - Anhang C des Styleguides. */
.fz-modal-preview {
    flex: 1 1 0;
    min-width: 0;
    background: var(--kb-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.fz-preview-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

.fz-preview-spinner {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

.fz-preview-error {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    border-radius: var(--kb-radius-inner);
    padding: 20px 24px;
    margin: 24px;
    line-height: 1.6;
    word-break: break-word;
}

/* Entscheidungs-Spalte rechts. */
.fz-modal-form {
    width: 320px;
    flex-shrink: 0;
    padding: 24px 24px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--kb-line);
}

.fz-modal-form h3 {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--kb-heading);
}

.fz-modal-subtitle {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--kb-muted);
}

.fz-review-timer {
    font-size: 12px;
    font-weight: 600;
    color: var(--kb-muted);
    margin-bottom: 18px;
    padding: 6px 10px;
    background: var(--kb-bg-alt);
    border-radius: var(--kb-radius-inner);
    text-align: center;
    transition: color 0.3s, background 0.3s;
}

.fz-review-timer.urgent {
    color: var(--kb-error);
    background: color-mix(in srgb, var(--kb-error) 10%, transparent);
}

.fz-timer-bar-wrap {
    height: 3px;
    background: var(--kb-line);
    border-radius: 999px;
    margin-top: 5px;
    overflow: hidden;
}

.fz-timer-bar {
    height: 100%;
    background: var(--kb-accent);
    border-radius: 999px;
    transition: width 1s linear, background 1s;
}

.fz-review-timer.urgent .fz-timer-bar {
    background: var(--kb-error);
}

.fz-modal-review-status {
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--kb-fg);
}

.fz-modal-review-status strong {
    font-weight: 600;
    color: var(--kb-heading);
}

/* Akzeptieren/Ablehnen als Segment (.kb-seg im Markup). .active ist der
   JS-Hook des Inline-Scripts und wirkt hier wie .is-on; die Faerbung je
   Richtung kommt ueber .accept/.reject dazu. Nur unter der Modal-ID, nie
   .active allein (BuddyBoss-Tabs). */
#fz-review-modal .kb-seg {
    margin-bottom: 20px;
}

#fz-review-modal .fz-tab-btn.active {
    background: var(--kb-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

#fz-review-modal .fz-tab-btn.active.accept {
    color: color-mix(in srgb, var(--kb-success) 80%, #000);
}

#fz-review-modal .fz-tab-btn.active.reject {
    color: var(--kb-error);
}

.fz-modal-panel {
    display: none;
}

.fz-modal-panel.is-visible {
    display: block;
}

/* Berechneter "Gueltig bis"-Hinweis unter dem Ausstellungsdatum. */
.fz-expiry-hint {
    margin: 8px 0 16px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--kb-muted);
    background: var(--kb-bg-alt);
    border-radius: var(--kb-radius-inner);
}

.fz-expiry-hint strong {
    font-weight: 700;
}

.fz-expiry-hint.is-computed {
    color: color-mix(in srgb, var(--kb-success) 80%, #000);
    background: color-mix(in srgb, var(--kb-success) 10%, transparent);
}

.fz-expiry-hint.is-invalid {
    color: var(--kb-error);
    background: color-mix(in srgb, var(--kb-error) 10%, transparent);
}

.fz-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 16px;
    cursor: pointer;
}

.fz-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.fz-modal-spacer {
    flex: 1;
}

.fz-review-btn[data-loading] {
    opacity: 0.6;
    cursor: wait;
}

/* Sperr-Hinweis unten: Optik aus .kb-bar-bottom (Markup traegt beide
   Klassen), hier nur die Sichtbarkeits-Schaltung des Inline-Scripts. */
#fz-lock-banner {
    display: none;
}

#fz-lock-banner.is-visible {
    display: flex;
}

@media (max-width: 720px) {
    .kb-modal-split {
        flex-direction: column;
    }

    .fz-modal-preview {
        min-height: 220px;
    }

    .fz-modal-form {
        width: auto;
        border-left: 0;
        border-top: 1px solid var(--kb-line);
    }
}