/**
 * FormPacer Tailwind CSS
 *
 * Drop-in replacement for forms.css + design-tokens.css for Tailwind CSS apps.
 * Uses @apply to map every semantic class to Tailwind utilities.
 *
 * Usage:
 *   @import "form_pacer/tailwind";
 *
 * Or copy into your app and customize.
 */

@layer components {
  /* Field wrapper */
  .form-group {
    @apply mb-6 relative;
  }

  /* Labels */
  .form-label {
    @apply block text-sm font-medium leading-normal text-gray-700 dark:text-gray-300 mb-1;
  }

  .form-label abbr[title] {
    @apply text-red-500 no-underline ml-0.5;
  }

  /* Text inputs, textareas, selects */
  .form-control {
    @apply block w-full px-3 py-1.5 text-sm leading-normal rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 shadow-sm outline-none transition-colors;
  }

  .form-control::placeholder {
    @apply text-gray-400 dark:text-gray-500;
  }

  .form-control:focus,
  .form-control:focus-visible {
    @apply border-blue-500 ring-2 ring-blue-500/20;
  }

  .form-control:disabled,
  .form-control[readonly] {
    @apply bg-gray-50 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed;
  }

  /* Error state on inputs */
  .form-control-error {
    @apply border-red-500 shadow-[inset_0_0_0_1px] shadow-red-500;
  }

  .form-control-error:focus,
  .form-control-error:focus-visible {
    @apply border-red-500 ring-2 ring-red-500/20;
  }

  /* Hints */
  .form-hint {
    @apply mt-1 text-xs text-gray-500 dark:text-gray-400;
  }

  /* Error messages */
  .form-hint-error {
    @apply text-red-600 dark:text-red-400;
  }

  /* Select-specific styling */
  select.form-control {
    @apply appearance-none pr-10 bg-no-repeat;
    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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
  }

  /* Checkboxes */
  .form-check-input {
    @apply w-4 h-4 rounded-sm border border-gray-300 dark:border-gray-600 cursor-pointer accent-blue-600;
  }

  .form-check-input:focus {
    @apply outline-2 outline-blue-500 outline-offset-2;
  }

  /* Radio buttons */
  .form-radio-input {
    @apply w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 cursor-pointer accent-blue-600;
  }

  .form-radio-input:focus {
    @apply outline-2 outline-blue-500 outline-offset-2;
  }

  /* File input */
  .form-file-input {
    @apply block w-full px-3 py-1.5 text-sm leading-normal rounded-md text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600;
  }

  .form-file-input:focus {
    @apply border-blue-500 outline-none ring-2 ring-blue-500/20;
  }

  /* Textarea */
  textarea.form-control {
    @apply min-h-[5rem] resize-y;
  }

  /* Submit / buttons */
  .form-submit {
    @apply inline-flex justify-center items-center px-4 py-2 text-sm font-semibold leading-normal rounded-md border-0 cursor-pointer bg-blue-600 text-white shadow-sm transition-colors;
  }

  .form-submit:hover {
    @apply bg-blue-700 -translate-y-px;
  }

  .form-submit:active {
    @apply translate-y-px;
  }

  .form-submit:disabled {
    @apply opacity-50 cursor-not-allowed translate-y-0;
  }

  /* Toggle / Switch */
  fp-toggle.form-toggle {
    @apply inline-flex items-center relative;
  }

  .form-toggle-input {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }

  .form-toggle-label {
    @apply relative pl-[3.25rem] cursor-pointer text-sm font-medium text-gray-900 dark:text-gray-100 leading-6 select-none;
  }

  /* Track */
  .form-toggle-label::before {
    content: "";
    @apply absolute left-0 top-0 w-11 h-6 rounded-full bg-gray-300 dark:bg-gray-600 transition-colors;
  }

  /* Thumb */
  .form-toggle-label::after {
    content: "";
    @apply absolute left-0.5 top-0.5 w-5 h-5 rounded-full bg-white shadow-md transition-transform;
  }

  /* Checked */
  .form-toggle-input:checked + .form-toggle-label::before {
    @apply bg-blue-600;
  }

  .form-toggle-input:checked + .form-toggle-label::after {
    @apply translate-x-5;
  }

  /* Focus */
  .form-toggle-input:focus-visible + .form-toggle-label::before {
    @apply outline-2 outline-blue-500 outline-offset-2;
  }

  /* Disabled */
  .form-toggle-input:disabled + .form-toggle-label {
    @apply text-gray-400 dark:text-gray-500 cursor-not-allowed;
  }

  .form-toggle-input:disabled + .form-toggle-label::before {
    @apply bg-gray-100 dark:bg-gray-700;
  }

  .form-toggle-input:disabled + .form-toggle-label::after {
    @apply shadow-none;
  }

  .form-toggle-input:disabled:checked + .form-toggle-label::before {
    @apply opacity-50;
  }

  /* Combobox */
  fp-combobox {
    @apply block relative;
  }

  fp-combobox select[hidden] {
    @apply hidden;
  }

  /* Combobox dropdown chevron (single-select) */
  fp-combobox:not([multiple]) > input {
    @apply pr-10 bg-no-repeat;
    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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
  }

  fp-combobox[clearable]:not([multiple]) > input {
    @apply pr-14;
  }

  fp-combobox[clearable]:not([multiple]) > .fp-combobox-clear {
    right: 2rem;
  }

  .fp-combobox-listbox {
    @apply absolute top-full left-0 right-0 z-50 max-h-60 overflow-y-auto mt-0.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg;
  }

  .fp-combobox-option {
    @apply px-3 py-1.5 text-sm leading-normal cursor-pointer text-gray-900 dark:text-gray-100;
  }

  .fp-combobox-option--focused {
    @apply bg-gray-50 dark:bg-gray-700;
  }

  .fp-combobox-option--selected {
    @apply font-semibold text-blue-600 dark:text-blue-400;
  }

  .fp-combobox-option--disabled {
    @apply text-gray-400 dark:text-gray-500 cursor-not-allowed;
  }

  .fp-combobox-no-results {
    @apply px-3 py-1.5 text-sm italic text-gray-400 dark:text-gray-500;
  }

  .fp-combobox-loading {
    @apply px-3 py-1.5 text-sm text-gray-400 dark:text-gray-500;
  }

  /* Multi-select combobox tags */
  .fp-combobox-tags {
    @apply flex flex-wrap items-center gap-1 min-h-[2.25rem] px-1.5 py-1 cursor-text;
  }

  .fp-combobox-tags-input {
    @apply flex-1 min-w-[4rem] border-0 outline-none px-1.5 py-0.5 text-sm leading-normal bg-transparent text-gray-900 dark:text-gray-100;
  }

  .fp-combobox-tags-input::placeholder {
    @apply text-gray-400 dark:text-gray-500;
  }

  .fp-combobox-tag {
    @apply inline-flex items-center gap-1 max-w-full px-1.5 py-px text-[0.8125rem] leading-normal text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-full;
  }

  .fp-combobox-tag-text {
    @apply overflow-hidden text-ellipsis whitespace-nowrap;
  }

  .fp-combobox-tag-remove {
    @apply inline-flex items-center justify-center shrink-0 w-4 h-4 p-0 border-0 bg-transparent text-sm leading-none text-gray-400 dark:text-gray-500 cursor-pointer rounded-sm transition-colors;
  }

  .fp-combobox-tag-remove:hover {
    @apply text-red-500 bg-red-50 dark:bg-red-950;
  }

  /* Multi-select option check indicator */
  .fp-combobox-option-check {
    @apply inline-block w-4 shrink-0 text-center text-blue-600 dark:text-blue-400;
  }

  fp-combobox[multiple] .fp-combobox-option {
    @apply flex items-center gap-1.5;
  }

  /* Screen reader only */
  .fp-sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }

  /* File Upload */
  fp-file-upload {
    @apply block relative;
  }

  .fp-file-dropzone {
    @apply flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 cursor-pointer text-center transition-colors;
  }

  .fp-file-dropzone:hover {
    @apply border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-700;
  }

  .fp-file-dropzone--active {
    @apply border-blue-500 bg-gray-50 dark:bg-gray-700;
  }

  .fp-file-upload-icon {
    @apply w-8 h-8 text-gray-400 dark:text-gray-500;
  }

  .fp-file-dropzone-text {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }

  .fp-file-list {
    @apply flex flex-col gap-2 mt-2;
  }

  .fp-file-list:empty {
    @apply hidden;
  }

  .fp-file-item {
    @apply grid grid-cols-[1fr_auto] gap-1.5 items-center px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 transition-all;
  }

  .fp-file-item--complete {
    @apply border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-950;
  }

  .fp-file-item--error {
    @apply border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950;
  }

  .fp-file-info {
    @apply flex items-center gap-2 min-w-0;
  }

  .fp-file-name {
    @apply text-sm font-medium text-gray-900 dark:text-gray-100 overflow-hidden text-ellipsis whitespace-nowrap;
  }

  .fp-file-size {
    @apply text-xs text-gray-400 dark:text-gray-500 shrink-0;
  }

  .fp-file-right {
    @apply flex items-center gap-2 ml-auto;
  }

  .fp-file-status {
    @apply text-xs font-medium text-gray-500 dark:text-gray-400;
  }

  .fp-file-item--complete .fp-file-status {
    @apply text-green-600 dark:text-green-400;
  }

  .fp-file-item--error .fp-file-status {
    @apply text-red-600 dark:text-red-400;
  }

  .fp-file-progress {
    @apply col-span-full w-full h-1 rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden;
  }

  .fp-file-progress-bar {
    @apply h-full rounded-full bg-blue-600 transition-all;
  }

  .fp-file-item--complete .fp-file-progress-bar {
    @apply bg-green-500;
  }

  .fp-file-item--error .fp-file-progress-bar {
    @apply bg-red-500;
  }

  .fp-file-remove {
    @apply inline-flex items-center justify-center w-5 h-5 p-0 border-0 bg-transparent text-base leading-none text-gray-400 dark:text-gray-500 cursor-pointer rounded-sm transition-colors;
  }

  .fp-file-remove:hover {
    @apply text-red-500 bg-red-50 dark:bg-red-950;
  }

  .fp-file-error {
    @apply flex items-center justify-between gap-2 px-3 py-2 mt-2 border border-red-200 dark:border-red-800 rounded-md bg-red-50 dark:bg-red-950 text-[0.8125rem] text-red-600 dark:text-red-400;
  }

  .fp-file-error-close {
    @apply inline-flex items-center justify-center w-5 h-5 p-0 border-0 bg-transparent text-base leading-none text-red-500 cursor-pointer shrink-0;
  }

  .fp-file-error-close:hover {
    @apply text-red-700 dark:text-red-300;
  }

  /* Collections (radio buttons, check boxes) */
  .form-collection {
    @apply flex flex-col gap-2;
  }

  .form-collection-item {
    @apply inline-flex items-center gap-2;
  }

  .form-collection-label {
    @apply text-sm font-normal text-gray-900 dark:text-gray-100 cursor-pointer;
  }

  /* Radio Pills */
  .form-radio-pills {
    @apply inline-flex gap-0 border border-gray-300 dark:border-gray-600 rounded-full p-0 m-0 overflow-hidden;
  }

  .form-radio-pills legend {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }

  .form-radio-pill-item {
    @apply relative inline-block;
  }

  .form-radio-pill-item + .form-radio-pill-item {
    @apply border-l border-gray-300 dark:border-gray-600;
  }

  .form-radio-pill {
    @apply block px-3.5 py-1.5 text-sm font-medium leading-normal text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-colors;
  }

  .form-radio-pill:hover {
    @apply bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100;
  }

  .fp-sr-only:checked + .form-radio-pill {
    @apply bg-blue-600 text-white;
  }

  .fp-sr-only:focus-visible + .form-radio-pill {
    @apply outline-2 outline-blue-500 -outline-offset-2;
  }

  /* Date picker element */
  fp-datepicker {
    @apply block relative;
  }
}