/*
 * Forms
 *
 * BEM wrapper component used by AppFormBuilder around every input, select,
 * textarea, checkbox, radio, and range field. It owns the plain-CSS
 * structure for wrapped fields.
 *
 * Structure:
 *   .form-field                            <- vertical stack (label / control / hint)
 *     .form-field__label                   <- <label>
 *     .form-field__control                 <- input wrapper, allows prefix overlay
 *       .form-field__prefix                <- absolutely-positioned leading icon slot
 *       <input class="input">              <- the actual control (see inputs.css)
 *       .form-field__error-icon            <- trailing red exclamation, error state
 *     .form-field__hint                    <- hint or error message under the control
 *
 * Variants:
 *   .form-field--inline                    <- checkbox/radio: control beside label
 *   .form-field--float                     <- floating-label single input
 *   .form-field--has-error                 <- error state; drives label, border, icon
 *
 * Error state is a single class on the wrapper. Builders no longer emit
 * .invalid-input / .invalid-label / .invalid-float-input / .invalid-float-label.
 */

/* ------------------------------------------------------------------ */
/* Wrapper                                                            */
/* ------------------------------------------------------------------ */

.form-field {
  display: block;
}

/* Top padding only when the form-field renders its own label —
 * text/number/date/area inputs etc. wrap label + control inside the
 * form-field and need breathing room above the label. Bare wrappers
 * (collection_select_input + external <label> pattern used by many admin
 * forms) skip the padding because the parent stack already spaces them;
 * matches the previous compact form-element behaviour for these inputs. */
.form-field:has(> .form-field__label) {
  padding-block-start: 1.5rem;
}

.form-field__label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
}

.form-field__label--compact {
  font-size: 0.875rem;
  color: var(--color-ink-light);
}

.form-field__control {
  position: relative;
}

.form-field__control--separated {
  margin-block-start: 0.5rem;
}


/* Add vertical offset only when the control sits directly below an internal label.
 * Bare wrappers (no internal label) collapse the gap so the parent's
 * own spacing decides the offset. */
.form-field:has(> .form-field__label) > .form-field__control {
  margin-block-start: 0.5rem;
}

.form-field__hint {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-lighter);
}

.form-field__hint--italic {
  font-style: italic;
}

.required-input-field-form {
  display: none;
}

.dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.form-field__hint--error {
  color: var(--color-critical); /* legacy hint-error / rose-600 */
}

/* ------------------------------------------------------------------ */
/* Prefix icon                                                        */
/* ------------------------------------------------------------------ */

.form-field__prefix {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  padding-inline-start: 0.5rem;
  display: flex;
  align-items: center;
  color: var(--color-ink-light);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Trailing error icon                                                */
/* ------------------------------------------------------------------ */

.form-field__error-icon {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  padding-inline-end: 0.75rem;
  display: flex;
  align-items: center;
  color: var(--color-danger);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Inline variant (checkbox / radio)                                  */
/* ------------------------------------------------------------------ */

.form-field--inline {
  padding-block-start: 0;
}

.form-field--inline .form-field__control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0;
}

.form-field--inline .form-field__control input[type="checkbox"],
.form-field--inline .form-field__control input[type="radio"] {
  appearance: none;
  inline-size: 1rem;
  block-size: 1rem;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.form-field--inline .form-field__control input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

.form-field--inline .form-field__control input[type="radio"] {
  border-radius: 50%;
}

.form-field--inline .form-field__control input[type="checkbox"]:checked,
.form-field--inline .form-field__control input[type="radio"]:checked {
  background-color: var(--color-brand-strong); /* indigo-600 */
  border-color: var(--color-brand-strong);
}

.form-field--inline .form-field__control input[type="checkbox"]:checked::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.form-field--inline .form-field__control input[type="radio"]:checked::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background-color: var(--color-surface);
  border-radius: 50%;
}

.form-field--inline .form-field__control input[type="checkbox"]:focus-visible,
.form-field--inline .form-field__control input[type="radio"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.form-field--inline .form-field__label {
  margin-block-start: 0;
}

/* ------------------------------------------------------------------ */
/* Float variant (single floating-label input)                        */
/* ------------------------------------------------------------------ */

.form-field--float {
  padding-block-start: 0;
}

.form-field--float .form-field__control {
  margin-block-start: 0;
}

.form-field--float .form-field__float-label {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 10;
  transform-origin: 0 0;
  transform: translateY(-1rem) scale(0.75);
  background-color: var(--color-surface);
  padding: 0 0.5rem;
  font-size: 1rem;
  color: var(--color-ink-lighter);
  pointer-events: none;
  transition: transform 200ms ease, color 200ms ease;
}

.form-field--float .input:placeholder-shown + .form-field__float-label {
  transform: translateY(0.625rem) scale(1);
  color: var(--color-ink-lighter);
}

.form-field--float .input:focus + .form-field__float-label {
  transform: translateY(-1rem) scale(0.75);
  color: var(--color-info-strong);
}

.form-field--float .input:focus,
.form-field--float .input:focus-visible {
  border-color: var(--color-info-strong);
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Small form component wrappers                                      */
/* ------------------------------------------------------------------ */

.tag-input-field,
.responsible-select-field {
  margin-block-start: 1rem;
}

.tag-input-field__input {
  margin-block-start: 0.5rem;
}

.tag-input-field__tags {
  margin-block-start: 1rem;
}

.tag-input-field__tag {
  display: inline-flex;
  align-items: center;
  column-gap: 0.125rem;
  margin-inline-end: 0.5rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-blue-50));
  color: rgb(var(--palette-blue-700));
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgb(var(--palette-blue-700) / 0.1);
}

.tag-input-field__remove {
  position: relative;
  margin-inline-end: -0.25rem;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border: 0;
  border-radius: calc(var(--radius-sm) / 2);
  background: transparent;
  color: inherit;
  padding: 0;
}

.tag-input-field__remove:hover,
.tag-input-field__remove:focus-visible {
  background-color: color-mix(in srgb, var(--color-info-strong) 20%, transparent);
}

.tag-input-field__remove-icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: rgb(var(--palette-blue-700));
}

.image-upload-field__preview {
  display: block;
  block-size: 24rem;
  max-inline-size: 100%;
  object-fit: contain;
  margin-block-end: 1rem;
}

.image-upload-field__help {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.responsible-select-field__control {
  margin-block-start: 0.25rem;
}

.responsible-select-field__control--spaced {
  margin-block-start: 0.5rem;
}

.country-provinces__empty {
  margin-block-start: 1.5rem;
}

.country-provinces__label {
  font-size: 1.25rem;
}

@media (min-width: 1024px) {
  .country-provinces__label {
    font-size: 1rem;
  }
}

.country-provinces__select {
  margin-block-start: 0.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-sm);
}

.country-provinces__select:focus {
  border-color: rgb(var(--palette-indigo-400));
  box-shadow:
    var(--shadow-inset-sm),
    var(--shadow-focus-soft);
}

.frequency-form__row {
  display: flex;
  flex-direction: column;
}

.frequency-form__row--spaced,
.frequency-form__label-wrap {
  margin-block-start: 1rem;
}

.frequency-form__control {
  margin-block-start: 0.5rem;
}

@media (min-width: 640px) {
  .frequency-form__row {
    flex-direction: row;
    column-gap: 1.5rem;
  }

  .frequency-form__field {
    inline-size: 50%;
  }
}


.category-responsible-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 0.25rem;
  padding: 0.5rem;
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
}

.category-responsible-row__remove {
  display: inline-flex;
  color: var(--color-danger-strong);
}

.category-responsible-row__remove:hover {
  color: rgb(var(--palette-red-700));
}

.category-responsible-row__remove-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Error state                                                        */
/* Driven by a single class on the wrapper.                           */
/* ------------------------------------------------------------------ */

.form-field--has-error .form-field__label,
.form-field--has-error .form-field__float-label {
  font-weight: 600;
  color: var(--color-critical); /* invalid-label colour */
}

.form-field--has-error .input {
  border-color: var(--color-critical); /* invalid-input border */
}

.form-field--has-error .input:focus,
.form-field--has-error .input:focus-visible {
  border-color: var(--color-critical);
  box-shadow:
    var(--shadow-inset-sm),
    0 0 0 4px rgb(var(--palette-rose-200)); /* rose-200 */
}

/* ------------------------------------------------------------------ */
/* Form action row                                                    */
/* ------------------------------------------------------------------ */

.form-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Form frame — outer padding for standalone form partials             */
/* ------------------------------------------------------------------ */

.form-frame {
  padding-inline: 2.5rem;
}

.form-frame--padded {
  padding-block: 1rem;
}

.form-frame--compact {
  padding-inline: 1rem;
}

.form-frame--padded-block {
  padding-block: 1rem;
}

/* ------------------------------------------------------------------ */
/* Form row — vertical rhythm between consecutive fields              */
/* ------------------------------------------------------------------ */

.form-row {
  margin-block-start: var(--block-space);
}

.form-row--narrow {
  max-inline-size: 24rem;
}


.form-choice-control {
  inline-size: 1rem;
  block-size: 1rem;
  border-color: var(--color-border-medium);
  color: var(--color-brand-strong);
}

.form-choice-control:focus {
  border-color: var(--color-brand);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-brand);
}

.form-choice-control--rounded {
  border-radius: var(--radius-sm);
}

.form-choice-control--offset {
  margin-inline-end: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Form fields — multi-column responsive layout for side-by-side fields */
/*                                                                    */
/* Stacks on mobile, distributes columns equally on >=640px. Each      */
/* direct child column should carry .form-fields__col.                */
/* ------------------------------------------------------------------ */

.form-grid,
.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

@media (min-width: 640px) {
  .form-grid,
  .form-fields {
    flex-direction: row;
    column-gap: 1.5rem;
    row-gap: 0;
    /* Align columns at the input edge so inputs line up across columns even
     * when labels wrap to a different number of lines or some columns wrap
     * the label in a .form-field__header (label + action link) while others
     * use a plain .form-field__label. */
    align-items: flex-end;
  }

  .form-grid--start,
  .form-fields--start {
    align-items: flex-start;
  }
}

.form-grid__col,
.form-fields__col {
  flex: 1 1 0;
  min-inline-size: 0;
}

.form-grid__col--half,
.form-fields__col--half {
  flex: 0 1 50%;
}

.form-fields__col--wide {
  flex: 2 1 0;
}

.form-grid__col--narrow,
.form-fields__col--narrow {
  max-inline-size: 24rem;
}

.form-grid__col--field-offset,
.form-fields__col--field-offset {
  padding-block-start: 1.5rem; /* aligns custom label/control columns with AppFormBuilder fields */
}

.form-grid__col--field-offset > .form-field__label + .form-field__control,
.form-fields__col--field-offset > .form-field__label + .form-field__control {
  margin-block-start: 0.5rem; /* matches AppFormBuilder label/control spacing */
}

/* ------------------------------------------------------------------ */
/* Inline select — number input with attached period/unit select       */
/* Used by Form::InlineSelectComponent for notification periods.       */
/* ------------------------------------------------------------------ */

.form-field--inline-select {
  padding-block-start: 1.5rem;
}

.form-field--inline-select .inline-select {
  margin-block-start: 0.5rem;
}

.inline-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  inline-size: 100%;
  min-block-size: calc(1lh + 1.25rem + 2px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-strong);
  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-ink);
  overflow: hidden;
}

.inline-select:focus-within {
  border-color: rgb(var(--palette-indigo-400));
  box-shadow:
    var(--shadow-inset-sm),
    var(--shadow-focus-soft);
}

.inline-select__input,
.inline-select__select {
  min-inline-size: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: max(16px, 1em);
}

.inline-select__input:focus,
.inline-select__input:focus-visible,
.inline-select__select:focus,
.inline-select__select:focus-visible {
  outline: none;
  box-shadow: none;
}

.inline-select__input {
  inline-size: 100%;
  padding: 0.625rem 0.75rem;
}

.inline-select__select-wrap {
  display: flex;
  align-items: stretch;
  border-inline-start: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.inline-select__select {
  cursor: pointer;
  padding: 0.625rem 2.25rem 0.625rem 0.75rem;
  color: var(--color-ink-light);
}

.schedule-category-clock-in-rules__warning {
  margin-block-start: var(--block-space);
}

/* ------------------------------------------------------------------ */
/* Form field header — label plus inline action                        */
/* ------------------------------------------------------------------ */

.form-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.form-field__action-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: -0.25rem;
  margin-inline-end: 0.5rem;
}

.form-field__prefix-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--color-ink-medium);
}

.form-inline--stack {
  flex-direction: column;
  align-items: flex-start;
}

.form-inline--spread {
  justify-content: space-between;
}

/* ------------------------------------------------------------------ */
/* Nested-form controls                                                */
/* ------------------------------------------------------------------ */

.form-nested__header--spacious {
  margin-block-start: 2.5rem;
}

.form-nested__header--large {
  margin-block-start: 3.5rem;
}

.form-nested__title {
  font-weight: 600;
  color: rgb(var(--palette-indigo-700));
}

/* ------------------------------------------------------------------ */
/* Form section — divider above a group of fields                     */
/* ------------------------------------------------------------------ */

.form-section {
  margin-block-start: var(--block-space-double);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border-medium);
}

/*
 * Form actions — semantic alias for the section that holds the
 * cancel/submit buttons. Same divider treatment as .form-section but
 * makes intent explicit when scanning markup. Pair with .form-buttons
 * inside.
 */
.form-actions {
  margin-block-start: var(--block-space-double);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border-medium);
}

.form-actions--end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.form-actions--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Employee search component                                           */
/* ------------------------------------------------------------------ */

.employee-search__field-wrap {
  position: relative;
  margin-block-start: 0.5rem;
}

.employee-search__control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  block-size: 46px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  padding: 0.625rem 0.75rem;
  box-shadow: var(--shadow-inset-sm);
}

.employee-search__control:focus-within {
  border-color: rgb(var(--palette-indigo-400));
  box-shadow: var(--shadow-inset-sm), var(--shadow-focus-soft);
}

@media (min-width: 640px) {
  .employee-search__control {
    flex-direction: row;
  }
}

.employee-search__tags {
  flex: 0 0 auto;
}

.employee-search__input-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  block-size: 100%;
  min-inline-size: 0;
  inline-size: 100%;
}

.employee-search__input {
  inline-size: 100%;
  border: 0;
  background: transparent;
  padding: 0;
}

.employee-search__input:focus {
  outline: none;
  box-shadow: none;
}

.employee-search__button,
.search-picker__button {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  padding-inline: 0.5rem;
  cursor: pointer;
}

.employee-search__button:focus-visible,
.search-picker__button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.employee-search__button--clear,
.search-picker__button--clear {
  inset-inline-end: 2rem;
}

.employee-search__button--toggle,
.search-picker__button--toggle {
  inset-inline-end: 0;
}

.employee-search__button-icon,
.search-picker__button-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.employee-search__results,
.search-picker__results {
  position: absolute;
  z-index: 50;
  inset-block-start: 100%;
  inset-inline: 0;
  max-block-size: 15rem;
  margin-block-start: 0.25rem;
  overflow: auto;
  scroll-behavior: smooth;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding-block: 0.25rem;
  color: var(--color-ink);
  font-size: 1rem;
  box-shadow: var(--shadow-lg), var(--shadow-ring-subtle);
}

.employee-search__results:focus,
.search-picker__results:focus {
  outline: none;
}

@media (min-width: 640px) {
  .employee-search__results {
    font-size: 0.875rem;
  }
}

.employee-search__option,
.search-picker__option {
  position: relative;
  cursor: default;
  user-select: none;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  color: var(--color-ink);
}

.employee-search__option:hover,
.employee-search__option:focus,
.search-picker__option:hover,
.search-picker__option:focus {
  background-color: var(--color-accent-strong);
  color: var(--color-ink-inverted);
}

.employee-search__tag,
.search-picker__tag {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-inline-end: 0.5rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-blue-50));
  padding: 0.25rem 0.5rem;
  color: rgb(var(--palette-blue-700));
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgb(var(--palette-blue-700) / 0.1);
}

.employee-search__tag:hover,
.search-picker__tag:hover {
  background-color: rgb(var(--palette-red-200) / 0.75);
}

.employee-search__tag-remove,
.search-picker__tag-remove {
  position: relative;
  pointer-events: auto;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-inline-end: -0.25rem;
  border: 0;
  border-radius: calc(var(--radius-sm) / 2);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.employee-search__tag-icon,
.search-picker__tag-icon {
  pointer-events: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  stroke: color-mix(in srgb, var(--color-danger-strong) 50%, transparent);
}

.employee-search__tag-remove:hover .employee-search__tag-icon,
.search-picker__tag-remove:hover .search-picker__tag-icon {
  stroke: rgb(var(--palette-red-800) / 0.75);
}

/* Generic search picker variant used by skill search components. */
.search-picker__field-wrap {
  position: relative;
  margin-block-start: 0.5rem;
}

.search-picker__control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.search-picker__tags {
  flex: 0 0 auto;
}

.search-picker__input-wrap {
  position: relative;
  flex: 1 1 auto;
  inline-size: 100%;
  margin-block-start: 1rem;
}

.search-picker__input {
  inline-size: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: 0.375rem 3rem 0.375rem 0.75rem;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.5rem;
  box-shadow: inset 0 0 0 1px var(--color-border-medium), var(--shadow-sm);
}

.search-picker__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand-strong);
}

/* ------------------------------------------------------------------ */
/* Custom period selector                                             */
/* ------------------------------------------------------------------ */

.custom-period-select,
.custom-period-select__field,
.custom-period-select__range-field {
  display: flex;
  flex-direction: column;
}

.custom-period-select__range {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .custom-period-select__range {
    flex-direction: row;
  }

  .custom-period-select__range-field {
    flex: 1 1 0;
  }
}

/* ------------------------------------------------------------------ */
/* Time picker component                                              */
/* ------------------------------------------------------------------ */

.time-picker {
  padding-block-start: 1.5rem;
}

.time-picker__control {
  margin-block-start: 0.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.form-field__error-icon-svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (min-width: 640px) {
  .search-picker__control {
    flex-direction: row;
  }

  .search-picker__input-wrap {
    margin-block-start: 0;
  }

  .search-picker__input {
    font-size: 0.875rem;
  }

  .search-picker__results {
    font-size: 0.875rem;
  }
}

.signature-template-fields {
  margin-block-start: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .signature-template-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.signature-template-fields__field {
  min-inline-size: 0;
}

.signature-template-fields__control {
  margin-block-start: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Clock-in and fast check-in forms                                   */
/* ------------------------------------------------------------------ */

.clock-in-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 3rem;
}

.clock-in-modal__notice {
  margin-inline-end: 1rem;
}

.clock-ins-empty,
.clock-in-form__option,
.clock-in-form__places {
  margin-block-start: 1.5rem;
}

.clock-in-activity-icons,
.clock-in-form__option,
.clock-in-form__places {
  display: flex;
  gap: 0.5rem;
}

.clock-in-activity-icons {
  align-items: center;
}

.clock-in-manual__header {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.clock-in-manual__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-block-start: 2rem;
}

.fast-check-in {
  margin-block-start: 2rem;
}

.fast-check-in-logo__image {
  inline-size: 14rem;
}

.fast-check-in-message {
  max-inline-size: 28rem;
  margin-block-start: 2rem;
  margin-inline: auto;
}

.fast-check-in__field {
  position: relative;
}

.fast-check-in__input {
  display: block;
  inline-size: 100%;
  padding: 1rem 0.625rem 0.625rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-ink);
  font-size: 0.875rem;
  appearance: none;
}

.fast-check-in__input:focus {
  border-color: var(--color-info-strong);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: none;
}

.fast-check-in__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.25rem;
  z-index: 10;
  padding-inline: 0.5rem;
  background-color: var(--color-surface);
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  transform: translateY(-50%) scale(1);
  transform-origin: 0 0;
  transition: color 300ms ease, transform 300ms ease;
}

.fast-check-in__input:focus + .fast-check-in__label,
.fast-check-in__input:not(:placeholder-shown) + .fast-check-in__label {
  inset-block-start: 0.5rem;
  color: var(--color-info-strong);
  transform: translateY(-1rem) scale(0.75);
}

.fast-check-in__key-row,
.fast-check-in__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 1.5rem;
}

.fast-check-in__key-row {
  gap: 1rem;
}

.fast-check-in__key,
.fast-check-in__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-ink-inverted);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.fast-check-in__key {
  inline-size: 6rem;
  block-size: 3rem;
  background-color: rgb(var(--palette-indigo-400));
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.fast-check-in__key:hover {
  background-color: var(--color-brand);
}

.fast-check-in__key:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: 2px;
}

.fast-check-in__key--symbol {
  background-color: rgb(var(--palette-violet-400));
}

.fast-check-in__key--symbol:hover {
  background-color: rgb(var(--palette-violet-500));
}

.fast-check-in__key--delete {
  background-color: var(--color-danger);
}

.fast-check-in__key--delete:hover {
  background-color: var(--color-danger-strong);
}

.fast-check-in__delete-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.fast-check-in__submit {
  inline-size: 100%;
  block-size: 3rem;
  background-color: rgb(var(--palette-lime-500));
  font-size: 1.5rem;
  line-height: 2rem;
}

.fast-check-in__submit:hover {
  background-color: rgb(var(--palette-lime-600));
}

.fast-check-in__submit:focus-visible {
  outline: 2px solid rgb(var(--palette-lime-600));
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .form-fields-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-fields-layout__col {
  min-inline-size: 0;
}

.custom-field-values__title {
  margin-block: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}