/* Nevron branding for the Django admin.
 *
 * Loaded via UNFOLD["STYLES"], which unfold's skeleton.html emits *before*
 * unfold/css/styles.css -- normally the losing position. It wins anyway because
 * unfold is Tailwind v4 and declares its tokens inside `@layer theme { :root, :host { ... } }`,
 * and unlayered CSS always beats layered CSS regardless of source order or specificity.
 * So keep every rule in this file OUT of an @layer, or it will silently stop applying.
 *
 * Fonts and colours mirror operational-mission-control-frontend (assets/css/tailwind.css
 * and DESIGN_SYSTEM.md) so the admin and the app read as one product.
 */

/* ---------------------------------------------------------------- webfonts --
 * Self-hosted rather than the Google Fonts CDN the frontend uses: the admin sits
 * behind auth on an internal host and should not make third-party requests.
 * Files are @fontsource latin subsets, the same ones the frontend's mock mode uses.
 * Paths are relative to this stylesheet, i.e. /static/nevron/fonts/.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
/* 600 is not one of the frontend's weights, but it is load-bearing here: unfold's
 * templates use `font-semibold` 69 times, and CSS font matching rounds an absent 600
 * *up* to 700, which would render the whole admin heavier than the app. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jost-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/jost-latin-900-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens --
 * Only --font-sans is overridden. --font-mono and, critically, the Material
 * Symbols icon font are left alone: unfold drives SITE_SYMBOL, every sidebar
 * icon and every action button through them, and they would degrade to literal
 * words ("travel_explore") if disturbed.
 */
:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Raw brand palette, stable across themes. */
  --nevron-navy: #040447;
  --nevron-royal: #010772;
  --nevron-neon: #6ae4fc;
  --nevron-sky: #48a1f8;
}

/* ---------------------------------------------------------------- lockup --
 * The frontend's wordmark is type, not artwork: Jost 900, uppercase, .14em
 * tracking (components/Form.vue). Reproduced here rather than shipped as an
 * image so it stays crisp and translatable.
 */
.nevron-wordmark {
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nevron-heading {
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nevron-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  margin-top: 0.375rem;
  text-transform: uppercase;
}

/* The neon accent under a page heading. Neon is reserved for interactive and accent
 * use, never as a surface fill (DESIGN_SYSTEM.md).
 *
 * Sizing lives here, not on the element as `h-[3px] w-16`. Unfold ships a PREBUILT
 * Tailwind bundle whose scan never sees this project's templates, so arbitrary-value
 * utilities (anything in square brackets) simply do not exist in the stylesheet and
 * fail silently -- `h-[3px]` is how this rule spent its first release invisible. */
.nevron-rule {
  background-color: var(--nevron-neon);
  height: 3px;
  width: 4rem;
}

.nevron-neon {
  color: var(--nevron-neon);
}

/* ------------------------------------------------- missing-utility fallbacks --
 * Standard-scale Tailwind utilities are NOT automatically safe either. Unfold's
 * bundle contains only what unfold's OWN markup uses, so anything this project
 * reaches for that unfold happens not to use has no rule behind it. Verified
 * absent from unfold/css/styles.css: `divide-y`, `divide-base-*`, `tracking-wide`,
 * `sm:grid-cols-2`. Before adding a class to a template, grep the bundle for it;
 * if it isn't there, it belongs here.
 */

/* `divide-y divide-base-100 dark:divide-base-800` -- row separators in a list. */
.nevron-divide > * + * {
  border-top: 1px solid var(--color-base-100);
}

.dark .nevron-divide > * + * {
  border-top-color: var(--color-base-800);
}

/* `tracking-wide` -- the metric-card eyebrow labels. */
.nevron-label {
  letter-spacing: 0.025em;
}

/* `sm:grid-cols-2` -- the metric-card grid between the sm and lg breakpoints.
 * The upper bound is load-bearing: this rule is unlayered and unfold's
 * `lg:grid-cols-4` is not, so without it this would win at every width and the
 * grid would never reach four columns. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .nevron-grid-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Note the asymmetry the rules below exploit: unfold's bundle omits the *utility
 * classes* for colours its own markup never uses, but it still defines the whole
 * `--color-*` token set in @theme. So referencing the token gives exact parity with
 * unfold without hardcoding a hex that would drift from it. */

/* `text-green-600` / `dark:text-green-500` -- success state on the Rayons banner.
 * (The red equivalents are in the bundle; unfold uses them, green it does not.) */
.nevron-ok {
  color: var(--color-green-600);
}

.dark .nevron-ok {
  color: var(--color-green-500);
}

/* `max-h-40 whitespace-pre-wrap` -- the Rayons failure output. Both matter: this is
 * multi-line validation text listing every offending feature, so without the wrap a
 * long line scrolls the page sideways and without the cap it pushes the changelist
 * off screen entirely. */
.nevron-log {
  max-height: 10rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* `border-red-500` / `dark:bg-red-500/10` -- the danger affordance on the "Log in as"
 * warnings. Worth its own rule rather than dropping: it is the only thing marking
 * those list items as warnings on a privileged action. */
.nevron-warn {
  border-color: var(--color-red-500);
}

.dark .nevron-warn {
  background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
}

/* Inline emblem. Uses the raw brand colours rather than unfold's primary ramp so it
 * matches the sidebar emblem (logo-light.svg / logo-dark.svg) exactly: navy in light,
 * neon in dark, the same inversion the frontend's --primary does. */
.nevron-emblem {
  color: var(--nevron-navy);
}

.dark .nevron-emblem {
  color: var(--nevron-neon);
}

/* ------------------------------------------------------- inline admin bits --
 * Small pieces of chrome that ModelAdmin methods render as raw HTML, so they
 * cannot use unfold's Tailwind classes and would otherwise fall back to browser
 * defaults or hardcoded colours.
 */
.nevron-btn-danger,
.nevron-btn-success {
  border-radius: var(--border-radius, 10px);
  display: inline-block;
  font-weight: 500;
  padding: 2px 10px;
  white-space: nowrap;
}

.nevron-btn-danger {
  background-color: color-mix(in oklab, var(--color-red-600) 10%, transparent);
  color: var(--color-red-700);
}

.nevron-btn-success {
  background-color: color-mix(in oklab, var(--color-green-600) 12%, transparent);
  color: var(--color-green-700);
}

.dark .nevron-btn-danger {
  background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
  color: var(--color-red-400);
}

.dark .nevron-btn-success {
  background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent);
  color: var(--color-green-400);
}

/* Readonly list of an organisation's feature settings (core.CompanyAdmin). */
.nevron-setting-row {
  padding: 2px 0;
}

.nevron-setting-row + .nevron-setting-row {
  border-top: 1px solid rgb(127 127 127 / 0.15);
}

.nevron-setting-link {
  color: var(--color-primary-600, var(--nevron-royal));
  font-weight: 500;
  text-decoration: none;
}

.nevron-setting-link:hover {
  text-decoration: underline;
}

.dark .nevron-setting-link {
  color: var(--nevron-neon);
}