.form-label {
  font-weight: 600;
}

.form-control {
  color: var(--ev-body-color) !important;
  border: 1px solid var(--ev-input-border-color);
  background-clip: none !important;
}

.form-control::placeholder {
  font-weight: 400;
  opacity: 0.7;
}


.form-control:disabled {
  font-weight: 500;
}

.form-checkbox-label {
  font-weight: 500 !important;
  color: var(--ev-heading-color);
}

.form-label {
  font-weight: 500;
  color: var(--ev-heading-color);
}

.select2-container--disabled>span {
  cursor: not-allowed;
}

.select2-container--disabled .select2-selection--single {
  background-color: #f0f0f0 !important;
}

.select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  margin-right: 0.5rem;
}

.custom-select {
  width: 100% !important;
  height: 36px;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--ev-primary);
}

.form-textarea {
  resize: vertical;
}

#templateCssEditor {
  height: 315px;
  border-radius: 5px;
}

/* Simple select2 styling */
.select2-container--default .select2-selection--multiple {
  border: 1px solid rgb(206, 212, 218) !important;
  padding: 4px 4px 4px 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: transparent;
  border: none;
  color: var(--ev-body-color);
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #999;
  margin-right: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #d9534f;
}

/* Dropdown options - keep them simple */
.select2-container--default .select2-results__option {
  color: var(--ev-body-color);
  background-color: transparent;
  padding: 8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ev-primary);
}

/* Search input styling */
.select2-container--default .select2-search--inline .select2-search__field {
  font-size: 12px;
  padding: 4px 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ev-body-color);
  font-weight: 500;
}

.select2-container--default .select2-selection--single {
  border: none;
}

.select2-dropdown {
  border-top: none !important;
}

.form-box {
  background: var(--ev-body-bg);
  padding: 1rem;
  border-radius: var(--ev-border-radius);
}

.select2-container .icon,
.select2 .icon {
  --icon-width: 13px;
  --icon-height: 13px;
  transform: translatey(-2px);
}

#variablesGroupModal .select2-search--inline::before {
  content: "";
}

.form-control:focus {
  border-color: rgba(var(--ev-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.2rem rgba(var(--ev-primary-rgb), 0.05);
}

.field-container {
  padding: 12px;
  border-radius: 7px;
}

.field-container:not([data-variable-type="calcule"]):hover {
  background: var(--ev-form-group-hover-bg);
  cursor: pointer;
}

.field-container[data-variable-type="calcule"]:hover {
  cursor: not-allowed;
}

.field-actions {
  position: absolute;
  z-index: 1;
  right: 0;
  background: var(--ev-form-group-hover-bg);
  top: 1px;
  display: flex;
  place-items: center;
  gap: 4px;
  bottom: 1px;
}

.form-label {
  margin-bottom: 4px;
}

.field-actions {
  display: none;
}

.input-wrap {
  position: relative;
}

.input-wrap:hover .field-actions,
.field-viewer:hover .field-actions {
  display: inline-flex;
  place-items: center;
}

.field-viewer {
  display: flex;
  align-items: start;
  gap: 8px;
}

.field-viewer>* {
  margin: 0;
}

.field-viewer .btn-icon .icon {
  --icon-color: var(--ev-body-color);
}

.field-viewer .btn-icon:hover .icon {
  --icon-color: var(--ev-primary);
  cursor: pointer;
}

.field-editor {
  display: none;
  gap: 8px;
}

.field-editor .btn {
  padding: 8px;
}

.field-editor .btn::before {
  --icon-color: var(--ev-heading-color);
}

.field-editor .cancel-button::before {
  width: 12px;
  height: 12px;
}

.field-editor .save-button::before {
  width: 14px;
  height: 14px;
}

.field-editor .d-flex-app {
  flex-wrap: nowrap;
}

.editable-label:not(.calculatedVariable):empty:before {
  content: "-";
  font-size: 14px;
}

.calculatedVariable:empty::before {
  content: "calcul en cours";
  opacity: 0.4;
  animation: dotsCalculatedAnimation 1.5s steps(4, end) infinite;
  font-size: 14px;
}

@keyframes dotsCalculatedAnimation {
  0% {
    content: "calcul en cours   ";
  }

  25% {
    content: "calcul en cours.  ";
  }

  50% {
    content: "calcul en cours.. ";
  }

  75% {
    content: "calcul en cours...";
  }

  100% {
    content: "calcul en cours   ";
  }
}

.edit-buttons {
  display: flex;
  gap: 8px;
}

.select2-container {
  width: 100% !important;
}

.select2-container:not([data-select2-id]) {
  z-index: 10000 ! important;
}

.dropify-wrapper {
  border: 2px dashed #ced4da;
  border-radius: 0.25rem;
  font-family: "Montserrat";
}

.dropify-wrapper .dropify-message p {
  text-align: center;
  color: var(--ev-heading-color);
}

.dropify-wrapper .file-icon {
  display: block;
  margin-bottom: calc(4px * 3);
}

.dropify-wrapper .dropify-message span.file-icon {
  font-size: 46px;
}

.dropify-clear {
  border-width: 1px !important;
  border-radius: var(--ev-border-radius);
  text-transform: capitalize !important;
}

.dropify-clear {
  border-width: 1px !important;
  border-radius: var(--ev-border-radius);
  text-transform: capitalize !important;
}

.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p {
  font-weight: 500;
}

.select2.select2-container.select2-container--default.select2-container--disabled {
  width: 100% !important;
}

.dropzone {
  border: 2px dashed #ced4da;
  border-radius: 0.25rem;
}

#dropzoneArea .file-icon {
  display: grid;
  margin-inline: auto;
  width: fit-content;
  margin-bottom: calc(4px * 2);
}

#dropzoneArea {
  position: relative;
}

.dropzone.dz-clickable * {
  color: var(--ev-heading-color);
}

.dz-message {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.switch label .lever::after {
  width: calc(4px * 3);
  height: calc(4px * 3);
  border-radius: calc(4px * 4);
  box-shadow: 0 1px 3px 1px rgba(var(--ev-primary-rgb), 0.4);
  top: 3px;
  left: 3px;
}

.switch label .lever {
  width: calc(4px * 9);
  height: calc(2px * 9);
}

.switch label input[type="checkbox"]:checked+.lever.switch-col-grey::after {
  background-color: white;
}

.switch label input[type="checkbox"]:checked+.lever.switch-col-grey {
  background-color: var(--ev-primary);
}

.switch label input[type="checkbox"]:checked+.lever::after {
  left: calc(4px * 5);
}

.section_type .switch label input[type="checkbox"]:checked+.lever.switch-col-grey::after {
  background-color: var(--ev-section-checkbox-color);
}

.section_type .switch label input[type="checkbox"]:checked+.lever.switch-col-grey {
  background-color: var(--ev-section-checkbox-bg);
}

.switch .form-label {
  font-weight: 500;
  font-size: 16px;
}


.form-group .error-message.text-danger {
  margin-top: 8px;
  display: inline-block;
  font-weight: 500;
  display: flex;
  place-items: center;
  gap: 2px;
}


.form-group .error-message.text-danger .icon {
  --icon-height: 14px;
}

.custom-select {
  border: 1px solid rgb(206, 212, 218);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  border: 1px solid rgb(206, 212, 218);
  border-radius: 5px;
}

.select2-container--default .select2-selection--multiple {
  border: solid rgb(206, 212, 218) 1px;
}

#template-select {
  border: unset;
}

.select2-selection.is-invalid {
  border-color: var(--danger) !important;
}

#documentVariablesGroupForm .form-group {
  display: grid;
}

.select2-selection,
.select2-selection__rendered {
  height: 100% !important;
}

.field-variable.is-failed {
  --ev-input-border-color: var(--danger);
}

.field-variable.is-saved {
  --ev-input-border-color: var(--success);
}


.is-failed [type="radio"]:not(:checked)+label::before,
.is-failed [type="radio"]:not(:checked)+label::after {
  border: 1px solid var(--danger);
}

.is-saved [type="radio"]:not(:checked)+label::before,
.is-saved [type="radio"]:not(:checked)+label::after {
  border: 1px solid var(--success);
}

.form-group .invalid-feedback {
  padding-inline: 8px;
  margin-top: 8px;
}

.edit-buttons {
  margin-left: auto;
}

.field-editor {
  align-items: stretch;
}

.form-check-input[type="radio"]:checked~.form-check-label::before {
  background-color: var(--ev-primary) !important;
  border-color: var(--ev-primary) !important;
}

.form-check-input[type="radio"]:checked:disabled~.form-check-label::before {
  background-color: gray !important;
  border-color: var(--ev-border-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  min-height: 36px !important;
}

.field-variable [type="radio"]+label::before,
.field-variable [type="radio"]+label::after {
  margin: 6px;
  width: 14px;
  height: 14px;
}

.field-variable [type="radio"]:not(:checked)+label,
.field-variable [type="radio"]:checked+label {
  font-size: 14px;
}

.field-variable [type="radio"]:checked+label {
  font-weight: 500;
  display: inline-flex;
  place-items: center;
}

/* Édition radio / checkbox / avancement (EAV) — fiche en mode édition + modales.
   Le .field-editor est un flex-row (pensé pour un seul input + boutons) : pour les
   types à OPTIONS MULTIPLES, on empile chaque option sur sa propre ligne… */
.field-variable[data-variable-type="radio"] .field-editor,
.field-variable[data-variable-type="checkbox"] .field-editor,
.field-variable[data-variable-type="avancement"] .field-editor {
  flex-direction: column;
  align-items: stretch;
}

/* …et chaque option aligne proprement la case/le bouton à gauche de son libellé.
   (Les inputs sont rendus en natif Bootstrap `appearance:none` — pas de pastille
   Materialize ici ; un simple flex-row centré suffit et évite le chevauchement.) */
.field-variable .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 0;
  min-height: 0;
  margin-bottom: 2px;
}

.field-variable .form-check .form-check-input {
  float: none;
  margin: 0;
  flex: 0 0 auto;
}

.field-variable .form-check .form-check-label {
  margin: 0;
}

/* Couleur cochée = accent de l'entité (vert objet / violet contact / bleu document /
   orange ressource), hérité du body via --hd-accent ; fallback sur le primaire Tabler. */
.field-variable .form-check-input:checked {
  background-color: var(--hd-accent, var(--tblr-primary));
  border-color: var(--hd-accent, var(--tblr-primary));
}

.field-variable .form-check-input:focus {
  border-color: var(--hd-accent, var(--tblr-primary));
  box-shadow: 0 0 0 .2rem rgba(var(--hd-accent-rgb, var(--tblr-primary-rgb)), .25);
}

.field-container {
  padding: 6px 12px;
}

.form-control {
  padding: .25rem .75rem;
  font-size: .85rem;
  line-height: 1;
}

.custom-select.is-valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.was-validated .form-control:valid {
  border-color: var(--ev-border-color) !important;
  box-shadow: none !important;
}

.form-group:last-child {
  margin-bottom: 0;
}

textarea.form-control {
  padding-block: .75rem;
}

.dropify-wrapper.has-error {
  border-color: var(--ev-danger-color);
}

.dropify-wrapper:hover .dropify-errors-container {
  background: transparent !important;
}

.dropify-wrapper.has-error::before {
  background-image: none !important;
}

.dropify-wrapper .dropify-error {
  display: none !important;
}

.is-invalid~.select2 .select2-selection--multiple,
.is-invalid~.select2 .select2-selection__rendered {
  border-color: var(--ev-danger-color) !important;
}

.select2-container--default .select2-selection--multiple {
  border: solid #cfcfcf 1px !important;
  padding: .15rem .15rem .35rem .15rem !important;
}

.select2-container .select2-search--inline {
  float: initial;
}

.input-wrap .field-actions {
  right: 8px;
}

.field-variable.is-not-editable:hover {
  border-color: var(--ev-border-color) !important;
}

.field-variable.is-not-editable .edit-button {
  display: none !important;
}

[type="checkbox"]+label::before,
[type="checkbox"]:not(.filled-in)+label::after {
  width: 14px;
  height: 14px;
}

[type="checkbox"]:checked+label::before {
  left: 2px;
  border-right: 2px solid var(--ev-primary);
  border-bottom: 2px solid var(--ev-primary);
}

[type="checkbox"]:checked+label::before {
  width: 8px;
  height: 18px;
}

[type="checkbox"]+label {
  font-size: 14px;
}

[type="radio"]:checked+label::after,
[type="radio"].with-gap:checked+label::after {
  background-color: var(--ev-primary);
}

[type="radio"]:checked+label::after,
[type="radio"].with-gap:checked+label::before,
[type="radio"].with-gap:checked+label::after {
  border: 2px solid var(--ev-primary);
}

[type="checkbox"]:checked+label {
  font-weight: 500;
}

textarea[resize="vertical"] {
  resize: vertical;
}

.select2--locked .select2-selection {
  background-color: #f1f3f5;
  cursor: not-allowed;
}

.select2--locked .select2-selection__arrow {
  opacity: 0.4;
}

.select2--locked .select2-selection__rendered {
  color: #6c757d;
}

.form-check-label {
  min-width: max-content;
}

.tab-content {
  margin-top: 14px;
}

.is-failed .select2-container--default .select2-selection--single .select2-selection__rendered {
  border-color: var(--danger);
}

.is-saved .select2-container--default .select2-selection--single .select2-selection__rendered {
  border-color: var(--success);
}

.switch [disabled]+.switch-col-grey {
  opacity: .65;
  pointer-events: none;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-group__item {
  margin-bottom: 0px;
}

.checkbox-group [type="checkbox"]+label {
  padding-left: 20px;
}

[type="checkbox"]+label {
  font-size: 13px;
}

[type="checkbox"]:checked+label::before {
  height: 14px;
}

[type="checkbox"]:checked+label::before {
  top: -1px;
}

[type="checkbox"]+label::before,
[type="checkbox"]:not(.filled-in)+label::after {
  width: 12px;
  height: 12px;
}

[type="checkbox"]+label::before,
[type="checkbox"]:not(.filled-in)+label::after {
  top: 2px;
  left: 4px;
}

.filter-date-range {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.filter-date-range>* {
  flex: 1;
}

.select2-wrap-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #6c757d;
  border-radius: 50%;
  animation: select2-wrap-spin 0.6s linear infinite;
  pointer-events: none;
}

@keyframes select2-wrap-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}