/**
 * Melden: Button + Dialog. Wird auf der Zentrale UND auf den Community-Seiten
 * (Stufe B, von der Zentrale aus geladen) verwendet - deshalb keine Abhängigkeit
 * zu Theme-Klassen, nur zu den COD-Variablen mit Fallback.
 */

.cod-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--cod-color-muted, #6b7a90);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

/*
 * Der Knopf aus cod_reports_button_offen() kommt versteckt an und wird erst
 * sichtbar, wenn feststeht, wer zusieht. Diese Regel ist dafür PFLICHT: Das
 * display:inline-flex darüber schlägt das hidden-Attribut, der Knopf stünde
 * also trotz hidden da - und zwar auch für Ausgeloggte und für den Urheber
 * selbst. Ohne !important verliert sie gegen die Regel darüber, weil beide
 * gleich stark sind und die spätere nur bei gleicher Spezifität gewinnt.
 */
.cod-report-btn[hidden] { display: none !important; }

.cod-report-btn:hover {
    background: rgba(220, 38, 38, .08);
    color: #dc2626;
}

.cod-report-btn svg { display: block; }

.cod-report-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cod-report-modal.is-open { display: flex; }

.cod-report-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.cod-report-modal__dialog {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    padding: 26px 24px 22px;
    border-radius: 16px;
    background: var(--cod-color-surface, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    max-height: 90vh;
    overflow-y: auto;
}

.cod-report-modal__dialog h3 {
    margin: 0 0 4px;
    font-size: 19px;
    color: var(--cod-color-heading, #1f4d86);
}

.cod-report-modal__sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--cod-color-muted, #6b7a90);
}

.cod-report-modal__field { margin-bottom: 14px; }

.cod-report-modal label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cod-color-heading, #1f4d86);
}

.cod-report-modal select,
.cod-report-modal textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.cod-report-modal textarea {
    min-height: 104px;
    resize: vertical;
}

.cod-report-modal__hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--cod-color-muted, #6b7a90);
}

/*
 * "Diese Person auch blockieren" (04.09.2026).
 *
 * Der Selektor nennt bewusst BEIDE Teile (.cod-report-modal label.…): Die Regel
 * weiter oben setzt jedes Label im Fenster auf display:block und ist mit einer
 * Klasse plus Typ spezifischer als eine Klasse allein - eine Regel nur auf der
 * eigenen Klasse verlöre und das Kästchen stünde über statt neben dem Text.
 *
 * min-height 44px: dieselbe Trefferfläche wie überall auf der Plattform. Das
 * Kästchen selbst ist kleiner, angefasst wird die ganze Zeile.
 */
.cod-report-modal label.cod-report-modal__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 10px 0;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.45;
    color: inherit;
    cursor: pointer;
}

.cod-report-modal__check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--cod-color-heading, #1f4d86);
    cursor: pointer;
}

.cod-report-modal__check span { flex: 1 1 auto; min-width: 0; }

/*
 * Gemeinsame Räume (05.09.2026): die vier Raum-Kästchen unter "auch blockieren".
 * Eingerückt unter dem Haken, dem sie gehören; [hidden] mit !important, weil die
 * display-Angabe der Gruppe das Attribut sonst schlägt.
 */
.cod-report-modal__raeume {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    margin: 0 0 6px 28px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .04);
}
.cod-report-modal__raeume[hidden] { display: none !important; }
.cod-report-modal__raeume-label {
    flex: 1 0 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--cod-color-muted, #6b7a90);
}
.cod-report-modal label.cod-report-modal__raum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: inherit;
    cursor: pointer;
}
.cod-report-modal__raum input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cod-color-heading, #1f4d86);
}

.cod-report-modal__row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

.cod-report-send,
.cod-report-cancel {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cod-report-send { background: #dc2626; color: #fff; }
.cod-report-send:disabled { opacity: .6; cursor: default; }

.cod-report-cancel {
    background: transparent;
    border-color: rgba(15, 23, 42, .18);
    color: var(--cod-color-muted, #6b7a90);
}

/* Standard-X zum Zumachen (gleiche Optik wie cod_modal_close_button_html). */
.cod-report-modal .cod-modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cod-modal-close-size, 42px);
    height: var(--cod-modal-close-size, 42px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cod-modal-close-bg, rgba(47, 141, 228, .12));
    color: var(--cod-color-heading, #1f4d86);
    line-height: 0;
    cursor: pointer;
}

.cod-report-modal .cod-modal-close-x:hover {
    background: var(--cod-modal-close-bg-hover, rgba(47, 141, 228, .22));
}