/* ============================================================================
   Soest App - Survey Theme
   ----------------------------------------------------------------------------
   Ersetzt css/custom.css von fruity_twentythree und wird als letzte CSS-Datei
   des Themes geladen (nach theme_<variation>.css und base.css).

   ACHTUNG Ladereihenfolge: LimeSurvey rendert aus den Theme-Optionen einen
   Inline-<style>-Block im <head>, der NACH dieser Datei kommt. Er setzt
   body{background-color,color}, .question-container{background-color} und die
   border-radius-Werte. Genau diese Eigenschaften brauchen hier "!important" -
   alles andere kommt ohne aus. Jedes "!important" unten ist deshalb kommentiert.

   Farb- und Groessenwerte stammen 1:1 aus app/design-config.ts
   (SOEST_DESIGN_CONFIG).
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens -- */

:root {
  /* light - SOEST_DESIGN_CONFIG.light */
  --soest-primary: #be0000;              /* colors.primary */
  --soest-primary-hover: #9a0000;
  --soest-primary-rgb: 190, 0, 0;
  --soest-on-primary: #ffffff;

  --soest-bg: #ede8de;                   /* background.layer0 */
  --soest-surface: #fdfcfa;              /* background.layer3 */
  --soest-surface-strong: #ffffff;       /* background.layer4 */
  --soest-info-bg: #b3e8ff;              /* background.layer5 */
  --soest-error: rgba(236, 120, 12, 1);  /* background.error */

  --soest-text: rgba(0, 0, 0, 0.75);     /* foreground.main */
  --soest-text-reduced: rgba(0, 0, 0, 0.6);
  --soest-hint: rgba(0, 0, 0, 0.05);     /* foreground.hint */
  --soest-border: rgba(0, 0, 0, 0.12);

  --soest-success: #117a00;              /* accent.green */
  --soest-warning: #dc6a01;              /* accent.orange */
  --soest-danger: #cd1205;               /* accent.red */

  /* common.components.borderRadius */
  /* common.typography.sizes */
  --soest-size-h1: 1.75rem;

  --soest-radius-card: 1.25rem;
  --soest-radius-control: 0.625rem;
  --soest-radius-small: 0.5rem;
  --soest-radius-pill: 62.5rem;

  /* light.shadows */
  --soest-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(16, 25, 32, 0.05),
    0 8px 32px 0 rgba(18, 66, 92, 0.1);
  --soest-shadow-pressed: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(16, 25, 32, 0.1),
    0 0 2px 0 rgba(18, 66, 92, 0.15);

  /* common.spacing */
  --soest-space-minor: 0.9375rem;
  --soest-space-medium: 2.5rem;

  /* common.animations.transitions */
  --soest-transition-fast: 150ms ease-in-out;

  /* Bootstrap-Utilities, die tatsaechlich per Variable arbeiten, mitziehen.
     Achtung: die Komponenten (.btn-primary etc.) sind in Bootstrap 5.2 zur
     Buildzeit einkompiliert - die werden weiter unten einzeln ueberschrieben. */
  --bs-primary: var(--soest-primary);
  --bs-primary-rgb: var(--soest-primary-rgb);
  --bs-body-color: var(--soest-text);
  --bs-body-bg: var(--soest-bg);
  --bs-link-color: var(--soest-primary);
  --bs-link-hover-color: var(--soest-primary-hover);
}

/* dark - SOEST_DESIGN_CONFIG.dark
   Zwei Wege hierher:
   1. Systemeinstellung (prefers-color-scheme), sofern der WebView sie durchreicht
   2. explizit von der App gesetzt: ?theme=dark -> html[data-app-theme="dark"]
      (siehe scripts/custom.js) - schlaegt die Systemeinstellung */
@media (prefers-color-scheme: dark) {
  html:not([data-app-theme='light']) {
    --soest-primary: #d34e56;
    --soest-primary-hover: #e0656c;
    --soest-primary-rgb: 211, 78, 86;
    --soest-on-primary: #ffffff;

    --soest-bg: #212524;
    --soest-surface: #353c39;
    --soest-surface-strong: #404945;
    --soest-info-bg: #1e4f5a;
    --soest-error: rgba(236, 119, 12, 0.9);

    --soest-text: rgba(255, 255, 255, 1);
    --soest-text-reduced: rgba(255, 255, 255, 0.8);
    --soest-hint: rgba(255, 255, 255, 0.15);
    --soest-border: rgba(255, 255, 255, 0.2);

    --soest-success: #88d66d;
    --soest-warning: #ffa566;
    --soest-danger: #ff838c;
  }
}

html[data-app-theme='dark'] {
  --soest-primary: #d34e56;
  --soest-primary-hover: #e0656c;
  --soest-primary-rgb: 211, 78, 86;
  --soest-on-primary: #ffffff;

  --soest-bg: #212524;
  --soest-surface: #353c39;
  --soest-surface-strong: #404945;
  --soest-info-bg: #1e4f5a;
  --soest-error: rgba(236, 119, 12, 0.9);

  --soest-text: rgba(255, 255, 255, 1);
  --soest-text-reduced: rgba(255, 255, 255, 0.8);
  --soest-hint: rgba(255, 255, 255, 0.15);
  --soest-border: rgba(255, 255, 255, 0.2);

  --soest-success: #88d66d;
  --soest-warning: #ffa566;
  --soest-danger: #ff838c;
}

/* ------------------------------------------------------------------ Font -- */

/* Der Asset-Manager kopiert das komplette Theme-Verzeichnis nach tmp/assets/,
   relative Pfade ab css/ bleiben also gueltig (siehe <filesdirectory> in der
   config.xml des Mutter-Themes).
   Selbst gehostet statt Google Fonts - keine Drittanbieter-Requests. */
@font-face {
  font-family: 'Roboto Flex';
  src:
    url('../files/fonts/Roboto-Flex.woff2') format('woff2-variations'),
    url('../files/fonts/Roboto-Flex.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* Das Theme setzt die Schrift ueber die Body-Klasse font-<option> (z.B.
   font-ibm-sans). Deshalb hier mit hoeherer Spezifitaet ueberschreiben statt
   mit !important. */
html body,
html body .btn,
html body .form-control,
html body .form-select,
html body input,
html body select,
html body textarea {
  font-family: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variation-settings: 'wdth' 100;
}

/* -------------------------------------------------------------- Grundriss -- */

/* !important: der Theme-Options-Inline-Block setzt body{background-color;color} */
body {
  background-color: var(--soest-bg) !important;
  color: var(--soest-text) !important;
  font-size: 1rem;
  line-height: 150%; /* common.typography.lineHeight.body */
  -webkit-font-smoothing: antialiased;
}

#outerframeContainer {
  background-color: transparent;
}

h1, .h1 { font-size: var(--soest-size-h1); }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--soest-text);
  font-weight: 700;
}

/* Der Umfragename auf der Startseite ist <h1 class="survey-name large-heading">
   (views/subviews/messages/welcome.twig). Das Mutter-Theme gibt dieser Klasse
   IBM Plex Serif in 2.85rem -- mit Klassen-Spezifitaet, die die h1-Regel oben
   nicht erreicht. Gemessen: 45.6px Serif auf einem 390px breiten Display.
   Dieselbe Klasse traegt auch die Titel von "Speichern" und "Laden". */
.large-heading {
  font-family: inherit;
  font-size: var(--soest-size-h1);
  line-height: 1.3;
  font-weight: 700;
}

a,
.btn-link,
.btn-link:hover,
.btn-link:focus {
  color: var(--soest-primary);
}

/* ------------------------------------------------------------ Kopfbereich -- */

/* Fortschrittsbalken (.top-container > .ls-progress-container > .progress) */
.top-container .progress {
  background-color: var(--soest-hint);
  border-radius: var(--soest-radius-pill);
  height: 0.5rem;
  overflow: hidden;
}

.top-container .progress-bar {
  background-color: var(--soest-primary);
  transition: width var(--soest-transition-fast);
}

.group-container .group-title,
.group-title-container {
  color: var(--soest-text);
  font-weight: 700;
}

/* ---------------------------------------------------------- Fragen-Karten -- */

/* !important nur auf background-color und border-radius: beide werden vom
   Theme-Options-Inline-Block gesetzt (questionbackgroundcolor / cornerradius) */
.question-container {
  background-color: var(--soest-surface) !important;
  border: 0;
  /* .question-container ist selbst eine Bootstrap-.row und traegt deren
     negative Gutter von -12px. Die fressen genau das Padding des Elternteils
     auf, und die Karte sitzt buendig am Displayrand -- auf 390px gemessen:
     Breite 390, links 0, rechts 0. */
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--soest-radius-card) !important;
  box-shadow: var(--soest-shadow);
  padding: var(--soest-space-minor);
  margin-bottom: var(--soest-space-minor);
}

.question-container .ls-questionhelp,
.question-container .question-help-container,
.question-container .questionhelp {
  color: var(--soest-text-reduced);
}

.asterisk,
.text-danger {
  color: var(--soest-danger);
}

/* ---------------------------------------------------------------- Buttons -- */

/* !important auf border-radius: kommt aus dem cornerradius-Inline-Block */
.btn {
  border-radius: var(--soest-radius-control) !important;
  font-weight: 500;
  transition: background-color var(--soest-transition-fast),
    border-color var(--soest-transition-fast), box-shadow var(--soest-transition-fast);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
}

/* Bootstrap 5.2 kompiliert die Button-Farben fest ein - alle Zustaende, die im
   Theme-CSS mit der Variationsfarbe belegt sind, hier einzeln nachziehen. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary.dropdown-toggle.show,
.btn-check + .btn-primary:hover,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:focus + .btn-primary,
.btn-check:focus:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--soest-primary);
  border-color: var(--soest-primary);
  color: var(--soest-on-primary);
}

.btn-primary:hover {
  background-color: var(--soest-primary-hover);
  border-color: var(--soest-primary-hover);
  box-shadow: none; /* setzt den lila Glow des Mutter-Themes zurueck */
}

.btn-primary:active,
.btn-primary.active {
  box-shadow: var(--soest-shadow-pressed);
}

.btn-primary:focus-visible,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(var(--soest-primary-rgb), 0.3);
}

.btn-primary:disabled,
.btn-primary.disabled {
  opacity: 0.5;
}

.btn-outline-primary,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--soest-primary);
  border-color: var(--soest-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:active:focus,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  color: var(--soest-on-primary);
  background-color: var(--soest-primary);
  border-color: var(--soest-primary);
}

.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--soest-primary-rgb), 0.2);
}

/* "Zurueck" im Navigator ist btn-outline-secondary */
.btn-outline-secondary {
  color: var(--soest-text-reduced);
  border-color: var(--soest-border);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--soest-text);
  background-color: var(--soest-hint);
  border-color: var(--soest-border);
}

.navigator {
  margin-top: var(--soest-space-minor);
}

/* ------------------------------------------------------------- Formulare -- */

/* !important auf border-radius: cornerradius-Inline-Block */
.form-control,
.form-select {
  background-color: var(--soest-surface-strong);
  color: var(--soest-text);
  border: 1px solid var(--soest-border);
  border-radius: var(--soest-radius-control) !important;
  padding: 0.625rem 0.875rem;
  transition: border-color var(--soest-transition-fast), box-shadow var(--soest-transition-fast);
}

.form-control::placeholder {
  color: var(--soest-text-reduced);
  opacity: 0.7;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--soest-surface-strong);
  color: var(--soest-text);
  border-color: var(--soest-primary);
  box-shadow: 0 0 0 3px rgba(var(--soest-primary-rgb), 0.15);
  outline: none;
}

/* .input-group-addon ist im Mutter-Theme mit der Body-Klasse gescopt
   (.fruity_twentythree .input-group-addon, Spezifitaet 0-2-0). Die Body-Klasse
   ist der Theme-Name, heisst beim Kind-Theme also moeglicherweise "soest" -
   deshalb beide Varianten, damit die Spezifitaet in jedem Fall aufgeht. */
.input-group-text,
label .input-group-text,
.fruity_twentythree .input-group-addon,
.soest .input-group-addon {
  background-color: var(--soest-primary);
  border-color: var(--soest-primary);
  color: var(--soest-on-primary);
}

/* Das Mutter-Theme markiert Zustaende mit einem harten Versatzschatten
   (box-shadow: 4px 4px 0 <farbe>). Neben den weichen Schatten der Karten sieht
   das aus wie ein verrutschter zweiter Rahmen -- im Durchlauf fielen die roten
   Doppelrahmen an den Kommentarfeldern sofort auf. Alle drei Zustaende
   bekommen denselben weichen Ring wie der Fokus. */
.has-success .form-control,
.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--soest-primary-rgb), 0.15);
}

.has-success .help-block {
  color: var(--soest-success);
}

.has-error .form-control,
.has-error .form-control:focus,
.input-error .form-control,
.input-error .form-control:focus {
  border-color: var(--soest-danger);
  box-shadow: 0 0 0 3px rgba(205, 18, 5, 0.15);
}

.has-error .help-block {
  color: var(--soest-danger);
}

.has-warning .form-control,
.has-warning .form-control:focus {
  border-color: var(--soest-warning);
  box-shadow: 0 0 0 3px rgba(220, 106, 1, 0.15);
}

.has-warning .help-block {
  color: var(--soest-warning);
}

/* ------------------------------------------------- Radio / Checkbox / Liste */

/* Aufbau im Mutter-Theme: label::before = Kaestchen, label::after = Remixicon-
   Haken bzw. gefuellter Punkt. Beides ist dort mit der Variationsfarbe belegt. */

/* Das Mutter-Theme setzt Box und Marke mit festem `top` an den Anfang des
   Labels und rechnet dabei mit seiner eigenen Zeilenhoehe. Die Box ist 24px
   hoch, die Zeile aber 20px -- gemessen sass die Box 2px unter der Textmitte.
   An der Zeilenmitte auszurichten haelt unabhaengig davon, was Schriftgroesse
   und Zeilenhoehe spaeter machen.

   Nicht fuer .ls-label-xs-visibility: dort verschiebt das Mutter-Theme beide
   Pseudoelemente bewusst um 3px bzw. 5px, damit der Fokusring Platz hat. */
.radio-item label:not(.ls-label-xs-visibility)::before,
.checkbox-item label:not(.ls-label-xs-visibility)::before,
.checkbox-item label:not(.ls-label-xs-visibility)::after {
  top: 50%;
  transform: translateY(-50%);
}

/* Der Radio-Punkt braucht eine eigene Regel, weil `transform` bei ihm schon
   belegt ist: das Mutter-Theme blendet ihn mit scale(0) aus und faehrt ihn beim
   Auswaehlen auf scale(1) hoch. Ein blosses translateY() haette das ueberschrieben
   -- der Punkt erschien dann auch bei nicht gewaehlten Optionen. */
.radio-item label:not(.ls-label-xs-visibility)::after {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%) scale(0);
}

.radio-item input[type='radio']:checked + label:not(.ls-label-xs-visibility)::after {
  transform: translateY(-50%) scale(1);
}

.radio-item label::before,
.checkbox-item label::before {
  border: 2px solid var(--soest-border);
  background-color: var(--soest-surface-strong);
  transition: border-color var(--soest-transition-fast), background-color var(--soest-transition-fast);
}

.radio-item label::after,
.radio-item input[type='radio'] + label::after,
.radio-item input[type='radio']:checked + label::after,
body .answer-item label::after {
  background-color: var(--soest-primary);
}

.radio-item input[type='radio']:checked + label::before,
.checkbox-item input[type='checkbox']:checked + label::before {
  border-color: var(--soest-primary);
}

.checkbox-item input[type='checkbox']:checked + label::after {
  color: var(--soest-primary);
  background-color: transparent;
}

.radio-item input[type='radio']:checked + label,
.checkbox-item input[type='checkbox']:checked + label {
  color: var(--soest-primary);
}

.checkbox-inline input[type='checkbox']:checked:after {
  background-color: var(--soest-primary);
  border-color: var(--soest-primary);
}

/* Antworttabellen (Matrix-Fragen) */
.ls-answers .ls-heading th,
.ls-answers th {
  color: var(--soest-text);
  background-color: transparent;
}

/* Die Zeilenhervorhebung beim Ueberfahren ist im Mutter-Theme #EEEFF7, ein
   blaeuliches Hellgrau neben lauter warmen Beigetoenen. Neutrale Abdunklung
   statt eigener Farbe, dann passt sie auf jede Flaeche. Betrifft nur Maus-
   bedienung -- auf dem Touchgeraet gibt es keinen Hover. */
.table-hover > tbody > tr:hover > th,
.table-hover > tbody > tr:hover > td {
  background-color: var(--soest-hint);
}

/* ------------------------------------------------------- Spezielle Widgets */

/* Datepicker */
.tempus-dominus-widget button,
.tempus-dominus-widget .time-container-second div:not(.no-highlight).active {
  background-color: var(--soest-primary);
  border-color: var(--soest-primary);
  color: var(--soest-on-primary);
}

.tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
  border-bottom-color: var(--soest-primary);
}

/* Slider-Fragetyp */
.slider .slider-selection {
  background: var(--soest-primary);
}

.slider.slider-horizontal .slider-handle.triangle {
  border-bottom-color: var(--soest-primary);
}

.slider.slider-vertical .slider-handle.triangle {
  border-left-color: var(--soest-primary);
}

/* Hinweise / Meldungen */
.alert {
  border: 0;
  border-radius: var(--soest-radius-card);
  box-shadow: none;
}

.alert-info {
  background-color: var(--soest-info-bg);
  color: var(--soest-text);
}

.alert-danger {
  background-color: rgba(205, 18, 5, 0.1);
  color: var(--soest-danger);
}

.alert-warning {
  background-color: rgba(220, 106, 1, 0.1);
  color: var(--soest-warning);
}

/* Der Hinweis bei unvollstaendigen Pflichtfeldern kommt als Bootstrap-Modal
   und blieb weiss mit eckigen Kanten mitten in den runden Karten. */
.modal-content {
  background-color: var(--soest-surface);
  color: var(--soest-text);
  border: 0;
  border-radius: var(--soest-radius-card);
  box-shadow: var(--soest-shadow);
}

.modal-header,
.modal-footer {
  border-color: var(--soest-hint);
}

/* -------------------------------------------------------------- Endseite -- */

.completed-wrapper {
  background-color: var(--soest-surface);
  border-radius: var(--soest-radius-card);
  box-shadow: var(--soest-shadow);
  padding: var(--soest-space-medium) var(--soest-space-minor);
  text-align: center;
}

.completed-wrapper .completed-heading {
  color: var(--soest-text);
  font-size: 1.75rem; /* 2.85rem des Mutter-Themes ist fuer Mobile zu gross */
  line-height: 1.3;
  font-weight: 700;
}

.completed-wrapper .completed-Content {
  color: var(--soest-text-reduced);
  font-size: 1.0625rem;
  line-height: 150%;
}

/* --------------------------------------------- Einbettung in die Soest App -- */

/* scripts/custom.js setzt .ls-app-embedded, wenn die Umfrage in der App laeuft
   (?embed=app oder window.parent !== window). Ausserhalb der App bleibt die
   Umfrage vollstaendig mit Navigationsleiste bedienbar. */

/* !important: theme.js setzt body.style.paddingTop per JS auf die Navbar-Hoehe.
   Unten zusaetzlich Platz fuer die Safe Area des Geraets. */
.ls-app-embedded body {
  padding-top: var(--soest-space-minor) !important;
  padding-bottom: calc(var(--soest-space-medium) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Die App liefert Titel, Zuruecknavigation und Schliessen selbst.
   Achtung: damit entfallen auch Sprachumschalter, Fragen-Index und
   "Speichern/Fortsetzen" aus dem Menue der Leiste. */
.ls-app-embedded #survey-nav {
  display: none;
}

.ls-app-embedded .container-fluid.col-xl-8 {
  padding-left: var(--soest-space-minor);
  padding-right: var(--soest-space-minor);
}

/* ------------------------------------------------------- Reduced Motion -- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}