/*
 * Copyright (c) Electric Paper Informationssysteme GmbH. Alle Rechte vorbehalten.
 * Nutzung nur im Rahmen der vertraglichen Vereinbarungen.
 */

/**
 * nominierung.css — Nominierungsformular
 *
 * Styles für den Shortcode [epi_nom_nominierung].
 * Konsistent mit dem Design-Token-System des Plugins (--c-*, --radius-*, --shadow-*).
 */

/* =============================================================
 * 1. Wrapper & Layout
 * ============================================================= */

.epi-nominierung-wrapper {
    max-width: 680px;
    margin-inline: auto;
}

.epi-nominierung-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l, 2rem);
}

/* [hidden]-Attribut explizit erzwingen – display:flex/grid überschreibt das UA-Stylesheet
   sonst (gleiche Spezifität, spätere Quelle gewinnt). Betrifft die Personensuche-Elemente
   sowie ALLE per Rolle aus-/eingeblendeten Formularelemente: die Kandidat:innen-/
   Vorschlagende-Felder und die ihnen zugeordneten Struktur-Elemente tragen ein
   data-field-context-Attribut, daher genügt ein attributbasierter Selektor (Spezifität
   0,2,0 sticht die 0,1,0 der .epi-nominierung-*-Klassen). */
.epi-nominierung-form[hidden],
.epi-nominierung-search-wrapper[hidden],
.epi-person-tile[hidden],
.epi-person-results[hidden],
[data-field-context][hidden] {
    display: none;
}

/* =============================================================
 * 2. Abschnitte (fieldsets)
 * ============================================================= */

.epi-nominierung-section {
    border: 1px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 20%, transparent));
    border-radius: var(--radius-m, 12px);
    padding: 1.5rem;
    margin: 0;
}

.epi-nominierung-section__legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-primary, #006A6A);
    padding-inline: 0.5rem;
}

/* =============================================================
 * 2b. Kartenauswahl (F-046) – auffällige Radio-Cards mit Titel + Beschreibung.
 * Generalisiert aus der ehemals modus-spezifischen Optik (Eigen-/Fremdnominierung):
 * wird sowohl vom Nominierungsmodus-Umschalter (epi_nom_render_nominierung_modus_field())
 * als auch generisch von select-Feldern mit display=cards genutzt
 * (epi_nom_field_uses_cards()) – daher nur eine Implementierung dieser Optik.
 * ============================================================= */

.epi-nominierung-cards-radios {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.epi-nominierung-cards-option {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 25%, transparent));
    border-radius: var(--radius-m, 12px);
    cursor: pointer;
    transition: border-color var(--motion-duration-short, 150ms) var(--ease-standard, ease),
                background var(--motion-duration-short, 150ms) var(--ease-standard, ease);

    &:has(input:checked) {
        border-color: var(--c-primary, #006A6A);
        background: color-mix(in srgb, var(--c-primary, #006A6A) 6%, transparent);
    }

    &:hover {
        border-color: var(--c-primary, #006A6A);
    }

    input[type="radio"] {
        margin-block-start: 0.15em;
        accent-color: var(--c-primary, #006A6A);
        flex-shrink: 0;
        width: 1.125rem;
        height: 1.125rem;
    }
}

.epi-nominierung-cards-option__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    strong {
        font-size: 0.95rem;
        color: var(--c-text, #1A1C1C);
    }
}

.epi-nominierung-cards-option__desc {
    font-size: 0.85rem;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 60%, transparent));
}

/* =============================================================
 * 3. Felder
 * ============================================================= */

.epi-nominierung-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-block-end: 1rem;

    &:last-child {
        margin-block-end: 0;
    }
}

.epi-nominierung-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-text, #1A1C1C);
}

.epi-nominierung-required {
    color: var(--c-error, #BA1A1A);
    margin-inline-start: 0.2em;
}

.epi-nominierung-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 30%, transparent));
    border-radius: var(--radius-s, 8px);
    background: var(--c-surface, #fff);
    color: var(--c-text, #1A1C1C);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;

    &:focus {
        outline: none;
        border-color: var(--c-primary, #006A6A);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #006A6A) 20%, transparent);
    }

    &.epi-nominierung-input--error {
        border-color: var(--c-error, #BA1A1A);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-error, #BA1A1A) 15%, transparent);
    }
}

textarea.epi-nominierung-input {
    resize: vertical;
    min-height: 7rem;
}

.epi-nominierung-select {
    appearance: auto;
}

.epi-nominierung-textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.epi-nominierung-char-counter {
    font-size: 0.8rem;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 60%, transparent));
    text-align: end;
}

/* Checkboxen */
.epi-nominierung-field--checkbox .epi-nominierung-checkbox-label {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--c-text, #1A1C1C);

    input[type="checkbox"] {
        margin-block-start: 0.15em;
        accent-color: var(--c-primary, #006A6A);
        flex-shrink: 0;
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* Multiselect-Gruppe */
.epi-nominierung-multiselect {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.epi-nominierung-multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9rem;
    cursor: pointer;

    input[type="checkbox"] {
        accent-color: var(--c-primary, #006A6A);
    }
}

/* Einfachauswahl als Auswahlknöpfe (Darstellung „radio" statt Dropdown).
   Jede Option ist eine anklickbare Karte, damit die Trefferfläche nicht auf
   den kleinen Radio-Knopf begrenzt ist. */
.epi-nominierung-radiogroup {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Optionen nebeneinander, solange sie passen. Der flex-basis-Wert erzwingt den
       Umbruch bei langen Optionstexten oder schmalen Feldbreiten (Formulardesigner). */
    flex-flow: row wrap;
    gap: 0.5rem;
}

.epi-nominierung-radiogroup[hidden] {
    display: none;
}

.epi-nominierung-radio-option {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.95rem;
    cursor: pointer;
    background: var(--c-surface, #ffffff);
    border: 1px solid var(--c-primary-20, #CFD9D9);
    border-radius: var(--radius-m, 10px);
    transition: border-color var(--motion-duration-short, 150ms) var(--ease-standard, ease),
                background-color var(--motion-duration-short, 150ms) var(--ease-standard, ease);
}

.epi-nominierung-radio-option:hover {
    border-color: var(--c-primary, #006A6A);
}

.epi-nominierung-radio-option:has(input[type="radio"]:checked) {
    border-color: var(--c-primary, #006A6A);
    background: color-mix(in srgb, var(--c-primary, #006A6A) 8%, transparent);
}

.epi-nominierung-radio-option:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--c-primary, #006A6A);
    outline-offset: 2px;
}

.epi-nominierung-radio-option input[type="radio"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--c-primary, #006A6A);
}

.epi-nominierung-field-description {
    font-size: 0.85rem;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 60%, transparent));
    margin: 0;
}

/* =============================================================
 * 3b. Grid-Layout & Feldbreiten (F-015 – Formulardesigner)
 * ============================================================= */

/* Container je Abschnitt: 12-Spalten-Raster, Items fließen automatisch in Zeilen. */
.epi-nominierung-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}

/* Innerhalb des Grids ersetzt das Grid-Gap die Feld-Außenabstände. */
.epi-nominierung-grid > .epi-nominierung-field {
    margin-block-end: 0;
}

/* Feldbreiten als Grid-Span (100/75/66/50/33/25 %). */
.epi-field-w100 { grid-column: span 12; }
.epi-field-w75  { grid-column: span 9; }
.epi-field-w66  { grid-column: span 8; }
.epi-field-w50  { grid-column: span 6; }
.epi-field-w33  { grid-column: span 4; }
.epi-field-w25  { grid-column: span 3; }

/* --- Strukturelemente --- */

.epi-nominierung-heading {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-primary, #006A6A);
    align-self: end;
}

.epi-nominierung-info {
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--c-text, #1A1C1C);
    background: color-mix(in srgb, var(--c-primary, #006A6A) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #006A6A) 20%, transparent);
    border-radius: var(--radius-s, 8px);

    & > :first-child { margin-block-start: 0; }
    & > :last-child  { margin-block-end: 0; }
}

/* Trennlinie – optional mit zentriertem Label. */
.epi-nominierung-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0;

    &::before,
    &::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 25%, transparent));
    }

    /* Ohne Label trotzdem als durchgehende Linie darstellen. */
    &:not(:has(.epi-nominierung-separator__label)) {
        gap: 0;
    }
}

.epi-nominierung-separator__label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 60%, transparent));
    white-space: nowrap;
}

.epi-nominierung-html {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--c-text, #1A1C1C);

    & > :first-child { margin-block-start: 0; }
    & > :last-child  { margin-block-end: 0; }
}

/* =============================================================
 * 4. Personensuche
 * ============================================================= */

.epi-nominierung-search-wrapper {
    margin-block-end: 1.25rem;
    position: relative;
}

/* Trefferliste */
.epi-person-results {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 25%, transparent));
    border-radius: var(--radius-s, 8px);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.12));
    max-height: 280px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.epi-person-results__item {
    padding: 0.625rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--c-text, #1A1C1C);
    transition: background 100ms ease;

    &:hover,
    &:focus {
        background: color-mix(in srgb, var(--c-primary, #006A6A) 10%, transparent);
        outline: none;
    }
}

.epi-person-results__empty {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 55%, transparent));
    font-style: italic;
}

/* =============================================================
 * 5. Personenkachel
 * ============================================================= */

.epi-person-tile {
    border: 2px solid var(--c-primary, #006A6A);
    border-radius: var(--radius-m, 12px);
    padding: 1rem;
    background: color-mix(in srgb, var(--c-primary, #006A6A) 6%, transparent);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.75rem;

    @media (max-width: 480px) {
        flex-direction: column;
    }
}

.epi-person-tile__content {
    flex: 1;
}

.epi-person-tile__name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--c-primary, #006A6A);
    margin-block-end: 0.5rem;
}

.epi-person-tile__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    font-size: 0.875rem;
    color: var(--c-text, #1A1C1C);

    dt {
        color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 60%, transparent));
        font-weight: 500;
    }
}

.epi-person-tile__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.epi-person-tile__reset {
    background: none;
    border: 1px solid var(--c-primary, #006A6A);
    border-radius: var(--radius-button, 20px);
    color: var(--c-primary, #006A6A);
    padding: 0.375rem 0.875rem;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease;

    &:hover {
        background: color-mix(in srgb, var(--c-primary, #006A6A) 10%, transparent);
    }

    &:focus-visible {
        outline: 2px solid var(--c-primary, #006A6A);
        outline-offset: 2px;
    }
}

/* =============================================================
 * 6. Notice-Banner
 * ============================================================= */

.epi-nominierung-notice {
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius-s, 8px);
    font-size: 0.95rem;
    margin-block-end: 1rem;
}

.epi-nominierung-notice--error {
    background: color-mix(in srgb, var(--c-error, #BA1A1A) 10%, transparent);
    color: var(--c-error, #BA1A1A);
    border: 1px solid color-mix(in srgb, var(--c-error, #BA1A1A) 30%, transparent);
}

.epi-nominierung-notice--success {
    background: color-mix(in srgb, var(--c-success, #006A6A) 10%, transparent);
    color: var(--c-success, #006A6A);
    border: 1px solid color-mix(in srgb, var(--c-success, #006A6A) 30%, transparent);
}

/* =============================================================
 * 7. Submit-Bereich
 * ============================================================= */

.epi-nominierung-submit-row {
    display: flex;
    justify-content: flex-end;
}

.epi-nominierung-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--c-primary, #006A6A);
    color: var(--c-on-primary, #fff);
    border: none;
    border-radius: var(--radius-button, 20px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
    min-height: 44px; /* WCAG 2.2 Touch-Target */

    &:hover:not(:disabled) {
        background: color-mix(in srgb, var(--c-primary, #006A6A) 85%, #000);
        box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.15));
    }

    &:focus-visible {
        outline: 2px solid var(--c-primary, #006A6A);
        outline-offset: 3px;
    }

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

.epi-nominierung-submit__spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid color-mix(in srgb, var(--c-on-primary, #fff) 40%, transparent);
    border-top-color: var(--c-on-primary, #fff);
    border-radius: 50%;
    animation: epi-spin 0.7s linear infinite;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
        opacity: 0.7;
    }
}

@keyframes epi-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================
 * 8. Erfolgsmeldung
 * ============================================================= */

.epi-nominierung-success {
    padding: 1.5rem;
    background: color-mix(in srgb, var(--c-primary, #006A6A) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #006A6A) 30%, transparent);
    border-radius: var(--radius-m, 12px);
    color: var(--c-text, #1A1C1C);
    font-size: 1rem;

    p {
        margin: 0;
    }
}

/* =============================================================
 * 9. Hinweis-Text
 * ============================================================= */

.epi-nominierung-hint {
    font-size: 0.9rem;
    color: var(--c-text-subtle, color-mix(in srgb, var(--c-text, #1A1C1C) 55%, transparent));
    font-style: italic;
    margin: 0;
}

/* =============================================================
 * 10. Responsive
 * ============================================================= */

@media (max-width: 600px) {
    .epi-nominierung-section {
        padding: 1rem;
    }

    /* Unter dem Breakpoint nehmen alle Items die volle Breite ein.
       Die höhere Spezifität (.epi-nominierung-grid > *) sticht die .epi-field-w*-Klassen. */
    .epi-nominierung-grid > * {
        grid-column: 1 / -1;
    }

    .epi-nominierung-submit {
        width: 100%;
        justify-content: center;
    }

    .epi-nominierung-submit-row {
        justify-content: stretch;
    }
}

/* =============================================================
 * 11. Honeypot-Feld (F-030 Schritt 2)
 * ============================================================= */

/* F-030 Schritt 2: Honeypot-Feld.
   Für Menschen unsichtbar (left:-9999px statt display:none, da manche Bots
   display:none-Felder gezielt überspringen). Für Screenreader zusätzlich über
   aria-hidden + tabindex=-1 (im Markup) ausgeblendet. */
.epi-nominierung-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =============================================================
 * 12. Losung-Sperrbildschirm
 * ============================================================= */

.epi-losung-gate {
    /* WP-Core .is-layout-constrained erzwingt auf direkten Kindern eine
       Breite von var(--wp--style--global--content-size) (siehe wahlportal-theme/
       style.css:2482) – bei gleicher Selektor-Spezifität gewinnt sonst die
       später geladene Core-Regel. Deshalb hier !important, analog zum
       bestehenden Muster in wahlportal-theme/style.css.
       Breite bewusst identisch zu .epi-nominierung-wrapper (680px, zentriert,
       siehe Zeile 12-15): Die Sperre ersetzt das Formular im selben
       Content-Slot – bei schmalerer Breite (zuvor 360px) wirkte sie im
       Vergleich zum übrigen, deutlich breiteren Seiteninhalt unpassend klein. */
    max-width: 680px !important;
    margin-inline: auto !important;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    border: 1px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 20%, transparent));
    border-radius: var(--radius-m, 12px);
    box-shadow: var(--shadow-subtle, none);
}

.epi-losung-gate__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-primary, #006A6A);
}

.epi-losung-gate__intro {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-on-surface-variant, #3E5959);
}

.epi-losung-gate__error {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-error, #B3261E);
    font-weight: 600;
}

.epi-losung-gate__form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 12%, transparent));
}

.epi-losung-gate__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-on-surface-variant, #3E5959);
}

.epi-losung-gate__input {
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--c-border, color-mix(in srgb, var(--c-primary, #006A6A) 20%, transparent));
    border-radius: var(--radius-s, 8px);
    font-size: 1rem;
}

.epi-losung-gate__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.75rem 1.75rem;
    background: var(--c-primary, #006A6A);
    color: var(--c-on-primary, #fff);
    border: none;
    border-radius: var(--radius-button, 20px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
    min-height: 44px; /* WCAG 2.2 Touch-Target */
}

.epi-losung-gate__submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-primary, #006A6A) 85%, #000);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.15));
}

.epi-losung-gate__submit:focus-visible {
    outline: 2px solid var(--c-primary, #006A6A);
    outline-offset: 3px;
}

.epi-losung-gate__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Wiederverwendet die bestehende epi-spin-Animation (Abschnitt 7, Submit-Bereich
   des eigentlichen Formulars) statt eine eigene Keyframe-Regel zu duplizieren.
   Bewusst OHNE eigene display-Eigenschaft (wie beim Vorbild
   .epi-nominierung-submit__spinner) – so bleibt die UA-Standardregel
   `[hidden] { display: none; }` wirksam, statt von einer Klassenregel
   überschrieben zu werden. */
.epi-losung-gate__submit-spinner {
    margin-left: 0.5rem;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid color-mix(in srgb, var(--c-on-primary, #fff) 40%, transparent);
    border-top-color: var(--c-on-primary, #fff);
    border-radius: 50%;
    animation: epi-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .epi-losung-gate__submit-spinner {
        animation: none;
        opacity: 0.7;
    }
}