/*
 * smart rail GmbH — LimeSurvey Theme (FruityTwentyThree)
 * Portiert von sr_fruity (Fruity / LS6) auf fruity_twentythree (Bootstrap 5.3)
 * Angepasst an Moodle-Farbschema (moodle.smart-rail.eu)
 *
 * Strategie FruityTwentyThree:
 *   1. Bootstrap-5.3-Komponenten-Variablen (--bs-btn-*, --bs-link-*, ...)
 *      überschreiben, wo möglich — sauber und hover/active-sicher.
 *   2. Harte Fallback-Regeln mit !important für alles, was die
 *      Theme-Variation (theme_apple.css) fest einkompiliert hat.
 *
 * WICHTIG: Der Body trägt in FruityTwentyThree KEINE Klasse ".fruity"
 * mehr — alle alten "body.fruity"-Selektoren wurden ersetzt.
 * Awesome-Bootstrap-Checkbox ist entfernt — Radios/Checkboxen sind
 * jetzt native BS5 ".form-check-input".
 *
 * Farben:
 *   #6B1010  — Primärfarbe (Header, Akzente)
 *   #1E3A5F  — Sekundärfarbe (Banner, Footer, Buttons)
 *   #B8962A  — Akzentfarbe (Highlights, Auswahl-Rahmen)
 *   #1E6B9E  — Linkfarbe
 *   #ffffff  — Hintergrund
 */


/* ============================================================
   GLOBALE FARB-VARIABLEN (Bootstrap 5.3)
   Überschreibt die Variation (Apple-Grün) an der Wurzel
   ============================================================ */

:root,
body {
    --bs-primary: #1E3A5F;
    --bs-primary-rgb: 30, 58, 95;
    --bs-link-color: #1E6B9E;
    --bs-link-color-rgb: 30, 107, 158;
    --bs-link-hover-color: #1E3A5F;
    --bs-link-hover-color-rgb: 30, 58, 95;
}


/* ============================================================
   NAVBAR / HEADER
   ============================================================ */

body .navbar,
body nav.navbar {
    background-color: #6B1010 !important;
    --bs-navbar-color: #B8962A;
    --bs-navbar-hover-color: #B8962A;
    --bs-navbar-active-color: #B8962A;
    --bs-navbar-brand-color: #B8962A;
    --bs-navbar-brand-hover-color: #B8962A;
    border-bottom: 1px solid #4a0b0b;
    border-radius: 0 !important;
}

body .navbar .navbar-brand,
body .navbar .navbar-brand:hover,
body .navbar .navbar-brand:focus {
    color: #B8962A;
}

body .navbar .nav-link,
body .navbar .nav-link:focus {
    color: #B8962A;
    text-decoration: none !important;
    box-shadow: 0 0 0 0 #1E3A5F;
    transition: box-shadow .2s ease-in-out !important;
}

body .navbar .navbar-nav .nav-item .nav-link:hover,
body .navbar .navbar-nav .nav-item .nav-link:focus,
body .navbar a:hover,
body .navbar a:focus {
    color: #B8962A !important;
    text-decoration: none !important;
    box-shadow: 0 3px 0 0 #1E3A5F;
    transition: box-shadow .2s ease-in-out !important;
}

body .navbar .nav-link::after,
body .navbar .nav-link:hover::after,
body .navbar a:hover::after {
    display: none !important;
    border: none !important;
    background: none !important;
}

body .navbar .navbar-nav .nav-item::after,
body .navbar .navbar-nav .nav-item:hover::after {
    background-color: #1E3A5F !important;
}

/* Hamburger-Icon (mobil) — helles Icon auf dunklem Header */
body .navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

body .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ============================================================
   BUTTONS — Primär (dunkelblau)
   BS5.3: Komponenten-Variablen + harte Fallbacks
   ============================================================ */

body .btn-primary,
body .btn.btn-primary,
body input[type="submit"].btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #1E3A5F;
    --bs-btn-border-color: #152a45;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #152a45;
    --bs-btn-hover-border-color: #0e1e32;
    --bs-btn-focus-shadow-rgb: 30, 58, 95;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #152a45;
    --bs-btn-active-border-color: #0e1e32;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #1E3A5F;
    --bs-btn-disabled-border-color: #152a45;
    background-color: #1E3A5F !important;
    border-color: #152a45 !important;
    color: #ffffff !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body input[type="submit"].btn-primary:hover {
    background-color: #152a45 !important;
    border-color: #0e1e32 !important;
    color: #ffffff !important;
}


/* ============================================================
   BUTTONS — Zurück / Default / Outline (weiß mit dunklem Rand)
   ============================================================ */

body .btn.btn-default,
body .btn-navigation.btn-default,
body .btn.btn-outline-secondary,
body .btn.btn-secondary {
    --bs-btn-color: #333333;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #333333;
    --bs-btn-hover-color: #111111;
    --bs-btn-hover-bg: #f0f0f0;
    --bs-btn-hover-border-color: #111111;
    --bs-btn-active-color: #111111;
    --bs-btn-active-bg: #f0f0f0;
    --bs-btn-active-border-color: #111111;
    background-color: #ffffff !important;
    border-color: #333333 !important;
    color: #333333 !important;
}

body .btn.btn-default:hover,
body .btn-navigation.btn-default:hover,
body .btn.btn-outline-secondary:hover,
body .btn.btn-secondary:hover {
    background-color: #f0f0f0 !important;
    border-color: #111111 !important;
    color: #111111 !important;
}


/* ============================================================
   TEXT & LINKS im Umfrage-Bereich
   ============================================================ */

body .survey-container p,
body .top-container p,
body .top-content p,
body #outerframeContainer p {
    color: #333333 !important;
}

body .survey-container a,
body #outerframeContainer a {
    color: #1E6B9E;
}

body .survey-container a:hover,
body #outerframeContainer a:hover {
    color: #1E3A5F;
    text-decoration: underline;
}

/* Links, die als Buttons gerendert werden, nicht blau färben */
body .survey-container a.btn,
body #outerframeContainer a.btn,
body .navigator a.btn,
body #navigator-container a.btn {
    color: #333333;
}

body .survey-container a.btn.btn-primary,
body #outerframeContainer a.btn.btn-primary {
    color: #ffffff !important;
}

body .survey-container a.btn.btn-default,
body #outerframeContainer a.btn.btn-default,
body .navigator a.btn.btn-default,
body #navigator-container a.btn.btn-default {
    color: #333333 !important;
    border-color: #333333 !important;
    background-color: #ffffff !important;
}


/* ============================================================
   PROGRESS BAR
   BS5.3: --bs-progress-bar-bg + Fallback
   ============================================================ */

body .progress {
    --bs-progress-bar-bg: #6B1010;
}

body .progress .progress-bar {
    background-color: #6B1010 !important;
}

body .progress .progress-bar.progress-bar-striped {
    background-color: #6B1010 !important;
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
}


/* ============================================================
   UMFRAGE-TITEL & SEITENTITEL
   ============================================================ */

body .survey-container .survey-title,
body .survey-container .survey-name,
body .survey-container .ls-heading,
body #outerframeContainer .survey-name {
    color: #6B1010;
    border-bottom: 2px solid #6B1010;
    padding-bottom: 8px;
}

body .survey-container .page-header small,
body .survey-container .survey-page small {
    color: #6B1010;
    font-weight: 500;
}


/* ============================================================
   FRAGEN-KARTEN (Cards statt Panels in BS5)
   ============================================================ */

body .card > .card-header,
body .panel.panel-default > .panel-heading {
    background-color: #f5f0f0;
    border-color: #d4b0b0;
    color: #6B1010;
}

body .question-container.card,
body .card.question-container,
body .panel.panel-default {
    border-color: #d4b0b0;
}


/* ============================================================
   HILFETEXT & VALIDIERUNG
   ============================================================ */

/* Hilfetext (❓) — grün behalten */
body .question-help-container,
body .question-help-container .ls-questionhelp,
body .question-help-container.text-info,
body .question-help-container.text-info .ls-questionhelp {
    color: #328637 !important;
}

/* Validierungsfehler (❗) — rot */
body .question-valid-container.text-info,
body .question-valid-container .error,
body .question-valid-container .em_num_answers,
body .text-info.emtip.error,
body .survey-container .ls-input-group-error,
body .survey-container .alert-danger,
body .survey-container .text-danger,
body .survey-container .has-error .help-block,
body .survey-container .invalid-feedback {
    color: #cc0000 !important;
}


/* ============================================================
   RADIO-BUTTONS & CHECKBOXEN — ausgewählt dunkelblau
   FruityTwentyThree nutzt native BS5 .form-check-input
   (awesome-bootstrap-checkbox wurde im Theme entfernt)
   ============================================================ */

body .form-check-input:checked,
body input.form-check-input:checked,
body .radio-item input[type="radio"]:checked,
body .checkbox-item input[type="checkbox"]:checked {
    background-color: #1E3A5F !important;
    border-color: #1E3A5F !important;
}

body .form-check-input:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.25);
}

body .radio-item input[type="radio"]:checked + label,
body .radio-item input[type="radio"]:checked ~ label,
body .form-check-input[type="radio"]:checked + label,
body .form-check-input[type="radio"]:checked ~ label {
    color: #1E3A5F !important;
    font-weight: 600;
}


/* ============================================================
   SKALA / BUTTON-FRAGEN — ausgewählter Zustand
   (btn-check-Pattern, BS5)
   ============================================================ */

body .btn.btn-primary.active,
body .btn.btn-primary.selected,
body .btn-group .btn.btn-primary.active,
body .btn-group .btn.btn-primary.selected,
body .button-array .btn.active,
body .button-array .btn.selected,
body .btn-check:checked + label.btn.btn-primary,
body input.btn-check:checked + label.btn-primary,
body .btn-check:checked + .btn {
    background-color: #1E3A5F !important;
    border: 3px solid #B8962A !important;
    color: #ffffff !important;
}

body input.btn-check:focus + label.btn-primary,
body input.btn-check:focus-visible + label.btn-primary,
body input.btn-check {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

body .ls-footer,
body footer#surveyListFooter,
body footer.footer {
    background-color: #1E3A5F;
    color: #c8d8e8;
}

body footer.ls-footer a,
body footer#surveyListFooter a,
body footer.footer a {
    color: #a8c4dc;
}

body footer.ls-footer a:hover,
body footer#surveyListFooter a:hover,
body footer.footer a:hover {
    color: #ffffff;
}


/* ============================================================
   ÖFFENTLICHE UMFRAGENLISTE AUSBLENDEN
   ============================================================ */

body #surveys-list-container,
body #surveys-list-jumbotron,
body .surveys-list-container {
    display: none !important;
}


/* ============================================================
   TYPOGRAFIE — kompakter als FruityTwentyThree-Standard
   (angelehnt an das alte Fruity: 14px Basis)
   Zentrale Stellschraube: --sr-base-font-size
   ============================================================ */

:root,
body {
    --sr-base-font-size: 0.875rem;   /* 14px — bei Bedarf z.B. 0.9375rem = 15px */
    --bs-body-font-size: var(--sr-base-font-size);
    font-size: var(--sr-base-font-size);
}

body #outerframeContainer,
body .survey-container,
body .survey-container p,
body .form-control,
body .form-select,
body .form-check-label,
body label,
body .ls-answers,
body .answer-container,
body table.ls-answers td,
body table.ls-answers th {
    font-size: var(--sr-base-font-size);
}

/* Fragetext — etwas größer als Fließtext, aber nicht riesig */
body .question-text,
body .question-container .question-text,
body .ls-label-question {
    font-size: 1.05rem !important;
    font-weight: 600;
}

/* Gruppentitel & Gruppenbeschreibung */
body .group-title,
body .group-name,
body .group-container .group-title {
    font-size: 1.25rem !important;
}

body .group-description,
body .group-outer-description {
    font-size: var(--sr-base-font-size) !important;
}

/* Umfragetitel / Seitentitel */
body .survey-container .survey-title,
body .survey-container .survey-name,
body #outerframeContainer .survey-name,
body .survey-container .ls-heading {
    font-size: 1.6rem !important;
}

/* Willkommens-/Endtext */
body #welcome-container,
body .survey-welcome,
body .completed-text {
    font-size: var(--sr-base-font-size);
}

/* Buttons & Navigation */
body .btn,
body .btn-primary,
body .btn-check + label.btn {
    font-size: var(--sr-base-font-size);
}

/* Hilfetexte & Validierungshinweise — eine Stufe kleiner */
body .ls-questionhelp,
body .question-help-container,
body .question-valid-container,
body .help-block {
    font-size: 0.8125rem !important;   /* 13px */
}

/* Navbar */
body .navbar .nav-link,
body .navbar .navbar-brand {
    font-size: var(--sr-base-font-size);
}


/* ============================================================
   KOMPAKTE ABSTÄNDE — FT23-Standard ist sehr luftig
   ============================================================ */

/* Abstand zwischen den Frage-Blöcken verringern */
body .question-container,
body .card.question-container {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Fragetext und Antwortbereich zusammenrücken */
body .question-text-container,
body .question-title-container {
    margin-bottom: 0.25rem !important;
    padding-bottom: 0 !important;
}

body .question-text,
body .ls-label-question {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

body .answer-container,
body .question-container .answer-container,
body .ls-answers {
    margin-top: 0.25rem !important;
    padding-top: 0 !important;
}

/* Pflichtfeld-Stern (*) in die Zeile des Fragetexts holen */
body .question-text-container .asterisk,
body .question-container .asterisk,
body .ls-question-mandatory,
body .mandatory-asterisk {
    display: inline !important;
    float: left;
    margin: 0 0.3rem 0 0 !important;
    padding: 0 !important;
    line-height: inherit;
}

/* Gruppentitel: weniger Luft darüber/darunter */
body .group-container {
    padding-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

body .group-title,
body .group-name {
    margin: 0.5rem 0 0.75rem 0 !important;
}

/* Hinweis unter Eingabefeldern (z.B. "Format: tt.mm.jjjj") direkt ans Feld */
body .question-container .help-block,
body .question-container .form-text,
body .question-container .ls-questionhelp {
    margin-top: 0.2rem !important;
}


/* ============================================================
   FEINSCHLIFF ABSTÄNDE (nach Live-Markup)
   FT23: jede Frage ist .row.question-container mit
   col-12-Blöcken (Titel / Hilfe / Validierung / Antwort)
   ============================================================ */

/* Frage-Block: Default ist padding 12px 0 + margin-bottom 24px */
body .question-container,
body .row.question-container {
    padding: 0.5rem 0 !important;
    margin: 0 0 0.5rem 0 !important;
}

/* Absätze im Fragetext: BS-Reboot gibt jedem <p> 1rem Abstand */
body .question-text p,
body .ls-label-question p,
body .question-title-container p {
    margin-top: 0 !important;
    margin-bottom: 0.15rem !important;
}

body .question-text p:last-child,
body .question-title-container p:last-child {
    margin-bottom: 0 !important;
}

/* Titel-Container ohne Eigenabstand */
body .question-title-container {
    margin: 0 0 0.25rem 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Validierungs-Container: kein Abstand, leer komplett ausblenden */
body .question-valid-container {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .question-valid-container:not(:has(div, span, ul, li, em)) {
    display: none !important;
}

/* Antwortbereich direkt anschließen */
body .answer-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body .ls-answers {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Gruppentitel (h1.group-title) kompakt */
body h1.group-title {
    margin: 0.5rem 0 0.75rem 0 !important;
}


/* ============================================================
   PFLICHTFELD-STERN ROT, HINWEISE GRÜN
   ============================================================ */

/* Pflichtfeld-Stern (*) — rot */
body .asterisk,
body .question-container .asterisk,
body .question-title-container .asterisk,
body .ls-question-mandatory,
body .mandatory-asterisk,
body .ls-asterisk {
    color: #cc0000 !important;
}

/* Hinweise/Hilfetexte — grün (alle FT23-Varianten) */
body .ls-questionhelp,
body .question-help-container,
body .question-help-container * ,
body .question-container .help-block,
body .question-container .form-text,
body .question-container .text-muted,
body .ls-question-help {
    color: #328637 !important;
}