/*
 * Client-side paper evaluation (stages 3 to 5).
 *
 * Only the genuinely new pieces live here. The viewer itself reuses
 * css/surveyjs/paper_query_upload.css, the stage-4 processing state reuses the
 * loader.css pieces of the legacy waiting page (.loader_dots, .waiting_area_text,
 * .test_process_text) inside its own paper_eval_ wrappers, because the legacy
 * .waiting_room/.waiting_bg_wrapper are sized as a standalone page (90vh/90vw) and this
 * one is a state inside the main column, and the stage-5 check state reuses
 * css/surveyjs/paper.css unchanged (it is literally the check_checkboxes markup).
 * All class names are prefixed paper_eval_ per the project rule on specific class names.
 */

/*
 * Der Bearbeiten-Bereich ist eine Spalte von 800px: Hinweise, Dropzone, Kamera-Button,
 * Dateiliste und Fußnote fluchten auf derselben Breite. Die Werkzeugleiste darüber bleibt
 * bewusst so breit wie die Hauptspalte, damit Tabs, Zähler und Button nebeneinander in
 * eine Zeile passen.
 */
.paper_eval_intake {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-m);
    max-width: 800px;
}

.paper_eval_notes,
.paper_eval_dropzone,
.paper_eval_dropzone_status,
.paper_eval_or_divider,
.paper_eval_file_list {
    width: 100%;
}

/* .upload-instructions bringt aus paper_upload.css eigene vertikale Abstände mit; hier
   macht das den Abstand der Spalte doppelt. */
.paper_eval_notes {
    margin: 0;
}

/*
 * Die Dropzone ist die Auswahlfläche der Seite und übernimmt deshalb das Verhalten von
 * .select_area_btn (container.css): gestrichelter blauer Rahmen, beim Überfahren heller
 * blauer Grund, kräftigerer Rahmen und ein weicher Schatten. Ein eigener Auswahl-Button
 * darin wäre doppelt, die ganze Fläche ist klickbar.
 */
.paper_eval_dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: var(--sp-x) var(--sp-m);
    border: 2px dashed #b9d2ef;
    border-radius: 0.6em;
    background-color: #fbfdff;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.paper_eval_dropzone:hover,
.paper_eval_dropzone:focus-visible,
.paper_eval_dropzone_active {
    background-color: #f2f8ff;
    border-color: #4279bc;
    box-shadow: 0 4px 14px rgba(66, 121, 188, 0.12);
}

.paper_eval_dropzone_icon {
    width: 42px;
    height: 42px;
    color: #4279bc;
    transition: all 0.25s ease;
}

.paper_eval_dropzone:hover .paper_eval_dropzone_icon,
.paper_eval_dropzone:focus-visible .paper_eval_dropzone_icon,
.paper_eval_dropzone_active .paper_eval_dropzone_icon {
    color: #275996;
    transform: scale(1.06);
}

.paper_eval_dropzone_title {
    margin: 0;
    font-weight: 600;
    color: #163c6b;
    transition: color 0.25s ease;
}

.paper_eval_dropzone_sub {
    margin: 0;
    font-size: var(--text-size-90);
    color: grey;
    transition: color 0.25s ease;
}

.paper_eval_dropzone:hover .paper_eval_dropzone_title,
.paper_eval_dropzone:focus-visible .paper_eval_dropzone_title,
.paper_eval_dropzone_active .paper_eval_dropzone_title,
.paper_eval_dropzone:hover .paper_eval_dropzone_sub,
.paper_eval_dropzone:focus-visible .paper_eval_dropzone_sub,
.paper_eval_dropzone_active .paper_eval_dropzone_sub {
    color: #275996;
}

/*
 * Seitenzähler und erfasste Seiten sitzen unten in der Fläche, durch eine gestrichelte
 * Linie vom Auswahl-Teil getrennt. Klicks hier öffnen keinen Dateidialog, deshalb auch
 * der normale Zeiger.
 */
.paper_eval_dropzone_status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-s);
    margin-top: var(--sp-s);
    padding-top: var(--sp-m);
    border-top: 1px dashed #b9d2ef;
    cursor: default;
}

/*
 * Über der Liste soll die Fläche nicht so tun, als würde ein Klick den Dateidialog
 * öffnen - der Hover-Zustand wird dort zurückgenommen. Beim Ziehen einer Datei
 * (.paper_eval_dropzone_active) bleibt die Hervorhebung dagegen überall bestehen, denn
 * dort ist die ganze Fläche das Ziel. Browser ohne :has() ignorieren diese vier Regeln und
 * zeigen einfach den normalen Hover; deshalb stehen sie hinter den Hover-Regeln und nicht
 * in ihnen.
 */
.paper_eval_dropzone:not(.paper_eval_dropzone_active):has(.paper_eval_dropzone_status:hover) {
    background-color: #fbfdff;
    border-color: #b9d2ef;
    box-shadow: none;
}

.paper_eval_dropzone:not(.paper_eval_dropzone_active):has(.paper_eval_dropzone_status:hover) .paper_eval_dropzone_icon {
    color: #4279bc;
    transform: none;
}

.paper_eval_dropzone:not(.paper_eval_dropzone_active):has(.paper_eval_dropzone_status:hover) .paper_eval_dropzone_title {
    color: #163c6b;
}

.paper_eval_dropzone:not(.paper_eval_dropzone_active):has(.paper_eval_dropzone_status:hover) .paper_eval_dropzone_sub {
    color: grey;
}

/*
 * Only shown on devices that actually have a camera. The class is set by
 * paper_evaluation_view.js once the probe in paper_camera_capture.js has answered - not by
 * device type, so a laptop with a webcam gets the viewfinder too.
 */
.paper_eval_camera_action {
    display: none;
}

.paper_eval_has_camera .paper_eval_camera_action {
    display: flex;
}

/*
 * "oder" zwischen Dropzone und Kamera-Button: eine Linie mit einem Wort in der Mitte.
 * Sie trennt nicht zwei Abschnitte, sondern zwei gleichwertige Wege - deshalb steht sie
 * dort, wo der Blick nach der Dropzone ohnehin hinwandert, und nicht als Überschrift.
 */
.paper_eval_or_divider {
    align-items: center;
    gap: var(--sp-s);
    color: grey;
    font-size: var(--text-size-90);
}

.paper_eval_or_divider::before,
.paper_eval_or_divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #e0e0e0;
}

/*
 * Der Kamera-Button liegt unter dem Trenner so breit wie die Dropzone darüber: die beiden
 * Wege sind gleichwertig und sollen auch gleich viel Fläche bekommen. Das ist zugleich der
 * Grund für den blauen Auswerten-Look statt des früheren weißen Buttons.
 */
.paper_eval_camera_btn {
    width: 100%;
    justify-content: center;
}

.paper_eval_camera_btn_icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.paper_eval_hint {
    margin: 0;
    margin-bottom:var(--sp-m);
    font-size: var(--text-size-90);
    color: #555;
}

.paper_eval_counter {
    display: inline-flex;
    font-size: var(--text-size-100);
    color:grey;
    align-items: center;
    gap: var(--sp-xs);
    flex-wrap: wrap;
}
.paper_eval_error {
    display: none;
    margin-bottom: var(--sp-m);
    padding: var(--sp-xs) var(--sp-s);
    border-left: 3px solid #b00020;
    border-radius: 0.25em;
    background: #fdecef;
    color: #7a0016;
    font-size: var(--text-size-95);
}

.paper_eval_error ul {
    margin: 0;
    padding-left: 1.2em;
}

.paper_eval_add_more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    justify-content: flex-start;
    flex-direction: row;
}

.paper_eval_source_name {
    font-size: var(--text-size-80);
    color: #555;
    word-break: break-word;
}

/* Steht unter der Werkzeugleiste und nur dann, wenn die automatische Auswertung für
   diesen Test überhaupt nicht möglich ist. */
.paper_eval_disabled_note {
    margin: 0;
    font-size: var(--text-size-80);
    color: #555;
    max-width: 34em;
}

.paper_eval_qr_note {
    font-size: var(--text-size-80);
    color: #555;
    margin: var(--sp-xs) 0 0 0;
    text-align:center;
}

/* .paper_eval_qr_progress (die Statuszeile unter dem QR-Code) liegt bewusst NICHT hier,
   sondern in css/global/1_qr_completion.css: sie wird auch von der eigenständigen
   QR-Seite (tests/qrcode) gebraucht, und die soll dafür nicht diese ganze Datei laden. */

/* --- Edit state fine-tune: shared header, tabs, file list --------------------------- */

.paper_eval_edit_header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin-bottom: var(--sp-m);
}

/*
 * The segmented switch between "Bilder auswählen" and "Bilder ansehen". Same visual
 * language as the site's Zustands-Umschalter (grey pill rail, white active pill with the
 * soft shadow, blue active text), but self-contained: the morphing-background bundle
 * carries a CSS reset and JS this page does not need.
 */
.paper_eval_tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--sp-ss);
    background-color: #ededed;
    padding: var(--sp-ss);
    border-radius: 50em;
}

.paper_eval_tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-ss);
    border: 0;
    background: transparent;
    border-radius: 50em;
    padding: 0.6rem 1.1rem;
    font-size: var(--text-size-95);
    color: grey;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.paper_eval_tab_icon {
    width: 18px;
    height: 18px;
}

.paper_eval_tab_active {
    background-color: white;
    color: #4279bc;
    box-shadow: 0px 9px 9px -6px rgba(206, 217, 232, 0.9);
}

.paper_eval_tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/*
 * Was den Bearbeiten-Zustand steuert: Tab-Auswahl, darunter der Auswerten-Button. Der
 * Seitenzähler steht nicht mehr hier, sondern in der Dropzone direkt über den erfassten
 * Seiten - damit bleiben es zwei schmale Zeilen statt einer vollen Leiste.
 */
.paper_eval_toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-s);
    padding-bottom: var(--sp-s);
    border-bottom: 1px solid #e0e0e0;
}

.paper_eval_process_icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* --- FilePond-style file list below the dropzone ------------------------------------ */

.paper_eval_file_list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-ss);
}

/*
 * One erfasste Seite. Colours and radius follow the FilePond items of the legacy upload
 * view (processing-complete blue #86b6f3, 0.5em radius, soft bottom shadow), which is the
 * look this list replaces.
 */
.paper_eval_file_row {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 0.55em 0.75em;
    border-radius: 0.5em;
    background-color: #86b6f3;
    color: white;
    font-size: var(--text-size-90);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0.0625em 0.125em -0.0625em rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s;
}

.paper_eval_file_row:hover {
    background-color: #6ea5ee;
}

.paper_eval_file_remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: var(--text-size-90);
    cursor: pointer;
    transition: background-color 0.15s;
}

.paper_eval_file_remove:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

.paper_eval_file_name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die laufende Nummer der erfassten Seite, links vor dem Dateinamen. */
.paper_eval_file_index {
    flex: none;
    min-width: 1.4em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* --- Stage 4: processing state ------------------------------------------------------ */

.paper_eval_waiting_bg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--sp-m);
    border-radius: 0.25em;
    background: linear-gradient(-45deg, #4279bc, #86b6f3, #b8d7ff, #c2e9fb);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.paper_eval_waiting_card {
    background: #fff;
    min-width: min(450px, 100%);
    border-radius: 1em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.paper_eval_waiting_inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
}

.paper_eval_stay_open {
    font-size: var(--text-size-80);
    color: #555;
    border-top: 1px solid #eee;
    padding-top: var(--sp-s);
    max-width: 34em;
}

/* --- Stage 4: the pages that failed to register -------------------------------------- */

.paper_eval_result_actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-m);
}

.paper_eval_result_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-m);
}

.paper_eval_result_card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--sp-s);
    border: 1px solid #e2e2e2;
    border-radius: 0.5em;
    background: #fafafa;
}

.paper_eval_result_card_failed {
    border-color: #e6b4b4;
    background: #fdecef;
}

.paper_eval_result_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-xs);
    flex-wrap: wrap;
}

.paper_eval_result_head h4 {
    margin: 0;
}

.paper_eval_result_badge {
    font-size: var(--text-size-90);
    color: #3b5b85;
    background: #eff6ff;
    border: 1px solid #c6dcf8;
    border-radius: 1em;
    padding: 0.1em 0.75em;
    white-space: nowrap;
}

.paper_eval_result_source {
    margin: 0;
    font-size: var(--text-size-90);
    color: #555;
    word-break: break-word;
}

/* Eine ersetzte Seite ist kein Fehler mehr, sondern eine Zusage: sie wird beim nächsten
   Lauf verarbeitet. Deshalb der grüne Gegenpol zu _card_failed und nicht nur ein blasseres
   Rot - der Nutzer soll auf einen Blick sehen, welche Karten er schon erledigt hat. */
.paper_eval_result_card_replaced {
    border-color: #b5d9c2;
    background: #f0f9f3;
}

.paper_eval_result_replaced_note {
    margin: 0;
    color: #225a36;
}

/* Das abgelehnte Foto in der Karte. Der Button ist reiner Auslöser für die Vollansicht,
   deshalb erbt er nichts von den Button-Stilen der Seite.

   Feste Höhe und zentrierter Inhalt, weil die Seiten gedreht sein können: eine beim
   Zuordnen erkannte Drehung wird als transform gesetzt, und transform ändert den
   Platzbedarf des Elements nicht. Ohne diesen Kasten ragt ein um 90 Grad gedrehtes
   Hochformat seitlich aus der Karte. Deshalb ist das Bild unten in BEIDEN Richtungen
   gedeckelt, nicht nur in der Höhe. */
.paper_eval_result_thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.paper_eval_result_thumb:hover .paper_eval_result_image,
.paper_eval_result_thumb:focus-visible .paper_eval_result_image {
    border-color: #4279BC;
}

.paper_eval_result_thumb:focus-visible {
    outline: 2px solid #93aaf7;
    outline-offset: 2px;
}

.paper_eval_result_image {
    max-width: 170px;
    max-height: 170px;
    width: auto;
    height: auto;
    border: 1px solid #e2e2e2;
    border-radius: 0.25em;
    background: #fff;
}

.paper_eval_result_card_actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    margin-top: var(--sp-xs);
}

/* Nach der ersten Ersetzung ist "Erneut verarbeiten" der nächste Schritt. Der Button
   wechselt dafür nicht die Rolle, er bekommt nur einen Ring. */
.paper_eval_rerun_ready {
    box-shadow: 0 0 0 3px #B8D7FF;
}

/* --- Vollansicht eines Fotos (evaluation_photo_modal.blade.php) ----------------------- */

/* Ein Quadrat, und zwar aus einem Grund: die beim Zuordnen erkannte Drehung wird als
   transform gesetzt, und transform ändert den Platzbedarf des Elements nicht. Was in ein
   Quadrat passt, passt auch um 90 Grad gedreht hinein - damit ragt kein gedrehtes
   Hochformat aus dem Modal, ohne dass etwas abgeschnitten werden müsste. Die Seite ist
   höchstens so breit wie das Modal und höchstens 70vh hoch. */
.paper_eval_photo_modal_frame {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 70vh);
    aspect-ratio: 1;
    margin: 0 auto;
}

.paper_eval_photo_modal_img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0.25em;
}

.paper_eval_photo_modal_caption {
    margin: var(--sp-xs) 0 0;
    font-size: var(--text-size-90);
    color: #555;
    word-break: break-word;
}

.paper_eval_result_tally {
    margin: 0;
    font-size: var(--text-size-90);
}

.paper_eval_result_message {
    margin: 0;
    color: #7a0016;
}

.paper_eval_result_card details pre {
    max-height: 300px;
    overflow: auto;
    font-size: var(--text-size-90);
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.25em;
    padding: var(--sp-xs);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Stage 5: check state ------------------------------------------------------------ */

.paper_eval_check {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.paper_eval_check_actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
}

/*
 * paper.css sizes the canvas box for a standalone page (max-width: 70vw). Here it sits in
 * the main column next to the information sidebar, where 70vw overflows the page
 * horizontally. Scoped to the check section so the standalone check_checkboxes view keeps
 * its own sizing.
 */
#paper_eval_check .display_canvas {
    max-width: 100%;
    margin-left: 0;
}

/* Der Rahmen um den Scroll-Container (paper.css) trägt inzwischen dessen
   Außenabstände - in der Hauptspalte gilt dieselbe Ausnahme wie oben. */
#paper_eval_check .paper_check_canvas_frame {
    margin-left: 0;
}

#paper_eval_check .seperate_img_items {
    margin-bottom: 0;
}

/*
 * UX fine-tune 2026-08-10: while the check state is active on the static sidebar layout,
 * paper_evaluation_view.js moves .outer_detail_wrapper into the #paper_eval_sidebar_check
 * slot of the left sidebar. There the panel has to read as sidebar content; the floating
 * card look from paper.css (shadow, own background, 300px minimum) belongs to the
 * standalone check_checkboxes view (public paper preview), which keeps it.
 */
#paper_eval_sidebar_check .outer_detail_wrapper,
#paper_eval_summary_body .outer_detail_wrapper {
    padding: 0;
}

#paper_eval_sidebar_check .detail_container_paper,
#paper_eval_summary_body .detail_container_paper {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
    min-width: 0;
    max-width: none;
}

/*
 * Zweite Runde desselben Feinschliffs: Bestätigen-Knopf, Blätter-Buttons und
 * Farb-Legende verlassen das Detail-Panel ganz (paper_evaluation_view.js verschiebt die
 * Knoten einmalig beim Initialisieren). Blättern und Legende teilen sich die
 * Werkzeugzeile am Anfang des .canvas-wrapper: Blättern links, Legende rechts, beide
 * bündig mit dem Canvas selbst, denn der Wrapper schrumpft auf die Canvas-Breite, auch
 * wenn das Seitenbild schmaler als die Hauptspalte ist. align-self verhindert, dass der
 * Wrapper im gestapelten Telefon-Layout (Spalten-Flex) doch wieder auf volle Breite
 * gedehnt wird. Im Panel bleibt nur der Formular-Fuß mit den versteckten Feldern
 * zurück, der keinen Abstand mehr erzeugen soll.
 */
#paper_eval_check .canvas-wrapper {
    align-self: flex-start;
}

.paper_eval_canvas_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
    flex-wrap: wrap;
}

/* Die Trennlinie, die die Zeile im Detail-Panel hatte, ist in der Werkzeugzeile fehl am
   Platz. flex-direction: row hält die beiden kleinen Buttons auch auf Telefonen
   nebeneinander, wo paper_upload.css .default_flex sonst stapelt. */
.paper_eval_canvas_toolbar .page_btn_line {
    flex-direction: row;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Innere Hülle der Blätter-Buttons im control-btn-Look: check_logic steuert deren
   display per Inline-Style (inline-block), was das Flex-Layout von .control-btn
   aushebelt - Pfeil und Text richtet deshalb diese Hülle aus. */
.paper_eval_nav_btn_inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.paper_eval_canvas_toolbar .checkbox_legend_div {
    margin-top: 0;
    flex-wrap: wrap;
}

#paper_eval_check .finish_btn_res,
#paper_eval_sidebar_check .finish_btn_res {
    margin-top: 0;
}

/*
 * Details-Akkordeon im gestapelten Layout (2026-08-11): unter dem Canvas hieße das
 * Detail-Panel für jede Warnungs-Kontrolle pro Test nach unten scrollen. syncCheckSidebar
 * (paper_evaluation_view.js) hängt das Panel stattdessen in den Body dieses Balkens über
 * dem Canvas; die Chips im Kopf zeigen Fehler (rot), Warnungen (orange) und Testperson
 * ohne Aufklappen. Sichtbar nur auf dem nicht-statischen Layout - per Inline-Style vom
 * JS gesteuert wie die übrigen Zustandswechsel dieser Ansicht, bewusst keine eigene
 * Media Query, damit Balken und Panel-Position nie auseinanderlaufen.
 */
.paper_eval_summary {
    border: 1px solid #e2e2e2;
    border-radius: 0.35em;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.paper_eval_summary_head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    width: 100%;
    padding: var(--sp-xs);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-size-90);
}

.paper_eval_summary_chevron {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.paper_eval_summary_chevron svg {
    width: 20px;
    height: 20px;
}

.paper_eval_summary--open .paper_eval_summary_chevron {
    transform: rotate(180deg);
}

.paper_eval_summary_label {
    font-weight: 600;
}

.paper_eval_summary_chip {
    padding: 2px 10px;
    border-radius: 50em;
    background-color: #f0f2f5;
    color: #54656f;
    white-space: nowrap;
}

.paper_eval_summary_chip--error {
    background-color: rgba(232, 49, 20, 0.12);
    color: #b22610;
}

.paper_eval_summary_chip--warn {
    background-color: rgba(255, 165, 0, 0.16);
    color: #9a6700;
}

.paper_eval_summary_chip--ok {
    background-color: rgba(66, 121, 188, 0.12);
    color: #4279bc;
}

.paper_eval_summary_body {
    padding: 0 var(--sp-xs) var(--sp-xs);
    border-top: 1px solid #ececec;
}

/* --- Stage 6: battery check loop ----------------------------------------------------- */

/* Der Schritt-Indikator "Test X von Y" neben der Überschrift trägt die vorhandenen
   Klassen page-indicator (paper_query_upload.css) und count_num (loader.css) - dieselbe
   Optik wie der Seiten-Indikator im Viewer, deshalb hier keine eigene Regel. */

/*
 * Die Zuordnung mehrfach vorhandener Tests steht seit dem Feinschliff nicht mehr in der
 * Seitenleisten-Tabelle, sondern als Warn-Block (infoelem--warning, 1_info-element.css)
 * direkt unter dem Bestätigen-Knopf - eine manuelle Pflicht-Entscheidung, die im
 * Hauptbereich niemand übersehen kann. Die Optionen sind anklickbare Karten mit selbst
 * gezeichnetem Radio-Punkt: der globale Reset in 1_responsive-sidebar.css setzt
 * appearance: none auf alle Inputs, ein nativer Radio-Punkt würde gar nicht dargestellt.
 * Farben aus der Token-Palette (design_overview): Primärblau #4279bc, Auswahl-Fläche
 * #eff6ff, dunkles Blau #163c6b, Fokusring #93aaf7, Fehlertext #700a0a.
 */
.paper_eval_patient_choice_area {
    max-width: 800px;
}

.paper_eval_patient_choice_options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    margin-top: var(--sp-xs);
}

.paper_eval_patient_choice_option {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 0.55rem 1rem;
    border: 1px solid #d6d6d6;
    border-radius: 0.5em;
    background-color: white;
    color: #222222;
    font-size: var(--text-size-90);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.paper_eval_patient_choice_option:hover {
    border-color: #4279bc;
}

.paper_eval_patient_choice_option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    border: 2px solid #d6d6d6;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.paper_eval_patient_choice_option input[type="radio"]:focus-visible {
    outline: 2px solid #93aaf7;
    outline-offset: 1px;
}

.paper_eval_patient_choice_option input[type="radio"]:checked {
    border-color: #4279bc;
    background-color: #4279bc;
    box-shadow: inset 0 0 0 3px white;
}

.paper_eval_patient_choice_option_selected {
    border-color: #4279bc;
    background-color: #eff6ff;
    color: #163c6b;
    box-shadow: 0 2px 6px rgba(66, 121, 188, 0.25);
}

.paper_eval_patient_choice_notice {
    margin: var(--sp-xs) 0 0 0;
    font-weight: 600;
    color: #700a0a;
}

@media (max-width: 768px) {
    .paper_eval_dropzone {
        padding: var(--sp-m) var(--sp-s);
    }

    .paper_eval_tabs {
        display: flex;
        align-self: stretch;
    }

    .paper_eval_tab {
        flex: 1;
        justify-content: center;
    }

    /* Auf schmalen Geräten nehmen Tabs und Auswerten-Button die ganze Breite. */
    .paper_eval_toolbar {
        align-items: stretch;
    }

    .paper_eval_toolbar .confirm_main_blue_btn {
        justify-content: center;
        padding: 1rem;
    }

    .paper_eval_waiting_card {
        min-width: 100%;
    }

    .paper_eval_waiting_inner {
        padding: var(--sp-m);
        gap: var(--sp-m);
    }
}

/*
 * Vorlagen-Prüfung im Aufnahme-Bereich (2026-08-16).
 *
 * Löst den früheren template_warning_modal ab. Die Karte liegt über der Dropzone und
 * blockiert den "Auswerten"-Knopf, bis der Nutzer bestätigt hat - Begründung im
 * Kopfkommentar von evaluation_intake.blade.php. Die Grundoptik kommt aus
 * 1_info-element.css (.infoelem--warning), hier stehen nur Liste, Aktionszeile und der
 * Bestätigt-Zustand.
 */
.paper_eval_template_gate {
    width: 100%;
}

/* .infoelem__icon aus 1_info-element.css ist eine 20x20-Box ohne Regel für das svg darin,
   die Hugeicons bringen aber width/height 24 mit. Ohne das hier ragt das Warnzeichen aus
   seiner Box in die Überschrift. Bewusst nur auf diese Karte begrenzt: dieselbe
   Abweichung steckt in jedem .infoelem der Anwendung und gehört zentral gelöst, nicht
   nebenbei in einer Papiertest-Datei. */
.paper_eval_template_gate .infoelem__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.paper_eval_template_gate_list {
    list-style: none;
    padding: 0;
    margin: var(--sp-s) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.paper_eval_template_gate_item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

/* Die Vorlagen-Zeile. Eigene, bewusst kleine Gestaltung - der frühere Modal-Block hing an
   css/surveyjs/1_accordion.css, die diese Ansicht nicht lädt. Der ganze Kasten ist der
   Link, damit es kein Ziel gibt, das man knapp verfehlen kann. Weisser Grund, weil er auf
   dem gelben Warnton der Karte liegt und sich als eigenes Element abheben soll. */
.paper_eval_template_gate_link {
    display: flex;
    align-items: center;
    gap: var(--sp-s);
    padding: var(--sp-xs) var(--sp-s);
    border: 1px solid hsl(35, 60%, 78%);
    border-radius: 0.45em;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paper_eval_template_gate_link:hover,
.paper_eval_template_gate_link:focus-visible {
    border-color: #b07d1a;
    box-shadow: 0 2px 10px rgba(148, 103, 19, 0.16);
}

.paper_eval_template_gate_link_icon {
    display: flex;
    flex: none;
    color: #b07d1a;
}

.paper_eval_template_gate_link_icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* min-width: 0 lässt lange Dateinamen unten kürzen, statt den Kasten aufzuziehen. */
.paper_eval_template_gate_link_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.paper_eval_template_gate_name {
    font-size: var(--text-size-95);
    font-weight: 600;
    color: #946713;
}

.paper_eval_template_gate_file {
    font-size: var(--text-size-85);
    color: grey;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Das Pfeil-Symbol sagt "öffnet in einem neuen Tab" und ist deshalb dezent. */
.paper_eval_template_gate_link_open {
    display: flex;
    flex: none;
    color: #b07d1a;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.paper_eval_template_gate_link:hover .paper_eval_template_gate_link_open {
    opacity: 1;
}

.paper_eval_template_gate_link_open svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* Ohne hinterlegte Vorlage gibt es keinen Link, nur den Namen und den Hinweis. */
.paper_eval_template_gate_missing {
    color: #b00020;
    font-size: var(--text-size-95);
}

.paper_eval_template_gate_action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-s);
    margin-top: var(--sp-m);
}

.paper_eval_template_gate_note {
    color: grey;
    font-size: var(--text-size-90);
}

/*
 * Bestätigt-Zustand. Ein Klassenwechsel auf der Karte
 * (.paper_eval_template_gate_confirmed, gesetzt in paper_evaluation_view.js) schaltet
 * alles um: Erklärung, Vorlagen-Liste und Knopf verschwinden, das Warnzeichen wird zum
 * Haken, und es bleibt eine grüne Zeile stehen. Bewusst hier statt über style.display im
 * Skript - dann steht der ganze Zustandswechsel an einer Stelle.
 */
.paper_eval_template_gate .paper_eval_template_gate_icon_done,
.paper_eval_template_gate_done {
    display: none;
}

.paper_eval_template_gate_icon_open,
.paper_eval_template_gate_confirmed .paper_eval_template_gate_icon_done {
    display: block;
}

.paper_eval_template_gate_confirmed .paper_eval_template_gate_body,
.paper_eval_template_gate_confirmed .paper_eval_template_gate_icon_open {
    display: none;
}

.paper_eval_template_gate_confirmed .paper_eval_template_gate_done {
    display: block;
    font-size: var(--text-size-95);
    font-weight: 600;
}

/* Die Karte trägt im bestätigten Zustand nur noch eine Zeile - die 1px Versatz, die
   .infoelem__icon für mehrzeiligen Text mitbringt, lassen das Symbol daneben dann zu tief
   sitzen. */
.paper_eval_template_gate_confirmed .infoelem__icon {
    margin-top: 0;
}

/*
 * Einstieg zurück in die geführte Einführung, in den "Wichtigen Hinweisen".
 *
 * Das Overlay geht nur beim ersten Papiertest von allein auf, danach ist dieser Knopf der
 * einzige Weg dorthin - deshalb sitzt er im Hinweis-Block und nicht in der Seitenleiste,
 * die als passive Information gelesen wird.
 */
.paper_eval_guide_replay {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-s);
    margin: var(--sp-m) 0;
}

.paper_eval_guide_replay_btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-xs) var(--sp-s);
    border: 1px solid rgba(66, 121, 188, 0.35);
    border-radius: 0.4em;
    background: #ffffff;
    color: #275996;
    font-size: var(--text-size-95);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.paper_eval_guide_replay_btn:hover {
    background: rgba(66, 121, 188, 0.08);
    border-color: #4279bc;
}

.paper_eval_guide_replay_icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.paper_eval_guide_replay_note {
    color: grey;
    font-size: var(--text-size-90);
}