/* يبقى عدد المشاريع والعمليات مميزاً عن شريط الحصة في الاتجاهين. */
.uf-panel {
  container-type: inline-size;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--admin-inset);
  padding-block-end: 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);
}
.uf-export { --uf-bar: var(--usage-export); }
.uf-import { --uf-bar: var(--usage-import); }
.uf-head {
  min-height: var(--admin-header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--admin-gap);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
}
#usage-format-results { display: flex; flex: 1; flex-direction: column; }
.uf-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--admin-section-title);
  line-height: var(--leading-tight);
}
.uf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.uf-table th, .uf-table td {
  border: 0;
  padding: var(--space-1) var(--space-2);
  text-align: start;
  overflow-wrap: anywhere;
  line-height: var(--leading-normal);
}
.uf-table thead th {
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--admin-caption);
  font-weight: var(--weight-medium);
}
.uf-table thead th:first-child {
  width: 24%;
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}
.uf-table thead th:last-child {
  width: 38%;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}
.uf-table tbody th, .uf-table td {
  height: 34px;
  color: var(--text-primary);
  font-size: var(--admin-ui-text);
}
.uf-table tbody th { background: transparent; }
.uf-table :is(th, td):nth-child(2), .uf-table :is(th, td):nth-child(3) { text-align: center; }
.uf-table tbody tr + tr > * { border-block-start: var(--border-width) solid var(--border-subtle); }
.uf-format { display: flex; align-items: center; gap: var(--space-1); }
.uf-format svg { width: var(--admin-icon-tiny); height: var(--admin-icon-tiny); color: var(--text-secondary); flex-shrink: 0; }
.uf-format bdi, .uf-table .uf-count { font-weight: var(--weight-medium); }
.uf-share { display: flex; align-items: center; gap: var(--space-2); }
.uf-share > span { min-width: 3.6em; text-align: end; font-size: var(--admin-caption); }
.uf-share progress {
  appearance: none;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 5px;
  background: var(--surface-3);
  color: var(--uf-bar);
  border: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.uf-share progress::-webkit-progress-bar { background: var(--surface-3); }
.uf-share progress::-webkit-progress-value { background: var(--uf-bar); border-radius: var(--radius-full); }
.uf-share progress::-moz-progress-bar { background: var(--uf-bar); border-radius: var(--radius-full); }
.uf-note, .uf-message { color: var(--text-secondary); font-size: var(--admin-caption); }
.uf-note { margin: auto 0 0; padding-block: var(--space-2); border-block-start: var(--border-width) solid var(--border-subtle); }
.uf-message { margin: 0; padding-block: var(--space-2) var(--admin-inset); }

/* تحتفظ الجداول بالأعمدة الأربعة؛ نقل النسبة فوق الشريط يحمي عرض الأرقام على الهاتف. */
@container (max-width: 420px) {
  .uf-table th, .uf-table td { padding-inline: var(--space-1); }
  .uf-format svg { display: none; }
}
@container (max-width: 330px) {
  .uf-share { flex-direction: column-reverse; gap: 2px; align-items: flex-start; }
  .uf-share > span { min-width: 0; text-align: start; }
  .uf-share progress { flex: none; height: 4px; }
}