/* نقص البيانات: نفس الشكل بكل النماذج (form-errors.js) */
:root {
    --fe-red: #dc2626;
    --fe-red-soft: rgba(220, 38, 38, .15);
    --fe-bg: #fef2f2;
    --fe-ink: #991b1b;
    --fe-chip: #fff;
}
[data-layout="dark"] {
    --fe-red: #f87171;
    --fe-red-soft: rgba(248, 113, 113, .2);
    --fe-bg: #3b1518;
    --fe-ink: #fecaca;
    --fe-chip: #4c1d21;
}

/* المربع الناقص (يغلب تنسيق الصفحات والملء التلقائي) */
.fe-invalid,
.input-validation-error,
input.fe-invalid:-webkit-autofill,
input.input-validation-error:-webkit-autofill {
    border: 1.5px solid var(--fe-red) !important;
    box-shadow: 0 0 0 3px var(--fe-red-soft) !important;
    outline: none !important;
    scroll-margin: 90px 0;
}
.fe-invalid:focus,
.input-validation-error:focus {
    border-color: var(--fe-red) !important;
    box-shadow: 0 0 0 4px var(--fe-red-soft) !important;
}
/* مربعات الاختيار والرفع: الإطار على المجموعة */
div.fe-invalid:not(.fld), label.fe-invalid, span.fe-invalid, fieldset.fe-invalid {
    border-radius: 10px;
    padding: 6px 8px;
}
.easy-dt.fe-invalid, select.fe-invalid { background-image: none; }

.fe-tab-bad { position: relative; color: var(--fe-red) !important; }
.fe-tab-bad::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%; background: var(--fe-red); vertical-align: middle; }

/* السبب تحت المربع */
.fe-msg,
.field-validation-error {
    display: block;
    width: 100%;
    margin-top: 5px;
    color: var(--fe-red);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
}
.fld.fe-invalid { background: #fff !important; }
[data-layout="dark"] .fld.fe-invalid { background: transparent !important; }
.fld > .fe-msg { margin: 2px 0 4px; }
.fld.fe-invalid .fi { top: 38px; }
td .fe-msg { font-size: .72rem; min-width: 80px; }
.field-validation-valid { display: none; }

/* الرسالة فوق النموذج */
.fe-summary {
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--fe-bg);
    color: var(--fe-ink);
    border: 1.5px solid var(--fe-red);
    border-inline-start-width: 5px;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.6;
    text-align: start;
    outline: none;
}
.fe-sum-head { font-weight: 800; }
.fe-sum-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.fe-sum-item {
    appearance: none;
    padding: 3px 11px;
    min-height: 30px;
    background: var(--fe-chip);
    color: var(--fe-ink);
    border: 1px solid var(--fe-red);
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.fe-sum-item:hover, .fe-sum-item:focus-visible { background: var(--fe-red); color: #fff; outline: none; }
.fe-sum-general { margin-top: 6px; font-weight: 600; }
.fe-absorbed, .validation-summary-valid { display: none !important; }

/* تنبيه صغير إذا الرسالة صارت خارج الشاشة */
.fe-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    background: #b91c1c;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font: 700 13.5px/1.6 Cairo, Tahoma, sans-serif;
    text-align: center;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .fe-summary { padding: 10px 12px; font-size: .86rem; }
    .fe-sum-item { min-height: 34px; }
    .fe-msg, .field-validation-error { font-size: .78rem; }
}
@media print {
    .fe-summary, .fe-toast, .fe-msg { display: none !important; }
}

/* تحذير الصفحة نفسها (الكمية أكبر من المتوفر) بنفس اللون */
.is-invalid {
    border-color: var(--fe-red) !important;
    box-shadow: 0 0 0 3px var(--fe-red-soft) !important;
}