/* ============================================================
   KOMO — UI Redesign (UI-Politur)
   Land Steiermark · Administration system
   ------------------------------------------------------------
   Design tokens + component styles, recreated from the
   Claude Design handoff "KOMO UI Redesign.dc.html".

   Plain HTML5 + CSS custom properties — no framework, no build.
   Classes are prefixed `komo-` to avoid clashing with the
   APEX Universal Theme (.t- / .a-) when dropped into an app.

   RULE: green (--komo-interactive) is used *only* for
   interactive elements. Status colours are for small icons.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Text */
  --komo-text: #1c2528;
  --komo-text-secondary: #5c6a6e;
  --komo-text-muted: #8b9599;
  --komo-text-body: #3a4548;          /* nav items, table body cells */

  /* Interactive (green = interactive only) */
  --komo-interactive: #0e6b6d;
  --komo-interactive-hover: #0a5052;
  --komo-interactive-soft: #e6f0f0;   /* active nav bg, ghost hover */
  --komo-interactive-badge: #e2eeee;  /* view/section badges */
  --komo-interactive-border: #bcd4d4; /* outline-button border */
  --komo-interactive-chevron: #5aa1a2;/* chevron on active nav item */
  --komo-on-interactive: #ffffff;     /* text/icon on a solid --komo-interactive fill */

  /* Surfaces & borders */
  --komo-surface: #ffffff;
  --komo-bg: #f3f6f6;                 /* main content background */
  --komo-bg-subtle: #f7fafa;          /* row hover, search prefix */
  --komo-bg-subtle-hover: #eef3f3;    /* hover state one step past --komo-bg-subtle */
  --komo-border: #dde3e3;
  --komo-border-subtle: #eef2f2;      /* inner dividers */
  --komo-border-strong: #d5dcdc;
  --komo-control-border: #c3cccc;     /* unchecked radio/checkbox border */
  --komo-grid-line: #e6ecec;          /* stat-grid gutters */
  --komo-chip-bg: #eaefef;            /* code chip */
  --komo-selection-bg: #cfe6e6;       /* ::selection highlight */
  --komo-review-canvas: #e9edee;      /* index.html / tokens.html outer canvas — review harness only, not the live app bg */
  --komo-icon-subtle: #b3bcbc;        /* decorative chevrons, separators, disabled icons */
  --komo-icon-faint: #a3adad;         /* help icon, empty-state icon */
  --komo-btn-secondary-bg: #eef1f1;
  --komo-btn-secondary-bg-hover: #e4e9e9;

  /* Status (small icons only, never body text) */
  --komo-warning: #c9820a;
  --komo-warning-soft: #fcf5e8;
  --komo-warning-border: #f0ddb0;
  --komo-warning-text: #7a5a12;
  --komo-success: #3f8f5f;
  --komo-danger: #c0503c;
  --komo-danger-soft: rgba(192, 80, 60, .07);   /* same RGB as --komo-danger */
  --komo-danger-soft-hover: rgba(192, 80, 60, .12);

  /* Typography */
  --komo-font: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --komo-fs-h1: 30px;
  --komo-fs-h2: 20px;
  --komo-fs-card-title: 17px;
  --komo-fs-body: 16px;
  --komo-fs-nav: 15px;
  --komo-fs-meta: 14px;
  --komo-fs-label: 13px;
  --komo-fw-regular: 400;
  --komo-fw-medium: 500;
  --komo-fw-semibold: 600;
  --komo-fw-bold: 700;

  /* Spacing — 8-pt raster */
  --komo-space-1: 4px;
  --komo-space-2: 8px;
  --komo-space-3: 12px;
  --komo-space-4: 16px;
  --komo-space-6: 24px;
  --komo-space-8: 32px;
  --komo-space-12: 48px;

  /* Radius */
  --komo-radius-sm: 6px;
  --komo-radius: 8px;
  --komo-radius-lg: 12px;
  --komo-radius-pill: 999px;

  /* Layout */
  --komo-content-max: 1000px;
  --komo-sidebar-w: 288px;
  --komo-header-h: 64px;

  /* Elevation & focus */
  --komo-shadow-card: 0 4px 14px rgba(20, 40, 45, .06);
  --komo-focus-ring: 0 0 0 3px rgba(14, 107, 109, .12);   /* subtle field/open glow (mouse) */

  /* Keyboard focus indicator — GOV.UK-inspired. A dedicated colour, NOT the
     brand teal: the yellow pops on dark surfaces (teal buttons), the dark
     keyline pops on light surfaces, so the same ring is visible on ANY
     background (WCAG 2.4.7 + 1.4.11). Applied identically to every
     interactive element via the global :focus-visible rule below. */
  --komo-focus: #ffdd00;
  --komo-focus-ink: #0b0c0c;
  --komo-focus-shadow: 0 0 0 3px var(--komo-focus), 0 0 0 5px var(--komo-focus-ink);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Smooth in-page navigation (e.g. the Gruppe tab → section jumps) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.komo-app {
  margin: 0;
  min-height: 100vh;
  font-family: var(--komo-font);
  font-size: var(--komo-fs-body);
  color: var(--komo-text);
  background: var(--komo-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.komo-app ::selection { background: var(--komo-selection-bg); }

/* ============================================================
   Consistent keyboard focus (GOV.UK-inspired)
   One indicator for EVERY interactive element. The transparent outline
   surfaces the focus in Windows High Contrast / forced-colors mode; the
   double box-shadow (yellow inner, dark outer) is visible on any background.
   Enforced with !important by design — a focus indicator must never be
   dropped or overridden by a component. Only :focus-visible, so mouse users
   don't get the loud ring; the subtle teal field glow (:focus) still applies.
   ============================================================ */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid transparent !important;
  outline-offset: 0;
  box-shadow: var(--komo-focus-shadow) !important;
}
/* Buttons, checkboxes and the select trigger only match :focus-visible via the
   keyboard, so they're already keyboard-only. Text fields, however, match
   :focus-visible on a MOUSE click too — so the loud ring would show on click.
   A modality flag on <html> (set in js/komo.js) restricts it: a pointer focus
   on a text field keeps the calm teal field glow, matching the dropdown. */
html[data-focus="pointer"] .komo-input:focus {
  outline: none !important;
  box-shadow: var(--komo-focus-ring) !important;
}
html[data-focus="pointer"] .komo-input.is-error:focus {
  border-color: var(--komo-danger) !important;
  box-shadow: 0 0 0 3px var(--komo-danger-soft-hover) !important;
}

/* Shared icon sizing helper */
.komo-app svg { display: block; flex: none; }

/* ============================================================
   Header
   ============================================================ */
.komo-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--komo-header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--komo-space-4);
  border-bottom: 1px solid var(--komo-border);
  background: var(--komo-surface);
}

/* Logo (Das Land Steiermark) */
.komo-logo { display: flex; align-items: center; text-decoration: none; }
.komo-logo img { height: 40px; width: auto; display: block; }

/* Back link — "zurück zur Übersicht" header on standalone document pages
   (tokens, architecture analysis) that link back to the review index. */
.komo-backlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--komo-interactive);
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
}
.komo-backlink:hover { text-decoration: underline; }
.komo-iconbtn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--komo-radius);
  color: var(--komo-text-secondary);
  cursor: pointer;
}
.komo-iconbtn:hover { background: var(--komo-bg); color: var(--komo-interactive); }

.komo-divider-v { width: 1px; height: 30px; background: var(--komo-border); }

.komo-appname { font-size: var(--komo-fs-body); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-appname span { color: var(--komo-text-muted); font-weight: var(--komo-fw-regular); }

.komo-spacer { flex: 1; }

.komo-userbtn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 12px;
  border-radius: var(--komo-radius);
  cursor: pointer;
  color: var(--komo-text);
  font-family: inherit;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
}
.komo-userbtn:hover { background: var(--komo-bg); }

/* ============================================================
   Shell: sidebar + main
   ============================================================ */
.komo-shell { display: flex; align-items: flex-start; }

.komo-sidebar {
  position: sticky;
  top: var(--komo-header-h);
  z-index: 10;
  align-self: flex-start;
  height: calc(100vh - var(--komo-header-h));
  overflow-y: auto;
  overflow-x: hidden;
  width: var(--komo-sidebar-w);
  flex: 0 0 var(--komo-sidebar-w);
  border-right: 1px solid var(--komo-border);
  background: var(--komo-surface);
  padding: var(--komo-space-4) var(--komo-space-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: flex-basis .22s ease, width .22s ease, opacity .18s ease,
    padding .22s ease, border-color .22s ease, transform .22s ease;
}

/* Separates the primary nav group from secondary/admin items lower in the
   sidebar (e.g. Inaktive Einrichtungen, Kategorien, Administration). */
.komo-sidebar__divider { height: 1px; background: var(--komo-border-subtle); margin: 8px 13px; flex: none; }

/* Offcanvas: collapsed on desktop — the hamburger toggle hides the sidebar
   entirely and the main content reflows to use the reclaimed width. */
@media (min-width: 901px) {
  .komo-sidebar.is-closed {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

/* Dimmed backdrop shown behind the sidebar when it's opened as an overlay
   (mobile). Hidden by default; toggled via JS. */
.komo-sidebar-backdrop {
  position: fixed;
  inset: var(--komo-header-h) 0 0 0;
  background: rgba(20, 40, 45, .32);
  z-index: 35;
}
.komo-sidebar-backdrop[hidden] { display: none; }
.komo-navitem {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--komo-space-3) var(--komo-space-4);
  border-radius: var(--komo-radius);
  text-decoration: none;
  color: var(--komo-text-body);
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
}
.komo-navitem span { flex: 1; }
.komo-navitem svg:first-child { flex: none; }
.komo-navitem__chevron { flex: none; color: var(--komo-icon-subtle); }
.komo-navitem:hover { background: var(--komo-bg); }
.komo-navitem.is-active {
  color: var(--komo-interactive);
  font-weight: var(--komo-fw-semibold);
  background: var(--komo-interactive-soft);
}
.komo-navitem.is-active .komo-navitem__chevron { color: var(--komo-interactive-chevron); }

/* --- Collapsible nav group (parent + submenu) --- */
.komo-navgroup { display: flex; flex-direction: column; gap: 2px; }

/* The group's parent is a <button> so it can toggle without navigating —
   reset the native button chrome so it renders identically to a nav link. */
.komo-navitem--toggle {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.komo-navitem--toggle .komo-navitem__chevron { transition: transform .2s ease; }
.komo-navgroup.is-open > .komo-navitem--toggle { background: var(--komo-bg); }
.komo-navgroup.is-open > .komo-navitem--toggle .komo-navitem__chevron {
  transform: rotate(90deg);
}
.komo-navitem--toggle:focus-visible {
  outline: 2px solid var(--komo-interactive);
  outline-offset: 2px;
}

/* Collapsed group holding the active page: the active child is hidden, so
   surface the active state on the parent (mirrors .komo-navitem.is-active)
   to keep the current section discoverable. Only while collapsed — when
   open, the child itself carries the active state. */
.komo-navgroup:not(.is-open):has(.komo-subnavitem.is-active) > .komo-navitem--toggle {
  color: var(--komo-interactive);
  font-weight: var(--komo-fw-semibold);
  background: var(--komo-interactive-soft);
}
.komo-navgroup:not(.is-open):has(.komo-subnavitem.is-active) > .komo-navitem--toggle .komo-navitem__chevron {
  color: var(--komo-interactive-chevron);
}

/* Submenu: animated open/close via grid-rows (0fr -> 1fr). The inner
   wrapper clips its own content while the row height animates. */
.komo-subnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.komo-navgroup.is-open > .komo-subnav { grid-template-rows: 1fr; }
.komo-subnav__inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.komo-subnavitem {
  display: flex;
  align-items: center;
  gap: 11px;
  /* indent so labels align under the parent's label, past its icon */
  padding: 9px 13px 9px 47px;
  border-radius: var(--komo-radius);
  text-decoration: none;
  color: var(--komo-text-body);
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
}
.komo-subnavitem:hover { background: var(--komo-bg); }
.komo-subnavitem:focus-visible {
  outline: 2px solid var(--komo-interactive);
  outline-offset: 2px;
}
.komo-subnavitem.is-active {
  color: var(--komo-interactive);
  font-weight: var(--komo-fw-semibold);
  background: var(--komo-interactive-soft);
}

.komo-main {
  flex: 1;
  min-width: 0;
  background: var(--komo-bg);
  padding: var(--komo-space-8) 40px 44px;
}
.komo-content {
  max-width: var(--komo-content-max);
  margin: 0 auto;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.komo-h1 {
  margin: 0 0 var(--komo-space-2);
  font-size: var(--komo-fs-h1);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text);
  letter-spacing: -.01em;
}
.komo-h2 {
  margin: 0 0 22px;
  font-size: var(--komo-fs-h2);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text);
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.komo-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--komo-fs-meta);
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.komo-breadcrumb a {
  color: var(--komo-interactive);
  text-decoration: none;
  font-weight: var(--komo-fw-medium);
}
.komo-breadcrumb a:hover { text-decoration: underline; }
.komo-breadcrumb .komo-breadcrumb__sep { color: var(--komo-icon-subtle); }
.komo-breadcrumb .komo-breadcrumb__current { color: var(--komo-text-secondary); }

/* ============================================================
   Buttons & links
   ============================================================ */
.komo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
  padding: 11px 18px;
  border-radius: var(--komo-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;   /* so <a class="komo-btn"> isn't underlined */
}
.komo-btn[hidden] { display: none; }   /* class display:inline-flex would beat the [hidden] UA rule */
.komo-btn--primary { background: var(--komo-interactive); color: var(--komo-on-interactive); }
.komo-btn--primary:hover { background: var(--komo-interactive-hover); }

.komo-btn--secondary {
  background: var(--komo-btn-secondary-bg);
  color: var(--komo-text-body);
  border-color: var(--komo-border);
}
.komo-btn--secondary:hover { background: var(--komo-btn-secondary-bg-hover); }

.komo-btn--outline {
  background: var(--komo-surface);
  color: var(--komo-interactive);
  border-color: var(--komo-interactive-border);
}
.komo-btn--outline:hover { background: var(--komo-interactive-soft); }

/* Compact fixed-height variant used in table toolbars */
.komo-btn--h40 { height: 40px; padding: 0 20px; }
.komo-btn--h40.komo-btn--secondary,
.komo-btn--h40.komo-btn--outline { padding: 0 16px; }

/* Text link with trailing arrow */
.komo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--komo-interactive);
  text-decoration: none;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
  white-space: nowrap;
}
.komo-link:hover { text-decoration: underline; }

/* Outline "action" link (e.g. Stammdaten bearbeiten, Förderdaten ändern) */
.komo-actionlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--komo-interactive);
  text-decoration: none;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
  padding: 8px 14px;
  border: 1px solid var(--komo-interactive-border);
  border-radius: var(--komo-radius);
  background: var(--komo-surface);
  white-space: nowrap;
}
.komo-actionlink:hover { background: var(--komo-interactive-soft); }

/* ============================================================
   Form action bar — Abbrechen + Speichern pinned to the page
   bottom, right-aligned. Sticky so the actions stay reachable
   on long forms (APEX: page-level button region).
   ============================================================ */
.komo-formactions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--komo-space-3);
  margin-top: var(--komo-space-8);
  /* full-bleed within the content column so the bar reads as a
     page footer rather than a floating cluster */
  padding: var(--komo-space-4) 0;
  background: var(--komo-bg);
  border-top: 1px solid var(--komo-border);
}
/* soft lift so content scrolling underneath stays legible */
.komo-formactions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(to top, rgba(20, 40, 45, .05), transparent);
  pointer-events: none;
}
.komo-formactions .komo-btn { padding: 11px 24px; }

/* ============================================================
   Page title cluster (dashboard)
   ============================================================ */
.komo-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.komo-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.komo-subline__place { font-size: var(--komo-fs-nav); color: var(--komo-text-secondary); }
.komo-code-chip {
  font-family: var(--komo-font);
  font-size: var(--komo-fs-label);
  color: var(--komo-text-secondary);
  background: var(--komo-chip-bg);
  border: 1px solid var(--komo-border);
  padding: 2px 9px;
  border-radius: 5px;
  letter-spacing: .02em;
}

/* Meta row (address / mail / phone / edit) */
.komo-meta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--komo-border);
}
.komo-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--komo-fs-nav);
  color: var(--komo-text-body);
}
.komo-meta svg { color: var(--komo-text-muted); }
.komo-meta a { color: var(--komo-interactive); text-decoration: none; }
.komo-meta a:hover { text-decoration: underline; }

/* ============================================================
   Segmented control (Periode)
   ============================================================ */
.komo-period {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--komo-space-6);
}
.komo-period__label { font-size: var(--komo-fs-meta); font-weight: var(--komo-fw-semibold); color: var(--komo-text-secondary); }
.komo-segmented {
  display: inline-flex;
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius);
  overflow: hidden;
  background: var(--komo-surface);
}
.komo-segmented button {
  border: none;
  background: transparent;
  color: var(--komo-text-body);
  font-family: inherit;
  font-size: var(--komo-fs-meta);
  font-weight: var(--komo-fw-medium);
  padding: 8px 16px;
  cursor: pointer;
  border-right: 1px solid var(--komo-border);
}
.komo-segmented button:last-child { border-right: none; }
.komo-segmented button:hover { background: var(--komo-bg); }
.komo-segmented button.is-active {
  background: var(--komo-interactive);
  color: var(--komo-on-interactive);
  font-weight: var(--komo-fw-semibold);
  border-right-color: var(--komo-interactive-hover);
}

/* ============================================================
   Banners
   ============================================================ */
.komo-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-radius: var(--komo-radius-lg);
  padding: 16px 18px;
  margin-bottom: var(--komo-space-6);
}
/* Text keeps a readable minimum; when it can't sit next to the action, the
   action wraps onto its own line (works at every width — no magic breakpoint).
   The icon stays beside the first line of text. */
.komo-banner p { flex: 1 1 20rem; margin: 0; font-size: var(--komo-fs-nav); line-height: 1.5; }
.komo-banner > .komo-actionlink,
.komo-banner > .komo-btn { margin-left: 36px; }
/* a class-level display:flex would otherwise beat the [hidden] UA rule */
.komo-banner[hidden] { display: none; }
.komo-banner--warning { background: var(--komo-warning-soft); border: 1px solid var(--komo-warning-border); }
.komo-banner--warning svg { color: var(--komo-warning); flex: 0 0 22px; }
.komo-banner--warning p { color: var(--komo-warning-text); }

/* Calmer sibling of --warning: a time-sensitive reminder (e.g. an upcoming
   deadline) is not the same thing as "something is wrong" — using the
   orange warning styling for a plain FYI would cry wolf. Same shape,
   interactive/teal toned instead of orange. */
.komo-banner--info { background: var(--komo-interactive-soft); border: 1px solid var(--komo-interactive-border); }
.komo-banner--info svg { color: var(--komo-interactive); flex: 0 0 22px; }
.komo-banner--info p { color: var(--komo-text); }

/* Two-line variant (title + description) — same banner, used wherever a
   warning needs a heading, e.g. validation notices on a form. Reuse this
   instead of a floating/transient toast: it's persistent, in-context, and
   keeps a single "needs attention" visual language across the app. */
.komo-banner__body { flex: 1 1 20rem; }
.komo-banner__title { margin: 0 0 4px; font-size: 16px; font-weight: var(--komo-fw-semibold); }
.komo-banner--warning .komo-banner__title { color: var(--komo-warning-text); }
.komo-banner--info .komo-banner__title { color: var(--komo-interactive); }
.komo-banner__body p { margin: 0; }

/* ============================================================
   Card / section
   ============================================================ */
.komo-card {
  background: var(--komo-surface);
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius-lg);
  margin-bottom: var(--komo-space-6);
}
.komo-card--pad { padding: 28px 32px; }
.komo-card--clip { overflow: hidden; }
/* Heading inside a clip card (tables/lists) — keeps the h2 in the box, aligned
   with the toolbar/table content below. Optional action button sits right.
   Distinct from .komo-card__head (padded-card title/desc header). */
.komo-cliphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--komo-border);
}
.komo-cliphead .komo-h2 { margin: 0; }

.komo-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--komo-space-6);
}
.komo-card__title { margin: 0 0 4px; font-size: var(--komo-fs-h2); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-card__desc { margin: 0; font-size: var(--komo-fs-meta); color: var(--komo-text-secondary); }

/* ============================================================
   Stat grid (Anträge)
   ============================================================ */
.komo-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--komo-grid-line);
  border: 1px solid var(--komo-grid-line);
  border-radius: var(--komo-radius-lg);
  overflow: hidden;
}
.komo-stat {
  background: var(--komo-surface);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.komo-stat__value { display: flex; align-items: center; gap: 9px; }
.komo-stat__value b { font-size: 34px; font-weight: var(--komo-fw-semibold); color: var(--komo-text); line-height: 1; }
.komo-stat__label { font-size: var(--komo-fs-meta); font-weight: var(--komo-fw-semibold); color: var(--komo-text-secondary); }

/* Status icon colours inside stats / tables */
.komo-ic-warning { color: var(--komo-warning); }
.komo-ic-success { color: var(--komo-success); }
.komo-ic-danger { color: var(--komo-danger); }
.komo-ic-muted { color: var(--komo-text-muted); }

/* ============================================================
   Tile grid (Personal / Gruppen / Kinder verwalten)
   ============================================================ */
.komo-tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.komo-tile {
  text-decoration: none;
  background: var(--komo-surface);
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius-lg);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.komo-tile:hover { border-color: var(--komo-interactive-border); box-shadow: var(--komo-shadow-card); }
.komo-tile__num { font-size: 36px; font-weight: var(--komo-fw-semibold); color: var(--komo-text); line-height: 1; }
.komo-tile__title { font-size: var(--komo-fs-card-title); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-tile__desc { font-size: var(--komo-fs-meta); color: var(--komo-text-secondary); line-height: 1.5; flex: 1; }
.komo-tile__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--komo-interactive);
  font-size: var(--komo-fs-meta);
  font-weight: var(--komo-fw-semibold);
  margin-top: 4px;
}

/* ============================================================
   Icon badge — circular, teal. Reused by the hero tiles, news
   cards and quicklinks on Startseite.
   ============================================================ */
.komo-icon-badge {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--komo-interactive);
  color: var(--komo-on-interactive);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Softer variant — recedes behind the content instead of competing with it.
   Used where the badge is a secondary cue (e.g. a news item), not the primary
   affordance (a hero tile actually navigating somewhere). */
.komo-icon-badge--soft {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--komo-interactive-soft);
  color: var(--komo-interactive);
}

/* ============================================================
   Hero tile grid (Startseite · quick access to top-level areas)
   ============================================================ */
.komo-herogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.komo-hero-tile {
  /* min-width: 0 overrides the grid item's default min-width:auto — without
     it, a column with longer content (e.g. "Förderungen und Meldungen") can
     force its track wider than the others despite the equal 1fr split. */
  min-width: 0;
  text-decoration: none;
  background: var(--komo-surface);
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.komo-hero-tile:hover { border-color: var(--komo-interactive-border); box-shadow: var(--komo-shadow-card); }
.komo-hero-tile__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.komo-hero-tile__title { font-size: var(--komo-fs-card-title); font-weight: var(--komo-fw-semibold); color: var(--komo-text); min-width: 0; }
.komo-hero-tile__desc { font-size: var(--komo-fs-meta); color: var(--komo-text-secondary); line-height: 1.5; }

/* ============================================================
   Panel head — icon + heading, sitting above a list-in-a-card
   (KOMO News, Kurzzugriffe). Keeps both card headers consistent.
   ============================================================ */
.komo-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.komo-panel-head .komo-h2 { margin: 0; }

/* ============================================================
   News feed (Startseite · KOMO News) — one card, editorial list
   of rows separated by dividers, not boxed sub-cards.
   ============================================================ */
.komo-newsfeed { display: flex; flex-direction: column; }
.komo-newsfeed__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--komo-border-subtle);
  text-decoration: none;
}
.komo-newsfeed__item:first-child { padding-top: 0; border-top: none; }
.komo-newsfeed__body { flex: 1; min-width: 0; }
.komo-newsfeed__title { margin: 0; font-size: var(--komo-fs-card-title); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-newsfeed__meta { font-size: var(--komo-fs-label); color: var(--komo-text-secondary); margin-top: 2px; }
.komo-newsfeed__desc { margin: 8px 0 0; font-size: var(--komo-fs-meta); color: var(--komo-text-body); line-height: 1.5; }
.komo-newsfeed__chevron { flex: none; color: var(--komo-icon-subtle); }
.komo-newsfeed__item:hover .komo-newsfeed__title { color: var(--komo-interactive); }

/* ============================================================
   Action rows (Startseite · Kurzzugriffe) — one card, clickable
   shortcuts as list items instead of separately boxed cards.
   ============================================================ */
.komo-actionrows { display: flex; flex-direction: column; }
.komo-actionrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--komo-border-subtle);
  text-decoration: none;
}
.komo-actionrow:first-child { padding-top: 0; border-top: none; }
.komo-actionrow__body { flex: 1; min-width: 0; }
.komo-actionrow__title { display: block; font-size: var(--komo-fs-nav); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-actionrow__desc { display: block; font-size: var(--komo-fs-label); color: var(--komo-text-secondary); margin-top: 2px; }
.komo-actionrow__chevron { flex: none; color: var(--komo-icon-subtle); }
.komo-actionrow:hover .komo-actionrow__title { color: var(--komo-interactive); }

/* ============================================================
   Recent items (Startseite · Zuletzt bearbeitet)
   ============================================================ */
.komo-recentgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.komo-recent-item {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  background: var(--komo-surface);
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius-lg);
  padding: 16px 18px;
}
.komo-recent-item:hover { border-color: var(--komo-interactive-border); box-shadow: var(--komo-shadow-card); }
.komo-recent-item__body { min-width: 0; }
.komo-recent-item__title {
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.komo-recent-item__action { font-size: var(--komo-fs-label); color: var(--komo-text-secondary); margin-top: 2px; }
.komo-recent-item__time { font-size: var(--komo-fs-label); color: var(--komo-text-muted); margin-top: 8px; }

/* ============================================================
   Tabs (Stammdaten)
   ============================================================ */
.komo-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--komo-border);
  margin-bottom: 28px;
  overflow-x: auto;
}
.komo-tab {
  padding: 13px 4px;
  margin: 0 14px;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
  color: var(--komo-text-secondary);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.komo-tab:first-child { margin-left: 2px; }
.komo-tab:hover { color: var(--komo-interactive); }
.komo-tab.is-active { color: var(--komo-interactive); font-weight: var(--komo-fw-semibold); border-bottom-color: var(--komo-interactive); }

/* ============================================================
   Forms
   ============================================================ */
.komo-fieldstack { display: flex; flex-direction: column; gap: 20px; }
.komo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.komo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.komo-grid-addr { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 20px; }
.komo-half { max-width: calc(50% - 10px); }

.komo-label {
  display: block;
  font-size: var(--komo-fs-label);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text-secondary);
  margin-bottom: 7px;
}
.komo-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--komo-fs-body);
  color: var(--komo-text);
  padding: 11px 14px;
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius);
  background: var(--komo-surface);
}
.komo-input::placeholder { color: var(--komo-text-muted); }
.komo-input:focus {
  outline: none;
  border-color: var(--komo-interactive);
  box-shadow: var(--komo-focus-ring);
}

/* ---------- Select / dropdown menu ----------
   A custom select: the trigger reuses the .komo-input look so it lines up
   with sibling form fields, while the popover menu + options follow the
   sidebar nav's visual language (hover bg, interactive-soft active state).
   Anchored to the trigger via Floating UI (see js/komo.js). */
.komo-select { position: relative; }

.komo-select__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.komo-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.komo-select__chevron {
  flex: none;
  color: var(--komo-text-muted);
  transition: transform .2s ease;
}
.komo-select.is-open .komo-select__chevron { transform: rotate(180deg); }
.komo-select.is-open .komo-select__trigger {
  border-color: var(--komo-interactive);
  box-shadow: var(--komo-focus-ring);
}

.komo-select__menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  min-width: 100%;
  padding: 6px;
  background: var(--komo-surface);
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius);
  box-shadow: var(--komo-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.komo-select__menu[hidden] { display: none; }

.komo-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
  color: var(--komo-text-body);
  padding: 10px 12px;
  border-radius: var(--komo-radius-sm);
}
.komo-select__option:hover { background: var(--komo-bg); }
/* Plain :focus, not :focus-visible — options are focused programmatically
   (arrow-key navigation calls .focus() directly, see js/komo.js), which
   doesn't reliably satisfy the :focus-visible heuristic in every browser.
   When it doesn't match, the browser falls back to its own native outline
   (OS accent colour — not a token, and not our teal). Matches how the
   trigger's own "focused" look is driven by .is-open, not a focus
   pseudo-class, for the same reason: don't rely on browser heuristics for
   a state we're already managing explicitly. */
.komo-select__option:focus {
  outline: 3px solid transparent;   /* forced-colors mode */
  background: var(--komo-focus);
  color: var(--komo-focus-ink);
  box-shadow: inset 0 0 0 2px var(--komo-focus-ink);
}
.komo-select__option:focus .komo-select__check { color: var(--komo-focus-ink); }
.komo-select__option.is-selected {
  color: var(--komo-interactive);
  font-weight: var(--komo-fw-semibold);
  background: var(--komo-interactive-soft);
}
.komo-select__check {
  flex: none;
  margin-left: auto;
  color: var(--komo-interactive-chevron);
  opacity: 0;
}
.komo-select__option.is-selected .komo-select__check { opacity: 1; }

/* Radio / checkbox choices — native inputs tinted with the brand
   colour (accessibility cleanup over the mock's decorative spans). */
.komo-choicerow { display: flex; gap: 24px; }
.komo-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: var(--komo-fs-nav);
  color: var(--komo-text-body);
}
/* Fully custom-rendered, not accent-color: native radio widgets don't
   guarantee the same box size for the checked vs. unchecked state across
   browsers (checked dots can render visibly larger/bolder) — appearance:none
   plus a hand-drawn dot keeps both states pixel-identical everywhere. */
.komo-choice input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 2px solid var(--komo-control-border);
  background: var(--komo-surface);
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease;
}
.komo-choice input:checked { border-color: var(--komo-interactive); }
.komo-choice input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--komo-interactive);
  transform: translate(-50%, -50%);
}
.komo-choice input:focus-visible { outline: 2px solid var(--komo-interactive); outline-offset: 2px; }
.komo-choice:has(input:checked) { color: var(--komo-text); font-weight: var(--komo-fw-medium); }

.komo-checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.komo-checkcol { display: flex; flex-direction: column; gap: 14px; }
.komo-check {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: var(--komo-fs-nav);
  color: var(--komo-text);
}
/* Same reasoning as .komo-choice above: custom-rendered so the checked and
   unchecked box are pixel-identical in size across browsers. */
.komo-check input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 5px;
  border: 2px solid var(--komo-control-border);
  background: var(--komo-surface);
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.komo-check input:checked { background: var(--komo-interactive); border-color: var(--komo-interactive); }
.komo-check input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--komo-on-interactive);
  border-bottom: 2px solid var(--komo-on-interactive);
  transform: translate(-50%, -65%) rotate(-45deg);
}
.komo-check input:focus-visible { outline: 2px solid var(--komo-interactive); outline-offset: 2px; }

.komo-subgroup { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--komo-border-subtle); }
.komo-subgroup__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--komo-fs-label);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text-secondary);
  margin-bottom: 13px;
}

/* Small help/info icon */
.komo-help { color: var(--komo-icon-faint); cursor: help; }

/* Radio group label spacing */
.komo-radio-label {
  display: block;
  font-size: var(--komo-fs-label);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text-secondary);
  margin-bottom: 11px;
}

/* Vertical radio list — same .komo-choice items as .komo-choicerow, stacked
   for longer, sentence-length options (e.g. Förderungsantrag questions). */
.komo-choicerow--column { flex-direction: column; gap: 12px; }
.komo-choicerow--column .komo-choice { align-items: flex-start; line-height: 1.45; }
.komo-choicerow--column .komo-choice input { margin-top: 2px; }
.komo-formquestion {
  margin: 0 0 12px;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-medium);
  color: var(--komo-text);
}
.komo-formquestion-group + .komo-formquestion-group { margin-top: 28px; }

/* Inline (unwrapped) checkbox row — same .komo-check / .komo-subgroup
   building blocks as the Förderdaten card in Stammdaten, laid out
   horizontally when there's no card wrapper around them. */
.komo-checkrow { display: flex; flex-direction: column; gap: 22px; }
/* Vertical gap (row-gap, used when items wrap) is half the horizontal gap
   (column-gap) — tighter vertical spacing reads as one grouped checkbox row
   rather than as unrelated stacked items. */
.komo-checkrow__row { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.komo-subgroup--inline { margin: 0; padding: 0; border-top: none; }

/* File dropzone (Antragsdokument / Beilagen) */
.komo-dropzone {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px dashed var(--komo-border-strong);
  border-radius: var(--komo-radius-lg);
  padding: 20px 22px;
  background: var(--komo-surface);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.komo-dropzone:hover { border-color: var(--komo-interactive-border); background: var(--komo-interactive-soft); }
.komo-dropzone__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--komo-radius);
  background: var(--komo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--komo-text-muted);
}
.komo-dropzone__title { font-size: var(--komo-fs-nav); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-dropzone__hint { font-size: var(--komo-fs-label); color: var(--komo-text-secondary); margin-top: 2px; }

/* ============================================================
   Table & toolbar (Personal)
   ============================================================ */
.komo-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.komo-search {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--komo-border);
  border-radius: var(--komo-radius);
  background: var(--komo-surface);
  overflow: hidden;
  flex: 0 0 300px;
  max-width: 100%;
}
.komo-search__filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 100%;
  border: none;
  border-right: 1px solid var(--komo-border-subtle);
  background: var(--komo-bg-subtle);
  cursor: pointer;
  color: var(--komo-text-secondary);
}
.komo-search__filter:hover { background: var(--komo-bg-subtle-hover); }
.komo-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--komo-fs-nav);
  color: var(--komo-text);
  padding: 0 12px;
  background: transparent;
  min-width: 0;
}
.komo-search__input::placeholder { color: var(--komo-text-muted); }
/* The search wrapper clips (overflow:hidden) so the inner input's focus ring
   would be cut off — surface it on the wrapper instead. :focus-within (not
   :focus-visible) is fine for a text field and avoids the clip. */
html[data-focus="keyboard"] .komo-search:focus-within {
  outline: 3px solid transparent;
  box-shadow: var(--komo-focus-shadow);
  border-color: var(--komo-focus-ink);
}
html[data-focus="pointer"] .komo-search:focus-within {
  box-shadow: var(--komo-focus-ring);
  border-color: var(--komo-interactive);
}
/* …and suppress the inner input's own ring so it's not a ring-within-a-ring. */
.komo-search__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Controls inside an overflow-clipping row (segmented buttons; tabs, which
   sit at the top edge of an overflow-x:auto bar) would have an outer ring
   clipped into slivers. Use an INSET ring — it lives inside the control and
   is never clipped. */
.komo-segmented button:focus-visible,
.komo-tab:focus-visible {
  outline: 3px solid transparent !important;
  box-shadow: inset 0 0 0 3px var(--komo-focus), inset 0 0 0 5px var(--komo-focus-ink) !important;
}
.komo-tab:focus-visible { border-radius: 3px; }

/* Wrap a .komo-table in this so it scrolls horizontally instead of
   crushing columns once the viewport is narrower than the table's
   natural width (colgroup widths + a readable floor for Vor-/Nachname). */
.komo-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.komo-table { width: 100%; min-width: 840px; border-collapse: collapse; table-layout: fixed; }
.komo-table thead tr { background: var(--komo-bg); border-top: 1px solid var(--komo-border-subtle); }
.komo-table th {
  text-align: left;
  font-size: var(--komo-fs-label);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text-secondary);
  padding: 12px 16px;
}
.komo-table th.komo-col-flag { padding: 12px 8px 12px 20px; }
.komo-table th.komo-col-actions { padding: 12px 20px 12px 8px; }
.komo-table tbody tr { border-top: 1px solid var(--komo-border-subtle); }
.komo-table tbody tr:hover { background: var(--komo-bg-subtle); }
.komo-table td { font-size: var(--komo-fs-nav); color: var(--komo-text-body); padding: 14px 16px; }
.komo-table td.komo-cell-strong { color: var(--komo-text); }
.komo-table td.komo-col-flag { padding: 14px 8px 14px 20px; text-align: center; }
.komo-table td.komo-col-actions { padding: 11px 20px 11px 8px; text-align: right; }
.komo-table td.komo-cell-empty { color: var(--komo-text-muted); }
/* Tabellarische (gleich breite) Ziffern für ALLE Tabellenzellen — so fluchten
   Zahlen, Datumsangaben, IBANs und IDs sauber untereinander. */
.komo-table th, .komo-table td { font-variant-numeric: tabular-nums; }
/* Zahlenspalten zusätzlich rechtsbündig (Alter, VZÄ, Anzahl, Beträge …).
   Auf <th> und jede <td> der Spalte setzen. Nicht für Datum, IBAN oder IDs. */
.komo-table th.komo-col-num,
.komo-table td.komo-col-num { text-align: right; }

/* Row-level validation flag (e.g. Beschäftigungsstunden exceeds VZÄ) —
   pairs with the warning banner above the table that explains the issue. */
.komo-table tbody tr.is-invalid { background: var(--komo-danger-soft); }
.komo-table tbody tr.is-invalid:hover { background: var(--komo-danger-soft-hover); }

.komo-rowbtn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--komo-radius);
  cursor: pointer;
  color: var(--komo-interactive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.komo-rowbtn:hover { background: var(--komo-interactive-soft); }

/* Pagination */
.komo-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--komo-border-subtle);
}
.komo-pager__btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--komo-border);
  background: var(--komo-surface);
  border-radius: 7px;
  color: var(--komo-icon-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.komo-pager__btn:disabled { cursor: default; }
.komo-pager__btn:not(:disabled) { color: var(--komo-text-secondary); }
.komo-pager__btn:not(:disabled):hover { background: var(--komo-bg); }
.komo-pager__count { font-size: var(--komo-fs-label); color: var(--komo-text-secondary); padding: 0 4px; }

/* Empty state */
.komo-empty {
  padding: 48px 20px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  border-top: 1px solid var(--komo-border-subtle);
}
.komo-empty__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--komo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--komo-icon-faint);
}
.komo-empty__title { font-size: var(--komo-fs-body); font-weight: var(--komo-fw-semibold); color: var(--komo-text-body); }
.komo-empty__text { font-size: var(--komo-fs-meta); color: var(--komo-text-muted); max-width: 380px; line-height: 1.5; }

/* Section headings above stand-alone tables */
.komo-section { margin-bottom: var(--komo-space-8); }
.komo-section > .komo-h2 { margin: 0 0 14px; }

/* Section header: heading left + an action (e.g. "+ … hinzufügen") right */
.komo-sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.komo-sectionhead .komo-h2 { margin: 0; }

/* An empty state placed directly in a card (no toolbar above it) shouldn't
   draw the divider line at the card's very top. */
.komo-card > .komo-empty:first-child { border-top: none; }

/* ============================================================
   Read-only data list (label / value rows) — e.g. Grunddaten
   ============================================================ */
.komo-datalist { display: flex; flex-direction: column; }
.komo-datarow {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--komo-border-subtle);
}
.komo-datarow:first-child { border-top: none; padding-top: 0; }
.komo-datarow:last-child { padding-bottom: 0; }
.komo-datarow__label { flex: 0 0 240px; font-size: var(--komo-fs-nav); color: var(--komo-text-secondary); }
.komo-datarow__value { flex: 1; min-width: 0; font-size: var(--komo-fs-nav); color: var(--komo-text); font-weight: var(--komo-fw-medium); }

/* Field-level hint under an input (e.g. "please choose … first") */
.komo-fieldnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--komo-fs-label);
  line-height: 1.45;
}
.komo-fieldnote svg { flex: none; margin-top: 1px; }
.komo-fieldnote--warning { color: var(--komo-warning-text); }
.komo-fieldnote--warning svg { color: var(--komo-warning); }

/* Read-only / disabled form controls (e.g. a locked "Gruppe" field, a select
   that stays disabled until a prerequisite is chosen). */
.komo-input[readonly] { background: var(--komo-bg); color: var(--komo-text-secondary); cursor: default; }
.komo-input[readonly]:focus { border-color: var(--komo-border); box-shadow: none; }
.komo-select__trigger:disabled { background: var(--komo-bg); color: var(--komo-text-muted); cursor: not-allowed; }
.komo-select__trigger:disabled .komo-select__chevron { color: var(--komo-icon-subtle); }

/* Rows that open an editor on click (e.g. a child → Betreuungszeiten) */
.komo-table tbody tr.is-clickable { cursor: pointer; }

/* ============================================================
   Modal / dialog
   ============================================================ */
.komo-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 40, 45, .32);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
  overflow-y: auto;
}
.komo-modal-backdrop[hidden] { display: none; }
.komo-modal {
  background: var(--komo-surface);
  border-radius: var(--komo-radius-lg);
  box-shadow: 0 20px 60px rgba(20, 40, 45, .28);
  width: 100%;
  max-width: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
}
.komo-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--komo-border);
  flex: none;
}
.komo-modal__title { margin: 0; font-size: var(--komo-fs-h2); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-modal__body { padding: 24px; overflow-y: auto; }
.komo-modal__subhead {
  font-size: var(--komo-fs-card-title);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text);
  margin: 26px 0 16px;
}
.komo-modal__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--komo-border);
  flex: none;
}
.komo-modal__foot--split { justify-content: space-between; }
.komo-modal__foot--end { justify-content: flex-end; }
.komo-modal__foot-left { display: flex; align-items: center; gap: 12px; }

/* ============================================================
   Selectable option cards (single-select / radio) — e.g. the
   Antragstyp choice in the "Neuer Antrag" dialog. Native radios
   (one name = single-select); the checked card highlights via :has().
   ============================================================ */
.komo-optioncard-group { display: flex; flex-direction: column; gap: 10px; }
.komo-optioncard {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border: 1.5px solid var(--komo-border);
  border-radius: var(--komo-radius);
  background: var(--komo-surface);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.komo-optioncard:hover { border-color: var(--komo-interactive-border); background: var(--komo-interactive-soft); }
.komo-optioncard:has(input:checked) { border-color: var(--komo-interactive); background: var(--komo-interactive-soft); }
.komo-optioncard input {
  appearance: none;
  -webkit-appearance: none;
  margin: 1px 0 0;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--komo-control-border);
  background: var(--komo-surface);
  cursor: pointer;
  position: relative;
}
.komo-optioncard input:checked { border-color: var(--komo-interactive); }
.komo-optioncard input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--komo-interactive);
  transform: translate(-50%, -50%);
}
.komo-optioncard input:focus-visible { outline: 2px solid var(--komo-interactive); outline-offset: 2px; }
.komo-optioncard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.komo-optioncard__title { font-size: var(--komo-fs-nav); font-weight: var(--komo-fw-semibold); color: var(--komo-text); }
.komo-optioncard__desc { font-size: var(--komo-fs-label); color: var(--komo-text-secondary); line-height: 1.45; }

@media (max-width: 640px) {
  .komo-datarow { flex-direction: column; gap: 2px; }
  .komo-datarow__label { flex: none; }
  .komo-modal-backdrop { padding: 20px 12px; }
  /* Header: drop the app name so the logo + user menu don't crowd/wrap. */
  .komo-appname, .komo-divider-v { display: none; }
  /* Title cluster stacks so the primary action never gets cut off next to a
     long heading; the button drops below the title, left-aligned. */
  .komo-titlebar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   Wizard / stepper (Person erfassen)
   A multi-step flow rendered as a full page (not a cramped modal):
   more room for the forms, and the sticky footer keeps the step
   navigation reachable. One .komo-wizard-step is visible at a time.
   ============================================================ */
.komo-wizard-title { margin: 0 0 6px; }
.komo-wizard-sub { margin: 0 0 28px; font-size: var(--komo-fs-nav); color: var(--komo-text-secondary); }

/* Progress indicator: dots + labels, connected by a rail that fills teal
   up to the current step. */
.komo-stepper { display: flex; margin-bottom: 30px; }
.komo-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
}
.komo-step::before {                 /* connector back to the previous dot */
  content: "";
  position: absolute;
  top: 17px;
  left: -50%;
  right: 50%;
  height: 2px;
  margin: 0 17px;
  background: var(--komo-border);
}
.komo-step:first-child::before { display: none; }
.komo-step.is-current::before,
.komo-step.is-done::before { background: var(--komo-interactive); }
.komo-step__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--komo-control-border);
  background: var(--komo-surface);
  color: var(--komo-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--komo-fw-semibold);
  position: relative;
  z-index: 1;
}
.komo-step__dot svg { display: none; }
.komo-step__label { font-size: var(--komo-fs-label); font-weight: var(--komo-fw-medium); color: var(--komo-text-secondary); max-width: 16ch; }
.komo-step.is-current .komo-step__dot { border-color: var(--komo-interactive); background: var(--komo-interactive); color: var(--komo-on-interactive); }
.komo-step.is-current .komo-step__label { color: var(--komo-text); font-weight: var(--komo-fw-semibold); }
.komo-step.is-done .komo-step__dot { border-color: var(--komo-interactive); background: var(--komo-interactive); color: var(--komo-on-interactive); }
.komo-step.is-done .komo-step__num { display: none; }
.komo-step.is-done .komo-step__dot svg { display: block; }

/* Step panels — only the active one is shown. */
.komo-wizard-step { display: none; }
.komo-wizard-step.is-active { display: block; }
.komo-wizard-step__intro { margin: 0 0 22px; font-size: var(--komo-fs-nav); color: var(--komo-text-secondary); line-height: 1.5; }

/* Required-field marker + legend */
.komo-req { color: var(--komo-danger); font-weight: var(--komo-fw-semibold); margin-left: 3px; }
.komo-formlegend { margin: 0 0 20px; font-size: var(--komo-fs-label); color: var(--komo-text-muted); }

/* Invalid field highlight — pairs with the validation banner so the offending
   field is obvious, not just named in the summary. */
.komo-input.is-error,
.komo-select.is-error .komo-select__trigger { border-color: var(--komo-danger); background: var(--komo-danger-soft); }
.komo-input.is-error:focus,
.komo-select.is-error .komo-select__trigger:focus { border-color: var(--komo-danger); box-shadow: 0 0 0 3px var(--komo-danger-soft-hover); }

/* Label variant carrying a trailing help icon */
.komo-label--help { display: flex; align-items: center; gap: 7px; }

/* Sub-tabs inside a step reuse the .komo-tab underline look but are buttons. */
button.komo-tab { background: none; border: none; border-bottom: 2.5px solid transparent; cursor: pointer; font-family: inherit; }

/* Disclosure ("Tätigkeit in der Gruppe") — native <details> styled. */
.komo-disclosure { border: 1px solid var(--komo-border); border-radius: var(--komo-radius); background: var(--komo-surface); }
.komo-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: var(--komo-fs-nav);
  font-weight: var(--komo-fw-semibold);
  color: var(--komo-text);
}
.komo-disclosure > summary::-webkit-details-marker { display: none; }
.komo-disclosure__chev { color: var(--komo-icon-subtle); transition: transform .15s ease; }
.komo-disclosure[open] > summary .komo-disclosure__chev { transform: rotate(90deg); }
.komo-disclosure__body { padding: 18px; border-top: 1px solid var(--komo-border-subtle); }

/* Sticky footer nav: Zurück (left) · Abbrechen + Weiter (right) */
.komo-wizard-foot {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--komo-space-8);
  padding: var(--komo-space-4) 0;
  background: var(--komo-bg);
  border-top: 1px solid var(--komo-border);
}
.komo-wizard-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(to top, rgba(20, 40, 45, .05), transparent);
  pointer-events: none;
}
.komo-wizard-foot__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.komo-wizard-foot .komo-btn { padding: 11px 24px; }

@media (max-width: 560px) {
  .komo-step__label { font-size: 11px; }
  .komo-wizard-foot .komo-btn { padding: 11px 16px; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* Herogrid needs its own, earlier breakpoint: at 4 columns it starts feeling
   cramped well before the 900px point where the rest of the shell collapses
   (sidebar goes offcanvas, main content stretches full-width) — so it steps
   down to 2×2 on its own, sooner. */
@media (max-width: 1300px) {
  .komo-herogrid { grid-template-columns: repeat(2, 1fr); }
  .komo-recentgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Offcanvas: hidden by default on narrow screens — the hamburger toggle
     slides it in as a fixed overlay above the content, dimmed by the
     backdrop. Uses transform (not display:none) so it can animate. */
  .komo-sidebar {
    position: fixed;
    top: var(--komo-header-h);
    left: 0;
    z-index: 40;
    transform: translateX(-100%);
    box-shadow: 8px 0 24px rgba(20, 40, 45, .18);
  }
  .komo-sidebar.is-open { transform: translateX(0); }
  .komo-main { padding: var(--komo-space-6) 20px 32px; }
  .komo-statgrid { grid-template-columns: repeat(2, 1fr); }
  .komo-tilegrid { grid-template-columns: 1fr; }
  .komo-herogrid { grid-template-columns: 1fr; }
  .komo-recentgrid { grid-template-columns: 1fr; }
  .komo-grid-2, .komo-grid-3, .komo-grid-addr, .komo-checkgrid { grid-template-columns: 1fr; }
  .komo-half { max-width: 100%; }
}