/* =============================================================================
   الرؤيا العميقة — طبقة الحركة وأزرق الشعار في كل مكان
   تُحمَّل بعد ‎deep-refine.css‎ وتُرجَّح عليها.

   شيئان:
     ١) أزرق الشعار الفاتح ‎#297FF6‎ يظهر في تفاصيل النظام كلّه — حدود عند
        التمرير، حلقات التركيز، شريط التمرير، التحديد، صفوف الجداول، مؤشّر
        التبويب — لا في الأزرار وحدها.
     ٢) حركات تُضاف إلى ما سبق. كلّها تتوقّف مع ‎prefers-reduced-motion‎، وكلّها
        على ‎transform‎ و‎opacity‎ وحدهما ما أمكن، فلا تُعيد الصفحة تخطيطها ستّين
        مرّة في الثانية.

   قاعدةٌ التزمتها: لا حركة تُغيّر لوناً يُقرأ عليه نصّ. كل ما هنا حدودٌ وظلال
   وإزاحة — والتباين الذي قِيس يبقى كما قِيس.
   ============================================================================= */

:root {
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --sky-glow:    rgba(41, 127, 246, .18);
  --sky-line:    rgba(41, 127, 246, .38);
}
[data-theme="dark"] {
  --sky-glow: rgba(107, 166, 242, .16);
  --sky-line: rgba(107, 166, 242, .4);
}

/* =============================================================================
   ١) أزرق الشعار في تفاصيل النظام
   ============================================================================= */

/* التحديد — أوّل ما يلمسه المستخدم بلا أن ينتبه */
::selection { background: var(--sky-glow); color: var(--ink); }

/* شريط التمرير — يبقى رفيعاً حتى لا يسرق الانتباه */
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
  transition: background-color .2s var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover { background: var(--sky); background-clip: content-box; }

/* -----------------------------------------------------------------------------
   رابط «تخطّي إلى المحتوى»
   مخفيٌّ عن العين حتى يبلغه ‎Tab‎، فيظهر. من يتنقّل بلوحة المفاتيح وحدها كان
   يمرّ على ثمانية روابط في الترويسة قبل أن يبلغ المحتوى، في كل صفحة.
   لا ‎display:none‎ ولا ‎visibility:hidden‎: كلاهما يُخرجه من ترتيب التنقّل
   فيصير سطراً ميتاً في المصدر.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: 1rem;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 0 0 9px 9px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: inset-block-start .18s var(--ease-out);
}
.skip-link:focus {
  inset-block-start: 0;
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
[data-theme="dark"] .skip-link { color: #10161C; }

/* هدف الرابط لا يرسم حلقةً حوله: التركيز عليه برمجيّ لا بلوحة المفاتيح */
main[tabindex="-1"]:focus { outline: none; }

/* حلقة التركيز — واحدة لكل النظام، بلون الشعار */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 6px;
}

/* البطاقات: خيطٌ سماويّ يظهر عند التمرير */
.card, .pane, .try, .pick, .bento > *, .roster li, .gate-card {
  transition: transform .28s var(--ease-out),
              box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out);
}
.card:hover, .try:hover, .pick:hover, .bento > *:hover, .roster li:hover {
  border-color: var(--sky-line);
  box-shadow: 0 1px 2px rgba(27,39,51,.05), 0 16px 34px -24px var(--sky-glow);
}

/* صفوف الجداول */
.tbl tbody tr { transition: background-color .18s var(--ease-out); }
.tbl tbody tr:hover { background: var(--brand-soft); }
.tbl tbody tr.hot:hover { background: var(--warn-soft); }

/* روابط التنقّل — خطٌّ ينمو من المنتصف */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute;
  inset-block-end: -.35rem; inset-inline: .8rem;
  width: auto; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--brand));
  transform: scaleX(0); transform-origin: center;
  transition: transform .26s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* شريط المدّة: لمعةٌ تمرّ مرّةً كلّ حين */
.meter i { position: relative; overflow: hidden; }
.meter i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  animation: sheen 3.4s var(--ease-out) infinite;
}

/* مؤشّر التبويب يتدرّج */
.subtabs button[aria-selected="true"] { border-bottom-color: var(--sky); }
.roles button[aria-selected="true"] { box-shadow: 0 1px 2px rgba(27,39,51,.06), inset 0 0 0 1px var(--sky-line); }

/* =============================================================================
   ٢) الحركات
   ============================================================================= */

@keyframes sheen   { 0%,55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes riseIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn   { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ripple  { to { transform: scale(2.6); opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes bob     { 50% { transform: translateY(-3px); } }

/* ---------- دخول العناصر المبنيّة بالكود ----------
   الجداول والبطاقات في شاشة الحساب تُبنى بعد نداء الشبكة. الحركة هنا تبدأ
   بمجرّد إدراج العنصر — بلا مراقبٍ ولا صنفٍ يُضاف من JS.
   التأخير مربوطٌ بـ‎--i‎ التي يضعها ‎deep-anim.js‎، وسقفه صفٌّ عاشر: تتابعٌ
   يمتدّ على خمسين صفّاً يصير انتظاراً لا حركة. */
.pane, .fact, .kpi, .pick, .tbl tbody tr, .gate-card {
  animation: riseIn .42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.pill, .tag, .badge { animation: popIn .3s var(--ease-spring) both; }

/* ---------- ظهور عند التمرير (للصفحات الثابتة) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; } .rv-d4 { transition-delay: .28s; }

/* ---------- خطّ يُرسم تحت عناوين الأقسام ---------- */
h2.draw { position: relative; }
h2.draw::after {
  content: ""; position: absolute;
  inset-block-end: -.45rem; inset-inline-start: 0;
  height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), transparent);
  transition: width .7s var(--ease-out) .1s;
}
h2.draw.in::after { width: 3.2rem; }

/* ---------- ضوءٌ يتبع المؤشّر على البطاقات ----------
   ‎--mx/--my‎ يضعهما ‎deep-anim.js‎ على العنصر تحت المؤشّر وحده. */
.card, .pane, .try, .pick { position: relative; overflow: hidden; }
.card::after, .pane::after, .try::after, .pick::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), var(--sky-glow), transparent 70%);
  transition: opacity .3s var(--ease-out);
}
.card:hover::after, .pane:hover::after, .try:hover::after, .pick:hover::after { opacity: 1; }

/* البطاقة المختارة تُبقي التوهّج ثابتاً — التأكيد لا يعتمد على بقاء المؤشّر */
.pick[aria-pressed="true"]::after {
  opacity: 1;
  background: radial-gradient(18rem 18rem at 50% 0%, var(--sky-glow), transparent 72%);
}

/* ---------- موجة عند ضغط الأزرار ---------- */
.btn { position: relative; overflow: hidden; }
.rip {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .35);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  animation: ripple .55s var(--ease-out) forwards;
}
[data-theme="dark"] .rip { background: rgba(0, 0, 0, .22); }

/* ---------- الأزرار الصغيرة ---------- */
.mini { transition: transform .16s var(--ease-out), background .16s var(--ease-out),
                    border-color .16s var(--ease-out), color .16s var(--ease-out); }
.mini:hover  { transform: translateY(-1px); }
.mini:active { transform: translateY(0); }

/* ---------- الشعار يتنفّس بلطف ---------- */
.site-head .brand img { animation: bob 5.5s ease-in-out infinite; }
.site-head .brand:hover img { animation-play-state: paused; }

/* ---------- هيكلٌ لامع أثناء التحميل ---------- */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--rule) 37%, var(--surface-2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 6px; color: transparent !important;
}

/* ---------- تبديل التبويبات ---------- */
#tab-sub, #tab-devices, #tab-renew, #tab-activate,
#atab-pending, #atab-tenants { animation: fadeIn .3s var(--ease-out) both; }

/* ---------- احترام تفضيل تقليل الحركة ----------
   لا تُلغى الشفافية معها: عنصرٌ بقي على ‎opacity:0‎ لأنّ حركته أُلغيت هو عنصرٌ
   مفقود، لا عنصرٌ ساكن. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .pane, .fact, .kpi, .pick, .tbl tbody tr, .gate-card,
  .pill, .tag, .badge { opacity: 1 !important; transform: none !important; }
  h2.draw::after { width: 3.2rem; }
}