/* German Dominion -- Statistik admin tab (2026-08-18).
 *
 * Reuses the admin shell's own structural classes untouched (.panel,
 * .panel-head, .gsad-price-row, .btad-form, .btad-note, .plad-h,
 * .table-wrap, .pop-table, .empty-row, .btn) -- only the classes genuinely
 * new to this tab are defined here. Same token vocabulary as
 * /leaderboard/leaderboard.css; see that file's header note on the
 * fallback values.
 */

.stad-tiles {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.stad-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--glass-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
}

.stad-tile-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-62, rgba(233, 227, 214, 0.62));
}

.stad-tile-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bone, #e9e3d6);
}

@container (max-width: 400px) {
  .stad-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stad-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 20px;
}

.stad-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--glass-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  color: var(--bone-80, rgba(233, 227, 214, 0.8));
}

.stad-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--bone-62, rgba(233, 227, 214, 0.62));
}

.stad-history {
  margin: 10px 0 6px;
  overflow-x: auto;
}

.stad-history-svg {
  display: block;
  height: 90px;
  width: auto;
  max-width: 100%;
}

.stad-bar {
  fill: var(--accent, #c9a227);
  opacity: 0.85;
}

.stad-bar:hover {
  opacity: 1;
}

#stad-title {
  text-transform: none;
  letter-spacing: normal;
}