/* ==========================================================================
   Rutilquarz Web — design system (Birnchen brand, "Farben" v10)
   --------------------------------------------------------------------------
   The Birnchen studio at night: near-black navy sky (#080B28), Birnchenblau
   surfaces (#0D1345) and one neon pear glowing Birnchengrün (#DFFB65). Dark
   is where the brand lives; light is a soft green-tinted daylight page where
   Birnchenblau takes over the ink and the neon appears only as non-text
   decoration (the primary button's label, chips, marks). Birnchenlila is the
   quiet secondary accent. Audience includes teammates with autism/ADHD:
   generous spacing, one focal point per screen, visible focus, nothing
   signalled by color alone.

   Layered on top of Bootstrap 5: we re-point Bootstrap's CSS variables at our
   tokens instead of fighting specificity.

   Contrast (WCAG AA, verified numerically):
     light  text #0D1345 on #F6FAE4 ≈ 16.5:1 (on #FFF 17.6:1) · muted #595959 ≈ 6.6:1
            link #4046BC ≈ 7.0:1 · btn ink #DFFB65 on #0D1345 ≈ 15.2:1 (hover 12.7:1)
            green text #5E6A2B ≈ 5.5:1 (on #EBF5C1 5.1:1) · ok #4C6E1F ≈ 5.5:1
            warn #8A5F08 ≈ 5.3:1 · danger #B8382E ≈ 5.4:1 · info #4046BC ≈ 7.0:1
            lilac #6D4F97 on #F0EAF9 ≈ 5.6:1
     dark   text #E4E8F7 on #080B28 ≈ 15.8:1 (on #0D1345 14.4:1) · muted #A8AFD6 ≈ 9.0:1
            accent #DFFB65 ≈ 16.7:1 (on #0D1345 15.2:1, on #252F12 12.1:1)
            btn ink #0D1345 on #DFFB65 ≈ 15.2:1 · link #A9AFFE ≈ 9.4:1 (on #0D1345 8.6:1)
            lilac #CFB6EB on #2B2358 ≈ 7.8:1 · ok #C9E35E ≈ 12.2:1 · warn #EFC368 ≈ 10.6:1
            danger #FFA198 ≈ 9.0:1 · info #9FC2F8 ≈ 9.7:1
   Birnchengrün #DFFB65 is text-grade only on the navy surfaces. On light it
   never carries text: the light-side text greens derive from the logo shadow
   green #748239, darkened until they clear 4.5:1; the light link is the brand
   Linkfarbe #A9AFFE darkened on-hue for the same reason.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (vendored, OFL). Latin / Latin-Extended split via unicode-range.
   Lexend = headings, nav, labels. Atkinson Hyperlegible = body and data.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/Lexend-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/Lexend-Variable-LatinExt.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-Regular-LatinExt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-Bold-LatinExt.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — light (daylight page: Background grün "hell", Birnchenblau ink)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg: #f6fae4; /* Background grün "hell" */
  --surface: #ffffff;
  --surface-2: #f0f5d8; /* hover/lift: halfway to the green grounds */
  --border: #dfe5c2;
  --border-strong: #c4cc9e;
  --text: #0d1345; /* Birnchenblau carries all the ink */
  --muted: #595959; /* brand grau, 6.6:1 */

  /* Birnchen greens. --accent = logo/decoration only on light (NOT text);
     --accent-deep = text-grade leaf green (from #748239, darkened to AA);
     --accent-soft = Background grün "dunkel" as tint ground. */
  --accent: #adc838;
  --accent-deep: #5e6a2b;
  --accent-soft: #ebf5c1;
  --link: #4046bc; /* brand Linkfarbe #A9AFFE, darkened on-hue to 7:1 */
  --link-hover: #333a9e;

  /* Signature pairing: Birnchenblau button, Birnchengrün label (≈15:1). */
  --btn-bg: #0d1345;
  --btn-bg-hover: #1a2160;
  --btn-ink: #dffb65;

  /* Birnchenlila — sparingly (the "soon" badge only). */
  --lilac-text: #6d4f97;
  --lilac-tint: #f0eaf9;

  /* Semantics, text-capable on --bg/--surface (never color alone). */
  --ok: #4c6e1f;
  --warn: #8a5f08;
  --danger: #b8382e;
  --info: #4046bc;

  --field-bg: #f1f5de; /* inputs sit slightly inset, darker than surface */
  --focus: #0d1345; /* neon is invisible on light; the navy ring is not */
  --hero-ink: var(--text);

  /* Official logo greens (Blatt #ADC838 / Schatten #748239). */
  --logo-fruit: #adc838;
  --logo-leaf: #748239;

  --shadow-card: 0 0 0 1px rgba(13, 19, 69, 0.06), 0 1px 2px -1px rgba(13, 19, 69, 0.06),
    0 6px 18px -8px rgba(13, 19, 69, 0.14);
  --shadow-topbar: 0 1px 0 var(--border);

  --icon-sun: none; /* theme-toggle shows the *destination* theme */
  --icon-moon: inline-block;

  --font-ui: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

/* Dark (the studio at night — the brand's home theme). Two selectors so the
   explicit toggle beats the OS preference in both directions; the blocks must
   stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #080b28; /* Background-Blau */
    --surface: #0d1345; /* Birnchenblau */
    --surface-2: #181f5a; /* one lifted step above Birnchenblau */
    --border: rgba(207, 214, 255, 0.14);
    --border-strong: rgba(207, 214, 255, 0.3);
    --text: #e4e8f7; /* blue-tinted off-white, deliberately not #fff */
    --muted: #a8afd6;

    --accent: #dffb65; /* Birnchengrün — text-grade on the navy (15:1+) */
    --accent-deep: #dffb65;
    --accent-soft: #252f12; /* dark moss ground under the neon */
    --link: #a9affe; /* brand Linkfarbe as-is: 8.6:1 on Birnchenblau */
    --link-hover: #c3c7ff;

    --btn-bg: #dffb65;
    --btn-bg-hover: #e9ff8a;
    --btn-ink: #0d1345;

    --lilac-text: #cfb6eb; /* Birnchenlila */
    --lilac-tint: #2b2358;

    --ok: #c9e35e; /* Design-Akzent-Grün */
    --warn: #efc368;
    --danger: #ffa198;
    --info: #9fc2f8;

    --field-bg: #0a0e33; /* inset: between page and surface */
    --focus: var(--accent);
    --hero-ink: var(--accent);

    --logo-fruit: #dffb65; /* the pear itself glows at night */
    --logo-leaf: #adc838;

    --shadow-card: 0 0 0 1px rgba(207, 214, 255, 0.1);
    --shadow-topbar: 0 1px 0 var(--border);

    --icon-sun: inline-block;
    --icon-moon: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #080b28; /* Background-Blau */
  --surface: #0d1345; /* Birnchenblau */
  --surface-2: #181f5a; /* one lifted step above Birnchenblau */
  --border: rgba(207, 214, 255, 0.14);
  --border-strong: rgba(207, 214, 255, 0.3);
  --text: #e4e8f7; /* blue-tinted off-white, deliberately not #fff */
  --muted: #a8afd6;

  --accent: #dffb65; /* Birnchengrün — text-grade on the navy (15:1+) */
  --accent-deep: #dffb65;
  --accent-soft: #252f12; /* dark moss ground under the neon */
  --link: #a9affe; /* brand Linkfarbe as-is: 8.6:1 on Birnchenblau */
  --link-hover: #c3c7ff;

  --btn-bg: #dffb65;
  --btn-bg-hover: #e9ff8a;
  --btn-ink: #0d1345;

  --lilac-text: #cfb6eb; /* Birnchenlila */
  --lilac-tint: #2b2358;

  --ok: #c9e35e; /* Design-Akzent-Grün */
  --warn: #efc368;
  --danger: #ffa198;
  --info: #9fc2f8;

  --field-bg: #0a0e33; /* inset: between page and surface */
  --focus: var(--accent);
  --hero-ink: var(--accent);

  --logo-fruit: #dffb65; /* the pear itself glows at night */
  --logo-leaf: #adc838;

  --shadow-card: 0 0 0 1px rgba(207, 214, 255, 0.1);
  --shadow-topbar: 0 1px 0 var(--border);

  --icon-sun: inline-block;
  --icon-moon: none;
}

/* --------------------------------------------------------------------------
   Bootstrap bridge — re-point Bootstrap's variables at our tokens.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--text);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-heading-color: var(--text);
  --bs-body-line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--text);
}
p {
  text-wrap: pretty;
  max-width: 65ch;
}
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
::selection {
  background: var(--accent-soft);
  color: var(--text);
}
.num {
  font-variant-numeric: tabular-nums;
}
[x-cloak] {
  display: none !important;
}

/* Focus: one loud, consistent ring everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.field__input:focus-visible {
  box-shadow: none; /* Bootstrap's glow would double the signal */
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--link);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 500;
}
.skip-link:focus-visible {
  left: 8px;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  box-shadow: var(--shadow-topbar);
}
.topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--text);
}
.brand__mark .brand__fruit { fill: var(--logo-fruit); }
.brand__mark .brand__stem { stroke: var(--muted); }
.brand__mark .brand__leaf { fill: var(--logo-leaf); }
.brand__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.mainnav {
  flex: 1;
  min-width: 0;
}
.mainnav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Never scroll horizontally: with no room the items wrap (the no-JS
     baseline) or collapse behind the disclosure toggle (enhanced, narrow). */
  flex-wrap: wrap;
}
/* Disclosure toggle — hidden by default; app.js marks the nav as enhanced and
   the narrow-viewport media query below reveals it. A real <button>, so focus
   and keyboard handling come free. */
.mainnav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.mainnav__toggle:hover,
.mainnav__toggle[aria-expanded="true"] {
  background: var(--surface-2);
}
.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
a.mainnav__link:hover {
  color: var(--text);
  background: var(--surface-2);
}
.mainnav__link.is-active {
  color: var(--accent-deep);
  background: var(--accent-soft);
  font-weight: 600;
}
.mainnav__link.is-soon {
  cursor: not-allowed;
}
.soon-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lilac-tint);
  color: var(--lilac-text);
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.topbar__user {
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.lang-switch__current,
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 38px;
  padding: 0 10px;
}
.lang-switch__current {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.lang-switch__btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.lang-switch__btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.theme-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}
.theme-toggle__icon--sun { display: var(--icon-sun); }
.theme-toggle__icon--moon { display: var(--icon-moon); }

/* --------------------------------------------------------------------------
   Buttons (on top of Bootstrap's .btn via --bs-btn-*)
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-ui);
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: 8px;
  min-height: 40px;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms cubic-bezier(0.23, 1, 0.32, 1),
    color 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  --bs-btn-bg: var(--btn-bg);
  --bs-btn-border-color: var(--btn-bg);
  --bs-btn-color: var(--btn-ink);
  --bs-btn-hover-bg: var(--btn-bg-hover);
  --bs-btn-hover-border-color: var(--btn-bg-hover);
  --bs-btn-hover-color: var(--btn-ink);
  --bs-btn-active-bg: var(--btn-bg-hover);
  --bs-btn-active-border-color: var(--btn-bg-hover);
  --bs-btn-active-color: var(--btn-ink);
  --bs-btn-disabled-bg: var(--btn-bg);
  --bs-btn-disabled-border-color: var(--btn-bg);
  --bs-btn-disabled-color: var(--btn-ink);
}
.btn-quiet {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-color: var(--muted);
}
.btn-block {
  display: block;
  width: 100%;
}
.btn:disabled {
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Flash messages — icon + text, never color alone.
   -------------------------------------------------------------------------- */
.flash-region {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.flash-region:not(:empty) {
  padding-top: 16px;
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.875rem;
  margin-bottom: 12px;
}
.flash__icon {
  flex: none;
  margin-top: 2px;
}
.flash--error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.flash--notice {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 30%, var(--border));
}
.flash--ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}

/* --------------------------------------------------------------------------
   Page scaffold
   -------------------------------------------------------------------------- */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.screen-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.screen-head__title {
  margin: 0;
  font-size: 1.5rem;
}
.screen-head__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.screen-head__hint {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Forms & filter bar
   -------------------------------------------------------------------------- */
.field {
  margin-bottom: 16px;
}
.field__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.field__input:hover {
  border-color: var(--accent-deep); /* text-grade green: visible in light too */
}
.field__input--date {
  font-variant-numeric: tabular-nums;
  width: auto;
}

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}
.filter-bar .field__label {
  margin-bottom: 4px;
}
.filter-bar__field {
  margin: 0;
}
.filter-bar__check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.check__input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-deep);
  cursor: pointer;
}
.check__label {
  font-size: 0.875rem;
  cursor: pointer;
  padding: 10px 0; /* stretch the hit area to ≥40px */
}
.busy-note {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
  align-self: center;
}
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Harvest strip — the focal point of /time: what the period amounted to.
   A whisper of pear green sets it apart from the working table below.
   -------------------------------------------------------------------------- */
.harvest {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
}
.harvest__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.harvest__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.harvest__figure {
  font-family: var(--font-ui);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--hero-ink); /* Birnchenblau by day, Birnchengrün at night */
}
.harvest__unit {
  margin-left: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
}
.harvest__meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 0;
}
.harvest__meta-item dt {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.harvest__meta-item dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Time-log table
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.log-table th {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  padding: 12px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.log-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.log-table tbody tr:last-child td {
  border-bottom: 0;
}
.log-table tbody tr:hover td {
  background: var(--surface-2);
}
.num-col {
  text-align: right;
}
.cell-duration {
  font-weight: 700;
}
.cell-employee {
  font-weight: 700;
}
.cell-text {
  max-width: 36ch;
}

.billable-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.billable-chip--yes {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 11%, var(--surface));
}
.billable-chip--no {
  color: var(--muted);
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Empty state — a bare pear, not a blank void.
   -------------------------------------------------------------------------- */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.empty-state__mark {
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.empty-state__title {
  margin: 0 auto 4px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}
.empty-state__hint {
  margin: 0 auto;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-stage {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.login-card__mark {
  display: block;
  margin-bottom: 16px;
}
.login-card__mark .brand__fruit { fill: var(--logo-fruit); }
.login-card__mark .brand__stem { stroke: var(--muted); }
.login-card__mark .brand__leaf { fill: var(--logo-leaf); }
.login-card__title {
  margin: 0 0 4px;
  font-size: 1.375rem;
}
.login-card__lead {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.login-card .btn {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */
.error-stage {
  max-width: 480px;
  margin: 48px auto 0;
  text-align: center;
}
.error-stage__code {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-deep); /* leaf green by day, neon by night */
}
.error-stage__title {
  margin: 0 0 8px;
  font-size: 1.375rem;
}
.error-stage__body {
  margin: 0 auto 24px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Buttons with a leading icon; the destructive variant.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-block {
  display: flex;
}
.btn__icon {
  flex: none;
}
/* Destructive actions (delete, overwrite-and-save). A danger-tinted fill with
   the AA danger text token — prominent, but never white-on-red that would fail
   contrast in one of the two themes. The label always names the action. */
.btn-danger {
  --bs-btn-bg: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --bs-btn-border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  --bs-btn-color: var(--danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 20%, var(--surface));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  --bs-btn-hover-color: var(--danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--danger) 24%, var(--surface));
  --bs-btn-active-border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  --bs-btn-active-color: var(--danger);
}

/* --------------------------------------------------------------------------
   Screen-head lead (form subtitles)
   -------------------------------------------------------------------------- */
.screen-head__lead {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Guards — the missing-project and overlap (overwrite) warnings. Bigger than a
   flash because they carry a decision. Icon + border + text, never color alone.
   Body copy stays in --text for calm legibility; the semantic color rides the
   icon, title and border.
   -------------------------------------------------------------------------- */
.guard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.guard--warn {
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 34%, var(--border));
}
.guard--danger {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}
.guard__icon {
  flex: none;
  margin-top: 1px;
}
.guard--warn .guard__icon,
.guard--warn .guard__title {
  color: var(--warn);
}
.guard--danger .guard__icon,
.guard--danger .guard__title {
  color: var(--danger);
}
.guard__body {
  min-width: 0;
}
.guard__title {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
}
.guard__text {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  white-space: pre-line;
  text-wrap: pretty;
}
.guard__text:last-child {
  margin-bottom: 0;
}
.guard--danger .guard__text--strong {
  color: var(--danger);
  font-weight: 700;
}
.guard__list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guard__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
}
.guard__item-note {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Entry form + delete confirmation cards
   -------------------------------------------------------------------------- */
.form-card,
.confirm-card {
  max-width: 680px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.confirm-card {
  max-width: 560px;
}
.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.form-row .field {
  margin-bottom: 16px;
}
.form-row--pair .field {
  flex: 1 1 240px;
  min-width: 0;
}
.form-row--when {
  align-items: flex-end;
}
.form-row--when .field {
  flex: 0 0 auto;
}
.field--check {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
.field__select {
  appearance: auto;
  cursor: pointer;
}
.field__select--filter {
  min-width: 200px;
  width: auto;
}
.field__input--time {
  width: auto;
  font-variant-numeric: tabular-nums;
}
/* Live duration read-out beside the time inputs: same height as the fields
   so the row stays aligned, but rendered as a value (bold, no inset ground)
   rather than an input — it displays, it does not receive. */
.field__duration {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 2px;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hero-ink);
}
.field__textarea {
  min-height: 0;
  line-height: 1.5;
  resize: vertical;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.form-actions form {
  margin: 0;
}

.confirm-details {
  margin: 20px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.confirm-details__row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.confirm-details__row:last-child {
  border-bottom: 0;
}
.confirm-details__row dt {
  flex: 0 0 128px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.confirm-details__row dd {
  margin: 0;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Table row actions (edit / delete links per row)
   -------------------------------------------------------------------------- */
.actions-col {
  text-align: right;
  white-space: nowrap;
}
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.row-action {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.row-action:hover {
  background: var(--surface-2);
}
.row-action--danger {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   Responsive & motion preferences
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .topbar__inner {
    padding: 8px 16px;
    gap: 12px;
  }
  .mainnav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: 8px;
  }
  /* Enhanced (JS present) narrow nav: the wrapped tab row collapses behind
     the disclosure button. Without .is-enhanced the toggle stays hidden and
     the list keeps wrapping — the nav never needs JS to be reachable. */
  .mainnav.is-enhanced .mainnav__toggle {
    display: inline-flex;
  }
  .mainnav.is-enhanced .mainnav__list {
    display: none;
  }
  .mainnav.is-enhanced.is-open .mainnav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
  }
  .mainnav.is-enhanced.is-open .mainnav__link {
    width: 100%;
  }
  .flash-region,
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .harvest {
    gap: 20px;
  }
  .topbar__user {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active {
    transform: none;
  }
}