/* ============================================================
   app-textbox — native single-line text input (the <app-textbox>
   tag helper). Peer of app-checkbox / app-radio (ADR 0014). The
   label sits above the field (house "floatLabelType=Always" look).
   Themed from semantic tokens only.
   ============================================================ */
@layer components {
    .app-textbox {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 100%;
    }

    .app-textbox__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .app-textbox__input {
        box-sizing: border-box;
        width: 100%;
        height: 2rem; /* 32px — matches the Syncfusion .e-input control height so it lines up with adjacent inputs/dropdowns; single-line text then vertically centres */
        font: inherit;
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        padding: 0 var(--space-3);
        transition: border-color var(--dur-base) var(--ease),
                    box-shadow var(--dur-base) var(--ease);
    }

    .app-textbox__input::placeholder {
        /* Faint grey (neutral-400) — the standard placeholder weight, lighter
           than label/secondary text, so a hint reads as a hint not an entry. */
        color: var(--color-ink-faint);
    }

    .app-textbox__input:focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px var(--color-accent-soft);
    }

    .app-textbox__input:disabled,
    .app-textbox__input[readonly] {
        background: var(--color-surface-alt);
        color: var(--color-ink-mute);
        cursor: not-allowed;
    }

    .app-textbox--disabled .app-textbox__label {
        opacity: 0.5;
    }
}