/* =============================================================
   OPS LAYER — طاولة العمل (مستمدة من مكتبة مدار madar/)
   يملك: شريط التعليمات الحي، نبض المركز، جرس النشاط، زر التقديم السردي.
   يلتزم DESIGN.md: توكنز --f-* فقط، زجاج للكروم الطافي فقط،
   نقاط نابضة = حالة حقيقية فقط، حركة transform/opacity.
   ============================================================= */

/* ---------- 1. شريط التعليمات الحي ----------
   سطح فاتح بصبغة تحذير — لا كتلة داكنة ثانية تنافس شريط "الخطوة التالية"،
   ولا كبسولة كاملة بعرض الصفحة. */
.ops-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--f-r);
  border: 1px solid color-mix(in srgb, var(--f-warn) 30%, var(--f-border));
  background: color-mix(in srgb, var(--f-warn) 7%, var(--f-surface));
  color: var(--f-ink);
  font-size: 0.84rem;
  box-shadow: var(--f-shadow-xs);
  animation: ops-drop-in 480ms cubic-bezier(0.18, 1.25, 0.40, 1) both;
}
.f-body.dark .ops-strip {
  border-color: color-mix(in srgb, var(--f-warn) 34%, var(--f-border));
  background: color-mix(in srgb, var(--f-warn) 9%, var(--f-surface));
}
/* ميزانية التأثيرات في DESIGN.md: حركة مستمرة واحدة ظاهرة في نفس
   اللحظة. القياس أظهر اثنتين في النظرة العامة — نقطة شريط التعليمة
   ومنارة «الخطوة التالية». المنارة تبقى لأنها تشير إلى الفعل الذي
   يلزم الآن؛ أما وجود الشريط نفسه فيقول إن هناك تعليمة، فالنبض
   عليه تكرار لا معلومة. النقطة تبقى علامة لون ساكنة. */
.ops-strip__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--f-warn);
}
.ops-strip__tag {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--f-r-sm);
  background: color-mix(in srgb, var(--f-warn) 15%, transparent);
  color: color-mix(in srgb, var(--f-warn) 80%, var(--f-ink));
}
.ops-strip__txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--f-ink-2);
}
.ops-strip__txt b { font-weight: 700; color: var(--f-ink); }
.ops-strip__by {
  flex: none;
  font-size: 0.68rem;
  color: var(--f-ink-3);
}
.ops-strip__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--f-ink-3);
  transition: background var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease);
}
.ops-strip__x:hover { background: color-mix(in srgb, var(--f-warn) 14%, transparent); color: var(--f-ink); }
.ops-strip__x:active { transform: scale(0.94); }
.ops-strip__x .material-symbols-outlined { font-size: 15px; }

/* ---------- 2. نبض المركز ---------- */
.ops-pulse__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.ops-pulse__head h2 {
  margin: 0;
  font-family: var(--f-disp);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0;
}
.ops-pulse__sub {
  font-size: 0.74rem;
  color: var(--f-ink-3);
}
.ops-pulse__beacon {
  position: relative;
  width: 12px; height: 12px;
  align-self: center;
}
.ops-pulse__beacon i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}
.ops-pulse__beacon i:first-child {
  inset: 3px;
  background: var(--f-ok);
}
.ops-pulse__beacon i:last-child {
  border: 1.5px solid var(--f-ok);
  animation: ops-beacon 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ops-pulse__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
}
@media (max-width: 980px) { .ops-pulse__grid { grid-template-columns: 1fr; } }

.ops-zone {
  position: relative;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
  padding: 16px 18px;
}
.ops-zone__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--f-ink-3);
  margin-bottom: 12px;
}
.ops-zone__lbl .material-symbols-outlined { font-size: 15px; }

/* أين أنت الآن — أرقام على السطح، بلا صناديق داخلية */
.ops-zone__stats {
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.ops-fig { flex: 1; }
.ops-fig b {
  display: block;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ops-fig b i {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--f-ink-3);
}
.ops-fig small {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--f-ink-2);
}
.ops-fig small .up {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--f-ok);
  font-variant-numeric: tabular-nums;
}
.ops-fig__sep {
  width: 1px;
  background: var(--f-border);
}

/* ما الناقص — منطقة الفجوة بنبرة تحذير هادئة */
.ops-zone--gap {
  border-color: color-mix(in srgb, var(--f-warn) 34%, var(--f-border));
  background:
    radial-gradient(160px 90px at 100% 0%, color-mix(in srgb, var(--f-warn) 9%, transparent), transparent 70%),
    var(--f-surface);
}
.ops-zone--gap.is-urgent {
  border-color: color-mix(in srgb, var(--f-err) 38%, var(--f-border));
  background:
    radial-gradient(160px 90px at 100% 0%, color-mix(in srgb, var(--f-err) 10%, transparent), transparent 70%),
    var(--f-surface);
}
.ops-zone--gap .ops-zone__lbl { color: color-mix(in srgb, var(--f-warn) 78%, var(--f-ink)); }
.ops-zone--gap.is-urgent .ops-zone__lbl { color: color-mix(in srgb, var(--f-err) 78%, var(--f-ink)); }
.ops-gap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ops-gap > b {
  font-family: var(--f-sans);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ops-gap__txt {
  font-size: 0.85rem;
  font-weight: 600;
}
.ops-gap__txt small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.ops-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--f-surface-2);
  border: 1px solid var(--f-border);
  color: var(--f-ink-2);
}
.ops-chip--urgent {
  background: color-mix(in srgb, var(--f-err) 12%, transparent);
  border-color: color-mix(in srgb, var(--f-err) 30%, transparent);
  color: var(--f-err);
}
.ops-chip--vip {
  background: color-mix(in srgb, var(--f-gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--f-gold) 34%, transparent);
  color: color-mix(in srgb, var(--f-gold) 80%, var(--f-ink));
}

/* الخطوة التالية — كتلة الحبر الكحلي الوحيدة في الشاشة (flat + halo) */
.ops-zone--next {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 0;
  background:
    radial-gradient(300px 120px at 88% -20%, color-mix(in srgb, var(--f-gold) 13%, transparent), transparent 70%),
    var(--f-navy);
  color: #f4f2ea;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 16px 34px -22px color-mix(in srgb, var(--f-navy) 60%, transparent);
}
.f-body.dark .ops-zone--next {
  background:
    radial-gradient(300px 120px at 88% -20%, color-mix(in srgb, var(--f-gold) 10%, transparent), transparent 70%),
    var(--f-surface-3);
  color: var(--f-ink);
}
.ops-zone__lbl--onink { color: color-mix(in srgb, currentColor 72%, transparent); margin-bottom: 7px; }
.ops-next__main { min-width: 0; }
.ops-next__why {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  opacity: 0.92;
  max-width: 62ch;
}
.ops-next__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ops-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 0.86rem;
  font-family: inherit;
  background: var(--f-bg);
  color: var(--f-navy);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.5);
  transition: transform var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.f-body.dark .ops-next__cta { background: var(--f-ink); color: var(--f-bg); }
.ops-next__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.55); }
.ops-next__cta:active { transform: scale(0.97); }
.ops-next__alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.8rem;
  font-family: inherit;
  background: transparent;
  color: inherit;
  transition: background var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease);
}
.ops-next__alt:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ops-next__alt:active { transform: scale(0.97); }
.ops-next__alt .material-symbols-outlined,
.ops-next__cta .material-symbols-outlined { font-size: 17px; }

@media (max-width: 860px) {
  .ops-zone--next { flex-direction: column; align-items: flex-start; }
}

/* تعليمة اليوم — سطر هادئ داخل النبض، بلا دوران تلقائي */
.ops-tip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  background: color-mix(in srgb, var(--f-surface-2) 45%, var(--f-surface));
  font-size: 0.8rem;
}
.ops-tip__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tip-c) 11%, transparent);
  color: var(--tip-c);
}
.ops-tip__tag {
  flex: none;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: var(--f-r-sm);
  background: color-mix(in srgb, var(--tip-c) 9%, transparent);
  color: color-mix(in srgb, var(--tip-c) 78%, var(--f-ink));
}
.ops-tip__txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--f-ink-2);
}
.ops-tip__txt b { font-weight: 700; color: var(--f-ink); }
.ops-tip__by {
  flex: none;
  font-size: 0.66rem;
  color: var(--f-ink-3);
}
.ops-tip__nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ops-tip__nav i {
  font-style: normal;
  font-size: 0.64rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}
.ops-tip__nav button {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-sm);
  background: var(--f-surface);
  color: var(--f-ink-2);
  transition: background var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease);
}
.ops-tip__nav button:hover { background: var(--f-surface-2); color: var(--f-ink); }
.ops-tip__nav button:active { transform: scale(0.92); }
.ops-tip__manage {
  flex: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--f-navy);
  padding: 4px 6px;
  border-radius: var(--f-r-sm);
  transition: background var(--f-dur) var(--f-ease);
}
.f-body.dark .ops-tip__manage { color: var(--f-cs); }
.ops-tip__manage:hover { background: var(--f-surface-2); }
@media (max-width: 860px) {
  .ops-tip { flex-wrap: wrap; }
  .ops-tip__txt { white-space: normal; }
}

/* ---------- 3. جرس النشاط الحي ---------- */
.ops-bell { position: relative; }
.ops-bell__btn { position: relative; }
.ops-bell__badge {
  position: absolute;
  top: -3px;
  inset-inline-start: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--f-crimson);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  font-family: var(--f-mono);
  box-shadow: 0 0 0 2px var(--f-bg);
  /* عدّاد مرن: يقفز بنابض عند تغيّر العدد (إعادة تركيب عبر key) */
  animation: ops-badge-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ops-bell__btn.has-unseen .material-symbols-outlined {
  animation: ops-bell-ring 2.6s var(--f-ease) 1;
  transform-origin: 50% 4px;
}

.ops-bell__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 80;
  width: 356px;
  border-radius: var(--f-r-md);
  border: 1px solid color-mix(in srgb, var(--f-border) 80%, transparent);
  background: color-mix(in srgb, var(--f-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    var(--f-shadow-md);
  overflow: hidden;
  animation: ops-drop-in 360ms cubic-bezier(0.18, 1.25, 0.40, 1) both;
}
.f-body.dark .ops-bell__panel {
  background: color-mix(in srgb, var(--f-surface) 86%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    var(--f-shadow-md);
}
.ops-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--f-border);
  font-size: 0.84rem;
}
.ops-bell__head span {
  font-size: 0.68rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
}
.ops-bell__list { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.ops-bell__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  transition: background var(--f-dur) var(--f-ease);
}
.ops-bell__row + .ops-bell__row { border-top: 1px solid color-mix(in srgb, var(--f-border) 55%, transparent); }
.ops-bell__row:hover { background: var(--f-surface-2); }
.ops-bell__row.is-seen { opacity: 0.62; }
.ops-bell__ico {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--f-r-sm); /* squircle-ish */
  background: color-mix(in srgb, var(--ob-c, var(--f-navy)) 12%, transparent);
  color: var(--ob-c, var(--f-navy));
}
.ops-bell__ico .material-symbols-outlined { font-size: 16px; }
.ops-bell__txt {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-bell__txt b { font-weight: 700; }
.ops-bell__time {
  flex: none;
  font-size: 0.66rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
}
.ops-bell__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  font-size: 0.78rem;
  color: var(--f-ink-3);
}
.ops-bell__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px;
  border: 0;
  border-top: 1px solid var(--f-border);
  background: transparent;
  color: var(--f-navy);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  transition: background var(--f-dur) var(--f-ease);
}
.f-body.dark .ops-bell__all { color: var(--f-cs); }
.ops-bell__all:hover { background: var(--f-surface-2); }
.ops-bell__all .material-symbols-outlined { font-size: 15px; }

/* ---------- 4. زر التقديم السردي ---------- */
.ops-publish {
  min-width: 152px;
  justify-content: center;
  transition: background var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease);
}
.ops-publish.is-working { opacity: 0.88; cursor: progress; }
.ops-publish.is-done {
  background: var(--f-ok) !important;
  border-color: var(--f-ok) !important;
  color: var(--f-bg) !important;
}
.ops-publish__spin {
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: ops-spin 0.7s linear infinite;
}

/* ---------- 5. الجدول الحي (DataTable من مدار) ---------- */
.ops-table-wrap {
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-lg);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
  overflow: hidden;
}

/* شريط الأدوات: بحث + فلاتر */
.ops-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-surface-2) 55%, transparent);
}
.ops-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  transition: border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.ops-toolbar__search:focus-within {
  border-color: color-mix(in srgb, var(--f-navy) 45%, var(--f-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-navy) 10%, transparent);
}
.f-body.dark .ops-toolbar__search:focus-within {
  border-color: color-mix(in srgb, var(--f-cs) 55%, var(--f-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-cs) 14%, transparent);
}
.ops-toolbar__search .material-symbols-outlined { font-size: 17px; color: var(--f-ink-3); }
.ops-toolbar__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--f-ink);
  font: inherit;
  font-size: 0.82rem;
}
.ops-toolbar__search kbd {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--f-ink-3);
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-xs);
  padding: 1px 5px;
}
.ops-toolbar__count {
  margin-inline-start: auto;
  font-size: 0.7rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ops-toolbar__count i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--f-ok);
  animation: ops-pulse-dot 1.8s ease-in-out infinite;
}

/* الرأس والصفوف — شبكة موحدة */
.ops-table {
  --ops-cols: 40px 1.7fr 1.15fr 0.95fr 0.8fr 0.68fr 0.62fr 40px;
}
.ops-table__head {
  display: grid;
  grid-template-columns: var(--ops-cols);
  align-items: center;
  padding: 0 16px;
  height: 42px;
  border-bottom: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-surface-2) 40%, transparent);
}
.ops-th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--f-ink-3);
  justify-content: flex-start;
  text-align: start;
}
.ops-th.is-sortable { cursor: pointer; transition: color var(--f-dur) var(--f-ease); }
.ops-th.is-sortable:hover { color: var(--f-ink); }
.ops-th.is-on { color: var(--f-navy); }
.f-body.dark .ops-th.is-on { color: var(--f-cs); }
.ops-th__arrow {
  display: inline-grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-spring);
}
.ops-th.is-on .ops-th__arrow { opacity: 1; }
.ops-th.is-desc .ops-th__arrow { transform: rotate(180deg); }
.ops-th__arrow .material-symbols-outlined { font-size: 13px; }

/* checkbox مخصص */
.ops-check {
  appearance: none;
  width: 16px; height: 16px;
  margin: 0;
  border-radius: var(--f-r-xs);
  border: 1.5px solid var(--f-border-2);
  background: var(--f-surface);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-spring);
}
.ops-check:hover { border-color: var(--f-navy); }
.ops-check:active { transform: scale(0.9); }
.ops-check:checked {
  background: var(--f-navy);
  border-color: var(--f-navy);
}
.f-body.dark .ops-check:checked { background: var(--f-cs); border-color: var(--f-cs); }
.ops-check:checked::after {
  content: "";
  width: 8px; height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-inline-end: 0;
  transform: rotate(-45deg) translateY(-1px);
}
.ops-check:indeterminate {
  background: var(--f-navy);
  border-color: var(--f-navy);
}
.ops-check:indeterminate::after {
  content: "";
  width: 8px; height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* الصف */
.ops-tr { border-bottom: 1px solid color-mix(in srgb, var(--f-border) 62%, transparent); }
.ops-tr:last-child { border-bottom: 0; }
.ops-tr__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ops-cols);
  align-items: center;
  padding: 0 16px;
  min-height: 56px;
  cursor: pointer;
  transition: background var(--f-dur) var(--f-ease);
}
.ops-tr__row::before {
  /* شريط القيادة بلون الأولوية/الدائرة */
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  background: var(--lead-c, var(--f-border-2));
  opacity: 0.85;
}
.ops-tr__row:hover { background: var(--f-surface-2); }
.ops-tr.is-selected .ops-tr__row {
  background: color-mix(in srgb, var(--f-navy) 6%, var(--f-surface));
}
.f-body.dark .ops-tr.is-selected .ops-tr__row {
  background: color-mix(in srgb, var(--f-cs) 10%, var(--f-surface));
}
.ops-tr.is-open .ops-tr__row { background: var(--f-surface-2); }

.ops-td { min-width: 0; font-size: 0.82rem; }
.ops-td--who b {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-td--who small {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
}
.ops-td--svc {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.ops-td--svc .code {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: var(--f-r-sm);
  background: color-mix(in srgb, var(--svc-c, var(--f-navy)) 11%, transparent);
  color: var(--svc-c, var(--f-navy));
}
.ops-td--svc .nm {
  font-size: 0.76rem;
  color: var(--f-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ختم الحالة — نقطة حالة + نص */
.ops-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--st-c, var(--f-navy)) 26%, transparent);
  background: color-mix(in srgb, var(--st-c, var(--f-navy)) 9%, transparent);
  color: color-mix(in srgb, var(--st-c, var(--f-navy)) 80%, var(--f-ink));
  white-space: nowrap;
}
.ops-stamp i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--st-c, var(--f-navy));
}
.ops-stamp.is-live i { animation: ops-pulse-dot 1.8s ease-in-out infinite; }

.ops-td--officer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  color: var(--f-ink-2);
  overflow: hidden;
  white-space: nowrap;
}
.ops-td--officer .av {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--lead-c, var(--f-navy)) 14%, transparent);
  color: color-mix(in srgb, var(--lead-c, var(--f-navy)) 80%, var(--f-ink));
}
.ops-td--fee {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--f-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ops-td--fee.is-zero { color: var(--f-ink-3); }
/* العمر نص عربي — خط الواجهة لا الـ mono */
.ops-td--age {
  font-size: 0.72rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ops-tr__chev {
  display: grid;
  place-items: center;
  color: var(--f-ink-3);
  transition: transform var(--f-dur-md) var(--f-spring), color var(--f-dur) var(--f-ease);
}
.ops-tr.is-open .ops-tr__chev { transform: rotate(-90deg); color: var(--f-navy); }
.f-body.dark .ops-tr.is-open .ops-tr__chev { color: var(--f-cs); }

/* التفاصيل — توسّع بأسلوب مدار: grid-template-rows 0fr → 1fr */
.ops-tr__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--f-dur-md) var(--f-spring);
}
.ops-tr.is-open .ops-tr__detail { grid-template-rows: 1fr; }
.ops-tr__detail-in { overflow: hidden; }
.ops-tr__panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  padding: 4px 18px 18px;
}
@media (max-width: 1080px) { .ops-tr__panel { grid-template-columns: 1fr; } }
.ops-tr__box {
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  background: color-mix(in srgb, var(--f-surface-2) 45%, transparent);
  padding: 14px 16px;
}
.ops-tr__box-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--f-ink-3);
  margin-bottom: 12px;
}
.ops-tr__box-t .material-symbols-outlined { font-size: 14px; }
.ops-tr__box-t .tail {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- 6. سجل العمليات (LogsTable من مدار) ---------- */
.ops-log { position: relative; }
.ops-log__row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0 7px;
  padding-inline-start: 18px;
}
/* خيط الزمن */
.ops-log__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 4.5px;
  top: 0; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--f-border-2) 70%, transparent);
}
.ops-log__row:first-child::before { top: 50%; }
.ops-log__row:last-child::before { bottom: 50%; }
.ops-log__row:only-child::before { display: none; }
.ops-log__dot {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--f-surface);
  border: 2px solid var(--lg-c, var(--f-border-2));
}
.ops-log__row.is-now .ops-log__dot {
  background: var(--lg-c, var(--f-navy));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-c, var(--f-navy)) 18%, transparent);
  animation: ops-pulse-dot 1.8s ease-in-out infinite;
}
.ops-log__time {
  flex: none;
  width: 92px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: end;
}
.ops-log__txt {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.55;
}
.ops-log__txt b { font-weight: 700; }
.ops-log__txt small {
  display: inline;
  color: var(--f-ink-3);
  font-size: 0.68rem;
}
.ops-log__row.is-now .ops-log__txt { font-weight: 600; }

/* ---------- 7. شريط التحديد العائم ---------- */
.ops-selbar {
  position: fixed;
  bottom: 22px;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 40px);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--f-navy) 94%, #000);
  color: #f4f2ea;
  font-size: 0.8rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 24px 48px -20px rgba(0,0,0,0.5);
  animation: ops-rise-in 420ms cubic-bezier(0.18, 1.25, 0.40, 1) both;
}
.f-body.dark .ops-selbar {
  background: color-mix(in srgb, var(--f-surface-3) 92%, var(--f-cs));
  color: var(--f-ink);
}
.ops-selbar__n {
  font-family: var(--f-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-inline-end: 6px;
}
.ops-selbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: inherit;
  transition: background var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease);
}
.ops-selbar__btn:hover { background: rgba(255,255,255,0.2); }
.ops-selbar__btn:active { transform: scale(0.96); }
.ops-selbar__btn--primary { background: #f4f2ea; color: var(--f-navy); }
.ops-selbar__btn--primary:hover { background: #fff; }
.f-body.dark .ops-selbar__btn--primary { background: var(--f-ink); color: var(--f-bg); }
.ops-selbar__btn .material-symbols-outlined { font-size: 15px; }
.ops-selbar__x {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease);
}
.ops-selbar__x:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.ops-selbar__x .material-symbols-outlined { font-size: 16px; }

/* الحالة الفارغة */
.ops-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 46px 20px;
  text-align: center;
  color: var(--f-ink-3);
}
.ops-empty .material-symbols-outlined { font-size: 34px; opacity: 0.5; }
.ops-empty b { color: var(--f-ink-2); font-size: 0.9rem; }
.ops-empty p { margin: 0; font-size: 0.76rem; }
.ops-empty button {
  margin-top: 4px;
  border: 1px solid var(--f-border);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--f-surface);
  color: var(--f-ink);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  transition: background var(--f-dur) var(--f-ease);
}
.ops-empty button:hover { background: var(--f-surface-2); }

/* تذييل الجدول */
.ops-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-top: 1px solid var(--f-border);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--f-ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .ops-table { --ops-cols: 40px 1.6fr 1fr 0.9fr 40px; }
  .ops-td--officer, .ops-td--fee, .ops-td--age,
  .ops-th--officer, .ops-th--fee, .ops-th--age { display: none; }
}

/* ---------- 8. معالج خطوات النموذج (Stepper من مدار) ---------- */
.ops-stepper {
  position: sticky;
  top: 112px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  border-radius: var(--f-r-lg);
  border: 1px solid color-mix(in srgb, var(--f-border) 85%, transparent);
  background: color-mix(in srgb, var(--f-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 30px -20px color-mix(in srgb, var(--f-ink) 30%, transparent);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ops-stepper::-webkit-scrollbar { display: none; }
.f-body.dark .ops-stepper {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 30px -18px rgba(0,0,0,0.55);
}
.ops-stepper__step {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--f-ink-3);
  cursor: pointer;
  transition: color var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease);
  white-space: nowrap;
}
.ops-stepper__step:hover { color: var(--f-ink); background: color-mix(in srgb, var(--f-surface-2) 70%, transparent); }
.ops-stepper__dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  border: 1.5px solid var(--f-border-2);
  background: var(--f-surface);
  color: var(--f-ink-3);
  transition: background var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease),
              color var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-spring);
}
.ops-stepper__dot .material-symbols-outlined { font-size: 13px; }
.ops-stepper__step.is-partial .ops-stepper__dot {
  border-color: color-mix(in srgb, var(--f-warn) 65%, var(--f-border-2));
  color: var(--f-warn);
}
.ops-stepper__step.is-done { color: var(--f-ink-2); }
.ops-stepper__step.is-done .ops-stepper__dot {
  background: var(--f-ok);
  border-color: var(--f-ok);
  /* `#fff` على `--f-ok` الليلي = **2.68** أمام عتبة 3 (أيقونةُ Material
     عنصرُ واجهةٍ لا نصّ). و`--f-bg` يقلب مع السمة فيبقى في الطرف
     المقابل دائماً. التفصيل في `final_pages.css § .ff-doc__box`. */
  color: var(--f-bg);
}
.ops-stepper__step.is-active { color: var(--f-ink); }
.ops-stepper__step.is-active .ops-stepper__dot {
  transform: scale(1.12);
  border-color: var(--f-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-navy) 14%, transparent);
}
.f-body.dark .ops-stepper__step.is-active .ops-stepper__dot {
  border-color: var(--f-cs);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-cs) 20%, transparent);
}
.ops-stepper__step.is-active.is-done .ops-stepper__dot { border-color: var(--f-ok); }
.ops-stepper__line {
  flex: 1;
  min-width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--f-border-2);
  transition: background var(--f-dur-md) var(--f-ease);
}
.ops-stepper__line.is-done { background: var(--f-ok); }

/* قفزة القسم لا تختفي خلف الرصيف اللاصق */
.ff-section { scroll-margin-top: 172px; }

/* ---------- 9. زر التأكيد بالضغط المطوّل (Hold-to-confirm من مدار) ---------- */
.ops-hold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--f-border);
  border-radius: 999px;
  padding: 8px 15px;
  background: var(--f-surface);
  color: var(--f-ink);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: border-color var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease),
              color var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease);
}
.ops-hold:hover { border-color: var(--f-border-2); background: var(--f-surface-2); }
.ops-hold.is-holding { transform: scale(0.985); }
.ops-hold.is-danger:hover,
.ops-hold.is-danger.is-holding {
  border-color: color-mix(in srgb, var(--f-err) 45%, var(--f-border));
  color: var(--f-err);
  background: color-mix(in srgb, var(--f-err) 6%, var(--f-surface));
}
.ops-hold__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
}
.ops-hold__ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.ops-hold__ring circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.ops-hold__ring circle.bg { stroke: color-mix(in srgb, currentColor 18%, transparent); }
.ops-hold__ring circle.fg { stroke: currentColor; }
.ops-hold__ring .material-symbols-outlined { font-size: 13px; }

/* نسخة زر الضغط المطوّل داخل شريط التحديد الداكن */
.ops-hold.ops-selbar__hold {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.1);
  color: inherit;
  padding: 8px 14px;
  font-size: 0.74rem;
}
.ops-hold.ops-selbar__hold:hover { background: rgba(255,255,255,0.2); }

/* ---------- 10. التذكرة المثقّبة — قسيمة الزيارة الميدانية (Pass من مدار) ---------- */
.ops-pass {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-md);
  background:
    radial-gradient(220px 90px at 0% 0%, color-mix(in srgb, var(--st-c, var(--f-navy)) 6%, transparent), transparent 70%),
    var(--f-surface);
  box-shadow: var(--f-shadow-xs);
  overflow: hidden;
}
.ops-pass__main {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
}
.ops-pass__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.ops-pass__head .material-symbols-outlined { font-size: 17px; color: var(--st-c, var(--f-navy)); }
.ops-pass__head .ds-ico { color: var(--st-c, var(--f-navy)); }
.ops-pass__badge {
  margin-inline-start: auto;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st-c, var(--f-navy)) 10%, transparent);
  color: color-mix(in srgb, var(--st-c, var(--f-navy)) 80%, var(--f-ink));
}
.ops-pass__rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 780px) { .ops-pass__rows { grid-template-columns: 1fr; } }
.ops-pass__rows small {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--f-ink-3);
  margin-bottom: 3px;
}
.ops-pass__rows b {
  display: block;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* خط التثقيب — فاصل متقطع بثقبين مقوّسين */
.ops-pass__perf {
  position: relative;
  flex: none;
  width: 0;
  border-inline-start: 1.5px dashed var(--f-border-2);
  margin-block: 8px;
}
.ops-pass__perf::before,
.ops-pass__perf::after {
  content: "";
  position: absolute;
  inset-inline-start: -8px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--f-surface);
  border: 1px solid var(--f-border);
}
.ops-pass__perf::before { top: -15px; }
.ops-pass__perf::after { bottom: -15px; }

.ops-pass__stub {
  flex: none;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 12px;
  text-align: center;
  background: color-mix(in srgb, var(--f-surface-2) 55%, transparent);
}
.ops-pass__serial {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em; /* رمز لاتيني — التباعد هنا صحيح */
  color: var(--f-ink);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.ops-pass__stub-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--st-c, var(--f-navy)) 75%, var(--f-ink));
}
.ops-pass__note {
  font-size: 0.6rem;
  color: var(--f-ink-3);
  line-height: 1.5;
}

/* ---------- 12. صفحة التقارير ---------- */
/* المبدّل الزمني */
.ops-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--f-border);
  border-radius: 999px;
  background: var(--f-surface-2);
}
.ops-seg__opt {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;   /* كان 0.76rem — درجة التسميات الموحّدة */
  font-weight: 600;
  color: var(--f-ink-2);
  transition: background var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.ops-seg__opt:hover { color: var(--f-ink); }
.ops-seg__opt.is-on {
  background: var(--f-surface);
  color: var(--f-ink);
  font-weight: 700;
  box-shadow: var(--f-shadow-xs);
}

/* صف الأرقام الكبيرة — أرقام على السطح، فواصل شعرية، لا صناديق */
.ops-bigstat {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--f-border);
  border-radius: var(--f-r-lg);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
  overflow: hidden;
}
.ops-bigstat__cell {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 16px;
  background: radial-gradient(170px 90px at 100% 0%, color-mix(in srgb, var(--bs-c, var(--f-navy)) 6%, transparent), transparent 70%);
}
.ops-bigstat__cell + .ops-bigstat__cell { border-inline-start: 1px solid var(--f-border); }
/* تسمية الرقم الكبير — رُفعت 0.72rem → 0.78rem (٣١ يوليو ٢٠٢٦).
   القياس على شاشة التقارير أظهر **خمسة مقاسات محشورة بين 11.2 و12.8px**
   (11.2 · 11.5 · 12.2 · 12.5 · 12.8) تؤدّي كلها دور «تسمية صغيرة»،
   والفرق بينها 0.3–0.6px — لا يُدرَك فرداً ويُقرأ عشوائياً جملةً.
   دُمج الطرف الصغير في درجتين: 0.7rem للميتا الثانوية الحقيقية،
   و0.78rem لكل تسمية. وهذه تسميةٌ لرقمٍ بحجم 28.8px فتستحق درجة التسمية
   لا أرضية المقروئية. */
.ops-bigstat__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--f-ink-2);
  margin-bottom: 10px;
}
.ops-bigstat__lbl .ds-ico,
.ops-bigstat__lbl .material-symbols-outlined { color: var(--bs-c, var(--f-navy)); font-size: 15px; }
.ops-bigstat__val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--f-ink);
  font-variant-numeric: tabular-nums;
}
.ops-bigstat__val small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--f-ink-3);
}
.ops-bigstat__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.66rem;
  color: var(--f-ink-3);
}
@media (max-width: 1000px) {
  .ops-bigstat { flex-wrap: wrap; }
  .ops-bigstat__cell { flex: 1 1 42%; }
  .ops-bigstat__cell:nth-child(odd) { border-inline-start: 0; }
  .ops-bigstat__cell:nth-child(n+3) { border-block-start: 1px solid var(--f-border); }
}

/* شبكة الصندوقين */
.ops-repgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1080px) { .ops-repgrid { grid-template-columns: 1fr; } }
.ops-repbox {
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
}

/* أشرطة التوزيع */
.ops-repbars { display: flex; flex-direction: column; gap: 4px; }
.ops-repbar {
  display: grid;
  grid-template-columns: 30px minmax(96px, 0.7fr) 1fr 34px minmax(70px, auto);
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: var(--f-r-sm);
  transition: background var(--f-dur) var(--f-ease);
}
.ops-repbar:hover { background: var(--f-surface-2); }
.ops-repbar__ico {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rb-c) 11%, transparent);
  color: var(--rb-c);
}
.ops-repbar__ico--av {
  font-size: 0.62rem;
  font-weight: 700;
}
.ops-repbar__name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-repbar__track {
  height: 7px;
  border-radius: 999px;
  background: var(--f-surface-3);
  overflow: hidden;
}
.ops-repbar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--rb-c) 78%, var(--f-surface));
  animation: ops-bar-grow 640ms var(--f-spring) both;
  transform-origin: 100% 50%; /* البداية من جهة اليمين — واجهة RTL */
}
.ops-repbar__n {
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ops-repbar__meta {
  font-size: 0.66rem;
  color: var(--f-ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* تذييل التقرير */
.ops-repfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ops-repfoot__note {
  font-size: 0.68rem;
  color: var(--f-ink-3);
}

/* ---------- keyframes ---------- */
@keyframes ops-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}
@keyframes ops-beacon {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(2.0); opacity: 0; }
}
@keyframes ops-drop-in {
  from { opacity: 0; transform: translateY(-7px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ops-bell-ring {
  0%, 100% { transform: rotate(0); }
  4%  { transform: rotate(-14deg); }
  9%  { transform: rotate(11deg); }
  14% { transform: rotate(-7deg); }
  19% { transform: rotate(4deg); }
  24% { transform: rotate(0); }
}
@keyframes ops-spin { to { transform: rotate(360deg); } }
@keyframes ops-rise-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes ops-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ops-badge-pop {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ops-strip,
  .ops-bell__panel,
  .ops-selbar { animation: none; }
  .ops-strip__dot,
  .ops-pulse__beacon i:last-child,
  .ops-stamp.is-live i,
  .ops-log__row.is-now .ops-log__dot,
  .ops-toolbar__count i,
  .ops-bell__badge,
  .ops-bell__btn.has-unseen .material-symbols-outlined { animation: none; }
  .ops-tr__detail { transition: none; }
}