/*
 * admin-utils.css — the exact utility vocabulary admin.html uses, served from
 * this box.
 *
 * S105, 2026-08-02. `admin.html` was the ONLY page in the product loading
 * `https://cdn.tailwindcss.com` and Google Fonts. Every other page composes
 * from `design.css`, and the landing page states the rule in its own header:
 * "no external fonts, no CDN script — same 'this box can be offline' rule as
 * the app."
 *
 * ── Why this was not cosmetic ───────────────────────────────────────────────
 * Measured in a browser with the CDN blocked: the page renders as raw HTML,
 * and because `hidden` is a Tailwind utility, `class="hidden"` stops meaning
 * anything — so ALL FOUR tab panels render at once. This is the page where an
 * operator enters Stripe secret keys, OAuth client secrets, Xero and Porkbun
 * credentials. The tab switching is not decoration; without it every panel's
 * secret fields are on screen simultaneously.
 *
 * The Google Fonts request was ALREADY FAILING on this box before any of this
 * — so the page had been one CDN hiccup away from unusable the whole time.
 *
 * ── Why a utility sheet and not a port to design.css ────────────────────────
 * Porting 474 lines of utility markup to the design system is a redesign, and
 * a redesign is how you ship a page nobody checked. This is the narrow fix:
 * exactly the 70 classes the page already uses, same values, so the rendered
 * result is byte-for-byte the intent it had — verifiable by screenshotting the
 * page with the CDN blocked and comparing against the CDN-loaded render.
 * Bringing it into design.css properly is a separate, deliberate piece of work.
 */

:root {
  --tw-brand-400: #2dd4bf;
  --tw-brand-500: #14b8a6;
  --tw-brand-600: #0d9488;
  --tw-surface-50: #f8fafc;
  --tw-surface-100: #f1f5f9;
  --tw-surface-700: #334155;
  --tw-surface-800: #1e293b;
  --tw-surface-900: #0f172a;
  --tw-surface-950: #020617;
  --tw-red-300: #fca5a5;
  --tw-red-400: #f87171;
}

/* A minimal reset, standing in for Tailwind's preflight. Without it the page
   inherits browser defaults the markup never expected (list bullets, heading
   margins, a white body). */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }          /* load-bearing: the tab switcher is this */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-center { align-self: center; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.h-14 { height: 3.5rem; }
.max-w-5xl { max-width: 64rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-4 { margin-right: 1rem; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }

/* Tailwind's space-y-* is "margin-top on every child but the first". */
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ── type ───────────────────────────────────────────────────────────────── */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── colour ─────────────────────────────────────────────────────────────── */
.bg-brand-500 { background-color: var(--tw-brand-500); }
.bg-surface-800 { background-color: var(--tw-surface-800); }
.bg-surface-900 { background-color: var(--tw-surface-900); }
.bg-surface-950 { background-color: var(--tw-surface-950); }
.text-white { color: #fff; }
.text-brand-400 { color: var(--tw-brand-400); }
.text-red-400 { color: var(--tw-red-400); }
.text-surface-50 { color: var(--tw-surface-50); }
.text-surface-100 { color: var(--tw-surface-100); }
.text-surface-700 { color: var(--tw-surface-700); }

/* ── borders ────────────────────────────────────────────────────────────── */
.border { border: 1px solid transparent; }
.border-b { border-bottom: 1px solid transparent; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-transparent { border-color: transparent; }
.border-brand-500 { border-color: var(--tw-brand-500); }
.border-white\/5 { border-color: rgba(255, 255, 255, .05); }
.border-white\/10 { border-color: rgba(255, 255, 255, .1); }
.rounded { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-xl { border-radius: .75rem; }

/* ── hover ──────────────────────────────────────────────────────────────── */
.hover\:bg-brand-600:hover { background-color: var(--tw-brand-600); }
.hover\:text-white:hover { color: #fff; }
.hover\:text-red-300:hover { color: var(--tw-red-300); }
.hover\:underline:hover { text-decoration: underline; }

/* Inputs carry only utility classes in this page's markup, so without
   preflight they would render as unstyled browser controls on a near-black
   background — invisible text on invisible fields. */
input, select, textarea {
  background-color: var(--tw-surface-950);
  color: var(--tw-surface-50);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .375rem;
  padding: .375rem .75rem;
}
input::placeholder, textarea::placeholder { color: var(--tw-surface-700); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--tw-brand-500);
  outline-offset: 1px;
}