/******************
    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
*/

/* Paramètres globaux */
:root {
    --primary-color: #994fb0;
    --primary-dark: #124d61;
    --primary-light: #99cfb0;
    --secondary-color: #032638;
    --bg-color: #f5f2ed;
    --secondary-bg: #e8f5e9;
    --text-color: #032638;
    --border-color: #bdbdbd;
    --ok-color:#4caf501a;
    --error-color: #ba4a3d;
    --transition: all .3s ease;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

body {
  font-family: system-ui,Avenir,Helvetica,Arial,sans-serif;
  line-height: 1.5;
  color: var(--text-color);
}

h1, h2, h3, h1, h2, h3 {
  margin-top: 1rem;
  margin-bottom: 0rem;
}

h2 {
  font-size: 1.2825rem;
}

.logo-container > img {
  display: block;
  max-height: 256px;
  padding: 8px 0;
  width: auto;
  /* TODO : center + 50% width */
}

.text-primary {
    color: var(--text-color) !important;
}

#outerframeContainer {
    max-width: 1200px;
}

/* Boutons */
.btn-primary {
    padding: 12px 20px;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    background-color: var(--primary-color);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--primary-light);
    transform: translateY(-2px);
}

/* Alertes et messages */
.alert-danger {
  background-color: var(--bs-danger);
  color: var(--text-color);
  border:none;
  border-radius: var(--border-radius-md);
  border-color: none;
}

.text-danger {
  color: var(--error-color) !important;
  font-weight: bold;
}

.has-error .control-label {
  color: var(--error-color);
}

.has-error .form-control, .input-error .form-control {
  box-shadow: 4px 4px 0 var(--error-color);
  z-index: 3;
}

/* Fenêtres modales */
.modal-content {
    background-color: var(--bg-color);
    border-radius: 8px;
}

.modal-footer {
    justify-content: center;
}

/* Barre de navigation */
.navbar {
    background-color: var(--bg-color) !important;
}

.navbar > .container-fluid {
    flex-direction: column;
}

.navbar-brand {
  margin-right: 0;
}

/* Liste des questionnaires */

#surveyListFooter {
    background-color: var(--bg-color) !important;
    font-size: medium;
}

#surveyListFooter .img-fluid {
    height: 75%;
}

/* Questionnaires */
.survey-name {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-dark);
}

.survey-welcome {
    border-radius: 20px;
    padding: 15px;
    border: 1px solid var(--border-color);
    margin: 24px 5px 24px 5px;
    background-color: var(--secondary-bg);
}

/* Page de consentement */
.privacy {
    font-size: medium;
    line-height: 20px;
    margin-top: unset;
}

.ls-privacy-head {
    padding-bottom: 10px;
}

.ls-privacy-block {
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.ls-privacy-block:has(.ls-js-hidden) {
    /* Pas d'affichage du block si le contenu est caché */
    display: none !important;
}

.ls-privacy-block:has(#datasecurity_error) {
    /* Pas de cadre si zone de message d'erreur */
    box-shadow: none;
    border: none;
}

.datasecurity-checkbox-label a {
    color: var(--primary-color);
}

#datasecurity-checkbox-label {
    color:inherit;
}

#datasecurity_notice_label {
    color: inherit;
    padding-top: 1rem;
}

.privacy .checkbox-item label::before {
  border: 3px solid var(--primary-color);
}

/* Questionnaire */
#welcome-container {
    text-align: center;
    max-width: unset;
}

.survey-name {
    padding: 20px 0;
    border-bottom: 2px solid var(--primary-dark);
}

.group-outer-container, .space-col {
    margin-top: 0.5em;
    margin-bottom: 0;
}

.group-container .group-title {
    margin-top:0;
    color: var(--primary-color);
    text-align: center;
}

.group-container .group-description {
  text-align: center;
  font-size: 32px;
  margin-bottom: 1.5em;
}

.question-container {
    padding: 15px;
    border: 1px solid var(--border-color);
    margin: 12px 5px 12px 5px;
}

/*.question-container .question-title-container {
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
}*/

.question-container .ls-label-question {
  color: var(--primary-dark);
  font-size: 1.6rem;
  text-align: center;
}

.question-container .question-valid-container {
    margin: 0;
}

.ls-question-mandatory {
    margin: 0;
}

.ls-softmandatory-input {
    margin-bottom:10px;
}

.answer-container {
    margin-top: 15px;
}

.ls-answers .ls-heading th, .ls-answers th {
  color: var(--text-color);
  font-weight: normal;
}

.ls-answers .ls-heading th, .ls-answers th {
  /*! font-weight: 600; */
  font-size: 1.14rem;
  line-height: 20px;
}

.text-info {
    margin: 0;
    padding-bottom: 0;
}

.answer-container p {
    margin:0;
}


/* Listes déroulantes */
.filter-option-inner-inner p {
    margin-bottom: 0;
    color: var(--text-color);
}

.dropdown {
    max-width: 100%;
}

.dropdown-item p {
    margin-bottom:0;
}

.dropdown-item:hover {
    background-color: var(--primary-dark);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a:hover {
  color: var(--primary-light);
  background-color: var(--primary-dark) !important;
}

.dropdown-menu > .active > a {
    color: var(--primary-dark);
    background-color: var(--primary-light) !important;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color:var(--text-color);
}

/* Boutons radio */
.radio-item input[type=radio]:checked + label {
  color: var(--primary-dark);
}

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

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

/* Checkboxes */
.checkbox-item label::before {
    border: 3px solid var(--primary-color);
}
.checkbox-item input[type="checkbox"]:checked + label::after {
    color: var(--primary-color);
}
.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--primary-color);
}

/* Tableau de réponses */
@media only screen and (max-width: 767px) {
    /* Ne pas afficher l'entête de tableau sur mobile (déjà affiché pour chaque ligne) */
    .no-tables-mobile table.ls-answers thead {
        display: none !important; 
    }
}

/* Résultats */
.completed-text {
  background-color: var(--secondary-bg);
  padding: 15px;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
}

.completed-text h2 {
    color: var(--primary-dark);
    text-align: center;
    font-size: 1.8rem;
    padding-bottom: 15px;
    padding-top: 15px;
}

/* Conseils */
.assessment-table .assessment-heading {
    font-size: 2rem;
    color: var(--primary-dark);
    text-align: center;
    border: none !important;
    font-weight: 600;
}

.assessments-container {
    border: none !important;
}

.assessments {
    text-align:center;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    border-collapse: separate;
    background: linear-gradient(90deg, #e8f5e8, #fffbd8, #ffefd8, #fde0dd);
    color: var(--text-color);
}

.assessments > tbody {
    background-color: var(--secondary-bg);
}

.assessments > tbody > tr > th {
    border: none !important;
    color: var(--primary-dark);
    font-size: 1.4rem;
}
.assessments > tbody > tr > td {
    border: none !important;
}