/* مسافة القسم تفصل البطاقات، بينما تبقى تسمية المؤشر وقراءته وتفصيله مجموعة واحدة. */
.ov-page {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--admin-section-gap);
  font-size: var(--admin-ui-text);
  color: var(--text-primary);
}
.ov-page h1 {
  margin: 0;
  font: var(--weight-bold) var(--admin-page-title)/var(--leading-tight) var(--font-display);
}
.ov-surface {
  min-inline-size: 0;
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--admin-panel-radius);
  box-shadow: var(--admin-panel-shadow);
}
.ov-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  padding-block: var(--space-1);
  overflow: hidden;
}
.ov-metric {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--admin-inset);
  color: var(--text-primary);
}
.ov-metric + .ov-metric::before {
  content: '';
  position: absolute;
  inset-block: var(--space-3);
  inset-inline-start: 0;
  border-inline-start: 1px solid var(--border-strong);
}
.ov-metric:hover { background: var(--surface-2); }
.ov-metric:focus-visible, .ov-ticket-link:focus-visible { outline-offset: -2px; }
.ov-metric h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 0;
  font: var(--weight-medium) var(--admin-ui-text)/var(--leading-normal) var(--font-sans);
}
.ov-metric h2 svg { height: var(--admin-icon-small); width: var(--admin-icon-small); color: var(--text-secondary); }
.ov-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); min-width: 0; }
.ov-number { font-weight: var(--weight-bold); font-size: var(--admin-metric); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ov-unavailable { font-size: var(--admin-section-title); font-weight: var(--weight-medium); }
.ov-reading > span, .ov-metric-foot { font-size: var(--admin-caption); color: var(--text-secondary); }
.ov-breakdown { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ov-breakdown progress {
  flex: 0 1 44px; height: 4px; max-width: 100%;
  appearance: none; background: var(--surface-3); color: var(--text-secondary);
  border: 0; border-radius: var(--radius-full); overflow: hidden;
}
.ov-breakdown progress::-webkit-progress-bar { background: var(--surface-3); }
.ov-breakdown progress::-webkit-progress-value { background: var(--text-secondary); }
.ov-breakdown progress::-moz-progress-bar { background: var(--text-secondary); }

/* الصف الأول للسجلات، والثاني للمتابعة. يتشارك كل زوج محوري بداية ونهاية. */
.ov-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: var(--admin-section-gap);
  align-items: stretch;
}
.ov-panel, .ov-side-panel { padding: 0 var(--admin-inset) var(--space-3); }
.ov-panel { display: flex; flex-direction: column; }
.ov-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--admin-header-height);
  padding-block: var(--space-2);
  gap: var(--space-2);
}
.ov-panel-head > div { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ov-panel-head h2 { font-size: var(--admin-section-title); line-height: var(--leading-tight); margin: 0; }
.ov-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--admin-control);
  white-space: nowrap; font-size: var(--admin-caption); font-weight: var(--weight-medium);
  color: var(--text-secondary); line-height: var(--leading-tight);
}
.ov-link:hover, .ov-link:focus-visible, .ov-record:hover strong { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.ov-link svg, .ov-ticket-link > svg { width: var(--admin-icon-tiny); height: var(--admin-icon-tiny); }
.ov-note { padding-block: var(--space-3); color: var(--text-secondary); }

/* يبقى اسم المشروع ومؤشره تحت رأس عمودهما حتى عند التفاف الاسم إلى سطر ثانٍ. */
.ov-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; white-space: normal; }
.ov-table th, .ov-table td { text-align: start; padding: var(--space-1) var(--space-2); overflow-wrap: anywhere; border: 0; }
.ov-table th { height: 28px; color: var(--text-secondary); background: var(--surface-2); font-size: var(--admin-caption); font-weight: var(--weight-medium); }
.ov-table td { color: var(--text-secondary); font-size: var(--admin-ui-text); height: 44px; }
.ov-table tr + tr td { border-block-start: 1px solid var(--border-subtle); }
.ov-projects th:nth-child(1) { width: 37%; }
.ov-projects th:nth-child(2) { width: 27%; }
.ov-projects th:nth-child(3) { width: 14%; }
.ov-users th:first-child { width: 43%; }
.ov-users th:nth-child(2) { width: 33%; }
.ov-table :is(th,td):nth-last-child(-n+2) { text-align: center; }
.ov-table tbody { font-variant-numeric: tabular-nums; }
.ov-record {
  display: inline-flex; max-inline-size: 100%; min-height: var(--admin-control);
  align-items: center; gap: var(--space-2); padding: 0;
  text-align: start; border: 0; background: none; font: inherit; color: var(--text-primary);
}
.ov-record span, .ov-record strong { min-width: 0; overflow-wrap: anywhere; }
.ov-record strong, .ov-ticket strong, .ov-ad h3 { display: block; font-size: var(--admin-ui-text); font-weight: var(--weight-medium); line-height: 1.45; }
.ov-record small, .ov-ticket small { display: block; font-size: var(--admin-caption); line-height: 1.4; color: var(--text-secondary); }
.ov-initial {
  flex: none; display: grid; place-items: center;
  width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--text-secondary); font-size: var(--admin-caption); font-weight: var(--weight-medium);
}
.ov-pill, .ov-total {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--admin-caption); font-weight: var(--weight-medium);
  background: var(--surface-2); color: var(--text-secondary);
}
.ov-total { min-width: 22px; font-variant-numeric: tabular-nums; }
.ov-good { background: var(--success-bg); color: var(--success-fg); }
.ov-bad { background: var(--danger-bg); color: var(--danger-fg); }
.ov-info { background: var(--info-bg); color: var(--info-fg); }
.ov-warn { background: var(--warning-bg); color: var(--warning-fg); }

.ov-side-panel .ov-panel-head { border-bottom: 1px solid var(--border-subtle); }
.ov-tickets { padding: 0; margin: 0; list-style: none; }
.ov-ticket + .ov-ticket { border-block-start: 1px solid var(--border-subtle); }
.ov-ticket-link {
  width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; min-height: var(--control-height);
  background: transparent; border: 0; text-align: start; font: inherit;
}
.ov-ticket-link > svg { color: var(--text-secondary); }
.ov-ticket-link:hover { background: var(--surface-2); }
.ov-ticket-text { min-width: 0; overflow-wrap: anywhere; }
.ov-ad { padding-block: var(--space-3) var(--space-1); }
.ov-ad > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.ov-ad p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--space-1); font-size: var(--admin-ui-text); line-height: var(--leading-normal); color: var(--text-secondary);
}

@container (min-width: 736px) {
  /* نوزّع الصفوف عند اكتمال معاينة الحسابات فقط؛ حساب وحيد يحتفظ بارتفاعه الطبيعي. */
  .ov-users:has(tbody tr:nth-child(3)) { flex: 1; height: 100%; }
}
@container (max-width: 735px) {
  .ov-layout { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 720px) {
  .ov-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; }
  .ov-metric:nth-child(3)::before { display: none; }
  .ov-metric:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}
@container (max-width: 480px) {
  .ov-panel-head { flex-wrap: wrap; gap: 0 var(--space-2); padding-block: var(--space-1); }
  .ov-metric h2 { gap: var(--space-1); }
  .ov-breakdown { gap: var(--space-1); }
  .ov-breakdown progress { flex-basis: 32px; }
  .ov-projects th, .ov-projects td { padding-inline: var(--space-1); }
  .ov-projects th:nth-child(3) { width: 17%; }
  .ov-projects th:nth-child(4) { width: 20%; }
}