/* ===== 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: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
  box-shadow: 0 2px 18px rgba(26, 28, 61, .08) !important;
}
.navbar-brand { letter-spacing: -.3px; font-weight: 800; font-size: 1.3rem; }
.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 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); }

.tree-line { padding-right: 1.25rem; border-right: 2px dashed #d3d7ee; margin-right: .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: rgba(255, 255, 255, .85) !important; backdrop-filter: blur(10px); }
.powered-by { font-size: .78rem; letter-spacing: .3px; opacity: .85; }
.powered-by span {
  font-weight: 800;
  background: linear-gradient(135deg, var(--sb-indigo), var(--sb-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===== الموبايل ===== */
@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-right: .7rem; margin-right: .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 .4rem; }
  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; } }

/* 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; }