/*
 * NightShade's look for the Avo admin (NS-135, NS-134). Avo loads this file after its own stylesheet and serves it as it is
 * (not through Tailwind), so it holds plain CSS and variable overrides only. Every colour and font is a brand-pack token
 * (app/assets/tailwind/tokens.css); AdminAppearanceTest fails when a value here is not the pack's. The brand palette itself
 * (accent, neutrals, placeholder) is config.appearance in config/initializers/avo.rb.
 *
 * tokens.css is not imported: it also restyles <body>, which would override Avo's own surfaces. The fonts are the ones
 * public/fonts already serves, so the admin makes no call to Google Fonts.
 */
@font-face { font-family: "Sora"; src: url("/fonts/Sora-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --font-sans: "Sora", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* The brand green is dim on dark surfaces, so dark mode uses the pack's dark --brand with its --on-brand text. */
.dark {
  --color-accent: #6EC38C;         /* --brand (dark) */
  --color-accent-content: #3E8C5A; /* --brand-strong (dark) */
  --color-accent-foreground: #07090A; /* --on-brand (dark) */
}

/* Codes and data read in the mono face: keys, additive codes, numbers, ids. */
code, kbd, pre, samp,
[data-field-id="key"],
[data-field-id="code"],
[data-field-id="ins_number"],
[data-field-id="card_bit"],
[data-field-id="gtin"],
[data-field-id="ncbi_taxon_id"],
[data-field-id="foodon_id"] {
  font-family: var(--font-mono);
}

/*
 * S grades (NS-134). The badge always says the grade in words ("S2 · Possible"); colour only backs it up. S0 and S1 stay a
 * neutral grey, so nothing here reads as an all-clear. S2 to S4 use the pack's NSX 2 to 4 colours. The text on them is the
 * pack's darkest ink for all three: the pack's own white on NSX 4 is 3.9:1, under the 4.5:1 this admin keeps.
 * Scoped to the certainty field so other badges (waitlist status and the like) keep Avo's colours.
 */
:root {
  --ns-grade-2: #E9C628;   /* --nsx2 */
  --ns-grade-3: #F0961D;   /* --nsx3 */
  --ns-grade-4: #E0521F;   /* --nsx4 */
  --ns-grade-ink: #07090A; /* --bg (dark) */
}

[data-field-id="certainty_badge"] .badge--yellow { background: var(--ns-grade-2); color: var(--ns-grade-ink); }
[data-field-id="certainty_badge"] .badge--orange { background: var(--ns-grade-3); color: var(--ns-grade-ink); }
[data-field-id="certainty_badge"] .badge--red { background: var(--ns-grade-4); color: var(--ns-grade-ink); }

/* S3 and S4 rows: a tint and a bar at the row's start (a logical border, so it follows the page direction). */
tr.ns-grade-row[data-certainty="S3"] { background: color-mix(in srgb, var(--ns-grade-3) 14%, transparent); }
tr.ns-grade-row[data-certainty="S4"] { background: color-mix(in srgb, var(--ns-grade-4) 14%, transparent); }
tr.ns-grade-row[data-certainty="S3"] > td:first-child { border-inline-start: 4px solid var(--ns-grade-3); }
tr.ns-grade-row[data-certainty="S4"] > td:first-child { border-inline-start: 4px solid var(--ns-grade-4); }

/* NS-319: the Help link in the top bar (app/views/avo/partials/_header.html.erb). Avo's layout loads this file, not the app's Tailwind
   build, so its focus ring lives here. currentColor keeps it readable in both themes without a colour of its own. */
.admin-help-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: .25rem; }