/* ===== SBook — هوية بصرية حيوية ===== */
:root {
  --sb-primary: #4a45d6;
  --sb-primary-dark: #322ea8;
  --sb-primary-soft: #eceafe;
  --sb-indigo: #6366f1;
  --sb-teal: #0ea5a4;
  --sb-purple: #8b5cf6;
  --sb-pink: #ec4899;
  --sb-amber: #f59e0b;
  --sb-rose: #f43f5e;
  --sb-green: #10b981;
  --sb-ink: #1a1c3d;
  --sb-muted: #6b7194;
  --sb-radius: 1rem;
  --sb-shadow: 0 4px 16px rgba(26, 28, 61, .06);
  --sb-shadow-lg: 0 14px 40px rgba(26, 28, 61, .16);
  --bs-primary: var(--sb-primary);
  --bs-link-color: var(--sb-primary);
  --bs-link-hover-color: var(--sb-primary-dark);
}

html { font-family: 'Tajawal', 'Segoe UI', 'Tahoma', sans-serif; font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }
html { position: relative; min-height: 100%; }

/* خلفية حيوية متدرجة بلا بياض */
body {
  font-family: inherit;
  color: var(--sb-ink);
  background: #eef0fb !important;
  background-image:
    radial-gradient(1100px 500px at 100% -5%, rgba(99, 102, 241, .22), transparent 60%),
    radial-gradient(900px 460px at -10% 8%, rgba(139, 92, 246, .18), transparent 55%),
    radial-gradient(800px 420px at 55% 108%, rgba(14, 165, 164, .16), transparent 60%),
    linear-gradient(180deg, #f2f4fe 0%, #e9ecfa 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* بطاقات زجاجية */
.card {
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
}
.card-header {
  background: linear-gradient(90deg, var(--sb-primary-soft), transparent);
  font-weight: 700;
  border-radius: var(--sb-radius) var(--sb-radius) 0 0 !important;
  border-bottom: 1px solid #e7e9f8;
}
.form-label { font-weight: 600; }
.nav-link { font-weight: 600; }

/* عناوين الصفحات بخط لوني */
main > h3:first-of-type, main > .d-flex h3 {
  position: relative; padding-inline-start: .8rem; font-weight: 800;
}
main > h3:first-of-type::before, main > .d-flex h3::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .1em; bottom: .1em;
  width: 6px; border-radius: 4px;
  background: linear-gradient(180deg, var(--sb-primary), var(--sb-pink));
}

/* أزرار */
.btn { border-radius: .6rem; font-weight: 600; }
.btn-primary {
  background: linear-gradient(135deg, var(--sb-indigo), var(--sb-primary));
  border: 0; box-shadow: 0 4px 14px rgba(74, 69, 214, .3);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
  transform: translateY(-1px);
}
.btn-success { background: linear-gradient(135deg, #34d399, var(--sb-green)); border: 0; }
.btn-danger  { background: linear-gradient(135deg, #fb7185, var(--sb-rose)); border: 0; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, var(--sb-amber)); border: 0; color: #3d2c00; }
.btn-outline-primary { color: var(--sb-primary); border-color: var(--sb-primary); }
.btn-outline-primary:hover { background: var(--sb-primary); border-color: var(--sb-primary); }
.btn-lg { border-radius: .75rem; }

/* الشريط العلوي */
header .navbar {
  background: linear-gradient(90deg, var(--sb-primary, #3459e6), #6f42c1 85%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 18px rgba(26, 28, 61, .18) !important;
}
/* نفس انحناء روابط القائمة: بلا border-radius كان تظليل المرور مستطيلاً وحده بينها */
.navbar-brand {
  letter-spacing: -.3px; font-weight: 800; font-size: 1.3rem;
  border-radius: .6rem; padding-inline: .5rem; margin-inline-end: .25rem;
  transition: background .14s, color .14s;
}
.navbar-brand i {
  background: linear-gradient(135deg, var(--sb-indigo), var(--sb-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.navbar-nav .nav-link {
  border-radius: .6rem; padding-inline: .75rem !important;
  transition: background .14s, color .14s, transform .14s;
}
.navbar-nav .nav-link:hover {
  background: var(--sb-primary-soft); color: var(--sb-primary-dark); transform: translateY(-1px);
}
.dropdown-menu {
  border: 1px solid rgba(255, 255, 255, .8); border-radius: .8rem;
  box-shadow: var(--sb-shadow-lg); padding: .4rem;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
}
.dropdown-item { border-radius: .5rem; margin: .1rem 0; width: auto; font-weight: 500; }
.dropdown-item:hover { background: var(--sb-primary-soft); color: var(--sb-primary-dark); }
/* العنصر المحدَّد (مثل اللغة الحالية): لون التصميم بدل الأزرق الافتراضي القاسي */
.dropdown-item.active,
.dropdown-item:active {
  background: var(--sb-primary-soft) !important;
  color: var(--sb-primary-dark) !important;
  font-weight: 700;
}
.dropdown-item i { opacity: .8; width: 1.3em; color: var(--sb-primary); }
.dropdown-divider { border-color: #ecedf7; }

/* جداول */
.table { background: transparent; border-radius: var(--sb-radius); overflow: hidden; }
.table > :not(caption) > * > * { background-color: transparent; }
.table thead th {
  background: linear-gradient(180deg, #e8eafc, #dfe3fa);
  font-weight: 700; border-bottom: 0; color: #2f3566; white-space: nowrap;
}
.table tbody tr { background: rgba(255, 255, 255, .75); }
.table-hover tbody tr:hover { background: var(--sb-primary-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, .55); }

/* شارات */
.badge { font-weight: 600; letter-spacing: .2px; border-radius: .5rem; }

/* تنبيهات ملوّنة */
.alert { border: 0; border-radius: .8rem; border-inline-start: 5px solid transparent; }
.alert-info { background: #e8f4fd; border-inline-start-color: #3b9dda; color: #10496b; }
.alert-success { background: #e6f8f1; border-inline-start-color: var(--sb-green); color: #0b5b41; }
.alert-warning { background: #fff6e3; border-inline-start-color: var(--sb-amber); color: #6b4708; }
.alert-danger { background: #ffeaee; border-inline-start-color: var(--sb-rose); color: #7a1327; }
.alert-secondary { background: #eef0fa; border-inline-start-color: #9aa0c4; }

/* شريط الاشتراك */
.sub-banner { text-align: center; padding: .45rem .8rem; font-size: .95rem; font-weight: 700; }
.sub-banner-danger { background: linear-gradient(90deg, #be123c, var(--sb-rose)); color: #fff; }
.sub-banner-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #452c00; }
.sub-banner a { color: inherit; }

/* بطاقات الملخص */
.stat-card { color: #fff; border: 0; overflow: hidden; position: relative; box-shadow: var(--sb-shadow-lg); }
.stat-card::after {
  content: ''; position: absolute; inset-inline-end: -25px; top: -25px;
  width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.stat-card::before {
  content: ''; position: absolute; inset-inline-end: 20px; bottom: -35px;
  width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.stat-card .stat-label { font-size: .85rem; opacity: .92; font-weight: 600; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 800; line-height: 1.3; }
.stat-card .stat-icon { font-size: 2.3rem; opacity: .45; }
.stat-card a, .stat-card small { color: #fff; }
.stat-sales { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.stat-cash  { background: linear-gradient(135deg, #6366f1, #4338ca); }
.stat-due   { background: linear-gradient(135deg, #fb7185, #be123c); }
.stat-open  { background: linear-gradient(135deg, #a78bfa, #6d28d9); }

/* وصول سريع */
.quick-link {
  transition: transform .14s, box-shadow .14s; border-top: 3px solid transparent;
  background: rgba(255, 255, 255, .92);
}
.quick-link:hover {
  transform: translateY(-4px); box-shadow: var(--sb-shadow-lg);
  border-top-color: var(--sb-primary); background: #fff;
}

/* أفضل المواد */
.top-rank { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; }
.top-bar { height: 8px; border-radius: 4px; background: #e8eafc; }
.top-bar .progress-bar { background: linear-gradient(90deg, var(--sb-indigo), var(--sb-pink)); border-radius: 4px; }

/* بطاقات الباقات */
.plan-card { position: relative; border: 2px solid #e2e5f7; transition: transform .14s, box-shadow .14s; }
.plan-card:hover { transform: translateY(-5px); box-shadow: var(--sb-shadow-lg); }
.plan-featured { border-color: var(--sb-teal); }
.plan-badge { position: absolute; top: -.7rem; inset-inline-start: 50%; transform: translateX(50%);
  padding: .2rem .7rem; border-radius: 1rem; font-size: .78rem; font-weight: 700; }
.plan-price { font-size: 2.6rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--sb-indigo), var(--sb-pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan-cur { font-size: 1.2rem; font-weight: 700; opacity: .6; margin-inline-start: .15rem; -webkit-text-fill-color: var(--sb-muted); }

/* ترقيم الصفحات */
.pagination .page-link { border: 0; border-radius: .5rem; margin: 0 .1rem; color: var(--sb-primary); font-weight: 600; }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--sb-indigo), var(--sb-primary)); color: #fff; }
.pagination .page-link:hover { background: var(--sb-primary-soft); }

/* خصائص منطقية (inline-start) كي تنعكس الشجرة تلقائياً في الإنجليزية LTR */
.tree-line { padding-inline-start: 1.25rem; border-inline-start: 2px dashed #d3d7ee; margin-inline-start: .5rem; }
.badge-pending { background: var(--sb-amber); color: #3d2c00; }
.badge-active { background: var(--sb-green); color: white; }
.badge-expired { background: var(--sb-rose); color: white; }
.text-monos { font-family: 'Consolas', monospace; }
.btn:focus, .btn:active:focus, .form-control:focus { box-shadow: 0 0 0 .2rem rgba(74, 69, 214, .25); }
.form-control, .form-select { border-radius: .6rem; border-color: #dcdff2; background: rgba(255, 255, 255, .9); }
.form-control:focus, .form-select:focus { border-color: var(--sb-primary); background: #fff; }
/* التذييل بنفس تدرّج الهيدر ونص أبيض */
footer {
  background: linear-gradient(90deg, var(--sb-primary, #3459e6), #6f42c1 85%) !important;
  border-top: 0 !important;
  color: rgba(255, 255, 255, .9) !important;
}
.powered-by { font-size: .78rem; letter-spacing: .3px; }
.powered-by span { font-weight: 800; color: #fff; }
.footer-line a { color: #fff; opacity: .92; }
.footer-line a:hover { opacity: 1; text-decoration: underline; }

/* ===== الموبايل ===== */
@media (max-width: 991.98px) {
  .navbar-collapse { max-height: 80vh; overflow-y: auto; padding-bottom: .5rem; }
  .navbar-nav .nav-link { padding: .6rem .7rem !important; }
  .navbar-nav .dropdown-menu {
    border: 0; box-shadow: none; background: var(--sb-primary-soft);
    margin: .2rem .4rem .4rem; border-radius: .6rem;
  }
  .navbar-nav .dropdown-menu[style*="display:none"] { display: none !important; }
  header .navbar .navbar-nav:last-child { border-top: 1px solid #e6e8f6; margin-top: .4rem; padding-top: .4rem; }
}
@media (max-width: 767.98px) {
  main.container { padding-inline: .75rem; }
  h3, .h3 { font-size: 1.25rem; }

  /* صفوف "العنوان + أزرار الإجراءات": تلتف بدل أن تدفع الصفحة أفقياً.
     flex-wrap لا يغيّر شيئاً إن كان الصف يتّسع أصلاً. */
  main .d-flex.justify-content-between { flex-wrap: wrap; }
  main .d-flex.justify-content-between > * { min-width: 0; }

  /* الأشجار (حسابات/مستودعات/أقسام/أصناف): الإزاحة المتداخلة + أزرار الصف
     تتجاوز الشاشة — نجعل الشجرة نفسها هي ما يُمرَّر. */
  .acc-tree { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .acc-tree .acc-row { min-width: max-content; }
  .tree-line { padding-inline-start: .7rem; margin-inline-start: .25rem; }
  .stat-card .stat-value { font-size: 1.25rem; }
  .stat-card .stat-icon { font-size: 1.6rem; }
  .card { border-radius: .8rem; }
  .card.p-4 { padding: 1rem !important; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table { font-size: .9rem; }
  .table td, .table th { padding: .5rem .55rem; }

  /* ===== مساحة أكبر للجداول — التمرير يبقى هو الحل، لكن على عرضٍ أوسع =====
     مكسبان منفصلان:
     ١) الحاوية تسترد الحشوات: جدولٌ خارج البطاقات يمتد لحافتي الشاشة، وداخلها
        يمتد لحافتي البطاقة. الاسترداد بمقدار الحشوة فقط — الامتداد خارج حدود
        البطاقة يجعل الجدول يعوم فوق إطارها.
     ٢) عرضٌ أدنى للجداول الغنية بالأعمدة: بدونه يُضغَط الجدول ليطابق الشاشة
        فتنسحق الأعمدة (~٥٠ بكسل للعمود) ولا يعود للتمرير ما يفعله أصلاً. */
  /* max-width:none ضروري: القاعدة العامة تقيّدها بـ100% فتُزاح الحاوية بدل أن تتسع */
  main .table-responsive:not(.card *) { margin-inline: -.75rem; max-width: none; }
  main .card.p-3 .table-responsive,
  main .card.p-4 .table-responsive,
  main .card.p-5 .table-responsive { margin-inline: -1rem; max-width: none; }
  /* p-2 أخيراً: عند تداخل البطاقات يفوز الاسترداد الأصغر فلا يفيض شيء */
  main .card.p-2 .table-responsive { margin-inline: -.5rem; max-width: none; }

  .table-responsive > .table:has(thead th:nth-child(5)) { min-width: 44rem; }
  .table-responsive > .table:has(thead th:nth-child(8)) { min-width: 56rem; }
  td.text-end .btn, td.text-end form { margin-bottom: .15rem; }
  .form-control, .form-select { font-size: 16px; min-height: 42px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  footer.sticky-bottom { position: static !important; }
  .plan-price { font-size: 2.1rem; }
  .dropdown-menu { font-size: .95rem; }
  .pagination { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .pos-grid, .m-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
  .display-4 { font-size: 2.2rem; }

  /* الهواتف الضيقة (320px): حتى مجموعات الأزرار الداخلية يجب أن تلتف.
     مستثنى: input-group و btn-group كي لا تتفكك، والحاويات القابلة للتمرير. */
  main .d-flex:not(.input-group):not(.btn-group) { flex-wrap: wrap; }
  main .badge { white-space: normal; }
}

/* ===== الجداول على الشاشات الصغيرة =====
   كل جدول يُلفّ تلقائياً (site.js) بحاوية تمرير، فلا يدفع الصفحة أفقياً.
   الحاوية وحدها تُمرَّر، ويظهر تدرّج خفيف يدل على وجود أعمدة مخفية. */
.table-responsive { -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-responsive.is-scrollable {
  background-image: linear-gradient(to left, rgba(74, 69, 214, .10), transparent 28px);
  border-radius: .5rem;
}
.table-responsive.is-scrollable::after {
  content: '⇠ مرّر لرؤية باقي الأعمدة';
  display: block; font-size: .68rem; color: var(--sb-muted);
  padding: .15rem .4rem 0; text-align: start;
}
@media (min-width: 992px) { .table-responsive.is-scrollable::after { display: none; } }

/* ===== الهيدر الملوّن بتدرّج الموقع ===== */
.sb-navbar {
  background: linear-gradient(90deg, var(--sb-primary, #3459e6), #6f42c1 85%);
  border-bottom: 0;
}
.sb-navbar .navbar-brand,
.sb-navbar .nav-link,
.sb-navbar .brand-name,
.sb-navbar .notif-bell { color: #fff; }
/* عند المرور/النقر: خلفية بيضاء شفيفة ونص أبيض (يبقى مقروءاً على التدرّج) —
   نتجاوز صراحةً قاعدة .navbar-nav .nav-link:hover التي كانت تضع خلفية فاتحة */
.sb-navbar .nav-link:hover,
.sb-navbar .nav-link:focus,
.sb-navbar .nav-link:active,
.sb-navbar .navbar-brand:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  transform: none;
}
.sb-navbar .dropdown-toggle::after { opacity: .85; }
.sb-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
/* القوائم المنسدلة نفسها تبقى بيضاء بنص داكن (وضوح) */

/* شعار الموقع المرفوع (wwwroot/img/logo.png) — يتقلّص تلقائياً على الجوال */
.brand-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.brand-name { font-weight: 800; letter-spacing: .2px; color: #fff; }
@media (max-width: 575.98px) {
  .brand-logo { height: 30px; max-width: 110px; }
  .brand-name { font-size: 1.05rem; }
}

/* جرس الإشعارات الاحترافي: زر دائري + شارة عدّاد أنيقة، ظاهر دائماً حتى على الموبايل */
.notif-bell { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  transition: background-color .15s ease, transform .15s ease; }
.notif-bell:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.notif-bell .badge { top: 4px; inset-inline-end: 2px; font-size: .62rem; min-width: 17px; height: 17px;
  padding: 0 4px; line-height: 17px; box-shadow: 0 0 0 2px #6f42c1; }
/* المجموعة الدائمة (الجرس + اللغة): على الموبايل تنزاح لجانب زر القائمة (الهامبرغر) */
#navQuick { flex-wrap: nowrap; }
#navQuick .dropdown-menu { position: absolute; }
@media (max-width: 991.98px) {
  #navQuick { margin-inline-start: auto; }   /* يدفعها لجانب زر القائمة */
  .navbar-toggler { margin-inline-start: .5rem; }
  /* قائمة الإشعارات: لوحة مثبّتة أسفل الهيدر بعرض الشاشة (تتجاوز حساب Popper) */
  #notifBell .dropdown-menu.show {
    position: fixed !important;
    inset: 60px .5rem auto .5rem !important;
    transform: none !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
  }
}

/* روابط إنستغرام في التذييل بجانب الاسم على نفس السطر */
.footer-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.footer-line a { text-decoration: none; }

/* Print */
@media print {
  .no-print, header, footer, nav, .navbar, .btn { display: none !important; }
  body { background: #fff !important; background-image: none !important; }
  .card, .print-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; background: #fff !important; }
  .stat-card { color: #000 !important; background: #f4f4f4 !important; }
  a { color: inherit; text-decoration: none; }
  /* لا تقصّ الجداول عند الطباعة */
  .table-responsive { overflow: visible !important; }
  .table-responsive.is-scrollable { background-image: none; }
  .table-responsive.is-scrollable::after { display: none; }
}

/* Money tafqit caption */
.tafqit-caption { font-size: .82rem; line-height: 1.3; color: var(--sb-muted); }
input.money { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.money-text { direction: ltr; unicode-bidi: plaintext; display: inline-block; }

/* Searchable combobox */
.combo-wrap { position: relative; }
.combo-hidden-select { position: absolute; opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; border: 0; }
.combo-list { width: 100%; max-height: 280px; overflow-y: auto; z-index: 1080; }
.combo-item.active, .combo-item:focus { background-color: var(--bs-primary, #0d6efd); color: #fff; }
.combo-input.is-invalid { border-color: #dc3545; }

/* ===== إصلاح تكديس القوائم المنسدلة =====
   البطاقة الزجاجية (backdrop-filter) تُنشئ سياق تكديس يحبس z-index القوائم داخلها،
   فتُرسم البطاقات والتنبيهات التالية في DOM فوق القائمة المفتوحة.
   الحل: رفع البطاقة (أو أي حاوية) التي تحوي قائمة مفتوحة فوق ما بعدها. */
.card.combo-open,
.card:has(.dropdown-menu.show),
.card:has(.combo-list.show) { position: relative; z-index: 1075; }
/* الحاويات ذات التمرير تقصّ القائمة — نسمح بظهورها خارج حدودها */
.card-body:has(.combo-list.show), .card:has(.combo-list.show) { overflow: visible; }
/* site.js يلفّ كل جدول بـ.table-responsive (overflow-x:auto)، وهذا يقصّ القائمة المنسدلة
   داخل خلايا الجدول فلا يظهر منها إلا أول سطر. نرفع القصّ ما دامت القائمة مفتوحة.
   الصنف .combo-open يضيفه combo.js احتياطاً للمتصفحات بلا دعم :has. */
.table-responsive.combo-open,
.table-responsive:has(.combo-list.show) { overflow: visible; }
/* والجدول نفسه يقصّ أيضاً: .table له overflow:hidden لتدوير زواياه (أعلى الملف)،
   فتُقصّ القائمة المفتوحة داخل خلية إلى حدود الجدول ولا يظهر منها إلا أول سطر.
   نرفع القصّ ما دامت القائمة مفتوحة فقط — التدوير يعود فور إغلاقها. */
.table.combo-open,
.table:has(.combo-list.show) { overflow: visible; }

/* ===== خيارات وضع المينو (إعدادات ← التصميم) =====
   كل خيار بطاقة كاملة قابلة للنقر، والمُحدَّد يُبرَز بإطار ملوّن. */
.menu-mode-opt {
    display: block;
    width: 100%;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.menu-mode-opt:hover { background-color: rgba(13, 110, 253, .04); }
.menu-mode-opt:has(input:checked) {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .07);
}
.menu-mode-opt .form-text { font-size: .78rem; }