@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/radii.css";
@import "./tokens/elevation.css";

/* Form primitives: promoted out of login.css by TASK-0024, because the
   account page needs the same field, label, input, help-text,
   validation-summary and button styling that Login.cshtml already uses,
   and its layout (_LayoutPool.cshtml) does not load login.css. Every
   Turf Line layout loads this file, so this is the one place these
   rules can live without loading an auth-shell stylesheet on a page
   that is not the login page. What stays in login.css is specific to
   that shell: the auth card/column, the provider button skins, and the
   divider. */

.fp-field {
  margin-bottom: var(--fp-space-6);
}

.fp-field:last-of-type {
  margin-bottom: var(--fp-space-3);
}

.fp-label {
  display: block;
  font-size: var(--fp-size-body);
  font-weight: var(--fp-weight-semibold);
  color: var(--fp-text-body);
  margin-bottom: var(--fp-space-2);
}

.fp-input {
  width: 100%;
  padding: 11px var(--fp-space-5);
  border-radius: var(--fp-radius-md);
  border: var(--fp-border-hairline) solid var(--fp-border-card);
  font-size: var(--fp-size-strong);
  font-family: inherit;
  box-sizing: border-box;
  background: var(--fp-bg-card);
  color: var(--fp-text-body);
}

.fp-input::placeholder {
  color: var(--fp-placeholder);
}

.fp-input:focus-visible,
.fp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--fp-border-state) var(--fp-focus-ring);
}

.fp-help {
  font-size: var(--fp-size-meta);
  color: var(--fp-state-incorrect);
  margin-top: var(--fp-space-2);
}

.fp-validation-summary .validation-summary-valid {
  display: none;
}

.fp-validation-summary .validation-summary-errors {
  list-style: none;
  margin: 0 0 var(--fp-space-6);
  padding: var(--fp-space-5);
  border-radius: var(--fp-radius-md);
  background: var(--fp-loss-tint);
  border: var(--fp-border-hairline) solid var(--fp-loss-soft);
  color: var(--fp-state-incorrect);
  font-size: var(--fp-size-body);
}

.fp-validation-summary .validation-summary-errors ul {
  list-style: none;
  margin: var(--fp-space-2) 0 0;
  padding: 0;
}

.fp-btn {
  width: 100%;
  border-radius: var(--fp-radius-lg);
  padding: var(--fp-space-5);
  font-size: var(--fp-size-strong);
  font-weight: var(--fp-weight-semibold);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-4);
  box-sizing: border-box;
}

.fp-btn--primary {
  background: var(--fp-action-primary);
  color: var(--fp-action-primary-text);
  border: none;
  margin-bottom: var(--fp-space-8);
}

.fp-btn--primary:hover {
  background: var(--fp-green-dark);
}



/* App bar: promoted out of pool.css and login.css by the TASK-0031
   fidelity pass, because the admin shell (_Layout_BS5_Admin.cshtml)
   became its third consumer and loads neither of them. Two occurrences
   were left duplicated deliberately -- 00-principles.md says to wait
   for the third -- and this is the third. Every Turf Line layout loads
   this file, so it is the one place these rules can live without a
   layout pulling in another shell's stylesheet.

   The sticky positioning comes from the pool copy; the login copy
   omitted it. The auth shell does not scroll, so sticky is inert
   there rather than a behaviour change. .fp-app-bar__page is used by
   the auth bar alone and comes from the login copy. */

.fp-app-bar {
  background: var(--fp-ink);
  color: var(--fp-on-ink);
  height: var(--fp-navbar-h);
  padding: 0 var(--fp-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}

.fp-app-bar__brand {
  font-weight: var(--fp-weight-semibold);
  font-size: var(--fp-size-strong);
  letter-spacing: var(--fp-track-brand);
}

.fp-app-bar__nav {
  display: flex;
  gap: var(--fp-space-1);
}

.fp-app-bar__link {
  color: var(--fp-on-ink);
  border-radius: var(--fp-radius-sm);
  padding: var(--fp-space-3) var(--fp-space-6);
  font-size: var(--fp-size-body);
  font-weight: var(--fp-weight-semibold);
}

.fp-app-bar__link:hover {
  color: var(--fp-on-ink);
  text-decoration: underline;
}

.fp-app-bar__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--fp-border-state) var(--fp-focus-ring);
}

.fp-app-bar__page {
  font-size: var(--fp-size-body);
  color: var(--fp-on-ink-dim);
}

/* Card and chip: promoted out of pool.css by the TASK-0031 layout fix,
   for the same reason the app bar moved here -- the admin dashboard is
   a third consumer and _Layout_BS5_Admin.cshtml does not load pool.css.
   Every admin card was rendering with no background, border or radius
   because this rule was not reachable from that layout. A screenshot
   showed it; reading the CSS did not. */

.fp-card {
  background: var(--fp-bg-card);
  border: var(--fp-border-hairline) solid var(--fp-border-card);
  border-radius: var(--fp-radius-xl);
  padding: var(--fp-card-pad);
  margin-bottom: var(--fp-tile-pad);
}

.fp-chip {
  font-size: var(--fp-size-label);
  font-weight: var(--fp-weight-semibold);
  padding: var(--fp-space-1) var(--fp-space-3);
  border-radius: var(--fp-radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--fp-track-label);
}

/* Anchor reset: promoted out of pool.css by the TASK-0031 layout fix.
   This is the third component to move here for the same reason -- it
   was a base-layer rule sitting in one screen's stylesheet, so the
   admin layout (which loads only this file and admin.css) fell through
   to Bootstrap's `a { text-decoration: underline }` and every sidebar
   item rendered underlined.

   _LayoutAuth.cshtml never loaded pool.css either, so the login page
   had the same underline. Promoting fixes both; the login page's links
   change from underlined browser-blue to the Turf Line green, which is
   what the rest of the app already looks like. */

a {
  color: var(--fp-green);
  text-decoration: none;
}

a:hover {
  color: var(--fp-green-dark);
  text-decoration: underline;
}


/* Document: one answer for all three Turf Line layouts (TASK-0035).

   This was three -- a rule in pool.css, a near-duplicate in login.css
   differing only in naming --fp-field where the other named its alias
   --fp-bg-app, and a .fp-admin-body class in admin.css that omitted the
   margin reset because Bootstrap's reboot happened to supply it. Three
   answers to one question is how the base layer drifted: each layout
   that did not load pool.css needed its own, and each was written
   slightly differently.

   margin is reset here rather than left to Bootstrap, so the admin
   shell does not depend on a stylesheet it loads from a CDN. */

body {
  margin: 0;
  background: var(--fp-bg-app);
  font-family: var(--fp-font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--fp-text-body);
}

/* .visually-hidden (TASK-0050 / ADR-0024): defined here, not admin.css,
   because it is not admin-specific -- the standard clip-rect pattern,
   present in the accessibility tree but removed from visual layout.
   Until now this was a Bootstrap CDN utility class. ADR-0024 requires
   a local definition for the admin Users and Jobs pages, where a
   screen reader's only column labels now depend on it; the CDN can
   fail to load, and a missing rule would print those labels visibly
   instead of merely losing the styling. More than one layout needs it
   (both admin pages, and the existing headings on Cache and Jobs that
   already carried this class before the CDN dependency was noticed),
   so it belongs in this shared stylesheet per the layering rule in
   docs/project/architecture.md. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}