/*
  نظام تصميم «حصر حالات التعليم الإلكتروني» — هوية وزارة التعليم 2025.
  منقول ومكيَّف من نظام تصميم منصة تكامل (UX-UI-DESIGN-SYSTEM.md).
  القواعد: لا لون حرفي خارج :root؛ ألوان الهوية ثابتة بين الوضعين وما يتغيّر السطوح والنصوص؛
  الأيقونات من Bootstrap Icons لا Emoji؛ النص الحامل للمعلومة لا ينزل عن 12px.
*/

@font-face {
  font-family: "MOE Helvetica";
  src: url("../fonts/moe/moe-helvetica-regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "MOE Helvetica";
  src: url("../fonts/moe/moe-helvetica-bold.ttf") format("truetype");
  font-style: normal; font-weight: 700; font-display: swap;
}

/* ===== توكنز الهوية (نهاري) ===== */
:root {
  --moe-navy: #15445a;
  --moe-navy-deep: #103747;
  --moe-navy-darkest: #0e303e;
  --moe-teal: #0da9a6;
  --moe-teal-dark: #087f7d;
  --moe-teal-deep: #066462;
  --moe-teal-on-navy: #8fd4d2;
  --moe-teal-soft-border: #78c6c4;
  --moe-blue: #3d7eb9;
  --moe-green: #07a869;
  --moe-green-dark: #087348;
  --moe-gold: #c1b489;
  --moe-gray: #c2c1c1;
  --moe-purple: #351375;
  --moe-danger: #b33a3a;

  --moe-paper: #f7fafa;
  --moe-surface: #ffffff;
  --moe-surface-alt: #eef4f5;
  --moe-surface-tint: #f9fbfb;
  --moe-surface-tint-teal: #f2f8f8;
  --moe-text: #102a33;
  --moe-text-muted: #617179;
  --moe-border: #dbe4e6;
  --moe-border-strong: #c8d4d7;
  --moe-on-accent: #ffffff;

  --moe-navy-tint: #e8eef1;
  --moe-teal-tint: #e0f2f2;
  --moe-neutral-bg: #eef2f3;
  --moe-neutral-bg-strong: #e2e9eb;
  --moe-neutral-bg-deep: #e7edef;
  --moe-neutral-border: #d9e1e3;
  --moe-neutral-text: #4f6269;
  --moe-chip-text: #34505a;
  --moe-muted-cool: #7b959c;
  --moe-muted-cool-strong: #799399;
  --moe-muted-cool-soft: #9eb9bf;

  --moe-warning-bg: #f7f1df;
  --moe-warning-text: #6b5923;
  --moe-warning-text-strong: #6d5b25;
  --moe-warning-icon: #8a7327;
  --moe-warning-border: #efe4c4;
  --moe-warning-border-strong: #dfd1a0;
  --moe-warning-border-deep: #e0d19b;
  --moe-danger-bg: #f7e8e8;
  --moe-danger-bg-soft: #f9e9e9;
  --moe-danger-text: #8a2b2b;
  --moe-danger-text-soft: #913333;
  --moe-danger-hover: #9e3232;
  --moe-danger-accent: #b33a3a;
  --moe-danger-border: #ebc4c4;
  --moe-danger-border-strong: #e0b4b4;
  --moe-success-bg: #e6f6ef;
  --moe-success-text: #06603d;
  --moe-success-text-strong: #0b5138;
  --moe-success-strong: #087348;
  --moe-success-border: #b6e3cd;
  --moe-success-border-strong: #b8e2cf;
  --moe-info-bg: #e7f4f8;
  --moe-info-text: #1b5c72;
  --moe-info-text-strong: #17657d;
  --moe-info-border: #bce0ea;
  --moe-link-strong: #1b4f76;

  --moe-focus-ring: rgba(13, 169, 166, 0.35);
  --moe-focus-ring-soft: rgba(13, 169, 166, 0.15);
  --moe-focus-ring-faint: rgba(13, 169, 166, 0.10);
  --moe-navy-veil: rgba(21, 68, 90, 0.10);
  --moe-text-veil: rgba(16, 42, 51, 0.07);

  /* توكنز نصّ دلالية: نسختان لأن لون الهوية كنصّ يسقط على السطح الداكن */
  --moe-heading: #15445a;
  --moe-heading-strong: #103747;
  --moe-accent-text: #087f7d;
  --moe-accent-text-strong: #066462;
  --moe-positive-text: #087348;
  --moe-gold-text: #c1b489;
  --moe-teal-text: #087f7d;

  --app-sidebar-width: 276px;
  --app-topbar-height: 72px;
  --app-radius: 12px;
  --app-radius-sm: 8px;
  --app-shadow: 0 4px 18px rgba(16, 42, 51, 0.06);

  /* أسماء قديمة في القوالب القائمة تُحال إلى الهوية */
  --brand: var(--moe-teal-dark);
  --brand-deep: var(--moe-navy);
  --brand-tint: var(--moe-teal-tint);
  --ink: var(--moe-text);
  --ink-soft: var(--moe-neutral-text);
  --ink-mute: var(--moe-text-muted);
  --paper: var(--moe-paper);
  --card: var(--moe-surface);
  --line: var(--moe-border);
  --line-soft: var(--moe-neutral-bg-deep);

  --bs-primary: var(--moe-teal-dark);
  --bs-primary-rgb: 8, 127, 125;
  --bs-link-color: #176d91;
  --bs-link-hover-color: var(--moe-heading);
  --bs-body-color: var(--moe-text);
  --bs-body-bg: var(--moe-paper);
  --bs-border-color: var(--moe-border);
  --bs-font-sans-serif: "MOE Helvetica", Tahoma, Arial, sans-serif;
}

/* ===== الوضع الليلي: ألوان الهوية ثابتة، السطوح والنصوص والمسحات تتغيّر ===== */
:root[data-bs-theme="dark"] {
  --moe-paper: #0f2733;
  --moe-surface: #15333f;
  --moe-surface-alt: #193a47;
  --moe-surface-tint: #133039;
  --moe-surface-tint-teal: #103a3a;
  --moe-text: #e8f0f2;
  --moe-text-muted: #a8bcc3;
  --moe-border: #24454f;
  --moe-border-strong: #335a66;
  --moe-navy-tint: #17323f;
  --moe-teal-tint: #103a3a;
  --moe-neutral-bg: #1b3c49;
  --moe-neutral-bg-strong: #234754;
  --moe-neutral-bg-deep: #234754;
  --moe-neutral-border: #2b5060;
  --moe-neutral-text: #b3c4ca;
  --moe-chip-text: #cfdde1;
  --moe-muted-cool: #9fb5bc;
  --moe-muted-cool-strong: #9fb5bc;
  --moe-muted-cool-soft: #8ba3ab;
  --moe-teal-soft-border: #2f6b6a;
  --moe-warning-bg: #332c17;
  --moe-warning-text: #e8d49a;
  --moe-warning-text-strong: #e8d49a;
  --moe-warning-icon: #d9c089;
  --moe-warning-border: #55492a;
  --moe-warning-border-strong: #6b5c34;
  --moe-warning-border-deep: #6b5c34;
  --moe-danger-bg: #3a1e1e;
  --moe-danger-bg-soft: #3a1e1e;
  --moe-danger-text: #f0b3b3;
  --moe-danger-text-soft: #f0b3b3;
  --moe-danger-hover: #c25656;
  --moe-danger-accent: #e08e8e;
  --moe-danger-border: #5e3232;
  --moe-danger-border-strong: #6b3a3a;
  --moe-success-bg: #10312a;
  --moe-success-text: #8fdcb8;
  --moe-success-text-strong: #8fdcb8;
  --moe-success-strong: #4fc48c;
  --moe-success-border: #245c46;
  --moe-success-border-strong: #245c46;
  --moe-info-bg: #12303c;
  --moe-info-text: #9ed3e6;
  --moe-info-text-strong: #9ed3e6;
  --moe-info-border: #2a5c70;
  --moe-link-strong: #8fc4e6;
  --moe-focus-ring: rgba(13, 169, 166, 0.45);
  --moe-focus-ring-soft: rgba(13, 169, 166, 0.25);
  --moe-focus-ring-faint: rgba(13, 169, 166, 0.18);
  --moe-navy-veil: rgba(255, 255, 255, 0.06);
  --moe-text-veil: rgba(255, 255, 255, 0.05);
  --moe-heading: #dbe8ee;
  --moe-heading-strong: #eef4f7;
  --moe-accent-text: #5fd0cd;
  --moe-accent-text-strong: #8ae4e1;
  --moe-positive-text: #74d9a8;
  --moe-gold-text: #d9c089;
  --moe-teal-text: #5fd0cd;
  --app-shadow: 0 4px 18px rgba(0, 0, 0, 0.34);
  --bs-secondary-color: #b3c4ca;
  --bs-tertiary-bg: #193a47;
  --bs-secondary-bg: #1b3c49;
  --bs-emphasis-color: var(--moe-text);
  --bs-body-color: var(--moe-text);
  --bs-body-bg: var(--moe-paper);
  --bs-border-color: var(--moe-border);
  --bs-link-color: #6fc3e8;
  --bs-link-hover-color: #9ed8f2;
}

/* ===== الجذر والأساس ===== */
html { min-height: 100%; font-size: 15px; scroll-behavior: smooth; }
html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="large"] { font-size: 17px; }
@media (max-width: 575.98px) {
  html { font-size: 14px; }
  html[data-font-size="large"] { font-size: 16px; }
}
body {
  min-height: 100vh; margin: 0;
  background-color: var(--moe-paper); color: var(--moe-text);
  font-family: "MOE Helvetica", Tahoma, Arial, sans-serif; line-height: 1.55;
}
a { text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--moe-focus-ring); outline-offset: 2px; }
.text-muted { color: var(--moe-text-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }
[dir="ltr"].tabular { font-variant-numeric: tabular-nums; }

/* ===== مواءمة Bootstrap مع الهوية ===== */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--moe-teal-dark);
  --bs-nav-pills-link-active-color: var(--moe-on-accent);
  --bs-nav-link-color: var(--moe-heading);
}
.nav-tabs { --bs-nav-tabs-link-active-color: var(--moe-heading); --bs-nav-link-color: var(--moe-text-muted); --bs-nav-tabs-border-color: var(--moe-border); --bs-nav-tabs-link-active-bg: var(--moe-surface); --bs-nav-tabs-link-active-border-color: var(--moe-border) var(--moe-border) var(--moe-surface); }
.nav-tabs .nav-link { font-weight: 700; }
.nav-tabs .nav-link.active { border-top: 3px solid var(--moe-teal); }
.btn { min-height: 40px; border-radius: var(--app-radius-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.btn-sm { min-height: 34px; }
.btn-primary {
  --bs-btn-color: var(--moe-on-accent); --bs-btn-bg: var(--moe-teal-dark); --bs-btn-border-color: var(--moe-teal-dark);
  --bs-btn-hover-color: var(--moe-on-accent); --bs-btn-hover-bg: var(--moe-teal-deep); --bs-btn-hover-border-color: var(--moe-teal-deep);
  --bs-btn-active-color: var(--moe-on-accent); --bs-btn-active-bg: var(--moe-navy); --bs-btn-active-border-color: var(--moe-navy);
  --bs-btn-disabled-color: var(--moe-on-accent); --bs-btn-disabled-bg: var(--moe-teal-dark); --bs-btn-disabled-border-color: var(--moe-teal-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--moe-accent-text); --bs-btn-border-color: var(--moe-teal-soft-border); --bs-btn-bg: var(--moe-surface);
  --bs-btn-hover-color: var(--moe-on-accent); --bs-btn-hover-bg: var(--moe-teal); --bs-btn-hover-border-color: var(--moe-teal);
  --bs-btn-active-color: var(--moe-on-accent); --bs-btn-active-bg: var(--moe-navy); --bs-btn-active-border-color: var(--moe-navy);
}
.btn-danger {
  --bs-btn-bg: var(--moe-danger); --bs-btn-border-color: var(--moe-danger);
  --bs-btn-hover-bg: var(--moe-danger-hover); --bs-btn-hover-border-color: var(--moe-danger-hover);
  --bs-btn-active-bg: var(--moe-danger-text); --bs-btn-active-border-color: var(--moe-danger-text);
}
.btn-outline-danger {
  --bs-btn-color: var(--moe-danger-accent); --bs-btn-border-color: var(--moe-danger-border-strong);
  --bs-btn-hover-bg: var(--moe-danger); --bs-btn-hover-border-color: var(--moe-danger);
  --bs-btn-active-bg: var(--moe-danger-text); --bs-btn-active-border-color: var(--moe-danger-text);
}
.btn-outline-secondary {
  --bs-btn-color: var(--moe-text-muted); --bs-btn-border-color: var(--moe-border-strong);
  --bs-btn-hover-color: var(--moe-on-accent); --bs-btn-hover-bg: var(--moe-text-muted); --bs-btn-hover-border-color: var(--moe-text-muted);
  --bs-btn-active-color: var(--moe-on-accent); --bs-btn-active-bg: var(--moe-neutral-text); --bs-btn-active-border-color: var(--moe-neutral-text);
}
.btn-icon { width: 40px; padding: 0; }
.form-control, .form-select, .input-group-text {
  min-height: 42px; border-color: var(--moe-border-strong); border-radius: var(--app-radius-sm);
  background-color: var(--moe-surface); color: var(--moe-text);
}
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control:focus, .form-select:focus { border-color: var(--moe-teal); box-shadow: 0 0 0 0.22rem var(--moe-focus-ring-soft); background-color: var(--moe-surface); color: var(--moe-text); }
.form-control::placeholder { color: var(--moe-muted-cool); }
.form-label { font-weight: 700; color: var(--moe-heading); font-size: max(0.86rem, 12px); margin-bottom: 0.3rem; }
.form-text { color: var(--moe-text-muted); font-size: max(0.78rem, 12px); }
.form-check-input:checked { background-color: var(--moe-teal-dark); border-color: var(--moe-teal-dark); }
.card, .panel { border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); box-shadow: var(--app-shadow); }
.panel { padding: 1.15rem 1.2rem; color: var(--moe-text); }
.panel h3 { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; padding-inline-start: 0.6rem; border-inline-start: 3px solid var(--moe-teal); color: var(--moe-heading); font-size: 1rem; font-weight: 700; }
.panel h3 small { color: var(--moe-text-muted); font-size: max(0.78rem, 12px); font-weight: 400; }
.alert { border-radius: var(--app-radius-sm); border-width: 1px; }
.alert-info    { --bs-alert-bg: var(--moe-info-bg);    --bs-alert-color: var(--moe-info-text-strong);    --bs-alert-border-color: var(--moe-info-border); }
.alert-success { --bs-alert-bg: var(--moe-success-bg); --bs-alert-color: var(--moe-success-text-strong); --bs-alert-border-color: var(--moe-success-border); }
.alert-warning { --bs-alert-bg: var(--moe-warning-bg); --bs-alert-color: var(--moe-warning-text-strong); --bs-alert-border-color: var(--moe-warning-border-strong); }
/* alert-light (شريط مصفوفة المهام): بلا هذا يأخذ في الليلي رمادي Bootstrap الحرفي #343a40 لا سطح الهوية */
.alert-light   { --bs-alert-bg: var(--moe-surface-tint); --bs-alert-color: var(--moe-text); --bs-alert-border-color: var(--moe-border); }
.alert-danger  { --bs-alert-bg: var(--moe-danger-bg);  --bs-alert-color: var(--moe-danger-text);         --bs-alert-border-color: var(--moe-danger-border); }
.alert-link { color: inherit; }
.dropdown-menu { --bs-dropdown-bg: var(--moe-surface); --bs-dropdown-color: var(--moe-text); --bs-dropdown-link-color: var(--moe-text); --bs-dropdown-link-hover-bg: var(--moe-surface-alt); --bs-dropdown-link-hover-color: var(--moe-heading); --bs-dropdown-border-color: var(--moe-border); --bs-dropdown-header-color: var(--moe-text-muted); border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow); }
.progress { background-color: var(--moe-neutral-bg-strong); }
.progress-bar { background-color: var(--moe-teal-dark); }
.border, .border-bottom, .border-top { border-color: var(--moe-border) !important; }

/* ===== رابط التخطّي ===== */
.skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; z-index: 1100; padding: 0.5rem 0.9rem; border-radius: 0 0 var(--app-radius-sm) var(--app-radius-sm); color: var(--moe-on-accent); background-color: var(--moe-navy); font-weight: 700; text-decoration: none; }
.skip-link:focus-visible { inset-block-start: 0; color: var(--moe-on-accent); }

/* ===== الشريط العلوي ===== */
.app-topbar { height: var(--app-topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1.25rem; background-color: var(--moe-surface); border-bottom: 1px solid var(--moe-border); position: sticky; top: 0; z-index: 1040; overflow-x: clip; }
.topbar-brand-group { flex: 1 1 auto; min-width: 0; }
.topbar-actions { flex: 0 0 auto; }
.app-brand, .app-brand-copy { min-width: 0; }
.app-brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-brand-group, .topbar-actions, .app-brand, .term-chip, .user-chip { display: flex; align-items: center; }
.topbar-brand-group, .topbar-actions { gap: 0.75rem; }
.app-brand { gap: 0.8rem; color: var(--moe-text); text-decoration: none; }
.app-brand:hover { color: var(--moe-text); }
.app-brand-logo { width: 72px; height: 52px; object-fit: contain; flex: 0 0 auto; }
:root[data-bs-theme="dark"] .app-brand-logo, :root[data-bs-theme="dark"] .auth-brand img { background: #fff; border-radius: 10px; padding: 3px; }
.app-brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.app-brand-copy strong { color: var(--moe-heading); font-size: 1.05rem; }
.app-brand-copy small { color: var(--moe-text-muted); font-size: max(0.8rem, 12px); white-space: nowrap; }
.term-chip, .user-chip { gap: 0.45rem; min-height: 38px; padding-inline: 0.75rem; border: 1px solid var(--moe-border); border-radius: 999px; background-color: var(--moe-surface-tint); color: var(--moe-chip-text); font-size: max(0.84rem, 12px); text-decoration: none; }
.term-chip i { color: var(--moe-accent-text); }
.term-chip.is-warning { color: var(--moe-warning-text-strong); background-color: var(--moe-warning-bg); border-color: var(--moe-warning-border-strong); }
.term-chip.is-warning i { color: var(--moe-warning-icon); }
.user-chip { cursor: pointer; }
.user-chip:hover, .user-chip:focus-visible, .user-chip[aria-expanded="true"] { border-color: var(--moe-teal); color: var(--moe-heading); }
.user-chip .user-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background-color: var(--moe-navy); color: var(--moe-on-accent); font-weight: 700; font-size: max(0.8rem, 12px); }
.user-chip .user-role { color: var(--moe-text-muted); font-size: max(0.74rem, 12px); }
.topbar-action, .topbar-menu-button { min-width: 40px; min-height: 40px; border: 1px solid var(--moe-border); border-radius: 50%; background-color: var(--moe-surface); color: var(--moe-heading); font-size: 1.1rem; }
.topbar-action:hover, .topbar-menu-button:hover { color: var(--moe-on-accent); background-color: var(--moe-teal-dark); border-color: var(--moe-teal-dark); }
.topbar-alerts { position: relative; }
.topbar-badge { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; min-width: 1.15rem; padding-inline: 0.25rem; border-radius: 999px; color: var(--moe-navy-deep); background-color: var(--moe-gold); font-size: max(0.66rem, 12px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15rem; text-align: center; }
.topbar-badge.is-critical { color: var(--moe-on-accent); background-color: var(--moe-danger); }
.alerts-item { display: flex; align-items: flex-start; gap: 0.55rem; white-space: normal; }
.alerts-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-block-start: 0.4rem; border-radius: 50%; background-color: var(--moe-blue); }
.alerts-dot.is-warning { background-color: var(--moe-gold); }
.alerts-dot.is-critical { background-color: var(--moe-danger); }
.alerts-body { display: flex; flex-direction: column; line-height: 1.35; }
.alerts-meta { color: var(--moe-text-muted); font-size: max(0.76rem, 12px); }

/* ===== الهيكل والقائمة الجانبية ===== */
.app-shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--app-topbar-height)); }
.app-workspace { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1 1 auto; min-width: 0; padding: 1.5rem clamp(1rem, 2.2vw, 2rem) 2rem; }
.app-main:focus { outline: none; }
.app-sidebar { width: var(--app-sidebar-width); flex: 0 0 var(--app-sidebar-width); min-height: calc(100vh - var(--app-topbar-height)); color: var(--moe-on-accent); background-color: var(--moe-navy-deep); border-inline-start: 1px solid var(--moe-navy-darkest); }
@media (min-width: 992px) {
  .app-sidebar { background-color: var(--moe-navy-deep) !important; position: sticky; top: var(--app-topbar-height); height: calc(100vh - var(--app-topbar-height)); overflow-y: auto; align-self: flex-start; }
}
.app-sidebar .offcanvas-body { min-height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 0; }
.sidebar-mobile-header { color: var(--moe-on-accent); background-color: var(--moe-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.sidebar-mobile-header small { color: rgba(255, 255, 255, 0.72); font-size: max(0.78rem, 12px); }
.sidebar-context { display: flex; align-items: center; gap: 0.7rem; margin: 0.9rem 0.8rem 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--app-radius-sm); background-color: rgba(255, 255, 255, 0.06); }
.sidebar-context-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 8px; background-color: var(--moe-teal-dark); color: var(--moe-on-accent); font-size: 1rem; }
.sidebar-context-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sidebar-context-label { color: rgba(255, 255, 255, 0.66); font-size: max(0.74rem, 12px); }
.sidebar-context-name { color: var(--moe-on-accent); font-size: max(0.86rem, 12px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sidebar-sections { padding-bottom: 0.5rem; }
.sidebar-section-label { display: block; padding: 0.75rem 1.45rem 0.25rem; color: rgba(255, 255, 255, 0.72); font-size: max(0.8rem, 12px); font-weight: 700; letter-spacing: 0.02em; }
.sidebar-nav { padding: 0 0.7rem 0.35rem; margin-bottom: 0; }
.app-sidebar .nav-link { min-height: 42px; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; margin-block: 0.12rem; border-radius: var(--app-radius-sm); color: rgba(255, 255, 255, 0.79); font-size: 0.9rem; transition: background-color 150ms ease, color 150ms ease; }
.app-sidebar .nav-link i { width: 1.25rem; color: var(--moe-teal-on-navy); font-size: 1rem; text-align: center; }
.app-sidebar .nav-link:hover { color: var(--moe-on-accent); background-color: rgba(255, 255, 255, 0.09); }
.app-sidebar .nav-link.active { color: var(--moe-on-accent); background-color: var(--moe-teal-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.app-sidebar .nav-link.active i { color: var(--moe-on-accent); }
.nav-link-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { flex: 0 0 auto; min-width: 1.4rem; padding: 0.05rem 0.35rem; border-radius: 999px; color: var(--moe-navy-deep); background-color: var(--moe-gold); font-size: max(0.72rem, 12px); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.nav-badge.is-critical { color: var(--moe-on-accent); background-color: var(--moe-danger); }
.sidebar-tools { margin-top: auto; padding: 0.6rem 0.9rem 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem clamp(1rem, 2.2vw, 2rem); color: var(--moe-text-muted); background-color: var(--moe-surface); border-top: 1px solid var(--moe-border); font-size: max(0.78rem, 12px); }

/* ===== ضابط الوضع وحجم الخط ===== */
.display-prefs { padding: 0.35rem 0.2rem 0.2rem; }
.display-prefs-group + .display-prefs-group { margin-top: 0.55rem; }
.display-prefs-label { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; color: rgba(255, 255, 255, 0.72); font-size: max(0.78rem, 12px); }
.dropdown-menu .display-prefs-label { color: var(--moe-text-muted); }
.display-prefs-options { display: flex; gap: 0; }
.display-prefs-options [data-pref] { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 32px; padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.3); background-color: transparent; color: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: max(0.8rem, 12px); cursor: pointer; }
.dropdown-menu .display-prefs-options [data-pref] { border-color: var(--moe-border-strong); background-color: var(--moe-surface); color: var(--moe-text); }
.display-prefs-options [data-pref]:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.display-prefs-options [data-pref]:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.display-prefs-options [data-pref] + [data-pref] { border-inline-start: 0; }
.display-prefs-options [data-pref]:hover { background-color: rgba(255, 255, 255, 0.1); }
.display-prefs-options [data-pref][aria-checked="true"] { background-color: var(--moe-teal-dark); border-color: var(--moe-teal-dark); color: var(--moe-on-accent); font-weight: 700; }
.display-prefs-options [data-pref]:focus-visible { outline: 3px solid var(--moe-gold); outline-offset: -1px; z-index: 1; }

/* ===== هرمية الصفحة ===== */
.page-header, .head { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; padding-block: 0.35rem 1rem; padding-inline: 0.9rem 0; border-bottom: 1px solid var(--moe-border); }
.page-header::before, .head::before { content: ""; position: absolute; inset-block: 0.3rem 1.05rem; inset-inline-start: 0; width: 4px; border-radius: 4px; background-color: var(--moe-teal); }
.page-title, .head h2 { margin: 0; color: var(--moe-heading); font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.3; }
.page-context, .head p { max-width: 72ch; margin: 0.2rem 0 0; color: var(--moe-text-muted); font-size: 0.88rem; }
.page-header-text { min-width: 0; }
.page-header-actions, .head > .d-flex { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-back { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; color: var(--moe-text-muted); font-size: max(0.8rem, 12px); font-weight: 700; text-decoration: none; }
.page-back:hover, .page-back:focus-visible { color: var(--moe-heading); }
.page-context-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

/* ===== بطاقة المؤشر ===== */
.kpi-card, .kpi { position: relative; display: flex; flex-direction: column; gap: 0.15rem; height: 100%; padding: 1rem 0.9rem 0.85rem; overflow: hidden; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); color: var(--moe-text); text-decoration: none; }
.kpi-card-top { position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background-color: var(--moe-gray); }
.kpi-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kpi-card-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 8px; color: var(--moe-heading); background-color: var(--moe-surface-alt); }
.kpi-card-title, .kpi .l { margin: 0; flex: 1 1 auto; min-width: 6rem; color: var(--moe-text-muted); font-size: max(0.8rem, 12px); font-weight: 700; }
.kpi-card-value, .kpi .n { color: var(--moe-heading); font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-card-hint, .kpi .b { color: var(--moe-text-muted); font-size: max(0.76rem, 12px); line-height: 1.35; }
.kpi-card-more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; color: var(--moe-accent-text); font-size: max(0.78rem, 12px); font-weight: 700; }
.kpi-card.is-link:hover, .kpi-card.is-link:focus-visible { border-color: var(--moe-teal); box-shadow: var(--app-shadow); color: var(--moe-text); }
.kpi-card.tone-info .kpi-card-top { background-color: var(--moe-blue); }
.kpi-card.tone-info .kpi-card-icon { color: var(--moe-link-strong); background-color: var(--moe-info-bg); }
.kpi-card.tone-success .kpi-card-top { background-color: var(--moe-green); }
.kpi-card.tone-success .kpi-card-icon { color: var(--moe-success-text); background-color: var(--moe-success-bg); }
.kpi-card.tone-warning .kpi-card-top { background-color: var(--moe-gold); }
.kpi-card.tone-warning .kpi-card-icon { color: var(--moe-warning-text); background-color: var(--moe-warning-bg); }
.kpi-card.tone-danger .kpi-card-top { background-color: var(--moe-danger); }
.kpi-card.tone-danger .kpi-card-icon { color: var(--moe-danger-text); background-color: var(--moe-danger-bg); }
.kpi-card.tone-brand .kpi-card-top { background-color: var(--moe-teal); }
.kpi-card.tone-brand .kpi-card-icon { color: var(--moe-accent-text); background-color: var(--moe-teal-tint); }

/* ===== لوحة «يتطلب قرارًا» ===== */
.decision-queue { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.decision-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--moe-warning-border-strong); border-inline-start: 4px solid var(--moe-gold); border-radius: var(--app-radius-sm); background-color: var(--moe-warning-bg); color: var(--moe-warning-text-strong); }
.decision-item.is-critical { border-color: var(--moe-danger-border-strong); border-inline-start-color: var(--moe-danger); background-color: var(--moe-danger-bg); color: var(--moe-danger-text); }
.decision-item .decision-count { min-width: 2.2rem; text-align: center; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.decision-item .decision-body { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.decision-item .decision-body small { display: block; opacity: 0.85; font-size: max(0.76rem, 12px); }

/* ===== الحالات الفارغة ===== */
.empty-state { padding: clamp(2rem, 6vw, 4rem); border: 1px dashed var(--moe-muted-cool-soft); border-radius: var(--app-radius); background-color: var(--moe-surface); text-align: center; }
.empty-state-icon { display: block; margin-bottom: 0.6rem; color: var(--moe-muted-cool-strong); font-size: 1.9rem; }

/* ===== الشارات ===== */
.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 25px; padding: 0.2rem 0.6rem; border: 1px solid transparent; border-radius: 999px; font-size: max(0.74rem, 12px); font-weight: 700; white-space: nowrap; line-height: 1.2; }
.status-badge.fs-6 { font-size: max(0.86rem, 12px); }
.status-neutral { color: var(--moe-neutral-text); background-color: var(--moe-neutral-bg); border-color: var(--moe-neutral-border); }
.status-info    { color: var(--moe-info-text-strong); background-color: var(--moe-info-bg); border-color: var(--moe-info-border); }
.status-success { color: var(--moe-success-strong); background-color: var(--moe-success-bg); border-color: var(--moe-success-border-strong); }
.status-warning { color: var(--moe-warning-text); background-color: var(--moe-warning-bg); border-color: var(--moe-warning-border-deep); }
.status-danger  { color: var(--moe-danger-text-soft); background-color: var(--moe-danger-bg-soft); border-color: var(--moe-danger-border); }
.status-brand   { color: var(--moe-accent-text-strong); background-color: var(--moe-teal-tint); border-color: var(--moe-teal-soft-border); }
/* شارات Bootstrap المتبقية تُحال إلى اللوحة نفسها */
.badge { font-weight: 700; }
.model-badge { display: inline-block; font-size: max(0.72rem, 12px); font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; color: #fff; }

/* ===== شريط خطوات سير العمل ===== */
/* القائمة <ol> بلا ترقيم المتصفح: الترقيم الافتراضي كان يظهر أرقامًا شاردة بجوار الشرائح (والأسهم تُرقَّم أيضًا) */
.workflow-steps { list-style: none; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); }
.workflow-step { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: max(0.82rem, 12px); font-weight: 700; white-space: nowrap; color: var(--moe-neutral-text); background-color: var(--moe-neutral-bg); border: 1px solid var(--moe-neutral-border); }
.workflow-step i { font-size: 0.95rem; }
.workflow-step.is-done { color: var(--moe-success-strong); background-color: var(--moe-success-bg); border-color: var(--moe-success-border-strong); }
.workflow-step.is-pending { color: var(--moe-on-accent); background-color: var(--moe-teal-dark); border-color: var(--moe-teal-dark); }
.workflow-step.is-returned { color: var(--moe-warning-text); background-color: var(--moe-warning-bg); border-color: var(--moe-warning-border-deep); }
.workflow-step.is-rejected { color: var(--moe-danger-text-soft); background-color: var(--moe-danger-bg-soft); border-color: var(--moe-danger-border); }
.workflow-arrow { color: var(--moe-muted-cool); font-size: max(0.75rem, 12px); }
/* على الجوال تلتف الشرائح أسطرًا فيبقى السهم يتيمًا في آخر السطر؛ الترتيب يحمله تسلسل القائمة نفسه */
@media (max-width: 575.98px) { .workflow-arrow { display: none; } }

/* ===== فحص القواعد ===== */
.rule-check { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0; border-bottom: 1px solid var(--moe-neutral-bg-deep); font-size: max(0.84rem, 12px); }
.rule-check:last-child { border-bottom: 0; }
.rule-check i { flex: 0 0 auto; margin-top: 0.15rem; font-size: 1rem; }
.rule-check.is-ok i { color: var(--moe-positive-text); }
.rule-check.is-block i { color: var(--moe-danger-accent); }
.rule-check.is-warn i { color: var(--moe-warning-icon); }
.rule-ref { color: var(--moe-text-muted); }

/* ===== الجداول ===== */
.tablewrap { overflow: hidden; padding: 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); box-shadow: var(--app-shadow); }
/* تمرير أفقي للجداول العريضة (أعمدة كثيرة): خلية الجدول في DataTables تتمرر وحدها فيبقى البحث والترقيم ثابتين؛
   والجدول بلا DataTables يتمرر داخل غلافه. الغلاف يبقى overflow:hidden لحواف الزوايا المستديرة */
.tablewrap .dt-layout-table > .dt-layout-full,
.tablewrap .dt-layout-table > .dt-layout-cell { overflow: auto; max-height: 72vh; -webkit-overflow-scrolling: touch; }
/* الارتفاع المحدود يُبقي شريط التمرير الأفقي ظاهرًا دون النزول لآخر الجدول، ورأس الجدول مثبت أثناء التمرير */
.tablewrap .dt-layout-table table.dataTable > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.tablewrap:not(:has(.dt-container)) { overflow-x: auto; }
.tablewrap .dt-layout-table > .dt-layout-full::-webkit-scrollbar,
.tablewrap:not(:has(.dt-container))::-webkit-scrollbar { height: 10px; }
.tablewrap .dt-layout-table > .dt-layout-full::-webkit-scrollbar-thumb,
.tablewrap:not(:has(.dt-container))::-webkit-scrollbar-thumb { background: var(--moe-neutral-border); border-radius: 6px; }
.table { --bs-table-color: var(--moe-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--moe-surface-tint-teal); --bs-table-hover-color: var(--moe-text); --bs-table-striped-bg: var(--moe-surface-tint); margin-bottom: 0; border-color: var(--moe-neutral-bg-strong); font-size: 0.88rem; color: var(--moe-text); }
.table > thead > tr > th { padding-block: 0.75rem; color: var(--moe-on-accent); background-color: var(--moe-navy); border-color: rgba(255, 255, 255, 0.13); font-weight: 700; text-align: start; vertical-align: middle; white-space: nowrap; }
.table > tbody > tr > td { padding-block: 0.7rem; border-bottom-color: var(--moe-neutral-bg-deep); vertical-align: middle; text-align: start; color: var(--moe-text); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td a:not(.btn), .table td a.fw-semibold:not(.btn) { text-decoration: none; color: var(--bs-link-color); }
.table td a:not(.btn):hover, .table td a:not(.btn):focus-visible { text-decoration: underline; }
.table td[dir="ltr"], .table th[dir="ltr"] { font-variant-numeric: tabular-nums; text-align: start; }
/* DataTables 2 + Bootstrap 5: الرأس كحلي وأيقونة الترتيب عند النهاية */
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th { text-align: start !important; background-color: var(--moe-navy) !important; color: var(--moe-on-accent) !important; border-bottom: 0 !important; }
table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td { padding-inline: 0.5rem !important; }
/* الأرقام من البداية كرأسها لا من النهاية (DataTables تعطي dt-type-numeric محاذاة يمين) */
table.dataTable td.dt-type-numeric, table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-date, table.dataTable th.dt-type-date { text-align: start !important; }
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc { padding-inline-end: 1.9rem !important; }
table.dataTable thead > tr > th .dt-column-order { inset-inline-end: 0.5rem; left: auto; }
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::after { color: var(--moe-teal-on-navy); }
table.dataTable tbody tr:hover > * { box-shadow: none; }
div.dt-container .dt-input, div.dt-container .dt-length select { min-height: 36px; }
div.dt-container .dt-info, div.dt-container .dt-length, div.dt-container .dt-search label { color: var(--moe-text-muted); font-size: max(0.8rem, 12px); }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--moe-teal-dark) !important; color: var(--moe-on-accent) !important; border-color: var(--moe-teal-dark) !important; }
.page-link { color: var(--moe-heading); }
.page-item.active .page-link { background-color: var(--moe-teal-dark); border-color: var(--moe-teal-dark); }

/* ===== الرسائل العابرة ===== */
/* أسفل الشاشة لا أعلاها: في الأعلى كانت تغطي عنوان الصفحة (h1) ورقم الحالة وشارتها طوال ست ثوانٍ (اختبار بصري 2026-10-06) */
.app-toasts { position: fixed; inset-block-end: 1rem; inset-inline-start: 0.75rem; z-index: 1090; }
@media (min-width: 992px) { .app-toasts { inset-inline-start: calc(var(--app-sidebar-width) + 0.75rem); } }
.toast-success { border: 1px solid var(--moe-success-border); background-color: var(--moe-success-bg); }
.toast-success .toast-body { display: flex; align-items: center; gap: 0.6rem; color: var(--moe-success-text-strong); font-weight: 700; }
.toast-success .toast-body > i { color: var(--moe-positive-text); font-size: 1.05rem; }
.toast-success .btn-close { margin-inline-start: auto; }

/* ===== Select2 داخل Bootstrap RTL ===== */
.select2-container--bootstrap-5 .select2-selection { font-family: inherit; min-height: 42px; border-color: var(--moe-border-strong); border-radius: var(--app-radius-sm); background-color: var(--moe-surface); color: var(--moe-text); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--moe-teal); box-shadow: 0 0 0 0.22rem var(--moe-focus-ring-soft); }
.select2-container--bootstrap-5 .select2-dropdown { background-color: var(--moe-surface); border-color: var(--moe-border-strong); color: var(--moe-text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background-color: var(--moe-teal-dark); color: var(--moe-on-accent); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--moe-text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color: var(--moe-surface); color: var(--moe-text); border-color: var(--moe-border-strong); }

/* ===== لوحة المعلومات: الأشرطة ===== */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: max(0.82rem, 12px); }
.bar .bl { color: var(--moe-neutral-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bt { height: 20px; background-color: var(--moe-neutral-bg); border-radius: 6px; overflow: hidden; }
.bar .bf { height: 100%; border-radius: 6px; }
.bar .bv { font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; }
.bar-total { padding-top: 8px; border-top: 1px solid var(--moe-border); }
.bar-total .bl { color: var(--moe-heading); font-weight: 700; }
.srow { display: flex; align-items: center; gap: 10px; font-size: max(0.84rem, 12px); padding: 5px 0; border-bottom: 1px solid var(--moe-neutral-bg-deep); }
.srow .sn { flex: 1; color: var(--moe-neutral-text); } .srow .sv { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== شاشات الدخول ===== */
.auth-body { min-height: 100vh; background: radial-gradient(circle at 15% 15%, var(--moe-focus-ring-faint), transparent 45%), radial-gradient(circle at 85% 80%, var(--moe-navy-veil), transparent 45%), var(--moe-paper); }
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 420px; padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--moe-surface); border: 1px solid var(--moe-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.auth-brand { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--moe-border); }
.auth-brand img { width: 64px; height: 50px; object-fit: contain; }
.auth-brand strong { display: block; color: var(--moe-heading); font-size: 1.05rem; line-height: 1.3; }
.auth-brand-org { display: block; color: var(--moe-text); font-size: max(0.85rem, 13px); }
.auth-title { font-size: 1.25rem; font-weight: 700; color: var(--moe-heading); margin-bottom: 0.25rem; }
.auth-subtitle { font-size: 0.86rem; color: var(--moe-text-muted); margin-bottom: 1.3rem; }
.auth-footnote { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0 0; font-size: max(0.8rem, 12px); color: var(--moe-text-muted); }
.input-group-text { color: var(--moe-accent-text); }

/* ===== صفحات الحالة ===== */
.status-page { max-width: 560px; margin: 2rem auto; text-align: center; }
.status-page .status-code { display: block; color: var(--moe-gold-text); font-size: 2.6rem; font-weight: 700; line-height: 1; margin-bottom: 0.4rem; }

/* ===== الاستجابة ===== */
@media (max-width: 991.98px) {
  :root { --app-topbar-height: 64px; }
  .app-topbar { padding-inline: 0.85rem; }
  .app-brand-logo { width: 58px; height: 44px; }
  .app-brand-copy small { display: none; }
  .app-sidebar { min-height: 100vh; border-inline-start: 0; }
  .app-main { padding: 1.15rem 0.85rem 1.5rem; }
}
@media (max-width: 767.98px) {
  .btn-sm, .table .btn-sm { min-height: 40px; min-width: 40px; padding-inline: 0.6rem; }
  .nav-tabs .nav-link, .dropdown-item, .page-link { min-height: 40px; }
  .term-chip .term-label { display: none; }
  .bar { grid-template-columns: 110px 1fr 34px; }
}
@media (max-width: 575.98px) {
  .app-topbar { gap: 0.5rem; }
  .app-brand { gap: 0.5rem; }
  .app-brand-logo { width: 48px; height: 38px; }
  .app-brand-copy strong { font-size: 0.92rem; }
  .term-chip { padding-inline: 0.5rem; }
  .user-chip { padding-inline: 0.35rem; gap: 0.25rem; }
  .user-chip > .bi-chevron-down { display: none; }
}

/* ===== الطباعة: نهارية دائمًا ===== */
@media print {
  :root, :root[data-bs-theme="dark"] { --moe-paper: #ffffff; --moe-surface: #ffffff; --moe-text: #102a33; --moe-text-muted: #617179; --moe-border: #dbe4e6; --moe-border-strong: #c8d4d7; --moe-heading: #15445a; }
  .app-topbar, .app-sidebar, .app-footer, .no-print, .skip-link, .app-toasts { display: none !important; }
  .app-main { padding: 0; }
  body, .app-workspace, .tablewrap, .panel, .card { background: #fff !important; box-shadow: none !important; }
}

/* ===== الروابط الجماعية: اختيار النموذج ===== */
.model-pick { position: relative; display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.model-pick input { position: absolute; opacity: 0; pointer-events: none; }
.model-pick .model-info { position: absolute; bottom: 0.45rem; inset-inline-end: 0.45rem; z-index: 1; width: 32px; height: 32px; color: var(--moe-teal-dark); background-color: var(--moe-surface); border: 1px solid var(--moe-border); border-radius: 50%; }
.model-pick .model-info:hover, .model-pick .model-info:focus-visible { color: var(--pick-color, var(--moe-teal)); }
.model-pick small { padding-inline-end: 2.4rem; }
.model-pick strong { color: var(--moe-heading); }
.model-pick small { color: var(--moe-text-muted); font-size: max(0.76rem, 12px); }
.model-pick:hover { border-color: var(--pick-color, var(--moe-teal)); }
.model-pick:has(input:checked) { border-color: var(--pick-color, var(--moe-teal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pick-color, var(--moe-teal)) 22%, transparent); background-color: var(--moe-surface-tint); }
.model-pick:has(input:focus-visible) { outline: 3px solid var(--moe-gold); outline-offset: 1px; }

/* ===== المرجع التنظيمي: بطاقات النماذج ===== */
.model-card { border-top: 4px solid var(--model-color, var(--moe-teal)); display: flex; flex-direction: column; }
.model-dl { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 0.6rem; row-gap: 0; margin: 0; }
.model-dl dt, .model-dl dd { padding-block: 0.45rem; border-top: 1px solid var(--moe-border); }
.model-dl dt:first-of-type, .model-dl dd:first-of-type { border-top: 0; padding-top: 0; }
.model-dl dt { color: var(--moe-text-muted); font-weight: 700; }
.model-dl dd { margin: 0; color: var(--moe-text); }
.model-dl dd ul, .model-dl dd ol { margin-bottom: 0; }
.model-dl ul { padding-inline-start: 1rem; }

/* ===== المستشار: المحادثة ===== */
.chat-log { min-height: 260px; max-height: 420px; overflow-y: auto; padding: 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius-sm); background-color: var(--moe-surface-alt); display: flex; flex-direction: column; gap: 0.5rem; }
.chat-msg { display: flex; }
.chat-msg.is-user { justify-content: flex-start; }
.chat-msg.is-bot { justify-content: flex-end; }
.chat-bubble { max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: max(0.86rem, 12px); line-height: 1.55; }
.chat-msg.is-user .chat-bubble { color: var(--moe-on-accent); background-color: var(--moe-teal-dark); border-end-start-radius: 4px; }
.chat-msg.is-bot .chat-bubble { color: var(--moe-text); background-color: var(--moe-surface); border: 1px solid var(--moe-border); border-end-end-radius: 4px; }

/* ===== إدارة المستخدمين: الأدوار ===== */
.roles-list { display: flex; flex-direction: column; gap: 0.5rem; }
.role-row { display: grid; grid-template-columns: 1fr minmax(12rem, 40%); gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius-sm); background-color: var(--moe-surface); }
.role-row.is-on { border-color: var(--moe-teal); background-color: var(--moe-surface-tint); }
.role-row .role-scope:disabled { opacity: 0.5; }
@media (max-width: 575.98px) { .role-row { grid-template-columns: 1fr; } .model-dl { grid-template-columns: 1fr; } .model-dl dd { border-top: 0; padding-top: 0; } }

/* ===== إسناد خطوات الاعتماد ===== */
.assign-all { padding: 0.75rem 0.9rem; border: 1px dashed var(--moe-teal-soft-border); border-radius: var(--app-radius-sm); background-color: var(--moe-teal-tint); }

/* ===== الطباعة: ترويسة رسمية ===== */
.print-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--moe-navy); }
@media print {
  .app-topbar, .app-sidebar, .app-footer, .page-header-actions, .nav-tabs, .btn, .skip-link, .dt-search, .dt-length, .dt-info, .dt-paging { display: none !important; }
  .app-shell, .app-workspace, .app-main { display: block; margin: 0; padding: 0; }
  .tab-pane { display: block !important; opacity: 1 !important; page-break-inside: avoid; margin-bottom: 1rem; }
  .panel, .tablewrap { box-shadow: none; border-color: #999; }
  body { background: #fff; }
}

/* ===== دليل الاستخدام ===== */
.guide-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.guide-step { display: flex; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--moe-border); border-inline-start: 4px solid var(--moe-gold); border-radius: var(--app-radius); background-color: var(--moe-surface); }
.guide-step.is-done { border-inline-start-color: var(--moe-green); }
.guide-step-num { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--moe-on-accent); background-color: var(--moe-navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-step-body { flex: 1 1 auto; min-width: 0; }
.guide-step-title { margin: 0; color: var(--moe-heading); font-size: 1rem; font-weight: 700; }
.guide-step ul { padding-inline-start: 1.1rem; }
.guide-ol li { margin-bottom: 0.4rem; }

/* ===== إشارات المرجع والنوافذ المنبثقة ===== */
.ref-tip { display: inline; padding: 0 0.15em; border-bottom: 2px dotted var(--moe-teal-dark); border-radius: 3px; color: var(--moe-accent-text-strong); font-weight: 700; cursor: help; white-space: nowrap; }
.ref-tip:hover, .ref-tip:focus-visible { background-color: var(--moe-teal-tint); outline: none; }
.ref-tip:focus-visible { box-shadow: 0 0 0 3px var(--moe-focus-ring-soft); }
.ref-tip-popover { --bs-popover-max-width: 380px; --bs-popover-bg: var(--moe-surface); --bs-popover-border-color: var(--moe-border); --bs-popover-header-bg: var(--moe-navy); --bs-popover-header-color: var(--moe-on-accent); --bs-popover-body-color: var(--moe-text); --bs-popover-font-size: max(0.82rem, 12px); box-shadow: var(--app-shadow); }
.ref-tip-popover .popover-header { font-weight: 700; direction: ltr; text-align: end; }
.ref-tip-popover .popover-body { direction: rtl; text-align: start; }
.ref-tip-kind { margin-bottom: 0.35rem; color: var(--moe-text-muted); font-size: max(0.76rem, 12px); font-weight: 700; }
.ref-tip-text { margin: 0 0 0.4rem; line-height: 1.55; }
.ref-tip-meta { margin-bottom: 0.4rem; }
.ref-tip-list { margin: 0 0 0.4rem; padding-inline-start: 1.1rem; }
.ref-tip-list li { margin-bottom: 0.2rem; }
.ref-tip-src { padding-top: 0.4rem; border-top: 1px dashed var(--moe-border); color: var(--moe-text-muted); font-size: max(0.76rem, 12px); line-height: 1.5; }

/* ===== النص المرجعي الكامل ===== */
.ref-tip-popover { --bs-popover-max-width: 460px; }
.ref-tip-popover .popover-body { max-height: 60vh; overflow-y: auto; }
.ref-tip-full { margin-top: 0.4rem; }
.ref-tip-fulltext { margin-top: 0.25rem; padding: 0.5rem 0.65rem; border-inline-start: 3px solid var(--moe-teal); border-radius: 6px; background-color: var(--moe-surface-alt); color: var(--moe-text); font-size: max(0.8rem, 12px); line-height: 1.7; white-space: normal; }
.ref-tip-list li + li { margin-top: 0.45rem; }
details.ref-text { margin-top: 0.3rem; }
details.ref-text summary { cursor: pointer; color: var(--moe-accent-text); font-size: max(0.78rem, 12px); font-weight: 700; }
details.ref-text summary:hover { text-decoration: underline; }
.ref-text-body { margin-top: 0.35rem; padding: 0.55rem 0.7rem; border-inline-start: 3px solid var(--moe-teal); border-radius: 6px; background-color: var(--moe-surface-alt); font-size: max(0.82rem, 12px); line-height: 1.75; max-width: 70ch; white-space: normal; }

.ref-tip-code { opacity: 0.75; font-weight: 400; font-size: max(0.74rem, 12px); margin-inline-start: 0.4rem; }

/* الحقول الإلزامية: «*» تلقائية بعد تسمية يليها حقل required */
.form-label:has(+ :is(input, select, textarea)[required])::after { content: " *"; color: var(--moe-danger); }

/* عمود «الجهة (RACI)» في المستخدمين: شارات قابلة للتأشير، ودليل قراءتها */
.raci-chip { display: inline-block; cursor: help; border-radius: 999px; }
.raci-chip:focus-visible { outline: 2px solid var(--moe-gold); outline-offset: 1px; }
.raci-legend > summary { cursor: pointer; color: var(--moe-heading); }

/* دليل تسجيل الحالات الفردية: خط زمني للخطوات وبطاقات الحالات */
.guide-timeline { list-style: none; counter-reset: gstep; margin: 0; padding: 0; }
.guide-timeline > li { position: relative; counter-increment: gstep; padding-block: 0 1rem; padding-inline: 1.6rem 0; border-inline-start: 2px solid var(--moe-border); margin-inline-start: 0.9rem; }
.guide-timeline > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.guide-timeline > li::before { content: counter(gstep); position: absolute; inset-inline-start: -0.95rem; top: 0; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background-color: var(--moe-teal-dark); color: var(--moe-on-accent); font-size: max(0.8rem, 12px); font-weight: 700; }
.scenario-card h3 { color: var(--moe-heading); }
.guide-filters { position: sticky; top: 0.5rem; z-index: 5; }

/* الإكمال التلقائي للمدرسة من دليل نور (school-picker.js) */
.school-ac { inset-inline: 0; top: 100%; max-height: 22rem; overflow-y: auto; white-space: normal; }
.school-ac .dropdown-item { white-space: normal; line-height: 1.5; }
.school-ac .dropdown-item.active, .school-ac .dropdown-item:hover { background-color: var(--moe-surface-tint); color: inherit; }

/* أقسام النماذج الطويلة (تبويب «الطالب» في معالج الحالة): مجموعة حقول مترابطة بعنوان */
.form-section { padding: 1rem 1.1rem 1.15rem; margin-bottom: 1rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); }
.form-section-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; color: var(--moe-heading); font-weight: 700; }
.form-subtitle { margin: 1.1rem 0 0.6rem; padding-top: 0.9rem; border-top: 1px dashed var(--moe-border); color: var(--moe-heading); font-size: max(0.88rem, 12px); font-weight: 700; }