/**
 * @file
 * ADR module styles.
 */

/* Expiration status styles */
.adr-field-expired {
  border-left: 4px solid #d32f2f;
  padding-left: 15px;
  margin-bottom: 1em;
}

.adr-field-warning {
  border-left: 4px solid #ff9800;
  padding-left: 15px;
  margin-bottom: 1em;
}

.adr-status-expired {
  color: #d32f2f;
  font-weight: bold;
}

.adr-status-warning {
  color: #ff9800;
  font-weight: bold;
}

.adr-status-ok {
  color: #4caf50;
}

/* Wizard progress indicator */
.adr-wizard-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
  padding: 0;
  list-style: none;
}

.adr-wizard-progress li {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 10px 5px;
}

.adr-wizard-progress li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #ddd;
  z-index: -1;
}

.adr-wizard-progress li:first-child::before {
  left: 50%;
}

.adr-wizard-progress li:last-child::before {
  right: 50%;
}

.adr-wizard-progress li.completed {
  color: #4caf50;
}

.adr-wizard-progress li.active {
  color: #1976d2;
  font-weight: bold;
}

.adr-wizard-progress li.pending {
  color: #9e9e9e;
}

/* Confirmation page */
.adr-confirmation {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 2em;
}

.adr-confirmation h3 {
  margin-top: 0;
  color: #1976d2;
}

.adr-confirmation dl {
  margin: 0;
}

.adr-confirmation dt {
  font-weight: bold;
  margin-top: 10px;
}

.adr-confirmation dd {
  margin-left: 0;
  padding-left: 15px;
}

/* Entity lookup form */
.adr-lookup-form {
  max-width: 500px;
  margin: 0 auto;
}

.adr-lookup-form .form-item {
  margin-bottom: 1.5em;
}

.adr-lookup-form input[type="text"] {
  font-size: 1.2em;
  padding: 10px;
}

/*** FORM STEPS ***/

.block-forms-steps{

  @media screen and (min-width: 768px) {
    ol{
      padding: 0;
      display: flex;
      gap: 1rem;
      flex-wrap: nowrap;
      list-style: none;
      counter-reset: step;

      li{
        counter-increment: step;
        position: relative;
        padding: 1rem 0;
        text-align: center;
        &::before{
          content: counter(step);
          position: absolute;
          top: 0;
          left: 50%;
          font-weight: bold;
          transform: translateX(-50%) translateY(-50%);
        }
      }
    }
  }

}

  /* Public edit form */
.adr-passage-form {
  max-width: 600px;
  margin: 0 auto;

  .form-item {
    margin-bottom: 1em;
  }


  fieldset.form-composite{
    border-color: var(--color--gray-70);
    .fieldset__legend{
      background-color: var(--color--gray-45);
    }
    .fieldset__label{
      line-height: 1.25;

    }
    .fieldset__wrapper{
      border-color: var(--color--gray-70);
      padding: var(--sp0-5) var( --sp1 );

    }

    :not(.fieldgroup) .form-boolean-group{
      display: flex;
      gap: 2rem;
    }
    .form-type-boolean{
      margin-block: var(--sp0-5);
    }
  }




  .field--name-field-marquages-produits-danger fieldset.form-composite{
    .form-boolean-group{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap:20px;
    }

    .js-form-type-checkbox{
      display: grid;
      justify-items: center;
      margin:0;
      padding: .5rem;

      &:has( input:checked ){
        outline: 2px solid var(--color--gray-70);
      }

      input{
        order: 2;
      }

      .form-item__label{
        padding:0;
        /*img{*/
        /*  filter: grayscale(100%);*/
        /*  transition: filter 0.2s ease-in-out;*/
        /*}*/
      }

      /*input:checked + .form-item__label img{*/
      /*  filter: none;*/
      /*}*/

    }

  }
}



/* Summary page */
.adr-summary-message {
  background: #e3f2fd;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 2em;
  border-left: 4px solid #1976d2;
}

.adr-summary-message h2 {
  margin-top: 0;
  color: #1976d2;
}

.adr-summary-message p {
  margin-bottom: 0;
}

.adr-summary-confirmation {
  background: #fff3e0;
  padding: 15px;
  border-radius: 4px;
  margin-top: 2em;
  border-left: 4px solid #ff9800;
}

.adr-summary-confirmation p {
  margin: 0;
  color: #e65100;
}