.wrapper {
  padding: 2rem;
  max-width: 100%;
  overflow-y: auto;
  flex: 1;
}

.alert.success {
  background-color: #d1fae5;
  color: #065f46;
}

.alert.error {
  background-color: #fee2e2;
  color: #991b1b;
}

input:required::placeholder {
  color: #dc3545; /* Bootstrap's red */
  opacity: 1;
}

.label-inline {
  width: 150px;
  display: inline-block;
}

.badge[data-important="true"] {
  color: white !important;
  background-color: var(--bs-primary) !important;
}
.badge[data-important="false"] {
  color: black !important;
  background-color: var(--bs-light) !important;
}

#wizard {
  --gray: #d9d9d9;
  --gold: #cbaf6f;

  .form-switch {
    .form-check-input:checked {
      background-color: color-mix(in srgb, var(--gold), transparent 20%);
      border-color: var(--gold);
    }
  }

  [data-index-button] {
    background-color: var(--gray);
    border-radius: 0.375rem;

    &[data-done] {
      opacity: 0.15;
    }
  }

  [data-options] {
    [data-option] {
      padding: 0.75rem 1.5rem;
      border: 1px solid var(--gray);
      border-radius: 0.375rem;
      max-width: 12rem;
      overflow: hidden;
      text-overflow: ellipsis;

      &[data-current="true"] {
        background-color: color-mix(in srgb, var(--gold), transparent 80%);
        border-color: var(--gold);
      }

      &[data-nil="true"] {
        font-weight: 600;
      }

      &[data-available="false"] {
        background-color: var(--gray);
        opacity: 0.25;
      }

      &[data-important="false"] {
        opacity: 0.5;
      }
    }
  }

  [data-measure-card] {
    border: 1px solid var(--gray);
  }
}

[data-wizard="options"] {
  input[type="radio"],
  input[type="checkbox"]:not([data-switch]) {
    display: none;
    &:not(:disabled) + label {
      cursor: pointer;
    }
    & + label {
      user-select: none;
      border: 1px solid var(--gray);
      border-radius: 0.25rem;
    }
    &:checked + label {
      position: relative;
      border-color: var(--gold);
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        background-color: color-mix(in srgb, var(--gold), transparent 80%);
        width: 100%;
        height: 100%;
      }
    }
  }

  input[type="number"][required]:invalid {
    border-color: var(--bs-form-invalid-border-color);
  }
}

[data-wizard="measures"] {
  [data-measures-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  select option {
    text-align: center;
  }

  input[type="number"] {
    text-align: center;

    &:read-only {
      box-shadow: none;
      border-color: var(--bs-border-color);
      background-color: var(--bs-gray-200);
    }

    /* Firefox */
    -moz-appearance: textfield;
    appearance: textfield;
    /* Chrome, Safari, Edge, Opera */
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}

[data-cart-item-card] {
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast {
  min-width: 500px;
  max-width: 800px;
  width: 100%;
}

.table-row-noshows {
  background-color: #f8f9fa !important;
  opacity: 0.7;
}

.table-row-noshows td {
  background-color: #eef0f3 !important;
  color: #6c757d !important;
}

.w-90 {
  width: 90% !important;
}