/* Shared UI – layout helpers only. Colors come from Radzen theme CSS variables.
   See https://blazor.radzen.com/colors */

.rz-loading-spinner .spinner-border {
    width: 2rem;
    height: 2rem;
}

.app-content-row {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
@media (min-width: 768px) {
    .app-content-row { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 992px) {
    .app-content-row { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 767.98px) {
    .rz-layout {
        grid-template-columns: 0 1fr;
    }
    .rz-sidebar.rz-sidebar-expanded {
        position: fixed;
        top: var(--rz-header-min-height);
        bottom: 0;
        z-index: 1000;
        box-shadow: var(--rz-shadow-5);
    }
}

.rz-dialog {
    max-width: 95vw;
}

@media (max-width: 767.98px) {
    .rz-button-xs.rz-button-icon-only,
    .rz-button-sm.rz-button-icon-only {
        min-width: 40px;
        min-height: 40px;
        padding: 0.6rem;
    }
}

/* ---------- Login pages (Admin + Student) ---------- */
/* ---------- Auth shell (login / registration) ---------- */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--rz-body-background-color);
    color: var(--rz-text-color);
}

@media (min-width: 900px) {
    .auth-shell {
        grid-template-columns: minmax(280px, 1.05fr) minmax(360px, 0.95fr);
    }
}

.auth-shell__media {
    display: none;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

@media (min-width: 900px) {
    .auth-shell__media {
        display: flex;
        align-items: flex-end;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

.auth-shell__media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
}

.auth-shell__media-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--rz-primary) 55%, transparent), transparent 55%),
        linear-gradient(0deg, color-mix(in srgb, var(--rz-base-900) 82%, transparent), color-mix(in srgb, var(--rz-base-900) 35%, transparent));
}

.auth-shell__media--student .auth-shell__media-bg::after {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--rz-success) 45%, transparent), transparent 55%),
        linear-gradient(0deg, color-mix(in srgb, var(--rz-base-900) 82%, transparent), color-mix(in srgb, var(--rz-base-900) 35%, transparent));
}

.auth-shell__media-content {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem 2.75rem;
    color: var(--rz-base-50);
    max-width: 34rem;
}

.auth-shell__media-brand {
    margin-bottom: 1.5rem;
    color: inherit;
}

.auth-shell__media-brand .app-brand__name,
.auth-shell__media-brand .app-brand__tagline {
    color: var(--rz-base-50);
}

.auth-shell__media-title {
    color: var(--rz-base-50) !important;
    margin: 0 0 0.75rem !important;
    font-weight: 700 !important;
}

.auth-shell__media-copy {
    color: color-mix(in srgb, var(--rz-base-50) 88%, transparent) !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.5 !important;
}

.auth-shell__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.auth-shell__bullets li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.auth-shell__bullet-icon {
    font-size: 1.25rem !important;
    opacity: 0.95;
}

.auth-shell__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem 1.75rem;
    width: 100%;
}

@media (min-width: 900px) {
    .auth-shell__panel {
        padding: 2rem 1.75rem;
    }
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 1.5rem 1.25rem !important;
    border: var(--rz-border-width) solid var(--rz-base-300) !important;
    box-shadow: var(--rz-shadow-4) !important;
}

.auth-card--wide {
    max-width: 560px;
}

@media (min-width: 480px) {
    .auth-card {
        padding: 1.75rem 1.5rem !important;
    }
}

.auth-card__title {
    margin: 0 !important;
    color: var(--rz-text-title-color) !important;
}

.auth-card__subtitle {
    margin: 0 !important;
    color: var(--rz-text-secondary-color) !important;
}

.auth-card__footer {
    padding-top: 0.35rem;
    border-top: var(--rz-border-width) solid var(--rz-base-300);
    margin-top: 0.25rem;
}

.auth-card__form {
    width: 100%;
}

.auth-field-hint {
    display: block;
    margin: 0.2rem 0 0 !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--rz-text-tertiary-color, var(--rz-text-secondary-color)) !important;
    opacity: 0.75;
}

.auth-demo {
    margin: 0 !important;
}

.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .auth-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-form-grid__span {
        grid-column: 1 / -1;
    }
}

.app-theme-switcher .rz-dropdown {
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .app-theme-switcher .rz-dropdown {
        min-width: 7.5rem !important;
        max-width: 9rem !important;
    }
}

/* ---------- App brand ---------- */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.app-brand:hover {
    text-decoration: none;
    opacity: 0.92;
}

.app-brand__mark {
    display: block;
    object-fit: contain;
    border-radius: var(--rz-border-radius);
    flex-shrink: 0;
    background: var(--rz-base-50);
}

.app-brand__wordmark {
    display: block;
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.app-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.app-brand__name {
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    color: var(--rz-text-color);
}

.app-brand__tagline {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-primary);
    letter-spacing: 0.02em;
}

.app-brand--header .app-brand__name,
.app-brand--header .app-brand__tagline {
    color: currentColor;
}

.app-brand--header .app-brand__tagline {
    opacity: 0.8;
}

.app-brand--sidebar {
    margin: 0.35rem 0 0.75rem;
}

/* ---------- Question builder (create / edit) — compact ---------- */
.question-builder {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.qb-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rz-primary) 7%, transparent), transparent 55%),
        var(--rz-base-background-color);
}

.qb-hero__title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.qb-hero__title {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
}

.qb-hero__subtitle {
    margin: 0.15rem 0 0 !important;
    color: var(--rz-text-secondary-color) !important;
}

.qb-panel {
    border: var(--rz-border-width) solid var(--rz-base-300) !important;
}

.qb-panel.rz-card,
.qb-panel.rz-variant-filled {
    padding: 0.55rem 0.65rem !important;
}

.qb-step {
    padding: 0.15rem 0;
}

.qb-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.5rem;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-100) 40%, var(--rz-base-background-color));
}

.qb-section__head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.qb-section__head--inline,
.qb-section__head--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.qb-section__hint {
    margin: 0 !important;
    color: var(--rz-text-secondary-color) !important;
    font-size: 0.72rem !important;
}

.qb-tip {
    margin: 0;
    padding: 0.35rem 0.55rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-info) 8%, transparent);
    border: var(--rz-border-width) solid color-mix(in srgb, var(--rz-info) 22%, var(--rz-base-300));
    color: var(--rz-text-color);
    font-size: 0.78rem;
    line-height: 1.3;
}

.qb-cascade-path {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.2rem 0.45rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
    border: var(--rz-border-width) solid color-mix(in srgb, var(--rz-success) 28%, var(--rz-base-300));
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qb-cascade-path .rzi {
    font-size: 0.9rem !important;
    flex-shrink: 0;
}

.qb-form-grid {
    display: grid;
    gap: 0.5rem 0.65rem;
    align-items: end;
}

.qb-form-grid--5 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.qb-form-grid--6 {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (min-width: 1100px) {
    .qb-form-grid--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .qb-form-grid--6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.qb-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 1.25rem 0.75rem;
    border: var(--rz-border-width) dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-100) 60%, transparent);
}

.qb-locked__icon {
    font-size: 1.35rem !important;
    color: var(--rz-text-secondary-color);
}

.qb-actions {
    position: sticky;
    bottom: 0.4rem;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, transparent);
    border: var(--rz-border-width) solid var(--rz-base-300);
    backdrop-filter: blur(6px);
}

.qb-actions--split {
    justify-content: space-between;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.question-option-card {
    border-color: var(--rz-base-300) !important;
    padding: 0.55rem 0.65rem !important;
}

.question-option-card--correct {
    border-color: var(--rz-success) !important;
    box-shadow: inset 3px 0 0 var(--rz-success);
}

.question-option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    flex-shrink: 0;
}

.question-tof-card {
    max-width: 22rem;
    padding: 0.55rem 0.65rem !important;
}

.question-tof-list .rz-radiobutton-list-item {
    padding: 0.35rem 0.15rem;
}

.question-builder .rz-form-field {
    margin-bottom: 0 !important;
}

.question-builder .app-html-editor__chrome {
    margin-bottom: 0.25rem;
}

.question-builder .app-html-editor__frame .rz-html-editor-content {
    min-height: 4rem;
}

/* ---------- App rich text editor ---------- */
.app-html-editor {
    width: 100%;
    max-width: 100%;
}

.app-html-editor__chrome {
    margin-bottom: 0.4rem;
}

.app-html-editor__shell {
    width: 100%;
    max-width: 100%;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: visible;
    background: var(--rz-base-background-color);
}

.app-html-editor__frame {
    width: 100%;
    max-width: 100%;
    overflow: auto;
}

.app-html-editor__frame .rz-html-editor,
.app-html-editor__control {
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}

.app-html-editor__frame .rz-html-editor-content {
    min-height: 4rem;
}

.app-html-editor__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.95rem;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    background: color-mix(in srgb, var(--rz-base-200) 80%, transparent);
    border-top: var(--rz-border-width) solid var(--rz-base-300);
}

.app-html-editor__grip:hover,
.app-html-editor__grip:active {
    background: color-mix(in srgb, var(--rz-primary) 14%, var(--rz-base-200));
}

.app-html-editor__grip-bar {
    width: 2.75rem;
    height: 0.22rem;
    border-radius: 999px;
    background: var(--rz-base-600);
    opacity: 0.85;
}

body.app-html-editor--resizing {
    cursor: ns-resize !important;
    user-select: none !important;
}

body.app-html-editor--resizing iframe {
    pointer-events: none !important;
}

.app-html-editor__drag-overlay {
    display: none;
}

/* In-editor image transform handles (click image → drag corners/sides) */
.oebm-html-editor-content--img-resize {
    position: relative;
}

.oebm-html-editor-content--img-resize img.rz-state-selected {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

.oebm-img-resize-box {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--rz-primary);
    pointer-events: none;
    z-index: 6;
}

.oebm-img-resize-box--active {
    border-style: dashed;
}

.oebm-img-resize-box--moving {
    opacity: 0.55;
}

.oebm-img-move-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    z-index: 8;
    background: var(--rz-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-on-primary, #fff) 70%, transparent);
}

.oebm-img-move-handle::before {
    content: "";
    position: absolute;
    inset: 7px;
    background:
        linear-gradient(var(--rz-on-primary, #fff), var(--rz-on-primary, #fff)) center / 12px 2px no-repeat,
        linear-gradient(var(--rz-on-primary, #fff), var(--rz-on-primary, #fff)) center / 2px 12px no-repeat;
    opacity: 0.95;
}

.oebm-img-move-handle:active {
    cursor: grabbing;
}

.oebm-img-drop-caret {
    position: absolute;
    width: 2px;
    background: var(--rz-danger, #c62828);
    pointer-events: none;
    z-index: 9;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-base-background-color) 60%, transparent);
}

.oebm-html-editor-content--img-resize img.oebm-img-dragging {
    opacity: 0.45;
}

body.oebm-img-moving {
    user-select: none !important;
    cursor: grabbing !important;
}

body.oebm-img-moving iframe {
    pointer-events: none !important;
}

.oebm-img-resize-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    background: var(--rz-primary);
    border: 1px solid var(--rz-on-primary, #fff);
    border-radius: 1px;
    pointer-events: auto;
    touch-action: none;
    z-index: 7;
}

.oebm-img-resize-handle--nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.oebm-img-resize-handle--n  { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.oebm-img-resize-handle--ne { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.oebm-img-resize-handle--e  { right: 0; top: 50%; transform: translate(50%, -50%); cursor: ew-resize; }
.oebm-img-resize-handle--se { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.oebm-img-resize-handle--s  { left: 50%; bottom: 0; transform: translate(-50%, 50%); cursor: ns-resize; }
.oebm-img-resize-handle--sw { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.oebm-img-resize-handle--w  { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }

.oebm-img-resize-size {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -6px);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    color: var(--rz-on-primary, #fff);
    background: var(--rz-primary);
}

body.oebm-img-resizing {
    user-select: none !important;
    cursor: grabbing !important;
}

body.oebm-img-resizing iframe {
    pointer-events: none !important;
}

.app-html-editor__img-toolbar {
    margin-top: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 70%, transparent);
}

/* ---------- Admin pages (reports, lists) ---------- */
.app-page {
    width: 100%;
    padding-bottom: 1rem;
}

.qb-form-grid--auto {
    display: grid;
    gap: 0.5rem 0.65rem;
    align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

/* ---------- HTML display (questions / options from AppHtmlEditor) ---------- */
.app-html-display {
    text-transform: none !important;
    letter-spacing: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
    color: inherit;
}

.app-html-display p {
    margin: 0 0 0.35em;
}

.app-html-display p:last-child {
    margin-bottom: 0;
}

.app-html-display img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.app-html-display img[width] {
    height: auto;
    max-width: 100%;
}

/* Compact preview in admin grids (question bank, pickers) — keep rows readable */
.app-html-display--grid {
    max-height: 7.5rem;
    overflow: auto;
    line-height: 1.35;
    font-size: 0.875rem;
}

.app-html-display--grid img,
.app-html-display--grid img[width],
.app-html-display--grid img.oebm-diagram {
    max-width: 7.5rem !important;
    max-height: 5.5rem !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    border-radius: var(--rz-border-radius);
}

.app-html-display--grid table {
    display: block;
    max-height: 5.5rem;
    overflow: auto;
    width: max-content;
    max-width: 100%;
}

.app-html-display--grid p {
    margin: 0 0 0.2em;
}

/* Math formulas (KaTeX HTML inserted from AppHtmlEditor) */
.oebm-math,
.app-html-display .oebm-math,
.app-html-editor .oebm-math {
    text-transform: none !important;
    letter-spacing: normal;
}

.oebm-math--inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.15em;
}

.oebm-math--display {
    display: block;
    margin: 0.65rem 0;
    overflow-x: auto;
    text-align: center;
}

.oebm-math-preview {
    min-height: 3.25rem;
    padding: 0.75rem;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    overflow-x: auto;
}

.oebm-math-error {
    color: var(--rz-danger);
    font-size: 0.85rem;
}

.oebm-math-muted {
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

.oebm-math-dialog code {
    font-size: 0.85em;
}

.app-html-display ul,
.app-html-display ol {
    margin: 0.25em 0 0.35em;
    padding-left: 1.25rem;
}

.app-html-display table {
    max-width: 100%;
    border-collapse: collapse;
}

.app-html-display pre,
.app-html-display code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Header user chip (desktop name + initial avatar) ---------- */
.app-header-username {
    margin-right: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-on-primary);
    background: color-mix(in srgb, var(--rz-primary) 85%, var(--rz-base-900));
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .app-header-username {
        display: none !important;
    }
}

/* ---------- Excel import ---------- */
.qi-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.15rem 0.85rem;
    border: var(--rz-border-width) dashed var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-base-background-color));
    text-align: center;
}

.qi-dropzone__icon {
    font-size: 1.7rem !important;
    color: var(--rz-primary);
}

.qi-dropzone input[type="file"] {
    max-width: min(100%, 22rem);
}

.qi-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    border: var(--rz-border-width) solid color-mix(in srgb, var(--rz-success) 28%, var(--rz-base-300));
    font-size: 0.78rem;
    font-weight: 600;
}

.qi-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.qi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.1rem 0.75rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

/* ---------- Exam taking: palette / legend colors ---------- */
.exam-q--not-visited {
    background: var(--rz-base-100) !important;
    border-color: var(--rz-base-300) !important;
    color: var(--rz-text-color) !important;
}

.exam-q--not-answered {
    background: var(--rz-danger) !important;
    border-color: var(--rz-danger-dark) !important;
    color: var(--rz-on-danger) !important;
}

.exam-q--answered {
    background: var(--rz-success) !important;
    border-color: var(--rz-success-dark) !important;
    color: var(--rz-on-success) !important;
}

.exam-q--marked {
    background: var(--rz-info) !important;
    border-color: var(--rz-info-dark) !important;
    color: var(--rz-on-info) !important;
}

.exam-q--answered-marked {
    background: var(--rz-info) !important;
    border-color: var(--rz-success) !important;
    color: var(--rz-on-info) !important;
    box-shadow: inset 0 0 0 2px var(--rz-success);
}

.exam-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem;
}

.exam-legend__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: var(--rz-border-width) solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
}

.exam-legend__swatch {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.exam-legend__swatch--square {
    border-radius: var(--rz-border-radius);
}

.exam-feature-list {
    margin: 0;
    padding-left: 1.15rem;
}

.exam-feature-list li {
    margin: 0.25rem 0;
    line-height: 1.4;
}

/* ---------- draw.io embed overlay ---------- */
body.oebm-drawio-open {
    overflow: hidden;
}

.oebm-drawio-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--rz-base-900, #111) 72%, transparent);
}

.oebm-drawio-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    background: var(--rz-base-background-color);
    border-bottom: var(--rz-border-width) solid var(--rz-base-300);
    color: var(--rz-text-color);
}

.oebm-drawio-chrome__title {
    font-size: 0.85rem;
    line-height: 1.3;
}

.oebm-drawio-chrome__close {
    border: none;
    background: var(--rz-base-200);
    color: inherit;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.oebm-drawio-chrome__close:hover {
    background: var(--rz-danger);
    color: var(--rz-on-danger, #fff);
}

.oebm-drawio-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #fff;
}

.app-html-display img.oebm-diagram,
.app-html-editor img.oebm-diagram {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    border: 1px dashed color-mix(in srgb, var(--rz-primary) 35%, transparent);
    border-radius: var(--rz-border-radius);
    padding: 2px;
}