/*
 * 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 page and the charts of admin-charts.js. Written with the tokens of
 * design-system.css and never with values of its own, and with the motion layer's own keyframes
 * (rise, fade, shimmer: styles.css) — the two that are new are the charts'. The tests read this
 * file with the other two: a rule written twice anywhere, a token used and not defined, a design
 * system token written again, all fail. Everything that moves stops under prefers-reduced-motion:
 * the block at the end of styles.css turns it all off, this file adds nothing to it.
 */

/* the area has no tab bar and no add button, and a wider column for its lists and charts */
html.is-admin .topbar__actions { display: none; }
html.is-admin .screen { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }

@media (min-width: 720px) {
  html.is-admin body,
  html.is-admin .topbar,
  html.is-admin .picker {
    max-width: var(--container-narrow);
  }
}

/* an entry that is a link, in the menu and in the side panel: a link has an underline, a button
   has not */
a.overflow-menu__item,
a.side__item {
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.admin__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

.admin__bar { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.admin__bar .chips { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.admin__body { display: flex; flex-direction: column; gap: var(--space-4); }
.admin__back { align-self: flex-start; text-decoration: none; }
.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,
.admin__toolbar .select { flex: 1 1 12em; min-width: 0; width: auto; }
.admin__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin__bar .button,
.admin__pager .button { flex: none; width: auto; }
.admin__block { display: flex; flex-direction: column; gap: var(--space-3); }
.admin__error { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); }
.admin__error p { margin: 0; color: var(--danger); }
.admin__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin__actions .button { flex: none; width: auto; }
.admin__field { display: block; }

/* a block that was drawn from nothing: its children come in one after the other (admin.js writes
   where each stands in --i) */
.admin-fresh > * {
  --i: 0;
  animation: rise var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--dur-fast) / 5);
}

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

.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.admin-tile { display: flex; flex-direction: column; 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); }
.admin-group__title { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }

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

.admin-rows { gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.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's page */

.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-track { flex: 1 1 100%; height: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }

/* scaled rather than widened, for the reason the budget meter is: admin.js sets the scale */
.admin-track__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* -------------------------------------------------------------------------------- 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); }

/* a chart that was just drawn: its bars rise from their baseline and its lines are swept in from
   the left (admin-charts.js puts is-drawing on the figure; the geometry is the chart's own) */
@keyframes rise-up {
  from { transform: scaleY(0); }
}

@keyframes sweep {
  from { opacity: 0; transform: scaleX(0); }
}

.chart.is-drawing .chart__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rise-up var(--dur-slow) var(--ease-out) both;
}

.chart.is-drawing .chart__line,
.chart.is-drawing .chart__area,
.chart.is-drawing .chart__dot {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: sweep var(--dur-slow) var(--ease-out) both;
}