/* public/styles.css
 *
 * Hand-matched to the transport app (transport.bluei.io). Every value below is
 * lifted from the Tailwind classes on that app's Login.jsx, its
 * tailwind.config.js brand palette, and its index.css font faces.
 *
 * The transport app expresses these through Tailwind; this service has three
 * server-rendered pages and no build step, so the same values live here as
 * custom properties. Sharing a package between the two was explicitly rejected
 * — copied values drift visibly in git, a shared dependency drifts invisibly.
 *
 * If the transport app restyles, this file is the one place to follow it.
 */

/* ── Fonts (copied from transport/client/public/fonts) ─────────────────── */
@font-face {
  font-family: 'Latinka';
  src: url('/fonts/Latinka-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSans';
  src: url('/fonts/MuseoSans-300.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSans';
  src: url('/fonts/MuseoSans-500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSans';
  src: url('/fonts/MuseoSans-700.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Slate — Tailwind's scale, as used across the transport UI */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;

  /* Blue i Group brand blues — transport's tailwind.config.js `blue` override */
  --blue-800: #021f33;
  --blue-700: #023857;
  --blue-600: #03588A;   /* primary brand blue */
  --blue-500: #0378A6;
  --blue-400: #0479BD;
  --blue-200: #96C6D9;

  /* Feedback */
  --red-950: #450a0a;
  --red-800: #991b1b;
  --red-400: #f87171;
  --green-950: #052e16;
  --green-800: #166534;
  --green-400: #4ade80;

  /* Type */
  --font-sans: 'MuseoSans', system-ui, sans-serif;
  --font-heading: 'Latinka', system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-xl: 1.25rem;

  /* Spacing and shape */
  --radius-lg: 0.5rem;
  --radius-2xl: 1rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  /* Prevents a white flash on overscroll — same reason as the transport app */
  background-color: var(--slate-950);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--slate-300);
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: 24rem;      /* Tailwind max-w-sm */
}

/* ── Header ────────────────────────────────────────────────────────────── */
.brand {
  margin-bottom: var(--space-8);
  text-align: center;
}
.brand img {
  height: 2.5rem;        /* h-10 */
  margin: 0 auto 0.75rem;
  display: block;
  object-fit: contain;
}
.brand p {
  margin: 0;
  color: var(--slate-400);
  font-size: var(--text-sm);
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.card h1 {
  margin: 0 0 var(--space-6);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.75rem;
}
.card p {
  color: var(--slate-400);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--slate-300); font-weight: 500; }

/* ── Messages ──────────────────────────────────────────────────────────── */
.alert {
  margin-bottom: var(--space-4);
  padding: 0.75rem var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.alert-error {
  background: var(--red-950);
  border: 1px solid var(--red-800);
  color: var(--red-400);
}
.alert-success {
  background: var(--green-950);
  border: 1px solid var(--green-800);
  color: var(--green-400);
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }

label {
  display: block;
  color: var(--slate-300);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.375rem;
}

input[type="email"] {
  width: 100%;
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.875rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: border-color 150ms, box-shadow 150ms;
}
input[type="email"]::placeholder { color: var(--slate-500); }
input[type="email"]:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1px var(--blue-500);
}

.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.625rem var(--space-4);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms;
}
.btn:hover { background: var(--blue-500); }
.btn:disabled { background: var(--blue-800); cursor: not-allowed; }

.btn-secondary {
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  color: var(--slate-300);
}
.btn-secondary:hover { background: var(--slate-700); }

/* Spinner shown while the form posts — matches transport's inline spinner */
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  * { transition: none !important; }
}

/* ── Footnote ──────────────────────────────────────────────────────────── */
.footnote {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--slate-500);
  line-height: 1.5;
}
.footnote a { color: var(--slate-400); }

/* ── Admin console ─────────────────────────────────────────────────────── */
/* The sign-in pages are a centred card; the console is a document. Same
 * tokens, different shell. */
body.admin {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: var(--space-6) var(--space-4);
}

.shell-wide {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--slate-800);
}
.admin-logo { height: 1.75rem; display: block; margin-bottom: 0.75rem; }
.admin-header h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
}
.admin-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--slate-400);
}
.admin-who form { margin: 0; }

.panel {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.panel h2 {
  margin: 0 0 var(--space-4);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Wide content scrolls inside its panel rather than the page. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}
thead th {
  text-align: left;
  font-weight: 500;
  color: var(--slate-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.75rem 0.5rem;
  white-space: nowrap;
}
tbody td {
  padding: 0.75rem;
  border-top: 1px solid var(--slate-800);
  vertical-align: middle;
}
tbody tr.row-inactive { opacity: 0.55; }
td.actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  background: var(--blue-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-family: var(--font-sans);
}
.tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: var(--text-xs);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: var(--slate-800);
  color: var(--slate-400);
  white-space: nowrap;
}
.tag-admin { background: var(--blue-700); color: var(--blue-200); }
.tag-warn  { background: #422006; color: #fbbf24; }

.inline { display: inline; margin: 0; }
.row-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.inline-input {
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 0.4rem 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.inline-input::placeholder { color: var(--slate-500); }
.inline-input:focus { outline: none; border-color: var(--blue-500); }
.inline-input.grow { flex: 1; min-width: 14rem; }

.btn-sm { width: auto; margin-top: 0; padding: 0.4rem 0.8rem; font-size: var(--text-xs); }
.btn-danger { background: var(--red-800); }
.btn-danger:hover { background: #b91c1c; }

.muted { color: var(--slate-400); }
.small { font-size: var(--text-xs); font-weight: 300; }
.panel .muted.small { color: var(--slate-500); }
code {
  background: var(--slate-800);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
}

/* Grant chips — one per app, per user. Click to toggle. */
.chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.2rem 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 1px dashed var(--slate-700);
  color: var(--slate-500);
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.chip:hover { border-color: var(--slate-500); color: var(--slate-300); }
.chip-on {
  background: var(--blue-700);
  border: 1px solid var(--blue-600);
  color: var(--blue-200);
}
.chip-on:hover { background: var(--blue-600); color: #fff; }

.tag-app { background: var(--blue-700); color: var(--blue-200); }