/*
 * The toolbox's shared look: the hub's pages use it, and every tool should
 * link it first (<link rel="stylesheet" href="/assets/toolbox.css">) and then
 * its own stylesheet for anything tool-specific. Served in front of the session
 * gate because the login page uses it.
 *
 * Brand colours are the logo's own: navy #00447c and gray #80807c.
 */
:root {
  --brand: #00447c;
  --brand-dark: #00335e;
  --brand-tint: #eef3f8;
  --steel: #80807c;
  --bg: #f4f6f8;
  --card: #ffffff;
  --fg: #1d2329;
  --muted: #5f6770;
  --line: #d8dde3;
  --flag: #b00020;
  --flag-tint: #fdecee;
  --ok: #0a7a3d;
  --ok-tint: #e7f4ec;
  --warn: #8a5a00;
  --warn-tint: #fff4dc;
  --radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
}

a { color: var(--brand); }

/*
 * The bar across the top of every screen. Markup:
 *
 *   <header class="nav">
 *     <a class="home" href="/"><img src="/assets/logo-white.svg" alt="RPM Admin Toolbox"></a>
 *     <a href="/tool/list.html" class="active">List</a>
 *     <span class="spacer"></span>
 *     <span class="who"><span class="who-label">Signed in as </span>TREYC</span>
 *     <a href="/logout">Sign out</a>
 *   </header>
 *
 * The logo is the way back to the picker, so every screen has one.
 */
header.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 1.25rem;
  background: var(--brand);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
header.nav .home { display: block; margin-right: 0.5rem; flex: none; }
header.nav .home img { display: block; height: 3rem; width: auto; }
header.nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
header.nav a:hover { color: #fff; }
header.nav a.active { color: #fff; font-weight: 600; }
header.nav .spacer { flex: 1; }
header.nav .who { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
/* On a phone, keep the username but drop the words around it. */
@media (max-width: 600px) {
  header.nav { gap: 0.9rem; padding: 0.5rem 1rem; }
  header.nav .home img { height: 2.5rem; }
  header.nav .who-label { display: none; }
}

main { padding: 1.5rem 1.25rem 3rem; max-width: 1100px; margin: 0 auto; }
main.narrow { max-width: 760px; }

h1 { font-size: 1.35rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.hint { color: var(--muted); margin: 0 0 1rem; }

button, .button {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1rem;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.secondary, .button.secondary { color: var(--fg); background: var(--card); border-color: var(--line); }
button.secondary:hover, .button.secondary:hover { background: var(--brand-tint); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--fg);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}

.notice, .error, .warn {
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  border-left: 4px solid;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.notice { background: var(--ok-tint); border-color: var(--ok); }
.error { background: var(--flag-tint); border-color: var(--flag); }
.warn { background: var(--warn-tint); border-color: var(--warn); }

table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }