/* =====================================================================
   PREMIUM THEME — Override layer for Vuexy 9.x (Bootstrap 5)
   ---------------------------------------------------------------------
   ▸ ملف تحميل زائد فقط. لا يغيّر HTML ولا منطق Vuexy.
   ▸ يُحمَّل بعد core.css / theme-default.css / demo.css.
   ▸ الهوية: #D46E2A — يُستخدم بقلّة (أزرار/عناصر نشطة/روابط مهمة).
   ▸ Glassmorphism هادئ: navbar / sidebar / cards / dropdowns / modals.
   ▸ الأداء أولاً: blur 12–18px، ظلال ناعمة، انتقالات 200–250ms.
   ===================================================================== */

/* الخطوط: Cairo (عربي) + Inter (لاتيني) */

/* =====================================================================
   1) توكنات الهوية (Design Tokens)
   ===================================================================== */
:root {
  /* Brand */
  --brand:            #D46E2A;
  --brand-rgb:        212, 110, 42;
  --brand-hover:      #B85B21;
  --brand-light:      #F2B58C;
  --brand-soft:       rgba(212, 110, 42, .10);

  --secondary-brand:  #274C77;
  --accent:           #4EA8DE;

  /* Neutrals */
  --pt-bg:            #FAFCFE;
  /* أعلى تدرّج الخلفية في body::before — توكن لا رقم صريح، فالثيمات تقلبه
     مع --pt-bg معاً؛ ولولا ذلك لبقي رأس الصفحة بلون الثيم القديم. */
  --pt-bg-top:        #FDFEFF;
  --pt-card:          #FFFFFF;
  --pt-border:        #E7EAF0;
  --pt-text:          #1F2937;
  --pt-text-2:        #6B7280;

  /* Status */
  --pt-success:       #22C55E;
  --pt-warning:       #F59E0B;
  --pt-danger:        #EF4444;

  /* Glass */
  --glass-bg:         rgba(255, 255, 255, .72);
  --glass-bg-2:       rgba(255, 255, 255, .60);
  --glass-blur:       14px;
  --glass-border:     rgba(255, 255, 255, .55);

  /* الشريط الجانبي — توكنات مستقلّة عن الزجاج العام ليقلبها ثيم Semi Dark
     وحده دون أن يسحب معه النافبار والقوائم والنوافذ */
  --pt-menu-bg:          var(--glass-bg);
  --pt-menu-border:      var(--glass-border);
  --pt-menu-active-fg:   var(--brand-hover);
  --pt-menu-active-icon: var(--brand);
  --pt-menu-hover-bg:    rgba(var(--brand-rgb), .06);

  /* Elevation (ظلال ناعمة جداً) */
  --pt-shadow-sm:     0 2px 8px rgba(16, 24, 40, .04);
  --pt-shadow:        0 8px 24px rgba(16, 24, 40, .06);
  --pt-shadow-lg:     0 18px 48px rgba(16, 24, 40, .10);

  /* Radius */
  --pt-radius-sm:     12px;
  --pt-radius:        16px;
  --pt-radius-lg:     20px;

  /* Motion */
  --pt-ease:          cubic-bezier(.4, 0, .2, 1);
  --pt-dur:           220ms;

  /* ---- إعادة تعيين متغيرات Bootstrap/Vuexy على الهوية ---- */
  --bs-primary:              var(--brand);
  --bs-primary-rgb:          var(--brand-rgb);   /* كان بنفسجياً بالخطأ */
  --bs-link-color:           var(--brand);
  --bs-link-hover-color:     var(--brand-hover);
  --bs-link-color-rgb:       var(--brand-rgb);
  --bs-body-font-family:     'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color:           var(--pt-text);
  --bs-border-color:         var(--pt-border);
}

/* =====================================================================
   2) Typography — راحة بصرية + مسافات
   ===================================================================== */
body {
  font-family: var(--bs-body-font-family);
  color: var(--pt-text);
  line-height: 1.6;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold,
.btn, .nav-link, .card, .form-control, .form-select, .dropdown-item, .badge {
  font-family: 'Cairo', 'Inter', sans-serif;
  letter-spacing: 0;
}
.text-muted, .text-secondary { color: var(--pt-text-2) !important; }

/* =====================================================================
   3) الخلفية — تدرّج هادئ + دوائر ضبابية عائمة + Noise خفيف جداً
   ===================================================================== */
html.light-style body,
html.light-style {
  background-color: var(--pt-bg);
}
body::before {
  /* Gradient + floating blur circles (fixed, لا يشتّت) */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(30rem 30rem at 18% 22%,  rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(40rem 40rem at 88% -6%,  rgba(212, 110, 42, .05), transparent 62%),
    radial-gradient(36rem 36rem at -8% 12%,  rgba(39, 76, 119, .045), transparent 62%),
    radial-gradient(32rem 32rem at 50% 118%, rgba(78, 168, 222, .04), transparent 62%),
    linear-gradient(180deg, var(--pt-bg-top) 0%, var(--pt-bg) 100%);
}
body::after {
  /* Very light noise — أخفّ لإحساس زجاجي أنعم */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .014;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* اجعل حاويات Vuexy شفافة لتظهر الخلفية */
html.light-style .layout-wrapper,
html.light-style .layout-page,
html.light-style .content-wrapper,
.container-p-y { background: transparent !important; }

/* =====================================================================
   4) Glassmorphism — Navbar / Sidebar
   ===================================================================== */
/* Navbar (detached) */
/* زجاج نافبار لوحة التحكم فقط — نستثني .landing-navbar (لها تصميم Vuexy خاص) */
.layout-navbar .navbar:not(.landing-navbar),
.layout-navbar.navbar-detached,
.navbar-detached:not(.landing-navbar) {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--pt-shadow-sm) !important;
  border-radius: var(--pt-radius) !important;
}

/* Sidebar / Menu */
html.light-style #layout-menu.bg-menu-theme,
html.light-style .layout-menu.bg-menu-theme,
html.light-style .bg-menu-theme {
  background: var(--pt-menu-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-inline-end: 1px solid var(--pt-menu-border) !important;
  box-shadow: var(--pt-shadow-sm);
}
/* عنصر القائمة النشط — الهوية بلمسة */
html.light-style .bg-menu-theme .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .16), rgba(var(--brand-rgb), .06)) !important;
  color: var(--pt-menu-active-fg) !important;
  font-weight: 600;
}
html.light-style .bg-menu-theme .menu-item.active > .menu-link .menu-icon { color: var(--pt-menu-active-icon) !important; }
html.light-style .bg-menu-theme .menu-link:hover { background: var(--pt-menu-hover-bg); }
.menu-inner .menu-link { transition: background var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease); }

/* =====================================================================
   5) البطاقات — Glass + Radius 20 + Hover Elevation
   ===================================================================== */
.card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
  transition: transform var(--pt-dur) var(--pt-ease),
              box-shadow var(--pt-dur) var(--pt-ease);
}
.card:hover { box-shadow: var(--pt-shadow-lg) !important; }
/* رفع خفيف للبطاقات التفاعلية فقط */
.card.card-hover:hover,
.card.cursor-pointer:hover,
a > .card:hover { transform: translateY(-3px); }
.card-header { border-bottom-color: var(--pt-border); font-weight: 600; }

/* بطاقات الإحصائيات (glass أوضح) */
.card .avatar .avatar-initial,
.card [class*="bg-label-"] { border-radius: var(--pt-radius-sm) !important; }

/* =====================================================================
   6) الأزرار — Primary متدرّج + ظل + رفع Hover
   ===================================================================== */
.btn { border-radius: var(--pt-radius-sm); font-weight: 500; transition: all var(--pt-dur) var(--pt-ease); }

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), .28) !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(var(--brand-rgb), .34) !important;
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-hover);
}
/* زر ثانوي زجاجي */
.btn-label-secondary, .btn-outline-secondary {
  backdrop-filter: blur(6px);
}
.btn-label-primary {
  color: var(--brand) !important;
  background: rgba(var(--brand-rgb), .10) !important;
}
.btn-label-primary:hover { background: rgba(var(--brand-rgb), .18) !important; }

/* حالة التحميل */
.btn.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.btn-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff;
  animation: pt-spin .6s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   7) الروابط والعناصر النشطة
   ===================================================================== */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-label-primary { color: var(--brand) !important; background-color: rgba(var(--brand-rgb), .12) !important; }
.border-primary { border-color: var(--brand) !important; }

/* Pagination / Progress / Nav pills-tabs / List group active */
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); border-radius: var(--pt-radius-sm); }
.progress { border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--brand), var(--brand-hover)); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand); }
.nav-tabs .nav-link.active { color: var(--brand) !important; border-color: var(--brand); }
.list-group { --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color: var(--brand); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* =====================================================================
   8) الجداول — Sticky header / Hover / مسافات أفضل
   ===================================================================== */
.card > .table-responsive, .table-responsive { border-radius: inherit; }
.table {
  --bs-table-hover-bg: rgba(var(--brand-rgb), .05);
  border-color: var(--pt-border);
}
.table > :not(caption) > * > * { padding: .85rem 1.25rem; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #F3F5F9;
  color: var(--pt-text-2);
  font-weight: 600; font-size: .8125rem;
  text-transform: none; letter-spacing: .2px;
  border-bottom: 1px solid var(--pt-border) !important;
}
.table tbody tr { transition: background var(--pt-dur) var(--pt-ease); }
.table-hover tbody tr:hover { background: var(--bs-table-hover-bg); }
/* Row selection حديث */
.table tbody tr.selected,
.table tbody tr:has(.form-check-input:checked) {
  background: rgba(var(--brand-rgb), .07);
  box-shadow: inset 3px 0 0 var(--brand);
}
/* Density: أضِف class="table-compact" على الجدول عند الحاجة */
.table-compact > :not(caption) > * > * { padding: .45rem .85rem; }

/* شريط أدوات الجدول (DataTables) */
.dataTables_wrapper .row:first-child { padding: .25rem .25rem 1rem; }
.dataTables_filter input, .dataTables_length select {
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-sm) !important;
  padding: .45rem .75rem !important;
}

/* =====================================================================
   9) النماذج — Inputs / Select / Focus / Helper
   ===================================================================== */
.form-control, .form-select, .input-group-text {
  border-radius: var(--pt-radius-sm);
  border-color: var(--pt-border);
  transition: border-color var(--pt-dur) var(--pt-ease), box-shadow var(--pt-dur) var(--pt-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb), .16);
}
.form-label { font-weight: 500; color: var(--pt-text); margin-bottom: .4rem; }
.form-text { color: var(--pt-text-2); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--pt-success); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--pt-danger); }
/* Floating labels */
.form-floating > label { color: var(--pt-text-2); }
.form-floating > .form-control:focus ~ label { color: var(--brand); }
/* Select2 مواءمة */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--pt-radius-sm) !important;
  border-color: var(--pt-border) !important;
  min-height: calc(1.6em + .85rem + 2px);
}
.select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb), .16);
}
/* الخيار المُظلَّل — الخلفية والنصّ يُثبَّتان معاً.
   كانت الخلفية وحدها مفروضة هنا، فيبقى لون select2 الأصلي (#cc8434 برتقالي
   داكن، مصمَّم لخلفيته الكريمية) فوق تعبئة برتقالية ⇒ نصّ لا يُقرأ.
   يكفي هذا للوضعين: --brand لا تُقلب في الداكن، والمورّد يُدكّن لوح القائمة
   نفسه (.dark-style .select2-dropdown) فيبقى الأبيض على البرتقالي صحيحاً.
   أبيض على --brand هو نفس تباين .btn-primary المعتمد في المشروع. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--brand) !important;
  color: #fff !important;
}

/* =====================================================================
   10) Dropdowns / Modals — Glass
   ===================================================================== */
.dropdown-menu {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: var(--pt-shadow-lg) !important;
  padding: .4rem;
}
.dropdown-item { border-radius: var(--pt-radius-sm); padding: .5rem .75rem; transition: background var(--pt-dur) var(--pt-ease); }
.dropdown-item:hover { background: rgba(var(--brand-rgb), .08); color: var(--brand-hover); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand); color: #fff; }

/* ترويسة قائمة المستخدم */
.dropdown-menu .um-header { padding: .55rem .7rem; border-radius: var(--pt-radius-sm); }
.dropdown-menu .um-header .avatar { width: 40px; height: 40px; }
.dropdown-menu .um-header .fw-semibold { color: var(--pt-text); line-height: 1.3; }
.dropdown-menu .um-email { color: var(--pt-text-2); font-size: .76rem; }
.dropdown-menu .um-header:hover .um-email { color: var(--brand-hover); }
/* شارة الدور (معلم/معلمة/طالب...) */
.dropdown-menu .um-role-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .35rem; padding: .12rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
  background: rgba(var(--brand-rgb), .12); color: var(--brand-hover);
}
.dropdown-menu .um-role-badge i { font-size: .9rem; }

/* توحيد قائمة «صفحات» (mega-dropdown) مع بقية القوائم — قائمة مدمجة بدل الصندوق العريض */
@media (min-width: 992px) {
  .landing-navbar .nav-item.mega-dropdown { position: relative; }
  .landing-navbar .nav-item.mega-dropdown > .dropdown-menu {
    max-width: 300px !important; min-width: 250px; width: auto !important;
    inset-inline-start: auto !important; inset-inline-end: 0 !important;
    transform: none !important; padding: .5rem !important;
  }
}
/* رأس القائمة */
.landing-navbar .mega-dropdown > .dropdown-menu > .h6 {
  padding: .35rem .6rem .55rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--pt-border);
  font-size: .82rem; color: var(--pt-text-2); font-weight: 700;
}
.landing-navbar .mega-dropdown > .dropdown-menu > .h6 a { color: var(--pt-text) !important; }
.landing-navbar .mega-dropdown > .dropdown-menu > .h6 .avatar-initial {
  background: rgba(var(--brand-rgb), .12) !important; color: var(--brand) !important;
}
/* عناصر القائمة — روح بريميوم: صف ينزلق + نقطة برتقالية تكبر */
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link {
  display: flex !important; align-items: center; gap: .1rem;
  padding: .55rem .7rem !important; border-radius: var(--pt-radius-sm);
  color: var(--pt-text);
  transition: background var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease),
              padding-inline-start var(--pt-dur) var(--pt-ease);
}
/* توحيد الحجم والوزن — إلغاء fw-bolder (900) الثقيل */
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link,
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link span {
  font-size: .9rem !important; font-weight: 600 !important;
}
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link:hover {
  background: rgba(var(--brand-rgb), .08); color: var(--brand-hover) !important;
  padding-inline-start: 1rem !important;
}
/* النقطة القائدة — دائرة برتقالية أنيقة تكبر عند المرور */
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link i {
  color: var(--brand) !important; font-size: .5rem !important;
  opacity: .55; transition: opacity var(--pt-dur) var(--pt-ease), transform var(--pt-dur) var(--pt-ease);
}
.landing-navbar .mega-dropdown > .dropdown-menu .mega-dropdown-link:hover i {
  color: var(--brand-hover) !important; opacity: 1; transform: scale(1.5);
}
/* داخل قائمة الجوال المطوية: شفافة تندمج بدل الصندوق الزجاجي العائم */
@media (max-width: 991.98px) {
  .landing-navbar .mega-dropdown > .dropdown-menu {
    background: transparent !important; box-shadow: none !important;
    border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

.modal-content {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-lg) !important;
}
.modal-header, .modal-footer { border-color: var(--pt-border); }
.modal.fade .modal-dialog { transition: transform .25s var(--pt-ease), opacity .25s var(--pt-ease); }

/* Breadcrumb أوضح */
.breadcrumb { background: transparent; padding: 0; }
.breadcrumb-item a { color: var(--pt-text-2); }
.breadcrumb-item.active { color: var(--brand); font-weight: 500; }

/* Badges */
.badge.bg-primary { background: var(--brand) !important; }

/* =====================================================================
   11) الحركات — Fade / Scale / Slide / Hover Lift (200–250ms)
   ===================================================================== */
@keyframes pt-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-scale { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes pt-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pt-fade  { animation: pt-fade  var(--pt-dur) var(--pt-ease) both; }
.pt-scale { animation: pt-scale var(--pt-dur) var(--pt-ease) both; }
.pt-slide { animation: pt-slide 250ms var(--pt-ease) both; }
.hover-lift { transition: transform var(--pt-dur) var(--pt-ease), box-shadow var(--pt-dur) var(--pt-ease); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   12) الوضع الداكن — Dark Mode متناسق + Glass مناسب
   ===================================================================== */
html.dark-style {
  --pt-bg:      #14161B;
  --pt-card:    #1C1F26;
  --pt-border:  #2A2E37;
  --pt-text:    #E6E8EC;
  --pt-text-2:  #9AA0AB;
  --glass-bg:   rgba(28, 31, 38, .68);
  --glass-bg-2: rgba(28, 31, 38, .55);
  --glass-border: rgba(255, 255, 255, .08);
  --pt-shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
  --pt-shadow:    0 8px 24px rgba(0, 0, 0, .32);
  --pt-shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
  --brand-soft: rgba(212, 110, 42, .16);
  --pt-bg-top:  #161922;
}
html.dark-style body { background-color: var(--pt-bg); color: var(--pt-text); }
html.dark-style body::before {
  background:
    radial-gradient(38rem 38rem at 88% -6%,  rgba(212, 110, 42, .10), transparent 60%),
    radial-gradient(34rem 34rem at -8% 12%,  rgba(39, 76, 119, .12),  transparent 60%),
    radial-gradient(30rem 30rem at 50% 118%, rgba(78, 168, 222, .06), transparent 60%),
    linear-gradient(180deg, var(--pt-bg-top) 0%, var(--pt-bg) 100%);
}
html.dark-style body::after { opacity: .04; }
html.dark-style .card { background: var(--pt-card); border-color: var(--pt-border) !important; }
html.dark-style .layout-wrapper,
html.dark-style .layout-page,
html.dark-style .content-wrapper { background: transparent !important; }
html.dark-style #layout-menu.bg-menu-theme,
html.dark-style .bg-menu-theme,
html.dark-style .navbar-detached,
html.dark-style .dropdown-menu,
html.dark-style .modal-content {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}
html.dark-style .table thead th { background: #22262F; color: var(--pt-text-2); }
html.dark-style .form-control, html.dark-style .form-select {
  background: #22262F; border-color: var(--pt-border); color: var(--pt-text);
}
html.dark-style .dropdown-item:hover { background: rgba(var(--brand-rgb), .18); color: var(--brand-light); }

/* =====================================================================
   12.5) قائمة الواجهة الأمامية (landing navbar) — مشتركة بين الصفحات
   ===================================================================== */
.landing-navbar .navbar-nav .nav-link {
  font-weight: 600;
  color: var(--pt-text);
  position: relative;
  transition: color var(--pt-dur) var(--pt-ease);
}
.landing-navbar .navbar-nav .nav-link:hover,
.landing-navbar .navbar-nav .nav-link.active,
.landing-navbar .navbar-nav .active > .nav-link {
  color: var(--brand) !important;
}
/* خط ينزلق تحت الرابط — نستثني .dropdown-toggle حتى يبقى سهم Bootstrap */
.landing-navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after {
  content: ""; position: absolute; bottom: 4px;
  inset-inline-start: 50%; transform: translateX(50%);
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: width var(--pt-dur) var(--pt-ease);
}
.landing-navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
.landing-navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle).active::after,
.landing-navbar .navbar-nav > .active.nav-item > .nav-link:not(.dropdown-toggle)::after {
  width: 62%;
}
/* سهم القائمة المنسدلة — مثلث بلون الهوية، لقائمة «صفحات» (mega-dropdown) فقط
   حتى لا يظهر على مبدّل السمة/الأفتار (hide-arrow) */
.landing-navbar .nav-item.mega-dropdown > .nav-link.dropdown-toggle::after {
  content: "" !important; display: inline-block !important;
  position: static !important; transform: none !important;
  width: 0 !important; height: 0 !important;
  border-top: .34em solid var(--brand) !important;
  border-inline-start: .34em solid transparent !important;
  border-inline-end: .34em solid transparent !important;
  border-bottom: 0 !important;
  vertical-align: .18em; margin-inline-start: .4em;
  transition: transform var(--pt-dur) var(--pt-ease);
}
/* دوران السهم عند فتح القائمة */
.landing-navbar .nav-item.mega-dropdown.show > .nav-link.dropdown-toggle::after {
  transform: rotate(180deg) !important;
}
/* أزرار الـpill في القائمة (ملف الإنجاز / الاشتراك) — بلون الهوية بوضوح */
.landing-navbar .btn-outline-primary {
  color: var(--brand-hover) !important;
  border: 1.5px solid rgba(var(--brand-rgb), .5) !important;
  background: transparent !important;
  font-weight: 700;
  transition: all var(--pt-dur) var(--pt-ease);
}
.landing-navbar .btn-outline-primary:hover,
.landing-navbar .btn-outline-primary:focus {
  background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
  border-color: transparent !important; color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), .28);
}
/* الداكن: ‎--brand-hover‎ (#B85B21) نحاسي داكن مضبوط على أرضية بيضاء — تباينه على
   الأرضية السوداء 4.1 فقط (دون AA). نرفع النص لدرجة فاتحة ونقوّي الحدّ قليلاً.
   لا نقلب التوكن نفسه: مستخدم 151 مرة كخلفية/تدرّج مقابل 35 مرة كنص. */
html.dark-style .landing-navbar .btn-outline-primary {
  color: var(--brand-light, #E8A05F) !important;
  border-color: rgba(var(--brand-rgb), .6) !important;
}
html.dark-style .landing-navbar .navbar-nav .nav-link { color: var(--pt-text); }

/* =====================================================================
   12.6) الفوتار الاحترافي + زر الصعود (مشترك بين صفحات الواجهة)
   ===================================================================== */
.landing-footer {
  position: relative;
  background: linear-gradient(180deg, #223052 0%, #1B2740 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* شعاع زجاجي علوي بلون الهوية */
.landing-footer::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .55), transparent);
}
/* توهّج زجاجي خفيف في الأعلى */
.landing-footer::after {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 140px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--brand-rgb), .07), transparent 70%);
  pointer-events: none;
}
.landing-footer .footer-top,
.landing-footer .footer-bottom { position: relative; z-index: 1; }

/* عناوين الأعمدة */
.landing-footer .footer-title {
  color: #fff !important; font-family: 'Cairo', sans-serif; font-weight: 700;
  position: relative; padding-bottom: .7rem;
}
.landing-footer .footer-title::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}
/* الروابط */
.landing-footer .footer-link { color: rgba(255, 255, 255, .68); transition: color var(--pt-dur) var(--pt-ease), padding-inline-start var(--pt-dur) var(--pt-ease); }
.landing-footer a.footer-link:hover { color: var(--brand-light) !important; padding-inline-start: 4px; }
.landing-footer .footer-text, .landing-footer .footer-logo-description { color: rgba(255, 255, 255, .6); }
.landing-footer .app-brand-text { color: #fff !important; }

/* السوشيال ميديا — أيقونات زجاجية دائرية بلون الهوية عند التحويم */
.landing-footer .footer-social-title { font-size: .95rem; }
.landing-footer .footer-social {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  padding: 0; margin: 0;
}
.landing-footer .footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none; line-height: 1;
  transition: color var(--pt-dur) var(--pt-ease),
              background var(--pt-dur) var(--pt-ease),
              border-color var(--pt-dur) var(--pt-ease),
              transform var(--pt-dur) var(--pt-ease),
              box-shadow var(--pt-dur) var(--pt-ease);
}
.landing-footer .footer-social-link i { font-size: 1.15rem; }
.landing-footer .footer-social-link:hover,
.landing-footer .footer-social-link:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), .35);
}
.landing-footer .footer-social-link:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
/* لمسة لون خاصة بكل منصة عند التحويم */
.landing-footer .footer-social-link[data-social="whatsapp"]:hover  { background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 8px 18px rgba(37, 211, 102, .32); }
.landing-footer .footer-social-link[data-social="x"]:hover         { background: linear-gradient(135deg, #2A2A2A, #000);    box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.landing-footer .footer-social-link[data-social="instagram"]:hover { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); box-shadow: 0 8px 18px rgba(221, 42, 123, .32); }
.landing-footer .footer-social-link[data-social="youtube"]:hover   { background: linear-gradient(135deg, #FF3D3D, #C4302B); box-shadow: 0 8px 18px rgba(196, 48, 43, .32); }
.landing-footer .footer-social-link[data-social="telegram"]:hover  { background: linear-gradient(135deg, #37BBFE, #007DBB); box-shadow: 0 8px 18px rgba(34, 158, 217, .32); }
.landing-footer .footer-social-link[data-social="tiktok"]:hover    { background: linear-gradient(135deg, #25F4EE, #000 55%, #FE2C55); box-shadow: 0 8px 18px rgba(254, 44, 85, .3); }
.landing-footer .footer-social-link[data-social="snapchat"]:hover  { background: linear-gradient(135deg, #FFFC00, #F7E600); color: #16203A; box-shadow: 0 8px 18px rgba(255, 252, 0, .3); }

@media (prefers-reduced-motion: reduce) {
  .landing-footer .footer-social-link:hover,
  .landing-footer .footer-social-link:focus-visible { transform: none; }
}

/* الشريط السفلي — كحلي داكن صلب متماشٍ مع الفوتار */
.landing-footer .footer-bottom {
  background: #16203A !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}
.landing-footer .footer-bottom .footer-text,
.landing-footer .footer-bottom span { color: rgba(255, 255, 255, .6) !important; }

/* سطر الحقوق */
.landing-footer .footer-copyright {
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  justify-content: center; font-size: .9rem; color: rgba(255, 255, 255, .6);
}
.landing-footer .footer-cr-year { color: rgba(255, 255, 255, .85) !important; font-weight: 700; }
.landing-footer .footer-brand-link {
  color: var(--brand-light, #F2B58C) !important; font-weight: 700; text-decoration: none;
  transition: color var(--pt-dur) var(--pt-ease);
}
.landing-footer .footer-brand-link:hover { color: #fff !important; }

/* شارة موثوق (raed) — بحاوية بيضاء أنيقة تبرز على الكحلي */
.landing-footer .footer-trust-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  transition: transform var(--pt-dur) var(--pt-ease), box-shadow var(--pt-dur) var(--pt-ease);
}
.landing-footer .footer-trust-badge img { height: 34px; display: block; }
.landing-footer .footer-trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

/* زر الصعود — زجاجي بلون الهوية */
.scroll-to-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  box-sizing: border-box; padding: 0; border: 0 !important;
  line-height: 52px; text-align: center; overflow: visible;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .35),
              inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  cursor: pointer; z-index: 1000;
  transition: transform .25s var(--pt-ease), box-shadow .25s var(--pt-ease);
}
.scroll-to-top i {
  font-size: 22px; line-height: 52px; vertical-align: top;
  display: inline-block;
}
.scroll-to-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(var(--brand-rgb), .48),
              inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* =====================================================================
   13) تفاصيل نهائية — Scrollbar + Focus عام
   ===================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(107, 114, 128, .35); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(107, 114, 128, .55); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .5); outline-offset: 2px; }

/* شعار الصفحة الرئيسية — مقاسه وتبديله فاتح/داكن انتقلا إلى
   assets/css/brand-logo.css (مكوّن partials/brand-logo.blade.php الموحّد
   لكل شرائط الواجهة). هنا ما يخصّ الشريط نفسه فقط. */
.landing-navbar .app-brand-link { padding: 0; }

/* ---------------------------------------------------------------------
   شريط الرئيسية على الشاشات الصغيرة — صفّ واحد بلا التفاف
   ---------------------------------------------------------------------
   الشعار العريض + هامشه (me-4) + أيقونات الأدوات كانت تتجاوز عرض الشاشة،
   فيلتفّ صفّ الأيقونات تحت الشعار: يطول الشريط ضعفين ويزحف فوق أول محتوى
   في الصفحة. نضغط الهوامش وحدها — أحجام الأيقونات وتنفّسها تبقى كما هي،
   والشعار وحده يمتصّ الضيق (وتحت 576px يصير أيقونة مربعة أصلاً).
   آمن على القائمة المطوية: تحت 992px هي off-canvas ثابتة (front-page.css)
   فلا تحتاج flex-basis لتنزل سطراً جديداً.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar.landing-navbar { flex-wrap: nowrap; }
  .navbar.landing-navbar > .navbar-brand.app-brand { margin-inline-end: .6rem !important; min-width: 0; }
  .navbar.landing-navbar .app-brand-link { min-width: 0; overflow: hidden; }
  .navbar.landing-navbar > .navbar-brand .navbar-toggler { margin-inline-end: .4rem !important; }
  /* شريط الأدوات لا يتقلّص — الشعار يمتصّ الضيق وحده فتبقى الأيقونات متنفّسة */
  .navbar.landing-navbar > .navbar-nav.flex-row { flex: 0 0 auto; }
  .navbar.landing-navbar > .navbar-nav.flex-row .nav-link { padding-inline: .55rem; }
}

/* Mobile rhythm: align the floating navbar width with page cards. */
@media (max-width: 575.98px) {
  .layout-navbar > .container {
    max-width: calc(100% - 32px);
    padding-inline: 0;
  }

  .navbar.landing-navbar {
    padding-inline: .85rem !important;
  }

  .navbar.landing-navbar > .navbar-brand.app-brand {
    margin-inline-end: .35rem !important;
  }

  .navbar.landing-navbar > .navbar-nav.flex-row .nav-link {
    padding-inline: .45rem;
  }
}

/* =====================================================================
   16) ثيم Bordered — الحدّ بدل الظل
   ---------------------------------------------------------------------
   المحوّل يبدّل theme-bordered.css فقط، وهو يُحمَّل قبل هذا الملف فتضيع
   نيّته تحت قواعد .card و .bg-menu-theme أعلاه. نعيدها هنا من التوكنات
   وحدها: كل أسطح الارتفاع في اللوحة (البطاقات · الشريط العلوي · الشريط
   الجانبي · القوائم المنسدلة · النوافذ) تقرأ --pt-shadow* و --glass-border،
   فتسطيحها من مكان واحد يكفي — بلا ملاحقة كل قاعدة على حدة.

   سمة data-theme على <html> يضبطها config.js (المحوّل نفسه لا يكتبها).
   مقصود أن تبقى ظلال الهوية (btn-primary) وحلقات التركيز كما هي: قيمها
   صريحة لا توكنات، وهي دلالة تفاعل لا زخرفة ارتفاع.
   ===================================================================== */
html[data-theme="theme-bordered"] {
  --pt-shadow-sm: none;
  --pt-shadow:    none;
  --pt-shadow-lg: none;
}

/* الحدّ صار يحمل الفصل وحده ⇒ أوضح درجةً من الافتراضي.
   ⚠️ ‎--glass-border‎ أغمق من ‎--pt-border‎ عمداً، وهما لعملين مختلفين:
     · ‎--pt-border‎ للبطاقات والحقول — تبقى ‎#D5DAE3‎ الفاتحة، فلوحةٌ مليئة
       بالبطاقات ذات حدود غامقة تصير قفصاً لا تصميماً (وهو مظهر Vuexy الأصلي).
     · ‎--glass-border‎ للكسوة وحدها: نافبار ‎.navbar-detached‎ (سطر 147) وسبيدر
       عبر ‎--pt-menu-border‎ (سطر 51) ومنسدلات ونوافذ — وهذه هي التي يجب أن
       تُرى، إذ يحذف «مؤطّر» الظلّ فيصير الحدّ حاملَ الفصل وحده.
   القياس: ‎#D5DAE3‎ فوق السطح الزجاجي الأبيض تباينها ‎1.41‎ — دون عتبة الإدراك،
   فكان «مؤطّر» يخسر فصل الظلّ ولا يكسب فصل الحدّ. ‎#A9AEB8‎ تعطي ‎~2.2‎. */
html.light-style[data-theme="theme-bordered"] {
  --pt-border:    #D5DAE3;
  --glass-border: #A9AEB8;
  /* السطح يصير مصمتاً تقريباً: «مؤطّر» لا شيء فيه يطفو — وهذا أيضاً ما يفرّق
     نافباره عن نافبار الافتراضي الزجاجي ‎.72‎، وكانا متطابقين تماماً قبل اليوم. */
  --glass-bg:     rgba(255, 255, 255, .94);
  --glass-bg-2:   rgba(255, 255, 255, .88);
}
html.dark-style[data-theme="theme-bordered"] {
  --pt-border:    #3A4050;
  --glass-border: #565E73;
  --glass-bg:     rgba(28, 31, 38, .94);
  --glass-bg-2:   rgba(28, 31, 38, .88);
}

/* تسطيح الظل يُلغي إحساس الاستجابة عند المرور، فيحمله الحدّ بدله */
html[data-theme="theme-bordered"] .card:hover {
  border-color: rgba(var(--brand-rgb), .32) !important;
}

/* =====================================================================
   17) ثيم Semi Dark — شريط جانبي داكن على صفحة فاتحة
   ---------------------------------------------------------------------
   كل أثر هذا الثيم في الشريط الجانبي، وقاعدة الزجاج أعلاه كانت تفرض
   عليه خلفية فاتحة بـ!important فتمحوه بالكامل. توكنات --pt-menu-*
   تفصل الشريط عن الزجاج العام، فيقلبها الثيم وحده دون أن يسحب معه
   النافبار والقوائم والنوافذ.

   اللون #242745 هو لون theme-semi-dark.css نفسه — بشفافية .92 ليبقى
   الـbackdrop-filter ذا معنى وتُحفظ لغة الزجاج.
   ألوان النصّ والأيقونات تأتي من theme-semi-dark.css ذاته، ولا نكرّرها.
   ===================================================================== */
html[data-theme="theme-semi-dark"] {
  --pt-menu-bg:          rgba(36, 39, 69, .92);
  --pt-menu-border:      rgba(255, 255, 255, .08);
  --pt-menu-active-fg:   var(--brand-light);
  --pt-menu-active-icon: var(--brand-light);
  --pt-menu-hover-bg:    rgba(255, 255, 255, .06);
}

/* النافبار يجاوب سبيدره الكحلي بميل بارد خفيف.
   كان يرث الأبيض ‎.72‎ من الأساس حرفياً، فيتطابق مع نافبار الافتراضي تماماً —
   أي أن «شبه داكن» كان يفترق في السبيدر وحده، والشريط العلوي يفضح التطابق.
   الميل هنا بالكاد يُدرَك منفرداً ويبين عند المقارنة، وهو المطلوب: الصفحة
   فاتحة والسبيدر داكن، فالنافبار جسرٌ بينهما لا نسخةٌ من الافتراضي.
   ‎light-style‎ شرط لازم: في الوضع الداكن يملك الأساسُ الداكن ‎--glass-bg‎
   ولا معنى لتفتيحه هنا. */
html.light-style[data-theme="theme-semi-dark"] {
  --glass-bg:     rgba(250, 251, 254, .80);
  --glass-bg-2:   rgba(250, 251, 254, .66);
  --glass-border: rgba(36, 39, 69, .14);
}

/* =====================================================================
   17-ب) ثيم «نحاسي» — هوية معلم الحاسب على كامل السطح
   ---------------------------------------------------------------------
   الثلاثة الآخرون تعديلات مجهرية: Bordered يمسّ حدّ البطاقة وظلّها،
   وSemi Dark يمسّ الشريط الجانبي وحده. فلو قلب هذا الثيم السطح كلّه لبدا
   الثلاثة بجانبه بلا معنى — لا لأنه أفضل بل لأنه من فئة أخرى.

   فالمعايرة مقصودة: **الشريط الجانبي وحده يحمل الهوية صريحةً**، وما عداه
   دفءٌ يُحَسّ ولا يُرى — خلفية أقرب للأبيض بفارق درجتين، وحدود وظلال تميل
   للبنّي بدل الرمادي المزرقّ. من يقارن يلحظ الفرق، ومن لا يقارن يشعر
   بالراحة فقط. هذه جرعة «لمسة خفيفة» المطلوبة.

   محصور بـ light-style عمداً: theme-cmp-dark.css يسقط للمظهر الداكن
   الافتراضي، فلا معنى لتوكنات نحاسية فوقه.
   ===================================================================== */
html.light-style[data-theme="theme-cmp"] {
  /* الأسطح — دفء بالكاد يُدرَك منفرداً، ويبين عند المقارنة */
  --pt-bg:      #FDFAF7;
  --pt-bg-top:  #FFFDFB;
  --pt-card:    #FFFFFF;
  --pt-border:  #EDE5DD;

  --glass-bg:     rgba(255, 253, 250, .74);
  --glass-bg-2:   rgba(255, 253, 250, .60);
  --glass-border: rgba(var(--brand-rgb), .12);

  /* الشريط الجانبي — حامل الهوية الوحيد، فيبقى صريحاً */
  --pt-menu-bg:       rgba(251, 240, 231, .92);
  --pt-menu-border:   rgba(var(--brand-rgb), .18);
  --pt-menu-hover-bg: rgba(var(--brand-rgb), .09);

  /* ظلٌّ رمادي فوق سطح دافئ يبدو متّسخاً لا عميقاً — فبنّي خفيف */
  --pt-shadow-sm: 0 2px 8px   rgba(138, 74, 28, .05);
  --pt-shadow:    0 8px 24px  rgba(138, 74, 28, .07);
  --pt-shadow-lg: 0 18px 48px rgba(138, 74, 28, .12);

  --brand-soft: rgba(var(--brand-rgb), .10);
}

/* هالات الخلفية العائمة: الزرقاء منها تُبرّد السطح وتناقض الثيم، فتُستبدل
   بنحاسية خافتة. القاعدة الأصلية في §3 بلا !important فيكفي وزن الانتقاء. */
html.light-style[data-theme="theme-cmp"] body::before {
  background:
    radial-gradient(30rem 30rem at 18% 22%,  rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(40rem 40rem at 88% -6%,  rgba(var(--brand-rgb), .055), transparent 62%),
    radial-gradient(36rem 36rem at -8% 12%,  rgba(var(--brand-rgb), .03),  transparent 62%),
    radial-gradient(32rem 32rem at 50% 118%, rgba(212, 160, 110, .04),     transparent 62%),
    linear-gradient(180deg, var(--pt-bg-top) 0%, var(--pt-bg) 100%);
}

/* البطاقة البيضاء على سطح دافئ تحتاج حدّاً أدفأ عند التحويم لا رمادياً */
html.light-style[data-theme="theme-cmp"] .card:hover {
  border-color: rgba(var(--brand-rgb), .22) !important;
}

/* =====================================================================
   18) قائمة الواجهة العلوية — الشاشات المتوسطة (992–1399px)
   ---------------------------------------------------------------------
   ثمانية روابط + الشعار + الأدوات (سمة/خدمات/دخول/اشتراك) يحتاجون
   ~1150px بينما الحاوية توفر ~930px في هذا المدى، فتُدفع أزرار
   الدخول والاشتراك خارج حافة الشاشة اليسرى (RTL) ويستحيل الدخول.
   حاوية Bootstrap تبقى 1140px حتى 1400px، لذا يمتد الضغط إلى 1399px؛
   فوقها الحاوية 1320px فيتّسع كل شيء ويعود الاتساع الأصلي.
   ملاحظة: template-customizer يعيد إدراج core.css بعدنا، لذا نغلب
   أدوات Bootstrap (ms-5/me-4 ذات !important) بتخصيص أعلى + !important.
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .layout-navbar .navbar.landing-navbar {
    padding-inline: .75rem !important;      /* بدل px-md-4 */
  }
  .layout-navbar .navbar.landing-navbar .navbar-brand {
    margin-inline-end: .5rem !important;    /* بدل me-4 */
  }
  .layout-navbar .navbar.landing-navbar .navbar-brand img {
    max-height: 36px;
    width: auto;
  }
  .layout-navbar .navbar.landing-navbar .landing-nav-menu .navbar-nav {
    margin-inline-start: 0 !important;      /* بدل ms-5 */
  }
  .layout-navbar .navbar.landing-navbar .landing-nav-menu .nav-link {
    padding-inline: .25rem;
    font-size: .8125rem;
  }
  .layout-navbar .navbar.landing-navbar .navbar-nav.flex-row .btn {
    font-size: .8125rem;
    padding: .45rem .65rem !important;
    white-space: nowrap;
  }
}

/* =====================================================================
   19) قائمة الواجهة العلوية — عرض موحّد في كل الصفحات
   ---------------------------------------------------------------------
   كانت الرئيسية V3 وحدها تفكّ قيد .container (بقواعد body.has-h2v3 في
   home-v3.css) فتمتدّ قائمتها حتى 1440px، بينما بقية الصفحات على حاوية
   Bootstrap (~1140px) — فيقفز عرض القائمة بين صفحة وأخرى.
   هنا نعمّم مقاس الرئيسية (الأعرض) على الجميع: القاعدة منقولة كما هي
   من home-v3.css (وحُذفت هناك)، منطّقة بـ.front-navbar — الصنف يُضاف في
   front-cmp/partials/menu.blade.php وحده فلا تطال نافبار لوحة التحكم.
   ===================================================================== */
nav.layout-navbar.front-navbar{
  max-width:none !important;
  width:100% !important;
  inset-inline:0 !important;
}
nav.layout-navbar.front-navbar > .container{
  max-width:1440px !important;
  width:100% !important;
  padding-inline:24px !important;   /* متناظر كالأصل */
}
/* على الجوال 24px تخنق الشريط — نصفها يكفي فيتّسع صندوق القائمة */
@media (max-width: 767.98px){
  nav.layout-navbar.front-navbar > .container{
    padding-inline:12px !important;
  }
}

/* الأدوات ملتصقة بالطرف الأيسر بسبب ms-auto — هامش ماديّ يفصلها عن الحافّة */
@media (min-width: 992px){
  nav.layout-navbar.front-navbar .navbar-nav.flex-row.align-items-center.ms-auto{
    margin-left:16px !important;
  }
}

/* =====================================================================
   19) أداة تخصيص القالب — إظهار على جميع أحجام الشاشات
   ===================================================================== */
@media (max-width: 1200px) {
  #template-customizer {
    display: flex !important;
    visibility: visible !important;
  }
  #template-customizer .template-customizer-open-btn {
    display: block !important;
    z-index: 99999999;
  }
}
@media (max-width: 767.98px) {
  #template-customizer .template-customizer-open-btn {
    top: 80px;
  }
}
@media (max-width: 575.98px) {
  #template-customizer {
    width: 100vw;
    transform: translateX(calc(100vw + 20px));
  }
  [dir=rtl] #template-customizer {
    transform: translateX(calc(-100vw - 20px));
  }
  #template-customizer .template-customizer-open-btn {
    top: 70px;
  }
  #template-customizer .col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  #template-customizer .custom-option-icon .custom-option-body img {
    max-width: 100%;
    height: auto;
  }
}