/* VisiLex – Ergänzungen zu theme.css/layout.css (Gestaltung wie Lehreinheit: Universitätsfarben, Source Sans 3, Hell/Dunkel) */

/* ---------- Kopfzeile: Inhalte der Module im Bereich #Progress ---------- */
.app-context { gap: .5rem; }
.app-context > .nav, .app-context #navList { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.app-context .nav-link { padding: .4rem .8rem; border-radius: 999px; color: var(--bs-body-color); font-weight: 600; white-space: nowrap; }
.app-context .nav-link:hover { background: var(--up-soft); color: var(--bs-emphasis-color); }
.app-context .nav-pills .nav-link.active { background: var(--up-orange); color: var(--up-on-orange); }
.brand-title .brand-name { letter-spacing: .01em; }

.app-actions .btn { white-space: nowrap; flex-shrink: 0; }
.input-group > .btn { border-radius: var(--bs-border-radius); }

/* Fortschrittsbalken (Fragen, Karteikarten) in der Kopfzeile */
#Progress.progress { flex: 1 1 auto; height: 1.5rem; max-width: 40rem; background: var(--up-track); border-radius: 999px; }
#Progress > #certain, #Progress > #uncertain, #Progress > #wrong, #Progress > #unused { border-radius: 0; font-size: .875rem; font-weight: 600; }
#Progress > div:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
#Progress > div:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* Abstand der Modulseiten (Inhalt unter der Kopfzeile) */
.app-main > #main.container-fluid { padding-top: 1.25rem; padding-bottom: 1.5rem; padding-inline: clamp(.75rem, 2.5vw, 2rem); }
.app-main h1, .app-main .h1 { color: var(--bs-emphasis-color); }
.card-header { background: var(--bs-tertiary-bg); }
.card-header h2 a, .card-header .h5 a { color: inherit; text-decoration: none; }
.card-header h2 a:hover { color: var(--up-accent); }
.list-group-item-primary { --bs-list-group-color: var(--up-accent); --bs-list-group-bg: var(--up-soft);
    --bs-list-group-action-hover-bg: var(--bs-primary-bg-subtle); --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-primary-bg-subtle); --bs-list-group-action-active-color: var(--bs-emphasis-color); font-weight: 600; }
.text-bg-primary { color: var(--up-on-orange) !important; background-color: var(--up-orange) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }

/* Startseite: Modulkacheln (wie Kurskacheln in Lehreinheit) */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.module-tile { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-radius: .875rem;
    background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; box-shadow: var(--up-shadow); transition: transform .15s ease, border-color .15s; }
a.module-tile:hover { transform: translateY(-2px); border-color: var(--up-orange); color: var(--bs-body-color); text-decoration: none; }
.module-tile .tile-icon { flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--up-soft); color: var(--up-orange-icon); font-size: 1.4rem; }
.module-tile .tile-title { font-weight: 700; line-height: 1.3; }
.module-tile .tile-meta { font-size: .875rem; color: var(--bs-secondary-color); }

/* Separates Gesetzesfenster: kompakte Kopfzeile im selben Stil */
.app-navbar { background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); border-bottom: 3px solid var(--up-orange);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); min-height: var(--hdr-h); }

/* Ausgabe von Fremd-HTML (Fragen, Karten, Fälle) */
#scroll img, .card-body img { max-width: 100%; height: auto; }
.gesetz-link { text-decoration: underline dotted; text-decoration-color: var(--up-orange); cursor: pointer; }
[data-bs-theme=dark] .card-body img[src$=".svg"], [data-bs-theme=dark] .card-body img[src$=".png"] { background-color: #fff; border-radius: .25rem; }

@media print {
    .app-navbar, #toastArea { display: none !important; }
}

/* Dark Mode: helle Hintergrundfarben aus NewSite.css (Lernmodule) anpassen */
[data-bs-theme=dark] #medium,
[data-bs-theme=dark] #uncertain,
[data-bs-theme=dark] #unused {
    color: var(--bs-body-color);
}

[data-bs-theme=dark] #uncertain {
    background-color: #997404;
}

[data-bs-theme=dark] #unused,
[data-bs-theme=dark] .card.ui-droppable-hover .card-body,
[data-bs-theme=dark] .card.Detail,
[data-bs-theme=dark] .card.Sub {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme=dark] #source .phrase.catchphrase {
    background-color: #664d03;
}

[data-bs-theme=dark] span.selectedText {
    background-color: #664d03;
    color: var(--bs-body-color);
    box-shadow: none;
}

[data-bs-theme=dark] .card.shortYes,
[data-bs-theme=dark] .card.Finished {
    background-color: #0f3d24;
}

[data-bs-theme=dark] .card.shortNo {
    background-color: #4a1a1f;
}

[data-bs-theme=dark] .card.Detail {
    border-color: var(--bs-border-color);
}

/* jsTree im Dark Mode */
[data-bs-theme=dark] .jstree-default .jstree-hovered,
[data-bs-theme=dark] .jstree-default .jstree-wholerow-hovered {
    background: var(--bs-tertiary-bg);
    box-shadow: none;
}

[data-bs-theme=dark] .jstree-default .jstree-clicked,
[data-bs-theme=dark] .jstree-default .jstree-wholerow-clicked {
    background: var(--bs-primary-bg-subtle);
    box-shadow: none;
}

[data-bs-theme=dark] .jstree-default .jstree-anchor {
    color: var(--bs-body-color);
}

[data-bs-theme=dark] div.cardView .leftSide,
[data-bs-theme=dark] div.cardView .rightSide {
    background-color: var(--bs-body-bg);
}

[data-bs-theme=dark] div#searchResults > div:hover {
    background-color: var(--bs-tertiary-bg);
    box-shadow: 0 0 6px rgba(0, 0, 0, .6);
    border-color: var(--bs-border-color);
}

/* ---------- Bewertungsknöpfe (Karteikarten: Nochmal/Schwer/Gut/Leicht; Fragen: Leicht/Gut/Schwer) ---------- */
.rate-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 3.5rem; padding: .4rem .25rem;
    border: 1px solid var(--bs-border-color); border-top: 4px solid var(--rate-c);
    border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color);
    font-weight: 700; transition: background-color .15s ease, transform .1s ease;
}
.rate-btn:hover { background: var(--bs-tertiary-bg); }
.rate-btn:active { transform: scale(.97); }
.rate-btn .rate-ivl { font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.rate-again { --rate-c: #b42318; }
.rate-hard { --rate-c: #c76a00; }
.rate-good { --rate-c: #2f7d32; }
.rate-easy { --rate-c: #1d6fd8; }
[data-bs-theme=dark] .rate-again { --rate-c: #f97066; }
[data-bs-theme=dark] .rate-hard { --rate-c: #fbb15c; }
[data-bs-theme=dark] .rate-good { --rate-c: #6fcf73; }
[data-bs-theme=dark] .rate-easy { --rate-c: #84b8ff; }
.vote-card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg); }
.vote-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 10rem)); justify-content: center; gap: .5rem; }
@media (max-width: 575.98px) { .vote-buttons { grid-template-columns: repeat(3, 1fr); } }

/* NewSite.css färbte #Progress für die frühere dunkle Navigationsleiste weiß; in der hellen Kopfzeile Textfarbe verwenden */
.app-header #Progress:not(.progress) { color: var(--bs-body-color); }

/* ---------- Modul Fragen (/question): Startansicht, Antwortkarten, Rückmeldung, Aktionsleiste ---------- */
.home-hero { border-top: 4px solid var(--up-orange); }
.area-tile { align-items: flex-start; }
.area-tile .min-w-0, .min-w-0 { min-width: 0; }
.area-progress { height: .4rem; background: var(--bs-tertiary-bg); }
.area-progress .area-answered { background: var(--up-orange); }

#QuestionFrame .question .card-header { font-weight: 600; }
.answer-card {
    display: block; width: 100%; padding: .85rem 1rem; min-height: 3.25rem;
    border: 2px solid var(--bs-border-color); border-radius: .875rem;
    background: var(--bs-body-bg); color: var(--bs-body-color); text-align: start;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.answer-card:hover:not(:disabled) { border-color: var(--up-orange); }
.answer-card:active:not(:disabled) { transform: scale(.99); }
.answer-card:focus-visible { outline: 3px solid var(--up-orange); outline-offset: 2px; }
.answer-card.aktiv { border-color: var(--up-orange); background: var(--up-soft); }
.answer-card.aktiv .answer-box > i { color: var(--up-orange-icon); }
.answer-card:disabled { opacity: 1; cursor: default; }
.answer-card .answer-key {
    flex: 0 0 auto; font-size: .75rem; line-height: 1.4; padding: 0 .4rem; margin-top: .2rem;
    border: 1px solid var(--bs-border-color); border-radius: .375rem; color: var(--bs-secondary-color);
}
.answer-card .answer-text { flex: 1 1 0; min-width: 0; }
@media (hover: none), (max-width: 575.98px) { .answer-card .answer-key { display: none; } }
.answer-card .answer-verdict { flex: 0 0 auto; font-size: .8rem; font-weight: 600; white-space: nowrap; margin-top: .2rem; }
.answer-card.st-hit { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.answer-card.st-ok { border-color: var(--bs-success-border-subtle); }
.answer-card.st-wrong { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.answer-card.st-miss { border-color: var(--bs-danger); border-style: dashed; }
.answer-card.st-hit .answer-verdict, .answer-card.st-ok .answer-verdict { color: var(--bs-success-text-emphasis); }
.answer-card.st-wrong .answer-verdict, .answer-card.st-miss .answer-verdict { color: var(--bs-danger-text-emphasis); }
@media (max-width: 575.98px) { .answer-card .answer-box { flex-wrap: wrap; } .answer-card .answer-verdict { flex-basis: 100%; padding-left: 2.25rem; margin-top: 0; } }
.AnswerExplanation {
    margin: -.25rem 0 .25rem 1.25rem; padding: .5rem .75rem; font-size: .925rem;
    border-left: 3px solid var(--up-orange); border-radius: 0 .5rem .5rem 0; background: var(--bs-tertiary-bg);
}

.qa-bar {
    position: sticky; bottom: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem;
    margin-top: 1rem; padding: .6rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .875rem;
    background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent); backdrop-filter: blur(6px); box-shadow: var(--up-shadow);
}
.qa-bar .qa-progress { margin-right: auto; font-variant-numeric: tabular-nums; }
.qa-bar .qa-main { min-width: 9rem; white-space: nowrap; }
@media (max-width: 991.98px) {
    #main.in-round #sideCol { display: none; }
    #main.in-round #Interaction { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .qa-bar {
        position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; border-width: 1px 0 0;
        padding: .6rem max(1rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .qa-bar .qa-main { flex: 1 1 auto; }
}

.result-summary { display: flex; flex-wrap: wrap; gap: 1rem; }
.result-big { flex: 1 1 10rem; padding: .75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .875rem; background: var(--bs-tertiary-bg); }
.result-table .st-hit td:nth-child(3), .result-table .st-ok td:nth-child(3) { color: var(--bs-success-text-emphasis); }
.result-table .st-wrong td:nth-child(3), .result-table .st-miss td:nth-child(3) { color: var(--bs-danger-text-emphasis); }
.result-table .st-wrong, .result-table .st-miss { --bs-table-bg: var(--bs-danger-bg-subtle); }

.goal-progress { height: .6rem; background: var(--bs-tertiary-bg); }
.goal-progress .progress-bar { background: var(--up-orange); }
.goal-progress .progress-bar.bg-success { background: var(--bs-success) !important; }
.streak-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.streak-days span { aspect-ratio: 1; border-radius: 3px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); }
.streak-days span.on { background: var(--up-orange); border-color: transparent; }
.streak-days span.today { outline: 2px solid var(--bs-emphasis-color); outline-offset: 1px; }

/* ---------------- KI-Qualitätsprüfung ---------------- */
.ki-fassung { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .75rem; background: var(--bs-body-bg); overflow-wrap: anywhere; }
.ki-fassung.ki-neu { border-color: var(--up-orange, #f8971c); }
.ki-fassung p:last-child { margin-bottom: 0; }
.ki-antworten { padding-left: 1.25rem; margin: .5rem 0 0; }
.ki-antworten > li { margin-bottom: .5rem; }
.ki-diff { background: rgba(248, 151, 28, .18); border-radius: .2rem; box-shadow: 0 0 0 .15rem rgba(248, 151, 28, .18); }
.ki-diff-badge { outline: 2px solid var(--up-orange, #f8971c); outline-offset: 1px; }
.ki-feld { font-family: var(--bs-font-monospace); font-size: .8rem; }
.ki-prompt { font-family: var(--bs-font-monospace); font-size: .85rem; min-height: 32rem; }
.ki-seite fieldset legend.h6 { margin-bottom: .5rem; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ki-diff { background: rgba(248, 151, 28, .28); }
}
:root[data-theme="dark"] .ki-diff { background: rgba(248, 151, 28, .28); }