/*
 * Base form input styles + floating labels for Tailwind CSS v4.
 *
 * Tailwind v4 preflight sets `border-width: 0` on `*`, so form inputs
 * have no visible border unless an explicit border-width utility is used.
 *
 * This file is loaded separately from app.css so it is NOT processed by
 * the @tailwindcss/vite plugin and is guaranteed to be in the final output.
 *
 * Because this file is unlayered, its styles override Tailwind's layered
 * utilities (text-xs, font-medium, mt-1, etc.) on targeted elements.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE INPUT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea {
    padding: 0.8rem;
    border-width: 1px;
    border-style: solid;
    border-color: #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: #fff;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2897af;
    box-shadow: 0 0 0 2px rgba(40, 151, 175, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. FLOATING LABELS
   Uses :has() for label-before-input DOM order (current codebase pattern).
   ═══════════════════════════════════════════════════════════════════════════ */

.form-floating {
    position: relative;
}

/* Remove margin-top from inputs inside floating containers
   (overrides Tailwind mt-1 which is layered) */
.form-floating > input,
.form-floating > select,
.form-floating > textarea {
    margin-top: 0;
}

/* --- Label: resting position (inside the input, looks like placeholder) --- */
/* Use fixed top (input center) instead of 50% so helper/error text below
   the input doesn't push the label down. Input height ≈ 2.85rem (0.8rem
   padding × 2 + 1.25rem line-height), so center ≈ 1.5rem. */
.form-floating > label {
    position: absolute;
    top: 1.5rem;
    left: 0.75rem;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: all 0.15s ease-out;
    pointer-events: none;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    background-color: transparent;
    padding: 0 0.25rem;
    margin: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 1.5rem);
    /* Reset Tailwind layered utilities */
    display: block;
}

/* Textarea label: top-aligned instead of vertically centered */
.form-floating > label:has(~ textarea) {
    top: 0.75rem;
    transform: none;
}

/* --- Label: floated position (above the input, on the border) --- */
.form-floating > label:has(~ input:focus),
.form-floating > label:has(~ input:not(:placeholder-shown)),
.form-floating > label:has(~ textarea:focus),
.form-floating > label:has(~ textarea:not(:placeholder-shown)) {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: #2897af;
    background-color: #fff;
    padding: 0 0.25rem;
}

/* Non-focused floated label: neutral color */
.form-floating > label:has(~ input:not(:focus):not(:placeholder-shown)),
.form-floating > label:has(~ textarea:not(:focus):not(:placeholder-shown)) {
    color: #6b7280;
}

/* Select: always float the label (selects always display a value) */
.form-floating > label:has(~ select) {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.7rem;
    background-color: #fff;
    padding: 0 0.25rem;
    color: #6b7280;
}

.form-floating > label:has(~ select:focus) {
    color: #2897af;
}

/* Number/date/time inputs: always float (browser shows stepper/picker UI) */
.form-floating > label:has(~ input[type="number"]),
.form-floating > label:has(~ input[type="date"]),
.form-floating > label:has(~ input[type="datetime-local"]),
.form-floating > label:has(~ input[type="time"]),
.form-floating > label:has(~ input[type="month"]),
.form-floating > label:has(~ input[type="week"]) {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.7rem;
    background-color: #fff;
    padding: 0 0.25rem;
    color: #6b7280;
}

.form-floating > label:has(~ input[type="number"]:focus),
.form-floating > label:has(~ input[type="date"]:focus),
.form-floating > label:has(~ input[type="datetime-local"]:focus),
.form-floating > label:has(~ input[type="time"]:focus),
.form-floating > label:has(~ input[type="month"]:focus),
.form-floating > label:has(~ input[type="week"]:focus) {
    color: #2897af;
}

/* --- Hide placeholder text when label is acting as placeholder --- */
.form-floating > input::placeholder,
.form-floating > textarea::placeholder {
    color: transparent;
    transition: color 0.1s ease;
}

/* Show placeholder as hint text when focused (label has floated up) */
.form-floating > input:focus::placeholder,
.form-floating > textarea:focus::placeholder {
    color: #9ca3af;
}

/* --- Error state: red border + label when validation error present --- */
.form-floating:has(.text-red-600) > input,
.form-floating:has(.text-red-600) > select,
.form-floating:has(.text-red-600) > textarea {
    border-color: #dc2626;
}

.form-floating:has(.text-red-600) > label {
    color: #dc2626;
}

.form-floating:has(.text-red-600) > input:focus,
.form-floating:has(.text-red-600) > select:focus,
.form-floating:has(.text-red-600) > textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BRAND BUTTON UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-brand {
    background-color: #2897af;
}

.hover\:bg-brand-hover:hover {
    background-color: #459fb2;
}

.shadow-brand {
    --tw-shadow-color: #2897af;
}

.text-brand {
    color: #2897af;
}

.hover\:text-brand-dark:hover {
    color: #003357;
}

.text-brand-dark {
    color: #003357;
}

.ring-brand {
    --tw-ring-color: #2897af;
}

.focus\:ring-brand:focus {
    --tw-ring-color: #2897af;
}

.focus\:border-brand:focus {
    border-color: #2897af;
}

.border-brand {
    border-color: #2897af;
}

.outline-brand {
    outline-color: #2897af;
}

.focus-visible\:outline-brand:focus-visible {
    outline-color: #2897af;
}

.accent-brand {
    accent-color: #2897af;
}

.bg-brand-light {
    background-color: rgba(40, 151, 175, 0.1);
}

.bg-brand-lighter {
    background-color: rgba(40, 151, 175, 0.15);
}

.border-brand-light {
    border-color: rgba(40, 151, 175, 0.2);
}

.hover\:border-brand:hover {
    border-color: #2897af;
}

.ring-brand-light {
    --tw-ring-color: rgba(40, 151, 175, 0.15);
}