/* --------------------------------------------------------------
   Vorbereitungsdokumente (Pre-Test Docs)

   Die Darstellung der Vorbereitungsdokumente an den drei Orten, an
   denen sie vorkommen:

       Modal        Ergebnisseite eines Einzeltests, Seite einer
                    Testperson (Ausloeser in der Seitenspalte)
       Streifen     Ergebnisansicht einer Testbatterie, ueber der
                    Testtabelle (Variante D, entschieden 29.08.2026)

   Die Dokumentkarte selbst kommt aus surveyjs/1_accordion.css
   (.link_parts_td, .svg_link_circle, .link_desc, .link_link) und aus
   global/container.css (.download_def_btn). Hier steht nur, was diese
   Bausteine umgibt.

   Praefix: predoc_

   Blade:
       tests/results/parts/pre_test_doc_list.blade.php
       tests/results/parts/pre_test_modal.blade.php
       tests/results/parts/pre_test_expander.blade.php
       tests/results/parts/pre_test_scripts.blade.php
   -------------------------------------------------------------- */

/* ── Liste ────────────────────────────────────────────────────── */

/* .manual_container_result bringt flex-wrap mit, die Dokumente sollen
   aber untereinander stehen. Frueher stand das als Inline-Stil im
   Modal. */
.predoc_list {
    flex-direction: column;
}

.predoc_row {
    display: flex;
    gap: var(--sp-m);
    align-items: center;
    max-width: fit-content;
}

.predoc_link {
    flex: 1;
}

.predoc_link p {
    margin: 0;
}

.predoc_empty {
    color: grey;
    font-size: var(--text-size-95);
    margin: 0;
}

/* "Alle herunterladen", nur ab zwei Dokumenten */
.predoc_all_wrap {
    margin-top: var(--sp-m);
    padding-top: var(--sp-m);
    border-top: 1px solid #e0e0e0;
}

.predoc_all_btn {
    width: fit-content;
    padding: var(--sp-xs) var(--sp-s) var(--sp-xs) var(--sp-xxs);
}

.predoc_all_icon {
    width: 35px;
    height: 35px;
}

.predoc_all_icon svg {
    width: 20px;
}

.predoc_all_txt {
    font-size: var(--text-size-100);
}

/* ── Aufklappstreifen (Testbatterie) ──────────────────────────── */

.predoc_exp {
    margin: 0 0 var(--sp-mm) 0;
    border: 1px solid #e4e9f0;
    border-radius: 0.5em;
    background: #fbfcfd;
    max-width: fit-content;
    min-width: 320px;
}

.predoc_exp_summary {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-s) var(--sp-m);
    cursor: pointer;
    /* Das Standard-Dreieck weicht je nach Browser ab, der Pfeil kommt
       stattdessen aus dem Markup. */
    list-style: none;
}

.predoc_exp_summary::-webkit-details-marker {
    display: none;
}

.predoc_exp_summary:hover {
    background: #f4f8fd;
    border-radius: 0.5em;
}

.predoc_exp_chevron {
    width: 14px;
    height: 14px;
    color: #4279bc;
    flex: none;
    transition: transform 0.15s ease;
}

.predoc_exp[open] .predoc_exp_chevron {
    transform: rotate(180deg);
}

.predoc_exp[open] .predoc_exp_summary {
    border-radius: 0.5em 0.5em 0 0;
}

.predoc_exp_title {
    font-size: var(--text-size-100);
    font-weight: 600;
    color: #163c6b;
}

/* Die Anzahl sitzt am rechten Ende der Zeile, nicht direkt hinter dem
   Titel. Deshalb hat .predoc_exp eine Mindestbreite: ohne sie waere die
   Zeile nur so breit wie ihr Inhalt und rechts gaebe es nichts, wohin
   die Anzahl ruecken koennte. */
.predoc_exp_count {
    margin-left: auto;
    font-size: var(--text-size-80);
    background: #eff6fe;
    color: #4279bc;
    border-radius: 1em;
    padding: 1px 8px;
    flex: none;
}

.predoc_exp_body {
    padding: 0 var(--sp-m) var(--sp-m) var(--sp-m);
}

/* ── Ausloeser in der Seitenspalte ────────────────────────────── */

/* Die Zeile der Testperson blendet sich erst ein, wenn feststeht, dass
   es Dokumente gibt. Im lokalen Modus faellt das erst im Browser, nach
   dem Entsperren des Tresors. */
.predoc_side_row[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .predoc_exp {
        min-width: 0;
        width: 100%;
    }

    .predoc_row {
        max-width: none;
    }
}