/* ============================================================
   مُتقِن — السمة البصرية (theme.css)
   هوية: أخضر زمردي + ذهبي + عاجي · خطوط Amiri/Cairo · RTL
   تتعايش مع Bootstrap 5 RTL عبر بادئة mq- لتفادي التعارض.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    --emerald:#04532F;  --emerald-dark:#04361F;  --jade:#006850;
    --gold:#D4AF37;     --gold-deep:#9A7A1E;
    --ivory:#FBF7DA;    --ivory-soft:#FBF9EE;     --paper:#EAE6D4;
    --surface:#FFFFFF;  --text:#3D6B52;           --muted:#7A8F82; --faint:#9DB3A6;
    --c-success:#04532F;--c-danger:#B23A48; --c-warning:#9A7A1E; --c-info:#2A6F8E;
    --c-orange:#C57B2C; --c-secondary:#6B7C72;
    --radius:16px; --radius-sm:12px; --radius-pill:40px;
    --shadow:0 8px 24px -18px rgba(4,54,31,.4);
    --font-display:'Amiri',serif; --font-body:'Cairo',sans-serif;
    --line:rgba(212,175,55,.3); --hair:rgba(4,54,31,.08);

    /* مواءمة لون Bootstrap الأساسي مع الهوية */
    --bs-primary:#04532F; --bs-primary-rgb:4,83,47;
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font-body); background:var(--paper); color:var(--emerald-dark); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.mq-display { font-family:var(--font-display); font-weight:700; color:var(--emerald-dark); }
a { text-decoration:none; }
::selection { background:var(--gold); color:var(--emerald-dark); }

/* ============================================================
   منظومة الأزرار — مستوردة من مشروع التصميم «منظومة أزرار مُتقن»
   (claude.ai/design) — 5 أنواع × 6 حالات × 3 مقاسات.
   مواءمتان عن الأصل: مقاس md مدمج في الأساس (أي زر بلا مقاس = متوسط)،
   و.mq-btn--block إضافة محلية. الحالات المفروضة (.is-hover..) للكتالوج
   فقط ولم تُنقل — الحالات الحقيقية عبر pseudo-classes.
   ============================================================ */
:root{
  --mq-green:#04532F;   --mq-green-hover:#063E24; --mq-green-active:#032B19;
  --mq-green-tint:#E7F0EA; --mq-green-tint-2:#D8E7DD;
  --mq-gold:#D4AF37;    --mq-gold-hover:#C19D2C;  --mq-gold-active:#A98823;
  --mq-gold-tint:#F8EFD3;
  --mq-red:#B23A48;     --mq-red-hover:#96303C;   --mq-red-active:#7C2732;
  --mq-red-tint:#F6E7E9;
  --mq-ink:#1E2B23;     --mq-muted:#6B7A70;
  --mq-disabled-bg:#ECEAE0; --mq-disabled-fg:#A6A691;
  --mq-btn-radius:10px;
  --mq-focus-ring:0 0 0 3px #FFFFFF, 0 0 0 6px var(--mq-gold);
  --mq-shadow-sm:0 1px 2px rgba(4,83,47,.16);
  --mq-shadow-md:0 4px 12px rgba(4,83,47,.22);
}

/* الأساس — مقاس md الافتراضي مدمج (46px) */
.mq-btn{ -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; line-height:1;
  height:46px; padding:0 22px; font-size:15.5px;
  border:1.5px solid transparent; border-radius:var(--mq-btn-radius);
  cursor:pointer; user-select:none; white-space:nowrap; text-decoration:none;
  position:relative;
  transition:background-color .18s ease,border-color .18s ease,
             color .18s ease,box-shadow .18s ease,transform .12s ease; }
.mq-btn svg{flex:none}
.mq-btn:focus-visible{outline:none;box-shadow:var(--mq-focus-ring)}
.mq-btn:disabled{cursor:not-allowed;box-shadow:none;transform:none}

/* المقاسات (الحد الأدنى 40px للمس) */
.mq-btn--sm{height:40px;padding:0 16px;font-size:14px}
.mq-btn--md{height:46px;padding:0 22px;font-size:15.5px}
.mq-btn--lg{height:54px;padding:0 30px;font-size:17px}
.mq-btn--icon{padding:0;width:46px}
.mq-btn--icon.mq-btn--sm{width:40px}
.mq-btn--icon.mq-btn--lg{width:54px}
.mq-btn--block{width:100%}

/* أساسي (أخضر) */
.mq-btn--primary{background:var(--mq-green);color:#FFFFFF;box-shadow:var(--mq-shadow-sm)}
.mq-btn--primary:hover{background:var(--mq-green-hover);box-shadow:var(--mq-shadow-md);transform:translateY(-1px)}
.mq-btn--primary:active{background:var(--mq-green-active);box-shadow:var(--mq-shadow-sm);transform:translateY(0)}
.mq-btn--primary:disabled{background:var(--mq-disabled-bg);color:var(--mq-disabled-fg)}

/* ثانوي (outline) */
.mq-btn--secondary{background:#FFFFFF;border-color:var(--mq-green);color:var(--mq-green)}
.mq-btn--secondary:hover{background:var(--mq-green-tint)}
.mq-btn--secondary:active{background:var(--mq-green-tint-2)}
.mq-btn--secondary:disabled{border-color:var(--mq-disabled-bg);color:var(--mq-disabled-fg);background:#FFFFFF}

/* تمييز (ذهبي) */
.mq-btn--gold{background:var(--mq-gold);color:var(--mq-green);box-shadow:var(--mq-shadow-sm)}
.mq-btn--gold:hover{background:var(--mq-gold-hover);box-shadow:var(--mq-shadow-md);transform:translateY(-1px)}
.mq-btn--gold:active{background:var(--mq-gold-active);transform:translateY(0)}
.mq-btn--gold:disabled{background:var(--mq-disabled-bg);color:var(--mq-disabled-fg)}

/* خطر (أحمر) */
.mq-btn--danger{background:var(--mq-red);color:#FFFFFF;box-shadow:var(--mq-shadow-sm)}
.mq-btn--danger:hover{background:var(--mq-red-hover);box-shadow:var(--mq-shadow-md);transform:translateY(-1px)}
.mq-btn--danger:active{background:var(--mq-red-active);transform:translateY(0)}
.mq-btn--danger:disabled{background:var(--mq-disabled-bg);color:var(--mq-disabled-fg)}
/* نمط تأكيد الحذف: إطار أحمر قبل التأكيد النهائي */
.mq-btn--danger-outline{background:#FFFFFF;border-color:var(--mq-red);color:var(--mq-red)}
.mq-btn--danger-outline:hover{background:var(--mq-red-tint)}
.mq-btn--danger-outline:active{background:#EED4D8}
.mq-btn--danger-outline:disabled{border-color:var(--mq-disabled-bg);color:var(--mq-disabled-fg)}

/* نصّي (text button) */
.mq-btn--text{background:transparent;color:var(--mq-green);padding-inline:12px}
.mq-btn--text:hover{background:var(--mq-green-tint)}
.mq-btn--text:active{background:var(--mq-green-tint-2)}
.mq-btn--text:disabled{background:transparent;color:var(--mq-disabled-fg)}

/* أزرار الجداول الهادئة (icon-only) — تتلوّن عند التحويم فقط */
.mq-btn--quiet{background:transparent;color:var(--mq-muted)}
.mq-btn--quiet:hover{background:var(--mq-green-tint);color:var(--mq-green)}
.mq-btn--quiet:active{background:var(--mq-green-tint-2)}
.mq-btn--quiet-danger{background:transparent;color:var(--mq-muted)}
.mq-btn--quiet-danger:hover{background:var(--mq-red-tint);color:var(--mq-red)}
.mq-btn--quiet-danger:active{background:#EED4D8}

/* حالة التحميل */
.mq-btn.is-loading{pointer-events:none;color:transparent !important}
.mq-btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:1.15em;height:1.15em;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#FFFFFF;
  animation:mq-spin .7s linear infinite; }
.mq-btn--secondary.is-loading::after,
.mq-btn--text.is-loading::after,
.mq-btn--danger-outline.is-loading::after,
.mq-btn--gold.is-loading::after{
  border-color:rgba(4,83,47,.25);border-top-color:var(--mq-green); }
.mq-btn--danger-outline.is-loading::after{border-color:rgba(178,58,72,.25);border-top-color:var(--mq-red)}
@keyframes mq-spin{to{transform:rotate(360deg)}}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .mq-btn{transition:none}
  .mq-btn:hover{transform:none}
  .mq-btn.is-loading::after{animation-duration:1.6s}
}

/* ===== الشارات ===== */
.mq-badge { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
    padding:5px 13px; border-radius:30px; border:1px solid transparent; }
.mq-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mq-badge-success  { color:var(--c-success);  background:rgba(4,83,47,.12);   border-color:rgba(4,83,47,.25); }
.mq-badge-danger   { color:var(--c-danger);   background:rgba(178,58,72,.12); border-color:rgba(178,58,72,.25); }
.mq-badge-warning  { color:var(--c-warning);  background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.4); }
.mq-badge-primary  { color:var(--emerald-dark);background:rgba(4,54,31,.1);   border-color:rgba(4,54,31,.2); }
.mq-badge-info     { color:var(--c-info);     background:rgba(42,111,142,.12);border-color:rgba(42,111,142,.25); }
.mq-badge-secondary{ color:var(--c-secondary);background:rgba(107,124,114,.14);border-color:rgba(107,124,114,.28); }

/* ===== الحقول ===== */
.mq-label { display:block; font-size:14px; font-weight:700; color:var(--emerald-dark); margin-bottom:9px; }
.mq-input { width:100%; font-family:var(--font-body); font-size:15px; color:var(--emerald-dark);
    padding:13px 16px; border:1.5px solid rgba(4,83,47,.22); border-radius:var(--radius-sm);
    background:var(--ivory-soft); transition:all .2s; }
.mq-input::placeholder { color:var(--faint); font-weight:500; }
.mq-input:focus { outline:none; border-color:var(--emerald); box-shadow:0 0 0 4px rgba(4,83,47,.1); }
.mq-field-error { color:var(--c-danger); font-size:12.5px; font-weight:600; margin-top:5px; min-height:1em; }

/* ===== البطاقات ===== */
.mq-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); }
.mq-card-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px;
    border-bottom:1px solid var(--line); background:var(--ivory-soft); }
.mq-card-title { font-family:var(--font-display); font-size:21px; margin:0; }
.mq-card-body { padding:24px; }

/* ===== البطاقات الإحصائية ===== */
.mq-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px; }
.mq-stat { background:var(--surface); border:1px solid var(--hair); border-top:3px solid var(--emerald);
    border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; }
.mq-stat-ico { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    font-size:22px; background:rgba(4,83,47,.1); color:var(--emerald); flex:none; }
.mq-stat-val { font-family:var(--font-display); font-size:30px; font-weight:700; line-height:1; }
.mq-stat-lbl { font-size:13px; color:var(--muted); font-weight:600; margin-top:5px; }
.mq-stat.gold   { border-top-color:var(--gold); }    .mq-stat.gold   .mq-stat-ico { background:rgba(212,175,55,.18); color:var(--gold-deep); }
.mq-stat.blue   { border-top-color:var(--c-info); }   .mq-stat.blue   .mq-stat-ico { background:rgba(42,111,142,.12); color:var(--c-info); }
.mq-stat.red    { border-top-color:var(--c-danger); } .mq-stat.red    .mq-stat-ico { background:rgba(178,58,72,.12); color:var(--c-danger); }
.mq-stat.orange { border-top-color:var(--c-orange); } .mq-stat.orange .mq-stat-ico { background:rgba(197,123,44,.13); color:var(--c-orange); }

/* ===== الجداول ===== */
.mq-table { width:100%; border-collapse:collapse; text-align:right; background:var(--surface); }
.mq-table thead tr { background:var(--emerald); }
.mq-table th { padding:14px 20px; font-size:13.5px; font-weight:700; color:var(--gold); white-space:nowrap; }
.mq-table td { padding:14px 20px; font-size:14px; color:var(--text); border-bottom:1px solid rgba(4,54,31,.07); }
.mq-table tbody tr:last-child td { border-bottom:none; }
.mq-table tbody tr:hover td { background:rgba(4,83,47,.03); }
.mq-avatar { width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:17px; background:rgba(4,83,47,.12); color:var(--emerald); }

/* ===== كود العرض (S1 / T3 / CA2) ===== */
.mq-code { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:12.5px;
    color:var(--emerald); background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.4);
    border-radius:8px; padding:2px 10px; direction:ltr; letter-spacing:.4px; }

/* ===== الحالة الفارغة ===== */
.mq-empty { background:var(--surface); border:1px dashed rgba(4,83,47,.3); border-radius:var(--radius);
    padding:48px 24px; text-align:center; color:var(--muted); }
.mq-empty h3 { font-family:var(--font-display); font-size:22px; margin:0 0 8px; }

/* ============================================================
   الهيكل المشترك (يحقنه layout.js)
   ============================================================ */
.mq-layout { display:flex; min-height:100vh; }
.mq-sidebar { width:260px; background:linear-gradient(180deg,var(--emerald),var(--emerald-dark));
    position:fixed; right:0; top:0; height:100vh; display:flex; flex-direction:column; padding:22px 16px; z-index:100; }
.mq-brand { display:flex; align-items:center; gap:12px; padding:0 6px 18px; border-bottom:1px solid rgba(212,175,55,.22); }
.mq-brand-name { font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--ivory); line-height:1; }
.mq-brand-sub { font-size:10.5px; color:var(--gold); margin-top:5px; letter-spacing:.5px; }
.mq-user { display:flex; align-items:center; gap:11px; background:rgba(251,247,218,.07);
    border:1px solid rgba(212,175,55,.18); border-radius:14px; padding:12px; margin:16px 0 18px; }
.mq-user-avatar { width:42px; height:42px; border-radius:12px; background:var(--gold); color:var(--emerald-dark);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:19px; flex:none; }
.mq-user-info strong { color:var(--ivory); font-size:14px; display:block; }
.mq-user-info small { color:var(--gold); font-size:11.5px; }
.mq-nav { display:flex; flex-direction:column; gap:5px; flex:1; }
.mq-nav-link { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
    font-size:14.5px; font-weight:600; color:#CFE0D6; transition:all .18s; }
.mq-nav-link svg { flex:none; }
.mq-nav-link:hover { background:rgba(251,247,218,.08); color:var(--ivory); }
.mq-nav-link.active { background:var(--gold); color:var(--emerald-dark); font-weight:700; }
.mq-logout { display:flex; align-items:center; gap:12px; justify-content:flex-start; padding:13px 14px; margin-top:8px;
    border:none; border-top:1px solid rgba(212,175,55,.18); border-radius:0; background:none; color:#E7B6B6;
    font-family:var(--font-body); font-size:14.5px; font-weight:600; cursor:pointer; width:100%; }
.mq-logout:hover { color:#ffd0d0; }
.mq-main { margin-right:260px; flex:1; min-width:0; min-height:100vh; display:flex; flex-direction:column; }

/* طيّ الشريط الجانبي (زر ☰ في الشريط العلوي) — انزلاق سلس خارج الحافة اليمنى */
.mq-sidebar { transition:transform .25s ease; }
.mq-main { transition:margin-right .25s ease; }
.mq-layout.mq-collapsed .mq-sidebar { transform:translateX(100%); }
.mq-layout.mq-collapsed .mq-main { margin-right:0; }
.mq-sidebar-toggle { background:none; border:1px solid rgba(4,83,47,.2); border-radius:10px; width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#04532F; flex:none; }
.mq-sidebar-toggle:hover { background:rgba(4,83,47,.08); }
.mq-topbar { background:rgba(251,249,238,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
    padding:18px 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.mq-page-title { font-size:28px; margin:0; }
.mq-topbar-actions { display:flex; align-items:center; gap:18px; }
.mq-date { font-size:13.5px; color:var(--muted); font-weight:600; }
.mq-bell { width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid rgba(212,175,55,.35);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--emerald); }
.mq-content { padding:28px 32px 60px; flex:1; }

/* ===== شريط الأدوات (بحث + زر) ===== */
.mq-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.mq-search { display:flex; align-items:center; gap:11px; flex:1; max-width:420px; background:#fff;
    border:1px solid rgba(4,83,47,.18); border-radius:13px; padding:11px 16px; color:var(--gold-deep); }
.mq-search input { border:none; background:transparent; outline:none; font-family:var(--font-body);
    font-size:14px; color:var(--emerald-dark); width:100%; }
.mq-search input::placeholder { color:var(--faint); }

/* ===== أزرار الإجراءات الأيقونية ===== */
.mq-act { width:32px; height:32px; border-radius:9px; border:none; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:filter .15s; padding:0; }
.mq-act:hover { filter:brightness(.93); }
.mq-actions { display:flex; gap:8px; }

/* ===== بطاقات الروابط السريعة ===== */
.mq-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mq-quick { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid rgba(212,175,55,.3);
    border-radius:14px; background:var(--ivory-soft); cursor:pointer; transition:all .2s; text-decoration:none; }
.mq-quick:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow); }
.mq-quick-ico { flex:none; width:40px; height:40px; border-radius:11px; background:rgba(4,83,47,.1); color:var(--emerald);
    display:flex; align-items:center; justify-content:center; }
.mq-quick span { font-size:14px; font-weight:700; color:var(--emerald-dark); }

/* ============================================================
   التجاوب — موبايل < 768px · تابلت 768–1024px · سطح المكتب > 1024px (كما هو)
   ============================================================ */

/* الخلفية المعتمة لدرج الموبايل (يحقنها layout.js — مخفية دائماً خارج وضع الدرج) */
.mq-overlay { display:none; position:fixed; inset:0; background:rgba(4,54,31,.5); z-index:99; }

/* تابلت: الشريط الجانبي يبقى ظاهراً بكامل نصوصه لكن أنحف، مع تكثيف الهوامش */
@media (min-width:768px) and (max-width:1024px){
    .mq-sidebar { width:225px; padding:18px 12px; }
    .mq-main { margin-right:225px; }
    .mq-topbar { padding:16px 20px; }
    .mq-page-title { font-size:24px; }
    .mq-content { padding:22px 20px 50px; }
}

/* الجداول على الشاشات ≤1024px: تمرير أفقي داخل حاويتها (الهيدر يبقى ظاهراً)،
   بدل كسر الصفحة — الصفوف تُرسم بـJS والبحث مرتبط بها فلا نحوّلها بطاقات */
@media (max-width:1024px){
    .mq-card:has(> .mq-table),
    div[style]:has(> .mq-table) { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
    .mq-card > .mq-table { min-width:640px; }
    /* أزرار الإجراءات (تعديل/حذف/تفاصيل) بحجم لمس مريح */
    .mq-act { width:40px; height:40px; }
}

/* ============================================================
   شريط التنقل السفلي (موبايل فقط) — نمط تطبيقات الهاتف:
   أهم 4 وجهات للدور + «المزيد» يفتح الدرج الجانبي الكامل.
   يحقنه layout.js، ومخفي كلياً من التابلت وسطح المكتب.
   ============================================================ */
.mq-bottomnav { display:none; }
@keyframes mq-sheet-up { from { transform:translateY(26px); opacity:.55; } to { transform:none; opacity:1; } }
@media (max-width:767.98px){
    .mq-bottomnav {
        display:flex; position:fixed; right:0; left:0; bottom:0; z-index:98;
        background:#fff; border-top:1px solid rgba(4,83,47,.14);
        box-shadow:0 -10px 30px -18px rgba(4,54,31,.35);
        padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mq-bottomnav a, .mq-bottomnav button {
        flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
        background:none; border:none; cursor:pointer; text-decoration:none;
        color:#7A8F82; font-family:'Cairo',sans-serif; font-size:10.5px; font-weight:700;
        padding:6px 2px; border-radius:12px; min-height:48px; /* هدف لمس مريح */
    }
    .mq-bottomnav .active { color:#04532F; background:rgba(4,83,47,.09); }
    .mq-bottomnav svg { flex:none; }
}

/* موبايل: الشريط الجانبي درج منزلق (off-canvas) يفتحه زر ☰ وتُغلقه الخلفية المعتمة */
@media (max-width:767.98px){
    .mq-sidebar { transform:translateX(100%); width:min(290px,84vw);
        box-shadow:-24px 0 60px -20px rgba(4,54,31,.55); }
    .mq-main { margin-right:0; }
    .mq-layout.mq-mobile-open .mq-sidebar { transform:none; }
    .mq-layout.mq-mobile-open .mq-overlay { display:block; }
    .mq-topbar { padding:12px 14px; }
    .mq-topbar-actions { gap:10px; }
    .mq-date { display:none; }
    .mq-page-title { font-size:20px; }
    /* مساحة سفلية لشريط التنقل الثابت حتى لا يغطي آخر المحتوى */
    .mq-content { padding:18px 14px calc(84px + env(safe-area-inset-bottom, 0px)); }
    .mq-quick-grid { grid-template-columns:1fr; }
    .mq-table th, .mq-table td { padding:12px 14px; }

    /* ===== نمط التطبيق: النوافذ تصير «صحائف سفلية» (bottom sheets) =====
       تنزلق من الأسفل بعرض كامل وزوايا علوية مستديرة — كما في تطبيقات الهاتف.
       الصيغتان مطلوبتان: HTML الثابت بلا مسافات، وcssText يُسلسَل بمسافات */
    div[style*="position:fixed"][style*="inset:0"],
    div[style*="position: fixed"][style*="inset: 0"] {
        padding:0 !important;
        align-items:flex-end !important;
    }
    div[style*="position:fixed"][style*="inset:0"] > .mq-card,
    div[style*="position: fixed"][style*="inset: 0"] > .mq-card {
        max-width:100% !important; width:100%; margin:0 !important;
        border-radius:22px 22px 0 0 !important;
        max-height:90vh !important;
        padding-bottom:env(safe-area-inset-bottom, 0px);
        animation:mq-sheet-up .22s ease-out;
    }
    .mq-card[style*="max-width"] { max-width:100% !important; }

    /* ===== حقول ولمسات بمقاس الإبهام =====
       16px تمنع iOS من الزوم التلقائي عند التركيز على الحقل */
    .mq-input, select.mq-input, textarea.mq-input { font-size:16px; min-height:46px; }
    textarea.mq-input { min-height:72px; }
    .mq-btn { min-height:44px; }
    .mq-btn--sm { min-height:40px; }
    /* الحقول المتجاورة داخل البطاقات والنماذج تتكدّس عمودياً */
    .mq-card [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    /* ارتفاعات الأزرار ثابتة ≥40px من منظومة الأزرار — لا حاجة لقاعدة لمس هنا */
    .mq-card-header { padding:14px 16px; }
    .mq-card-body { padding:18px 16px; }

    /* بطاقات الإحصاءات: عمودان مضغوطان بدل عمود طويل */
    .mq-stats { grid-template-columns:1fr 1fr; gap:10px; }
    .mq-stat { padding:14px 12px; gap:10px; }
    .mq-stat-ico { width:40px; height:40px; font-size:18px; border-radius:11px; }
    .mq-stat-val { font-size:24px; }

    /* شريط الأدوات: البحث يأخذ صفاً كاملاً والأزرار تلتف تحته */
    .mq-toolbar { flex-wrap:wrap; }
    .mq-search { flex-basis:100%; max-width:100%; }
}

/* ============================================================
   صفحات التقارير (rp-*) — شبكة قسمين متجاورين تنهار عموداً على ≤1024px
   ============================================================ */
.rp-period { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.rp-period > div { min-width:120px; }
.rp-lbl { font-size:12.5px; color:#7A8F82; font-weight:700; margin-bottom:5px; display:block; }
.rp-section-title { font-family:'Amiri',serif; font-size:24px; color:#04361F; margin:0 0 4px; }
.rp-section-sub { font-size:13px; color:#7A8F82; margin:0 0 18px; }

/* قسما التقارير جنباً إلى جنب على سطح المكتب */
.rp-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
/* محتوى كل قسم: بطاقات متراصّة بفاصل موحّد (بديل margin-bottom المكرّر) */
.rp-stack { display:flex; flex-direction:column; gap:16px; }
/* أبناء الشبكة/الرصّة لهم min-width:auto افتراضياً فلا ينكمشون دون عرض جداولهم —
   نصفّرها حتى يتمرّر الجدول داخل rp-scroll بدل أن يوسّع الصفحة أفقياً */
.rp-grid > *, .rp-stack > * { min-width:0; }
.rp-stack .mq-stats { margin-bottom:0; }
/* الجداول العريضة تتمرّر داخل حاويتها لا تكسر الشبكة */
.rp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rp-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* صفحة ولي الأمر: سجلات الابن الثلاثة (حفظ/حضور/اختبارات) متجاورة على سطح المكتب */
.pc-records { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.pc-records > * { min-width:0; } /* حتى تتمرّر الجداول داخل بطاقاتها لا توسّع الصفحة */
.pc-more { text-align:center; padding:12px 14px; border-top:1px solid var(--line); }

/* المراسلة (ولي الأمر ↔ المحفّظ): قائمة خيوط + خيط بفقاعات */
.msg-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }
.msg-layout > * { min-width:0; }
.msg-thread-item { display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer; }
.msg-thread-item:hover, .msg-thread-item.active { background:var(--ivory-soft); }
.msg-unread { min-width:20px; height:20px; border-radius:10px; background:#B23A48; color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.msg-box { display:flex; flex-direction:column; height:560px; }
.msg-scroll { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--ivory-soft); }
.msg-bubble { max-width:75%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.msg-bubble.mine { align-self:flex-end; background:#04532F; color:#FBF7DA; border-bottom-left-radius:4px; }   /* رسائلي: يسار (RTL) */
.msg-bubble.theirs { align-self:flex-start; background:#fff; border:1px solid var(--hair); color:var(--text); border-bottom-right-radius:4px; }
.msg-time { font-size:10.5px; opacity:.75; margin-top:4px; }
.msg-compose { display:flex; gap:10px; padding:12px; border-top:1px solid var(--line); align-items:flex-end; }
.msg-compose textarea { flex:1; resize:none; }

/* تابلت 768–1024px وأسفل: الأقسام تتكدّس عمودياً */
@media (max-width:1024px){
    .rp-grid { grid-template-columns:1fr; gap:20px; }
    .pc-records { grid-template-columns:1fr; gap:16px; }
    .msg-layout { grid-template-columns:1fr; }
    .msg-box { height:480px; }
}
/* موبايل: عناوين أصغر وفواصل أضيق */
@media (max-width:767.98px){
    .rp-section-title { font-size:21px; }
    .rp-grid { gap:16px; }
    .rp-stack { gap:12px; }
}

/* ===== صفحة تفاصيل المركز (أدمن) — بنمط الكتل القائم mq-block-element / --modifier ===== */
.mq-center-head { display:flex; flex-direction:column; gap:14px; }
.mq-center-head-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mq-center-name { font-family:var(--font-display); font-size:30px; margin:0; color:var(--emerald-dark); }
.mq-center-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.mq-center-meta-item { padding:11px 13px; background:var(--ivory-soft); border-radius:10px; }
.mq-center-meta-lbl { font-size:11.5px; color:var(--muted); margin-bottom:2px; }
.mq-center-meta-val { font-size:14px; font-weight:700; color:var(--emerald-dark); }
.mq-stat-sub { font-size:11.5px; color:var(--faint); font-weight:600; margin-top:3px; }
.mq-section { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:26px 0 12px; }
.mq-section-title { font-family:var(--font-display); font-size:22px; color:var(--emerald-dark); margin:0; }
.mq-section-count { font-size:13px; color:var(--muted); font-weight:600; }
.mq-manager { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mq-manager-avatar { width:54px; height:54px; font-size:22px; border-radius:14px; }
.mq-manager-info { flex:1; min-width:200px; }
.mq-manager-name { font-size:16.5px; font-weight:700; color:var(--emerald-dark); }
.mq-manager-mail { font-size:12.5px; color:var(--muted); direction:ltr; text-align:right; margin-top:3px; }
.mq-manager-phone { font-size:13.5px; color:var(--emerald); font-weight:600; }
.mq-manager-empty { background:rgba(212,175,55,.14); border:1.5px solid var(--gold); border-radius:13px; padding:15px 18px; color:var(--gold-deep); font-weight:700; }
.mq-more { text-align:center; padding:12px 14px; border-top:1px solid var(--line); }
@media (max-width:767.98px){
    .mq-center-name { font-size:24px; }
    .mq-section-title { font-size:20px; }
}

/* ===== اسم قابل للنقر داخل الجداول (يفتح صفحة تفاصيل) ===== */
.mq-link-name { font-weight:600; color:var(--emerald-dark); text-decoration:none; border-bottom:1px dashed rgba(4,83,47,.35); }
.mq-link-name:hover { color:var(--emerald); border-bottom-color:var(--emerald); }

/* ===== صفحة تقارير مدير المركز — أقسام ثلاثة (rp-*) ===== */
.rp-pick { display:flex; flex-direction:column; gap:6px; max-width:520px; margin-bottom:16px; }
.rp-pick .mq-label { margin-bottom:0; }
.rp-result:empty { display:none; }
.rp-dd-wrap { position:relative; }
.rp-dd { position:absolute; top:100%; right:0; left:0; z-index:30; margin-top:5px; background:#fff; border:1px solid rgba(4,83,47,.2);
    border-radius:12px; max-height:260px; overflow-y:auto; box-shadow:0 18px 44px -16px rgba(4,54,31,.5); }
.rp-dd-item { padding:10px 13px; cursor:pointer; border-bottom:1px solid rgba(4,54,31,.06); }
.rp-dd-item:hover { background:var(--ivory-soft); }
.rp-dd-name { font-weight:700; color:var(--emerald-dark); font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rp-dd-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.rp-dd-empty { padding:10px 13px; color:var(--faint); font-size:13px; }
.rp-quality { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-8px 0 18px; }
.rp-quality-lbl { font-size:13px; font-weight:700; color:var(--emerald-dark); }

/* ===== صفحة تفاصيل الطالب للمحفّظ (sd-*) — فلتر اليوم وكتله ===== */
.sd-day { margin-bottom:6px; }
.sd-day-pick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sd-day-pick .mq-input { width:auto; padding:9px 12px; font-size:14px; }
.sd-day-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sd-day-grid > * { min-width:0; }
.sd-block { background:var(--ivory-soft); border-radius:12px; padding:14px 16px; }
.sd-block-title { font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.sd-item { padding:8px 0; border-bottom:1px dashed rgba(4,83,47,.15); }
.sd-item:last-child { border-bottom:none; }
.sd-muted { font-size:12.5px; color:var(--muted); }
.sd-note { font-size:13px; color:var(--emerald-dark); margin-top:6px; }
.sd-empty { text-align:center; color:var(--muted); font-weight:600; padding:14px; }
.sd-thumn { display:flex; align-items:flex-start; gap:7px; margin:3px 0; flex-wrap:wrap; }
.sd-thumn-dot { flex:none; width:7px; height:7px; border-radius:50%; margin-top:7px; }
.sd-thumn-dot.is-pass { background:var(--emerald); }
.sd-thumn-dot.is-fail { background:var(--c-danger); }
.sd-thumn-text { font-family:var(--font-display); font-size:14.5px; color:var(--emerald-dark); line-height:1.7; }
.sd-thumn-mistake { font-size:12px; color:var(--c-danger); }
@media (max-width:1024px){ .sd-day-grid { grid-template-columns:1fr; } }

/* ============================================================
   صفحة «ملفّي الشخصي» للمحفّظ (pf-*) — عرض بحت، لا سلوك.
   بطاقة تعريف (hero) + شبكة بيانات للقراءة + عمود نموذجي الهاتف وكلمة المرور.
   الألوان من الهوية فقط: --emerald / --gold / --ivory / --c-danger ومشتقاتها.
   ============================================================ */
.pf-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start; }
.pf-grid > * { min-width:0; }

/* بطاقة التعريف: شريط علوي ذهبي رفيع وخلفية عاجية ناعمة */
.pf-hero { display:flex; align-items:center; gap:18px; padding:22px 24px;
    background:linear-gradient(180deg, var(--ivory-soft), #FFFFFF);
    border-bottom:1px solid var(--line); border-top:3px solid var(--gold);
    border-radius:var(--radius) var(--radius) 0 0; }
.pf-avatar { width:68px; height:68px; border-radius:18px; font-size:28px; flex:none;
    background:var(--emerald); color:var(--ivory); box-shadow:0 10px 24px -14px rgba(4,83,47,.6); }
.pf-hero-main { flex:1; min-width:0; }
.pf-name-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-name { font-family:var(--font-display); font-size:27px; margin:0; color:var(--emerald-dark); line-height:1.2; }
.pf-type { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--gold-deep);
    background:rgba(212,175,55,.16); border:1px solid rgba(212,175,55,.4); border-radius:var(--radius-pill); padding:4px 12px; margin-top:8px; }
.pf-type::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* شبكة البيانات للقراءة فقط */
.pf-info { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.pf-item { background:var(--ivory-soft); border:1px solid rgba(212,175,55,.28); border-radius:13px; padding:13px 16px;
    border-right:3px solid var(--emerald); transition:border-color .18s ease, background .18s ease; }
.pf-item:hover { border-color:rgba(212,175,55,.6); background:#FFFFFF; }
.pf-item-lbl { font-size:12px; color:var(--muted); font-weight:700; margin-bottom:4px; letter-spacing:.2px; }
.pf-item-val { font-weight:700; color:var(--emerald-dark); font-size:15px; overflow-wrap:anywhere; }
.pf-item-val--ltr { direction:ltr; text-align:right; font-size:13.5px; }
.pf-note { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); font-weight:600;
    margin:16px 0 0; padding:10px 12px; background:rgba(4,83,47,.05); border-radius:10px; }
.pf-note::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-top:6px; }

/* عمود النماذج */
.pf-forms { display:flex; flex-direction:column; gap:22px; }
.pf-forms .mq-card-title { font-size:19px; }
.pf-field + .pf-field { margin-top:12px; }
.pf-input--ltr { direction:ltr; text-align:right; }
.pf-actions { display:flex; justify-content:flex-start; margin-top:14px; }
.pf-hint { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--gold-deep); font-weight:600;
    margin-top:12px; padding:9px 12px; background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.35); border-radius:10px; }
.pf-hint::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--c-danger); margin-top:6px; }

/* الحالة المؤقتة (تحميل) */
.pf-loading { color:var(--muted); font-weight:600; padding:24px; text-align:center; }

/* «ملفّي الشخصي»: تابلت ≤1024px عمود واحد بمسافات أضيق · موبايل ≤767.98px بطاقة تعريف متمركزة وشبكة بيانات بعمود واحد */
@media (max-width:1024px){
    .pf-grid { grid-template-columns:1fr; gap:18px; }
    .pf-hero { padding:18px 20px; }
    .pf-name { font-size:24px; }
}
@media (max-width:767.98px){
    .pf-hero { flex-direction:column; text-align:center; gap:12px; padding:20px 16px; }
    .pf-name-row { justify-content:center; }
    .pf-info { grid-template-columns:1fr; gap:10px; }
    .pf-item { padding:12px 14px; }
    .pf-forms { gap:16px; }
    .pf-actions .mq-btn { width:100%; }
}

/* ===== شرائح الأبناء في جدول أولياء الأمور (mq-chip) ===== */
.mq-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mq-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--emerald-dark);
    background:var(--ivory-soft); border:1px solid rgba(4,83,47,.18); border-radius:var(--radius-pill); padding:4px 11px; white-space:nowrap; }
.mq-chip-code { font-size:11px; color:var(--gold-deep); background:rgba(212,175,55,.16); border-radius:8px; padding:1px 6px; direction:ltr; }

/* ===== الوصول المفتوح: مبدّل المقاطع، شريط السجلات، «سجّله»، الاختبار القائم، الصيانة ===== */
.mq-seg { display:inline-flex; background:var(--ivory-soft); border:1px solid rgba(4,83,47,.18); border-radius:12px; padding:4px; gap:4px; }
.mq-seg button { border:none; background:none; border-radius:9px; padding:7px 16px; min-height:38px; font-family:inherit;
    font-size:14px; font-weight:700; color:var(--text); cursor:pointer; white-space:nowrap; }
.mq-seg button.active { background:var(--emerald); color:#fff; }
/* صف تقييم (راديو بمظهر المقاطع) — نموذج تسجيل الحفظ */
.mq-rating { display:flex; flex-wrap:wrap; }
.mq-rating label { flex:1; margin:0; }
.mq-rating input { position:absolute; opacity:0; pointer-events:none; }
.mq-rating span { display:flex; align-items:center; justify-content:center; border-radius:9px; padding:7px 10px; min-height:38px;
    font-size:14px; font-weight:700; color:var(--text); cursor:pointer; white-space:nowrap; }
.mq-rating input:checked + span { background:var(--emerald); color:#fff; }
.mq-rating input:focus-visible + span { outline:2px solid var(--gold-deep); outline-offset:1px; }
.mq-rec-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.mq-rec-bar .mq-input[type="date"] { width:auto; padding:9px 12px; font-size:14px; }
.mq-rec-bar-lbl { font-size:13px; font-weight:700; color:var(--muted); }
.mq-recby { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.mq-recby strong { color:var(--emerald-dark); font-weight:700; }
.sp-picked { margin-top:6px; font-size:12.5px; font-weight:700; color:var(--emerald-dark); }
.mq-exists { margin-top:8px; background:rgba(212,175,55,.14); border:1.5px solid #D4AF37; border-radius:11px; padding:10px 13px;
    font-size:13px; color:#9A7A1E; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mq-maint { text-align:center; padding:48px 24px; }
.mq-maint-ico { font-size:46px; line-height:1; margin-bottom:12px; }
@media (max-width:767.98px){
    .mq-rec-bar .mq-seg { width:100%; }
    .mq-rec-bar .mq-seg button { flex:1; }
}