/* ═══════════════════════════════════════════════════════════════════════════
   scc-speed.css — طبقة «سرعة البرق» (2026-06-12)
   تُحمَّل بعد scc-core/scc-pages وقبل performance-mode (الذي يبقى أخيراً ليطغى).
   أربعة أقسام: ١) توحيد توكنز الهوية مع لوحة الأدمن ٢) تجربة اللمس
   ٣) مكوّنات موحدة جديدة ٤) الشبكة المتجاوبة والجداول-بطاقات.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ ١) توحيد التوكنز مع assets/css/main.css (§7-1) ═══════════════════════
   كانت portal-redesign تفرض كحلياً خاصاً (#070b18) يفصل المركز بصرياً عن
   اللوحة — القرار: «تبويب داخلي» فعلاً ⇒ نفس قيم الأدمن حرفياً (نفس المحدد
   :root:not([data-theme=light]) بنفس الخصوصية، وهذا الملف يُحمَّل لاحقاً فيفوز).
   متغيرات --rp-* الزخرفية تبقى كما هي (التدرجات/الظلال). */
:root:not([data-theme="light"]){
  --primary:#00b4d8;
  --bg:#0a0e17;
  --card:#111a27;
  --card2:#162032;
  --surface:#162032;
  --text:#e8eaed;
  --text2:#8b95a5;
  --muted:#5a6577;
  --border:#1e2a3a;
  --inputBg:#162032;
  --headerBg:rgba(17,26,39,.92);
  --radius:14px;
}

/* ═══ ٢) تجربة اللمس — «النقرة لا تضيع ولا تتأخر» (§4) ═══════════════════ */

/* touch-action عام لكل العناصر التفاعلية (كان على عناصر النماذج فقط —
   البلاطات والبطاقات القابلة للنقر كانت بلا حماية من تأخير الـ 350ms) */
[data-act],[onclick],summary,.breadcrumb-item,.card[data-act],.nav-card,.back-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* استجابة الضغط الفورية: interact.js يضيف .pressed على pointerdown بنفس
   الفريم — قبل تنفيذ الفعل وقبل أي رسم (§4-2) */
.pressed{
  transform:scale(.97) !important;
  opacity:.82 !important;
}
button.pressed,.sm-btn.pressed{transform:scale(.93) !important}

/* أهداف لمس ≥44×44 (§4-3) — توسعة منطقة النقر بلا تغيير المقاس البصري */
.tap-x{position:relative}
.tap-x::after{content:'';position:absolute;inset:-10px;border-radius:12px}
.breadcrumb-item{position:relative}
.breadcrumb-item::after{content:'';position:absolute;inset:-9px -4px}
/* الأجهزة اللمسية: حقول وقوائم لا تقل عن 44px + أزرار الرأس مريحة دائماً
   (معياران: pointer:coarse للأجهزة اللمسية بأي مقاس + ≤768px احتياطاً) */
@media (pointer:coarse),(max-width:768px){
  #ct select,#ct input[type="date"],#ct input[type="time"],#ct input[type="text"],#ct input[type="number"]{min-height:44px}
  .header button{min-height:44px;min-width:44px}
  summary{padding:6px 0;min-height:32px}
}
/* hover اختياري لا أساسي (§7-4 آيباد): على أجهزة بلا hover لا رفع للبطاقات —
   البديل اللمسي .pressed يقدّم الإحساس نفسه */
@media (hover:none){
  .card:hover,.a-card:hover,.nav-card:hover{transform:none !important}
}

/* انتقال تبويب خفيف غير حاجب (§5-1): يلعب فوق محتوى مرسوم وجاهز للنقر فوراً
   — في وضع الأداء يختصره performance-mode لـ .001s تلقائياً */
@keyframes sccEnter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
#ct.scc-enter{animation:sccEnter .16s ease-out}

/* ═══ ٣) مكوّنات موحدة (§7-3) — نفس الشكل الذي كان inline، كصنف واحد ═══ */

/* زر حبّي صغير (أزرار «فتح ←»/تحديث/المحاولة) — الألوان تبقى inline لكل سياق */
.scc-pill{
  padding:7px 16px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  line-height:1.4;
}
/* شارة معلومات صغيرة (عدادات اليوم/٧أ/٣٠ي وحالات المواعيد) */
.scc-tag{
  padding:3px 10px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  display:inline-block;
  line-height:1.6;
}

/* ═══ أزرار الدوام الحيوية (2026-06-12): بصمة خضراء / إيقاف برتقالي / إنهاء أحمر ═══ */
.scc-bio{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:2px 4px;
  min-height:44px;
}
.scc-bio-ring{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2.5px solid currentColor;
  background:transparent;
}
.scc-bio-ring svg{width:32px;height:32px;display:block}
.scc-bio-label{font-size:11px;font-weight:800;white-space:nowrap}
.scc-bio.green{color:#2dd4a8}
.scc-bio.green .scc-bio-ring{
  background:rgba(45,212,168,.08);
  box-shadow:0 0 16px rgba(45,212,168,.3),inset 0 0 12px rgba(45,212,168,.08);
}
.scc-bio.orange{color:#f59e0b}
.scc-bio.orange .scc-bio-ring{
  background:rgba(245,158,11,.08);
  box-shadow:0 0 14px rgba(245,158,11,.25),inset 0 0 12px rgba(245,158,11,.08);
}
.scc-bio.red{color:#ef4444}
.scc-bio.red .scc-bio-ring{
  background:rgba(239,68,68,.07);
  box-shadow:0 0 14px rgba(239,68,68,.22),inset 0 0 12px rgba(239,68,68,.07);
}
/* نبضة بصمة لطيفة تدعو للمس (تُختصر تلقائياً في وضع الأداء/reduced-motion) */
@keyframes sccBioPulse{
  0%,100%{box-shadow:0 0 10px rgba(45,212,168,.2),inset 0 0 12px rgba(45,212,168,.08)}
  50%{box-shadow:0 0 24px rgba(45,212,168,.45),inset 0 0 16px rgba(45,212,168,.12)}
}
.scc-bio.green .scc-bio-ring{animation:sccBioPulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.scc-bio.green .scc-bio-ring{animation:none}}

/* نبضة تحديث لطيفة (§8-3): تومض مرة عند تغيّر قيمة حية (تذاكر بانتظارك) */
@keyframes sccPulse{
  0%{box-shadow:0 0 0 0 rgba(0,180,216,.45)}
  70%{box-shadow:0 0 0 14px rgba(0,180,216,0)}
  100%{box-shadow:0 0 0 0 rgba(0,180,216,0)}
}
.scc-pulse{animation:sccPulse .7s ease-out 1}

/* شارة عدم الاتصال (§8-5) */
.scc-offline-chip{
  position:fixed;
  bottom:max(16px,env(safe-area-inset-bottom));
  right:50%;
  transform:translateX(50%);
  z-index:9998;
  padding:10px 20px;
  border-radius:14px;
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.45);
  color:#f59e0b;
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
body.scc-offline #syncDot{background:#ef4444 !important}

/* حجز أبعاد بطاقات الأرقام (§7-2): وصول البيانات لا يحرّك التخطيط (CLS≈0) */
.scc-stat{min-height:148px}
.hero{min-height:96px}

/* ═══ ٤) الشبكة المتجاوبة + الجداول-بطاقات (§7-2) ═════════════════════════ */

/* الجداول الطويلة (أزواج الاستجابة/سجل الأيام/حركة ٧ أيام) تتحول بطاقات
   شبكية على الجوال — كل خلية تطبع data-label عنواناً لها */
@media (max-width:640px){
  table.scc-rows,table.scc-rows tbody{display:block;width:100%}
  table.scc-rows tr:first-child{display:none}/* صف العناوين — العناوين تُطبع بكل خلية */
  table.scc-rows tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 12px;
    padding:10px 12px;
    border-radius:12px;
    margin-bottom:8px;
    border:1px solid var(--border);
    background:var(--surface);
  }
  table.scc-rows td{
    display:block;
    padding:2px 0 !important;
    border:none !important;
    border-radius:0 !important;
    background:none !important;
    transform:none !important;
  }
  table.scc-rows td::before{
    content:attr(data-label);
    display:block;
    font-size:9px;
    color:var(--muted);
    font-weight:700;
    margin-bottom:1px;
  }
  table.scc-rows td:not([data-label])::before{content:none}
  table.scc-rows td:not([data-label]){text-align:left}
}

/* آيباد عمودي/أفقي (768/834/1024): شبكة وسطى منضبطة — لا قفزة من عمودين
   لجوال إلى أربعة لمكتب */
@media (min-width:641px) and (max-width:1024px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .content{padding:20px 22px}
}

/* مقاسات ضيقة جداً (360 وأدنى): بلاطات الرئيسية عمود واحد مريح */
@media (max-width:360px){
  .grid.g4{grid-template-columns:1fr 1fr !important}
  .hero{padding:16px 14px !important}
  .msg-counter{width:88px !important;height:88px !important;font-size:34px !important}
}

/* RTL: الأسهم النصية ‹ › ← تُعرض bidi-معزولة كي لا تنعكس (درس مثبت) */
.scc-pill,.breadcrumb-sep{unicode-bidi:isolate}