/* ============================================================
   online.css — تحسينات صفحة المتصلين (scoped بـ #pageOnline)
   ============================================================ */

/* عدّاد المتصلين داخل العنوان */
#pageOnline .onl-cnt{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:24px; padding:1px 8px; margin-inline-start:6px;
  border-radius:999px; font-size:13px; font-weight:800;
  color:var(--ok); background:var(--ok-soft); vertical-align:middle;
}

/* أزرار الهيدر (تحديث + إعدادات) — بلا إطار، مرصوصة رأسيًا */
#pageOnline .onl-actions{ display:flex; flex-direction:column; gap:4px; align-items:center; }
#pageOnline .onl-hbtn{
  background:none; border:0; box-shadow:none; padding:5px; cursor:pointer;
  color:var(--txt-2); display:grid; place-items:center;
  border-radius:8px; transition:color .15s ease, background .15s ease;
}
#pageOnline .onl-hbtn .ic{ inline-size:18px; block-size:18px; }
#pageOnline .onl-hbtn:hover{ color:var(--accent); background:var(--accent-soft); }

/* Sheet أعمدة العرض */
.onl-col-hint{ color:var(--txt-2); font-size:12.5px; margin-block-end:10px; line-height:1.6; }
.onl-col-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 4px; border-block-end:1px solid var(--card-line);
  font-size:14px; font-weight:600; cursor:pointer;
}
.onl-col-row:last-child{ border-block-end:0; }
.onl-col-row input{ inline-size:18px; block-size:18px; accent-color:var(--ok, #10b981); cursor:pointer; }

/* legend رموز الخدمة — تحت العنوان */
#pageOnline .onl-legend{
  display:flex; align-items:center; gap:14px;
  font-size:11.5px; color:var(--txt-2); margin-block-start:3px;
}
#pageOnline .onl-legend .onl-svc{ margin-inline-end:5px; }

/* ── Toolbar: سطرين ثابتين (بحث+عدد / فلاتر) على كل الشاشات ── */
#pageOnline .onl-toolbar{ display:flex; flex-direction:column; gap:8px; margin-block:12px; }
#pageOnline .onl-row1{ display:flex; gap:8px; align-items:center; }
#pageOnline .onl-row1 .onl-search{ flex:1 1 auto; min-inline-size:0; margin:0; }
#pageOnline .onl-row1 .onl-per{ flex:0 0 64px; inline-size:64px; }
#pageOnline .onl-row2{ display:flex; gap:8px; }
#pageOnline .onl-row2 .subs-select{ flex:1 1 0; min-inline-size:0; }

/* زر الطرد */
#pageOnline .onl-kick{
  background:transparent; border:0; padding:2px; cursor:pointer;
  color:var(--txt-2); display:grid; place-items:center;
  border-radius:8px; transition:color .15s ease, transform .15s ease;
}
#pageOnline .onl-kick .ic{ inline-size:16px; block-size:16px; }
#pageOnline .onl-kick:hover{ color:var(--bad); transform:scale(1.15); }

/* اسم المشترك ياخد كامل السطر (H والطرد اتنقلوا لعمود العدد) */
#pageOnline .sub-name{ display:flex; align-items:center; min-width:0; min-block-size:18px; }
#pageOnline .onl-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* السطر الأول شمال: الطرد + H + العدد (H والطرد جهة الساعة) */
#pageOnline .onl-topline{ display:flex; align-items:center; gap:6px; min-block-size:18px; }
#pageOnline .onl-topline .onl-svc{ line-height:1; }
#pageOnline .onl-topline .onl-kick{ flex:none; padding:1px; }
#pageOnline .onl-topline .onl-kick .ic{ inline-size:14px; block-size:14px; }
#pageOnline .onl-svc{
  flex:none; font-weight:900; font-size:10.5px; line-height:1;
  padding:2px 6px; border-radius:6px;
}
#pageOnline .onl-svc.svc-h{ color:var(--ok);   background:var(--ok-soft); }
#pageOnline .onl-svc.svc-p{ color:var(--info); background:var(--info-soft); }

/* سطر السيرفر/المجموعة/الماك — سطر واحد · الماك كامل والسيرفر يتقلّم لو لزم */
#pageOnline .onl-meta2{
  display:flex; align-items:center; gap:6px;
  flex-wrap:nowrap; overflow:hidden; min-inline-size:0;
}
#pageOnline .onl-meta2 .onl-srv,
#pageOnline .onl-meta2 .onl-grp{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-inline-size:0;
}
#pageOnline .onl-meta2 .onl-mac{
  flex:none;                            /* الماك يفضل كامل */
  color:var(--txt-3);
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
}

/* محاذاة العمودين: النص + (الوقت/الاستهلاك) من فوق بنفس تباعد الأسطر */
#pageOnline .sub-row > .sub-info{ align-self:start; }
#pageOnline .sub-row > .sub-avatar{ align-self:start; }
#pageOnline .sub-name{ line-height:18px; }        /* السطر 1 */
#pageOnline .sub-meta{ line-height:15px; }        /* السطر 2/3 */

/* العمود الأخير: grid زى sub-info بالظبط → الوقت↔الاسم · الاستهلاك↔اليوزر */
#pageOnline .sub-actions.onl-end{
  align-self:start;
  display:grid; grid-auto-rows:min-content; gap:2px;
  justify-items:end; white-space:nowrap;
}
/* ارتفاع فعلى مثبّت (لأنها inline-flex فمابتاخدش الـ line-height لوحده) */
#pageOnline .onl-time{ min-block-size:18px; align-items:center; }   /* = سطر الاسم */
#pageOnline .onl-total{ min-block-size:15px; align-items:center; }  /* = سطر اليوزر */
/* الماك تحت الاستهلاك (السطر التالت شمال) = سطر السيرفر يمين */
#pageOnline .onl-end .onl-mac{
  display:inline-flex; align-items:center; min-block-size:15px;
  font-size:11px; font-family:'JetBrains Mono', monospace;
  color:var(--txt-3);
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
}
#pageOnline .onl-time{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--ok); font-weight:800; font-size:12px;
}
#pageOnline .onl-time .ic{
  inline-size:13px; block-size:13px;
  animation:onlClockPulse 2s ease-in-out infinite;   /* مؤشر "حى" */
}
@keyframes onlClockPulse{ 0%,100%{ opacity:.9; } 50%{ opacity:.4; } }
#pageOnline .onl-dur{
  display:inline-block; font-variant-numeric:tabular-nums;  /* يمنع اهتزاز العرض */
  direction:ltr; unicode-bidi:isolate;   /* ثابت الاتجاه: 15:19 مش 19:15 */
  transform-origin:center;
}
#pageOnline .onl-dur.onl-bump{ animation:onlBump .28s ease-out; }
@keyframes onlBump{
  0%  { transform:translateY(-1px) scale(1.14); color:var(--ok); }
  100%{ transform:none; }
}
/* الاستهلاك — بدون خلفية/حدود · الرقم لون والوحدة لون تانى */
#pageOnline .onl-total{
  display:inline-flex; align-items:baseline; gap:3px;
  background:none; border:0; padding:0;
  font-variant-numeric:tabular-nums;
}
#pageOnline .onl-total .onl-num{
  color:var(--txt); font-weight:800; font-size:12px;
}
#pageOnline .onl-total .onl-unit{
  color:var(--info); font-weight:700; font-size:10.5px;
}

/* عناصر قابلة للنسخ (يوزر/هاتف/ماك) */
#pageOnline .onl-cp{
  cursor:pointer; border-radius:5px; padding:0 3px;
  transition:color .15s ease, background .15s ease;
}
#pageOnline .onl-cp:hover{
  color:var(--accent);
  background:var(--accent-soft);
}
#pageOnline .onl-phone{ display:inline-flex; align-items:center; gap:3px; }
#pageOnline .onl-phone .ic{ inline-size:11px; block-size:11px; opacity:.7; }

/* الكارت كله clickable */
#pageOnline .sub-row{ cursor:pointer; }

/* ── إجبار كل الأسطر على سطر واحد (قص بدل لفّ) ── */
#pageOnline .sub-meta{ flex-wrap:nowrap; overflow:hidden; min-inline-size:0; }
#pageOnline .sub-meta > span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-inline-size:0;
}
#pageOnline .sub-meta .onl-phone,
#pageOnline .sub-meta .onl-mac,
#pageOnline .sub-meta .dot-sep{ flex:none; }   /* دول مايتقصّوش، اللى يتقصّ اليوزر/السيرفر */

/* ── تقليل المسافات: بين الكروت + الحشو الداخلى ── */
#pageOnline .subs-list{ gap:4px; }
#pageOnline .sub-row{ padding:6px 9px; gap:9px; }

/* ── أنيميشن دخول (staggered) ── */
#pageOnline .sub-row{
  animation:onlIn .40s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 40ms);
}
@keyframes onlIn{
  from{ opacity:0; transform:translateY(12px) scale(.985); }
  to  { opacity:1; transform:none; }
}
#pageOnline .sub-row:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

/* ── وميض الأونلاين على النقطة الخضرا ── */
#pageOnline .sub-avatar[data-status="active"]::after{
  animation:onlPulse 1.5s ease-in-out infinite;
}
@keyframes onlPulse{
  0%  { box-shadow:0 0 0 0 var(--ok); }
  70% { box-shadow:0 0 0 7px rgba(0,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

@media (prefers-reduced-motion: reduce){
  #pageOnline .sub-row,
  #pageOnline .onl-time .ic,
  #pageOnline .onl-dur.onl-bump,
  #pageOnline .sub-avatar[data-status="active"]::after{ animation:none; }
}

/* الموبايل: legend يفضل ظاهر بحجم أصغر */
@media (max-width:720px){
  #pageOnline .onl-legend{ gap:10px; font-size:11px; order:-1; }
  #pageOnline .page-actions{ flex-wrap:wrap; gap:8px; }
}