/*
 * The team side (team.systemvaquero.com): sign-in and welcome, the team header and nav, the account slot on the onboarding
 * pages, and the admin nav and invite box. It builds on app.css (tokens, .card, .btn, .field, .hero), so light and dark mode
 * come from there. Later phases add their own files (team-leads.css, team-pay.css) after this one.
 */

/* ---------- Header and nav (team/_layout.php) ---------- */
.team-top .topbar__inner { max-width: 1040px; }
.team-top__bar { padding-bottom: 10px; }
.team-top__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.team-top__logo { display: block; height: 21px; width: auto; }
@media (prefers-color-scheme: dark) { .team-top__logo { filter: brightness(0) invert(.92); } }
.team-top__who { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; }
.team-top__who form { margin: 0; }
.team-top__name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }

.link-btn {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 10px 6px; cursor: pointer; white-space: nowrap;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; border-radius: 6px; }

.team-nav, .admin-nav { border-top: 1px solid var(--line); }
.team-nav__inner, .admin-nav__inner {
  max-width: 1040px; margin: 0 auto; padding: 0 12px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.team-nav a, .admin-nav a {
  flex: none; padding: 11px 14px; font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.team-nav a:hover, .admin-nav a:hover { color: var(--ink); }
.team-nav a[aria-current="page"], .admin-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.team-nav a:focus-visible, .admin-nav a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -3px; border-radius: 6px; }

.page--team { max-width: 1040px; padding-bottom: 56px; }

/* ---------- Sign-in and welcome ---------- */
.auth-card { display: block; max-width: 420px; margin: 56px auto 0; padding: 28px 24px 26px; }
.auth-card h1 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.auth-card__sub { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.auth-card__btn { width: 100%; margin-top: 6px; text-align: center; }
a.auth-card__btn { display: block; margin-top: 16px; }
.auth-card__help { margin-top: 16px; font-size: 14px; color: var(--muted); text-align: center; }
.form-error { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 500; }
@media (max-width: 560px) { .auth-card { margin-top: 28px; padding: 22px 20px; } }

/* ---------- Onboarding pages (team/*.html): the header slot, and the page held back until api/me.php answers ---------- */
.topbar__account { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.topbar__account form { margin: 0; }
.topbar__who { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; }
@media (max-width: 640px) { .topbar__who { display: none; } }
@media (max-width: 480px) {
  /* Mark, step and Sign out fit one row on a 360 px phone; the product name would push Sign out onto a second row. */
  .topbar__inner:has(.topbar__account) .brand__name { display: none; }
  .topbar__inner:has(.topbar__account) { padding-right: 8px; }
}
body.gate main, body.gate .footer { visibility: hidden; }
.gate-error { margin: 24px 0; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 500; }

/* ---------- Admin: shared header, nav and page width (admin/_nav.php) ---------- */
.page--admin { max-width: 1040px; }
.topbar--admin .topbar__inner { max-width: 1040px; }
.admin-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 36px 0 20px; flex-wrap: wrap; }
.admin-head h1 { font-size: 28px; font-weight: 700; }
.notice { padding: 12px 16px; border-radius: 10px; background: var(--keep-soft); color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }
.notice strong { color: var(--keep); }

/* The invite link, shown once (admin/index.php) */
.invite-box { scroll-margin-top: 140px; margin: 28px 0 0; padding: 20px 22px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.invite-box h2 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.invite-box p { font-size: 14px; color: var(--ink-2); }
.invite-box__row { display: flex; gap: 10px; margin: 14px 0 8px; }
.invite-box__row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.invite-box__copied { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .invite-box__row { flex-direction: column; } }

/* Jumping to an applicant (#app-12) must land below the sticky header and nav. */
.apps tr[id^="app-"] { scroll-margin-top: 130px; }