/*
 * Project styling layered on top of the vendored KERN UX standard.
 *
 * Rules here cover only what KERN does not ship for this application:
 *   - the Fira Sans subset actually used (KERN's own font CSS pulls 33 files)
 *   - a destructive button variant (KERN has feedback-danger tokens but no
 *     danger button, and offboarding/pseudonymisation must not look routine)
 *   - the application header, because kern-kopfzeile is the federal masthead
 *     and this is not a government service
 *   - page scaffolding (page head, form grid) that KERN leaves to the service
 *
 * Everything else must use KERN component classes and KERN tokens. Do not
 * hardcode colours, spacing or radii here: reference --kern-* custom
 * properties so a KERN upgrade carries through.
 */

/* KERN uses weights 400/500/600 only; those three faces are vendored. */
@font-face {
  font-family: "Fira Sans";
  src: url("/static/vendor/kern/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/static/vendor/kern/fonts/FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/static/vendor/kern/fonts/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--kern-color-layout-background-level-1, #f4f5f8);
  color: var(--kern-color-layout-text-default-contextual, #131525);
  font-family: var(--kern-typography-font-family-default, "Fira Sans"), sans-serif;
}

.app-shell {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--kern-metric-space-default, 16px);
  box-sizing: border-box;
}

/*
 * Application header. Deliberately not kern-kopfzeile: that component carries
 * the Bundesadler/flag and identifies a state service.
 */
.app-header {
  background: var(--kern-color-darkblue-900, #10245c);
  border-bottom: var(--kern-metric-border-width-default, 0.125rem) solid
    var(--kern-color-action-default-contextual, #2a3ab8);
}
.app-header .app-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
  padding-block: var(--kern-metric-space-small, 8px);
}
.app-header__brand {
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
  color: var(--kern-color-neutral-025, #f3f4f7);
  white-space: nowrap;
}
.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-default, 16px);
  flex: 1;
}
.app-nav a {
  display: inline-block;
  padding: var(--kern-metric-space-2x-small, 2px) 0;
  color: var(--kern-color-neutral-025, #f3f4f7);
  text-decoration: none;
  border-bottom: var(--kern-metric-border-width-default, 0.125rem) solid transparent;
  white-space: nowrap;
}
.app-nav a:hover {
  text-decoration: underline;
}
.app-nav a[aria-current="page"] {
  border-bottom-color: var(--kern-color-neutral-025, #f3f4f7);
  font-weight: var(--kern-typography-font-weight-semi-bold, 600);
}
/* Below this width the nav cannot share a row; give it one of its own rather
   than letting single links orphan onto a second line. */
@media (max-width: 70rem) {
  .app-header__brand {
    order: 1;
  }
  .app-header form {
    order: 2;
    margin-left: auto;
  }
  .app-nav {
    order: 3;
    flex-basis: 100%;
  }
}
/* KERN's focus ring is dark; invert it against the header. */
.app-header :focus-visible {
  outline: var(--kern-metric-border-width-default, 0.125rem) solid
    var(--kern-color-neutral-025, #f3f4f7);
  outline-offset: 2px;
}

main {
  display: block;
  padding-block: var(--kern-metric-space-x-large, 32px);
}

.page-head {
  margin-bottom: var(--kern-metric-space-large, 24px);
}
.page-head > * {
  margin: 0;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kern-metric-space-small, 8px);
  margin-top: var(--kern-metric-space-small, 8px);
}

/* KERN cards carry no padding of their own; body padding is the component's. */
.kern-card {
  width: 100%;
  margin-bottom: var(--kern-metric-space-default, 16px);
  background: var(--kern-color-layout-background-default-contextual, #fff);
}
.kern-card__body {
  width: 100%;
  padding: var(--kern-metric-space-large, 24px);
  box-sizing: border-box;
  /* KERN aligns card children to flex-start, which collapses tables and
     grids to their content width; they must span the card instead. */
  align-items: stretch;
}
.kern-card__body > :first-child {
  margin-top: 0;
}
.kern-card__body > :last-child {
  margin-bottom: 0;
}
/* Nested cards (per-row editors) sit on a tint so the nesting reads. */
.kern-card .kern-card {
  background: var(--kern-color-layout-background-level-1, #f4f5f8);
  margin-top: var(--kern-metric-space-default, 16px);
}

/* Multi-field forms flow into columns instead of one tall stack. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--kern-metric-space-default, 16px);
  align-items: start;
}
.field-grid > .field-grid__full {
  grid-column: 1 / -1;
}
/* Inline search/filter bars. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--kern-metric-space-default, 16px);
  margin-bottom: var(--kern-metric-space-large, 24px);
}
.form-actions {
  margin-top: var(--kern-metric-space-default, 16px);
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--kern-metric-space-2x-small, 2px);
}

/*
 * Destructive actions. KERN defines feedback-danger colours but ships no
 * danger button, and these two operations are irreversible.
 */
.kern-btn--danger {
  background: var(--kern-color-feedback-danger-contextual, #a4262c);
}
.kern-btn--danger .kern-label {
  color: var(--kern-color-neutral-025, #f3f4f7);
}
.kern-btn--danger:hover {
  background: color-mix(
    in oklch,
    var(--kern-color-feedback-danger-contextual, #a4262c),
    black 16%
  );
}

.table-empty {
  color: var(--kern-color-layout-text-muted-contextual, #5b5f7a);
  font-style: italic;
}