@import url("/assets/components/form/form_errors-5d051840.css");

.form-wrapper {
  height: fit-content;
  margin: 0 auto;
  width: 100%;

  .error-message {
    color: var(--danger-dark);
    font-size: 0.875rem;
  }

  &:has(> .inline-form-actions) form {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }

  &.inline-form-wrapper {
    form {
      flex-direction: row;
      gap: 0.5rem;

      .field {
        align-items: flex-start;
        flex-direction: row;
        gap: 0.5rem;

        .form-label {
          line-height: 2rem;
        }

        .form-input-wrapper { /* Wraps around .form-input and .field-error */
          width: 100%;

          .field-error {
            margin-top: 0.25rem;
          }
        }
      }

      .form-actions {
        border: none;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
      }
    }
  }

  &.compact {
    form, .form {
      gap: 0;

      .form-actions {
        margin-top: 0.5rem;
      }
    }
  }

  &.form-wrapper-s {
    max-width: var(--container-s);

    @media screen and (min-width: 1400px) { /* screen-xxl */
      max-width: var(--container-m);
    }
  }

  &.form-wrapper-m {
    max-width: var(--container-m);

    @media screen and (min-width: 1400px) { /* screen-xxl */
      max-width: var(--container-xl);
    }
  }

  &.form-wrapper-backing {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1rem 0.5rem;

    .form-input {
      &:target, &:not(:placeholder-shown), &:-webkit-autofill:hover {
        & ~ .form-label {
          background: linear-gradient(to top, #fff 50%, var(--light-gray) 50%) !important;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {  /* var(--screen-md) */
    min-width: unset;
  }
}


.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  transition: 0.4s ease-in-out;
  width: 100%;

  &:has(.form-input:required) .form-label, .slim__label--required {
    &::after {
      content: '*';
      color: var(--danger);
      font-size: 1rem;
    }
  }

  .form-label {
    align-items: center;
    color: var(--theme-color-darker);
    display: inline-flex;
    font-size: 0.875rem;
    gap: 0.25rem;
    line-height: 1rem;
    font-weight: 600;
    white-space: nowrap;
    height: fit-content;
  }

  /* Fields with Floating Labels */
  &:has(.form-label.floating-label) {

    .form-label.floating-label {
      background-color: var(--pure-white);
      border: none;
      color: var(--theme-half-opacity-color);
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.5rem;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 1rem;
      transform: translateY(0.25rem) translateX(0.1rem); /*Matches vertical padding*/
      transform-origin: 0 0;
      transition: transform 0.1s ease-in-out;

      &::after {
        color: var(--danger-lightest);
      }
    }

    .form-input, .ss-main {
      background-clip: padding-box;

      &:not(.search)::placeholder {
        color: transparent
      }

      &:target, &:not(:placeholder-shown), &:-webkit-autofill:hover {
        & ~ .form-label {
          color: var(--theme-color-darker);
          opacity: 1;
          left: 0;
          line-height: 1rem;
          font-weight: 600;
          transform: scale(0.9) translateY(-0.5rem);

          &::after {
            color: var(--danger);
          }
        }
      }
    }
  }

  .form-input {
    background-color: var(--pure-white);
    border: 1px solid var(--light-gray);
    border-radius: 0.5rem;
    box-shadow: 1px 1px 4px rgba(238, 238, 238, 0.75);
    display: block;
    font-family: var(--font);
    font-size: 0.875rem;
    height: fit-content;
    line-height: 1.5rem;
    min-height: 2rem;
    padding: calc(0.25rem - 1px) calc(1rem - 1px);
    transition: border-color 0.25s, box-shadow 0.25s;
    width: 100%;

    &:focus, &:focus-visible {
      outline: 0;
      box-shadow: inset 2px 2px 2px var(--theme-tenth-opacity-color);
    }

    &:-webkit-autofill::first-line,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      font-family: var(--font);
      box-shadow: 0 0 0 30px var(--pure-white) inset !important;
      -webkit-box-shadow: 0 0 0 30px var(--pure-white) inset !important;
    }

    &:required + .form-label::after {
      content: '*';
      color: var(--danger);
      font-size: 1rem;
      margin-left: 0.25rem;
    }

    &.invalid {
      border-color: var(--danger);
    }

    &.capitalize {
      text-transform: capitalize;
    }

    &.search {
      padding-right: 6.5rem
    }

    &[type="color"] {
      height: 2.5rem;
      padding: 0.25rem 1rem;
    }

    &.error {
      border: 1px solid var(--danger-dark);
    }
  }

  &.closed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }

  &.open {
    max-height: unset;
    opacity: 1;
    visibility: visible;
  }

  &:has(select) .field-tooltip {
    margin-right: 1.5rem;
    transform: translateY(0%);
  }
}

.field--right {
  justify-content: flex-end;
}

.sub-field{
  width: 95%;
  margin-left: 5%;
}

form, .form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-actions {
  border-top: 1px solid var(--light-gray);
  display: flex;
  padding-top: calc(0.5rem - 1px);
  margin-top: 1rem;
  justify-content: flex-end;
  gap: 1rem;

  &.form-actions-simple {
    border-top: unset;
    padding-top: 0;
    margin-top: 0;
  }

  &.list {
    border-top: unset;
    padding-top: 0;
  }
}

.form-submission-redirect {
  align-items: center;
  margin: 0 auto;
  max-width: var(--container-m);
  min-width: var(--container-s);
  padding: 1rem 0;
  width: fit-content;
}

.form-wrapper#invite-users-form {
  .form-section#invite-users-optional-fields {
    gap: 0; /* Since fields are initially hidden, we don't want the gap to be visible */

    .field {
      &:has(+ .open), &.open {
        margin-bottom: 1rem;
      }
    }
  }
}


/* FORM HELPERS */
.field-description {
  color: var(--ink-gray);
  font-size: 0.875rem;
}

ul.field-requirements {
  padding-left: 1.5rem;
  color: var(--ink-gray);
  font-size: 0.875rem;
}

div.field-requirements {
  color: var(--ink-80);
  font-size: 0.875rem;
}

.field-hint {
  color: var(--ink-gray);
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: right;
  font-style: italic;
}

.field-tooltip {
  margin-right: 1rem;
  max-height: 1rem;
  padding: 0;
  position: absolute;
  right: 0;
  top: 1rem;
  transform: translateY(-50%);
  z-index: 1;
}

.false-form-label {
  color: var(--theme-color-darker);
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
  height: fit-content;
}

.bulk-verify-forms {
  h3.false-form-label {
    min-width: 100%;
  }

  .form-wrapper#verification-form-wrapper {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;

    form#bulk_reject_form {
      flex: 1;
    }

    form#bulk_approve_form {
      border-left: 1px solid var(--pure-white);
      gap: 0;
      padding-left: 0.5rem;
    }
  }

  @media screen and (max-width: 576px) { /* var(--screen-sm) */
    .form-wrapper#verification-form-wrapper {
      align-items: flex-start;
      flex-direction: column;

      form {
        width: 100%;

        .form-actions .btn {
          max-width: unset;
          width: 100%;
        }

        &#bulk_approve_form {
          border-left: 0;
          border-top: 1px solid var(--pure-white);
          padding-left: 0;
          padding-top: 0.5rem;
        }
      }
    }
  }
}

.display-select__field {
  --border-width: 1px;
  --display-select-color: var(--theme-color-darker);
  --display-select-column-count: 2;

  .display-select__wrapper {
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--display-select-column-count), 1fr);
    grid-template-rows: auto;
    width: 100%;

    .display-select__label {
      align-items: center;
      background-color: var(--off-white);
      border: var(--border-width) solid var(--light-gray);
      border-radius: var(--border-radius);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      padding: 1rem;
      transition: all 0.4s ease-in-out;
      text-align: center;

      .icon {
        --icon-fill: var(--light-gray);
        width: 3rem;

        & * {
          transition: 0.1s ease-in-out;
          fill: var(--icon-fill);
        }
      }

      &:hover {
        border-color: var(--display-select-color);
      }

      &:has(.field__input--radio:checked) {
        --highlight-color-light: color-mix(in srgb, var(--display-select-color), transparent 90%);
        --highlight-color-dark: var(--display-select-color);
        background-clip: padding-box;
        border: var(--border-width) solid transparent;
        position: relative;

        & > * {
          z-index: 2;
        }

        &:before {
          background: linear-gradient(180deg, var(--highlight-color-light), var(--highlight-color-dark), var(--highlight-color-light)),
          linear-gradient(-90deg, var(--highlight-color-light), var(--highlight-color-dark), var(--highlight-color-light));
          background-blend-mode: multiply;
          border-radius: inherit;
          content: '';
          margin: calc(var(--border-width) * -1);
          position: absolute;
          top: 0; left: 0; bottom: 0; right: 0;
          z-index: 0;
        }

        &:after {
          background: var(--off-white);
          border-radius: inherit;
          box-shadow: inset -1px 1px 4px var(--highlight-color-light);
          content: "";
          inset: var(--border-width);
          position: absolute;
          z-index: 1;
        }

        .icon {
          --icon-fill: var(--display-select-color);
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .display-select__wrapper {
      --display-select-column-count: 1;
    }
  }
}

.display-select__field#shift-status-field {
  .display-select__wrapper {
    &:has(> :only-child) {
      --display-select-column-count: 1;
    }

    .display-select__label {

      &.display-select__label--booked {
        --display-select-color: var(--success);
      }

      &.display-select__label--cancelled {
        --display-select-color: var(--danger);
      }

      @media screen and (max-width: 768px) {
        --display-select-column-count: initial;
      }
    }
  }
}

.field__input--hidden {
  display: none;
}

.field__label-wrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;

  .field__tooltip  {
    height: 1rem;
  }
}

.field__input-wrapper {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

/* Number Field with Stepper */
.field__input-wrapper:has(.field__input--number) {
  position: relative;

  .field__input--number {
    text-align: center;
    -moz-appearance: textfield; /* Hide default arrows */

    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { /* Hide default arrows */
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .field__stepper {
    position: absolute;
    top: 0;
    right: 1rem;

    .field__stepper-btn .icon * {
      fill: var(--mid-gray);
    }

    .field__stepper-divider {
      border-right: 1px solid var(--light-gray);
      margin-right: 0.25rem;
      padding-left: 0.25rem;
    }
  }
}

/* Toggle Field */
.field__input-wrapper:has(.field__input--toggle) {
  justify-content: flex-end;

  .toggle__status {
    transition: opacity 0.4s ease-in-out;

    &.toggle__status--off {
      opacity: 1;
    }

    &.toggle__status--on {
      opacity: 0;
    }
  }

  &:has(.field__input--toggle:checked) .toggle__status {
    &.toggle__status--off {
      opacity: 0;
    }

    &.toggle__status--on {
      opacity: 1;
    }
  }

  .toggle {
    --toggle-width: 3rem;
    --toggle-height: calc(var(--toggle-width) / 2);
    --toggle-offset: calc(var(--toggle-width) / 16);
    --toggle-size: calc(var(--toggle-height) - (var(--toggle-offset)) * 2);

    background: var(--light-gray);
    border-radius: var(--toggle-height);
    cursor: pointer;
    height: var(--toggle-height);
    position: relative;
    transition: background 0.3s;
    width: var(--toggle-width);

    .toggle__slider {
      background: var(--off-white);
      border-radius: 50%;
      height: var(--toggle-size);
      position: absolute;
      top: var(--toggle-offset); left: var(--toggle-offset);
      transition: transform 0.4s;
      width: var(--toggle-size);
    }
  }

  .field__input--toggle:checked + .toggle {
    background: var(--success);
  }

  .field__input--toggle:checked + .toggle .toggle__slider {
    transform: translateX(var(--toggle-height));
  }
}

.field__input--select-tag {
  background-color: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 0.5rem;
  box-shadow: 1px 1px 4px rgba(238, 238, 238, 0.75);
  padding: calc(0.5rem - 1px) calc(1rem - 1px);
  gap: 0.5rem;
  min-height: 2rem;
  width: fit-content;

  .form-label {
    white-space: nowrap;
  }

  &:has(input[type="checkbox"]:checked) {
    background-color: var(--theme-color-darker);
    box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);

    .form-label {
      color: var(--theme-complementary-color);
    }
  }
}