/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the admin area (the page at /admin) adds on top of styles.css: the way round it, the figures,
 * the lists, the user's sheet and the charts of admin-charts.js. Written with the tokens of
 * design-system.css and never with values of its own. What moves (a chart growing in) is in
 * motion.css. The tests read this file with the others: a rule written twice anywhere, a token used
 * and not defined, a design system token written again, all fail.
 */

/* the area has no tab bar and no pantry, and a wider column for its lists and charts */
#app.is-admin { max-width: var(--container-narrow); }
#app.is-admin .tabs { display: none; }
#app.is-admin .screens { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }

.admin__bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.admin__bar .chips { flex: 1 1 auto; min-width: 0; margin-inline: 0; padding-inline: 0; }
.admin__body { display: flex; flex-direction: column; gap: var(--space-4); }
.admin__back { align-self: flex-start; }
.admin__note { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.admin__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.admin__toolbar .input { flex: 1 1 12em; min-width: 0; }
.admin__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin__block { display: flex; flex-direction: column; gap: var(--space-3); }

/* ------------------------------------------------------------------------- the figures */

.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.admin-tile { gap: var(--space-1); }
.admin-tile__value { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.admin-tile__note { font-size: var(--fs-caption); color: var(--text-muted); }
.admin-tile--alert .admin-tile__value { color: var(--danger); }

.admin-group { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------------------------------------------------------------------------- the lists */

.admin-rows { gap: var(--space-2); }

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.admin-row--flat { align-items: flex-start; flex-wrap: wrap; }

button.admin-row {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button.admin-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.admin-row__main { display: flex; flex-direction: column; min-width: 0; }
.admin-row__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.admin-row__meta { font-size: var(--fs-body-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.admin-row__side { flex: none; font-size: var(--fs-body-sm); color: var(--text-muted); text-align: right; }
.admin-row__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }

.admin-badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.admin-badge--pro { background: var(--accent-soft); color: var(--accent); }
.admin-badge--bad { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------------------- the user sheet */

.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.admin-facts dt { color: var(--text-muted); font-size: var(--fs-body-sm); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }

.admin-strip { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

.admin-strip__cell {
  flex: 1 1 0;
  min-width: 0;
  height: var(--space-6);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

.admin-strip__cell--bot { background: var(--accent); }
.admin-strip__cell--app { background: var(--success); }
.admin-strip__cell--both { background: var(--highlight); }

.admin-ban { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-ban__reason { min-height: 88px; padding: var(--space-3); resize: vertical; }
.admin-ban__confirm { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); }
.admin-ban__confirm p { margin: 0; color: var(--danger); font-weight: var(--fw-medium); }

/* -------------------------------------------------------------------------- database bars */

.admin-bar { gap: var(--space-1); }
.admin-bar .bar__fill { background: var(--accent); }

/* -------------------------------------------------------------------------------- charts */

:root {
  --chart-height: 168px;
}

.chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.chart__svg { display: block; width: 100%; height: auto; max-height: var(--chart-height); overflow: visible; }
.chart--spark .chart__svg { height: var(--space-9); max-height: none; }

.chart__tone--accent {
  --tone: var(--accent);
}

.chart__tone--warn {
  --tone: var(--highlight);
}

.chart__tone--ok {
  --tone: var(--success);
}

.chart__tone--bad {
  --tone: var(--danger);
}

.chart__rule { stroke: var(--border); stroke-width: 1; }
.chart__tick { fill: var(--text-muted); font-size: var(--fs-mono-label); font-family: var(--font-mono); }
.chart__line { stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__area { fill: var(--tone); fill-opacity: 0.14; stroke: none; }
.chart__dot { fill: var(--tone); }
.chart__bar { fill: var(--tone); }
.chart__hit { fill: transparent; cursor: pointer; }
.chart__cursor { stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }

.chart__readout { margin: 0; min-height: var(--space-6); font-size: var(--fs-body-sm); color: var(--text-muted); }

.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--text-muted); }
.chart__key { display: flex; align-items: center; gap: var(--space-2); }
.chart__swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); background: var(--tone); }

.chart__empty { margin: 0; padding: var(--space-3) 0; font-size: var(--fs-body-sm); color: var(--text-muted); }

.admin-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.admin-chart__total { font-size: var(--fs-caption); color: var(--text-muted); }

.admin-row--flat .bar { flex: 1 1 100%; }