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

/* Import Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Reset background and set modern fonts */
body {
    background: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    color: #333333;
}

/* Main color scheme */
:root {
    --primary-color: #168ebd;
    --primary-dark: #0d5c7d;  
    --primary-light: #e8f4f9;
    --text-color: #333333;
}

/* Modernize headers */
.question-title-container h1,
.question-title-container h2,
.question-title-container h3,
.group-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.8em !important;
    color: var(--primary-color) !important;
    margin-bottom: 1.5em !important;
    font-weight: 500 !important;
}

/* Question blocks modernization */
.question-container {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    margin-bottom: 2em !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Question title area - Now darker blue */
.question-title-container {
    background: var(--primary-dark) !important;
    padding: 1em !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    color: white !important;
}

/* Make question title text white for better contrast */
.question-title-container h1,
.question-title-container h2,
.question-title-container h3,
.question-title-container .question-code {
    color: white !important;
}

/* Answer area */
.answer-container {
    padding: 1em !important;
    background: #ffffff !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Help/Information text - Remove yellow, use light blue */
.help-block, 
.alert-info,
.question-help-container,
.alert-warning,
.privacy-notice {
    background-color: var(--primary-light) !important;
    border: none !important;
    padding: 1em 1.5em !important;
    border-radius: 6px !important;
    color: var(--text-color) !important;
    margin: 1em 0 !important;
}

/* Specifically target any remaining yellow backgrounds */
.alert-warning,
div[class*="bg-warning"],
.privacy-notice,
.question-help-container {
    background-color: var(--primary-light) !important;
    border-color: transparent !important;
}

/* Additional specific selectors for privacy notice */
#privacy-message,
.privacy-notice,
.alert.alert-warning.alert-dismissible,
div[id^="privacy"],
div[id*="privacy"] {
    background-color: var(--primary-light) !important;
    border: none !important;
    color: var(--text-color) !important;
}

/* Make sure no yellow borders remain */
*[class*="border-warning"] {
    border-color: transparent !important;
}

/* Privacy notice styling */
.privacy-block, 
.privacy-heading,
.privacy-body,
[data-bs-target="#data-security-modal-"],
[href="#data-security-modal-"] {
    background-color: var(--primary-light) !important;
    color: var(--text-color) !important;
    border: none !important;
    border-radius: 6px !important;
}

.privacy-block {
    padding: 1.5em !important;
    margin: 1.5em 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.privacy-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.2em !important;
    font-weight: 500 !important;
    margin-bottom: 1em !important;
}

/* Privacy policy link styling */
.privacy-block a,
[data-bs-target="#data-security-modal-"],
[href="#data-security-modal-"] {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.privacy-block a:hover,
[data-bs-target="#data-security-modal-"]:hover,
[href="#data-security-modal-"]:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

/* Modal styling for privacy policy */
.modal-content {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.modal-header {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    padding: 1.5em !important;
}

.modal-title {
    color: white !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
}

.modal-body {
    padding: 2em !important;
}

.modal-footer {
    border-top: 1px solid #e0e0e0 !important;
    padding: 1.5em !important;
}

/* Privacy notice and form-check styling */
.form-check,
.form-check-label,
div[class*="privacy"],
.privacy-notice,
.privacy-block {
    background-color: var(--primary-light) !important;
    border: none !important;
    padding: 1em 1.5em !important;
    border-radius: 6px !important;
    color: var(--text-color) !important;
    margin: 1em 0 !important;
}

/* Ensure form-check elements inside modals don't get the blue background */
.modal-body .form-check {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Question help container and error messages - No margin, no radius */
.question-help-container,
.em_num_answers.emtip.error {
    background-color: var(--primary-light) !important;
    border: none !important;
    padding: 0.2em 1em !important;
    margin: 0 !important;
    color: var(--text-color) !important;
    border-radius: 0 !important;  /* Explicitly remove border radius */
}

/* Valid container styling */
.question-valid-container {
    background-color: var(--primary-light) !important;
    border: none !important;
    padding: 0.2em 1em !important;
    border-radius: 0px !important;
    color: var(--text-color) !important;
    margin: 0em 0 !important;
}

.dropdown-menu{
    color: var(--primary-dark) !important;
}

/* Valid container styling */
.valid-container {
    background-color: var(--primary-light) !important;
    border: none !important;
    padding: 0.2em 1em !important;
    border-radius: 6px !important;
    color: var(--text-color) !important;
    margin: 1em 0 !important;
}

/* Welcome container styling - changed to ID selector */
#welcome-container {
    background-color: white !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 8px !important;
    padding: 2em !important;
    margin-bottom: 2em !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* Navigation bar styling */
.navbar {
    background-color: var(--primary-dark) !important;
    padding: 1em !important;
}

.navbar,
.navbar a,
.navbar-text {
    color: white !important;
}

.dropdown-item{
    color: var(--primary-dark) !important;
}

/* Buttons modernization */
.ls-button-submit,
.btn-primary {
    background-color: var(--primary-color) !important;
    border: none !important;
    padding: 0.8em 2em !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    color: white !important;
}

.ls-button-submit:hover,
.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(22,142,189,0.2) !important;
}

/* Form controls modernization */
.form-control {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 0.8em !important;
    transition: border-color 0.3s ease !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(22,142,189,0.1) !important;
}

/* Radio and Checkbox styling */
.radio label, .checkbox label {
    padding: 0.5em 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5em !important;
}

/* Progress bar */
.progress {
    height: 14px !important;
    border-radius: 6px !important;
    background-color: #e0e0e0 !important;
    margin: 2em 0 !important;
}

.progress-bar {
    background-color: var(--primary-color) !important;
    border-radius: 4px !important;
}

/* Survey container spacing */
.survey-container {
    max-width: 1200px !important;
    margin: 2em auto !important;
    padding: 0 1em !important;
}

/* Compact form-check for privacy notice */
.form-check {
    padding: 0.8em 1.2em !important;
    margin: 0.5em 0 !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5em !important;
}

.form-check-label {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.form-check-input {
    margin: 0 !important;
    float: none !important;
}

.titres{
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}


.titres .question-title-container{
     margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important; 
    color : black !important;
}


.ls-answers{
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 0em;
}

.titres .question-valid-container{
    display: none;
}

.titres .answer-container{
    display: none;
}

.anact_orga .question-title-container{
    border-left: 1em solid #48A5DD;
}

.anact_proj .question-title-container{
    border-left: 1em solid #D4D32C;
}

.anact_egal .question-title-container{
    border-left: 1em solid #0DAE8E;
}

.anact_dialo .question-title-container{
    border-left: 1em solid #F3923C;
}

.anact_comp .question-title-container{
    border-left: 1em solid #86B1BC;
}

.anact_sante .question-title-container{
    border-left: 1em solid #A877B2;
}

#survey-nav{
    padding-bottom: 0em !important;
    padding-top: 0em !important;
}

.nps-table input[type="radio"]:checked + label {
background-color: var(--primary-dark) !important;
  cursor: default;
  color: white;
}

.nps-right-text {
  text-align: right;
  position: relative;
  bottom: 2em;
}

label::after, .radio-item label::after {
  background-color: var(--primary-dark) !important;
}