/**
 * @file        admin.css
 * @description Admin surface — plain, dense, and deliberately unbranded
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         a6014f8d-2b73-4c59-90e6-d57123ba84e0
 * @version     0.0.0.3
 * @created     2026-09-11
 * @updated     2026-09-14
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* It reuses the design tokens so colour and spacing stay consistent, but none
   of the public site's banded rhythm: an editing screen wants density and a
   visible form structure, not generous vertical air between reading bands. */

.admin {
  background: var(--surface-page);
  color: var(--text-primary);
}

.admin__bar {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding-block: var(--space-3);
  margin-bottom: var(--space-6);
}

.admin__bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin__nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}

.admin__nav a {
  color: var(--text-on-dark);
}

.admin__nav a:focus-visible,
.admin__signout button:focus-visible {
  outline: var(--focus-ring-inverse);
  outline-offset: 2px;
}

.admin__signout {
  margin: 0;
}

.admin__login {
  max-width: 24rem;
  margin: var(--space-12) auto;
}

/* --- Forms ---------------------------------------------------------------- */

.admin__fieldset {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.admin__fieldset legend {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  padding-inline: var(--space-2);
}

.admin__field {
  margin-bottom: var(--space-4);
}

.admin__field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* The checkbox row is the one case where the label belongs beside the control
   rather than above it, because the control is the smaller of the two. */
.admin__field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: baseline;
}

.admin__field--check label {
  margin-bottom: 0;
}

.admin__field--check .admin__hint {
  grid-column: 2;
}

.admin__field input[type="text"],
.admin__field input[type="email"],
.admin__field input[type="password"],
.admin__field input[type="url"],
.admin__field input[type="date"],
.admin__field textarea {
  width: 100%;
  /* 16px minimum: below this, iOS Safari zooms the viewport on focus, which
     on a form this long leaves the admin scrolled somewhere unexpected. */
  font: inherit;
  font-size: max(1rem, var(--text-base));
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.admin__field textarea {
  resize: vertical;
}

:is(.admin__field, .admin__row-form) :is(input, textarea, select):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.admin__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Tables --------------------------------------------------------------- */

.admin__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.admin__table :is(th, td) {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.admin__table th {
  font-family: var(--font-heading);
}

/* Each sponsor row is its own form; wrapping keeps it usable at 375px rather
   than forcing a horizontal scroll across six columns. */
.admin__row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.admin__row-form input[type="number"] {
  width: 4rem;
}

.admin__subheading {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-lg);
}

.admin__state {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Messages ------------------------------------------------------------- */

/* Both carry a left border as well as a background, so the distinction
   survives for anyone who cannot separate the two fills by colour (SC 1.4.1).
   The text of each message states what happened in words regardless. */
.admin__notice,
.admin__error {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 4px solid;
}

.admin__notice {
  background: var(--surface-raised);
  border-left-color: var(--color-digital-blue);
}

.admin__error {
  background: var(--surface-raised);
  border-left-color: var(--color-golden-accent);
  font-weight: 600;
}

/* Story 1.5: the standing "what is still missing" list. A THIRD border colour
   would be a third thing to learn, so it reuses the notice's — this describes
   state, like a notice, rather than reporting a rejection, like an error. The
   left border again carries the distinction alongside the fill, so the region
   is still separable without colour (SC 1.4.1), and every line names its
   language in words. */
.admin__gaps {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-digital-blue);
  background: var(--surface-raised);
  margin-bottom: var(--space-5);
}

.admin__gaps-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.admin__gaps-list {
  margin: 0;
  padding-left: var(--space-5);
}

.admin__gaps-list li + li {
  margin-top: var(--space-2);
}

/* --- Dashboard ------------------------------------------------------------ */

.admin__cards {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .admin__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin__card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--surface-raised);
}

.admin__card h2 {
  margin-top: 0;
}

/* --- Admin footer --------------------------------------------------------
 * The same copyright / version line the public footer carries, on the surface
 * where it is read most: this is where an operator checks what release they
 * are editing against. Bordered rather than banded — the admin has no bands. */

.admin__foot {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-6);
  padding-block: var(--space-4);
}

.admin__foot p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* One-letter label, so the target floor has to be set in both directions
 * (SC 2.5.5) — see the same rule in site-chrome.css. */
.admin__dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}