/* ═══════════════════════════════════════════════════════════════════════
   Zad UI — جسر الأنماط: محتوى Blazorise و bootstrap القديم داخل الإطار الجديد
   ───────────────────────────────────────────────────────────────────────
   المرحلة 3: نوافذ Modal (نوافذ الإضافة والتعديل في 33 صفحة).
   المرحلة 4: الجداول والأزرار والحقول والبطاقات.

   كل قاعدة تحت .zui فلا تمسّ الموقع العام، ولا تمسّ مكوّنات Zui (لا تستعمل
   أصناف bootstrap). يُحذف الملف في المرحلة 10 حين لا تبقى صفحة قديمة.

   ⚠️ ضيّق النطاق على العنصر نفسه: قاعدةٌ على غلاف مكوّنٍ تُصيب ما يسكن
   داخله — قائمة Autocomplete المنسدلة داخل النافذة مثلاً.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── نوافذ Blazorise Modal ── */
.zui .modal-backdrop.show { background-color: #10221C; opacity: .5; }

.zui .modal-content {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    font-family: var(--ui);
}

.zui .modal-header {
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.zui .modal-title {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
}

.zui .modal-header > .btn-close {
    width: 34px;
    height: 34px;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    border-radius: var(--r-chrome);
    background-size: 11px;
    opacity: .55;
    transition: opacity .12s, background-color .12s;
}
.zui .modal-header > .btn-close:hover { opacity: 1; background-color: var(--card-3); }

.zui .modal-body { padding: 20px; }

.zui .modal-footer {
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--card-2);
}
.zui .modal-footer > * { margin: 0; }

/* أزرار تذييل النافذة وحدها — أزرار الصفحة نفسها في المرحلة 4 */
.zui .modal-footer > .btn {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--r-chrome);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}
.zui .modal-footer > .btn-primary,
.zui .modal-footer > .btn-success { border: 1px solid var(--btn); background: var(--btn); color: var(--on-primary); }
.zui .modal-footer > .btn-primary:hover,
.zui .modal-footer > .btn-success:hover { border-color: var(--btn-hover); background: var(--btn-hover); color: var(--on-primary); }
.zui .modal-footer > .btn-secondary,
.zui .modal-footer > .btn-light,
.zui .modal-footer > .btn-outline-secondary,
.zui .modal-footer > .btn-link { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); text-decoration: none; }
.zui .modal-footer > .btn-secondary:hover,
.zui .modal-footer > .btn-light:hover,
.zui .modal-footer > .btn-outline-secondary:hover,
.zui .modal-footer > .btn-link:hover { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }
.zui .modal-footer > .btn-danger { border: 1px solid var(--stop-line); background: var(--stop-bg); color: var(--stop-text); }

/* ═══════════════════════════════════════════════════════════════════════
   المرحلة 4 — محتوى الصفحات القديمة: العنوان، البطاقات، الجداول، الأزرار،
   القوائم المنسدلة، الحقول، التبويبات، التنبيهات
   ───────────────────────────────────────────────────────────────────────
   النطاق .zui-content وحده: محتوى الصفحة، لا الإطار. ومكوّنات Zui لا تستعمل
   أصناف bootstrap فلا تمسّها هذه القواعد. الأصناف منقولة من مسحٍ فعليّ لسبع
   صفحات (الطلاب، الأسئلة، المستخدمون، الدروس، المحاضرات، التقارير، الدبلومات).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── dark mode: المحتوى القديم جزيرةٌ فاتحة ──
   ألوانه مكتوبة ثابتة في styles.css وفي الصفحات (text-dark، خلفيات بيضاء)،
   فعلى الخلفية الداكنة يصير نصّاً داكناً على داكن. الورقة الفاتحة في zui.css،
   وهنا تعود المتغيّرات إلى قيمها الفاتحة داخلها وداخل النوافذ القديمة. */
.zui[data-theme="dark"] .zui-content:not(:has(> .zui-page-head)),
.zui[data-theme="dark"] .modal-content {
    --card: #FFFFFF;
    --card-2: #F9FAFB;
    --card-3: #F3F4F6;
    --line: #E9EBEE;
    --line-2: #D1D5DB;
    --text: #1A1A1A;
    --text-2: #374151;
    --text-3: #6B7280;
    --btn: #12805B;
    --btn-hover: #0E6547;
    --on-primary: #FFFFFF;
    --primary: #18A171;
    --primary-light: #E7F8F2;
    --primary-dark: #127452;
    --secondary: #43B78F;
    --warn: #8A6100;
    --warn-bg: #FDF7EA;
    --warn-line: #F0E2C2;
    --stop-bg: #FDF1F0;
    --stop-line: #F3D4D0;
    --stop-text: #B03229;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-xl: 0 20px 32px -8px rgba(0, 0, 0, .12), 0 8px 12px -6px rgba(0, 0, 0, .06);
    color-scheme: light;
}

/* ── عنوان الصفحة ومسارها ── */
.zui .zui-content h1.subheader-title,
.zui .zui-content h1.content-header-title {
    margin: 0 0 4px;
    font-family: var(--ui);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--text);
}
.zui .zui-content .breadcrumb { margin: 0 0 18px; padding: 0; background: none; font-size: 12px; }
.zui .zui-content .breadcrumb-item,
.zui .zui-content .breadcrumb-item a { color: var(--text-3); text-decoration: none; }
.zui .zui-content .breadcrumb-item a:hover { color: var(--primary-dark); }
.zui .zui-content .breadcrumb-item.active { color: var(--text-2); font-weight: 500; }
.zui .zui-content .breadcrumb-item + .breadcrumb-item::before { color: var(--text-3); opacity: .5; }

/* ── البطاقة ── */
.zui .zui-content .card {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    box-shadow: var(--shadow);
}
.zui .zui-content .card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    border-radius: var(--r-card) var(--r-card) 0 0;
}
.zui .zui-content .card-header :is(h2, h3, h4, h5, .card-title) {
    margin: 0;
    font-family: var(--ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.zui .zui-content .card-body { padding: 18px; }

/* ── جدول Blazorise DataGrid ── */
.zui .zui-content .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--card-2);
    --bs-table-hover-bg: var(--card-2);
    --bs-table-accent-bg: transparent;
    margin-bottom: 0;
    font-size: 13.5px;
    color: var(--text);
}
.zui .zui-content .table > thead > tr > th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--card-2);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}
.zui .zui-content .table > tbody > tr > td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.zui .zui-content .table > tbody > tr:last-child > td { border-bottom: 0; }
.zui .zui-content .table > tbody > tr:hover > td { background: var(--card-2); }
.zui .zui-content .table-row-selectable { cursor: pointer; }

/* الجدول الأعرض من الصفحة يمرّر داخل إطاره بدل أن تُقصّ أعمدته الأخيرة
   (جدول الطلاب: 1173px في 1161px). آمنٌ لقائمة «الإجراءات»: Blazorise يفتحها
   position:fixed (dropdown-menu-position-strategy-fixed) فلا يقصّها التمرير. */
.zui .zui-content form:has(> table.b-datagrid) { overflow-x: auto; }

/* ── الترقيم ── */
.zui .zui-content .pagination { gap: 4px; margin: 14px 0 0; }
.zui .zui-content .page-item .page-link {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-2);
    font-size: 12.5px;
    box-shadow: none;
}
.zui .zui-content .page-item .page-link:hover { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }
/* ⚠️ Blazorise يعلّم الصفحة الحالية active و disabled معاً («page-item active disabled»).
   كانت قاعدة disabled بعد active وبالوزن نفسه، فتعيد الخلفية بيضاء ويبقى النصّ
   أبيض من active: رقم الصفحة الحالية مربّعٌ فارغ. لذا disabled تستثني active. */
.zui .zui-content .page-item.disabled:not(.active) .page-link { opacity: .5; background: var(--card); }
.zui .zui-content .page-item.active .page-link { border-color: var(--btn); background: var(--btn); color: var(--on-primary); opacity: 1; }

/* ── الأزرار ── */
.zui .zui-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--r-chrome);
    font-family: var(--ui);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transition: background .12s, border-color .12s, color .12s;
}
.zui .zui-content .btn-primary,
.zui .zui-content .btn-success { border: 1px solid var(--btn); background: var(--btn); color: var(--on-primary); }
.zui .zui-content .btn-primary:hover,
.zui .zui-content .btn-success:hover { border-color: var(--btn-hover); background: var(--btn-hover); color: var(--on-primary); }
.zui .zui-content .btn-outline-success,
.zui .zui-content .btn-outline-primary { border: 1px solid var(--secondary); background: var(--card); color: var(--primary-dark); }
.zui .zui-content .btn-outline-success:hover,
.zui .zui-content .btn-outline-primary:hover { background: var(--primary-light); color: var(--primary-dark); }
.zui .zui-content .btn-secondary,
.zui .zui-content .btn-light,
.zui .zui-content .btn-outline-secondary { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); }
.zui .zui-content .btn-secondary:hover,
.zui .zui-content .btn-light:hover,
.zui .zui-content .btn-outline-secondary:hover { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }
.zui .zui-content .btn-danger,
.zui .zui-content .btn-outline-danger { border: 1px solid var(--stop-line); background: var(--stop-bg); color: var(--stop-text); }
.zui .zui-content .btn-danger:hover,
.zui .zui-content .btn-outline-danger:hover { border-color: var(--stop-solid); background: var(--stop-solid); color: #fff; }
.zui .zui-content .btn-link { color: var(--primary-dark); text-decoration: none; }

/* زرّ «الإجراءات» في صفوف الجداول كان أخضر بعرض عموده (btn-block) — 38 منه في
   سبع صفحات — فصار أبرز ما في الصفّ. الآن زرٌّ هادئ بعرض نصّه. */
.zui .zui-content .b-datagrid .dropdown-toggle.btn {
    width: auto;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    background: var(--card);
    color: var(--text-2);
    font-size: 12.5px;
}
.zui .zui-content .b-datagrid .dropdown-toggle.btn:hover,
.zui .zui-content .b-datagrid .dropdown.show > .dropdown-toggle.btn { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }

/* ── القوائم المنسدلة (إجراءات الصفّ، وقوائم Autocomplete داخل النوافذ) ── */
.zui .zui-content .dropdown-menu {
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--card);
    box-shadow: var(--shadow-xl);
    font-family: var(--ui);
}
.zui .zui-content .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13.5px;
}
.zui .zui-content .dropdown-item:hover,
.zui .zui-content .dropdown-item:focus { background: var(--card-3); color: var(--text); }
.zui .zui-content .dropdown-item.active,
.zui .zui-content .dropdown-item:active { background: var(--primary-light); color: var(--primary-dark); }

/* ── الحقول ── */
.zui .zui-content .form-group { margin-bottom: 16px; }
.zui .zui-content .form-label,
.zui .zui-content .col-form-label { margin-bottom: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.zui .zui-content :is(.form-control, .form-select) {
    min-height: 40px;
    padding-block: 8px;
    padding-inline-start: 12px;
    border: 1px solid var(--line-2);
    background-color: var(--card-2);
    color: var(--text);
    font-family: var(--ui);
    font-size: 13.5px;
    box-shadow: none;
    transition: border-color .12s, background-color .12s, box-shadow .12s;
}
/* الحوافّ للحقل المنفرد وحده: داخل input-group يرسمها bootstrap متّصلة */
.zui .zui-content :is(.form-control, .form-select):not(.input-group > *) { border-radius: var(--r-chrome); }
.zui .zui-content .form-control { padding-inline-end: 12px; }
.zui .zui-content textarea.form-control { min-height: 92px; line-height: 1.7; }
.zui .zui-content :is(.form-control, .form-select):focus {
    border-color: var(--primary);
    background-color: var(--card);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
}
.zui .zui-content :is(.form-control, .form-select).is-invalid { border-color: var(--stop-solid); }
.zui .zui-content .invalid-feedback { color: var(--stop-text); font-size: 12px; }
/* ⭐ أيقونة التحقّق يرسمها bootstrap (global.css، نسخة LTR) خلفيةً في يمين الحقل،
   والحشو أعلاه (padding-inline 12px) لا يترك لها مكاناً — فتقع فوق أوّل كلمة من
   النصّ العربيّ. وتظهر ✓ في كل نافذة تعديل لحظة فتحها: Blazorise يتحقّق من القيم
   المعبّأة (الأسئلة الشائعة، الطلاب). Zad UI لا يعلّم إلا الخطأ (ZuiInput) والحدّ
   هنا محايد أصلاً، فلا أيقونة للصحيح؛ ولأيقونة الخطأ حشوٌ في جهتها. المرحلة 9ب */
.zui .zui-content .form-control.is-valid { background-image: none; }
.zui .zui-content .form-control.is-invalid { padding-right: calc(1.5em + .75rem); }
/* وسهم القائمة (select) للسبب نفسه: في اليمين فوق أوّل حرف («أدب» تُقرأ «ب» في نافذة
   الكتب). في RTL مكانه اليسار كالقائمة الأصلية ZuiSelect، ومعه أيقونة التحقّق إن وُجدت */
.zui .zui-content .form-select:dir(rtl) { background-position: left .75rem center; padding-left: 2.25rem; }
.zui .zui-content .form-select:is(.is-valid, .is-invalid):dir(rtl) { background-position: left .75rem center, center left 2.25rem; padding-left: 4.125rem; }
.zui .zui-content .input-group-text { border-color: var(--line-2); background: var(--card-3); color: var(--text-2); font-size: 13px; }
.zui .zui-content .form-check-input:checked { border-color: var(--primary); background-color: var(--primary); }
.zui .zui-content .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.zui .zui-content .form-check-label { color: var(--text-2); font-size: 13.5px; }

/* ── التبويبات — كما في محرّر الدرس في النموذج ── */
.zui .zui-content .nav-tabs { gap: 2px; border-bottom: 1px solid var(--line); }
.zui .zui-content .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text-2);
    font-size: 13.5px;
}
.zui .zui-content .nav-tabs .nav-link:hover { color: var(--text); }
.zui .zui-content .nav-tabs .nav-link.active { border-bottom-color: var(--primary); background: none; color: var(--primary-dark); font-weight: 700; }

/* ── التنبيهات والشارات ── */
.zui .zui-content .alert { border-radius: var(--r-tile); font-size: 13.5px; }
.zui .zui-content .alert-success { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }
.zui .zui-content .alert-warning { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.zui .zui-content .alert-danger { border-color: var(--stop-line); background: var(--stop-bg); color: var(--stop-text); }
.zui .zui-content .badge { padding: 3px 9px; border-radius: var(--r-pill); font-weight: 500; }