/* Text inputs, textareas, selects, search field.
   Material-style filled field with floating label. Wrap input in a .field. */

.field {
    position: relative;
    display: block;
}

.field > label {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    padding: 0 4px;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    pointer-events: none;
    background: transparent;
    transition: top var(--motion-fast) var(--ease-standard),
                font-size var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.field input,
.field textarea,
.field select,
.input {
    width: 100%;
    height: var(--input-height, 48px);
    padding: 0 var(--space-4);
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font: inherit;
    font-size: var(--text-body);
    transition: border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}

.field textarea,
textarea.input {
    height: auto;
    min-height: 96px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    resize: vertical;
    line-height: var(--line-normal);
}

.field input::placeholder,
.field textarea::placeholder,
.input::placeholder {
    color: var(--color-text-faint);
}

.field input:hover,
.field textarea:hover,
.field select:hover,
.input:hover { border-color: var(--color-border-strong); }

.field input:focus,
.field textarea:focus,
.field select:focus,
.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-container);
}

/* Floating label: when input is focused or has value, lift the label */
.field:has(input:focus) > label,
.field:has(input:not(:placeholder-shown)) > label,
.field:has(textarea:focus) > label,
.field:has(textarea:not(:placeholder-shown)) > label,
.field--filled > label {
    top: 0;
    font-size: var(--text-caption);
    color: var(--color-primary);
    background: var(--color-surface);
}

/* Search variant — icon on the left */
.search {
    position: relative;
    display: flex;
    align-items: center;
}
.search .icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
}
.search input {
    padding-left: calc(var(--space-3) + 24px + var(--space-2));
    height: 40px;
    background: var(--color-surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    width: 100%;
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.search input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}
.search kbd {
    position: absolute;
    right: var(--space-3);
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-surface-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

@media (max-width: 860px) {
    .search kbd { display: none; }
}

/* Password input with toggle */
.password-field {
    position: relative;
}
.password-field input {
    padding-right: calc(var(--space-3) + 36px);
}
.password-field .icon-btn {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
}

/* Field with helper text below */
.field__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}
.field__hint--error { color: var(--color-danger); }

/* Range/slider */
.slider {
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-surface-3);
    border-radius: var(--radius-pill);
    outline: none;
}
.slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid var(--color-surface);
    box-shadow: var(--elev-1);
}
.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid var(--color-surface);
}

/* Checkbox/radio (segmented control style) */
.toggle-group {
    display: inline-flex;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    padding: 2px;
    gap: 2px;
    flex-wrap: wrap;
}
.toggle-group > label {
    cursor: pointer;
    position: relative;
}
.toggle-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.toggle-group__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: calc(var(--radius-button) - 2px);
    font-size: var(--text-label);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}
.toggle-group input:checked + .toggle-group__chip {
    background: var(--color-primary-container);
    color: var(--color-primary-on-container);
}
.toggle-group__chip:hover { color: var(--color-text); }