/**
 * 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.
 */
@import url('mip-field-light-surface.css');

: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;
}

/* ---------- Select : chevron avec marge intérieure (évite la flèche collée au bord) ---------- */
:is(form, [data-mip-db-form], .form-group, .modal-content, .modal, .purchase-new-card, .m5-settings-form-grid)
    select:not([multiple]):not([size]):not(.products-pagination-select):not(.products-filter-select):not(.mip-list-page-size):not([data-mip-select-native='keep']) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-inline-end: max(2.35rem, 2.15em);
    background-repeat: no-repeat;
    background-size: 0.75rem 0.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    cursor: pointer;
}
html[dir='rtl'] :is(form, [data-mip-db-form], .form-group, .modal-content, .modal, .purchase-new-card, .m5-settings-form-grid)
    select:not([multiple]):not([size]):not(.products-pagination-select):not(.products-filter-select):not(.mip-list-page-size):not([data-mip-select-native='keep']) {
    background-position: left 0.75rem center;
}
html[data-theme='dark'] :is(form, [data-mip-db-form], .form-group, .modal-content, .modal, .purchase-new-card, .m5-settings-form-grid)
    select:not([multiple]):not([size]):not(.products-pagination-select):not(.products-filter-select):not(.mip-list-page-size):not([data-mip-select-native='keep']),
html[data-theme='midnight'] :is(form, [data-mip-db-form], .form-group, .modal-content, .modal, .purchase-new-card, .m5-settings-form-grid)
    select:not([multiple]):not([size]):not(.products-pagination-select):not(.products-filter-select):not(.mip-list-page-size):not([data-mip-select-native='keep']) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- 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;
}

/* Résumés de validation — scroll-margin pour barres d’outils / safe area */
.mip-validation-summary,
[data-mip-validation-summary],
.tdr-errors[role="alert"] {
    scroll-margin-top: max(72px, env(safe-area-inset-top, 0px));
    scroll-margin-bottom: 12px;
}

.mip-validation-summary:focus,
[data-mip-validation-summary]:focus {
    outline: 2px solid var(--mip-form-ux-danger);
    outline-offset: 2px;
}

/* 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;
}

/* ---------- Lignes de formulaire : alignement horizontal des contrôles ---------- */
.form-row,
.form-group.form-row,
.mip-form-row,
.purchase-lines-head--tabular,
.pur-row {
    align-items: start;
}
.form-row > .form-group,
.form-row > div,
.mip-form-row > .field,
.mip-form-row > .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.form-row select,
.pur-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.pur-row select,
.mip-proc-items-table input[type="number"],
.mip-proc-items-table input[type="text"],
.mip-proc-items-table input[type="date"] {
    box-sizing: border-box;
}

/* ---------- Long forms : actions always reachable ---------- */
.mip-form-ux-long {
    scroll-padding-bottom: 5.5rem;
}
.mip-form-ux-long > .mip-dialog-footer,
.mip-form-ux-long > .mip-tenant-dialog-form-footer,
.mip-form-ux-long > .mip-tenant-modern-form__footer,
.mip-form-ux-long > .mip-patient-form-page__footer,
.mip-form-ux-long > .lab-form-actions,
.mip-form-ux-long > .modal-footer,
.mip-form-ux-long > .cds-form-footer,
.mip-form-ux-long > .cds-appt-form-actions,
.mip-form-ux-long .lab-form-actions,
.mip-form-ux-long .cds-appt-form-footer-slot .cds-appt-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--card-bg, var(--surface, var(--bg-card, #fff)));
    box-shadow: 0 -6px 16px color-mix(in srgb, #000 7%, transparent);
}
.login-form .form-actions,
.ph-login-form .form-actions,
.lab-login-form .form-actions,
.ibn-sina-login-form .form-actions,
.kindi-face-form .form-actions {
    position: static;
    box-shadow: none;
}

/* data-mip-db-form hosts (tenants) — same error/focus contract */
[data-mip-db-form] .mip-form-ux-error,
[data-mip-db-form] .mip-field-error-msg {
    display: block;
}

/* ---------- 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,
    [data-mip-db-form] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    [data-mip-db-form] select,
    [data-mip-db-form] textarea {
        max-width: 100%;
    }
    .mip-form-ux-long > .lab-form-actions,
    .mip-form-ux-long > .modal-footer,
    .mip-form-ux-long > .mip-dialog-footer,
    .mip-form-ux-long > .mip-patient-form-page__footer {
        flex-wrap: wrap;
    }
}