/* css/admin.css
   Palette extracted from mockup/mockup_v2.html (see SPEC.md
   "Palette (CSS custom properties)"), plus the base document reset and top
   bar (shared chrome across every view — see mockup screen 1a/1b). Dashboard
   tile rules live in css/dashboard.css, search view rules in css/search.css.
*/

:root {
  --bg: #121620;
  --surface: #1A202E;
  --surface2: #232B3B;
  --outline: #2D3748;
  --navy: #0A142E;
  --muted: #94A3B8;
  --dim: #64748B;
  --text: #F8FAFC;
  --accent: #14B8A6;
  --accent-bright: #5EEAD4;
  --green: #34D399;
  --amber: #FBBF24;
  --red: #F87171;
  --blue: #93B4E4;

  /* Tinted backgrounds at ~13% alpha, derived from the semantic colors above. */
  --accent-tint: rgba(20, 184, 166, 0.13);
  --green-tint: rgba(52, 211, 153, 0.13);
  --amber-tint: rgba(251, 191, 36, 0.13);
  --red-tint: rgba(248, 113, 113, 0.13);
  --blue-tint: rgba(147, 180, 228, 0.13);
}

/* ---------- base reset ---------- */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-bright);
}

button, input, select, textarea {
  font-family: inherit;
}

main#view {
  display: block;
}

/* ---------- top bar (shared across every view) ---------- */

.topbar {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 28px;
  background: var(--navy);
  border-bottom: 1px solid var(--outline);
}

.topbar-logo {
  font: 700 15px "Plus Jakarta Sans", sans-serif;
  color: var(--text);
  white-space: nowrap;
}

.topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

/* Hard-gate: js/app.js sets the native `hidden` attribute on .topbar-nav
   while signed out / not a program_manager. The plain `display: flex` rule
   above has equal-or-higher specificity than the UA default `[hidden] {
   display: none }`, so this explicit override is needed for `hidden` to
   actually take effect (and it also removes the nav from the tab order and
   accessibility tree, satisfying "hidden or inert"). */
.topbar-nav[hidden] {
  display: none;
}

.topbar-nav a {
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--muted);
  font: 500 13px "Inter", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.topbar-nav a:hover {
  background: rgba(248, 250, 252, 0.06);
  color: var(--text);
}

.topbar-nav a.active {
  background: var(--accent-tint);
  color: var(--accent-bright);
  font-weight: 600;
}
.topbar-nav a.active:hover {
  background: var(--accent-tint);
}

.topbar-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
}