/* ==========================================================================
   Theme (RTL/Bootstrap friendly) — Global polish for colors, borders, tables
   * لا يحتاج تعديل على الصفحات — انتقائيات عامة تغطي المكوّنات الشائعة
   * بلا transforms على البطاقات/صفوف الجداول لتجنب مشاكل dropdown
   ========================================================================== */

/* --------------------------- Variables --------------------------- */
:root{
  /* Brand */
  --brand:        #4a86ff;
  --brand-50:     #eef4ff;
  --brand-100:    #e1ebff;
  --brand-600:    #2f6ef0;
  --brand-700:    #245bd0;

  /* Semantic */
  --success:      #28a745;
  --warning:      #ffc107;
  --danger:       #dc3545;
  --info:         #17a2b8;

  /* Neutrals */
  --bg:           linear-gradient(180deg, #f8faff 0%, #f2f5fa 100%);
  --surface:      #ffffff;
  --surface-2:    #f7f9fe;
  --text:         #2d3748;
  --muted:        #718096;
  --border:       #e2e8f0;

  /* Tables */
  --tbl-head:     #f5f8ff;
  --tbl-strip:    #fbfcff;
  --tbl-hover:    #f1f5ff;

  /* Shape & shadow */
  --radius:       .9rem;
  --radius-sm:    .6rem;
  --radius-lg:    1.1rem;
  --shadow-sm:    0 4px 12px rgba(17, 24, 39, .06);
  --shadow-md:    0 10px 24px rgba(17, 24, 39, .12);

  /* Focus ring */
  --focus-ring:   0 0 0 .22rem rgba(74, 134, 255, .25);
}

/* Dark (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --brand:     #78a7ff;
    --brand-50:  rgba(120,167,255,.08);
    --brand-600: #9bc0ff;
    --brand-700: #78a7ff;

    --bg:        linear-gradient(180deg, #101625 0%, #0d1117 100%);
    --surface:   #161c27;
    --surface-2: #1f2736;
    --text:      #e6edf3;
    --muted:     #9aa9bd;
    --border:    #2a3446;

    --tbl-head:  #1c2433;
    --tbl-strip: #161e2b;
    --tbl-hover: #222c3e;

    --shadow-sm: 0 4px 12px rgba(0,0,0,.35);
    --shadow-md: 0 14px 30px rgba(0,0,0,.45);
    --focus-ring:0 0 0 .22rem rgba(120,167,255,.25);
  }
}

/* Manual dark class (optional) */
.theme-dark{ color-scheme: dark; }

/* --------------------------- Base --------------------------- */
*{ box-sizing: border-box; }
html[dir="rtl"] body{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a{ color: var(--brand); text-decoration: none; transition: .2s; }
a:hover{ color: var(--brand-600); }
small,.small{ color: var(--muted); }
:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: .35rem; }

/* --------------------------- Global component polish (no markup changes) ---------------------------
   نستخدم انتقائيات عامة قصيرة تغطي أغلب مكوّنات Bootstrap بدون تعديل الصفحات
----------------------------------------------------------------- */
/* Containers with borders & panels */
[class*="card"], .modal-content, .dropdown-menu, .offcanvas,
.list-group, .toast, .alert, .nav-tabs .nav-link, .accordion-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Header-like pieces inside those containers */
.card-header, .modal-header, .offcanvas-header, .accordion-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}

/* Buttons & inputs (catch-all by prefix) */
[class*="btn"]{
  border-radius: .65rem;
  font-weight: 600;
  box-shadow: none;
}
.btn-primary{ background: var(--brand); border-color: var(--brand); }
.btn-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary{ color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover{ background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-600); }

[class*="form-control"], [class*="form-select"], [class*="form-check-input"], .input-group-text{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .65rem;
}
[class*="form-control"]:focus, [class*="form-select"]:focus{
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}

/* Pills/Badges */
.badge, .nav-pills .nav-link{ border-radius: 999px; }

/* Alerts */
.alert{ border-inline-start: 4px solid currentColor; box-shadow: var(--shadow-sm); }
.alert-info{    color:#0b6680; background:#eef9ff; }
.alert-warning{ color:#7a5a00; background:#fff7e1; }
.alert-success{ color:#0f5e3c; background:#eaf8f2; }
.alert-danger{  color:#7b2130; background:#ffeff2; }

/* --------------------------- Tables (global) --------------------------- */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* لقص الحواف الدائرية */
}
table thead th{
  background: var(--tbl-head);
  color: var(--text);
  font-weight: 700;
  border-bottom: 2px solid var(--border) !important;
  padding: .9rem 1rem;
  text-align: right;
  position: sticky; top: 0; z-index: 1;
}
table tbody td, table tbody th{
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
tbody tr:nth-of-type(odd){ background: var(--tbl-strip); }
tbody tr:hover{
  background: var(--tbl-hover);
  /* لا تستخدم transform هنا لتجنّب مشاكل dropdown */
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); /* لا شيء، مجرد placeholder */
}
.table-responsive{ border: 0; background: transparent; }

/* “Chip” actions inside tables */
.table .btn{ padding: .3rem .55rem; border-radius: .55rem; }

/* --------------------------- Navbar & dropdown stability --------------------------- */
.navbar, .topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.navbar.sticky-top{ z-index: 1060; } /* أعلى من المحتوى */
.navbar .dropdown{ position: static; } /* للسماح بخروج القائمة خارج الحاوية */
.navbar .dropdown-menu{ z-index: 1070; }

/* Popper-friendly tweaks */
.dropdown-menu{ will-change: transform; contain: paint; }

/* --------------------------- Cards (global polish) --------------------------- */
[class*="card"]{
  transition: box-shadow .2s ease, background .2s ease;
}
[class*="card"]:hover{
  /* لا transform هنا لتجنّب سياقات تكديس قرب dropdown */
  box-shadow: var(--shadow-md);
}
.card-body{ overflow: initial; }
.card-hero{ background: var(--surface-2); }

/* --------------------------- Pagination --------------------------- */
.pagination .page-link{
  border-radius: .6rem;
  border: 1px solid var(--border);
  color: var(--text);
  margin: 0 2px;
}
.pagination .page-item.active .page-link{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* --------------------------- Progress / timeline (optional polish) --------------------------- */
.progress{ height: .6rem; border-radius: 999px; background: var(--surface-2); }
.progress-bar{ background: var(--brand); }

/* --------------------------- Tooltips --------------------------- */
.tooltip-inner{ background:#111827; }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before{ border-top-color:#111827; }

/* --------------------------- Helpers --------------------------- */
.text-muted-2{ color: var(--muted) !important; }
.rounded-2xl{ border-radius: 1.25rem !important; }
.shadow-soft{ box-shadow: var(--shadow-md) !important; }

.page-fade{ opacity:0; transition: opacity .25s ease; }
.app-ready .page-fade{ opacity:1; }

/* --------------------------- Print --------------------------- */
@media print{
  body{ background:#fff !important; }
  .navbar,.topbar,.sidebar,.btn,.pagination,.alert,.toast,.offcanvas,.no-print{ display:none !important; }
  table{ border-color:#222 !important; box-shadow:none !important; }
  table thead th{ position: static !important; }
}
/* ارتفاع الشريط الجانبي وثباته على الديسكتوب */
.sidebar-sticky{
  position: sticky;
  top: 56px;              /* ارتفاع التوب بار لديك */
  height: calc(100vh - 56px);
  overflow: auto;
}

/* تحسين المسافات على الموبايل */
@media (max-width: 991.98px){
  .sidebar-sticky{ position: static; height: auto; overflow: visible; }
}

/* نعومة للقائمة */
.sidebar-sticky .list-group, .sidebar-sticky nav { padding: .25rem .5rem; }

/* أضف هذا الكود إلى ملف الـ CSS الرئيسي لمشروعك */

.page-wrapper {
  display: flex; /* <-- أهم خاصية لوضع العناصر جنباً إلى جنب */
  align-items: flex-start; /* لضمان بدء العنصرين من الأعلى */
}

.content-area {
  flex-grow: 1; /* لجعل منطقة المحتوى تتمدد وتأخذ باقي المساحة */
  padding: 20px; /* يمكنك إضافة حشوة للمحتوى حسب تصميمك */
}
.page-wrapper > aside {
    /* يمنع القائمة من التقلص داخل حاوية flex */
    flex-shrink: 0 !important; 
    
    /* محاولة لفرض العرض الأدنى والعرض الفعلي */
    width: 260px !important;
    min-width: 260px !important;
}