/* ═══════════════════════════════════════
   forms.css — Suivi Colis
   Composants de formulaire partagés sur toutes les pages
   ═══════════════════════════════════════ */

/* ══ GROUPES ══ */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    margin-bottom: 7px;
}

.label-required {
    color: var(--color-error);
    margin-left: 2px;
    font-size: 0.75rem;
}

/* ══ INPUT WRAP ══ */
.input-wrap {
    position: relative;
}

.input-wrap .icon-left {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color var(--transition-base);
}

.input-wrap:focus-within .icon-left {
    color: var(--color-primary);
}

/* ══ CHAMPS TEXTE ══ */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--color-primary-darker);
    background: var(--color-bg-soft);
    outline: none;
    transition: border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input::placeholder {
    color: var(--color-text-muted);
}

input:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(43, 123, 229, 0.12);
}

input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-soft);
}

/* ══ TEXTAREA ══ */
.textarea-wrap {
    position: relative;
}

.icon-left-ta {
    position: absolute;
    left: 13px;
    top: 14px;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color var(--transition-base);
}

.textarea-wrap:focus-within .icon-left-ta {
    color: var(--color-primary);
}

textarea {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--color-primary-darker);
    background: var(--color-bg-soft);
    outline: none;
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
    transition: border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
}

textarea:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(43, 123, 229, 0.12);
}

textarea::placeholder {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ══ VALIDATION ══ */
.field-hint {
    display: block;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 5px;
    letter-spacing: 0.02em;
}

.field-error {
    display: block;
    font-size: 0.7rem;
    color: var(--color-error);
    margin-top: 5px;
    min-height: 1em;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.field-error.visible {
    opacity: 1;
    transform: translateY(0);
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #e53935;
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.form-group.is-valid input,
.form-group.is-valid textarea {
    border-color: #43a047;
    background: #f6fdf6;
}

/* ══ EYE TOGGLE (mot de passe) ══ */
.eye-toggle {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    transition: color var(--transition-base);
}

.eye-toggle:hover {
    color: var(--color-primary);
}

.eye-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.eye-toggle svg {
    width: 17px;
    height: 17px;
}

/* ══ BARRE DE FORCE MOT DE PASSE ══ */
.strength-bar-wrap {
    margin-top: var(--spacing-sm);
    height: 4px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width var(--transition-slow), background var(--transition-slow);
}

.strength-label {
    font-size: 0.68rem;
    margin-top: 4px;
    color: var(--color-text-muted);
    min-height: 1em;
}

/* États de force */
.strength-bar[data-strength="weak"] {
    width: 25%;
    background: var(--color-error);
}

.strength-bar[data-strength="fair"] {
    width: 50%;
    background: var(--color-warning);
}

.strength-bar[data-strength="good"] {
    width: 75%;
    background: #7cb342;
}

.strength-bar[data-strength="strong"] {
    width: 100%;
    background: var(--color-success);
}

/* ══ SELECT ══ */
.form-select {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--color-primary-darker);
    background: var(--color-bg-soft);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    box-sizing: border-box;
}

.form-select:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(43, 123, 229, 0.12);
}

.form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ══ MODE SOMBRE ══ */
[data-theme="dark"] .form-group.has-error input,
[data-theme="dark"] .form-group.has-error textarea {
    background: #2a1515;
    -webkit-box-shadow: 0 0 0px 1000px #2a1515 inset;
    box-shadow: 0 0 0px 1000px #2a1515 inset;
}

[data-theme="dark"] .form-group.is-valid input,
[data-theme="dark"] .form-group.is-valid textarea {
    background: #0f2a18;
    -webkit-box-shadow: 0 0 0px 1000px #0f2a18 inset;
    box-shadow: 0 0 0px 1000px #0f2a18 inset;
}

[data-theme="dark"] .form-select {
    background: #0f172a;
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .form-select:focus {
    background: #16213a;
}