/* /Components/Layout/ExamLayout.razor.rz.scp.css */
#blazor-error-ui[b-wu7ovyn2tr] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wu7ovyn2tr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-hxjjs5voze] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hxjjs5voze] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-amegj6c9i0],
.components-reconnect-repeated-attempt-visible[b-amegj6c9i0],
.components-reconnect-failed-visible[b-amegj6c9i0],
.components-pause-visible[b-amegj6c9i0],
.components-resume-failed-visible[b-amegj6c9i0],
.components-rejoining-animation[b-amegj6c9i0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-retrying[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-failed[b-amegj6c9i0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-amegj6c9i0] {
    display: block;
}


#components-reconnect-modal[b-amegj6c9i0] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-amegj6c9i0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-amegj6c9i0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-amegj6c9i0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-amegj6c9i0]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-amegj6c9i0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-amegj6c9i0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-amegj6c9i0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-amegj6c9i0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-amegj6c9i0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-amegj6c9i0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-amegj6c9i0] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-amegj6c9i0] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-amegj6c9i0] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-amegj6c9i0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-amegj6c9i0] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-amegj6c9i0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-amegj6c9i0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-amegj6c9i0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SetupLayout.razor.rz.scp.css */
.vm-setup-shell[b-xatwiini9v] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem 4rem;
    position: relative;
    overflow: hidden;
}

.vm-setup-shell[b-xatwiini9v]::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(79,70,229,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(6,182,212,.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.vm-setup-content[b-xatwiini9v] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

/* ── Mode selection cards ── */
.vm-mode-card[b-xatwiini9v] {
    width: 100%;
    height: 100%;
    text-align: left;
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.08);
    border-radius: var(--vm-radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    color: inherit;
    display: block;
}

.vm-mode-card:hover[b-xatwiini9v] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.vm-mode-card.is-selected[b-xatwiini9v] {
    background: rgba(79,70,229,.15);
    border-color: var(--vm-primary);
    box-shadow: 0 0 0 1px var(--vm-primary), 0 8px 32px rgba(79,70,229,.25);
}

.vm-mode-card .vm-mode-icon[b-xatwiini9v] {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.vm-mode-card .vm-mode-title[b-xatwiini9v] {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.4rem;
}

.vm-mode-card .vm-mode-desc[b-xatwiini9v] {
    font-size: 0.82rem;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
}

/* ── Setup card (dark glass) ── */
.vm-setup-card[b-xatwiini9v] {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--vm-radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.vm-setup-card-header[b-xatwiini9v] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vm-setup-card-body[b-xatwiini9v] { padding: 1.5rem; }

.vm-setup-card-footer[b-xatwiini9v] {
    padding: 1.125rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Dark inputs ── */
.vm-setup-input[b-xatwiini9v] {
    display: block;
    width: 100%;
    padding: 0.675rem 0.9rem;
    font-size: 0.95rem;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: var(--vm-radius-sm);
    color: white;
    transition: all 0.2s;
}

.vm-setup-input[b-xatwiini9v]::placeholder { color: rgba(255,255,255,.28); }

.vm-setup-input:focus[b-xatwiini9v] {
    outline: none;
    border-color: var(--vm-primary-light);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 3px rgba(79,70,229,.2);
}

.vm-setup-label[b-xatwiini9v] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 0.375rem;
}

.vm-setup-label .req[b-xatwiini9v] { color: #f87171; margin-left: 2px; }

.vm-setup-hint[b-xatwiini9v] {
    font-size: 0.78rem;
    color: rgba(255,255,255,.35);
    margin-top: 0.35rem;
    line-height: 1.45;
}

/* ── Alerts dark ── */
.vm-setup-alert[b-xatwiini9v] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--vm-radius);
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.vm-setup-alert-danger[b-xatwiini9v] {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.25);
    color: #fca5a5;
}

.vm-setup-alert-success[b-xatwiini9v] {
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
    color: #6ee7b7;
}

.vm-setup-alert-info[b-xatwiini9v] {
    background: rgba(79,70,229,.1);
    border-color: rgba(79,70,229,.2);
    color: rgba(255,255,255,.7);
}

/* ── Step indicator ── */
.vm-setup-steps[b-xatwiini9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.vm-setup-step-dot[b-xatwiini9v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: all 0.25s;
}

.vm-setup-step-dot.active[b-xatwiini9v] {
    background: var(--vm-primary);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(79,70,229,.6);
}

.vm-setup-step-dot.done[b-xatwiini9v] {
    background: var(--vm-success);
}

/* ── Success screen ── */
.vm-setup-success-icon[b-xatwiini9v] {
    font-size: 4rem;
    color: var(--vm-success);
    filter: drop-shadow(0 0 24px rgba(16,185,129,.5));
    animation: vm-successPop-b-xatwiini9v 0.5s cubic-bezier(.17,.67,.3,1.3) both;
}

@keyframes vm-successPop-b-xatwiini9v {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Buttons (dark variant) ── */
.vm-setup-btn-back[b-xatwiini9v] {
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.7);
    border-radius: var(--vm-radius-sm);
    padding: 0.575rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.vm-setup-btn-back:hover[b-xatwiini9v] {
    background: rgba(255,255,255,.1);
    color: white;
}

/* ── Connection test result ── */
.test-ok[b-xatwiini9v]   { color: #6ee7b7; }
.test-fail[b-xatwiini9v] { color: #fca5a5; }

#blazor-error-ui[b-xatwiini9v] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xatwiini9v] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Teacher/ExamViolationsDialog.razor.rz.scp.css */
/* Kopfzeile über der Liste: links die Prüfung, rechts was insgesamt zusammenkam. */
.vio-meta[b-kvj0l7fx9i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

/* Eigene Zeile: sonst brechen die Pillen um den Titel herum und die erste
   landet allein rechts oben. */
.vio-quiz[b-kvj0l7fx9i] {
    width: 100%;
    margin-bottom: 0.1rem;
    font-size: 0.8rem;
    color: var(--vm-gray-500);
}

.vio-pill[b-kvj0l7fx9i] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Rot heißt: war weg. Bernstein heißt: die Eingabe war auffällig — das kann
   auch eine Autokorrektur gewesen sein und darf nicht gleich aussehen. */
.vio-pill-away[b-kvj0l7fx9i] { background: var(--vm-danger-light); color: #991b1b; }
.vio-pill-input[b-kvj0l7fx9i] { background: var(--vm-warning-light); color: #92400e; }

.vio-list[b-kvj0l7fx9i] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    overflow: hidden;
}

.vio-head[b-kvj0l7fx9i],
.vio-row[b-kvj0l7fx9i] {
    display: grid;
    grid-template-columns: 5.5rem 12rem 1fr 5rem;
    gap: 0.25rem 0.9rem;
    align-items: baseline;
    padding: 0.55rem 0.9rem;
}

.vio-head[b-kvj0l7fx9i] {
    background: var(--vm-gray-50);
    border-bottom: 1px solid var(--vm-gray-200);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vm-gray-400);
}

.vio-row + .vio-row[b-kvj0l7fx9i] { border-top: 1px solid var(--vm-gray-100); }
.vio-row:hover[b-kvj0l7fx9i] { background: var(--vm-gray-50); }

.vio-time[b-kvj0l7fx9i] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--vm-gray-500);
    white-space: nowrap;
}

.vio-kind[b-kvj0l7fx9i] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vm-gray-700);
}

.vio-kind i[b-kvj0l7fx9i] { margin-right: 0.4rem; }

/* Nur das Symbol trägt die Farbe. Färbt man die Bezeichnung mit, liest sich jede
   Zeile als Alarm — auch die, die genauso gut eine Autokorrektur gewesen sein kann. */
.vio-kind-away i[b-kvj0l7fx9i] { color: var(--vm-danger); }
.vio-kind-input i[b-kvj0l7fx9i] { color: var(--vm-warning); }

.vio-detail[b-kvj0l7fx9i] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--vm-gray-600);
    min-width: 0;
}

.vio-count[b-kvj0l7fx9i] { color: var(--vm-gray-500); }

/* Eingefügter Text kann eine halbe Seite sein. Zwei Zeilen reichen zum
   Wiedererkennen, der Rest hängt im Tooltip — sonst wächst eine einzige Zeile
   über den halben Dialog. */
.vio-text[b-kvj0l7fx9i] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.15rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--vm-gray-100);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.76rem;
    color: var(--vm-gray-700);
    overflow-wrap: anywhere;
}

.vio-question[b-kvj0l7fx9i] {
    font-size: 0.75rem;
    color: var(--vm-gray-400);
    text-align: right;
    white-space: nowrap;
}

/* Auf dem Handy nebeneinander nicht zu halten: Uhrzeit, Art und Frage bleiben in
   einer Zeile, die Einzelheiten rücken darunter über die volle Breite. */
@media (max-width: 640px) {
    .vio-head[b-kvj0l7fx9i] { display: none; }

    .vio-row[b-kvj0l7fx9i] {
        grid-template-columns: max-content 1fr max-content;
        padding: 0.7rem 0.75rem;
    }

    .vio-time[b-kvj0l7fx9i] { grid-column: 1; grid-row: 1; }
    .vio-kind[b-kvj0l7fx9i] { grid-column: 2; grid-row: 1; }
    .vio-question[b-kvj0l7fx9i] { grid-column: 3; grid-row: 1; }
    .vio-detail[b-kvj0l7fx9i] { grid-column: 1 / -1; grid-row: 2; }
}
/* /Components/Pages/Teacher/QuizOverview.razor.rz.scp.css */
/* Titel und Beschreibung teilen sich eine Zelle; die Beschreibung bleibt einzeilig,
   damit eine lange Liste nicht durch einzelne Romane auseinandergezogen wird. */
.qo-head[b-qy3s16vlhg] {
    min-width: 0;
}

/* Mit width: 0 und min-width: 100% zählt die einzeilige Beschreibung nicht zur
   Breite, die die Tabelle mindestens braucht, füllt aber die Zelle und wird an
   ihrem Rand abgeschnitten. Sonst schob sie die Aktionen aus der Karte, sobald
   die Spalte „Erstellt von“ dazukam. */
.qo-desc[b-qy3s16vlhg] {
    width: 0;
    min-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    color: var(--vm-gray-500);
}

.qo-nowrap[b-qy3s16vlhg],
th[b-qy3s16vlhg] {
    white-space: nowrap;
}

/* Die Titelspalte nimmt, was die übrigen Spalten übrig lassen. Die Mindestbreite
   hält Titel lesbar; wird es noch enger, scrollt die Tabelle. */
@media (min-width: 768px) {
    .qo-title[b-qy3s16vlhg] {
        width: 100%;
    }

    .qo-head[b-qy3s16vlhg] {
        min-width: 10rem;
    }
}

/* Auf dem Tablet, bevor die Zeilen zu Karten werden, reichte die Breite sonst
   nicht: Die Knöpfe zeigen nur ihr Symbol, und das Erstelldatum tritt zurück. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .qo-created[b-qy3s16vlhg],
    .qo-actions .qo-btn-label[b-qy3s16vlhg] {
        display: none;
    }
}

/* Die Knöpfe liegen in einem eigenen Flex-Container: Wäre die Zelle selbst flex,
   verlöre sie die Zeilenhöhe und bei zweizeiligen Titeln rutschten Knöpfe und
   Trennlinie aus der Zeile. */
@media (max-width: 767.98px) {
    .qo-head[b-qy3s16vlhg] {
        flex: 1 1 100%;
    }

    .qo-desc[b-qy3s16vlhg] {
        white-space: normal;
    }

    .qo-actions[b-qy3s16vlhg] {
        padding-top: 0.5rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--vm-gray-100);
    }

    .qo-actions .vm-td-actions[b-qy3s16vlhg] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}