/* admin.css — page styles for the admin pages: Host, Members, Invites, platform settings (Phase 3; loaded by base.html after wy.css, tokens only).
   Layout only: everything visual comes from the primitives. Selectors are scoped under
   the page classes (wy-host-*, wy-members-*, wy-person-*, wy-invites-*). */

/* Host: stat tiles are cards holding a .wy-stat and a sparkline (_host_tiles.html) */
.wy-host-tile > .wy-card__body { padding: var(--wy-space-4); }
.wy-host-tile--net .wy-stat__value { font-size: var(--wy-text-xl); }
.wy-host-spark { display: block; width: 100%; height: calc(var(--wy-space-6) + var(--wy-space-1)); /* 28 */ margin-top: var(--wy-space-3); overflow: visible; }

/* Host: chart grid. wycharts.js fills each [data-chart] node and adds its own .mx-* parts;
   the rules below keep those parts on the tokens in both themes. */
.wy-host-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wy-space-4); }
.wy-host-charts > .wy-host-chart { position: relative; min-width: 0; padding: var(--wy-space-4); border: 1px solid var(--wy-border); border-radius: var(--wy-radius-lg); background: var(--wy-surface); }
.wy-host-chart .mx-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wy-space-3); margin-bottom: var(--wy-space-2); }
.wy-host-chart .mx-title { color: var(--wy-text-muted); font-size: var(--wy-text-sm); font-weight: var(--wy-weight-medium); }
.wy-host-chart .mx-now { color: var(--wy-text); font-size: var(--wy-text-md); font-weight: var(--wy-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wy-host-chart .mx-tick { fill: var(--wy-text-muted); font-family: var(--wy-font-mono); }
.wy-host-chart .mx-legend { display: flex; flex-wrap: wrap; gap: var(--wy-space-2) var(--wy-space-4); margin-top: var(--wy-space-2); }
.wy-host-chart .mx-key { color: var(--wy-text-muted); font-size: var(--wy-text-xs); }
.wy-host-chart .mx-empty { color: var(--wy-text-muted); font-size: var(--wy-text-sm); }
.wy-host-chart .mx-tip { border: 1px solid var(--wy-border); border-radius: var(--wy-radius-md); background: var(--wy-surface-raised); color: var(--wy-text); box-shadow: var(--wy-shadow); font-size: var(--wy-text-xs); }
.wy-host-chart .mx-tip-t { color: var(--wy-text-muted); font-family: var(--wy-font-mono); }
.wy-host-chart .mx-tip-row { color: var(--wy-text-muted); }
.wy-host-chart .mx-tip-row b { color: var(--wy-text); }
.wy-host-note { margin: var(--wy-space-4) 0 0; }
@media (min-width: 640px) {
  .wy-host-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wy-host-chart--wide { grid-column: 1 / -1; }
}

/* Host: memory composition bar (an SVG of three rects) and its legend */
.wy-host-comp { display: block; width: 100%; height: var(--wy-space-3); border-radius: var(--wy-radius-pill); overflow: hidden; }
.wy-host-legend { display: flex; flex-wrap: wrap; gap: var(--wy-space-2) var(--wy-space-4); margin: var(--wy-space-3) 0 0; padding: 0; list-style: none; color: var(--wy-text-muted); font-size: var(--wy-text-sm); }
.wy-host-legend li { display: inline-flex; align-items: center; gap: var(--wy-space-2); }
.wy-host-legend b { color: var(--wy-text); font-weight: var(--wy-weight-medium); }
.wy-host-legend__swatch { flex: none; width: var(--wy-space-3); height: var(--wy-space-3); }

/* Host: storage table; the name keeps its note underneath, the usage column takes the rest */
.wy-host-storage__name { display: inline-flex; flex-direction: column; min-width: calc(var(--wy-space-16) * 3); /* 192 */ }
.wy-host-storage .wy-quota { min-width: calc(var(--wy-space-16) * 2); /* 128 */ gap: var(--wy-space-1); }
.wy-host-storage__use { width: 100%; }

/* Members: compact quota bars inside table cells; the role badges may wrap under the email */
.wy-members-table .wy-quota { min-width: calc(var(--wy-space-16) + var(--wy-space-4)); /* 80 */ gap: var(--wy-space-1); }
.wy-members-table .wy-quota .wy-help { margin: 0; }
.wy-members-table td > .wy-members-table__member { flex-wrap: wrap; }

/* Person: quota bars and the matching number fields share one grid */
.wy-person-quotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--wy-space-16) * 2 + var(--wy-space-8))), 1fr)); /* min 160 */ gap: var(--wy-space-4); }

/* Invites: the two create fields side by side from 640 up; long invite links wrap */
.wy-invites-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wy-space-4); }
.wy-table td .wy-invites-link { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .wy-invites-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stacked rows below 640: a quota bar fills the value side of its labelled cell */
@media (max-width: 639px) {
  .wy-host-storage td > .wy-quota, .wy-members-table td > .wy-quota { flex: 1 1 auto; }
  .wy-host-storage__name { align-items: flex-end; }
}