/* لوحة القيادة والمتابعة (docs/operations-command-center.md) — سطح تشغيلي: أسطح مصمتة، تباين عالٍ، بلا تدرّجات ناعمة.
   ألوان الحالة من رموز الدلالة المركزية (نجاح/كهرماني/خطر/معلومة) المستقلة عن لوحة المركز؛ الحالة تُقرأ دائمًا بنص + رمز + نقش لا بلون وحده. */

[data-tone] {
  --t-soft: var(--color-muted-soft);
  --t-strong: var(--color-text-muted);
  --t-solid: var(--neutral-500);
}
[data-tone="complete"] { --t-soft: var(--color-success-soft); --t-strong: var(--color-success-strong); --t-solid: var(--color-success-solid); }
[data-tone="partial"]  { --t-soft: var(--color-warning-soft); --t-strong: var(--color-warning-strong); --t-solid: var(--color-warning); }
[data-tone="progress"] { --t-soft: var(--color-info-soft);    --t-strong: var(--color-info-strong);    --t-solid: var(--color-info); }
[data-tone="overdue"]  { --t-soft: var(--color-danger-soft);  --t-strong: var(--color-danger-strong);  --t-solid: var(--color-danger); }

/* ---------- الرأس والمرشحات ---------- */
.ops-head { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.ops-head .btn, .ops-filters .btn, .ops-filters .ops-filters__scope .btn { inline-size: auto; flex: none; }
.ops-filters {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  margin-block: 0 var(--space-3, 12px);
}
.ops-filters__scope, .ops-filters__custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ops-filters .field__select, .ops-filters .field__input { min-block-size: 40px; inline-size: auto; max-inline-size: 100%; }
.ops-seg { display: inline-flex; flex-wrap: wrap; background: var(--color-fill); border-radius: var(--radius-control); padding: 3px; gap: 2px; }
.ops-seg__item { position: relative; cursor: pointer; }
.ops-seg__item input { position: absolute; opacity: 0; inset: 0; }
.ops-seg__item span { display: block; padding: 8px 12px; border-radius: 8px; font-size: .9rem; color: var(--color-text-muted); min-block-size: 36px; }
.ops-seg__item input:checked + span { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 0 0 1px var(--color-hairline); }
.ops-seg__item input:focus-visible + span { outline: 2px solid var(--color-info); outline-offset: 2px; }

.ops-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--color-hairline); margin-block-end: var(--space-4, 16px); }
.ops-tabs__item { padding: 10px 16px; font-weight: 600; color: var(--color-text-muted); border-block-end: 3px solid transparent; margin-block-end: -1px; min-block-size: 44px; display: inline-flex; align-items: center; }
.ops-tabs__item[aria-current="page"] { color: var(--color-text); border-block-end-color: var(--accent-performance, var(--color-info)); }
.ops-note { display: flex; gap: 8px; align-items: flex-start; color: var(--color-text-muted); font-size: .9rem; background: var(--color-info-soft); border-radius: var(--radius-control); padding: 10px 12px; margin-block-end: var(--space-4, 16px); }
.ops-note svg { flex: none; margin-block-start: 3px; }

.ops-more { flex: 0 0 auto; }
.ops-more > summary { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 14px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-control); list-style: none; }
.ops-more > summary::-webkit-details-marker { display: none; }
.ops-more[open] { flex: 1 1 100%; order: 3; }
.ops-more[open] > summary { margin-block-end: 8px; background: var(--color-fill); }
.ops-more .ops-filters__scope { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: 12px; }

/* ---------- الملخص التنفيذي ---------- */
.ops-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 16px); }
.ops-page > * { min-inline-size: 0; }
.ops-mx { max-inline-size: 100%; }
.ops-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  background: var(--color-divider); border: 1px solid var(--color-hairline); border-radius: var(--radius-card);
}
.ops-kpi {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--color-surface); min-block-size: 76px;
}
.ops-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ops-kpi:hover { background: var(--color-fill); }
.ops-kpi:focus-visible { outline: 2px solid var(--color-info); outline-offset: -2px; }
.ops-kpi[data-tone="overdue"] { background: var(--color-danger-soft); }
.ops-kpi[data-tone="overdue"] .ops-kpi__value { color: var(--color-danger-strong); }
.ops-kpi__value { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ops-kpi--lead .ops-kpi__value { font-size: 2.1rem; }
.ops-kpi__of { font-size: .95rem; font-weight: 500; color: var(--color-text-muted); }
.ops-kpi__label { font-size: .85rem; color: var(--color-text-muted); }

/* ---------- رقاقة الحالة ومعيار ---------- */
.ops-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--t-soft); color: var(--t-strong); white-space: nowrap; }
.ops-st__mark { font-size: .95em; line-height: 1; }
.ops-crit { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 3px 8px; border-radius: 8px; background: var(--color-fill); color: var(--color-text-muted); }
.ops-crit__mark { font-weight: 700; }
.ops-crit[data-state="complete"] { background: var(--color-success-soft); color: var(--color-success-strong); }
.ops-crit[data-state="partial"] { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.ops-crit[data-state="missing"] { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.ops-crit__state { font-weight: 600; }

/* ---------- يحتاج انتباهك ---------- */
.ops-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-alert { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); border-inline-start: 4px solid var(--color-info); }
.ops-alert[data-severity="critical"] { border-inline-start-color: var(--color-danger); background: var(--color-danger-soft); }
.ops-alert[data-severity="warning"] { border-inline-start-color: var(--color-warning); }
.ops-alert__link { display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; color: inherit; min-block-size: 44px; }
.ops-alert__link:focus-visible { outline: 2px solid var(--color-info); outline-offset: -2px; border-radius: var(--radius-card); }
.ops-alert__sev { font-size: .75rem; font-weight: 700; color: var(--color-text-muted); }
.ops-alert[data-severity="critical"] .ops-alert__sev { color: var(--color-danger-strong); }
.ops-alert__title { font-weight: 700; color: var(--color-text); }
.ops-alert__what, .ops-alert__who { font-size: .9rem; color: var(--color-text); }
.ops-alert__meta { font-size: .8rem; color: var(--color-text-muted); }

/* ---------- التغطية والاتجاهات ---------- */
.ops-cov { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: 6px; }
.ops-cov__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; min-block-size: 44px; }
a.ops-cov__row:hover { background: var(--color-fill); }
.ops-cov__bar { block-size: 8px; background: var(--color-fill); border-radius: 999px; overflow: hidden; }
.ops-cov__bar > span { display: block; block-size: 100%; background: var(--color-success-solid); border-radius: 999px; }
.ops-cov__num { font-size: .85rem; color: var(--color-text-muted); }
.ops-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ops-trend { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-tile); padding: 12px 14px; }
.ops-trend__label { font-size: .85rem; font-weight: 600; color: var(--color-text-muted); margin: 0; }
.ops-trend__value { font-size: 1.5rem; font-weight: 700; margin: 4px 0; }
.ops-trend__cmp { font-size: .8rem; color: var(--color-text-muted); margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ops-delta { font-weight: 700; }
.ops-delta[data-tone="up"] { color: var(--color-success-strong); }
.ops-delta[data-tone="down"] { color: var(--color-danger-strong); }
.ops-spark { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; block-size: 72px; align-items: end; margin-block-start: 12px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: 8px; }
.ops-spark__col { display: flex; align-items: flex-end; block-size: 100%; }
.ops-spark__bar { display: block; inline-size: 100%; background: var(--color-success-solid); border-radius: 3px 3px 0 0; }
.ops-spark__bar.is-overdue { background: var(--color-danger); }
.ops-spark__legend { font-size: .78rem; color: var(--color-text-muted); margin: 4px 2px 0; }

/* ---------- النشاط الأخير ---------- */
.ops-feed__list { list-style: none; margin: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); }
.ops-feed__item, .ops-feed__empty { display: flex; gap: 12px; padding: 10px 14px; border-block-end: 1px solid var(--color-divider); font-size: .9rem; }
.ops-feed__item:last-child { border-block-end: 0; }
.ops-feed__time { flex: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-inline-size: 3.2em; }
.ops-feed__text { color: var(--color-text); text-decoration: none; }
a.ops-feed__text:hover { text-decoration: underline; }
.ops-feed__empty { color: var(--color-text-muted); }

/* ---------- مصفوفة التفعيل ---------- */
.ops-mx { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); }
.ops-mx__table { border-collapse: separate; border-spacing: 0; inline-size: 100%; }
.ops-mx__table th, .ops-mx__table td { padding: 4px; text-align: center; }
.ops-mx__day { font-weight: 600; font-size: .78rem; color: var(--color-text-muted); }
.ops-mx__day span, .ops-mx__day small { display: block; line-height: 1.2; }
.ops-mx__day.is-today { color: var(--color-text); }
.ops-mx__day.is-today small { font-weight: 700; }
.ops-mx__name { text-align: start !important; position: sticky; inset-inline-start: 0; background: var(--color-surface); min-inline-size: 7.5em; max-inline-size: 11em; padding-inline: 10px !important; font-weight: 600; border-inline-end: 1px solid var(--color-divider); z-index: 1; }
.ops-mx__name a { color: var(--color-text); text-decoration: none; display: block; overflow-wrap: anywhere; }
.ops-cell { display: inline-flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 8px; border: 1px solid var(--t-solid); background: var(--t-soft); color: var(--t-strong); font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; }
.ops-cell:focus-visible { outline: 2px solid var(--color-info); outline-offset: 2px; }
.ops-cell[data-status="complete"] { background: var(--color-success-solid); color: var(--color-surface); border-color: var(--color-success-solid); }
.ops-cell[data-status="overdue"] { background: var(--color-danger); color: var(--color-surface); border-color: var(--color-danger); }
.ops-cell[data-status="partial"], .ops-cell[data-status="not_started"] { background: repeating-linear-gradient(135deg, var(--color-warning-soft) 0 4px, var(--color-surface) 4px 8px); }
.ops-cell[data-status="not_due"], .ops-cell[data-status="not_applicable"], .ops-cell[data-status="exempt"] { background: var(--color-fill); border-color: var(--color-hairline); color: var(--color-text-faint); }
.ops-cell--legend { inline-size: 24px; block-size: 24px; font-size: .8rem; cursor: default; }
.ops-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; padding: 0; font-size: .82rem; color: var(--color-text-muted); }
.ops-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ops-tip { position: fixed; z-index: 60; max-inline-size: min(320px, calc(100vw - 24px)); background: var(--neutral-900); color: var(--color-surface); padding: 8px 10px; border-radius: 8px; font-size: .82rem; line-height: 1.5; pointer-events: none; }

/* ---------- لوحة المشرفين / الحلقات ---------- */
.ops-switch { display: inline-flex; background: var(--color-fill); border-radius: var(--radius-control); padding: 3px; gap: 2px; }
.ops-switch__item { padding: 7px 12px; border-radius: 8px; font-size: .88rem; color: var(--color-text-muted); text-decoration: none; min-block-size: 36px; display: inline-flex; align-items: center; }
.ops-switch__item[aria-current="true"] { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 0 0 1px var(--color-hairline); }
.ops-drillbar { display: flex; gap: 8px; align-items: center; background: var(--color-info-soft); border-radius: var(--radius-control); padding: 8px 12px; font-size: .9rem; margin-block-end: 10px; }
.ops-sortnote { font-size: .8rem; color: var(--color-text-muted); margin: 0 0 8px; }
.ops-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-row { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); border-inline-start: 4px solid var(--t-solid, var(--neutral-300)); padding: 10px 12px; display: grid; gap: 8px; }
.ops-row__main { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-block-size: 44px; }
.ops-row__main--static { cursor: default; }
.ops-row__main:focus-visible { outline: 2px solid var(--color-info); outline-offset: 3px; border-radius: 6px; }
.ops-row__who { grid-column: 1 / -1; display: grid; }
.ops-row__who small, .ops-row__count small, .ops-row__status small, .ops-row__last { color: var(--color-text-muted); font-size: .8rem; }
.ops-row__who a { color: inherit; }
.ops-row__pct { display: grid; gap: 4px; }
.ops-row__status { display: grid; gap: 2px; justify-items: end; }
.ops-row__crit, .ops-unit__crit { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-row__last { margin: 0; }
.ops-meter { display: block; block-size: 6px; background: var(--color-fill); border-radius: 999px; overflow: hidden; min-inline-size: 90px; }
.ops-meter > span { display: block; block-size: 100%; background: var(--t-solid); }
.ops-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
.ops-facts div { display: grid; }
.ops-facts dt { font-size: .75rem; color: var(--color-text-muted); }
.ops-facts dd { margin: 0; font-weight: 600; }
.ops-facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ops-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-unit { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-control); border-inline-start: 4px solid var(--t-solid, var(--neutral-300)); padding: 10px 12px; display: grid; gap: 6px; }
.ops-unit__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ops-unit__when { color: var(--color-text-muted); font-size: .82rem; }
.ops-unit__pct { margin-inline-start: auto; font-weight: 700; }
.ops-unit__sup, .ops-unit__reason { margin: 0; font-size: .86rem; color: var(--color-text-muted); }
.ops-unit__reason { color: var(--color-text); }

/* ---------- الدرج ---------- */
.ops-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-start; }
.ops-drawer[hidden] { display: none; }
.ops-drawer__scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.ops-drawer__panel { position: relative; background: var(--color-bg); inline-size: min(560px, 100%); block-size: 100%; overflow-y: auto; box-shadow: 0 0 40px color-mix(in srgb, var(--neutral-900) 25%, transparent); padding: 16px; display: flex; flex-direction: column; }
.ops-drawer__close { align-self: flex-end; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 10px; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ops-drawer__body { padding-block: 8px 24px; }
.ops-detail { display: grid; gap: 16px; }
.ops-detail__title { margin: 0; font-size: 1.3rem; }
.ops-detail__sub { margin: 2px 0 8px; color: var(--color-text-muted); }
.ops-detail__today { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--t-soft, var(--color-fill)); border-radius: var(--radius-control); padding: 10px 12px; margin: 0; }
.ops-detail__today strong { font-size: 1.4rem; }
.ops-detail[data-status="complete"] { --t-soft: var(--color-success-soft); }
.ops-detail[data-status="overdue"] { --t-soft: var(--color-danger-soft); }
.ops-detail[data-status="partial"], .ops-detail[data-status="not_started"] { --t-soft: var(--color-warning-soft); }
.ops-detail__sec h3 { margin: 0 0 8px; font-size: 1rem; }
.ops-detail__none, .ops-detail__note { color: var(--color-text-muted); font-size: .86rem; margin: 0; }
.ops-detail__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ops-detail__links span { background: var(--color-fill); border-radius: 8px; padding: 3px 8px; font-size: .82rem; }

/* ---------- الإعدادات ---------- */
.ops-crit-table { display: grid; gap: 6px; }
.ops-crit-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px 72px 88px; gap: 8px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-control); padding: 8px 10px; }
.ops-crit-table__row--head { background: transparent; border: 0; font-size: .78rem; color: var(--color-text-muted); padding-block: 0; }
.ops-crit-table__name { display: grid; }
.ops-crit-table__name small { color: var(--color-text-muted); font-size: .78rem; }
.ops-crit-table input[type="checkbox"] { inline-size: 22px; block-size: 22px; justify-self: center; }
.ops-hist { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }

/* ---------- التوزيع: الجوال تنبيهات أولًا؛ العريض عمود رئيسي (انتباه + اتجاهات) وعمود جانبي (تسرّب + نشاط) ---------- */
.ops-page--overview { display: flex; flex-direction: column; }
.ops-col { display: contents; }
.ops-page--overview .ops-attention { order: 1; }
.ops-page--overview .ops-kpis { order: 2; }
.ops-page--overview .ops-coverage { order: 3; }
.ops-page--overview .ops-trends { order: 4; }
.ops-page--overview .ops-feed { order: 5; }

@media (min-width: 720px) {
  .ops-row__main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ops-row__who { grid-column: auto; }
  .ops-trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ops-kpi--lead { grid-column: span 3; }
  .ops-kpi:not(.ops-kpi--lead) { grid-column: span 2; }
  .ops-kpi:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .ops-kpis { grid-template-columns: 1.5fr 1.5fr repeat(5, minmax(0, 1fr)); }
  .ops-kpi--lead, .ops-kpi:not(.ops-kpi--lead), .ops-kpi:last-child:nth-child(odd) { grid-column: auto; }
  .ops-page--overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .ops-page--overview .ops-kpis { grid-column: 1 / -1; order: 0; }
  .ops-col { display: flex; flex-direction: column; gap: var(--space-4, 16px); min-inline-size: 0; }
  .ops-col--main { grid-column: span 8; }
  .ops-col--rail { grid-column: span 4; }
  .ops-page--overview .ops-col > .sec { order: 0; margin: 0; }
  .ops-page--activation { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .ops-cell { inline-size: 30px; block-size: 30px; }
  .ops-mx__table th, .ops-mx__table td { padding: 3px; }
  .ops-mx__name { min-inline-size: 6em; max-inline-size: 8em; font-size: .85rem; }
  .ops-crit-table__row { grid-template-columns: minmax(0, 1fr) 44px 44px 60px; }
  .ops-crit-table__row > :nth-child(5) { grid-column: 1 / -1; }
  .ops-crit-table__row--head > :nth-child(5) { display: none; }
  .ops-drawer { align-items: flex-end; }
  .ops-drawer__panel { inline-size: 100%; block-size: 88vh; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ops-drawer__panel { animation: ops-in .18s ease-out; }
  @keyframes ops-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}