/*
  ----------------------------------------
  Forms (for forms using simple_form)
  ----------------------------------------
*/

:root {
  --field-padding: 0.8rem;
  --field-height: 2.5rem;
  --field-font-size: 0.9rem;
  --field-border: 1px solid var(--light);
  --field-border-radius: var(--rounded-sm);
  --field-focus-outline: 2px solid;
  --field-focus-color: var(--brand-1);
  --field-bg: var(--white);
  --field-bg-disabled: var(--lighter);
  --field-placeholder-color: var(--midtone);
  --field-value-color: var(--dark);
  --field-label-color: var(--midtone);
  --field-label-weight: var(--font-semibold);
  --field-label-size: var(--text-sm);
  --field-value-color-disabled: var(--light);
  --field-icon-size: 1.2rem;
}

@layer styles {
  form.simple_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: var(--max-w-form);

    /* Wrap multiple fields in a div.form-row for responsive layout  */
    .form-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-2xs);

      div.input {
        min-width: min(14rem, 100%);
      }
    }

    label {
      color: var(--field-label-color);
      font-weight: var(--field-label-weight);
      font-size: var(--field-label-size);
    }

    /* SimpleForm wraps form control and its label, hints, and error in a div.input */
    div.input {
      display: flex;
      position: relative;
      flex-direction: column;
      gap: var(--space-3xs);
      flex: 1;
      min-width: 16rem;

      /* Text inputs and selects */
      input:not([type="checkbox"], [type="radio"]),
      textarea,
      select {
        width: 100%;
        height: var(--field-height);
        font-size: var(--field-font-size);
        padding: 0 var(--field-padding);
        border: var(--field-border);
        border-radius: var(--field-border-radius);
        background: var(--field-bg);
        color: var(--field-value-color);
        transition: all 0.2s ease-in-out;

        &:focus {
          outline: var(--field-focus-outline) var(--field-focus-color);
          border-color: var(--field-focus-color);
          outline-offset: 0;
        }

        &::placeholder {
          color: var(--field-placeholder-color);
        }

        &:disabled {
          background: var(--field-bg-disabled);
          color: var(--field-value-color-disabled);
          cursor: not-allowed;
        }

        &:-webkit-autofill {
          /* Includes a hack to override Chrome's aggressive autofill styling */
          -webkit-text-fill-color: var(--field-value-color) !important;
          box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
        }
      }

      /* Select dropdown arrow spacing */
      select {
        padding-right: calc(var(--field-padding) + 0.5rem);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--field-padding) center;
        background-size: 1rem;
      }

      textarea {
        height: auto;
        min-height: 5rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
      }

      /* Checkboxes - modern custom styling */
      input[type="checkbox"] {
        appearance: none;
        width: 1.125rem;
        height: 1.125rem;
        border: var(--field-border);
        border-radius: var(--field-border-radius);
        background-color: var(--white);
        cursor: pointer;
        transition: all 120ms ease-in-out;
        flex-shrink: 0;
        position: relative;

        &:hover {
          border-color: var(--brand-1);
        }

        &:focus {
          outline: none;
        }

        &:checked {
          background-color: var(--brand-1);
          border-color: var(--brand-1);

          /* Checkmark using CSS */
          &::after {
            content: "";
            position: absolute;
            left: 0.3rem;
            top: 0.07rem;
            width: 0.375rem;
            height: 0.625rem;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
          }
        }

        &:disabled {
          background-color: var(--lighter);
          border-color: var(--light);
          cursor: not-allowed;

          &:checked {
            background-color: var(--midtone);
          }
        }
      }

      /* Radio buttons - modern custom styling */
      input[type="radio"] {
        appearance: none;
        width: 1.125rem;
        height: 1.125rem;
        border: var(--field-border);
        border-radius: 50%;
        background-color: var(--white);
        cursor: pointer;
        transition: all 120ms ease-in-out;
        flex-shrink: 0;
        position: relative;

        &:hover {
          border-color: var(--brand-1);
        }

        &:focus {
          outline: none;
        }

        &:checked {
          border-color: var(--brand-1);
          border-width: 2px;

          /* Large inner dot with white ring */
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0.625rem;
            height: 0.625rem;
            border-radius: 50%;
            background-color: var(--brand-1);
          }
        }

        &:disabled {
          background-color: var(--lighter);
          border-color: var(--light);
          cursor: not-allowed;

          &:checked {
            border-color: var(--midtone);

            &::after {
              background-color: var(--midtone);
            }
          }
        }
      }

      /* File drop zone */
      .ui-file {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        width: 100%;
        min-height: 10rem;
        padding: var(--space-lg);
        border: 2px dashed
          color-mix(in srgb, var(--field-label-color) 45%, transparent);
        border-radius: var(--rounded);
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--field-bg) 96%, var(--brand-1)) 0%,
          var(--field-bg) 100%
        );
        color: var(--field-value-color);
        cursor: pointer;
        text-align: center;
        transition:
          background-color 120ms ease,
          border-color 120ms ease,
          box-shadow 120ms ease,
          transform 120ms ease;

        &:hover {
          border-color: var(--field-focus-color);
          box-shadow: 0 0 0 4px
            color-mix(in srgb, var(--field-focus-color) 12%, transparent);
          transform: translateY(-1px);
        }

        &.dragging {
          border-color: var(--field-focus-color);
          border-style: solid;
          background: color-mix(
            in srgb,
            var(--field-bg) 88%,
            var(--field-focus-color)
          );
          box-shadow: 0 0 0 5px
            color-mix(in srgb, var(--field-focus-color) 16%, transparent);
          transform: scale(1.01);
        }

        &:has(.file-name:not(:empty)) {
          border-color: color-mix(
            in srgb,
            var(--field-focus-color) 70%,
            var(--light)
          );
          background: color-mix(
            in srgb,
            var(--field-bg) 92%,
            var(--field-focus-color)
          );
        }

        .upload-icon {
          box-sizing: content-box;
          width: 1.75rem;
          height: 1.75rem;
          padding: var(--space-sm);
          border-radius: 999px;
          color: var(--field-focus-color);
          background: color-mix(
            in srgb,
            var(--field-focus-color) 10%,
            var(--field-bg)
          );
        }

        .file-drop-text {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--space-2xs);
          text-align: center;
        }

        .file-drop-prompt {
          font-size: var(--field-font-size);
          color: var(--field-label-color);

          strong {
            color: var(--field-focus-color);
            font-weight: 700;
          }
        }

        .file-name {
          max-width: 100%;
          overflow: hidden;
          font-size: var(--field-font-size);
          color: var(--field-value-color);
          font-weight: 700;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:empty {
            display: none;
          }
        }
      }

      /* Icons */
      .icon,
      .trailing-icon {
        position: absolute;
        color: var(--field-label-color);
        top: 50%;
        transform: translate(0, -50%);
        z-index: 5;
        width: var(--field-icon-size);
        height: auto;
      }

      .ui-email,
      .ui-password,
      .ui-telephone,
      .ui-url,
      .ui-search,
      .ui-date,
      .ui-time {
        position: relative;
        width: 100%;
      }

      .ui-email .icon,
      .ui-password .icon,
      .ui-telephone .icon,
      .ui-url .icon,
      .ui-search .icon,
      .ui-email-icon {
        left: var(--field-padding);
        pointer-events: none;
      }

      .ui-email input,
      .ui-password input,
      .ui-telephone input,
      .ui-url input,
      .ui-search input,
      .ui-email-input {
        padding-left: calc(
          var(--field-padding) + var(--field-icon-size) + var(--space-xs)
        ) !important;
      }

      .ui-password input {
        padding-right: calc(
          var(--field-padding) + var(--field-icon-size) + var(--space-sm)
        ) !important;
      }

      .ui-date input,
      .ui-time input {
        padding-right: calc(
          var(--field-padding) + var(--field-icon-size) + var(--space-sm)
        ) !important;
      }

      .ui-date input::-webkit-calendar-picker-indicator,
      .ui-time input::-webkit-calendar-picker-indicator {
        display: none;
        opacity: 0;
      }

      .ui-password-toggle,
      .ui-picker-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--field-label-color);
        cursor: pointer;
        transition: color 120ms ease;

        &:hover {
          color: var(--field-focus-color);
        }
      }

      /* Trailing icon (right side) */
      .trailing-icon {
        right: var(--field-padding);
      }

      &:has(.trailing-icon) input {
        padding-right: calc(
          0.625rem + 1rem + 0.5rem
        ); /* icon right + icon width + gap */
      }

      /* Note and error messages*/
      span.hint {
        font-size: 0.75rem;
        color: var(--midtone);
        margin-top: -3px;
        margin-bottom: -12px;
      }

      span.error {
        font-size: 0.75rem;
        color: var(--error);
        margin-top: -3px;
        margin-bottom: -12px;
      }

      /* Error state styling */
      &:has(span.error) {
        input:not([type="checkbox"], [type="radio"]),
        textarea,
        select {
          border-color: var(--error);
          color: var(--error);

          &:focus {
            outline-color: var(--error);
            border-color: var(--error);
          }
        }
        label {
          color: var(--error);
        }
      }

      /* Labels for an individual checkbox or radio button */
      label:has(input[type="checkbox"], input[type="radio"]) {
        display: flex;
        font-size: var(--text-sm);
        align-items: center;
        gap: var(--space-2xs);
        font-weight: 400;
      }

      /* Fieldset and legend for checkbox/radio groups */
      fieldset {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        min-width: 4rem;

        legend {
          padding-bottom: var(--space-sm);
          font-size: var(--text-base);
        }
      }

      /* Segmented button wrapper - inline layout with label */
      .ui-segmented-button-wrapper {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        position: relative;
        width: fit-content;
      }

      /* Clear/deselect button - appears on hover */
      .ui-segmented-clear {
        position: absolute;
        right: 100%;
        margin-right: 0.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: var(--light);
        color: var(--midtone);
        cursor: pointer;
        opacity: 0;
        transition: opacity 120ms ease-in-out;
      }

      .ui-segmented-button-wrapper:hover:has(input[type="radio"]:checked)
        .ui-segmented-clear {
        opacity: 1;
      }

      .ui-segmented-button-wrapper > label {
        font-size: var(--text-sm);
        color: var(--field-value-color);
        font-weight: 400;
      }

      /* Segmented button control */
      .ui-segmented-button {
        display: inline-flex;
        background: var(--field-bg);
        border: var(--field-border);
        border-radius: 9999px;
        padding: 0.1rem;
        gap: 0.0625rem;

        /* Hide radio inputs visually */
        input[type="radio"] {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          pointer-events: none;
        }

        /* Segment labels as buttons */
        label {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.1rem 0.4rem;
          min-width: 1.25rem;
          font-size: 0.7rem;
          font-weight: 500;
          color: var(--midtone);
          background: transparent;
          border-radius: 9999px;
          cursor: pointer;
          transition: all 120ms ease-in-out;
          user-select: none;

          &:hover {
            color: var(--dark);
          }
        }

        /* Selected state */
        input[type="radio"]:checked + label {
          background: var(--brand-1);
          color: var(--white);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* Focus state */
        input[type="radio"]:focus-visible + label {
          outline: var(--field-focus-outline) var(--field-focus-color);
          outline-offset: 2px;
        }

        /* Disabled state */
        &.disabled {
          opacity: 0.6;

          label {
            cursor: not-allowed;

            &:hover {
              color: var(--midtone);
            }
          }

          input[type="radio"]:checked + label {
            background: var(--midtone);
          }
        }
      }
    }
  }

  .form-footer {
    padding: var(--space-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
  }
}