/* ═══════════════════════════════════════════════════════════
   LievoEngine — Componente: forms/input
   Versione: 14-05-2026 (S2 — estensione input layer)

   Campo input con label, hint, error message, icone sinistra/destra,
   prefix/suffix testuali, password toggle, contatore caratteri.
   ═══════════════════════════════════════════════════════════ */

/* ─── Field wrapper (stack verticale) ───────────────── */
.lv-field {
    display: flex;
    flex-direction: column;
    gap: var(--lv-s-1);
}

/* ─── Label ────────────────────────────────────────── */
.lv-field__label {
    font-family: var(--lv-ff-sans);
    font-size: var(--lv-fs-sm);
    font-weight: var(--lv-fw-medium);
    color: var(--lv-c-fg);
    line-height: var(--lv-lh-snug);
}

.lv-field__label--required::after {
    content: " *";
    color: var(--lv-c-danger);
    font-weight: var(--lv-fw-bold);
}

/* ═══════════════════════════════════════════════════════════
   Input group: contenitore prefix + wrap + suffix
   ═══════════════════════════════════════════════════════════ */
.lv-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Box affissi (prefix sx, suffix dx) ─────────────────── */
.lv-input-group__affix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--lv-s-3);
    font-family: var(--lv-ff-sans);
    font-size: var(--lv-fs-sm);
    color: var(--lv-c-fg-muted);
    background-color: var(--lv-c-surface-alt);
    border: var(--lv-b-width) solid var(--lv-c-border);
    line-height: var(--lv-lh-base);
    white-space: nowrap;
}

.lv-input-group__affix--prefix {
    border-right: 0;
}

.lv-input-group__affix--suffix {
    border-left: 0;
}

/* ═══════════════════════════════════════════════════════════
   Wrap relativo per icone sx/dx (riempie il group)
   ═══════════════════════════════════════════════════════════ */
.lv-input-wrap {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.lv-input-wrap--has-prefix > .lv-input {
    border-left: 0;
}

.lv-input-wrap--has-suffix > .lv-input {
    border-right: 0;
}

/* ─── Icone dentro al wrap ─────────────────────────── */
.lv-input-wrap__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lv-c-fg-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.lv-input-wrap__icon--l {
    left: var(--lv-s-3);
}

.lv-input-wrap__icon--r {
    right: var(--lv-s-3);
}

/* ─── Password toggle (bottone) ────────────────────── */
.lv-input-wrap__toggle {
    position: absolute;
    top: 50%;
    right: var(--lv-s-2);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: var(--lv-s-1);
    margin: 0;
    color: var(--lv-c-fg-muted);
    cursor: pointer;
    border-radius: var(--lv-b-radius-0);
}

.lv-input-wrap__toggle:hover {
    color: var(--lv-c-fg);
}

.lv-input-wrap__toggle:focus-visible {
    outline: none;
    box-shadow: var(--lv-focus-ring);
}

.lv-input-wrap__toggle-icon {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Input base
   ═══════════════════════════════════════════════════════════ */
.lv-input {
    width: 100%;
    display: block;
    padding: var(--lv-s-2) var(--lv-s-3);
    font-family: var(--lv-ff-sans);
    font-size: var(--lv-fs-base);
    font-weight: var(--lv-fw-regular);
    line-height: var(--lv-lh-base);
    color: var(--lv-c-fg);
    background-color: var(--lv-c-surface);
    border: var(--lv-b-width) solid var(--lv-c-border);
    border-radius: var(--lv-b-radius-0);
    transition:
        border-color var(--lv-d-fast) var(--lv-ease),
        background-color var(--lv-d-fast) var(--lv-ease);
}

.lv-input::placeholder {
    color: var(--lv-c-fg-muted);
    opacity: 1;
}

/* ─── Modifier: con icona a sinistra (padding extra) ─ */
.lv-input--icon-l {
    padding-left: var(--lv-s-8);
}

/* ─── Modifier: con icona o toggle a destra ────────── */
.lv-input--icon-r {
    padding-right: var(--lv-s-8);
}

/* ─── Sizes ─────────────────────────────────────────── */
.lv-input--sm {
    padding-top: var(--lv-s-1);
    padding-bottom: var(--lv-s-1);
    font-size: var(--lv-fs-sm);
}

.lv-input--lg {
    padding-top: var(--lv-s-3);
    padding-bottom: var(--lv-s-3);
    font-size: var(--lv-fs-md);
}

/* ─── Stati ────────────────────────────────────────── */
.lv-input:focus-visible {
    outline: none;
    border-color: var(--lv-c-accent);
    box-shadow: var(--lv-focus-ring);
}

.lv-input:disabled {
    background-color: var(--lv-c-surface-alt);
    color: var(--lv-c-fg-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.lv-input:read-only:not(:disabled) {
    background-color: var(--lv-c-surface-alt);
}

/* ─── Variante: errore ─────────────────────────────── */
.lv-input--error,
.lv-input--error:focus-visible {
    border-color: var(--lv-c-danger);
}

.lv-input--error:focus-visible {
    box-shadow: 0 0 0 2px var(--lv-c-bg), 0 0 0 4px var(--lv-c-danger);
}

/* ─── Hint / Error / Counter ───────────────────────── */
.lv-field__hint,
.lv-field__error,
.lv-field__counter {
    font-family: var(--lv-ff-sans);
    font-size: var(--lv-fs-xs);
    line-height: var(--lv-lh-snug);
}

.lv-field__hint {
    color: var(--lv-c-fg-muted);
}

.lv-field__error {
    color: var(--lv-c-danger);
    font-weight: var(--lv-fw-medium);
}

.lv-field__counter {
    color: var(--lv-c-fg-muted);
    text-align: right;
}

.lv-field__counter.is-over .lv-field__counter-val {
    color: var(--lv-c-danger);
    font-weight: var(--lv-fw-medium);
}