/* ========== Theme Variables ========== */
:root{
  --brand: #0d5bd7;          /* الأزرق العلوي */
  --brand-600: #0b4bb1;
  --bg-body: #f4f6fb;
  --card-shadow: 0 6px 18px rgba(20,35,90,.12);
  --radius-xl: 18px;
  --radius-lg: 14px;

  --grad-red-from:#ff6a6a;   --grad-red-to:#f44336;
  --grad-blue-from:#5ba8ff;  --grad-blue-to:#3680f4;
  --grad-purple-from:#8b7bff;--grad-purple-to:#6a4cf4;
  --grad-orange-from:#ffa36b;--grad-orange-to:#ff7043;
  --grad-teal-from:#47d2c2;  --grad-teal-to:#20b6a8;
}

/* ========== Base ========== */
html,body{height:100%}
body{
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* تصغير وتجميل السكروول داخل السايدبار */
.app-scroll{scrollbar-width: thin}
.app-scroll::-webkit-scrollbar{height:8px;width:8px}
.app-scroll::-webkit-scrollbar-thumb{background:#cfd6e6;border-radius:8px}

/* ========== Topbar ========== */
.app-topbar{
  background: var(--brand);
  color:#fff;
  height:56px;
  display:flex; align-items:center;
  padding-inline:14px;
}
.app-topbar .brand{
  font-weight:700; letter-spacing:.3px;
}
.app-topbar .welcome{
  margin-inline-start:12px;
  font-size:.95rem; opacity:.92;
}
.app-topbar .top-actions{margin-inline-start:auto; display:flex; gap:10px; align-items:center}
.app-topbar .top-actions .bi{font-size:1.1rem; opacity:.9}

/* ========== Shell (Sidebar + Content) ========== */
.app-shell{display:grid; grid-template-columns: 260px 1fr; gap:18px; padding:18px}
@media (max-width: 992px){
  .app-shell{grid-template-columns: 1fr}
}

/* Sidebar */
.app-sidebar{
  background:#fff; border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  padding:12px; position:sticky; top:18px; height: calc(100vh - 36px);
  overflow:auto;
}
.sidebar-title{
  font-weight:700; font-size:1rem; padding:10px 12px; border-bottom:1px solid #eff2f9;
}
.side-menu{list-style:none; margin:0; padding:8px 0}
.side-menu li{margin-bottom:6px}
.side-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:#1a2454; text-decoration:none;
}
.side-link .bi{font-size:1.05rem; color:#6371a5}
.side-link:hover, .side-link.active{background:#f3f6ff}
.side-link.active .bi{color:var(--brand)}

/* Content Card Wrapper */
.panel{
  background:#fff; border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
}

/* ========== KPIs (Gradient Cards) ========== */
.kpi{
  border-radius:16px;
  padding:18px 16px;
  color:#fff;
  box-shadow: var(--card-shadow);
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:106px;
}
.kpi .kpi-title{font-size:.9rem; opacity:.95; margin-bottom:6px}
.kpi .kpi-value{font-size:1.8rem; font-weight:700}
.kpi--red{background: linear-gradient(135deg,var(--grad-red-from),var(--grad-red-to))}
.kpi--blue{background: linear-gradient(135deg,var(--grad-blue-from),var(--grad-blue-to))}
.kpi--purple{background: linear-gradient(135deg,var(--grad-purple-from),var(--grad-purple-to))}
.kpi--orange{background: linear-gradient(135deg,var(--grad-orange-from),var(--grad-orange-to))}
.kpi--teal{background: linear-gradient(135deg,var(--grad-teal-from),var(--grad-teal-to))}

/* ========== Search Bar (date chips) ========== */
.input-chip{max-width:5.2rem}
.input-chip::placeholder{opacity:.55}

/* ========== Buttons & Forms polish ========== */
.btn{border-radius:12px}
.btn-primary{
  background: var(--brand); border-color: var(--brand);
}
.btn-primary:hover{background: var(--brand-600); border-color: var(--brand-600)}
.form-control, .form-select{
  border-radius:12px; border-color:#e2e7f2;
}
.form-control:focus, .form-select:focus{
  border-color:#b9c5ea; box-shadow: 0 0 0 .15rem rgba(13,91,215,.12);
}

/* ========== Tables ========== */
.table-modern thead th{
  background:#f7f9fe; color:#4a5699; font-weight:700; border-top:none;
}
.table-modern td, .table-modern th{vertical-align:middle}
.badge-status{
  border-radius:999px; color:#fff; padding:.35rem .7rem; font-weight:600; font-size:.8rem;
}

/* ========== Utilities ========== */
.shadow-card{box-shadow: var(--card-shadow)}
.round-xl{border-radius: var(--radius-xl)}
.round-lg{border-radius: var(--radius-lg)}
.w-xxs{max-width:5rem}
.muted{color:#7b86b2}
/* ===============================
   Layout: app-content (Desktop+)
================================= */

/* اجعل المحتوى لا يسبب overflow داخل الشبكة */
.app-content{ 
  min-width: 0;
  /* عرض مريح للمحتوى وتوسيطه على الشاشات العريضة */
  max-width: min(1400px, 100%);
  margin-inline: auto;
}

/* ضبط الشبكة: سايدبار + محتوى — تكبير بسيط على الشاشات الأوسع */
@media (min-width: 1200px){
  .app-shell{ grid-template-columns: 270px minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 1400px){
  .app-shell{ grid-template-columns: 280px minmax(0, 1fr); gap: 22px; }
}
/* على شاشات عريضة جدًا—ثبّت عرض المحتوى لمقروئية أفضل */
@media (min-width: 1600px){
  .app-shell{
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
  }
  .app-content{ max-width: 1480px; }
}

/* كثافة مريحة لعناصر الواجهة على الشاشات الكبيرة */
@media (min-width: 1200px){
  .panel{ padding: 16px; }
  .kpi{ min-height: 110px; }
}

/* تصغير طفيف للبطاقات والجداول عندما تقل المساحة (لكن ما زلنا ديسكتوب/تابلت) */
@media (max-width: 1199.98px){
  .kpi .kpi-value{ font-size: 1.5rem; }
  .kpi{ padding: 14px 12px; }
}

/* ===============================
   Tables: تحسينات عامة
================================= */

/* رأس حديث */
.table-modern thead th{
  position: sticky;           /* يلتصق فوق عند تمرير رأسي */
  top: 0;
  z-index: 2;
  background: #f7f9fe;        /* أعِدّها لأنها تُستبدل بالـ sticky */
  color: #4a5699;
  font-weight: 700;
  border-top: none;
}

/* تغليف ذكي للجداول: تمرير أفقي دائم + رأسي عند الحاجة */
.table-auto-wrap{
  overflow-x: auto;           /* تمرير أفقي (أعمدة كثيرة) */
  -webkit-overflow-scrolling: touch;
}
.table-scroll-y{
  max-height: 60vh;           /* عدّل الارتفاع حسب صفحتك */
  overflow-y: auto;           /* تمرير رأسي لقوائم طويلة */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-scroll-y::-webkit-scrollbar{height:8px;width:8px}
.table-scroll-y::-webkit-scrollbar-thumb{background:#cfd6e6;border-radius:8px}

/* كثافة عالية للجداول (صفوف مضغوطة) */
.table-compact.table> :not(caption)>*>*{
  padding-block: .35rem;      /* تقليل الارتفاع */
  padding-inline: .5rem;
  font-size: .92rem;
}

/* صفوف مخططة بشكل لطيف */
.table-modern.table-striped tbody tr:nth-of-type(odd){
  background-color: #fbfcff;
}

/* التفاف/عدم التفاف مخصص للأعمدة */
.table-nowrap td, .table-nowrap th{ white-space: nowrap; }
.table-wrap td, .table-wrap th{ white-space: normal; }

/* قصّ النص الطويل داخل خلايا ضيقة */
.cell-ellipsis{
  max-width: 16ch;            /* عدّل العرض حسب الحاجة */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-ellipsis-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* سطران ثم قصّ */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* تثبيت أول عمود (RTL/LTR جاهز) */
.table-sticky-col-1 thead th:first-child,
.table-sticky-col-1 tbody td:first-child{
  position: sticky;
  inset-inline-start: 0;      /* يفهم RTL تلقائيًا */
  z-index: 3;
  background: #fff;
  box-shadow: 2px 0 0 rgba(0,0,0,.03);
}

/* محاذاة أرقام/مبالغ */
.td-num{text-align: end;font-variant-numeric: tabular-nums}

/* ألوان حالات جاهزة */
.badge-status{ border-radius: 999px; color:#fff; padding:.35rem .7rem; font-weight:600; font-size:.8rem; }

/* ===============================
   تحسينات أداء/مقروئية للجداول الكبيرة
================================= */

/* على الشاشات الكبيرة، استخدم خط أصغر قليلًا وزد كثافة */
@media (min-width: 1400px){
  .table-modern.table-compact> :not(caption)>*>*{ font-size: .9rem; padding-block: .32rem; }
}

/* على الشاشات المتوسطة، وفّر مساحة رأسية أكثر */
@media (max-width: 1199.98px){
  .table-modern thead th{ font-size: .95rem; }
}

/* لا تجعل البطاقات/الجداول تتمدد خارج المحتوى */
.panel .table{ margin-bottom: 0; }