/* ============================================================
   مركز الاعتراضات — ما يخصّ هذه الصفحة وحدها.
   كل ما هو مشترك (.panel/.kpi/.tbl/.quote/.cm-sla/.cx-*) يأتي من
   app.css وcaptains.css وcomplaints.css — لا يُعاد تعريفه هنا.
   ============================================================ */

/* ---------- مصدر العقوبة ---------- */
/* لونٌ لكل نظام: الموظّف يتعلّم المصدر من النظرة لا من القراءة، وثلاثة
   أنظمة بلون واحد تُقرأ نظاماً واحداً. */
.ap .ap-src {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; font-family: var(--fdisplay);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.ap .ap-src svg { width: 12px; height: 12px; }
.ap .ap-src b { font-variant-numeric: tabular-nums; margin-inline-start: 2px; }
.ap .ap-src[data-s="rule_action"] { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.ap .ap-src[data-s="violation"] { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
.ap .ap-src[data-s="engine"] { background: var(--cl-ops-bg); color: var(--cl-ops); border-color: var(--cl-ops-line); }

.ap .ap-bysrc { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }

/* ---------- العقوبة في الصفّ ---------- */
.ap .ap-pen { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap .ap-pen b { font-size: 13px; font-weight: 800; }
.ap .ap-pen .ap-act { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap .ap-pen .ap-src { align-self: flex-start; }

.ap .ap-reason { max-width: 320px; }
.ap .ap-reason span { display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.ap .ap-ev {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 12px;
}
.ap .ap-ev svg { width: 13px; height: 13px; }

.ap .ap-tbl tbody tr { cursor: pointer; }

/* ---------- صفحة الاعتراض ---------- */
.ap-detail .page-head .act.sm { margin-bottom: 8px; }
.ap .ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ap .ap-grid { grid-template-columns: minmax(0, 1fr); } }
.ap .ap-main, .ap .ap-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ap .ap-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; }
.ap .ap-meta span { display: flex; flex-direction: column; gap: 2px; }
.ap .ap-meta small { font-size: 10.5px; }

/* الأدلّة: مربّعات متساوية تتمدّد بعرض اللوحة، والصورة تُقصّ لا تُمطّ —
   دليلٌ مشوَّه يُقرأ خطأً. */
.ap .ap-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ap .ap-shot { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.ap .ap-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.ap .ap-shot .badge-ai { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; }

.ap .ap-acts { display: flex; gap: 8px; margin-top: 4px; }
.ap .ap-acts .btn { flex: 1; justify-content: center; }
.ap .dim.sm { font-size: 11.5px; line-height: 1.6; margin-top: 10px; display: block; }

/* ---------- سجلّ الكابتنة ---------- */
.ap .ap-histsum {
  font-size: 12px; font-weight: 800; color: var(--muted);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ap .ap-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ap .ap-hist button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: inherit; cursor: pointer; text-align: start; font: inherit;
}
.ap .ap-hist button:hover { background: var(--surface-2); border-color: var(--border); }
.ap .ap-hist .l { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- حالة محايدة في .quote ---------- */
/* ‏app.css يعرّف good/warn فقط، وcaptains.css يضيف crit. المحايدة تُعرَّف هنا
   لأن الصفحة تستعملها: «بلا صور» ليست تحذيراً ولا خطأً — ومن دون هذا الصنف
   كانت تُرسَم بحدّ بنفسجي يُقرأ تمييزاً لها. */
.ap .quote.mute { border-inline-start-color: var(--border); color: var(--muted); }