/* ════════════════════════════════════════════════════════════════════════════════════════════════
   components.css — المكوّنات القابلة لإعادة الاستخدام.
   ملاحظة RTL: كل خاصية اتجاهية هنا **منطقية** (inline-start/end) مش فيزيائية (left/right).
   القاعدة دي مش تفضيل — الدرج القديم كان مكتوب بـ`left:0` و`border-right` فكان بيفتح من
   الناحية الغلط في صفحة عربية (إصلاح 2026-09-04).
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── الأزرار ── */
.btn{background:var(--card); color:var(--tx); border:1.5px solid var(--bd2)}
.btn:hover:not(:disabled){border-color:var(--bd3)}
.btn-p{background:var(--p); color:#fff; box-shadow:0 6px 16px var(--p-glow)}
.btn-g{background:var(--g); color:#fff; box-shadow:0 6px 16px var(--g-glow)}
.btn-r{background:var(--r); color:#fff}
.btn-sm{padding:var(--s2) var(--s5); font-size:var(--fz-sm); border-radius:var(--r2)}
.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--rf);display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1.5px solid var(--bd2);color:var(--mut);font-size:var(--fz-m)}
.btn-icon:hover:not(:disabled){border-color:var(--p);color:var(--p)}

/* ── تخطيطات صغيرة ── */
.row{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap}
.sp{flex:1}
.grow{flex:1; min-width:0}
.stack{display:flex; flex-direction:column; gap:var(--s5)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5)}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }

/* ── نص ── */
.ok{color:var(--g); font-weight:700}
.err{color:var(--r); font-weight:700}
.mut{color:var(--mut); font-size:var(--fz-sm)}
.ttl{font-weight:900; font-size:var(--fz-2xl); margin:0}
.one{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── الكروت ── */
.card{background:var(--card); border:1px solid var(--bd); border-radius:var(--r6);
  padding:var(--s7); margin-bottom:var(--s5); box-shadow:var(--sh)}
.sec{background:var(--card); border:1px solid var(--bd); border-radius:var(--r6);
  padding:var(--s2) var(--s7) var(--s7); margin-bottom:var(--s5); box-shadow:var(--sh)}
.sec>.st{font-size:var(--fz-b); font-weight:900; margin:var(--s5) 0 2px}

/* ── الشرائح (فلاتر) ── */
.chip{display:inline-flex; align-items:center; gap:var(--s1); background:var(--card);
  border:1.5px solid var(--bd2); border-radius:var(--r7); padding:var(--s2) var(--s6);
  font-size:var(--fz-sm); cursor:pointer; user-select:none; font-weight:800; color:var(--mut);
  font-family:inherit; transition:all var(--dur)}
.chip:hover{border-color:var(--bd3); color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--g-soft); border-color:var(--g); color:var(--g)}
.chip.amber[aria-pressed="true"]{background:var(--am-soft); border-color:var(--am); color:var(--am)}

/* ── الشارات ── */
.bdg{font-size:var(--fz-xs); font-weight:800; border-radius:var(--rf); padding:2.5px 9px}
.bdg-star{background:var(--am-soft); color:var(--am)}
.bdg-ok{background:var(--g-soft); color:var(--g)}
.bdg-off{background:var(--chip-bg); color:var(--chip-tx)}
.bdg-p{background:var(--p-soft); color:var(--p-deep)}
.bdg-draft{background:var(--bl-soft); color:var(--bl)}

/* ── صفوف القايمة ── */
.list{background:var(--card); border:1px solid var(--bd); border-radius:var(--r6);
  padding:var(--s2); box-shadow:var(--sh)}
.it{display:flex; align-items:center; gap:var(--s5); width:100%; text-align:start;
  background:transparent; border:0; border-bottom:1px solid var(--bd); border-radius:0;
  padding:var(--s5) var(--s4); cursor:pointer; font-family:inherit; color:inherit;
  transition:background .12s}
.it:hover{background:var(--raise); transform:none}
.it:last-child{border-bottom:0}
.it .th{width:46px;height:46px;border-radius:var(--r4);object-fit:cover;background:var(--card);
  border:1px solid var(--bd);flex:none}
.it .tl{width:46px;height:46px;border-radius:var(--r4);flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:var(--fz-2xl);color:#fff;
  background:linear-gradient(135deg,var(--p-hi),var(--p))}
.it .nm{font-weight:800;font-size:14.5px}
.it .sb{color:var(--mut);font-size:var(--fz-sm);margin-top:1px}
.it .badges{display:flex;gap:var(--s1);margin-top:var(--s1);flex-wrap:wrap}
.empty{padding:var(--s9); text-align:center; color:var(--mut)}

/* ── حالة تحميل (هيكل) — ما كانتش موجودة: القايمة كانت بتفضل فاضية تمامًا أثناء التحميل ── */
.skel{height:70px;border-bottom:1px solid var(--bd);
  background:linear-gradient(90deg,var(--field) 25%,var(--raise) 50%,var(--field) 75%);
  background-size:400% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── المفاتيح ── */
.switch{display:flex;align-items:center;justify-content:space-between;background:var(--field);
  border:1.5px solid transparent;border-radius:var(--r3);padding:11px var(--s5);margin-top:var(--s4);
  cursor:pointer;width:100%;font-family:inherit;color:var(--tx);transition:border-color var(--dur)}
.switch:hover{border-color:var(--bd2);transform:none}
.switch .lb{font-size:13px;font-weight:800}
.dot{width:40px;height:23px;border-radius:var(--r4);background:var(--track);position:relative;
  transition:background var(--dur);flex:none}
.dot::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;
  border-radius:9px;background:#fff;transition:transform var(--dur);box-shadow:var(--sh3)}
.switch[aria-checked="true"] .dot{background:var(--g)}
/* الحركة منطقية: في RTL بتتحرك لليسار، وفي LTR لليمين — من غير قاعدة html[dir] منفصلة */
[dir=rtl] .switch[aria-checked="true"] .dot::after{transform:translateX(-17px)}
[dir=ltr] .switch[aria-checked="true"] .dot::after{transform:translateX(17px)}

/* ── الرفع ── */
.upBtn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--p-soft);
  color:var(--p-deep);border:1.5px dashed var(--p-line);border-radius:var(--r2);
  padding:9px var(--s6);font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;
  transition:background var(--dur)}
.upBtn:hover{background:var(--p-soft);filter:brightness(.96)}
.thumbs{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.thumbs .tw{position:relative}
.thumbs img{width:64px;height:64px;border-radius:var(--r2);object-fit:cover;background:var(--card);
  border:1px solid var(--bd)}
.thumbs .x{position:absolute;top:-6px;inset-inline-end:-6px;width:20px;height:20px;padding:0;
  border-radius:var(--r2);background:var(--r);color:#fff;font-size:var(--fz-s);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px var(--r-glow)}
.vprev{width:100%;max-height:240px;border-radius:var(--r4);background:#000;margin-top:var(--s4)}
.hint{font-size:var(--fz-s);color:var(--mut);margin-top:var(--s2);line-height:1.7}
.progress{height:4px;background:var(--field);border-radius:var(--rf);overflow:hidden;margin-top:var(--s2)}
.progress>i{display:block;height:100%;background:var(--p);transition:width .2s}

/* ── الدرج ── */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:40;backdrop-filter:blur(2px);border:0;
  width:100%;border-radius:0;padding:0}
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(600px,100%);background:var(--bg);
  border-inline-end:1px solid var(--bd);z-index:41;display:flex;flex-direction:column;box-shadow:var(--sh2)}
.drawer .dh{display:flex;align-items:center;gap:var(--s3);padding:15px var(--s8);
  border-bottom:1px solid var(--bd);background:var(--card)}
.drawer .dh .t{font-weight:900;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer .db{flex:1;overflow:auto;padding:var(--s7) var(--s8);overscroll-behavior:contain}
.drawer .df{display:flex;gap:var(--s3);padding:13px var(--s8);border-top:1px solid var(--bd);background:var(--card)}

/* ── النوافذ ── */
.modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-start;
  justify-content:center;padding:22px;z-index:50;backdrop-filter:blur(2px);overflow:auto}
.modalCard{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:var(--s8);
  max-width:580px;width:100%;box-shadow:var(--sh2)}
.gbrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s1);
  border-bottom:1px solid var(--bd)}
.gbrow:last-child{border-bottom:0}

/* ── الرسائل ── */
.toast{position:fixed;inset-block-end:var(--s8);inset-inline-start:50%;transform:translateX(50%);
  z-index:80;display:flex;flex-direction:column;gap:var(--s3);align-items:center;pointer-events:none;
  max-width:min(560px,92vw)}
[dir=ltr] .toast{transform:translateX(-50%)}
.toast .t{background:var(--card);border:1px solid var(--bd);border-inline-start:3px solid var(--mut);
  border-radius:var(--r4);padding:var(--s4) var(--s7);box-shadow:var(--sh2);font-size:13px;
  font-weight:700;pointer-events:auto;animation:rise .2s ease-out}
.toast .t.ok{border-inline-start-color:var(--g);color:var(--tx)}
.toast .t.err{border-inline-start-color:var(--r);color:var(--tx)}
.toast .t.warn{border-inline-start-color:var(--am);color:var(--tx)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── بطاقات المؤشّرات ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5)}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--r6);padding:var(--s7);
  box-shadow:var(--sh)}
.kpi .v{font-size:26px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .t{font-size:var(--fz-sm);color:var(--mut);font-weight:700;margin-top:var(--s1)}
.kpi .d{font-size:var(--fz-s);color:var(--faint);margin-top:var(--s2);line-height:1.6}
/* المؤشّر اللي مالوش مصدر بيانات — بيتعرض صراحةً بدل ما يتخفي أو يتعبّى برقم وهمي */
.kpi.na{border-style:dashed;background:transparent;box-shadow:none}
.kpi.na .v{color:var(--faint);font-size:var(--fz-l);font-weight:800}

/* ── الجداول ── */
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r6);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:var(--fz-b)}
th{text-align:start;font-weight:800;font-size:var(--fz-s);color:var(--mut);padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--bd);white-space:nowrap;background:var(--raise)}
td{padding:var(--s4) var(--s6);border-bottom:1px solid var(--bd);vertical-align:top}
tbody tr:last-child td{border-bottom:0}