/* نستخدم سلم الإدارة في الملخص ونحتفظ بألوان العمليات لمفتاح الرسم والبيانات. */
.usage-page {
  --usage-created: var(--tag-3-fg);
  --usage-import: var(--tag-1-fg);
  --usage-export: var(--tag-5-fg);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--admin-section-gap);
  font-size: var(--admin-ui-text);
}
.usage-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "heading periods report";
  align-items: center;
  gap: var(--space-2) var(--admin-gap);
}
.usage-heading { grid-area: heading; }
.usage-title .usage-periods { grid-area: periods; justify-self: start; }
.usage-title .usage-report { grid-area: report; justify-self: end; }
.usage-title h1 {
  font: var(--weight-bold) var(--admin-page-title)/var(--leading-tight) var(--font-display);
}
.usage-report {
  padding: var(--space-1) var(--space-3);
  min-height: var(--admin-control);
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: none;
  white-space: nowrap;
}
.usage-report svg, .usage-metric h2 svg { width: var(--admin-icon-small); height: var(--admin-icon-small); }

/* مفتاح الفترة ومفتاح الصيغ يتبعان أدوات الاختيار المجمّعة في واجهة المشاريع. */
.usage-periods, .uf-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
}
.usage-periods button, .uf-switch button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--admin-control);
  padding: var(--space-1) var(--space-3);
  font-weight: var(--weight-medium);
  font-size: var(--admin-ui-text);
  white-space: nowrap;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-radius: var(--radius-full);
}
.usage-periods button svg { width: var(--admin-icon-tiny); height: var(--admin-icon-tiny); }
.usage-periods button:hover, .uf-switch button:hover { color: var(--text-primary); background: var(--surface-3); }
.usage-periods button[aria-pressed="true"], .uf-switch button[aria-pressed="true"] {
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: var(--shadow-1);
}
.usage-range-label { color: var(--text-secondary); font-size: var(--admin-caption); margin-block-start: var(--space-1); }
.usage-date-fields { display: flex; flex-wrap: wrap; gap: var(--admin-gap); }
.usage-date-fields label { min-width: 0; flex: 1 1 140px; }
.usage-date-fields input { width: 100%; color-scheme: light; }
[data-theme="dark"] .usage-date-fields input { color-scheme: dark; }
.usage-date-form .actions { margin-block-start: var(--admin-gap); }
.usage-coverage, .usage-source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--admin-caption);
  line-height: var(--leading-normal);
}
.usage-coverage svg, .usage-source svg { width: var(--admin-icon-tiny); height: var(--admin-icon-tiny); margin-block-start: .18em; }
.usage-coverage { color: var(--info-fg); }
.usage-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: var(--space-4);
}
.usage-metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--admin-inset);
  gap: var(--space-1);
}
.usage-metric + .usage-metric { border-inline-start: var(--border-width) solid var(--border-subtle); }
.usage-metric h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--admin-ui-text);
  font-weight: var(--weight-medium);
}
/* تقترن أيقونة المؤشر بعنوانه عند بداية السطر كما في النظرة العامة. */
.usage-metric h2 svg { order: 1; flex-shrink: 0; color: var(--text-secondary); }
.usage-metric .ov-number { font-size: var(--admin-metric); line-height: var(--leading-tight); }
.usage-metric p { color: var(--text-secondary); font-size: var(--admin-caption); margin-top: auto; }
.usage-missing-count { font-size: var(--admin-ui-text); }
.usage-analysis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-section-gap);
  align-items: start;
}
/* يتشارك الرسم والجدول حافة سفلية عند عرض عدة صيغ؛ يظل الجدول القصير أو الموسّع بطوله الطبيعي. */
@container (min-width: 741px) {
  .usage-analysis:has(.uf-table tbody tr:nth-child(4)):has(.ud-chart):not(:has(.ud-details[open])) {
    align-items: stretch;
  }
}
@container (max-width: 740px) {
  .usage-analysis { grid-template-columns: minmax(0, 1fr); }
  .usage-title {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "heading report" "periods periods";
  }
}
@container (max-width: 540px) {
  .usage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .usage-metric { padding: var(--space-3) var(--admin-inset); }
  .usage-metric:nth-child(3) { border-inline-start: 0; }
  .usage-metric:nth-child(n+3) { border-block-start: var(--border-width) solid var(--border-subtle); }
}
@container (max-width: 420px) {
  .usage-periods { width: 100%; flex-wrap: wrap; }
  .usage-periods button { flex: 1; padding-inline: var(--space-1); }
  .usage-report { padding-inline: var(--space-2); }
}