@layer components {
  .input-block:has(select.custom-autocomplete) {
    @apply grid grid-cols-[auto_1fr_auto] items-stretch;
  }
  .input-block:has(select.custom-autocomplete) .ts-wrapper { @apply row-start-1 col-span-full; }
  .input-block:has(.input-block__prepend):has(.input-block__append) .ts-wrapper { @apply col-start-2; }
  .input-block:has(.input-block__prepend):not(:has(.input-block__append)) .ts-wrapper { @apply col-[2/-1]; }
  .input-block:not(:has(.input-block__prepend)):has(.input-block__append) .ts-wrapper { @apply col-[1/3]; }
  .input-block:has(select.custom-autocomplete) .input-block__prepend { @apply row-start-1 col-start-1; }
  .input-block:has(select.custom-autocomplete) .input-block__append  { @apply row-start-1 col-start-3; }
  .input-block:has(select.custom-autocomplete) .input-block__error-feedback,
  .input-block:has(select.custom-autocomplete) .input-block__warning-feedback { @apply row-start-2 col-span-full; }
  .input-block .ts-wrapper {
    @apply relative;
  }
  .input-block .ts-control {
    @apply flex items-center w-full min-h-[38px] rounded-[4px] border-0 py-1.5 px-3
           text-gray-900 bg-white ring-1 ring-inset ring-gray-300
           sm:text-sm sm:leading-6
           transition-colors duration-150 ease-in-out cursor-text;
  }
  .input-block .ts-control input {
    @apply text-gray-900 bg-transparent border-0 shadow-none outline-none;
  }
  .input-block .ts-control input::placeholder {
    @apply text-gray-400;
  }
  .input-block .ts-wrapper.single .ts-control {
    @apply cursor-pointer [--ts-pr-caret:2rem];
  }
  .input-block .ts-wrapper.single .ts-control::after {
    @apply content-[''] absolute top-1/2 right-3.5 w-3 h-3 -translate-y-1/2
           bg-no-repeat bg-center pointer-events-none transition-transform duration-150 ease-in-out;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.75%204.5%206%207.75%209.25%204.5%22%2F%3E%3C%2Fsvg%3E");
  }
  .input-block .ts-wrapper.single.dropdown-active .ts-control::after {
    @apply -translate-y-1/2 rotate-180;
  }
  /* On focus, TomSelect puts its search input back into the flex flow with a
     7rem min-width, wrapping the control onto a second line next to a long
     selected value. The single-mode input is read-only while a value is
     selected, so it can collapse instead of claiming space. */
  .input-block .ts-wrapper.single .ts-control {
    @apply flex-nowrap;
  }
  .input-block .ts-wrapper.single .ts-control > input {
    @apply min-w-0;
  }
  .input-block .ts-wrapper.focus .ts-control {
    @apply ring-2 ring-inset ring-primary-700 outline-none;
  }
  .input-block .custom-autocomplete.input--has-prepend .ts-control { @apply rounded-l-none; }
  .input-block .custom-autocomplete.input--has-append  .ts-control { @apply rounded-r-none; }
  .input-block .ts-dropdown {
    @apply absolute z-50 mt-1 py-1 w-full
           bg-white border border-gray-300 rounded-md shadow-lg
           max-h-60 overflow-auto;
  }
  .input-block .ts-dropdown .option {
    @apply px-3 py-2 text-sm text-gray-900 cursor-pointer;
  }
  .input-block .ts-dropdown .option.active {
    @apply bg-primary-100 text-primary-700;
  }
  .input-block .ts-dropdown .no-results {
    @apply px-3 py-2 text-sm text-gray-500;
  }
  .input-block .ts-dropdown .option[data-value=""] {
    @apply hidden;
  }
  .input-block .ts-dropdown .option[aria-disabled="true"] {
    @apply text-gray-400 cursor-not-allowed;
  }
  .input-block .ts-wrapper .clear-button {
    @apply flex items-center justify-center w-5 h-5 rounded-full
           text-gray-400 hover:text-gray-700 hover:bg-gray-100;
  }
  .input-block .ts-wrapper.has-items .clear-button {
    @apply opacity-100;
  }
  .input-block .ts-wrapper.plugin-clear_button:not(.has-items) {
    @apply [--ts-pr-clear-button:0px];
  }
  .input-block .ts-wrapper.input-block__field--invalid,
  .input-block .ts-wrapper.input-block__field--warning {
    @apply pr-0! bg-none! shadow-none! ring-0! text-inherit!;
  }
  .input-block .ts-wrapper.input-block__field--invalid .ts-control {
    @apply ring-red-500 ring-2 text-red-900;
  }
  .input-block .ts-wrapper.input-block__field--invalid.focus .ts-control {
    @apply ring-red-500;
  }
  .input-block .ts-wrapper.input-block__field--warning .ts-control {
    @apply ring-amber-500 ring-2 text-amber-900;
  }
  .input-block .ts-wrapper.input-block__field--warning.focus .ts-control {
    @apply ring-amber-500;
  }
  .input-block .ts-wrapper.disabled .ts-control {
    @apply bg-gray-100 text-gray-500 opacity-60;
  }
  .input-block .ts-wrapper.disabled .ts-control,
  .input-block .ts-wrapper.disabled .ts-control * {
    @apply cursor-not-allowed!;
  }
  .input-block .ts-wrapper.disabled .clear-button {
    @apply hidden;
  }
  /* Multi-select (TomSelect `multi`) — removable tags. */
  .input-block .ts-wrapper.multi .ts-control {
    @apply flex-wrap gap-1.5 py-1.5;
  }
  .input-block .ts-wrapper.multi .ts-control > .item {
    /* pr-1.5! beats TomSelect's base `.plugin-remove_button .item{padding-right:0!important}`. */
    @apply inline-flex items-center gap-1 overflow-hidden rounded-md
           bg-primary-100 text-primary-700 ring-1 ring-inset ring-primary-200
           text-xs font-medium leading-5 pl-2 pr-1.5! py-1
           transition-colors duration-100;
  }
  .input-block .ts-wrapper.multi .ts-control > .item.active {
    @apply bg-primary-200 ring-primary-400;
  }
  .input-block .ts-wrapper.multi .ts-control > .item .remove {
    /* m-0 p-0 border-0 strip TomSelect's base remove-button padding/margin/border-left,
       which otherwise push the cross out past the tag edge. */
    @apply flex items-center justify-center shrink-0 w-4 h-4 rounded-full border-0 m-0 p-0
           text-primary-700/50 no-underline transition-colors duration-100
           hover:text-primary-800 hover:bg-primary-200;
  }
  .input-block .ts-wrapper.multi .ts-control > .item .remove > svg {
    @apply w-2.5 h-2.5;
  }
  /* Count / overflow summary — "N selected" (count mode) or "+N" (tag mode). */
  .input-block .ts-count-display {
    @apply inline-flex items-center text-sm leading-6;
  }
  .input-block .ts-count-display:empty {
    @apply hidden;
  }
  /* Count mode: the "N selected" summary replaces the tags. */
  .input-block .ts-wrapper.multi .ts-control.count-active {
    @apply gap-0;
  }
  .input-block .ts-wrapper.multi .ts-control.count-active > .item {
    @apply hidden!;
  }
  .input-block .ts-wrapper.multi .ts-control.count-active .ts-count-display {
    @apply font-medium text-gray-700;
  }
  /* Tag mode overflow: render the "+N" as a subtle neutral pill. */
  .input-block .ts-wrapper.multi .ts-control:not(.count-active) .ts-count-display {
    @apply rounded-md bg-gray-100 text-gray-600 text-xs font-medium
           leading-5 px-2 py-0.5;
  }
  /* checkbox_options plugin — a checkbox per dropdown option. */
  .input-block .ts-wrapper.multi .ts-dropdown .option {
    @apply flex items-center gap-2.5;
  }
  .input-block .ts-wrapper.multi .ts-dropdown .option input[type="checkbox"] {
    @apply w-4 h-4 shrink-0 rounded border-gray-300 pointer-events-none;
    accent-color: theme("colors.primary.700", currentColor);
  }
  /* Mouse hover + already-selected rows in the dropdown. */
  .input-block .ts-wrapper.multi .ts-dropdown .option:hover {
    @apply bg-gray-50;
  }
  .input-block .ts-wrapper.multi .ts-dropdown .option.selected {
    @apply text-primary-700 font-medium;
  }
}

@layer components {
  .checkbox {
    @apply absolute -mb-0.5 top-1.5 left-0;
  }
  .checkbox__container {
    @apply relative block mt-2 mb-2 pl-6 leading-loose;
  }
}

@layer components {
  .botyglot--form-component--wrapper {
    @apply flex flex-col w-full;
  }
  .botyglot--form-component--field--wrapper {
    @apply flex w-full items-stretch rounded-[4px] bg-white outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600;
  }
  .botyglot--form-component--field--prepend, .botyglot--form-component--field--append {
    @apply shrink-0 flex items-center justify-center text-base text-gray-900 select-none bg-white border border-gray-300 px-3;
  }
  .botyglot--form-component--field--prepend {
    @apply rounded-l-[4px];
  }
  .botyglot--form-component--field--append {
    @apply rounded-r-[4px];
  }
  .botyglot--form-component--field--input {
    @apply block min-w-0 w-full grow placeholder:text-gray-400 text-base py-2 px-2 text-black focus:outline-none disabled:text-gray-400 disabled:cursor-not-allowed disabled:bg-gray-50;
  }
  .botyglot--form-component--field--input[readonly] {
    @apply bg-gray-50 text-gray-400 cursor-not-allowed focus:outline-none;
  }
  .botyglot--form-component--field--wrapper:has(input:disabled) {
    @apply bg-gray-50;
  }
  .botyglot--form-component--field--wrapper:has(input:disabled) .botyglot--form-component--field--prepend,
  .botyglot--form-component--field--wrapper:has(input:disabled) .botyglot--form-component--field--append {
    @apply bg-gray-50 text-gray-400;
  }
  /* Readonly styles */
  .botyglot--form-component--field--wrapper:has(input[readonly]) {
    @apply bg-gray-50;
  }
  .botyglot--form-component--field--wrapper:has(input[readonly]) .botyglot--form-component--field--prepend,
  .botyglot--form-component--field--wrapper:has(input[readonly]) .botyglot--form-component--field--append {
    @apply bg-gray-50 text-gray-400;
  }
  /* Error styles */
  .botyglot--form-component--field--invalid {
    @apply outline-red-500 text-red-900;
  }
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--invalid) {
    @apply outline-red-500 outline-2 -outline-offset-2 rounded-[4px];
  }
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--invalid) .botyglot--form-component--field--prepend,
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--invalid) .botyglot--form-component--field--append {
    @apply border-red-500 text-red-900;
  }
  /* Warning styles */
  .botyglot--form-component--field--warning {
    @apply outline-orange-500 text-orange-900 rounded-[4px];
  }
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--warning) {
    @apply outline-orange-500 outline-2 -outline-offset-2;
  }
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--warning) .botyglot--form-component--field--prepend,
  .botyglot--form-component--field--wrapper:has(.botyglot--form-component--field--warning) .botyglot--form-component--field--append {
    @apply border-orange-500 text-orange-900;
  }
  .input-block__error-feedback {
    @apply w-full text-red-500;
  }
  /* Native colour input: same height as a text field, swatch fills the box */
  input[type="color"].botyglot--form-component--field--input {
    @apply h-10 p-1 cursor-pointer disabled:cursor-not-allowed;
  }
  input[type="color"].botyglot--form-component--field--input[readonly] {
    @apply pointer-events-none;
  }
  input[type="color"].botyglot--form-component--field--input::-webkit-color-swatch-wrapper {
    @apply p-0;
  }
  input[type="color"].botyglot--form-component--field--input::-webkit-color-swatch,
  input[type="color"].botyglot--form-component--field--input::-moz-color-swatch {
    @apply border-0 rounded-[3px];
  }
}

/* File upload — the native `file_field` rendered by the Hotwire leaf.
   `:user-invalid` (not `:invalid`) drives the error state: a required field
   is invalid from page load, and painting every empty required dropzone red
   before the user has touched anything is noise. `:user-invalid` only matches
   after an interaction or a failed submit attempt. */
@layer components {
  /* --- Plain variant: the native file input ------------------------------ */
  /* `::file-selector-button` (Tailwind's `file:` variant) is what turns the
     stock "Choose File / No file chosen" into something that belongs to the
     design system — no wrapper markup, no JS. */
  .form__file-input {
    @apply block w-full mb-2 p-0 overflow-hidden text-xs leading-9 text-secondary-700
           bg-white cursor-pointer rounded-xs border border-secondary-200
           transition-colors
           file:mr-3 file:h-9 file:px-4 file:border-0 file:border-r
           file:border-secondary-200 file:bg-secondary-100 file:text-xs
           file:font-medium file:text-secondary-900 file:cursor-pointer
           file:transition-colors;
  }
  .form__file-input:hover:not(:disabled) {
    @apply border-primary-400;
  }
  .form__file-input:hover:not(:disabled)::file-selector-button {
    @apply bg-primary-100 text-primary-700;
  }
  .form__file-input:focus-visible {
    @apply outline-none border-primary-400 ring-2 ring-inset ring-primary-200;
  }
  .form__file-input:user-invalid {
    @apply border-danger-500;
  }
  .form__file-input:disabled {
    @apply cursor-not-allowed opacity-50 bg-secondary-100;
  }
  .form__file-input:disabled::file-selector-button {
    @apply cursor-not-allowed;
  }
  /* --- Dropzone variant -------------------------------------------------- */
  /* The real input is stretched transparently over the whole zone, so the
     browser handles click-to-browse, drag-&-drop and the constraint-validation
     bubble natively — and anchors that bubble to the visible box rather than
     to an off-screen 1px element. */
  .form__file-dropzone {
    @apply relative mb-2 rounded-xs border border-dashed border-secondary-200
           bg-white transition-colors;
  }
  .form__file-dropzone__input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
  }
  .form__file-dropzone__content {
    @apply flex flex-col items-center justify-center gap-1 w-full px-4 py-6
           text-xs text-secondary-700;
  }
  .form__file-dropzone__filename {
    @apply font-medium text-secondary-900;
  }
  .form__file-dropzone:hover {
    @apply bg-primary-100;
  }
  .form__file-dropzone--dragging {
    @apply border-solid border-primary-700 bg-primary-100;
  }
  .form__file-dropzone:has(.form__file-dropzone__input:focus-visible) {
    @apply border-primary-400 ring-2 ring-inset ring-primary-200;
  }
  .form__file-dropzone:has(.form__file-dropzone__input:user-invalid) {
    @apply border-danger-500;
  }
  .form__file-dropzone--disabled {
    @apply opacity-50 bg-secondary-100;
  }
  .form__file-dropzone--disabled:hover {
    @apply bg-secondary-100;
  }
  .form__file-dropzone--disabled .form__file-dropzone__input {
    @apply cursor-not-allowed;
  }
}

@layer components {
  .overflow-guard {
    @apply w-full;
  }
  .input-block {
    @apply mb-4 mt-2 relative flex flex-wrap w-full items-stretch;
  }
  .input-block__text {
    @apply flex items-center mb-0 rounded border border-solid text-center whitespace-nowrap text-base font-normal py-1.5 px-3;
    color: #495057;
    background-color: #e9ecef;
    border-color: #ced4da;
  }
  .input-block__append, .input-block__prepend {
    @apply flex text-center mb-0 border border-solid py-1.5 px-3 text-base font-normal leading-normal whitespace-nowrap rounded;
    color: #495057;
    background-color: #e9ecef;
    border-color: #ced4da;
  }
  .input-block__error-feedback {
    @apply w-full mt-1;
    font-size: 80%;
    color: #dc3545;
  }
  .input-block__warning-feedback {
    @apply block w-full mt-1 text-xs text-[#e5a54b];
  }
  .input-block__field {
    @apply relative flex-auto block py-1.5 px-3 leading-normal bg-clip-padding border-0 ring-1 ring-inset ring-gray-300 rounded-[4px];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .input-block__field--invalid {
    @apply bg-no-repeat ring-1 ring-inset ring-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 border-0;
    background-position: right 1rem center, center right 2.25rem;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: 3rem !important;
    color: #e40000 !important;
  }
  .checkbox {
    @apply absolute -mb-0.5 top-1.5 left-0;
  }
  .checkbox__container {
    @apply relative block mt-2 mb-2 pl-6 leading-loose;
  }
  .editor {
    min-height: 300px;
  }
  /* Override bootstrap border-radius changes */
  .input-block .input-block__prepend {
    border-radius: 4px 0 0 4px !important;
  }
  .input-block .input-block__append {
    border-radius: 0 4px 4px 0 !important;
  }
  .input-block:not(.input--has-prepend):not(.input-block__append):not(.invalid-feedback) {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .input-block:not(.input--has-prepend):not(.input-block__append):not(.invalid-feedback) {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .component-class:has(dd table) {
    @apply sm:grid-cols-2;
  }
  .button_to {
    margin-bottom: 0;
  }
  .tel-input-block {
    @apply flex-col;
  }
  .tel-input-block:has(.tel-input__error-feedback) {
    color: #dc3545;
  }
}

@layer components {
  .botyglot-label {
    @apply inline-block px-2 py-1;
  }
}

@layer components {
  .multi_check__wrapper {
    @apply mt-4 divide-y divide-gray-200 border-b border-t border-gray-200;
  }
  .multi_check__flex-container {
    @apply relative flex items-start py-4;
  }
  .multi_check__checkbox-container {
    @apply min-w-0 flex-1 text-sm leading-6;
  }
  .multi_check__checkbox-input {
    @apply h-4! w-4! rounded! border-gray-300! text-indigo-600! focus:ring-indigo-600!;
  }
  .multi_check__label-container {
    @apply ml-3 flex h-6 items-center;
  }
  .multi_check__label-text {
    @apply select-none font-medium text-gray-900;
  }
}

@layer components {
  .form__field {
    @apply mb-3;
  }
  .form-validation {
    @apply relative flex w-fit items-center gap-x-3 mt-5;
  }
  .form-validation .form-validation__global-error {
    @apply size-6 rounded-full border-0 bg-danger-700 p-0 text-white text-[13px] font-semibold flex items-center justify-center cursor-pointer select-none appearance-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-700;
  }
  .form-validation button[type="submit"].elevate-button--size-s {
    @apply h-[36px] px-[14px] text-[13px] rounded-[9px];
  }
  .form-validation button[type="submit"]:disabled {
    @apply bg-chip text-ink-subtle cursor-not-allowed brightness-100;
  }
  form[aria-busy="true"] .form-validation button[type="submit"],
  form[aria-busy="true"] .form-validation button[type="submit"]:disabled {
    @apply text-transparent cursor-progress bg-primary-700 opacity-90 bg-no-repeat animate-submit-dots
    [background-image:radial-gradient(circle,var(--color-white)_2.5px,transparent_3px),radial-gradient(circle,var(--color-white)_2.5px,transparent_3px),radial-gradient(circle,var(--color-white)_2.5px,transparent_3px)]
    [background-size:8px_8px];
  }
  .form-validation__tooltip {
    @apply absolute bottom-full right-0 z-20 mb-[8px] w-max max-w-[320px] list-none select-none rounded-[9px] border border-danger-200 bg-danger-50 px-[12px] py-[8px] text-[12.5px] font-medium leading-[1.4] text-danger-800 shadow-[0_10px_28px_color-mix(in_srgb,var(--color-danger-800)_18%,transparent)];
  }
  .form-validation__tooltip--below {
    @apply top-full bottom-auto mt-[8px] mb-0;
  }
  .form-validation__tooltip--start {
    @apply left-0 right-auto;
  }
  .form-validation__tooltip li {
    @apply flex items-center gap-[8px] py-[3px] before:content-[''] before:size-[6px] before:shrink-0 before:rounded-full before:bg-danger-700;
  }
}

@layer components {
  .toggle_switch_component__global-container {
    margin-bottom: 0.5rem;
  }
  .toggle_switch_component__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    margin-bottom: 1em;
    cursor: pointer;
    gap: 1ch;
  }
  .toggle_switch_component__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  .toggle_switch_component__display {
    --offset: 0.25em;
    --diameter: 1.8em;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: content-box;
    width: calc(var(--diameter) * 2 + var(--offset) * 2);
    height: calc(var(--diameter) + var(--offset) * 2);
    border: 0.1em solid #ccc;
    position: relative;
    border-radius: 100vw;
    background-color: #fbe4e2;
    transition: 250ms;
  }
  .toggle_switch_component__display::before {
    content: "";
    z-index: 2;
    position: absolute;
    top: 50%;
    left: var(--offset);
    box-sizing: border-box;
    width: var(--diameter);
    height: var(--diameter);
    border: 0.1em solid #ccc;
    border-radius: 50%;
    background-color: white;
    transform: translate(0, -50%);
    will-change: transform;
    transition: inherit;
  }
  .toggle_switch_component__label:focus .toggle_switch_component__display,
  .toggle_switch_component__input:focus + .toggle_switch_component__display {
    outline: 1px dotted #212121;
    outline: 1px auto -webkit-focus-ring-color;
    outline-offset: 2px;
  }
  .toggle_switch_component__label:focus,
  .toggle_switch_component__label:focus:not(:focus-visible) .toggle_switch_component__display,
  .toggle_switch_component__input:focus:not(:focus-visible) + .toggle_switch_component__display {
    outline: 0;
  }
  .toggle_switch_component__label[aria-pressed="true"] .toggle_switch_component__display,
  .toggle_switch_component__input:checked + .toggle_switch_component__display {
    background-color: #e3f5eb;
  }
  .toggle_switch_component__label[aria-pressed="true"] .toggle_switch_component__display::before,
  .toggle_switch_component__input:checked + .toggle_switch_component__display::before {
    transform: translate(100%, -50%);
  }
  .toggle_switch_component__label[disabled] .toggle_switch_component__display,
  .toggle_switch_component__input:disabled + .toggle_switch_component__display {
    opacity: 0.6;
    filter: grayscale(40%);
    cursor: not-allowed;
  }
  .toggle_switch_component__label[read] .toggle_switch_component__display,
  .toggle_switch_component__input:disabled + .toggle_switch_component__display {
    opacity: 0.6;
    filter: grayscale(40%);
    cursor: not-allowed;
  }
  .toggle_switch_component__global-container .input-block__field--invalid {
    border: 0px !important;
  }
}