/*
 * Filament Floating Labels
 * Uses Filament's CSS custom properties for theming.
 *
 * CSS Variables used:
 *   --primary-600, --primary-400  (focus color)
 *   --danger-600, --danger-400    (error color)
 *   --gray-500, --gray-400        (default label color)
 *   --gray-900                    (dark mode background)
 */

/* ===================================================================
   Base wrapper
   =================================================================== */
.fl-wrapper {
    position: relative;
    overflow: visible !important;
}

/* ===================================================================
   Floating label (::after pseudo-element)
   =================================================================== */
.fl-wrapper::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 0;
    z-index: 1;
    margin-inline-start: 0.25rem;
    transform: translateY(-50%);
    background-color: white;
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
    transition: all 100ms linear;
    pointer-events: none;
}

/* Required asterisk */
.fl-wrapper[data-required="true"]::after {
    content: attr(data-label) " *";
}

/* ===================================================================
   CSS-only components (TextInput, Textarea, OneTimeCodeInput)
   Uses :placeholder-shown to detect empty state.
   =================================================================== */

/* Empty + not focused: label inside as placeholder */
.fl-wrapper:has(.fl-input:placeholder-shown:not(:focus))::after {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
    background-color: transparent;
}

/* Focused: label floats up with primary color */
.fl-wrapper:has(.fl-input:focus)::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
    color: rgb(var(--primary-600));
}

/* Has value (not placeholder-shown): label floats up */
.fl-wrapper:has(.fl-input:not(:placeholder-shown))::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
}

/* ===================================================================
   Alpine-assisted components (Select, DateTimePicker, ColorPicker, TagsInput)
   Uses .has-value / .no-value classes toggled by Alpine.
   =================================================================== */

/* Empty: label inside as placeholder */
.fl-wrapper.fl-alpine.no-value::after {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
    background-color: transparent;
}

/* Has value: label floats up */
.fl-wrapper.fl-alpine.has-value::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
}

/* Focused: label floats up with primary color */
/* Select: button or [aria-expanded] */
.fl-wrapper.fl-select:has(button:focus)::after,
.fl-wrapper.fl-select:has([aria-expanded="true"])::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
    color: rgb(var(--primary-600));
}

/* DateTimePicker, ColorPicker: has input:focus */
.fl-wrapper.fl-datetime:has(input:focus)::after,
.fl-wrapper.fl-color:has(input:focus)::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
    color: rgb(var(--primary-600));
}

/* TagsInput: has input:focus inside */
.fl-wrapper.fl-tags:has(input:focus)::after {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: white;
    color: rgb(var(--primary-600));
}

/* ===================================================================
   Hide Select's default placeholder text
   =================================================================== */
.fl-wrapper.fl-select.no-value [data-placeholder] {
    opacity: 0;
}

/* ===================================================================
   Error state
   =================================================================== */
.fl-wrapper:has([aria-invalid="true"])::after,
.fl-wrapper:has(.fi-input-wrp-error)::after {
    color: rgb(var(--danger-600));
}

/* ===================================================================
   Disabled state
   =================================================================== */
.fl-wrapper:has(input:disabled)::after,
.fl-wrapper:has(button:disabled)::after,
.fl-wrapper:has(textarea:disabled)::after {
    color: rgb(var(--gray-400));
    opacity: 0.5;
}

/* ===================================================================
   Dark mode
   =================================================================== */
.dark .fl-wrapper::after {
    background-color: rgb(var(--gray-900));
    color: rgb(var(--gray-400));
}

/* Empty in dark: transparent background */
.dark .fl-wrapper:has(.fl-input:placeholder-shown:not(:focus))::after,
.dark .fl-wrapper.fl-alpine.no-value::after {
    background-color: transparent;
}

/* Focused in dark */
.dark .fl-wrapper:has(.fl-input:focus)::after,
.dark .fl-wrapper.fl-select:has(button:focus)::after,
.dark .fl-wrapper.fl-select:has([aria-expanded="true"])::after,
.dark .fl-wrapper.fl-datetime:has(input:focus)::after,
.dark .fl-wrapper.fl-color:has(input:focus)::after,
.dark .fl-wrapper.fl-tags:has(input:focus)::after {
    background-color: rgb(var(--gray-900));
    color: rgb(var(--primary-400));
}

/* Has value in dark */
.dark .fl-wrapper:has(.fl-input:not(:placeholder-shown))::after,
.dark .fl-wrapper.fl-alpine.has-value::after {
    background-color: rgb(var(--gray-900));
}

/* Error in dark */
.dark .fl-wrapper:has([aria-invalid="true"])::after,
.dark .fl-wrapper:has(.fi-input-wrp-error)::after {
    color: rgb(var(--danger-400));
}

/* Disabled in dark */
.dark .fl-wrapper:has(input:disabled)::after,
.dark .fl-wrapper:has(button:disabled)::after,
.dark .fl-wrapper:has(textarea:disabled)::after {
    color: rgb(var(--gray-500));
    opacity: 0.5;
}