/* ALS — طبقة تصحيح حقول الإدخال فوق crud-unified.css
 *
 * ⚠️ السبب — فخّ موروث من AMS:
 * `crud-unified.css` يعرّف `.crud-form-control` بـ `border:none; background:transparent; flex:1`
 * لأنه هناك يعيش **داخل** `.crud-input-wrapper`، وهي التي ترسم الإطار والخلفية.
 * شاشاتنا تستخدم الحقل عارياً (بلا غلاف)، فيخرج **بلا إطار ولا خلفية ولا عرض** —
 * يظهر للمستخدم كأن الحقل غير موجود، وهو أسوأ من حقل قبيح.
 *
 * لا نحرّر `crud-unified.css` (منقول من AMS وقد نستورده ثانيةً)، فنقلب الافتراض هنا:
 * الحقل العاري يرسم إطاره بنفسه، والحقل داخل الغلاف يتنازل عنه للغلاف.
 * الترتيب مهمّ: هذا الملف يُحمَّل **بعد** crud-unified.css في _Layout.
 */

.crud-form-control,
.crud-form-select {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--gray-800);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.crud-form-control:focus,
.crud-form-select:focus {
    border-color: var(--ink-600);
    box-shadow: 0 0 0 3px var(--ink-100);
    outline: none;
}

.crud-form-control::placeholder {
    color: var(--gray-400);
}

.crud-form-control:disabled,
.crud-form-control[readonly] {
    background: var(--gray-50);
    color: var(--gray-500);
}

/* الحقل داخل غلاف AMS: الغلاف يرسم الإطار، فيتنازل الحقل عنه — سلوك AMS الأصلي كما هو. */
.crud-input-wrapper .crud-form-control,
.crud-input-wrapper .crud-form-select {
    width: auto;
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crud-input-wrapper .crud-form-control:focus,
.crud-input-wrapper .crud-form-select:focus {
    box-shadow: none;
}

/* الخطأ يبقى أقوى من كل ما سبق — أُعيد تأكيده لأننا رفعنا خصوصية القاعدة الأساسية. */
.crud-form-control.crud-input-invalid,
.crud-form-control[data-client-error="true"] {
    border-color: var(--danger);
    background-color: #FEF2F2;
}

/* حقول التاريخ: كروم يرسم أيقونة التقويم على اليمين في RTL فتلتصق بالحدّ. */
.crud-form-control[type="date"] {
    min-height: 40px;
}

.crud-form-control[type="date"]::-webkit-calendar-picker-indicator {
    margin-inline-start: 0;
    margin-inline-end: 2px;
    cursor: pointer;
    opacity: .55;
}

.crud-form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

textarea.crud-form-control {
    min-height: 84px;
    resize: vertical;
    line-height: 1.7;
}

/* ── إظهار/إخفاء كلمة المرور ──
   الغلاف والزرّ يُبنيان من als-ui.js على كل input[type=password] تلقائياً،
   فلا شاشة جديدة تحتاج تذكّرهما. */
.als-pw {
    position: relative;
    display: block;
}

/* في RTL: inline-end = اليسار — النقاط تبدأ من اليمين فالزرّ على الطرف المقابل. */
.als-pw > input {
    padding-inline-end: 42px;
}

.als-pw-toggle {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.als-pw-toggle:hover {
    color: var(--ink-700);
    background: var(--ink-100);
}

.als-pw-toggle[aria-pressed="true"] {
    color: var(--brass-700);
}

/* إدج يرسم عين كشفٍ أصلية فتظهر أيقونتان — تُخفى لصالح زرّنا الموحَّد. */
.als-pw > input::-ms-reveal,
.als-pw > input::-ms-clear {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════
   أزرار الإجراءات داخل خلايا الجداول
   ══════════════════════════════════════════════════════════════════

   ⚠️ `.crud-actions` في crud-unified.css مصمَّم **لتذييل الفورم**:
   `flex-wrap: wrap` + `margin-top: 1.25rem`. داخل خليّة عرضها 110px
   لا تتّسع ثلاثة أزرار في سطر، فتلتفّ أسفل بعضها ويدفعها الهامش لأسفل
   الصفّ — وهو ما يجعل كل صفّ يبدو ثلاثة أسطر.

   العلاج هنا لا هناك: crud-unified.css ملفٌّ منقول من AMS قد نستورده
   ثانيةً، وتحريره يعني ضياع التعديل بأول تحديث. وهذا الملف يُحمَّل بعده.
   ══════════════════════════════════════════════════════════════════ */

.crud-table .crud-actions,
.crud-table td .crud-actions {
    display: inline-flex;
    flex-wrap: nowrap;      /* سطر واحد دائماً */
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    margin-top: 0;          /* الهامش لتذييل الفورم لا لخليّة جدول */
    white-space: nowrap;
}

/* أزرار الأيقونة داخل الجدول: مربَّعة ومضغوطة فتتّسع ثلاثةٌ منها في عمود ضيّق */
.crud-table .crud-actions .crud-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .78rem;
    line-height: 1;
}

.crud-table .crud-actions .crud-btn i { margin: 0; }

/* زرّ يحمل نصّاً (لا أيقونة وحدها) يعود لعرضه الطبيعي */
.crud-table .crud-actions .crud-btn.has-label {
    width: auto;
    min-width: 0;
    padding: .3rem .6rem;
    gap: .3rem;
}

/* ⚠️ القاعدة المتجاوبة في crud-unified تجعل .crud-actions عموداً
   و.crud-btn بعرض 100% — وهو صحيح لتذييل الفورم، وكارثة داخل جدول
   (كل زرّ يملأ عرض الخليّة فيصير الصفّ برجاً). */
@media (max-width: 767.98px) {
    .crud-table .crud-actions {
        flex-direction: row;
    }

    .crud-table .crud-actions .crud-btn {
        width: 30px;
        min-width: 30px;
    }
}

/* ═══════════════ مفتاح التبديل داخل بطاقة الفلاتر ═══════════════
   ⚠️ `.crud-switch-wrapper` مصمَّم في AMS لتذييل فورمٍ عريض، وفي عمود فلاتر
   ضيّق ينكسر نصُّه سطرين (`غير / مسترَدّ`) فيرتفع السطر ويخرج المفتاح عن محاذاة
   الحقول المجاورة — فيبدو الصفّ مكسوراً وهو سليم.
   العلاج هنا في **ملفّنا** (يُحمَّل بعد crud-unified) لا بتحرير الملفّ المنقول:
   نصٌّ لا ينكسر، ويُقصّ بنقاط إن ضاق العمود فعلاً، وارتفاعٌ يطابق الحقل العادي.
   ولذلك تظلّ **القاعدة الأولى أن يكون النصّ قصيراً** («هذه فقط») والمعنى في
   العنوان فوقه — وهذا ما يمنع الحاجة إلى القصّ أصلاً. */
.crud-card-body .row > [class*="col-"] > .crud-form-group > .crud-switch-wrapper {
    min-height: 38px;
}

.crud-card-body .row .crud-switch-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}