/* ============================================================================
 * forms-bootstrap.css — site-wide form harmonisation.
 *
 * The app is themed via Tailwind utilities + custom CSS tokens (see
 * theme.css). To deliver the "all forms should use Bootstrap" goal
 * without rewriting every one of the ~100 admin/customer views, we
 * (a) load Bootstrap's stylesheet from CDN, and (b) re-target the
 * Bootstrap component look onto BARE form elements (input/select/
 * textarea/button) and onto the existing custom `.btn`/`.btn-primary`/
 * `.btn-outline` classes the views already use.
 *
 * Net effect: every existing form picks up consistent Bootstrap-style
 * fields, labels, focus rings and validation states with subtle
 * focus/transition animations, while the dark theme tokens still drive
 * the colour palette so the look stays on-brand.
 *
 * Scope rules:
 *   - Targets are scoped to bare elements OR to existing `.btn` classes
 *     so we don't fight Bootstrap's own .form-control / .form-select
 *     classes when a view opts in explicitly.
 *   - Excluded element types:
 *       input[type="submit"|"button"|"reset"|"checkbox"|"radio"|"file"
 *             |"range"|"color"|"image"]
 *     so the existing custom buttons and choice widgets don't get
 *     overridden.
 * ========================================================================== */

/* ---- Field defaults (inputs, selects, textareas) ----------------------- */

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
    /* Bootstrap form-control sizing / radius (matches .form-control). */
    display: block;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--card);
    background-clip: padding-box;
    border: 1px solid var(--border);
    appearance: none;
    border-radius: var(--radius, 0.5rem);
    /* Bootstrap-style focus animation. */
    transition:
        border-color 0.15s ease-in-out,
        box-shadow   0.15s ease-in-out,
        background-color 0.15s ease-in-out;
}

textarea {
    min-height: 5.5rem;
    resize: vertical;
}

/* Native pickers can ignore our background tint — give them a hint. */
input::placeholder,
textarea::placeholder {
    color: var(--muted-foreground);
    opacity: 0.85;
}

/* Bootstrap-style focus ring — 0.2rem outer halo using the accent token. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])
    :not([type="button"]):not([type="reset"]):not([type="file"])
    :not([type="range"]):not([type="color"]):not([type="image"]):focus,
input:not([type]):focus,
select:focus,
textarea:focus {
    color: var(--foreground);
    background-color: var(--card);
    border-color: var(--ring);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(34 211 238 / 25%); /* matches --accent at 25% */
}

/* Bootstrap is-invalid / is-valid states. */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 0.2rem rgb(220 38 38 / 25%);
}
.is-valid,
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: var(--success) !important;
}

/* Disabled / read-only — match Bootstrap's muted look. */
input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
    background-color: rgba(255, 255, 255, 0.04);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Select chevron — Bootstrap injects a SVG via background-image. We
 * reuse the same pattern but coloured for the dark theme. */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Range / color / file should keep the Bootstrap defaults applied to
 * the dedicated classes rather than being forcibly restyled. */

/* ---- Buttons ----------------------------------------------------------- */

/* Custom .btn classes used throughout the app — give them a Bootstrap
 * look while keeping the existing colour palette tokens. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.4;
    border-radius: var(--radius, 0.5rem);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition:
        background-color 0.15s ease-in-out,
        border-color     0.15s ease-in-out,
        color            0.15s ease-in-out,
        box-shadow       0.15s ease-in-out,
        transform        0.05s ease-in-out;
}
.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(34 211 238 / 35%);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary {
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.12); }

.btn-outline {
    color: var(--foreground);
    background-color: transparent;
    border-color: var(--border);
}
.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
}

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.65rem 1.3rem; font-size: 1rem; }

/* ---- Bootstrap form-control / form-select / form-label opt-ins --------- */

/* When views explicitly use Bootstrap classes, harmonise the colour
 * palette with the dark theme so they match the auto-shimmed fields
 * above. Bootstrap defaults assume a light background. */
.form-control,
.form-select {
    background-color: var(--card);
    color: var(--foreground);
    border-color: var(--border);
    transition:
        border-color 0.15s ease-in-out,
        box-shadow   0.15s ease-in-out,
        background-color 0.15s ease-in-out;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--card);
    color: var(--foreground);
    border-color: var(--ring);
    box-shadow: 0 0 0 0.2rem rgb(34 211 238 / 25%);
}
.form-control::placeholder { color: var(--muted-foreground); }
.form-label {
    color: var(--foreground);
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}
.form-text { color: var(--muted-foreground); font-size: 0.8125rem; }
.invalid-feedback { color: var(--destructive); font-size: 0.8125rem; }
.valid-feedback   { color: var(--success);     font-size: 0.8125rem; }

/* ---- Subtle entrance animation for forms ------------------------------- */

@keyframes mgfxFormFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
form {
    animation: mgfxFormFadeIn 0.25s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    form { animation: none; }
    .btn, input, select, textarea { transition: none; }
}

/* ---- Cards / modals — gentle Bootstrap-style fade for [data-dialog] --- */

[data-dialog] {
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
[data-dialog].visible { opacity: 1; }