/* ==========================================================================
   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 Next = 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 Next";
  src: url("/static/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight: 200 800;
  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 Next";
  src: url("/static/fonts/AtkinsonHyperlegibleNext-Variable-LatinExt.woff2") format("woff2");
  font-weight: 200 800;
  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 Next";
  src: url("/static/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  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 Next";
  src: url("/static/fonts/AtkinsonHyperlegibleNext-Italic-Variable-LatinExt.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  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;
}

/* --------------------------------------------------------------------------
   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 Next", "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;
}

/* Statistics screens ------------------------------------------------------- */
.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.subtabs__link {
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.subtabs__link:hover {
  color: var(--text);
}
.subtabs__link.is-active {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}
.period-nav {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-left: auto;
}
.num--pos {
  color: var(--ok);
}
.num--neg {
  color: var(--danger);
}
.harvest--balance {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.stat-table tfoot .stat-total th,
.stat-table tfoot .stat-total td {
  border-top: 1px solid var(--border-strong);
  font-weight: 600;
  padding-top: 12px;
}
.stat-row--muted td {
  color: var(--muted);
}
.ws-employee-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Per-day work-pattern editor (Phase B): a compact seven-slot grid of minute
   inputs, wrapping on narrow screens. */
.ws-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  margin-block: 0.5rem 0.75rem;
}
@media (max-width: 640px) {
  .ws-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ws-day {
  min-width: 0;
}
.ws-day .field__label {
  text-align: center;
}
.ws-preview {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.ws-readonly-value {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

/* 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
   -------------------------------------------------------------------------- */
.environment-banner {
  color: var(--text);
  background: color-mix(in srgb, var(--warn) 22%, var(--surface));
  border-block: 2px solid var(--warn);
}
.environment-banner__inner {
  max-width: 1100px;
  min-height: 40px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.environment-banner__icon {
  flex: 0 0 auto;
  font-size: 1rem;
}
.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;
}

.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); }

/* --------------------------------------------------------------------------
   Nav disclosures (Verwaltung, account)

   <details>/<summary> is the no-JS baseline; Alpine (deferred) adds
   outside-click + Escape close and mirrors the open state into aria-expanded.
   Panels are surfaces one step above the sticky bar and appear *instantly* —
   no entrance motion by design: this is the accessibility-first, no-surprise-
   motion house direction (ADHD/autism-friendly). The chevron rotation is the
   only movement, and it collapses under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.menu {
  position: relative;
  display: inline-flex;
}
.menu__summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
/* Strip the native disclosure triangle; the chevron SVG is our marker. */
.menu__summary::-webkit-details-marker { display: none; }
.menu__summary { list-style: none; }
.menu__summary::marker { content: ""; }

/* Verwaltung trigger wears the tab treatment so it reads as a peer of the
   primary tabs (mainnav__link supplies padding/type; these add the states a
   <summary> needs since the tab hover rule only targets anchors). */
.menu__summary.mainnav__link:hover,
.menu[open] > .menu__summary.mainnav__link {
  color: var(--text);
  background: var(--surface-2);
}

.menu__chevron {
  flex: none;
  color: var(--muted);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu[open] .menu__chevron { transform: rotate(180deg); }

/* Account trigger = an icon button, same 40px square rhythm as bell/theme. */
.menu__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__trigger-icon:hover,
.menu[open] > .menu__trigger-icon {
  background: var(--surface-2);
  color: var(--text);
}
.menu__trigger-icon.is-active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Closed by default (browser default for details:not([open])); only a flex
   layout once the disclosure is actually open. Without this split, the panel
   renders open on every page load — breaking layout and, for the account
   menu, exposing the email the redesign exists to hide. */
.menu[open] > .menu__panel {
  display: flex;
}

.menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40; /* above the sticky topbar (z-index 30) */
  min-width: 210px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; /* concentric: 12 = inner 8 + 4 padding */
  box-shadow: var(--shadow-card);
}
/* Verwaltung is a primary-nav tab, so its panel grows from the trigger's
   leading edge. The account popout keeps the base rule's right alignment. */
.menu__panel--nav {
  right: auto;
  left: 0;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
a.menu__item:hover,
button.menu__item:hover {
  color: var(--text);
  background: var(--surface-2);
}
.menu__item.is-active {
  color: var(--accent-deep);
  background: var(--accent-soft);
  font-weight: 600;
}
.menu__item--danger:hover {
  color: var(--danger);
}
.menu__divider {
  height: 1px;
  margin: 4px 4px;
  background: var(--border);
}

/* Account panel: the email line + labelled language section. */
.menu__panel--account { min-width: 232px; }
.menu__email {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-all;
}
.menu__email-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu__section {
  padding: 4px 12px 6px;
}
.menu__section-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Language switch stretches to fill the account panel width. */
.menu__section .lang-switch {
  width: 100%;
}
.menu__section .lang-switch__current,
.menu__section .lang-switch__btn {
  flex: 1;
}

/* --------------------------------------------------------------------------
   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);
}
/* Toggletip: an info glyph next to a field label revealing its hint bubble on
   hover, keyboard focus, or touch tap — never hover alone. Screen readers get
   the hint through the input's aria-describedby even while it is closed. */
.field__label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
/* The label's own bottom margin would skew flex centering (the icon would sit
   visually low against the text); the row carries the spacing instead. */
.field__label-row .field__label {
  margin-bottom: 0;
}
.hint-tip {
  position: relative;
  display: inline-flex;
}
.hint-tip__icon {
  display: inline-flex;
  color: var(--muted);
  opacity: 0.9;
  cursor: help;
  border-radius: 50%;
}
.field__hint--tip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: max-content;
  max-width: 36ch;
  margin: 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.hint-tip:hover .field__hint--tip,
.hint-tip:focus-within .field__hint--tip {
  display: block;
}
.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;
}

/* Task filter bar: status as accessible toggle chips, with project + the date
   window demoted into a secondary group that trails status and assignee. Works
   without JS — the chips are real checkboxes inside a GET form. */
.filter-bar--tasks {
  align-items: flex-start;
}
.filter-bar__field--status {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.filter-bar__field--status legend {
  padding: 0;
  margin-bottom: 4px;
}
.filter-bar__field--check {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
}
.filter-bar__group--secondary {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip__label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}
.chip__input:checked + .chip__label {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
}
.chip__input:focus-visible + .chip__label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.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);
}
/* Secondary "excluding today" balance: a smaller, less prominent line beneath
   the hero figure. Sign + text carry the meaning; the pos/neg color (inherited
   from .num--pos/--neg) only reinforces, dialled back by the reduced opacity so
   it stays visually muted next to the main figure. */
.harvest__subfigure {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.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;
}
/* Week / period total: one hierarchy tier above the plain meta values,
   still clearly below today's hero figure. */
.harvest__meta-figure {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
}
/* Today outside the filter range: an explicit note instead of a false 00:00. */
.harvest__figure--na {
  color: var(--muted);
}
.harvest__note {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   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 {
  /* Long descriptions/reasons must not force the actions off-screen: truncate
     with an ellipsis; the full text rides on the cell's title attribute. */
  max-width: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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);
}

/* Task list: the title is the row's identity; statuses are org-defined labels,
   so the chip stays neutral (text carries the meaning, never color alone). */
.cell-title {
  font-weight: 600;
  max-width: 26ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Billability badge — a compact text chip on non-default task labels. */
.bill-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Budget & usage cell — stacked plan, consumption and its sub-lines. */
.budget-cell {
  line-height: 1.4;
}

.budget-cell__plan,
.budget-cell__used,
.budget-cell__sub {
  display: block;
  white-space: nowrap;
}

.budget-cell__plan {
  font-weight: 600;
}

.budget-cell__used {
  font-variant-numeric: tabular-nums;
}

.budget-cell__used--over {
  color: var(--danger, #b3261e);
  font-weight: 600;
}

.budget-cell__sub {
  font-size: 0.8rem;
  color: var(--text-muted, var(--text));
}

/* Informational note on the delete-confirm page. */
.confirm-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, var(--text));
}

/* --------------------------------------------------------------------------
   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;
}
/* SSO alternative below the password form: a labelled divider, then a quiet
   secondary button. Only rendered when OIDC is configured. */
.login-card__alt {
  margin-top: 20px;
}
.login-card__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.login-card__divider::before,
.login-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-card__note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

/* Settings page sections */
.settings-section {
  max-width: 560px;
  margin-top: 8px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.settings-section__title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   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;
}
/* The hide-completed toggle sits just under the task select: a quieter, smaller
   control than a first-class field. */
.field__subcheck {
  margin-top: 4px;
  min-height: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.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;
}
/* Checkbox group (task assignees): a fieldset styled like any other field,
   options on the shared 44px inline-check hit areas. */
.field--group {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.field--group legend {
  padding: 0;
}
.check-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  column-gap: 16px;
}
/* Field-level validation message, wired to its input via aria-describedby. */
.field__error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--danger);
}
.field__hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.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 — icon links leading each row, so edit/delete never hide
   behind a horizontal scroll. Icons alone carry aria-label + title.
   -------------------------------------------------------------------------- */
.actions-col {
  width: 1%; /* shrink-to-fit: the icons define the width */
  white-space: nowrap;
}
.log-table td.actions-col {
  padding-top: 5px;
  padding-bottom: 5px; /* 40px targets without inflating the row height */
}
.row-actions {
  display: flex;
  gap: 4px;
}
.row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--link);
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.row-icon:hover {
  background: var(--surface-2);
}
.row-icon--danger {
  color: var(--danger);
}

/* TickseedTime AT1: dense weekly ledger plus two editable HR catalogs. */
.att-catalog {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}
.att-catalog__head,
.att-ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.att-catalog__head h2,
.att-ledger__head h2,
.att-type-card h3 {
  margin: 0;
}
.att-type-card {
  max-width: 900px;
}
/* Keep the sort-order number field compact rather than stretched half-width. */
.field--sort {
  flex: 0 1 160px;
}
.att-chip--inactive {
  color: var(--muted);
  border-color: var(--border);
}
.att-ledger {
  margin-top: 32px;
}
.att-summary {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.875rem;
}
.att-color-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.att-color-control .field__select {
  flex: 1 1 auto;
}
.att-color-swatch {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--att-swatch);
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* AT3 — week net/flag view + monthly HR sheet. */
.att-week th,
.att-month th {
  text-align: left;
}
.att-week .num-col,
.att-month .num-col {
  text-align: right;
}
.att-day__head {
  white-space: nowrap;
  vertical-align: top;
  padding-top: 12px;
}
.att-day__weekday {
  font-weight: 700;
}
.att-day__date {
  color: var(--muted);
  font-size: 0.85rem;
}
.att-day--weekend .att-day__weekday {
  color: var(--accent-deep);
}
.att-day--empty td,
.att-day--empty th {
  color: var(--muted);
}
.att-day__dash {
  color: var(--muted);
}
.att-intervals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.att-interval {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.att-interval__time {
  font-variant-numeric: tabular-nums;
  min-width: 108px;
}
.att-interval__note {
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  white-space: nowrap;
}
.att-interval__actions {
  margin-left: auto;
}
.att-week td,
.att-week th {
  vertical-align: top;
}
.att-break-ok {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.att-week__totals th,
.att-week__totals td,
.att-month__totals th,
.att-month__totals td {
  border-top: 2px solid var(--border-strong);
  font-weight: 600;
  padding-top: 12px;
}

/* Accessible legal-flag chips — attention (breach) vs info (expected/noted). */
.att-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.att-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border);
  cursor: help;
}
.att-chip--attention {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.att-chip--info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 45%, var(--border));
}
.att-chip--ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
}
.att-chip--muted {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
}
.att-chip--warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
}
.att-chip--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

/* Ampel (overtime traffic-light) admin screens. */
.ampel-thresholds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ampel-mode-note {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}
.ampel-threshold {
  white-space: nowrap;
}
.ampel-threshold__hours {
  display: block;
  font-weight: 700;
}
.ampel-threshold__days {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.harvest__ampel,
.att-month__ampel {
  margin-top: 10px;
}
.btn-small {
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* Import preview — the project-time → attendance conversion table. */
.att-import__type {
  max-width: 420px;
}
.att-import-table .att-import__check {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.att-import__dayhead th {
  padding-top: 16px;
  border-bottom: 1px solid var(--border-strong);
}
.att-import__row--skip td {
  color: var(--muted);
}
.att-import__note {
  color: var(--muted);
  font-size: 0.9rem;
}
.att-import__reminder {
  margin-top: 16px;
  font-weight: 600;
}

/* Separate-listing subtotals (tax_separate types). */
.att-separate {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.att-separate__title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.att-separate__lines {
  display: flex;
  gap: 8px 24px;
  flex-wrap: wrap;
}
.att-separate__line .num {
  font-variant-numeric: tabular-nums;
}

/* Monthly sheet rows. */
.att-month td,
.att-month th {
  white-space: nowrap;
}
.att-mrow__times {
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.att-mrow__kw {
  color: var(--muted);
}
.att-mrow--weekend td,
.att-mrow--weekend th {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.att-mrow--empty td,
.att-mrow--empty th {
  color: var(--muted);
}
.att-mrow--absence .att-mrow__remarks {
  font-weight: 600;
}
.att-print-title {
  display: none;
}

/* Printable HR document: black-on-white, chrome hidden, fits A4 portrait. */
@media print {
  .topbar,
  .mainnav,
  .att-print-hide,
  .flash {
    display: none !important;
  }
  .att-print-title {
    display: block;
    margin: 0 0 12px;
    font-size: 1.1rem;
  }
  .att-month-scroll {
    overflow: visible !important;
  }
  .att-month {
    width: 100%;
    font-size: 10.5px;
    color: #000;
  }
  .att-month td,
  .att-month th {
    border-bottom: 1px solid #999;
    color: #000;
    padding: 3px 6px;
  }
  .att-mrow--weekend td,
  .att-mrow--weekend th {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .num--pos,
  .num--neg {
    color: #000;
  }
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}

/* --------------------------------------------------------------------------
   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%;
  }
  /* The Verwaltung links expand inside the collapsed navigation instead of
     floating over or being clipped by it. */
  .mainnav.is-enhanced.is-open .menu--nav {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .mainnav.is-enhanced.is-open .menu__panel--nav {
    position: static;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-top: 2px;
    box-shadow: none;
  }
  .flash-region,
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .harvest {
    gap: 20px;
  }
  /* Keep the tools cluster on one line even when brand + nav wrap; the account
     panel is right-anchored and clamped to the viewport, so it never spills. */
  .topbar__tools {
    flex-wrap: nowrap;
  }
}

@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;
  }
}

/* --------------------------------------------------------------------------
   AT4 — notification bell, leave requests, approvals, notifications inbox
   -------------------------------------------------------------------------- */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 38px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.notif-bell:hover,
.notif-bell.is-active {
  color: var(--text);
  background: var(--surface-2);
}
.notif-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.leave-section {
  margin-bottom: 36px;
}
.leave-section__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
}
.leave-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.leave-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.leave-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.leave-card__type {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
}
.leave-card__block {
  margin: 0 0 12px;
}
.leave-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 20px;
  margin: 0;
}
.leave-card__meta-item dt {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-ui);
}
.leave-card__meta-item dd {
  margin: 2px 0 0;
  font-size: 0.9375rem;
}
.leave-card__actions,
.leave-decide__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.leave-decide {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.leave-account {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.leave-account__label {
  font-size: 0.8125rem;
  color: var(--muted);
}
.leave-account__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.leave-storno {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.leave-storno .field__input {
  max-width: 220px;
}

/* Notifications inbox — a click-through list; unread carries a dot + weight. */
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.notif-item--unread {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.notif-item__open {
  margin: 0;
}
.notif-item__button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9375rem;
}
.notif-item__button:hover {
  background: var(--surface-2);
  border-radius: 10px;
}
.notif-item__dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
}
.notif-item--unread .notif-item__message {
  font-weight: 600;
}
.notif-item__message {
  flex: 1 1 auto;
}
.notif-item__date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Organisation (N2) — role governance landing + admin-area link cards
   -------------------------------------------------------------------------- */
.org-section {
  margin-top: 40px;
}
.org-section:first-of-type {
  margin-top: 8px;
}
.org-section__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
}
.org-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
  max-width: 680px;
}
.org-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 140ms ease, background-color 140ms ease;
}
.org-link:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent-deep) 40%, var(--border));
}
.org-link:active {
  transform: scale(0.99);
}
.org-link__icon {
  flex: 0 0 auto;
  color: var(--accent-deep);
}
.org-link__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.org-link__title {
  font-weight: 600;
}
.org-link__desc {
  font-size: 0.8125rem;
  color: var(--muted);
}
.org-link__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
}
/* Read-only role display: HR-only roles view + own-profile chips. */
.role-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-list__name {
  min-width: 180px;
}
.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}
.role-list .att-chip,
.role-chips .att-chip {
  cursor: default;
}

/* Generic filter form (audit log, flag review): fields wrap on one baseline
   and the submit/reset trail them, so it collapses cleanly on narrow screens. */
.filters {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}
.filters .field {
  margin: 0;
}
.filters .field__label {
  margin-bottom: 4px;
}

/* AL2 audit-log viewer. The changes column carries the most weight, so it is
   the widest; the diff lines and JSON expander stay legible in both themes. */
.audit-table .audit-when {
  white-space: nowrap;
}
.audit-id {
  font-size: 0.8125rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.audit-subject {
  white-space: nowrap;
}
.audit-diff {
  min-width: 22rem;
}
/* AL2.1: the compact 3-column mini-table (Feld | Alt | Neu). The per-action
   heading above it SAYS whether it lists new values, changed fields or last
   values, so the reader never has to guess. */
.audit-diff__heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 4px;
}
.audit-diff__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.audit-diff__table thead th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 8px 2px 0;
  border-bottom: 1px solid var(--border);
}
.audit-diff__table td,
.audit-diff__table th {
  padding: 2px 8px 2px 0;
  vertical-align: top;
}
.audit-diff__field {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.audit-diff__old {
  color: var(--muted);
}
.audit-diff__new {
  color: var(--accent-deep);
  font-weight: 500;
}
.audit-diff__more,
.audit-diff__empty {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 4px 0 0;
}
.audit-details {
  margin-top: 6px;
}
.audit-details > summary {
  font-size: 0.8125rem;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 4px 0;
}
.audit-details__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin: 8px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.audit-json {
  font-size: 0.75rem;
  line-height: 1.5;
  max-height: 18rem;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: pre;
}
.audit-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.audit-pager__status {
  font-size: 0.8125rem;
  color: var(--muted);
}
.audit-pager__links {
  display: flex;
  gap: 8px;
}