/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
  
  /* SCJ Pro Specific CSS styling code */

body {
    font-family: aktiv-grotesk,sans-serif;
    padding-bottom: 0px !important;
}

.row {
    margin-bottom: 4rem;
}

.return-to-survey, .survey-welcome {
    margin-top: 2.8rem;
    margin-bottom: 3rem;
}


.privacy {
    margin-bottom: 5.5rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 2.3rem !important;
}

.h2 { margin-top: 0rem !important;}

.form-check a {
    color: #000;
}

.form-check-input:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgb(247 247 247/var(--bs-bg-opacity)) !important;
}


  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
  .nav-link {
      text-transform: uppercase;
  }
  
  .btn-primary {
     background-color: #000;
     border-color: #000;
  color: #fff;
}

.btn-primary:hover {
    background-color: #dc3545;
    border-color: #dc3545;
  
}

.btn-link, .completed-text a {
  color: #dc3545;
}

.text-info, .survey-welcome, .completed-text p, .return-to-survey p {
    --bs-text-opacity: 1;
    color: rgb(40 40 40/var(--bs-text-opacity)) !important;
    font-size: 1.2rem !important;
    letter-spacing: -.025em;
    line-height: 1.9rem;
    margin-bottom: 2rem;
    font-weight: 400;
}


label::after {
  background-color: #337ab7;
}

/* Questions */
.question-text {
    --bs-text-opacity: 1;
    color: rgb(40 40 40/var(--bs-text-opacity)) !important;
    font-size: 1.38rem !important;
}

.ls-questionhelp {
    font-size: 0.95rem;
}

.radio-list li {
  line-height: 2rem;
  font-size: 1.1rem;
}

#surveys-list-jumbotron {
 display:none !important;
}

#surveyListFooter {
    display:none;
}

/* Footer */
.footer {
    padding: 30px;
    position: relative;
    bottom: 0px;
    width: 100%;
}

.foot {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-around;
}

.scjlogo {
    width: 110px;
    height: auto;
}

.scjgrey {
    --bs-bg-opacity: 1;
  background-color: rgb(247 247 247/var(--bs-bg-opacity)) !important;
}

.completed-wrapper {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.assessment-table {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/* =========================================================
   Bildauswahl – globales Styling
   Gilt für:
   - Fragen, deren Container die Klasse .imageviewlist hat
   - und/oder ULs mit der Klasse .imageselect-list
   ========================================================= */

/* 1) Layout: 3-Spalten-Grid auf der Bildliste */
.imageviewlist .imageselect-list,
.imageselect-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 Spalten */
  gap: 20px;
  padding-left: 0px;
  margin: 15px;
}

/* 2) Item-Container neutralisieren */
.imageviewlist .imageselect-list .imageselect-container,
.imageselect-list .imageselect-container {
  list-style: none !important;
  margin: 0;
  padding: 0;
  /* position: relative; /* für mögliche Badges */
}

/* 3) Inputs (Radio/Checkbox) sicher visuell ausblenden, aber zugänglich lassen */
.imageviewlist .imageselect-list .imageselect-container > input[type="radio"],
.imageviewlist .imageselect-list .imageselect-container > input[type="checkbox"] {
  position: relative !important;
  left: -9999px !important;  /* außerhalb des Viewports */
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* 4) Label als klickbare Karte */
.imageviewlist .imageselect-list .imageselect-container > label.imageselect-radiobutton {
  display: block;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  padding: 8px;
  text-align: center;
}

/* 5) Bild schön skalieren */
.imageviewlist .imageselect-list .imageselect-container > label.imageselect-radiobutton img {
  display: block;
  max-width: 100%;
  height: auto;     /* verhindert Verzerrung */
  margin: 0 auto;
}

/* 6) Hover-Vorschau */
.imageviewlist .imageselect-list .imageselect-container > label.imageselect-radiobutton:hover {
  border-color: #dc3545;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* 7) Tastaturfokus: Fokus am (versteckten) Input → Rahmen am Label */
.imageviewlist .imageselect-list .imageselect-container > input[type="radio"]:focus-visible + label.imageselect-radiobutton,
.imageviewlist .imageselect-list .imageselect-container > input[type="checkbox"]:focus-visible + label.imageselect-radiobutton {
  outline: none;
  border-color: #4472c4;
  box-shadow: 0 0 0 3px rgba(68, 114, 196, 0.3);
}

/* 8) AUSGEWÄHLT: deutliche Umrandung (gilt für Radio + Checkbox) */
.imageviewlist .imageselect-list .imageselect-container > input[type="radio"]:checked + label.imageselect-radiobutton,
.imageviewlist .imageselect-list .imageselect-container > input[type="checkbox"]:checked + label.imageselect-radiobutton {
  border-color: #000;
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* 9) Optional: ausgewählt + hover: minimal intensiver */
.imageviewlist .imageselect-list .imageselect-container > input[type="radio"]:checked + label.imageselect-radiobutton:hover,
.imageviewlist .imageselect-list .imageselect-container > input[type="checkbox"]:checked + label.imageselect-radiobutton:hover,
.imageselect-list .imageselect-container > input[type="radio"]:checked + label.imageselect-radiobutton:hover,
.imageselect-list .imageselect-container > input[type="checkbox"]:checked + label.imageselect-radiobutton:hover {
  box-shadow:
    0 0 0 2px #0a66ff inset,
    0 0 0 4px rgba(10, 102, 255, 0.25);
}

/* 10) "No answer": neutral (du kannst es auch wie eine Karte stylen, wenn gewünscht) */
.imageviewlist .imageselect-list .no-anwser-item .radio-label,
.imageselect-list .no-anwser-item .radio-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border: 1px dashed transparent;
  border-radius: 6px;
  cursor: pointer;
}

/* 11) Responsiv: 2 Spalten bei Tablet, 1 Spalte bei schmal */
@media (max-width: 992px) {
  .imageviewlist .imageselect-list,
  .imageselect-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .imageviewlist .imageselect-list,
  .imageselect-list {
    grid-template-columns: 1fr;
  }
}

/* 12) High-contrast / erzwungene Farben */
@media (forced-colors: active) {
  .imageviewlist .imageselect-list .imageselect-container > label.imageselect-radiobutton,
  .imageselect-list .imageselect-container > label.imageselect-radiobutton {
    border: 2px solid CanvasText;
  }
  .imageviewlist .imageselect-list .imageselect-container > input[type="radio"]:checked + label.imageselect-radiobutton,
  .imageviewlist .imageselect-list .imageselect-container > input[type="checkbox"]:checked + label.imageselect-radiobutton,
  .imageselect-list .imageselect-container > input[type="radio"]:checked + label.imageselect-radiobutton,
  .imageselect-list .imageselect-container > input[type="checkbox"]:checked + label.imageselect-radiobutton {
    border-color: Highlight;
    box-shadow: 0 0 0 2px Highlight inset;
  }
}