/* الرسم يملأ عرض بطاقته وتبقى محاوره مقروءة عند تضييق المساحة. */
.ud-panel {
  container-type: inline-size;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  padding: var(--admin-inset) var(--admin-inset) 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);
}
.ud-head {
  min-height: var(--admin-header-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin-block-end: var(--space-2);
}
.ud-head h2 { font-size: var(--admin-section-title); line-height: var(--leading-tight); }
.ud-head p, .ud-current, .ud-empty { color: var(--text-secondary); font-size: var(--admin-caption); }
.ud-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: 28px; }
.ud-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--admin-caption); }
.ud-legend i { width: 14px; height: 2px; border-radius: var(--radius-full); background: currentColor; }
.ud-created { color: var(--usage-created); }
.ud-imported { color: var(--usage-import); }
.ud-exported { color: var(--usage-export); }
.ud-chart {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: minmax(clamp(108px, 24cqi, 144px), 1fr) auto;
  column-gap: var(--space-2);
  padding: 0 var(--space-1);
  margin-block-start: var(--space-2);
}
.ud-axis, .ud-dates { color: var(--text-secondary); font-size: var(--admin-caption); line-height: 1; font-variant-numeric: tabular-nums; }
.ud-axis { display: flex; flex-direction: column; justify-content: space-between; text-align: end; margin-block: -.4em; }
.ud-plot { position: relative; min-width: 0; }
.ud-plot:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 4px; }
.ud-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; stroke: none; }
.ud-gridline, .ud-guide, .ud-line, .ud-dots { fill: none; vector-effect: non-scaling-stroke; }
.ud-gridline { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.ud-guide { stroke: var(--text-secondary); stroke-dasharray: 3 3; stroke-width: 1; }
.ud-line { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ud-imported .ud-line { stroke-dasharray: 5 3; }
.ud-legend .ud-imported { background: transparent; border-block-end: 2px dashed currentColor; border-radius: 0; }
.ud-dots { stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.ud-hit { fill: transparent; cursor: crosshair; }
.ud-dates { display: flex; justify-content: space-between; grid-column: 2; margin-top: var(--space-2); }
.ud-dates span:only-child { margin-inline: auto; }
.ud-current { margin-block: var(--admin-gap); font-variant-numeric: tabular-nums; }
.ud-empty { padding-block: var(--admin-inset); }
.ud-details { border-top: var(--border-width) solid var(--border-subtle); }
.ud-details summary { display: flex; align-items: center; gap: var(--space-1); min-height: max(var(--admin-control), 36px); width: fit-content; cursor: pointer; color: var(--text-secondary); font-size: var(--admin-ui-text); }
.ud-details summary::-webkit-details-marker { display: none; }
.ud-details summary svg { width: var(--admin-icon-tiny); height: var(--admin-icon-tiny); }
.ud-details[open] > summary svg { transform: rotate(-90deg); }
.ud-details summary:hover { color: var(--text-primary); }
.ud-details summary:focus-visible, .ud-table-wrap:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
.ud-table-wrap { max-height: 20rem; overflow: auto; margin-bottom: var(--admin-gap); }
.ud-table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ud-table-wrap th, .ud-table-wrap td {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: center;
  font-size: var(--admin-ui-text);
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.ud-table-wrap thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-secondary); font-size: var(--admin-caption); }
.ud-table-wrap th:first-child { text-align: start; }
.ud-table-wrap tbody th { background: transparent; font-weight: var(--weight-regular); }
@container (max-width: 430px) {
  .ud-table-wrap th, .ud-table-wrap td { padding-inline: var(--space-1); }
}