/*
  أرشيف معارف — الهوية البصرية.
  منقول من نظام ImprovementTasks (نواة المالك) بالمكوّنات نفسها، مع هوية مختلفة ظاهرًا:
  ترويسة خضراء داكنة مدرّجة بلمسة ذهبية (لوحة النموذج الأولي القديم: أخضر #0b684a وذهبي #c69337)
  بدل الكحلي. توكنز الوزارة --moe-* باقية للسطوح والحالات، وتوكنز --brand-* للترويسة والأزرار الأساسية.
  القواعد: لا لون حرفي خارج :root؛ الوضع الليلي طبقة واحدة تغيّر السطوح لا ألوان الهوية؛ لا Emoji.
*/

@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-gold-deep: #a69663; --moe-gray: #c2c1c1; --moe-purple: #351375; --moe-danger: #b33a3a;

  --moe-paper: #f4f8f8; --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-gold-tint: #f6f2e6;
  --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-danger-bg: #f7e8e8; --moe-danger-text: #8a2b2b; --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-border: #b6e3cd;
  --moe-info-bg: #e7f4f8; --moe-info-text: #1b5c72; --moe-info-text-strong: #17657d; --moe-info-border: #bce0ea;
  --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-white-veil: rgba(255, 255, 255, 0.12); --moe-white-veil-strong: rgba(255, 255, 255, 0.22);
  --moe-heading: #15445a; --moe-heading-strong: #103747; --moe-accent-text: #087f7d; --moe-accent-text-strong: #066462; --moe-positive-text: #087348; --moe-gold-text: #a69663; --moe-teal-text: #087f7d;

  --app-header-height: 64px; --app-nav-height: 48px; --app-radius: 16px; --app-radius-sm: 10px; --app-radius-pill: 999px;
  --app-shadow: 0 10px 30px rgba(16, 42, 51, 0.07); --app-shadow-soft: 0 2px 10px rgba(16, 42, 51, 0.05);

  /* هوية أرشيف معارف: أخضر داكن وذهبي */
  --brand: #0b684a; --brand-deep: #074a36; --brand-darkest: #053626; --brand-tint: #e5f1eb; --brand-on-dark: #cfe8db; --brand-gold: #c69337; --brand-gold-soft: #f3e7cc;

  --bs-primary: var(--brand); --bs-primary-rgb: 11, 104, 74; --bs-link-color: #0a6b8a; --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: #0c2029; --moe-surface: #13303b; --moe-surface-alt: #183844; --moe-surface-tint: #122e37; --moe-surface-tint-teal: #103a3a;
  --moe-text: #e8f0f2; --moe-text-muted: #a8bcc3; --moe-border: #244550; --moe-border-strong: #335a66;
  --moe-navy-tint: #17323f; --moe-teal-tint: #103a3a; --moe-gold-tint: #2e2a1c; --brand-tint: #15342a; --brand-gold-soft: #3a3020;
  --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-danger-bg: #3a1e1e; --moe-danger-text: #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-border: #245c46;
  --moe-info-bg: #12303c; --moe-info-text: #9ed3e6; --moe-info-text-strong: #9ed3e6; --moe-info-border: #2a5c70;
  --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 10px 30px rgba(0, 0, 0, 0.35); --app-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.3);
  --bs-secondary-color: #b3c4ca; --bs-tertiary-bg: #183844; --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; }
.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(--brand); font-weight: 700; text-decoration: none; }
.skip-link:focus-visible { inset-block-start: 0; color: var(--moe-on-accent); }

/* ===== مواءمة Bootstrap ===== */
.btn { min-height: 40px; border-radius: var(--app-radius-pill); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding-inline: 1.1rem; }
.btn-sm { min-height: 34px; padding-inline: 0.85rem; }
.btn-primary { --bs-btn-color: var(--moe-on-accent); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-color: var(--moe-on-accent); --bs-btn-hover-bg: var(--moe-teal-dark); --bs-btn-hover-border-color: var(--moe-teal-dark); --bs-btn-active-color: var(--moe-on-accent); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); --bs-btn-disabled-color: var(--moe-on-accent); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--moe-heading); --bs-btn-border-color: var(--moe-border-strong); --bs-btn-bg: var(--moe-surface); --bs-btn-hover-color: var(--moe-on-accent); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-color: var(--moe-on-accent); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); }
.btn-outline-secondary { --bs-btn-color: var(--moe-text-muted); --bs-btn-border-color: var(--moe-border-strong); --bs-btn-bg: var(--moe-surface); --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-outline-secondary.active { background-color: var(--brand-tint); color: var(--moe-heading); border-color: var(--moe-border-strong); }
.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-success { --bs-btn-color: var(--moe-positive-text); --bs-btn-border-color: var(--moe-success-border); --bs-btn-hover-bg: var(--moe-green); --bs-btn-hover-border-color: var(--moe-green); }
.btn-outline-warning { --bs-btn-color: var(--moe-warning-text-strong); --bs-btn-border-color: var(--moe-warning-border-strong); --bs-btn-hover-bg: var(--moe-gold); --bs-btn-hover-border-color: var(--moe-gold); --bs-btn-hover-color: var(--brand); }
.btn-link { color: var(--bs-link-color); }
.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-label:has(+ :required)::after, .form-label:has(+ .input-group :required)::after { content: " *"; color: var(--moe-danger-accent); }
.form-text { color: var(--moe-text-muted); font-size: max(0.78rem, 12px); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-range::-webkit-slider-thumb { background: var(--brand); } .form-range::-moz-range-thumb { background: var(--brand); }
.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); gap: 0.25rem; }
.nav-tabs .nav-link { font-weight: 700; border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0; }
.nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--moe-gold); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color: var(--moe-on-accent); --bs-nav-link-color: var(--moe-heading); }
.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-danger { --bs-alert-bg: var(--moe-danger-bg); --bs-alert-color: var(--moe-danger-text); --bs-alert-border-color: var(--moe-danger-border); }
.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); }
.modal-content { border-radius: var(--app-radius); border: 1px solid var(--moe-border); background-color: var(--moe-surface); color: var(--moe-text); }
.modal-header { border-bottom-color: var(--moe-border); } .modal-footer { border-top-color: var(--moe-border); }
.modal-title { color: var(--moe-heading); display: flex; align-items: center; gap: 0.4rem; }
.progress { background-color: var(--moe-neutral-bg-strong); } .progress-bar { background-color: var(--brand); }
.border, .border-bottom, .border-top { border-color: var(--moe-border) !important; }
.table-light > *, .table-light { --bs-table-bg: var(--moe-surface-alt); --bs-table-color: var(--moe-text); }
.table-active > * { --bs-table-bg: var(--moe-gold-tint); }
.table-warning > * { --bs-table-bg: var(--moe-warning-bg); --bs-table-color: var(--moe-warning-text-strong); }
details > summary { cursor: pointer; }
.page-link { color: var(--moe-heading); border-color: var(--moe-border); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }

/* ===== الترويسة الكحلية والقائمة الأفقية ===== */
.app-header { position: sticky; top: 0; z-index: 1040; background: linear-gradient(135deg, var(--brand-darkest), var(--brand) 55%, var(--brand-deep)); color: var(--moe-on-accent); box-shadow: 0 6px 24px rgba(5, 54, 38, 0.28); border-bottom: 3px solid var(--brand-gold); }
.app-header-top { height: var(--app-header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.app-brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--moe-on-accent); min-width: 0; }
.app-brand-logo { height: 42px; width: auto; max-width: 150px; object-fit: contain; background: var(--moe-on-accent); border-radius: 10px; padding: 4px 8px; }
.app-brand-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.app-brand-copy strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-brand-copy small { color: var(--brand-on-dark); font-size: max(0.76rem, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header-actions { display: flex; align-items: center; gap: 0.6rem; }
.plan-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: var(--app-radius-pill); border: 1px solid var(--brand-gold); color: var(--moe-on-accent); background: var(--moe-white-veil); text-decoration: none; font-size: max(0.82rem, 12px); max-width: 24rem; }
.plan-chip strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-chip i { color: var(--brand-gold); } .plan-chip .plan-label { color: var(--brand-on-dark); }
.plan-chip:hover { background: var(--moe-white-veil-strong); color: var(--moe-on-accent); }
.plan-chip.is-warning { border-color: var(--moe-danger-accent); } .plan-chip.is-warning i { color: var(--moe-danger-accent); }
.header-action { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--moe-white-veil-strong); background: var(--moe-white-veil); color: var(--moe-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.header-action:hover { background: var(--moe-white-veil-strong); color: var(--moe-on-accent); }
.header-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-gold); color: var(--brand-darkest); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.75rem 0.25rem 0.35rem; border-radius: var(--app-radius-pill); border: 1px solid var(--moe-white-veil-strong); background: var(--moe-white-veil); color: var(--moe-on-accent); }
.user-chip .user-role { color: var(--brand-on-dark); font-size: max(0.72rem, 12px); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gold); color: var(--brand-darkest); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.user-name-wrap strong { font-size: max(0.86rem, 12px); }

.app-nav { border-top: 1px solid var(--moe-white-veil); padding-inline: clamp(1rem, 3vw, 2.5rem); }
/* بلا overflow على القائمة: كان يقصّ القوائم المنسدلة. القوائم المنسدلة ثابتة الموضع (data-bs-display="static") لا Popper */
.app-nav-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.app-nav .dropdown-menu[data-bs-popper] { margin-top: 0; z-index: 1050; }
.nav-toggle .bi-x-lg, .nav-toggle[aria-expanded="true"] .bi-list { display: none; } .nav-toggle[aria-expanded="true"] .bi-x-lg { display: inline-block; }
@media (min-width: 992px) { .app-nav.collapse { display: block; } .nav-toggle { display: none; } }
.app-nav-list > .nav-item { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.app-nav .nav-link { display: inline-flex; align-items: center; gap: 0.45rem; height: var(--app-nav-height); padding: 0 0.9rem; color: var(--brand-on-dark); font-weight: 700; font-size: max(0.9rem, 12px); white-space: nowrap; border-bottom: 3px solid transparent; border-radius: 0; }
.app-nav .nav-link .bi { font-size: 1.05rem; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus-visible { color: var(--moe-on-accent); background: var(--moe-white-veil); }
.app-nav .nav-link.active { color: var(--moe-on-accent); border-bottom-color: var(--brand-gold); }
.app-nav .nav-link.dropdown-toggle::after { margin-inline-start: 0.4rem; }
.app-nav .nav-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-gold); color: var(--brand-darkest); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app-nav-list > .nav-item > .nav-fav { position: absolute; top: 4px; inset-inline-end: 2px; width: 18px; height: 18px; border: 0; background: transparent; color: var(--brand-gold); opacity: 0; font-size: 11px; padding: 0; line-height: 1; }
.app-nav-list > .nav-item:hover > .nav-fav, .app-nav-list > .nav-item > .nav-fav.is-on, .app-nav-list > .nav-item > .nav-fav:focus-visible { opacity: 1; }
.nav-menu { min-width: 16rem; padding: 0.4rem; }
.nav-menu .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; list-style: none; }
.nav-menu .nav-link { display: flex; align-items: center; gap: 0.55rem; flex: 1; height: auto; min-height: 40px; padding: 0.4rem 0.75rem; border: 0; border-radius: var(--app-radius-sm); color: var(--moe-text); font-weight: 600; font-size: max(0.88rem, 12px); }
.nav-menu .nav-link .bi { color: var(--moe-teal-dark); }
.nav-menu .nav-link:hover, .nav-menu .nav-link:focus-visible { background: var(--moe-surface-alt); color: var(--moe-heading); }
.nav-menu .nav-link.active { background: var(--brand-tint); color: var(--moe-heading); border-bottom: 0; }
.nav-menu .nav-fav { border: 0; background: transparent; color: var(--moe-muted-cool); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.nav-menu .nav-fav.is-on { color: var(--moe-gold-text); } .nav-menu .nav-fav:hover { background: var(--moe-surface-alt); color: var(--moe-gold-text); }
.nav-menu .nav-badge { margin-inline-start: auto; }
.nav-menu li[draggable="true"] { cursor: grab; } .nav-menu li.is-dragging { opacity: 0.5; }

/* ===== ضابط الوضع وحجم الخط ===== */
.display-prefs { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 0.4rem; }
.display-prefs-group { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.display-prefs-label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--moe-text-muted); font-size: max(0.8rem, 12px); }
.display-prefs-options { display: inline-flex; gap: 0.25rem; padding: 2px; border-radius: var(--app-radius-pill); background: var(--moe-neutral-bg); }
.display-prefs-options button { border: 0; background: transparent; color: var(--moe-text-muted); border-radius: var(--app-radius-pill); padding: 0.2rem 0.6rem; font-size: max(0.78rem, 12px); display: inline-flex; align-items: center; gap: 0.3rem; min-height: 30px; }
.display-prefs-options button[aria-checked="true"] { background: var(--brand); color: var(--moe-on-accent); }

/* ===== مساحة العمل ===== */
.app-main { width: min(1440px, 100%); margin-inline: auto; padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2.5rem; }
.app-footer { margin-top: 1rem; padding: 0.9rem clamp(1rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--moe-text-muted); font-size: max(0.78rem, 12px); border-top: 1px solid var(--moe-border); }
.app-footer .footer-gold { color: var(--moe-gold-text); font-weight: 700; }
.app-footer .footer-dev { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .35rem; }
.app-footer .footer-dev b { color: var(--moe-heading); font-weight: 700; }
.app-footer .footer-dev .bi { color: var(--moe-teal-dark); }
.app-footer .footer-sep { color: var(--moe-border-strong); }

/* ===== ترويسة الصفحة: شريط بخلفية مدرّجة وعنوان بخط ذهبي ===== */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding: 1.1rem 1.35rem; border-radius: var(--app-radius); background: linear-gradient(120deg, var(--moe-surface) 55%, var(--brand-tint)); border: 1px solid var(--moe-border); }
.page-header-text { min-width: 0; flex: 1 1 24rem; }
.page-title { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 700; color: var(--moe-heading); position: relative; padding-bottom: 0.5rem; }
.page-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-gold), var(--brand)); }
.page-title-sub { font-weight: 400; color: var(--moe-text-muted); font-size: 0.75em; }
.page-context { margin: 0.55rem 0 0; color: var(--moe-text-muted); font-size: max(0.88rem, 12px); max-width: 70ch; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.page-back { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; color: var(--moe-accent-text); font-size: max(0.82rem, 12px); text-decoration: none; font-weight: 700; }
.page-back:hover { text-decoration: underline; color: var(--moe-accent-text-strong); }

/* ===== اللوحات ===== */
.panel { position: relative; padding: 1.15rem 1.25rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); color: var(--moe-text); box-shadow: var(--app-shadow-soft); }
.panel h3 { display: flex; justify-content: flex-start; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; color: var(--moe-heading); font-size: 1rem; font-weight: 700; }
.panel h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--moe-gold); flex-shrink: 0; transform: rotate(45deg); }
.panel h3 > span:first-of-type { flex: 1; display: inline-flex; align-items: center; gap: 0.4rem; }
.panel h3 small { color: var(--moe-text-muted); font-size: max(0.78rem, 12px); font-weight: 400; margin-inline-start: auto; }
.panel h3 .bi { color: var(--moe-teal-dark); }
.card { border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); }

/* ===== بلاطات المؤشرات: أفقية بدائرة ملونة ===== */
.kpi-card { --tone: var(--moe-teal-dark); --tone-bg: var(--moe-teal-tint); position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "icon head" "icon value" "icon hint" "icon more"; column-gap: 0.85rem; align-items: start; height: 100%; padding: 0.95rem 1rem; border-radius: var(--app-radius); border: 1px solid var(--moe-border); background: var(--moe-surface); color: var(--moe-text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.kpi-card.tone-brand { --tone: var(--moe-teal-dark); --tone-bg: var(--moe-teal-tint); }
.kpi-card.tone-neutral { --tone: var(--moe-neutral-text); --tone-bg: var(--moe-neutral-bg); }
.kpi-card.tone-info { --tone: var(--moe-blue); --tone-bg: var(--moe-info-bg); }
.kpi-card.tone-success { --tone: var(--moe-green-dark); --tone-bg: var(--moe-success-bg); }
.kpi-card.tone-warning { --tone: var(--moe-warning-icon); --tone-bg: var(--moe-warning-bg); }
.kpi-card.tone-danger { --tone: var(--moe-danger-accent); --tone-bg: var(--moe-danger-bg); }
button.kpi-card { width: 100%; text-align: start; font: inherit; cursor: pointer; }
.kpi-card.is-filter.is-active { border-color: var(--tone); box-shadow: inset 0 0 0 2px var(--tone); }
.kpi-card.is-link:hover { transform: translateY(-2px); box-shadow: var(--app-shadow); border-color: var(--tone); color: var(--moe-text); }
.kpi-card-top { display: none; }
.kpi-card-head { grid-area: head; display: contents; }
.kpi-card-icon { grid-area: icon; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-bg); color: var(--tone); font-size: 1.35rem; }
.kpi-card-title { grid-area: head; margin: 0; font-size: max(0.82rem, 12px); font-weight: 700; color: var(--moe-text-muted); }
.kpi-card-value { grid-area: value; font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--moe-heading-strong); font-variant-numeric: tabular-nums; }
.kpi-card-hint { grid-area: hint; color: var(--moe-text-muted); font-size: max(0.76rem, 12px); }
.kpi-card-more { grid-area: more; margin-top: 0.3rem; color: var(--tone); font-size: max(0.76rem, 12px); font-weight: 700; display: inline-flex; align-items: center; gap: 0.25rem; }
.kpi-pct { color: var(--tone); }
.kpi-pct .kpi-progress { grid-area: more; }

/* ===== «يتطلب انتباهًا» ===== */
.decision-queue { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.decision-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: var(--app-radius); border: 1px solid var(--moe-warning-border-strong); background: var(--moe-warning-bg); }
.decision-item.is-critical { border-color: var(--moe-danger-border-strong); background: var(--moe-danger-bg); }
.decision-count { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; background: var(--moe-surface); color: var(--moe-warning-text-strong); font-variant-numeric: tabular-nums; }
.decision-item.is-critical .decision-count { color: var(--moe-danger-text); }
.decision-body { display: flex; flex-direction: column; min-width: 0; } .decision-body strong { color: var(--moe-text); } .decision-body small { color: var(--moe-text-muted); }

/* ===== الحالات الفارغة والشارات ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; color: var(--moe-text-muted); }
.empty-state > .bi { font-size: 2.2rem; color: var(--moe-muted-cool-soft); }
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.5rem; border-radius: var(--app-radius-pill); font-size: max(0.76rem, 12px); font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-neutral { background: var(--moe-neutral-bg); color: var(--moe-neutral-text); border-color: var(--moe-neutral-border); }
.status-info { background: var(--moe-info-bg); color: var(--moe-info-text); border-color: var(--moe-info-border); }
.status-success { background: var(--moe-success-bg); color: var(--moe-success-text); border-color: var(--moe-success-border); }
.status-warning { background: var(--moe-warning-bg); color: var(--moe-warning-text-strong); border-color: var(--moe-warning-border-strong); }
.status-danger { background: var(--moe-danger-bg); color: var(--moe-danger-text); border-color: var(--moe-danger-border); }
.status-brand { background: var(--moe-teal-tint); color: var(--moe-accent-text-strong); border-color: var(--moe-teal-soft-border); }

/* ===== الجداول: رأس فاتح بنص كحلي وصفوف متعاقبة ===== */
.tablewrap { overflow: hidden; padding: 0.5rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); }
.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::-webkit-scrollbar, .tablewrap .dt-layout-table > .dt-layout-full::-webkit-scrollbar { height: 10px; }
.tablewrap::-webkit-scrollbar-thumb, .tablewrap .dt-layout-table > .dt-layout-full::-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-teal-tint); --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.7rem; color: var(--moe-heading); background-color: var(--brand-tint); border-bottom: 2px solid var(--moe-teal-soft-border) !important; font-weight: 700; text-align: start; vertical-align: middle; white-space: nowrap; font-size: max(0.8rem, 12px); }
.table > thead > tr > th:first-child { border-start-start-radius: var(--app-radius-sm); } .table > thead > tr > th:last-child { border-start-end-radius: var(--app-radius-sm); }
.table > tbody > tr:nth-child(even) > td { background-color: var(--moe-surface-tint); }
.table > tbody > tr > td { padding-block: 0.65rem; 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 > tfoot > tr > th { background-color: var(--moe-gold-tint); color: var(--moe-heading); border-top: 2px solid var(--moe-gold); }
.table td a:not(.btn) { text-decoration: none; color: var(--bs-link-color); font-weight: 600; }
.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; }
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th { text-align: start !important; background-color: var(--brand-tint) !important; color: var(--moe-heading) !important; }
table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td { padding-inline: 0.5rem !important; }
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-dark); }
table.dataTable tbody tr:hover > * { box-shadow: none; }
div.dt-container .dt-input, div.dt-container .dt-length select { min-height: 36px; border-radius: var(--app-radius-sm); }
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(--brand) !important; color: var(--moe-on-accent) !important; border-color: var(--brand) !important; }

/* ===== الرسائل العابرة ===== */
.app-toasts { position: fixed; inset-block-end: 1rem; inset-inline-start: 0.75rem; z-index: 1090; }
.toast-success { border: 1px solid var(--moe-success-border); background-color: var(--moe-success-bg); border-radius: var(--app-radius-sm); }
.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; }
.notif-menu { min-width: 340px; max-width: 92vw; }
.notif-menu-item { display: flex; gap: 0.6rem; align-items: flex-start; white-space: normal; padding-block: 0.55rem; }
.notif-menu-item .notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 0.45rem; background: transparent; flex-shrink: 0; }
.notif-menu-item.is-unread .notif-dot { background: var(--moe-teal); }
.notif-menu-item b { font-size: max(0.84rem, 12px); }

/* ===== Select2 ===== */
.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(--brand); 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); }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: var(--brand-tint); border-color: var(--moe-border-strong); color: var(--moe-heading); }

/* ===== الأشرطة والصفوف الإحصائية ===== */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 150px 1fr auto; 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: 14px; background-color: var(--moe-neutral-bg); border-radius: 999px; overflow: hidden; }
.bar .bf { height: 100%; border-radius: 999px; background: var(--brand); }
.bar .bv { font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; min-width: 3rem; }
.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; }

/* ===== الأدوار والصلاحيات ===== */
.screen-matrix td { vertical-align: top; }
.screen-matrix td .bi { margin-inline-end: 0.35rem; color: var(--moe-teal-dark); }
.perm-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.3rem 0.3rem; padding: 0.25rem 0.6rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius-pill); background-color: var(--moe-surface); color: var(--moe-text-muted); font-size: max(0.78rem, 12px); line-height: 1.3; text-align: start; cursor: pointer; }
.perm-chip .bi { margin: 0; color: inherit; }
.perm-chip.is-on { border-color: var(--brand); color: var(--moe-heading); background-color: var(--brand-tint); }
.perm-chip.is-changed { box-shadow: 0 0 0 2px var(--moe-gold); }
.perm-chip:focus-visible { outline: 2px solid var(--moe-gold); outline-offset: 1px; }
.perm-chip .chip-state::before { font-family: "bootstrap-icons"; content: "\f28a"; font-size: 0.85em; }
.perm-chip.is-on .chip-state::before { content: "\f26a"; color: var(--moe-teal-dark); }
.perm-chip.is-allow .chip-state::before { content: "\f4fa"; } .perm-chip.is-deny .chip-state::before { content: "\f55e"; }
.perm-chip.is-entry { font-weight: 600; }
.save-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; position: sticky; bottom: 0; z-index: 6; margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background-color: var(--moe-surface); box-shadow: var(--app-shadow); }
.save-bar-status.text-warning { color: var(--moe-warning-text-strong) !important; }
.role-nav { position: sticky; top: calc(var(--app-header-height) + var(--app-nav-height) + 0.75rem); }
.role-link { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius-sm); color: var(--moe-text); }
.role-link small { color: var(--moe-text-muted); font-size: max(0.72rem, 12px); }
.role-link.active { background-color: var(--brand); border-color: var(--brand); color: var(--moe-on-accent); } .role-link.active small { color: var(--brand-on-dark); }
@media (max-width: 991.98px) { .role-nav { position: static; } .role-nav .nav { flex-direction: row !important; flex-wrap: wrap; } }
.is-target { outline: 3px solid var(--moe-gold); outline-offset: 2px; border-radius: var(--app-radius-sm); }

/* ===== سجل التدقيق ===== */
.audit-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.audit-cats a { padding: 0.3rem 0.85rem; border-radius: var(--app-radius-pill); border: 1px solid var(--moe-border); background: var(--moe-surface); color: var(--moe-text-muted); text-decoration: none; font-size: max(0.82rem, 12px); font-weight: 700; }
.audit-cats a.is-active, .audit-cats a:hover { background: var(--brand); border-color: var(--brand); color: var(--moe-on-accent); }
.audit-table del { color: var(--moe-danger-text); }
.audit-details summary { cursor: pointer; color: var(--moe-heading); }
.audit-details tr.is-changed td { background: var(--moe-warning-bg); }

/* ===== صفحات الحالة والدخول ===== */
.status-page { text-align: center; padding: 3rem 1.5rem; max-width: 520px; margin: 3rem auto; }
.status-code { display: block; font-size: 4rem; font-weight: 700; color: var(--moe-gold); line-height: 1; margin-bottom: 0.5rem; }
.auth-body { min-height: 100vh; margin: 0; 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; }
:root[data-bs-theme="dark"] .auth-brand img { background: var(--moe-on-accent); border-radius: 10px; padding: 3px; }
.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: 0 0 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); }
.auth-footnote .bi { color: var(--moe-teal-dark); }

/* ===== الاستجابة ===== */
/* القائمة في الجوال والشاشات المتوسطة: زر «القائمة» يفتح لوحة عمودية، والقوائم المنسدلة تتفتح داخلها */
@media (max-width: 991.98px) {
  .app-nav { padding-block: 0.5rem 0.75rem; max-height: calc(100dvh - var(--app-header-height)); overflow-y: auto; overscroll-behavior: contain; }
  .app-nav-list { flex-direction: column; flex-wrap: nowrap; gap: 0.2rem; }
  .app-nav-list > .nav-item { display: block; }
  .app-nav .nav-link { display: flex; width: 100%; height: auto; min-height: 46px; padding: 0.55rem 0.85rem; padding-inline-end: 3rem; border-bottom: 0; border-inline-start: 3px solid transparent; border-radius: var(--app-radius-sm); white-space: normal; }
  .app-nav .nav-link.active { border-inline-start-color: var(--moe-gold); background: var(--moe-white-veil); }
  .app-nav .nav-link.dropdown-toggle::after { margin-inline-start: auto; }
  .app-nav-list > .nav-item > .nav-fav { top: 50%; transform: translateY(-50%); inset-inline-end: 0.35rem; width: 40px; height: 40px; font-size: 15px; opacity: 0.55; color: var(--brand-on-dark); }
  .app-nav-list > .nav-item > .nav-fav.is-on { opacity: 1; color: var(--moe-gold); }
  .app-nav .dropdown-menu, .app-nav .dropdown-menu[data-bs-popper] { position: static; float: none; min-width: 0; margin: 0.2rem 0 0.4rem; padding: 0.25rem; padding-inline-start: 1rem; border: 0; box-shadow: none; background: transparent; }
  .nav-menu .nav-link { min-height: 44px; color: var(--brand-on-dark); }
  .nav-menu .nav-link .bi { color: var(--brand-on-dark); }
  .nav-menu .nav-link:hover, .nav-menu .nav-link:focus-visible { background: var(--moe-white-veil); color: var(--moe-on-accent); }
  .nav-menu .nav-link.active { background: var(--moe-white-veil-strong); color: var(--moe-on-accent); }
  .nav-menu .nav-fav { width: 40px; height: 40px; color: var(--brand-on-dark); opacity: 0.7; }
  .nav-menu .nav-fav.is-on { color: var(--moe-gold); opacity: 1; } .nav-menu .nav-fav:hover { background: var(--moe-white-veil); color: var(--moe-gold); }
}
@media (max-width: 767.98px) {
  .app-brand-copy small { display: none; }
  .app-brand-logo { height: 36px; }
  .page-header { padding: 0.9rem 1rem; }
  .page-header-actions .btn { flex: 1 1 auto; }
  .nav-tabs .nav-link, .dropdown-item, .page-link { min-height: 40px; }
  .bar { grid-template-columns: 110px 1fr auto; }
  .kpi-card { grid-template-columns: 44px 1fr; } .kpi-card-icon { width: 44px; height: 44px; font-size: 1.15rem; } .kpi-card-value { font-size: 1.45rem; }
  .panel { padding: 0.9rem 1rem; }
}
@media (max-width: 575.98px) {
  .app-header-top { gap: 0.5rem; }
  .plan-chip { max-width: 10rem; } .plan-chip .plan-label { display: none; }
  .decision-item { grid-template-columns: 40px 1fr; } .decision-item .btn { grid-column: 1 / -1; }
}

/* ===== منتقي التاريخ (datepicker.js) ===== */
.dp-field { position: relative; }
.dp-field > .form-control { padding-inline-end: 2.6rem; text-align: right; cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-field > .form-control::placeholder { text-align: right; }
.dp-toggle { position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.5rem; border: 0; background: transparent; color: var(--moe-teal-dark); display: inline-flex; align-items: center; justify-content: center; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
[dir="rtl"] .dp-toggle { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); }
.dp-toggle:hover, .dp-field.is-open .dp-toggle { color: var(--moe-heading); background: var(--moe-surface-alt); }
.dp-field.is-open > .form-control { border-color: var(--moe-teal); box-shadow: 0 0 0 0.2rem var(--moe-teal-tint); }

.dp-pop { position: fixed; z-index: 1090; width: 316px; padding: 0.75rem; border: 1px solid var(--moe-border); border-radius: var(--app-radius); background: var(--moe-surface); color: var(--moe-text); box-shadow: 0 18px 48px rgba(14, 48, 62, 0.22); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.dp-pop.is-open { opacity: 1; transform: none; }
.dp-backdrop { display: none; }
.dp-sheet-head { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.5rem; }
.dp-title { display: flex; gap: 0.25rem; flex: 1; justify-content: center; }
.dp-title-btn { border: 0; background: transparent; color: var(--moe-heading); font-weight: 700; font-size: 1rem; padding: 0.3rem 0.6rem; border-radius: var(--app-radius-sm); font-variant-numeric: tabular-nums; }
.dp-title-btn:hover, .dp-title-btn:focus-visible { background: var(--brand-tint); }
.dp-title-btn::after { content: ""; display: inline-block; margin-inline-start: 0.3rem; border-top: 0.32em solid; border-inline: 0.28em solid transparent; vertical-align: 0.15em; opacity: .55; }
.dp-nav { width: 36px; height: 36px; border: 1px solid var(--moe-border); border-radius: 50%; background: var(--moe-surface); color: var(--moe-heading); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dp-nav:hover, .dp-nav:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--moe-on-accent); }

.dp-body.dp-days { display: flex; flex-direction: column; gap: 2px; }
.dp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: max(0.72rem, 11px); font-weight: 700; color: var(--moe-text-muted); padding-block: 0.25rem; }
.dp-wd.is-weekend { color: var(--moe-gold-text); }
.dp-day { aspect-ratio: 1; min-height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--moe-text); font-variant-numeric: tabular-nums; font-size: max(0.9rem, 12px); position: relative; }
.dp-day.is-weekend { color: var(--moe-gold-text); }
.dp-day.is-other { color: var(--moe-muted-cool); opacity: .6; }
.dp-day:hover:not(:disabled) { background: var(--brand-tint); color: var(--moe-heading); }
.dp-day.is-today { box-shadow: inset 0 0 0 2px var(--moe-teal); font-weight: 700; }
.dp-day.is-selected, .dp-day.is-selected:hover { background: var(--brand); color: var(--moe-on-accent); font-weight: 700; opacity: 1; }
.dp-day:disabled, .dp-cell:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.dp-day:focus-visible, .dp-cell:focus-visible, .dp-nav:focus-visible, .dp-title-btn:focus-visible { outline: 2px solid var(--moe-gold); outline-offset: 1px; }

.dp-body.dp-months, .dp-body.dp-years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding-block: 0.25rem; }
.dp-cell { min-height: 48px; border: 1px solid var(--moe-border); border-radius: var(--app-radius-sm); background: var(--moe-surface); color: var(--moe-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-cell:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--moe-border-strong); color: var(--moe-heading); }
.dp-cell.is-today { border-color: var(--moe-teal); }
.dp-cell.is-selected, .dp-cell.is-selected:hover { background: var(--brand); border-color: var(--brand); color: var(--moe-on-accent); }

.dp-hijri { min-height: 1.4em; margin-top: 0.5rem; text-align: center; color: var(--moe-teal-dark); font-size: max(0.8rem, 12px); font-weight: 600; }
.dp-hijri:empty { display: none; }
.dp-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--moe-border); }
.dp-foot .dp-done { display: none; margin-inline-start: auto; }

/* الجوال: لوحة سفلية بأهداف لمس كبيرة */
@media (max-width: 575.98px) {
  .dp-backdrop.is-sheet { display: block; position: fixed; inset: 0; z-index: 1089; background: rgba(14, 48, 62, 0.45); opacity: 0; transition: opacity .2s; }
  .dp-backdrop.is-sheet.is-open { opacity: 1; }
  .dp-pop.is-sheet { inset: auto 0 0 0; width: auto; max-height: 92dvh; overflow-y: auto; padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(100%); transition: transform .22s ease-out; opacity: 1; }
  .dp-pop.is-sheet.is-open { transform: none; }
  .dp-pop.is-sheet .dp-sheet-head { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
  .dp-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--moe-border-strong); }
  .dp-label { color: var(--moe-heading); font-size: 1rem; }
  .dp-pop.is-sheet .dp-day { min-height: 44px; font-size: 1rem; }
  .dp-pop.is-sheet .dp-nav { width: 44px; height: 44px; }
  .dp-pop.is-sheet .dp-title-btn { font-size: 1.1rem; padding: 0.45rem 0.8rem; }
  .dp-pop.is-sheet .dp-cell { min-height: 56px; font-size: 1rem; }
  .dp-pop.is-sheet .dp-foot .btn { min-height: 44px; padding-inline: 1rem; }
  .dp-pop.is-sheet .dp-foot .dp-done { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .dp-pop, .dp-backdrop.is-sheet { transition: none; } }

/* ===== الطباعة ===== */
@media print {
  .app-header, .app-footer, .page-header-actions, .nav-tabs, .btn, .skip-link, .dt-search, .dt-length, .dt-info, .dt-paging, .save-bar, .app-toasts, .dp-toggle, .dp-pop, .dp-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  .page-header, .panel, .tablewrap { border: 0; box-shadow: none; padding: 0; background: #fff; }
}

/* الجوال: ملاحظة عنوان البطاقة (small) تنزل تحت العنوان بدل أن تضغطه */
@media (max-width: 575.98px) { .panel h3 { flex-wrap: wrap; } .panel h3 small { flex-basis: 100%; margin-inline-start: 0; } }

/* ===== التخطيط الرئيسي: الفوتر ملتصق بأسفل النافذة في الصفحات القصيرة، ومحاذٍ لعرض المحتوى ===== */
.app-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app-body > .app-main { flex: 1 0 auto; width: min(1440px, 100%); }
.app-body > .app-footer { flex-shrink: 0; margin-top: 0; padding-block: 1rem; padding-inline: max(clamp(1rem, 3vw, 2.5rem), calc((100% - 1440px) / 2 + clamp(1rem, 3vw, 2.5rem))); background: var(--moe-surface); align-items: center; }
@media (max-width: 575.98px) { .app-body > .app-footer { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; } .app-footer .footer-dev { order: 3; margin-top: .25rem; } }
@media print { .app-body { display: block; min-height: 0; } }