/**
 * MIP — Form UX hardening (MAIN + TENANTS)
 * Couche légère : required, erreurs près du champ, focus, RTL, mobile.
 * Ne change aucun workflow métier / endpoint.
 */

:root {
    --mip-form-ux-danger: var(--danger, #dc2626);
    --mip-form-ux-danger-soft: color-mix(in srgb, var(--mip-form-ux-danger) 14%, #fff);
    --mip-form-ux-focus: var(--mip-action-focus, var(--primary, #0d9488));
}

/* ---------- Required marker ---------- */
.mip-form-ux-req {
    color: var(--mip-form-ux-danger);
    font-weight: 800;
    margin-inline-start: 0.25em;
    line-height: 1;
}

label.mip-form-ux-label-required:not(:has(.mip-form-ux-req)):not(:has(.register-req))::after {
    content: " *";
    color: var(--mip-form-ux-danger);
    font-weight: 800;
}

/* ---------- Invalid fields (global, complementary to dashboard/clinic) ---------- */
input.mip-form-ux-invalid,
select.mip-form-ux-invalid,
textarea.mip-form-ux-invalid,
input.mip-input-invalid,
select.mip-input-invalid,
textarea.mip-input-invalid {
    border-color: var(--mip-form-ux-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mip-form-ux-danger) 16%, transparent);
}

input.mip-form-ux-invalid:focus,
select.mip-form-ux-invalid:focus,
textarea.mip-form-ux-invalid:focus,
input.mip-form-ux-invalid:focus-visible,
select.mip-form-ux-invalid:focus-visible,
textarea.mip-form-ux-invalid:focus-visible {
    outline: 2px solid var(--mip-form-ux-danger);
    outline-offset: 1px;
    border-color: var(--mip-form-ux-danger) !important;
}

.mip-form-ux-error,
.mip-field-error-msg,
.field-error-hint {
    display: block;
    margin-block-start: 4px;
    margin-inline: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mip-form-ux-danger);
    line-height: 1.35;
}

/* Banner “why Save is blocked” — near the form actions when possible */
.mip-form-ux-blocked-hint {
    width: 100%;
    margin: 0 0 8px;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    background: var(--mip-form-ux-danger-soft);
    color: var(--mip-form-ux-danger);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

/* ---------- Loading / busy (visual only) ---------- */
form[aria-busy="true"] .submit-btn,
form[aria-busy="true"] .btn-primary[type="submit"],
form[data-mip-ux-blocked="1"] .submit-btn,
form[data-mip-ux-blocked="1"] button[type="submit"] {
    cursor: not-allowed;
}

/* ---------- Keyboard focus on fields ---------- */
form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible,
[data-mip-db-form] input:focus-visible,
[data-mip-db-form] select:focus-visible,
[data-mip-db-form] textarea:focus-visible {
    outline: 2px solid var(--mip-form-ux-focus);
    outline-offset: 1px;
}

/* ---------- Screen reader live ---------- */
.mip-form-ux-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- RTL : propriétés logiques, pas d’inversion de rôles ---------- */
[dir="rtl"] .mip-form-ux-req,
html[dir="rtl"] .mip-form-ux-req {
    margin-inline-start: 0.25em;
    margin-inline-end: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .mip-form-ux-error,
    .mip-field-error-msg,
    .field-error-hint,
    .mip-form-ux-blocked-hint {
        font-size: 0.86rem;
    }
    form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    form select,
    form textarea {
        max-width: 100%;
    }
}