/**
 * RYVLS house style for the admin panel.
 *
 * Filament's own colours come from the panel provider (`->colors()`), which is where the cyan,
 * the gold and the near-black neutrals are set. This file does the part a palette cannot: the
 * brand letter, and the handful of surfaces where Filament's greys are a shade off the app's.
 *
 * The two families are the same as the app (besluit 2026-09-16). Nippo carries the brand and is
 * only ever set in capitals — the brand speaks in capitals. Inter carries anything you read a
 * sentence of, and every number, because Nippo has no tabular figures and a column of counts set
 * in it would not line up.
 *
 * Nippo is self-hosted from /fonts, which the ITF Free Font License allows in so many words
 * ("You may self-host the Font Software on your own servers"). The licence text sits next to the
 * files.
 */

@font-face {
  font-family: 'Nippo';
  src: url('/fonts/Nippo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nippo';
  src: url('/fonts/Nippo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ryvls-bg: #0a0b0c;
  --ryvls-elevated: #111315;
  --ryvls-panel: #15181b;
  --ryvls-border: rgba(255, 255, 255, 0.08);
  --ryvls-border-strong: rgba(255, 255, 255, 0.16);
  --ryvls-text: #f4f6f7;
  --ryvls-muted: #9aa3ab;
  --ryvls-faint: #5f6870;
  --ryvls-accent: #1ad4ff;
  --ryvls-gold: #e0a93a;

  /* Display type is set in capitals, so it needs the letter-spacing the app gives it. */
  --ryvls-tracking-label: 0.1em;
  --ryvls-tracking-title: 0.16em;
}

/* --- Surfaces -------------------------------------------------------------------------------
   Filament's dark greys are warmer and lighter than RYVLS's near-black. Naming the few surfaces
   that carry the page is enough; everything else inherits from the palette. */

.fi-body {
  background-color: var(--ryvls-bg);
}

.fi-main-sidebar,
.fi-topbar > nav,
.fi-modal-window,
.fi-dropdown-panel {
  background-color: var(--ryvls-elevated);
  border-color: var(--ryvls-border);
}

.fi-section,
.fi-ta-ctn,
.fi-wi,
.fi-fo-field-wrp .fi-input-wrp {
  background-color: var(--ryvls-panel);
  border-color: var(--ryvls-border);
}

/* --- The brand ------------------------------------------------------------------------------
   The wordmark is the one place the panel should look like the app before anything else loads. */

.fi-logo {
  font-family: 'Nippo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--ryvls-tracking-title);
  color: var(--ryvls-text);
}

/* --- Display type ---------------------------------------------------------------------------
   Everything the app would set in `<Label>` or `<Title>`: headings, table headers, tabs, buttons,
   badges and the navigation. Capitals only — that is the whole point of the family. */

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading,
.fi-ta-header-cell,
.fi-tabs-item-label,
.fi-sidebar-group-label,
.fi-btn,
.fi-badge,
.fi-fo-field-label,
.fi-in-entry-label {
  font-family: 'Nippo', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ryvls-tracking-label);
}

.fi-header-heading,
.fi-simple-header-heading {
  letter-spacing: var(--ryvls-tracking-title);
}

.fi-fo-field-label {
  font-size: 0.7rem;
  color: var(--ryvls-muted);
}

.fi-ta-header-cell {
  font-size: 0.7rem;
}

/* A navigation label is read, not scanned, so it keeps its own case but takes the brand letter. */
.fi-sidebar-item-label {
  font-family: 'Nippo', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
  font-weight: 700;
}

/* --- Numbers --------------------------------------------------------------------------------
   Counts, reps and dates line up in a column, so they stay in Inter with tabular figures. The
   brand letter has none, and a column set in it shuffles sideways as the digits change. */

.fi-ta-text-item-label,
.fi-in-entry-wrp-content,
.fi-ta-record .fi-ta-cell {
  font-variant-numeric: tabular-nums;
}

/* --- Accents --------------------------------------------------------------------------------
   Gold is territory and records, cyan is everything else. The queue badge in the sidebar is the
   one number that should catch the eye on the way past. */

.fi-sidebar-item-badge.fi-color-danger {
  color: var(--ryvls-gold);
  background-color: rgba(224, 169, 58, 0.16);
}


.fi-simple-layout {
  background:
    radial-gradient(60rem 40rem at 50% -10rem, rgba(26, 212, 255, 0.07), transparent 70%),
    var(--ryvls-bg);
}

/* The brand logo is written into the page, so it inherits a colour: the letters follow the panel's
   text, the mark keeps the cyan it is drawn with. The SVG carries no size of its own, so it takes
   the height Filament sets on its wrapper. */
.fi-logo {
  color: var(--gray-50);
}

.fi-logo svg {
  display: block;
  height: 100%;
  width: auto;
}