/* ===== Reset & Vars ===== */
:root{
  --bg:#fffdfb; 
  --card:#ffffff; 
  --text:#1b1f23; 
  --muted:#6c757d; 
  --border:#e9ecef;
  --brand:#f19003;          /* البرتقالي */
  --brand-600:#c67300;
  --radius:16px;
}

/* تحسين القراءة على كل الشاشات */
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* الروابط */
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

/* ===== Container ===== */
.container{
  width:100%;
  margin-inline:auto;
  padding-inline:16px;
  max-width:1200px;
}
@media (min-width:576px){ .container{ padding-inline:20px; } }
@media (min-width:768px){ .container{ padding-inline:24px; } }
@media (min-width:1200px){ .container{ max-width:1200px; } }

/* ===== Typography مرنة ===== */
h1{font-size:clamp(24px, 2.4vw, 34px);margin:0 0 .6em}
h2{font-size:clamp(20px, 2vw, 28px);margin:0 0 .6em}
h3{font-size:clamp(18px, 1.8vw, 24px);margin:0 0 .6em}
p{margin:0 0 1em}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

/* ===== Grid نظام شبكي بسيط ===== */
.grid{
  display:grid;
  gap:16px;
}
@media (min-width:576px){ .grid.cols-2{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:992px){ .grid.cols-4{ grid-template-columns:repeat(4,1fr);} }

/* ===== صور ونسب ===== */
img,video{max-width:100%;height:auto;border-radius:12px}

/* ===== أزرار ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:12px;border:1px solid transparent;
  background:var(--brand);color:#fff;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--brand-600)}
.btn.outline{background:transparent;border-color:var(--brand);color:var(--brand)}

/* ===== جداول ريسبونسيف ===== */
.table-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:12px;border-bottom:1px solid var(--border);text-align:start}
th{background:#fafafa;font-weight:700}
@media (max-width:576px){
  /* بديل مكدّس للجداول الصغيرة جداً (اختياري) */
  .table-stacked{display:block}
  .table-stacked thead{display:none}
  .table-stacked tbody{display:grid;gap:12px}
  .table-stacked tr{display:grid;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px}
  .table-stacked td{display:flex;justify-content:space-between;gap:12px;border:0;padding:8px 4px}
  .table-stacked td::before{content:attr(data-label);font-weight:700;color:var(--muted)}
}

/* ===== فورمات ===== */
.input, select, textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff
}
.form-row{display:grid;gap:12px}
@media (min-width:768px){ .form-row.cols-2{grid-template-columns:1fr 1fr} }

/* ===== هيدر + ساب بار (RTL) ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(90deg,var(--brand),var(--brand-600));
  color:#fff;padding:12px 16px;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
}

/* تخطيط عام: محتوى + سايدبار على اليمين في RTL */
.layout{
  display:grid;gap:16px;
}
@media (min-width:992px){
  .layout{
    grid-template-columns:1fr 280px; /* المحتوى ثم السايدبار */
  }
}

/* سايدبار ثابتة على اليمين (RTL) في الشاشات الكبيرة، وتتحول لأوف-كانفاس بالموبايل */
.sidebar{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;
}

/* موبايل/تابلت: أجعل السايدبار أوف-كانفاس وتظهر بزر */
@media (max-width:991.98px){
  .sidebar{
    position:fixed;
    inset-block-start:0;
    inset-inline-end:0;      /* يمين في RTL */
    width:min(80vw,320px);
    height:100dvh;
    transform:translateX(100%);
    transition:transform .25s ease-in-out;
    box-shadow: -10px 0 20px rgba(0,0,0,.08);
    z-index:60;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(60%) blur(2px);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:55;
  }
  .sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
}

/* ===== فوتر ===== */
.footer{margin-top:24px;padding:16px;color:var(--muted);text-align:center}
/* ===== Mobile polish (≤576px) ===== */
@media (max-width: 576px){
  /* الحاوية والمسافات */
  .container{padding-inline:12px}
  .layout{display:block !important}
  .content{padding:8px 0}
  h2{font-size:18px;margin:8px 0 12px}
  h3{font-size:16px;margin:6px 0 10px}

  /* بطاقات KPI مضغوطة */
  .cards{display:grid;grid-template-columns:1fr;gap:10px !important}
  .kpi{padding:12px !important;border-radius:12px}
  .kpi h4{font-size:14px;margin:0 0 4px !important}
  .kpi .num{font-size:22px !important;line-height:1.2}
  .muted{font-size:12px}

  /* روابط سريعة كبلاطات صغيرة */
  .links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .links .btn{width:100%;padding:10px 12px;border-radius:10px}

  /* الجداول */
  .table-wrap{border-radius:12px}
  .table{min-width:0 !important}
  .table-stacked thead{display:none}
  .table-stacked tbody{display:grid;gap:8px}
  .table-stacked tr{
    display:grid;background:#fff;border:1px solid var(--border);
    border-radius:12px;padding:8px
  }
  .table-stacked td{
    display:flex;justify-content:space-between;gap:8px;border:0;
    padding:6px 4px
  }
  .table-stacked td::before{content:attr(data-label);font-weight:700;color:var(--muted)}
  /* تقليل أعمدة الجدول الطويل (آخر 10 أعضاء) لأسطر أسهل */
  .table-stacked td:nth-child(1){order:1}
  .table-stacked td:nth-child(2){order:2}
  .table-stacked td:nth-child(3){order:3}
  .table-stacked td:nth-child(4){order:4}
  .table-stacked td:nth-child(5){order:5}

  /* السايدبار أوف-كانفاس */
  #openSidebar{display:inline-flex}          /* زر القائمة يظهر على الموبايل */
  .sidebar{ /* تُفتح/تُغلق بالـJS الموجود بالفوتر */ }

  /* الهيدر اللاصق: منع تغطيته للمحتوى الأول */
  .site-header{min-height:54px}
  .site-header + .layout,
  .site-header + .container{scroll-margin-top:60px}
}

/* ===== شاشات صغيرة متوسطة (577–900px) ===== */
@media (min-width: 577px) and (max-width: 900px){
  .cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .links{grid-template-columns:repeat(3,1fr)}
}

/* زر عام أصغر على الهاتف */
@media (max-width: 576px){
  .btn{padding:9px 12px;border-radius:10px;font-size:14px}
}
/* ===== Fix header + sidebar on mobile ===== */
html,body{overflow-x:hidden} /* يمنع الانزلاق الأفقي وظهور حافة السايدبار */

@media (max-width: 576px){
  .site-header__inner{gap:8px; flex-wrap:nowrap}
  .brand{flex:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nav{display:none}            /* إخفاء أزرار "لوحة التحكم/ملفي" بالموبايل */
  #openSidebar{display:inline-flex} /* زر القائمة يظهر */
  .container{padding-inline:12px}
  h2{font-size:18px}
}

/* سايدبار أوف-كانفاس: تأكد أنه مخفي بالكامل */
@media (max-width: 991.98px){
  .sidebar{
    right:0; left:auto;          /* تأكيد التثبيت يمينًا */
    transform:translateX(110%);  /* أخفِه تمامًا خارج الشاشة */
    border-radius:16px 0 0 16px; /* حافة داخلية فقط */
  }
  .sidebar.open{ transform:translateX(0) }
  /* خلفية السايدبار */
  .sidebar-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter:saturate(60%) blur(2px);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:55;
  }
  .sidebar-backdrop.show{ opacity:1; pointer-events:auto }
}

/* بطاقات وجداول أكثر إحكامًا بالموبايل */
@media (max-width: 576px){
  .cards{grid-template-columns:1fr; gap:10px}
  .kpi{padding:12px; border-radius:12px}
  .kpi .num{font-size:22px}
  .table-wrap{border-radius:12px}
  .table{min-width:0}
  .table-stacked thead{display:none}
  .table-stacked tbody{display:grid; gap:8px}
  .table-stacked tr{display:grid; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px}
  .table-stacked td{display:flex; justify-content:space-between; gap:8px; border:0; padding:6px 4px}
  .table-stacked td::before{content:attr(data-label); font-weight:700; color:var(--muted)}
}
/* ===== Mobile Compact Pack (إبداع للموبايل) ===== */

/* منع تمرير أفقي وحواف الأوف-كانفاس */
html,body{overflow-x:hidden}

/* ——— هيدر أخف ——— */
@media (max-width:576px){
  .site-header__inner{gap:8px; padding:8px 12px}
  .brand{flex:1;text-align:center;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav{display:none}
  #openSidebar{padding:8px 10px;border-radius:10px;font-size:13px}
}

/* ——— سايدبار موبايل أنحف ——— */
@media (max-width:991.98px){
  .sidebar{
    width:min(78vw,300px);      /* أضيق من قبل */
    padding:12px;
    transform:translateX(110%); /* مختفية تمامًا */
    border-radius:16px 0 0 16px;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar .userbox{padding:10px;border-radius:12px;margin-bottom:8px}
  .sidebar .userbox .avatar{width:42px;height:42px}
  .sidebar .section{margin-top:8px}
  .sidebar .section .title{font-size:11px;margin:4px 6px 6px}
  .sidebar .btn-nav{
    padding:10px 12px;          /* ارتفاع ~44-46px مناسب للمس */
    border-radius:12px;
    font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
  }
  .sidebar .btn-nav.primary{box-shadow:0 4px 10px rgba(241,144,3,.18)}
  .sidebar .btn-nav.danger{font-weight:700}
  .sidebar .chip-grid{grid-template-columns:1fr;gap:6px}
}

/* ——— أزرار وروابط عامة أصغر ——— */
@media (max-width:576px){
  .btn{padding:9px 12px;border-radius:10px;font-size:14px}
  .links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .links .btn{width:100%;padding:10px;border-radius:10px}
}

/* ——— شبكة الإحصاءات (KPI) مُعقلنة ——— */
@media (max-width:576px){
  .cards{display:grid;gap:10px}
  /* على الهواتف العريضة شوية، اعمل عمودين */
  @supports (width:clamp(0px, 100%, 100%)){
    .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  }
  /* لو الشاشة ضيقة جدًا (≤360px) ارجع لعمود واحد */
  @media (max-width:360px){
    .cards{grid-template-columns:1fr}
  }
  .kpi{padding:12px;border-radius:12px}
  .kpi h4{font-size:14px;margin:0 0 4px}
  .kpi .num{font-size:22px;line-height:1.2}
  .muted{font-size:12px}
}

/* ——— الجداول: بطاقات مدمجة واضحة ——— */
@media (max-width:576px){
  .table-wrap{border-radius:12px;border:1px solid var(--border);background:#fff}
  .table{min-width:0}
  .table thead{display:none}
  .table-stacked tbody{display:grid;gap:8px}
  .table-stacked tr{
    display:grid;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.03);
  }
  .table-stacked td{
    display:flex;justify-content:space-between;gap:8px;border:0;padding:6px 4px;
    font-size:13px;
  }
  .table-stacked td::before{
    content:attr(data-label);
    font-weight:700;color:var(--muted);margin-inline-start:6px
  }
  /* ترتيب أجمل لجدول "آخر 10" */
  .table-stacked td:nth-child(2){order:1} /* الاسم أولاً */
  .table-stacked td:nth-child(3){order:2} /* الهوية */
  .table-stacked td:nth-child(5){order:3} /* الدور */
  .table-stacked td:nth-child(4){order:4} /* العضوية */
  .table-stacked td:nth-child(1){order:5} /* # */
}

/* ——— تباعد عام للمحتوى ——— */
@media (max-width:576px){
  .container{padding-inline:12px}
  .content{padding:8px 0}
  h2{font-size:18px;margin:10px 0 12px}
  h3{font-size:16px;margin:8px 0 10px}
}

/* لمسة لطيفة عند فتح القائمة */
@media (max-width:991.98px){
  .sidebar.open .btn-nav{animation:pop .18s ease both}
  @keyframes pop{from{transform:translateY(4px);opacity:.0}to{transform:none;opacity:1}}
}

@media (max-width:576px){
  /* إخفاء عمود الرقم على الموبايل */
  .table-stacked td:nth-child(1){display:none}
}
/* ===== إصلاح عرض سطح المكتب (≥992px) ===== */
@media (min-width: 992px){
  /* يجعل التصميم متوازنًا */
  .layout{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  .sidebar{
    flex: 0 0 260px;
    width: 260px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
  }
  .content{
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    padding: 0;
  }
  .kpi{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  .cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 12px;
  }
  h2{font-size:24px;margin-bottom:16px}
}

/* ===== تحسين طفيف للأجهزة المتوسطة (tablets) ===== */
@media (min-width: 768px) and (max-width: 991px){
  .layout{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-inline: 16px;
  }
  .sidebar{
    width: 100%;
    position: static;
    box-shadow: 0 2px 6px rgba(0,0,0,.03);
    border-radius: 12px;
  }
  .cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
/* === جداول متجاوبة (مطابقة لصفحة الأعضاء) === */
@media(max-width:768px){
  .table-stacked thead{display:none}
  .table-stacked tbody{display:grid;gap:12px}
  .table-stacked tr{
    display:block;
    background:#fff; /* بطاقة فاتحة لقراءة أوضح */
    border:1px solid #eef0f4; border-radius:12px; padding:12px;
    color:#1b1f23;
  }

  /* العمود الأول يصبح عنوان البطاقة */
  .table-stacked td[data-col="primary"]{
    display:block; border:0; margin:0 0 6px 0;
    font-weight:800; font-size:14px; color:#111; line-height:1.3; word-break:break-word;
  }

  /* بقية الأعمدة: لابل : قيمة */
  .table-stacked td:not([data-col="primary"]){
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; border:0; padding:6px 0; word-break:break-word; border-top:1px dashed #e9eef5;
  }
  .table-stacked td:not([data-col="primary"])::before{
    content:attr(data-label); font-weight:700; color:#6b7280; margin-inline-start:6px;
  }

  /* شارة الأعداد */
  .badge{
    display:inline-block; min-width:36px; text-align:center;
    padding:.15rem .5rem; border-radius:999px;
    background:#fff7f0; border:1px solid #ffd8b0;
    font-weight:800; font-size:12px; color:#111;
  }
}

/* ===== فرض عرض الأعمدة والعناوين في الموبايل مثل الكمبيوتر ===== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{
  border-collapse:separate;
  border-spacing:0;
  min-width:820px; /* يسمح بالتمرير الأفقي بدلاً من تكسير الجدول */
}

/* أهم شيء: لا تُخفِ <thead> ولا تحوّل الجدول إلى بطاقات */
.table thead{ 
  display:table-header-group !important;
  position:sticky; top:0; 
  background:var(--card,#fff);
  z-index:2;
}
.table tbody{ display:table-row-group !important; }
.table tfoot{ display:table-footer-group !important; }

.table thead tr{ display:table-row !important; }
.table tr{ display:table-row !important; }
.table th, .table td{ display:table-cell !important; }

/* تحسين مظهر العناوين أثناء التمرير */
.table th{
  white-space:nowrap;
  border-bottom:2px solid var(--border, rgba(0,0,0,.1));
}

/* ضبط الهوامش في الشاشات الصغيرة بدون إلغاء الجدول */
@media(max-width:800px){
  .table{ min-width:700px; }
  .table th, .table td{ padding:8px; }
}