core-components.css

@layer utilities {
  .fieldset .label {
    @apply text-sm font-normal text-neutrals-300 mb-2 block;
  }

  .fieldset .input,
  .fieldset .textarea {
    @apply w-full border border-neutrals-200 bg-neutrals-100 hover:border-neutrals-250 rounded-md px-3 py-2 text-neutrals-400;
    @apply focus:outline-none focus:ring-5 focus:ring-interaction-100 focus:border-interaction-300 focus:bg-neutrals-0;
  }

  .fieldset .input .disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  .fieldset .input-error {
    @apply border-warning-300;
    @apply focus:outline-none focus:ring-4 focus:ring-warning-100 focus:border-warning-300 focus:bg-neutrals-0;
  }

  .fieldset .textarea-error {
    @apply border-warning-300;
    @apply focus:outline-none focus:ring-4 focus:ring-warning-100 focus:border-warning-300 focus:bg-neutrals-0;
  }
}

@layer utilities {
  .checkbox {
    @apply bg-neutrals-100 border-neutrals-200;
    @apply hover:bg-neutrals-100 hover:border-neutrals-250;
    @apply focus:outline-none focus:ring-4 focus:ring-interaction-100 focus:border-interaction-300;
    @apply text-interaction-300;
  }
}

@layer utilities {
  .select {
    @apply bg-neutrals-100 border-neutrals-200 text-neutrals-300 appearance-none;
    @apply hover:bg-neutrals-100 hover:border-neutrals-250;
    @apply focus:outline-none focus:ring-4 focus:ring-neutrals-100 focus:border-neutrals-200;
    @apply active:bg-white active:border-interaction-300 active:ring-4 active:ring-interaction-100;

    /* boilerplate chevron */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233957EA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }
}

@layer utilities {
  .btn {
    @apply focus:outline-none focus:ring-4 focus:ring-interaction-100 border-none;
    @apply bg-interaction-300 text-neutrals-0 hover:bg-interaction-400 rounded-lg;
    @apply shadow-none;
    border-radius: 6px;
  }
  .btn.btn-icon {
    @apply px-8 py-0;
  }

  .btn.disabled,
  .btn[disabled] {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  /* Override DaisyUI's disabled background colors */

  /* For default values we have default colors. Note: ghost and link has not yet been implemented */
  .btn[disabled]:not(
      .btn-link,
      .btn-ghost,
      .btn-secondary,
      .btn-tertiary,
      .btn-danger
    ),
  .btn.disabled:not(
      .btn-link,
      .btn-ghost,
      .btn-secondary,
      .btn-tertiary,
      .btn-danger
    ) {
    @apply bg-interaction-300 hover:bg-interaction-300;
  }

  .btn.btn-secondary[disabled],
  .btn.btn-secondary.disabled {
    @apply bg-neutrals-100 hover:bg-neutrals-100;
  }

  .btn.btn-tertiary[disabled],
  .btn.btn-tertiary.disabled {
    @apply bg-neutrals-0 hover:bg-neutrals-0;
  }

  .btn.btn-danger[disabled],
  .btn.btn-danger.disabled {
    @apply bg-neutrals-0 hover:bg-neutrals-0;
  }

  .btn.btn-secondary {
    @apply bg-neutrals-100 text-interaction-300;
    @apply hover:text-interaction-400;
    @apply focus:text-interaction-300;
  }

  .btn.btn-tertiary {
    @apply bg-neutrals-0 border border-solid border-neutrals-200;
    @apply text-neutrals-300;
    @apply hover:border-neutrals-250 hover:text-neutrals-350;
  }

  .btn.btn-danger {
    @apply bg-neutrals-0 border border-solid border-danger-300;
    @apply text-danger-300;
    @apply hover:text-danger-400;
    @apply focus:ring-danger-100;
  }

  .btn.btn-ghost {
    @apply bg-transparent border-none;
    @apply text-interaction-300;
    @apply hover:text-interaction-400;
    @apply focus:ring-0;
  }

  /* Remove underline from button links, it's an internal design rule */
  a.btn {
    text-decoration: none !important;
  }
}

/* Error message component with warning icon */
p.mt-1\.5.flex.gap-2.items-center.text-sm.text-error {
  @apply text-neutrals-300;
}

p.mt-1\.5.flex.gap-2.items-center.text-sm.text-error .hero-exclamation-circle {
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23f9aa00'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
}

header h1.text-lg.font-semibold.leading-8 {
  @apply text-neutrals-350;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

/* Force table-zebra to use simple-table styling */
table.table.table-zebra {
  @apply w-full border-collapse;
}

table.table.table-zebra th {
  @apply text-neutrals-300 font-semibold p-3 bg-neutrals-50 border-b border-neutrals-300;
}

table.table.table-zebra td {
  @apply p-3 border-b border-gray-200 bg-neutrals-0;
}

@layer utilities {
  /* tables */
  .simple-table {
    @apply w-full border-collapse;
  }

  .simple-table th {
    @apply text-neutrals-300 font-semibold p-3 bg-neutrals-50 border-b border-neutrals-300;
  }

  .simple-table td {
    @apply p-3 border-b border-gray-200 bg-neutrals-0;
  }

  /* Checkbox fieldset styling - only for labels containing checkboxes */
  .fieldset label:has(input[type="checkbox"]) {
    @apply inline-flex items-center w-fit text-neutrals-300 hover:text-neutrals-400 focus:text-neutrals-400;
  }

  .fieldset label:has(input[type="checkbox"]) input[type="checkbox"] {
    @apply flex-shrink-0;
  }

  .fieldset label:has(input[type="checkbox"]) span.label {
    @apply text-base;
    position: relative;
    padding-left: 1.5rem; /* Space for checkbox */
  }

  .fieldset
    label:has(input[type="checkbox"])
    span.label
    input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.toast.toast-top.toast-end {
  @apply fixed top-4 right-4 z-50 w-96;
}

.toast .alert {
  @apply bg-white rounded-lg shadow-lg border-l-4 p-4 w-full;
  @apply flex items-start justify-between gap-4;
  border: none;
  border-left: 4px solid;
}

.toast .alert-info {
  @apply border-l-success-300;
}

.toast .alert-error {
  @apply border-l-danger-300;
}

.toast .alert-error svg {
  @apply text-danger-300;
}

.toast .alert p:first-of-type {
  @apply font-bold text-neutrals-350 mb-1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.toast .alert p:last-of-type {
  @apply text-sm text-neutrals-300;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.toast .alert svg {
  @apply w-5 h-5 flex-shrink-0 mt-0.5;
}

.toast .alert button {
  @apply text-gray-400 hover:text-gray-600 transition-colors duration-200 flex-shrink-0;
}

.toast .alert button svg {
  @apply w-5 h-5;
}

.toast .alert span.hero-information-circle,
.toast .alert span.hero-exclamation-circle {
  display: none !important;
}

/* Odyssey Neutral Text Colors */

.ody-neutral-0 {
  color: #ffffff;
}
.ody-neutral-50 {
  color: #fafaff;
}
.ody-neutral-100 {
  color: #f2f3fa;
}
.ody-neutral-200 {
  color: #dadce7;
}
.ody-neutral-250 {
  color: #9ca1b9;
}
.ody-neutral-300 {
  color: #656a81;
}
.ody-neutral-350 {
  color: #414159;
}
.ody-neutral-400 {
  color: #202024;
}

/* Odyssey Text Styles */

.ody-p1 {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.ody-p1-medium {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.ody-p1-bold {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}

.ody-h3-medium {
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%; /* 25px */
}

/* Typography/H1/Regular */
.ody-h1 {
  font-family: "IBM Plex Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Typography/H1/Medium */
.ody-h1-medium {
  font-family: "IBM Plex Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

/* Typography/H1/Bold */
.ody-h1-bold {
  font-family: "IBM Plex Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

/* Typography/H2/Regular */
.ody-h2 {
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Typography/H2/Medium */
.ody-h2-medium {
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

/* Typography/H2/Bold */
.ody-h2-bold {
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

/* Typography/H3/Regular */
.ody-h3 {
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Typography/H3/Bold */
.ody-h3-bold {
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

/* Typography/P2 Small/Regular */
.ody-p2 {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* Typography/P2 Small/Medium */
.ody-p2-medium {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

/* Typography/P2 Small/Bold */
.ody-p2-bold {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

/* Typography/P3 X-Small/Regular */
.ody-p3 {
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Typography/P3 X-Small/Medium */
.ody-p3-medium {
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

/* Typography/P3 X-Small/Bold */
.ody-p3-bold {
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

/* Typography/Mobile Footer/Regular */
.ody-mobile-footer {
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Typography/Mobile Footer/Medium */
.ody-mobile-footer-medium {
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

/* Typography/Mobile Footer/Bold */
.ody-mobile-footer-bold {
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

/* Typography/P1 Base/Regular Link */
.ody-p1-link {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P1 Base/Medium Link */
.ody-p1-medium-link {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P1 Base/Bold Link */
.ody-p1-bold-link {
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P2 Small/Regular Link */
.ody-p2-link {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P2 Small/Medium Link */
.ody-p2-medium-link {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P2 Small/Bold Link */
.ody-p2-bold-link {
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Typography/P3 X-Small/Link */
.ody-p3-link {
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}