/******************
 * PFH – fruity in Bootswatch-Blau
 * Basis: fruity, Farben aus altem Bootswatch-Layout
 ******************/

:root {
  --pfh-header-bg: #273746;         /* dunkles Blau: Header, Frageleisten */
  --pfh-primary: #337ab7;           /* Bootswatch-Blau */
  --pfh-primary-dark: #286090;      /* dunkler Hover-Ton */
}

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

/* obere Leiste in dunklem Blau */
.navbar,
.navbar-default,
#survey-nav.navbar {
  background-color: var(--pfh-header-bg) !important;
  border-color: var(--pfh-header-bg) !important;
  color: #ffffff !important;
}

/* Links & Brand im Header */
.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a,
.navbar-default .navbar-brand,
#survey-nav .navbar-brand {
  color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: #e6e6e6 !important;
  text-decoration: underline;
}

/* Header kompakt + Logo links (dein Layout) */
#survey-nav.navbar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid #eee;
  box-shadow: none;
  height: 5rem;
  width: auto;
  border-radius: 0 !important;
}

#survey-nav .container-fluid {
  justify-content: flex-start !important;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

#survey-nav .logo-container {
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: left !important;
}

#survey-nav .navbar-brand {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

#survey-nav .logo-container .logo {
  height: auto;
  width: auto;
  /* bei Bedarf:
  max-height: 48px;
  */
}

/* =======================================================================
   FRAGEN-LEISTEN / TEXTE
   ======================================================================= */

/* Balken über den Fragen in dunklem Blau */
.group-title-container,
.question-title-container {
  background-color: var(--pfh-header-bg) !important;
  color: #ffffff !important;
}

/* Text "Wählen Sie alle zutreffenden Optionen" etc. in Bootswatch-Blau */
.question-title-container .ls-questionhelp,
.question-title-container .ls-questionhelp a,
.group-title-container .ls-questionhelp,
.group-title-container .ls-questionhelp a {
  color: var(--pfh-primary) !important;
}

/* grüne Info-/Success-Texte auf Blau umbiegen */
body .text-success,
body .question-valid-container .text-success,
body .help-block.text-success {
  color: var(--pfh-primary) !important;
}

/* Info-Texte (z. B. "Bitte laden Sie maximal 10 Dateien hoch.") */
body .text-info,
body .question-valid-container .text-info {
  color: var(--pfh-primary) !important;
}

/* kleines Hilfe-Icon (war grün) */
.ls-questionhelp:before {
  color: var(--pfh-primary) !important;
}

/* Asterisk für Pflichtfrage in Rot lassen (Lesbarkeit) */
.input-error .asterisk {
  color: #d9534f;
}

/* =======================================================================
   BUTTONS / LINKS
   ======================================================================= */

/* Primär-Buttons in Bootswatch-Blau */
.btn-primary {
  background-color: var(--pfh-primary) !important;
  border-color: #2e6da4 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--pfh-primary-dark) !important;
  border-color: #204d74 !important;
}

/* „Weiter / Absenden“-Buttons sind in fruity oft success → auch blau */
.btn-success {
  background-color: var(--pfh-primary) !important;
  border-color: #2e6da4 !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--pfh-primary-dark) !important;
  border-color: #204d74 !important;
}

/* globale Links */
a {
  color: var(--pfh-primary);
}

a:hover,
a:focus {
  color: var(--pfh-primary-dark);
}

/* =======================================================================
   PROGRESSBAR / HINTERGRUND
   ======================================================================= */

.top-container .progress {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
}

.progress-bar {
  background-color: var(--pfh-primary) !important;
}

/* Bereiche mit bg-primary */
.bg-primary {
  background-color: var(--pfh-primary) !important;
  color: #ffffff !important;
}

/* =======================================================================
   CHECKBOXEN / RADIOS / FOKUS
   ======================================================================= */

/* Häkchen-Farbe bei Checkboxen / Radios */
.checkbox-item input[type="checkbox"]:checked + label::after,
.radio-item input[type="radio"]:checked + label::after {
  background-color: var(--pfh-primary) !important;
  border-color: #2e6da4 !important;
}

/* Fokus-Ring in Blau */
input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before,
.btn-primary:focus,
.btn-success:focus,
.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(51, 122, 183, 0.35) !important;
}

/* =======================================================================
   SONSTIGES
   ======================================================================= */

/* Tabellen-Zeilen-Hintergrund */
.ls-even {
  background-color: #f9f9f9;
}

/* Frageboxen wieder leicht abgesetzt */
.question-container {
  background: #ffffff;
  color: #444444;
  border-bottom: 1px solid #dbdbdb;
}

/* Footer der Survey-Liste leicht grau */
#surveyListFooter {
  background-color: rgba(236, 240, 241, 0.2);
}

/* Label-Schrift fett lassen (wie fruity) */
label {
  font-weight: bold;
}

/***** Grüntöne des Themes auf Blau umstellen *****/

/* Standard-"Success"-Text (z. B. Willkommen-Text im Beispiel) */
.text-success,
.text-success:hover {
  color: var(--pfh-primary, #337ab7) !important;
}

/* Willkommens- und Beschreibungstexte im Beispiel-Bildschirm */
.survey-welcome .h3,
.survey-welcome .lead,
.survey-welcome p,
.survey-description,
#welcome-container .h3,
#welcome-container p {
  color: var(--pfh-primary, #337ab7) !important;
}

/* Grüne Alerts („Erfolg“-Meldungen) */
.alert-success,
.alert-success p,
.alert-success a {
  color: var(--pfh-primary, #337ab7) !important;
  border-color: var(--pfh-primary, #337ab7) !important;
}

/* Checkbox-/Radio-Texte, falls sie per text-success grün wurden */
.question-container .text-success {
  color: var(--pfh-primary, #337ab7) !important;
}

/***** ALLES Grüne global auf Blau drehen *****/

/* Bootstrap-Variante: Success-Farbe auf Blau setzen (für BS5-Komponenten) */
:root {
  --bs-success: #337ab7;
  --bs-success-rgb: 51, 122, 183;
}

/* Standard-Success-Klassen */
.text-success,
.bg-success,
.border-success,
.alert-success,
.label-success,
.badge.bg-success,
.badge-success {
  color: #337ab7 !important;
  border-color: #337ab7 !important;
  background-color: rgba(51, 122, 183, 0.1) !important;  /* dezentes Blau statt grünem Hintergrund */
}

/* Alles, was im fruity über „success“ benannt ist (sehr breit, aber gewollt) */
*[class*="success"],
*[class*="Success"] {
  color: #337ab7 !important;
}

/* Hilfe-/Hinweis-Texte in Fragen (z. B. „Bitte wählen Sie eine der folgenden Antworten:“) */
.question-valid-container,
.question-valid-container .help-block,
.question-valid-container .text-info,
.question-valid-container .text-success {
  color: #337ab7 !important;
}

/* EM-Hilfetexte (Expression Manager) – falls grün */
.em-success,
.em-tip,
.em-function {
  color: #337ab7 !important;
}

/* Grüne Ränder/Hintergründe bei „erfolgreich validiert“ usw. */
.has-success .control-label,
.has-success .help-block,
.has-success .form-control,
.has-success .form-control:focus {
  color: #337ab7 !important;
  border-color: #337ab7 !important;
  box-shadow: 0 0 0 0.15rem rgba(51, 122, 183, .35) !important;
}

/* Falls irgendwo noch Default-Bootstrap-Hintergrund von .alert-success durchkommt */
.alert-success {
  background-color: rgba(51, 122, 183, 0.08) !important;
}

/* Info-Icon neben dem Fragetext (war grün) */
.ls-questionhelp:before {
  color: #337ab7 !important;
}

/***** Restliches Grün (Hilfetexte, Datenschutz etc.) komplett auf Blau *****/

/* alle Hilfe-/Infotexte global */
.help-block,
.questionhelp,
.ls-questionhelp,
.question-help-container,
.privacy-header {
  color: #337ab7 !important;
}

/* typischer Datenschutz-/Hinweistext im Footer / Intro */
#datasecurity,
#datasecurity a,
#datasecurity p,
#privacynotice,
#privacynotice a,
#privacynotice p {
  color: #337ab7 !important;
}

/* Links, die explizit als Datenschutz/Hilfe erscheinen könnten */
a[href*="datenschutz"],
a[href*="privacy"],
a[href*="Datenschutz"],
a[href*="Privacy"] {
  color: #337ab7 !important;
}

/* kleine „Info“-Texte direkt unter dem Fragetitel, falls nicht schon erwischt */
.question-valid-container .questionhelp,
.question-valid-container .help-block {
  color: #337ab7 !important;
}

/* Inline-Styles mit Bootstrap-Grün (#3c763d / rgb(60,118,61)) überschreiben */
*[style*="#3c763d"],
*[style*="rgb(60, 118, 61)"] {
  color: #337ab7 !important;
}

/* JA/NEIN-Buttons: gewählte Antwort dauerhaft „aktiv“ zeigen */
.ls-answers.yesno-button .btn-check:checked + label.btn {
    /* dauerhaft dunkler Hintergrund */
    filter: brightness(0.8);

    /* deutlicher Rahmen */
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0,0,0,0.4);

    /* optional leichter Glow wie beim Fokus */
    box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.25);
}

/* falls dein Theme andere Button-Klassen nutzt (z. B. btn-primary),
   kannst du es noch präziser machen: */
.ls-answers.yesno-button .btn-check:checked + label.btn-primary {
    filter: brightness(0.4);
    border-width: 4px;
    border-color: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.25);
}

* =======================================================================
   FIX: Markierte Button-Antworten (Ja/Nein, Geschlecht, Single Choice)
   ======================================================================= */

/* LimeSurvey nutzt oft label.btn > input[type=radio].
   Dafür muss das checked im label selbst markiert werden. */
.ls-answers .btn-group label.btn input[type="radio"]:checked,
.ls-answers .btn-group label.btn input[type="checkbox"]:checked {
    /* Markierung sichtbar machen */
    background-color: var(--pfh-primary-dark) !important;
    color: #fff !important;
    border: 2px solid #1c3d5a !important;
    filter: brightness(0.85);
}

/* Für Themes, die .active klassisch verwenden */
.ls-answers .btn-group label.btn.active {
    background-color: var(--pfh-primary-dark) !important;
    color: #fff !important;
    border: 2px solid #1c3d5a !important;
}

/* Speziell für Yes/No, wenn Class yesno-button vorhanden ist */
.yesno-button .btn-check:checked + label.btn {
    background-color: var(--pfh-primary-dark) !important;
    border: 2px solid #1c3d5a !important;
    filter: brightness(0.85);
}

/* =======================================================================
   PFH: Markierte Button-Antworten für ALLE Button-Fragetypen
   (Ja/Nein, Geschlecht, Kategorien wie "1 Attacke pro Tag" etc.)
   ======================================================================= */

/* Alle LimeSurvey-Buttons, die mit .btn-check + label arbeiten */
.ls-answers .btn-check:checked + label.btn,
.ls-answers .btn-check:checked + label.btn-primary,
.ls-answers .btn-check:checked + label.answer-item {
    background-color: var(--pfh-primary-dark) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.35) !important;
    box-shadow: 0 0 0 0.12rem rgba(0,0,0,0.25);
    filter: brightness(0.4);
}

/* Sicherheitshalber extra für Gender-Buttons (gleiche Struktur,
   aber eigene Container-Klasse) */
.gender-button .btn-check:checked + label.btn,
.gender-button .btn-check:checked + label.btn-primary {
    background-color: var(--pfh-primary-dark) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.35) !important;
    box-shadow: 0 0 0 0.12rem rgba(0,0,0,0.25);
    filter: brightness(0.4);
}

/* =======================================================================
   PFH: Markierte Button-Antworten für ALLE Button-Fragetypen
   (Ja/Nein, Geschlecht, Kategorien wie "1 Attacke pro Tag" etc.)
   ======================================================================= */

/* Alle LimeSurvey-Buttons, die mit .btn-check + label arbeiten */
.ls-answers .btn-check:checked + label.btn,
.ls-answers .btn-check:checked + label.btn-primary,
.ls-answers .btn-check:checked + label.answer-item {
    background-color: var(--pfh-primary-dark) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.35) !important;
    box-shadow: 0 0 0 0.12rem rgba(0,0,0,0.25);
    filter: brightness(0.4);
}

/* Sicherheitshalber extra für Gender-Buttons (gleiche Struktur,
   aber eigene Container-Klasse) */
.gender-button .btn-check:checked + label.btn,
.gender-button .btn-check:checked + label.btn-primary {
    background-color: var(--pfh-primary-dark) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.35) !important;
    box-shadow: 0 0 0 0.12rem rgba(0,0,0,0.25);
    filter: brightness(0.4);
}