/* =====================================================================
   MILA · نظام التصميم العام (Design System)  —  v2 (App Shell)
   يُحمَّل بعد قالب Canvas ويعيد بناء التخطيط ليطابق نموذج إعادة التصميم:
   لوحة جانبية كحلية متدرّجة + شريط علوي + بطاقات/جداول/أزرار بهوية ميلا.
   الخط: Cairo · الألوان: أزرق عميق (Navy) + ذهبي (Gold)
   المرجع: design/mila-redesign-prototype.html
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --navy-900:#0B2540; --navy-800:#0F2F52; --navy-700:#123A63;
  --gold:#C9A227; --gold-2:#E4C45B; --gold-soft:#F6E9C8;
  --ink:#0B1B2B; --muted:#5B6B7C; --line:#E6EAF0;
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#F8FAFD;
  --green:#1E9E6A; --green-bg:#E5F5EE; --red:#D14343; --red-bg:#FBE9E9;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(11,37,64,.08); --shadow-sm:0 2px 10px rgba(11,37,64,.06);
  --sidebar-w:264px;
  --font:'Cairo','Segoe UI',Tahoma,sans-serif;

  /* أسماء متوافقة مع الإصدار القديم (لئلا تنكسر أي مراجع سابقة) */
  --mila-navy-900:var(--navy-900); --mila-navy-800:var(--navy-800); --mila-navy-700:var(--navy-700);
  --mila-gold:var(--gold); --mila-gold-2:var(--gold-2); --mila-gold-soft:var(--gold-soft);
  --mila-ink:var(--ink); --mila-muted:var(--muted); --mila-line:var(--line);
  --mila-bg:var(--bg); --mila-surface:var(--surface); --mila-surface-2:var(--surface-2);
  --mila-green:var(--green); --mila-green-bg:var(--green-bg); --mila-red:var(--red); --mila-red-bg:var(--red-bg);
  --mila-radius:var(--radius); --mila-radius-sm:var(--radius-sm);
  --mila-shadow:var(--shadow); --mila-shadow-sm:var(--shadow-sm);
}

/* ============ الطباعة: Cairo على كامل الموقع ============ */
body, h1,h2,h3,h4,h5,h6, p, a, span, div, li, td, th, label,
input, select, textarea, button, .button, .menu-link, .nott, .heading-block h1,
.heading-block h2, .heading-block h3, .modal-title, .badge, .btn{
  font-family:var(--font) !important;
}
body{ background:var(--bg) !important; color:var(--ink); margin:0; }
a{ color:var(--navy-700); }
a:hover{ color:var(--gold); }

/* =====================================================================
   1) هيكل التطبيق (App Shell)
   ===================================================================== */
.mila-app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* ---- الشريط الجانبي ---- */
.mila-sidebar{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
  color:#fff; padding:22px 16px;
  position:sticky; top:0; height:100vh;
  overflow-y:auto; z-index:40;
}
.mila-sidebar::-webkit-scrollbar{ width:6px; }
.mila-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }

.mila-brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 18px; color:#fff; }
.mila-brand:hover{ color:#fff; }
.mila-brand .mark{ flex:0 0 auto; line-height:0; }
.mila-brand .name{ font-weight:800; font-size:20px; line-height:1; letter-spacing:1px; }
.mila-brand .sub{ font-size:11px; opacity:.7; letter-spacing:2px; }

.mila-nav{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.mila-nav .grp{ font-size:11px; opacity:.5; margin:14px 10px 6px; letter-spacing:1px; }
.mila-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  border-radius:12px; color:#cfe0f2; font-weight:500; font-size:14.5px;
  transition:background .15s ease, color .15s ease;
}
.mila-nav a svg{ width:19px; height:19px; flex:0 0 auto; opacity:.85; }
.mila-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.mila-nav a.active{ background:rgba(201,162,39,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(228,196,91,.35); }
.mila-nav a.active svg{ color:var(--gold-2); opacity:1; }

/* ودجة إحصائيات صغيرة أسفل الشريط الجانبي */
.mila-side-stats{ margin-top:18px; padding:14px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.mila-side-stats .row2c{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:center; }
.mila-side-stats .v{ font-size:20px; font-weight:800; color:var(--gold-2); }
.mila-side-stats .k{ font-size:11px; opacity:.7; }

/* ---- العمود الرئيسي ---- */
.mila-main{ display:flex; flex-direction:column; min-width:0; }

/* ---- الشريط العلوي ---- */
.mila-topbar{
  display:flex; align-items:center; gap:16px; padding:14px 28px;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.mila-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; color:var(--muted);
}
.mila-search input{ border:0; background:transparent; outline:0; width:100%; font-family:var(--font); font-size:14px; color:var(--ink); }
.mila-top-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.mila-icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--navy-700);
  text-decoration:none;
}
.mila-icon-btn:hover{ background:var(--surface-2); color:var(--navy-700); }
.mila-lang{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-weight:700; font-size:13px; }
.mila-lang a, .mila-lang button{ border:0; background:transparent; padding:8px 14px; cursor:pointer; color:var(--muted); font-family:var(--font); text-decoration:none; }
.mila-lang a.on, .mila-lang button.on{ background:var(--navy-700); color:#fff; }
.mila-avatar{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  display:grid; place-items:center; color:var(--navy-900); font-weight:800; text-transform:uppercase;
  overflow:hidden; text-decoration:none;
}
.mila-avatar:hover{ color:var(--navy-900); filter:brightness(1.03); }
.mila-avatar img{ width:100%; height:100%; object-fit:cover; }
.mila-hamburger{ display:none; }

/* طبقة التعتيم للجوال: مخفية افتراضياً وثابتة (حتى لا تشغل خلية في الشبكة) */
.mila-overlay{ display:none; position:fixed; inset:0; background:rgba(11,27,43,.5); z-index:50; }

/* ---- منطقة المحتوى ---- */
.mila-content{ padding:28px; width:100%; max-width:1320px; }

/* عناصر القالب القديمة التي نُحيّدها داخل القشرة الجديدة */
.mila-content #content,
.mila-content section#content{ background:transparent !important; padding:0 !important; }
.mila-content .content-wrap{ padding:0 !important; overflow:visible !important; }
.mila-content .container,
.mila-content .container-fluid{ width:100% !important; max-width:100% !important; padding-inline:0 !important; margin-inline:0 !important; }

/* =====================================================================
   2) تحييد رأس وتذييل القالب القديم (Canvas)
   ===================================================================== */
.mila-app #header,
.mila-app footer#footer,
.mila-app #copyrights,
.mila-app .header-wrap-clone{ display:none !important; }

/* شريط عنوان الصفحة → ترويسة خفيفة على خلفية فاتحة */
#page-title{
  background:none !important; background-image:none !important; background-color:transparent !important;
  padding:0 0 8px !important; min-height:0 !important; text-align:start !important;
}
#page-title #particles-line, #page-title .particles-line{ display:none !important; }
#page-title .container{ margin:0 !important; padding:0 !important; }
#page-title h1{
  color:var(--ink) !important; font-size:28px !important; font-weight:800 !important;
  letter-spacing:-.5px; margin:0 0 18px !important; text-shadow:none !important;
  text-transform:none !important;
}
#page-title p, #page-title span{ color:var(--muted) !important; }

/* =====================================================================
   3) الأزرار  —  تعيين كل أزرار القالب القديم على هوية ميلا
   ===================================================================== */
.btn, .button{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:0 !important; border-radius:12px !important; padding:11px 20px !important;
  font-weight:700 !important; font-size:14px !important; cursor:pointer; line-height:1.2 !important;
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease; text-decoration:none;
}
.btn:active, .button:active{ transform:translateY(1px); }
.button{ background:var(--navy-700) !important; color:#fff !important; box-shadow:0 6px 16px rgba(11,37,64,.18); }
.button:hover{ filter:brightness(1.07); color:#fff !important; }
.button-mini, .btn-sm{ padding:8px 14px !important; font-size:13px !important; }
.button-rounded{ border-radius:999px !important; }
.button.btn-block, .btn-block{ width:100%; }

/* الذهبي = الإجراء الرئيسي */
.btn-gold, .button-gold, .button.button-gold,
.button-3d.gradient-grey-orange, .button.gradient-grey-orange{
  background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important;
  color:var(--navy-900) !important; box-shadow:0 6px 16px rgba(201,162,39,.32) !important;
}
.btn-gold:hover, .button-gold:hover{ color:var(--navy-900) !important; }

/* الكحلي = إجراءات قياسية (بحث/حفظ/تحديث) */
.btn-navy, .button-navy,
.gradient-blue-green, .gradient-ocean, .gradient-sky, .gradient-deep,
.button-blue, .button-teal, .button-aqua, .button-purple{
  background:var(--navy-700) !important; color:#fff !important;
}
.button-purple{ background:linear-gradient(180deg,var(--navy-700),var(--navy-800)) !important; }

/* الأخضر = تأكيد / نجاح */
.gradient-green, .button-green, .gradient-fun{ background:var(--green) !important; color:#fff !important; }

/* الأحمر = حذف / خطر */
.gradient-horizon, .gradient-cherry, .button-red, .button-pink, .gradient-purple-red{
  background:var(--red) !important; color:#fff !important;
}

/* الرمادي/الترابي = إغلاق / إلغاء (ثانوي شبح) */
.btn-ghost, .gradient-earth, .button-light, .gradient-grey, .button.button-3d.gradient-earth{
  background:var(--surface) !important; color:var(--navy-700) !important;
  border:1px solid var(--line) !important; box-shadow:none !important;
}
.btn-ghost:hover, .gradient-earth:hover{ background:var(--surface-2) !important; color:var(--navy-700) !important; }

/* أزرار Bootstrap */
.btn-primary{ background:var(--navy-700) !important; border-color:var(--navy-700) !important; color:#fff !important; }
.btn-success{ background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.btn-danger{ background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.btn-secondary{ background:var(--navy-800) !important; border-color:var(--navy-800) !important; color:#fff !important; }
.btn-warning{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; border-color:var(--gold) !important; color:var(--navy-900) !important; }
.btn-link{ color:var(--navy-700) !important; box-shadow:none; background:transparent !important; }
.btn-outline-primary{ background:transparent !important; color:var(--navy-700) !important; border:1px solid var(--navy-700) !important; }
.btn-outline-primary:hover{ background:var(--navy-700) !important; color:#fff !important; }
.btn-outline-warning{ background:transparent !important; color:var(--gold) !important; border:1px solid var(--gold) !important; }
.btn-outline-warning:hover{ background:var(--gold) !important; color:var(--navy-900) !important; }

/* أيقونات داخل الأزرار */
.button i, .btn i{ margin:0; }

/* =====================================================================
   4) البطاقات واللوحات
   ===================================================================== */
.card{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important;
  color:var(--ink);
}
.card.bg-light{ background:var(--surface) !important; }
.feature-box.fbox-border, .card.h-shadow{ border-radius:var(--radius) !important; }
.card.h-shadow:hover, .card.h-translate-y-sm:hover{ box-shadow:var(--shadow) !important; }
.shadow, .shadow-sm{ box-shadow:var(--shadow-sm) !important; }
.heading-block.border-bottom-0{ border-bottom:0; }

/* =====================================================================
   5) الجداول
   ===================================================================== */
.table{ background:var(--surface); border-radius:var(--radius); overflow:hidden; margin-bottom:0; color:var(--ink); }
.table thead th{
  background:var(--surface-2) !important; color:var(--muted) !important; font-weight:700;
  border-bottom:1px solid var(--line) !important; border-top:0 !important;
  text-transform:none; font-size:12.5px; letter-spacing:.3px; vertical-align:middle;
}
.table td, .table th{ border-color:var(--line) !important; vertical-align:middle; padding:13px 14px; }
.table.table-bordered, .table-bordered td, .table-bordered th{ border-color:var(--line) !important; }
.table-hover tbody tr:hover{ background:var(--surface-2) !important; }
.table-responsive{ border-radius:var(--radius); }

/* =====================================================================
   6) الشارات (Badges)
   ===================================================================== */
.badge{ border-radius:999px !important; font-weight:700; padding:.4em .85em; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.badge-pill{ border-radius:999px !important; }
.badge.badge-default, .badge-default{ background:var(--gold-soft) !important; color:#9a7d18 !important; }
.badge-success, .b-green{ background:var(--green-bg) !important; color:var(--green) !important; }
.badge-warning, .b-gold{ background:var(--gold-soft) !important; color:#9a7d18 !important; }
.badge-info, .badge-primary, .b-navy{ background:#E6EEF8 !important; color:var(--navy-700) !important; }
.badge-danger, .b-red{ background:var(--red-bg) !important; color:var(--red) !important; }

/* =====================================================================
   7) النماذج والحقول
   ===================================================================== */
.form-control, .sm-form-control, .border-form-control,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea{
  border:1px solid var(--line) !important; border-radius:12px !important;
  padding:11px 14px !important; color:var(--ink) !important; background:var(--surface) !important;
  box-sizing:border-box !important; height:auto !important; min-height:46px !important;
  line-height:1.6 !important; font-size:14.5px !important; box-shadow:none !important;
}
textarea, textarea.form-control{ min-height:96px !important; }
label{ font-weight:600; font-size:13.5px; margin-bottom:7px; color:var(--ink); }
.form-group{ margin-bottom:16px; }

/* القوائم المنسدلة: ارتفاع كافٍ + سهم مخصّص حتى لا يُقصّ النص */
select, select.form-control, select.sm-form-control{
  height:46px !important; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B7C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important;
  background-size:14px !important; padding-right:38px !important;
}
[dir="rtl"] select, [dir="rtl"] select.form-control, [dir="rtl"] select.sm-form-control{
  background-position:left 14px center !important; padding-right:14px !important; padding-left:38px !important;
}
.form-control:focus, .sm-form-control:focus, select:focus, textarea:focus,
input:focus{
  border-color:var(--navy-700) !important;
  box-shadow:0 0 0 4px rgba(18,58,99,.10) !important; outline:0 !important;
}
.input-group-text{ border-radius:12px !important; border:1px solid var(--line) !important; background:var(--surface-2) !important; color:var(--muted) !important; }

/* =====================================================================
   8) النوافذ المنبثقة (Modals)
   ===================================================================== */
.modal-content{ border:0 !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--line) !important; padding:18px 22px; background:var(--surface); }
.modal-title{ font-weight:800; font-size:18px; color:var(--ink); }
.modal-body{ padding:20px 22px; }
.modal-footer{ border-top:1px solid var(--line) !important; padding:14px 22px; gap:10px; }
.modal .close{ color:var(--muted); opacity:.8; text-shadow:none; font-size:24px; }
.modal .close:hover{ color:var(--ink); }

/* =====================================================================
   9) التنبيهات والرسائل
   ===================================================================== */
.alert, .style-msg{ border-radius:12px !important; border:1px solid transparent; }
.alert-success, .style-msg.successmsg{ background:var(--green-bg) !important; color:var(--green) !important; border-color:#B6E6C4 !important; }
.alert-danger, .style-msg.errormsg{ background:var(--red-bg) !important; color:var(--red) !important; border-color:#F2C6C6 !important; }
.alert-info{ background:#E6EEF8 !important; color:var(--navy-700) !important; border-color:#CFE0F2 !important; }
.alert-warning{ background:var(--gold-soft) !important; color:#9a7d18 !important; border-color:#EBD79A !important; }
.style-msg .sb-msg{ font-weight:600; }

/* =====================================================================
   10) الترقيم والقوائم المنسدلة
   ===================================================================== */
.pagination .page-link{ color:var(--navy-700); border-radius:10px !important; margin:0 3px; border:1px solid var(--line); }
.pagination .page-item.active .page-link{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.pagination .page-link:hover{ background:var(--surface-2); color:var(--navy-700); }

.dropdown-menu{ border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:var(--shadow) !important; padding:6px; }
.dropdown-item{ border-radius:10px; padding:9px 12px; font-size:14px; color:var(--ink); }
.dropdown-item:hover{ background:var(--surface-2); color:var(--navy-700); }

/* =====================================================================
   11) مكوّنات لوحة التحكم (مطابقة للنموذج) — مسبوقة بـ mila- لتفادي التعارض
   ===================================================================== */
.mila-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.mila-page-head h1{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--ink); }
.mila-page-head p{ margin:6px 0 0; color:var(--muted); font-size:14px; }

.mila-grid{ display:grid; gap:18px; }
.mila-stats{ grid-template-columns:repeat(4,1fr); }
.mila-row2{ grid-template-columns:1.6fr 1fr; }

.mila-stat{ padding:18px 20px; position:relative; overflow:hidden; }
.mila-stat .lbl{ color:var(--muted); font-size:13px; font-weight:500; position:relative; z-index:1; padding-inline-end:58px; line-height:1.4; min-height:2.6em; }
.mila-stat .val{ font-size:30px; font-weight:800; margin-top:6px; letter-spacing:-.5px; color:var(--ink); position:relative; z-index:1; unicode-bidi:plaintext; }
.mila-stat .chip{ display:inline-flex; gap:5px; align-items:center; font-size:12px; font-weight:700; margin-top:10px; padding:3px 9px; border-radius:999px; background:var(--green-bg); color:var(--green); }
.mila-stat .deco{ position:absolute; inset-inline-end:-10px; top:-10px; width:64px; height:64px; border-radius:16px; background:var(--gold-soft); display:grid; place-items:center; color:var(--gold); z-index:0; }
.mila-stat.s2 .deco{ background:#E6EEF8; color:var(--navy-700); }
.mila-stat.s3 .deco{ background:var(--green-bg); color:var(--green); }
.mila-stat.s4 .deco{ background:#F1E9FB; color:#7A4DBE; }

.mila-panel{ padding:20px; }
.mila-panel h3{ margin:0 0 4px; font-size:17px; font-weight:800; color:var(--ink); }
.mila-panel .meta{ color:var(--muted); font-size:13px; margin-bottom:18px; }

.mila-chart{ display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; }
.mila-chart .bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.mila-chart .bar i{ width:100%; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,var(--navy-700),var(--navy-900)); display:block; }
.mila-chart .bar:nth-child(odd) i{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); }

.mila-feed{ display:flex; flex-direction:column; gap:2px; }
.mila-feed .it{ display:flex; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line); }
.mila-feed .it:last-child{ border-bottom:0; }
.mila-feed .dot{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--navy-700); }
.mila-feed .t{ font-weight:600; font-size:14px; color:var(--ink); }
.mila-feed .s{ color:var(--muted); font-size:12.5px; }

/* =====================================================================
   12) شاشة الدخول (split: ترويج + نموذج)
   ===================================================================== */
.mila-login{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.mila-login .promo{ background:linear-gradient(160deg,var(--navy-700),var(--navy-900)); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.mila-login .promo .glow{ position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(228,196,91,.22),transparent 70%); inset-inline-end:-90px; top:-90px; }
.mila-login .promo h2{ font-size:38px; font-weight:800; line-height:1.2; margin:0 0 14px; max-width:16ch; color:#fff; }
.mila-login .promo p{ opacity:.82; font-size:16px; line-height:1.7; max-width:48ch; }
.mila-login .promo .pts{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.mila-login .promo .pt{ display:flex; gap:12px; align-items:center; font-size:15px; }
.mila-login .promo .pt span:first-child{ width:30px; height:30px; border-radius:9px; background:rgba(228,196,91,.18); display:grid; place-items:center; color:var(--gold-2); flex:0 0 auto; }
.mila-login .promo .pt span:last-child{ flex:1 1 auto; line-height:1.5; }
.mila-login .form-wrap{ display:grid; place-items:center; padding:40px; background:var(--bg); }
.mila-login .box{ width:100%; max-width:380px; }
.mila-login .box h3{ font-size:26px; font-weight:800; margin:0 0 6px; color:var(--ink); }
.mila-login .box .sub{ color:var(--muted); margin:0 0 26px; }

/* =====================================================================
   13) ضبط RTL
   ===================================================================== */
[dir="rtl"]{ text-align:right; }
[dir="rtl"] .table th, [dir="rtl"] .table td{ text-align:right; }
[dir="rtl"] th, [dir="rtl"] td{ text-align:right; }
[dir="rtl"] .ml-3{ margin-left:0 !important; margin-right:1rem !important; }
[dir="rtl"] .mr-3{ margin-right:0 !important; margin-left:1rem !important; }
[dir="rtl"] .ml-auto{ margin-left:0 !important; margin-right:auto !important; }
[dir="rtl"] .mr-auto{ margin-right:0 !important; margin-left:auto !important; }
[dir="rtl"] .text-left{ text-align:right !important; }
[dir="rtl"] .text-right{ text-align:left !important; }
[dir="rtl"] .float-right{ float:left !important; }
[dir="rtl"] .float-left{ float:right !important; }
[dir="rtl"] .heading-block, [dir="rtl"] .feature-box.fbox-center{ text-align:right; }
[dir="rtl"] label{ text-align:right; display:block; }
[dir="rtl"] .iconlist, [dir="rtl"] ul{ padding-right:0; }

/* =====================================================================
   14) الاستجابة (Responsive) — الشريط الجانبي ينطوي على الشاشات الصغيرة
   ===================================================================== */
@media (max-width:991px){
  .mila-app{ grid-template-columns:1fr; }
  .mila-sidebar{
    position:fixed; top:0; bottom:0; inset-inline-start:0; width:272px; height:100vh;
    transform:translateX(-110%); transition:transform .25s ease; z-index:60;
  }
  [dir="rtl"] .mila-sidebar{ transform:translateX(110%); }
  .mila-app.nav-open .mila-sidebar{ transform:none; }
  .mila-app.nav-open .mila-overlay{ display:block; }
  .mila-hamburger{ display:grid; }
  .mila-content{ padding:18px; }
  .mila-search{ max-width:none; }
  .mila-stats{ grid-template-columns:repeat(2,1fr); }
  .mila-row2{ grid-template-columns:1fr; }
  .mila-login{ grid-template-columns:1fr; }
  .mila-login .promo{ display:none; }
}
@media (max-width:560px){
  .mila-search{ display:none; }
  .mila-stats{ grid-template-columns:1fr; }
  .mila-topbar{ padding:12px 16px; }
}

/* =====================================================================
   15) تحييد أنماط قالب Canvas المتسرّبة في صفحات المحتوى
   (نتائج مراجعة شاملة على كل الصفحات — موحّدة ومنطاقها .mila-content)
   ===================================================================== */

/* --- ترويسة الصفحة الداكنة: النص الأبيض يفوز بالتخصّص فنطابقه --- */
#page-title.page-title-dark h1, #page-title.page-title-parallax h1,
#page-title.page-title-center h1{ color:var(--ink) !important; text-shadow:none !important; }
#page-title.page-title-dark span, #page-title.page-title-dark p,
#page-title.page-title-parallax span, #page-title.page-title-parallax p{ color:var(--muted) !important; }

/* --- أدوات لون النص (Bootstrap/Canvas) → هوية ميلا --- */
.mila-content .text-success{ color:var(--green) !important; }
.mila-content .text-info{ color:var(--navy-700) !important; }
.mila-content .text-danger{ color:var(--red) !important; }
.mila-content .text-warning{ color:#9A7D18 !important; }
.mila-content .text-muted{ color:var(--muted) !important; }
.mila-content a.text-success:hover{ color:var(--green) !important; }
.mila-content a.text-info:hover{ color:var(--navy-700) !important; }

/* --- شارات Bootstrap 5 السياقية (bg-* / *-subtle) غير المعرّفة في القالب --- */
.badge.bg-success, .bg-success-subtle{ background:var(--green-bg) !important; color:var(--green) !important; }
.badge.bg-danger, .bg-danger-subtle{ background:var(--red-bg) !important; color:var(--red) !important; }
.badge.bg-warning, .bg-warning-subtle{ background:var(--gold-soft) !important; color:#9a7d18 !important; }
.badge.bg-info, .bg-info-subtle, .badge.bg-primary, .bg-primary-subtle{ background:#E6EEF8 !important; color:var(--navy-700) !important; }
.badge.bg-light, .bg-light-subtle{ background:var(--surface-2) !important; color:var(--ink) !important; }
.badge.bg-secondary, .bg-secondary-subtle{ background:#E6EEF8 !important; color:var(--navy-700) !important; }
.badge.text-dark{ color:var(--ink) !important; }

/* --- إزالة حافة الأزرار ثلاثية الأبعاد وظل النص من القالب --- */
.button.button-3d{ box-shadow:0 6px 16px rgba(11,37,64,.18) !important; border-radius:12px !important; }
.button.button-3d.button-rounded{ border-radius:999px !important; }
.button, .btn, .button.button-3d{ text-shadow:none !important; }

/* --- كتل .section ذات خلفية الصورة (Hero) → بطاقة فاتحة --- */
.mila-content .section{
  background:var(--surface) !important; background-image:none !important;
  padding:18px !important; margin:0 0 18px !important;
  border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important;
}
.mila-content .section .container{ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; }
.mila-content .section h1, .mila-content .section h2, .mila-content .section h3,
.mila-content .section h4, .mila-content .section p{ color:var(--ink) !important; text-shadow:none !important; }

/* --- ودجة التبويبات (.tabs / .tab-nav / .tab-container) --- */
.tabs{ background:transparent !important; border:0 !important; }
.tabs .tab-nav, .tab-nav, .tab-nav.tab-nav2{
  display:flex; gap:4px; list-style:none; margin:0 0 18px; padding:0 !important;
  border-bottom:1px solid var(--line) !important; background:transparent !important;
}
.tab-nav li, .tab-nav.tab-nav2 li{ margin:0 !important; height:auto !important; border:0 !important; background:transparent !important; }
.tab-nav li a, .tab-nav.tab-nav2 li a{
  display:inline-flex; align-items:center; gap:7px; height:auto !important; line-height:1.4 !important;
  padding:11px 16px !important; border:0 !important; border-radius:10px 10px 0 0 !important;
  background:transparent !important; color:var(--muted) !important; font-weight:700; font-size:14px; box-shadow:none !important;
}
.tab-nav li a:hover, .tab-nav.tab-nav2 li a:hover{ color:var(--navy-700) !important; background:var(--surface-2) !important; }
.tab-nav li.ui-tabs-active a, .tab-nav li.ui-state-active a,
.tab-nav.tab-nav2 li.ui-tabs-active a, .tab-nav.tab-nav2 li.ui-state-active a{
  top:0 !important; height:auto !important; line-height:1.4 !important;
  color:var(--navy-700) !important; background:var(--surface) !important; border:0 !important;
  box-shadow:inset 0 -2px 0 var(--gold) !important;
}
.tabs .tab-container, .tabs.tabs-bordered .tab-container, .tabs.side-tabs .tab-container{
  background:transparent !important; border:0 !important; padding:0 !important; color:var(--ink);
}

/* --- بقايا تخطيط مدوّنة Canvas داخل الجداول/البطاقات (.posts-sm/.entry/.entry-meta) --- */
.mila-content .posts-sm .entry, .mila-content .entry{ margin:0 !important; }
.mila-content .posts-sm .entry::after, .mila-content .entry::after{ display:none !important; }
.mila-content .entry-title h4{ font-size:14.5px !important; font-weight:700 !important; margin:0 0 4px !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.5 !important; }
.mila-content .entry-title h4 a{ color:var(--ink) !important; text-decoration:none !important; }
.mila-content .entry-title h4 a:hover{ color:var(--navy-700) !important; }
.mila-content .entry-meta{ margin:0 !important; overflow:visible !important; }
.mila-content .entry-meta ul{ list-style:none !important; padding:0 !important; margin:0 !important; display:flex !important; gap:14px; flex-wrap:wrap; align-items:center; }
.mila-content .entry-meta li{ color:var(--muted) !important; font-size:12.5px !important; margin:0 !important; }
.mila-content .entry-meta li::before{ content:none !important; }

/* --- كتلة .promo الداكنة داخل المحتوى (تفاصيل نتيجة الطالب) --- */
.mila-content .promo{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-900)) !important; color:#fff !important;
  border:0 !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; padding:24px !important;
}
.mila-content .promo h1, .mila-content .promo h2, .mila-content .promo h3,
.mila-content .promo h4, .mila-content .promo p, .mila-content .promo span{ color:#fff !important; }
.mila-content .promo .text-warning{ color:var(--gold-2) !important; }

/* --- بطاقات الشهادات (testimonial) في عرض التصحيح --- */
.mila-content .testimonial{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; padding:18px !important; margin:8px !important; }
.mila-content .testi-content, .mila-content .testi-content p, .mila-content .testimonial h3{ color:var(--ink) !important; font-family:inherit !important; font-style:normal !important; }
.mila-content .testi-meta::before{ content:'' !important; display:none !important; }
.mila-content .testi-meta{ border-top:1px solid var(--line) !important; margin-top:10px !important; padding-top:10px !important; color:var(--muted) !important; font-weight:600 !important; text-transform:none !important; }
.mila-content .testi-meta span{ color:var(--navy-700) !important; }

/* --- مجموعة الحقول مع زر التقويم (.input-group) --- */
.input-group{ flex-wrap:nowrap !important; align-items:stretch !important; }
.input-group > .form-control{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
[dir="rtl"] .input-group > .form-control{ border-radius:0 12px 12px 0 !important; }
.input-group-append{ display:flex !important; margin-inline-start:-1px !important; }
.input-group-append .input-group-text{ display:flex !important; align-items:center !important; height:46px !important; box-sizing:border-box !important; padding:0 14px !important; border-radius:0 12px 12px 0 !important; }
[dir="rtl"] .input-group-append .input-group-text{ border-radius:12px 0 0 12px !important; }

/* --- الفواصل (.line / .divider) --- */
.mila-content .line, .mila-content .double-line{ border-top:1px solid var(--line) !important; margin:18px 0 !important; }
.mila-content .divider{ color:var(--muted) !important; margin:18px 0 !important; }
.mila-content .divider::before, .mila-content .divider::after{ background-color:var(--line) !important; }
.mila-content .divider i{ color:var(--muted) !important; background:var(--bg) !important; }

/* --- بنك الأسئلة: أنماط inline (.qb-* / .pick-card) --- */
.qb-toolbar, .qb-card, .pick-card{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; }
.qb-card:hover{ box-shadow:var(--shadow) !important; }
.qb-group-title{ border:0 !important; border-inline-start:4px solid var(--gold) !important; color:var(--ink) !important; }
.qb-stat{ background:var(--surface-2) !important; color:var(--ink) !important; }
.qb-opt{ background:var(--surface-2) !important; color:var(--ink) !important; }
.qb-opt.correct{ background:var(--green-bg) !important; border:1px solid #B6E6C4 !important; color:var(--green) !important; }
.pick-card.added{ background:var(--surface-2) !important; }

/* --- بطاقات أسئلة الامتحان (covid-care .topic-post + أدوات .color/.border-color) --- */
.mila-content .topic-post.reply{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; }
.mila-content .topic-post.reply.border-top, .mila-content .topic-post.reply.border-color{ border-top:3px solid var(--gold) !important; }
.mila-content .border-color{ border-color:var(--gold) !important; }
.mila-content .color, .mila-content .color-2{ color:var(--navy-700) !important; }

/* --- بطاقات MCQ (feature-box) — شارة الرقم بالكحلي وإلغاء تأثير القالب --- */
.mila-content .feature-box.fbox-border .fbox-icon a{ border:0 !important; background:var(--navy-700) !important; border-radius:12px !important; }
.mila-content .feature-box.fbox-border .fbox-icon i{ color:#fff !important; background:transparent !important; font-style:normal; font-weight:800; }
.mila-content .feature-box.fbox-effect .fbox-icon i:hover, .mila-content .feature-box.fbox-effect:hover .fbox-icon i{ color:#fff !important; box-shadow:none !important; background:transparent !important; }
.mila-content .feature-box.fbox-effect .fbox-icon i::after, .mila-content .feature-box.fbox-effect:hover .fbox-icon i::after{ display:none !important; background:none !important; }
.mila-content .feature-box .fbox-content h3{ color:var(--ink) !important; }
.mila-content .feature-box.media-box{ padding-inline-start:0 !important; min-height:0 !important; }
.mila-content .feature-box.media-box .fbox-icon, .mila-content .feature-box.media-box .fbox-media{ display:none !important; }

/* --- مؤقّت العدّ التنازلي (.countdown) --- */
.mila-content .countdown-amount{ color:var(--navy-700) !important; font-weight:800 !important; }
.mila-content .countdown-period{ color:var(--muted) !important; text-transform:uppercase; font-size:11px; letter-spacing:.5px; }
.mila-content .countdown-section{ border-color:var(--line) !important; }

/* --- الأكورديون (.toggle / .faq) --- */
.mila-content .toggle{ border:1px solid var(--line) !important; border-radius:var(--radius-sm) !important; background:var(--surface) !important; padding:6px 14px !important; }
.mila-content .toggle .toggle-header, .mila-content .toggle .toggle-title{ color:var(--ink) !important; }
.mila-content .toggle .toggle-title{ font-weight:700 !important; }
.mila-content .toggle-content, .mila-content .toggle-content.text-black-50{ color:var(--muted) !important; }
.mila-content .toggle-icon i.color, .mila-content .iconlist li i.color{ color:var(--gold) !important; }
.mila-content .toggle-icon i:not(.color){ color:var(--navy-700) !important; }

/* --- خيارات الاختيار (.form-check) في أسئلة الامتحان --- */
.mila-content .form-check{ padding:8px 0 8px 1.6em; min-height:auto; }
.mila-content .form-check .form-check-label{ font-size:14.5px !important; color:var(--ink) !important; line-height:1.6; text-transform:none; }
.mila-content .form-check-input{ width:18px; height:18px; margin-top:.2rem; margin-left:-1.6em; accent-color:var(--navy-700); }
[dir="rtl"] .mila-content .form-check{ padding-right:1.6em; padding-left:0; }
[dir="rtl"] .mila-content .form-check-input{ float:right; margin-left:0; margin-right:-1.6em; }

/* --- حالة "نشط" المعروضة كـ .amount (تنسيق متجر Canvas) → شارة خضراء --- */
.mila-content span.amount{ color:var(--green) !important; font-weight:700; font-size:13px; background:var(--green-bg); padding:.3em .8em; border-radius:999px; display:inline-flex; }

/* --- قائمة .portfolio-meta (نافذة تفاصيل النتيجة) --- */
.mila-content .portfolio-meta{ list-style:none; padding:0; margin:0; }
.mila-content .portfolio-meta li{ display:flex; justify-content:space-between; gap:12px; color:var(--ink); margin:0; padding:10px 0; border-bottom:1px solid var(--line); }
.mila-content .portfolio-meta li:last-child{ border-bottom:0; }
.mila-content .portfolio-meta li span, .mila-content .portfolio-meta li span.resutl-detail{ width:auto !important; color:var(--muted); font-weight:600; }

/* --- جداول بنمط السلة (.table.cart) لا تنهار كصفحة متجر --- */
.mila-content .table.cart .cart-product-price, .mila-content .table.cart .cart-product-quantity,
.mila-content .table.cart .cart-product-name{ text-align:start !important; display:table-cell !important; position:static !important; }

/* --- قائمة الإكمال التلقائي للمقررات (inline style) --- */
.search-courses-list{ border:1px solid var(--line) !important; border-radius:var(--radius-sm) !important; padding:6px !important; margin-top:8px; max-height:220px; overflow:auto; background:var(--surface); }
.search-courses-list li{ border-bottom:1px solid var(--line) !important; border-radius:8px; }
.search-courses-list li:last-child{ border-bottom:0 !important; }
.search-courses-list li:hover{ background:var(--surface-2) !important; }
.search-courses-list a{ color:var(--ink) !important; display:block; padding:7px 10px; }

/* --- قائمة الإجراءات المنسدلة + أيقونة التعديل --- */
[dir="rtl"] .mila-content .dropdown-menu-right{ right:auto !important; left:0 !important; }
.mila-content td .icon-edit{ color:var(--navy-700); cursor:pointer; }
.mila-content td .icon-edit:hover{ color:var(--gold); }

/* --- ترقيم الصفحات بـ float:right inline → flex في النهاية --- */
.mila-content [data-label="pagination-div"]{ display:flex !important; justify-content:flex-end !important; float:none !important; margin-top:16px; }

/* --- محاذاة زر البحث (إزالة فاصل <br> القديم) --- */
.mila-content #search_form .form-group br{ display:none !important; }
.mila-content #search_form .form-group{ display:flex; flex-direction:column; justify-content:flex-end; }

/* --- عناصر list-group ومؤشّر التحميل --- */
.mila-content .list-group-item{ background:var(--surface) !important; border-color:var(--line) !important; color:var(--ink) !important; }
.mila-content .css3-spinner-scaler, .mila-content .css3-spinner > div{ background-color:var(--navy-700) !important; border-color:var(--navy-700) !important; }

/* --- مساعد لإحلال الخلفيات الرمادية inline (يُستخدم اختيارياً في الصفحات) --- */
.mila-soft{ background:var(--surface-2) !important; border-radius:var(--radius-sm); padding:14px; }