/*
 * Text Input Component CSS — jsgui3-html
 *
 * Target class: .jsgui-input
 * Fill styles: outline (default), filled, underline
 * States: normal, hover, focus, disabled, invalid, readonly
 * Sizes: controlled by --input-* tokens from token_maps.js
 *
 * Reference: docs/control-design-book/visual-advancement/04-control-specs.md §4.3
 */

.jsgui-input {
    display: block;
    width: 100%;
    height: var(--input-height, 40px);
    padding: 0 var(--input-padding-x, 12px);
    font: var(--j-font-weight-normal) var(--input-font-size, var(--j-text-sm))/var(--j-line-height) var(--j-font-sans);
    color: var(--j-fg);
    background: var(--j-bg);
    border: 1px solid var(--j-border);
    border-radius: var(--input-border-radius, var(--j-radius-md));
    transition:
        border-color var(--j-duration-fast) var(--j-ease-out),
        box-shadow var(--j-duration-fast) var(--j-ease-out);
}

.jsgui-input::placeholder {
    color: var(--j-fg-subtle);
}

/* ── States ── */
.jsgui-input:hover {
    border-color: var(--j-border-strong);
}

.jsgui-input:focus {
    border-color: var(--j-primary);
    box-shadow: var(--j-focus-ring);
    outline: none;
}

.jsgui-input:disabled,
.jsgui-input[readonly] {
    background: var(--j-bg-muted);
    color: var(--j-fg-subtle);
    cursor: not-allowed;
}

.jsgui-input[aria-invalid="true"] {
    border-color: var(--j-danger);
}

.jsgui-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-danger) 25%, transparent);
}

/* ── Fill style: filled ── */
.jsgui-input[data-fill-style="filled"] {
    background: var(--j-bg-muted);
    border-color: transparent;
}

.jsgui-input[data-fill-style="filled"]:focus {
    background: var(--j-bg);
    border-color: var(--j-primary);
}

/* ── Fill style: underline ── */
.jsgui-input[data-fill-style="underline"] {
    border: none;
    border-bottom: 2px solid var(--j-border);
    border-radius: 0;
    padding-left: 0;
}

.jsgui-input[data-fill-style="underline"]:focus {
    border-bottom-color: var(--j-primary);
    box-shadow: none;
}

/* ── Textarea variant ── */
textarea.jsgui-input {
    height: auto;
    min-height: 80px;
    padding: var(--j-space-2) var(--input-padding-x, 12px);
    resize: vertical;
}

/* ══════════════════════════════════════════
   Floating Label (input-floating-label)
   ══════════════════════════════════════════ */

.jsgui-input-group {
    position: relative;
}

.jsgui-input-group>.jsgui-input {
    padding-top: 20px;
    padding-bottom: 4px;
    height: var(--input-height, 48px);
}

.jsgui-input-group>.jsgui-floating-label {
    position: absolute;
    left: var(--input-padding-x, 12px);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--j-text-sm);
    color: var(--j-fg-subtle);
    pointer-events: none;
    transition:
        top var(--j-duration-fast) var(--j-ease-out),
        font-size var(--j-duration-fast) var(--j-ease-out),
        color var(--j-duration-fast) var(--j-ease-out),
        transform var(--j-duration-fast) var(--j-ease-out);
}

/* Float up when input focused or has content */
.jsgui-input-group:focus-within>.jsgui-floating-label,
.jsgui-input-group>.jsgui-input:not(:placeholder-shown)+.jsgui-floating-label {
    top: 8px;
    transform: translateY(0);
    font-size: var(--j-text-xs);
    color: var(--j-primary);
}

/* Error state */
.jsgui-input-group>.jsgui-input[aria-invalid="true"]+.jsgui-floating-label {
    color: var(--j-danger);
}

/* Helper text */
.jsgui-input-helper {
    display: block;
    margin-top: 4px;
    font-size: var(--j-text-xs);
    color: var(--j-fg-subtle);
}

.jsgui-input-helper.error {
    color: var(--j-danger);
}

/* Character counter */
.jsgui-input-counter {
    display: block;
    text-align: right;
    font-size: var(--j-text-xs);
    color: var(--j-fg-subtle);
    margin-top: 2px;
}