/* app.css — custom styles on top of Pico CSS v2.1.1 */
/* Pico is the base: this file only (a) sets --pico-* custom properties,
   (b) styles things Pico has no primitive for, (c) adds responsive
   overrides on Pico primitives. Every kept exception is listed in
   docs/ui-refurbish/pico-exceptions.md. */

/* --- Pico custom property overrides (theme) --- */
/* Slightly denser layout for admin tool with ~5 users */
:root {
  --pico-typography-spacing-vertical: 1.25rem;
  --pico-spacing: 0.75rem;

  /* One radius for inputs/buttons; cards/dialogs use the same.
     Pico sets --pico-border-radius:0.25rem and also 5rem (pill) on
     [role=search]. We normalise the pill here so all controls match. */
  --pico-border-radius: 0.25rem;
  --pico-form-element-radius: var(--pico-border-radius);

  /* --- Danger (destructive) colour --- */
  /* Pico has --pico-del-color but no .danger class — we add one. */
  --c-danger: #e14646;

  /* --- Custom tokens (not Pico duplications) --- */
  /* Spacing scale: 4/8/12/16/24/32/48 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Card radius — one value larger than the input radius, for cards/dialogs */
  --radius-card: 0.5rem;

  /* Type scale */
  --text-section-title: 1.35rem;
  --text-caption: 0.875rem;
  --text-micro: 0.8rem;
}

/* Autofill on dark theme: opaque box-shadow covers the autofill background */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--pico-form-element-background-color) inset;
  -webkit-text-fill-color: var(--pico-color);
}

/* --- Grid overflow fix --- */
/* Pico's .grid uses minmax(0%, 1fr) which allows children to grow beyond
   their grid track. minmax(0, 1fr) forces children to shrink to fit, which
   prevents the horizontal overflow on Kursdetail. */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

/* Links: no underline by default, underline on hover */
a:not([role=button]) {
  text-decoration: none;
}

a:not([role=button]):hover {
  text-decoration: underline;
}

/* --- Visually hidden (for accessible labels on icon-only or search inputs) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: revealed on focus */
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 300;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--pico-background-color);
  border: 2px solid var(--pico-primary-border, #007bff);
  border-radius: var(--pico-border-radius, 0.25rem);
  color: var(--pico-primary, #007bff);
  text-decoration: underline;
}

/* Ensure scroll target isn't hidden behind sticky nav */
#main {
  scroll-margin-top: 4rem;
}

/* --- Flash messages --- */
.flash-success {
  border-left: 4px solid #20c997;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: #d1e7dd;
  color: #0f5132;
  border-radius: 0.25rem;
  overflow: hidden;
}

.flash-error {
  border-left: 4px solid #e14646;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: #f8d7da;
  color: #842029;
  border-radius: 0.25rem;
  overflow: hidden;
}

.flash-dismiss {
  float: right;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}

.flash-dismiss:hover {
  opacity: 1;
}

/* --- Top nav --- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color, #e9ecef);
  /* Reset Pico's nav { display: flex } — we control layout via .container */
  display: block;
}

.top-nav > .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap: 0.5rem;
}

/* Brand — wordmark, not a nav entry */
.nav-brand {
  margin-bottom: 0;
  margin-right: var(--space-2);
  list-style: none;
  flex-shrink: 0;
}
.nav-brand a {
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pico-primary);
  padding-right: var(--space-3);
  border-right: 1px solid var(--pico-muted-border-color);
  line-height: 1;
}
.nav-brand a:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* Primary + admin link groups */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Vertical padding so focus rings aren't clipped by overflow-x: auto */
  padding: 0.25rem 0;
}
.nav-links::-webkit-scrollbar {
  display: none;
}
.nav-links > ul {
  margin-bottom: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Admin group: visual separator via structural class, not URL coupling */
.nav-admin-links {
  border-left: 1px solid var(--pico-muted-border-color, #ced4da);
  padding-left: 1rem;
  margin-left: 0.5rem;
}

/* Account dropdown */
.nav-account {
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Profile avatar icon: replaces email text in nav dropdown trigger */
.nav-avatar {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

/* Ensure dropdown positioning works in custom flex nav.
   `left: auto` is required, not cosmetic: Pico sets `left: 0` with
   `width: 100%` + `min-width: fit-content` on the menu, so adding `right: 0`
   leaves the box over-constrained. In LTR the browser then ignores `right`
   and the menu is anchored by its left edge, which pushes a wide menu past
   the viewport and makes the whole page scroll sideways. Resetting `left`
   lets `right: 0` align the menu to the trigger's right edge as intended. */
.top-nav .dropdown {
  position: relative;
}
.top-nav .dropdown > ul {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  min-width: 12rem;
  z-index: 200;
}

/* Hamburger toggle: hidden by default, shown only when JS collapses nav on mobile */
.nav-toggle {
  display: none;
  margin-bottom: 0;
  padding: 0.3rem 0.6rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  width: auto;
  flex-shrink: 0;
}

/* Active nav link: visible, non-color-only treatment */
.top-nav a[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid var(--pico-primary, #007bff);
}

/* --- Mobile nav (≤767px, only when JS has initialized collapse) --- */
@media (max-width: 767.98px) {
  /* Allow wrapping so the expanded menu takes its own row */
  .js-nav-collapse .top-nav > .container {
    flex-wrap: wrap;
  }

  /* JS adds .js-nav-collapse to <html> when nav toggle is initialized */
  .js-nav-collapse .nav-toggle {
    display: inline-flex;
  }

  /* Account stays on the first row via order */
  .js-nav-collapse .nav-account {
    order: 1;
  }
  .js-nav-collapse .nav-toggle {
    order: 2;
  }
  /* Menu takes full width below the header row */
  .js-nav-collapse .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0;
    order: 3;
    overflow: visible;
  }
  .js-nav-collapse .nav-links > ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }
  .js-nav-collapse .nav-links > ul > li {
    width: 100%;
  }
  /* Pico gives nav links `margin: -0.5rem` (to optically align text with the
     nav box) and pulls the first nav list left by another -0.5rem. In the
     horizontal bar those cancel out against the li padding. In this
     vertical menu they compound to -16px, which pushes the first glyph of
     every link off the left edge of the nav, so labels render clipped
     ("ashboard" instead of "Dashboard"). Reset both axes — the negative
     margins only exist to optically align the horizontal bar, and there is
     no bar here to align. */
  .js-nav-collapse .nav-links {
    margin-left: 0;
  }
  .js-nav-collapse .nav-links > ul {
    margin-left: 0;
  }
  .js-nav-collapse .nav-links > ul > li {
    padding-left: 0;
  }
  .js-nav-collapse .nav-links > ul > li > a {
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding: 0.4rem 0;
  }

  /* Admin separator: no left border in vertical layout */
  .js-nav-collapse .nav-admin-links {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pico-muted-border-color, #ced4da);
    width: 100%;
  }

  /* Brand: drop the separator in vertical layout */
  .js-nav-collapse .nav-brand a {
    border-right: none;
    padding-right: 0;
  }

  /* Expanded state */
  .js-nav-collapse .nav-links[data-open] {
    display: flex;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* --- Table rows with data-href --- */
table tbody tr[data-href] {
  cursor: pointer;
}

table tbody tr[data-href]:hover {
  background: var(--pico-secondary-background, #f8f9fa);
}

table tbody tr[data-href]:hover td {
  background: transparent;
}

/* --- Dialog close button (×) --- */
dialog article > header {
  position: relative;
}

dialog .dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  color: var(--pico-muted-color, #6c757d);
  opacity: 0.7;
}

dialog .dialog-close:hover {
  opacity: 1;
}

dialog .dialog-close:focus-visible {
  outline: 2px solid var(--pico-primary-border, #007bff);
  outline-offset: 2px;
  opacity: 1;
}

/* --- Session selection checkboxes --- */
.session-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.session-option input[type="checkbox"],
.session-option input[type="radio"] {
  margin-bottom: 0;
}

/* One radio per Durchführung with all its dates listed underneath. */
.session-option.session-bundle {
  align-items: flex-start;
  padding: 0.5rem 0;
}

.session-option.session-bundle input[type="radio"] {
  margin-top: 0.2rem;
}

.session-bundle-dates {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}

.session-bundle-dates li {
  margin-bottom: 0;
}

/* --- Utility classes --- */
.inline-form {
  display: inline;
}

.btn-sm {
  display: inline;
  padding: 0.2rem 0.5rem;
}

.text-muted {
  color: var(--pico-muted-color);
}

.no-wrap {
  white-space: nowrap;
}

/* --- Button width: content-width on desktop, full-width on mobile --- */
/* Pico stretches buttons to 100% by default. This override makes primary
   buttons content-width on ≥576px (Pico's first breakpoint). Scoped to
   main > form and fieldset to preserve full-width on login and public
   registration forms where it's intentional. */
@media (min-width: 576px) {
  main > form button[type="submit"],
  main > form > fieldset button[type="submit"],
  main > section button[type="submit"] {
    width: auto;
  }
}

/* --- Danger (destructive) button --- */
/* Pico has --pico-del-color but no .danger class. This one class
   applies the danger colour to .outline buttons and links by
   overriding the Pico colour variables Pico's button selectors
   consume (--pico-color, --pico-border-color, --pico-primary*,
   --pico-primary-focus for the focus ring). */
.danger,
.danger:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
  --pico-color: var(--c-danger);
  --pico-border-color: var(--c-danger);
  --pico-primary: var(--c-danger);
  --pico-primary-hover: var(--c-danger);
  --pico-primary-focus: var(--c-danger);
}

/* --- Page header --- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.page-header hgroup {
  margin-bottom: 0;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-actions {
    justify-content: flex-end;
  }
}

/* --- Section spacing --- */
main > section > h2 {
  margin-top: 0;
}

/* --- Table: consistent header treatment --- */
/* Note: sticky headers inside .table-scroll (overflow: auto) would only */
/* stick within the scroll container, not the viewport — and the container */
/* has no height constraint, so position: sticky is a no-op here. */
/* Leaving non-sticky; a height-constrained scroller would need a markup change. */
.table-scroll table thead th {
  background: var(--pico-background-color);
}

/* --- Badge (already defined, now mapped to tokens) --- */
/* (Existing .badge-* classes remain — they already use hardcoded hex) */

/* --- Empty state CTA --- */
.empty-state a[role="button"],
.empty-state button {
  margin-top: var(--space-2);
}

/* --- Form: short field max-width --- */
.input-short {
  max-width: 8rem;
}

.input-medium {
  max-width: 16rem;
}

/* --- Danger zone --- */
.danger-zone {
  border: 1px solid var(--c-danger);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.danger-zone h2,
.danger-zone h3 {
  color: var(--c-danger);
  margin-bottom: var(--space-2);
}

.danger-zone p {
  color: var(--pico-muted-color);
  font-size: var(--text-caption);
  margin-bottom: var(--space-3);
}

/* --- Collapsible (accordion) --- */
/* Pico's summary[role=button] provides the button appearance + chevron.
   We only add spacing and the right-aligned chevron override. */
details.accordion {
  margin-top: var(--space-3);
}

details.accordion > *:not(summary) {
  margin-top: var(--space-3);
}

/* Move Pico's default chevron to the right side (it floats right already,
   but on summary[role=button] the width:100% pushes it left without this). */
details.accordion > summary {
  justify-content: space-between;
}

/* --- Filter bar alignment --- */
.filter-bar .action-group {
  margin-top: var(--space-2);
}

/* --- Pagination enhancement --- */
nav[aria-label="Seiten"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}

nav[aria-label="Seiten"] > small {
  color: var(--pico-muted-color);
}

nav[aria-label="Seiten"] a,
nav[aria-label="Seiten"] span {
  white-space: nowrap;
}

nav[aria-label="Seiten"] a[disabled],
nav[aria-label="Seiten"] span:empty {
  color: var(--pico-muted-color);
  opacity: 0.5;
}

/* --- Dashboard summary cards --- */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.dashboard-cards article {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.dashboard-cards article header {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 1.25rem 1rem 0.5rem;
}

.dashboard-cards article > small {
  display: block;
  padding: 0 1rem 1rem;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  flex: 1;
}

.dashboard-cards article footer {
  font-size: 0.85rem;
}

.dashboard-cards article footer:empty::before {
  content: "\00a0";
}

/* --- Flex utility --- */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Headings inside a .flex-between row are flex items and default to
   `min-width: auto`, so a long single word (e.g. "Dokumentenbibliothek" at
   2rem) cannot shrink below its min-content width and pushes the whole page
   into horizontal overflow. `min-width: 0` lets the item shrink, but on its
   own it makes the word break mid-syllable because Pico sets
   `overflow-wrap: break-word` on :root. Stepping the font size down on
   narrow screens keeps the heading on a single readable line instead.
   Scoped to headings: `min-width: 0` on every child would also strip the
   intrinsic width protection from buttons and forms in the same row. */
@media (max-width: 575.98px) {
  .flex-between > h1,
  .flex-between > h2 {
    min-width: 0;
    font-size: 1.5rem;
  }
}

/* --- Status badges --- */
/* Small inline badge with text label + subtle color. Never color alone. */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success {
  background: #d1e7dd;
  color: #0f5132;
}

.badge-warning {
  background: #fff3cd;
  color: #664d03;
}

.badge-danger {
  background: #f8d7da;
  color: #842029;
}

.badge-info {
  background: #cfe2ff;
  color: #084298;
}

.badge-muted {
  background: #e9ecef;
  color: #495057;
}

/* --- Responsive table wrapper --- */
/* Screen-only: the wrapper exists so a wide table scrolls inside its own
   box instead of dragging the whole page sideways. The overflow container is
   deliberately NOT created during print — Chromium can clip or paginate
   content inside an `overflow: auto` box down to the first page, which would
   silently drop attendance rows. Print keeps the raw table and relies on the
   A4 landscape page setup below. */
@media screen {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Numeric columns: right-align, tabular figures --- */
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Badge and compact action cells: prevent wrapping --- */
td.action-cell {
  white-space: nowrap;
}

/* --- Detail page key-value pairs --- */
/* Using <dl> for structured key-value display on detail pages */
dl.key-values {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}

dl.key-values dt {
  font-weight: 600;
  color: var(--pico-muted-color, #6c757d);
}

dl.key-values dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  dl.key-values {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  dl.key-values dt {
    margin-top: 0.5rem;
  }
  dl.key-values dt:first-child {
    margin-top: 0;
  }
}

/* --- Login page --- */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

.login-wrapper article {
  max-width: 24rem;
  width: 100%;
}

.login-wrapper hgroup {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- Empty state --- */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--pico-muted-color);
}

.empty-state p {
  margin-bottom: 0;
}

/* --- Action group --- */
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* --- User administration: compact, aligned row actions --- */
.admin-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.admin-actions .btn-sm,
.admin-actions .inline-form {
  margin-bottom: 0;
}

.admin-actions .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  white-space: nowrap;
}

.admin-actions-heading {
  text-align: right;
}

@media screen and (max-width: 768px) {
  .responsive-card .admin-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--space-2);
  }

  .responsive-card .admin-actions .inline-form {
    display: block;
  }

  .responsive-card .admin-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }
}

/* --- Course detail: action grid --- */
/* The course actions use Pico .grid for layout. Override the grid to
   use content-width columns on desktop so the buttons don't stretch
   to equal widths. On mobile the grid collapses to 1fr. */
.course-actions {
  grid-template-columns: repeat(auto-fit, minmax(max-content, 0));
  gap: 0.5rem;
  align-items: center;
  margin-bottom: var(--pico-typography-spacing-vertical);
}

/* Course-actions children: don't stretch buttons to fill the grid cell */
.course-actions > a,
.course-actions > form,
.course-actions > button {
  width: max-content;
  max-width: 100%;
}

.course-actions form {
  margin-bottom: 0;
}

.course-actions button {
  margin-bottom: 0;
}

/* --- Course detail: always-visible edit form --- */
/* Sits between the page header and the action buttons. Compact vertical
   rhythm; the save button is content-sized, not stretched. */
.course-edit-form {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.course-edit-form .grid {
  margin-bottom: 0;
}

.course-edit-form label {
  margin-bottom: 0.25rem;
}

.course-edit-form [type="submit"] {
  width: auto;
  margin-bottom: 0;
  margin-top: var(--pico-spacing);
}

/* --- Settings page tabbed sub-nav --- */
/* Horizontal tab bar for the settings page. Left-aligned underline tabs,
   not justified across the full width. */
.settings-tabs {
  display: flex;
  gap: 0;
  justify-content: flex-start;
  border-bottom: 2px solid var(--pico-muted-border-color, #e9ecef);
  margin-bottom: var(--pico-typography-spacing-vertical);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar {
  display: none;
}
.settings-tabs a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* overlap the container's border */
  color: var(--pico-muted-color, #6c757d);
}
.settings-tabs a:hover {
  text-decoration: none;
  color: var(--pico-primary, #007bff);
}
.settings-tabs a[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--pico-primary, #007bff);
  color: var(--pico-primary, #007bff);
}

/* --- Form fieldset sections --- */
fieldset.form-section {
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: var(--pico-spacing);
  padding-top: 0;
  margin-bottom: var(--pico-typography-spacing-vertical);
}

fieldset.form-section legend {
  padding: 0 0.5rem;
  font-weight: 600;
}

/* --- Inline field errors (registration form) --- */
small.error {
  display: block;
  color: #842029;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.session-groups-error {
  border: 2px solid #e14646;
  border-radius: var(--pico-border-radius);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

/* --- Footer legal links --- */
.footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.footer-links a {
  font-size: 0.85rem;
}

/* --- Filter bar (compact inline filters) --- */
.filter-bar {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.filter-bar .grid {
  margin-bottom: 0;
}

.filter-bar label {
  margin-bottom: 0;
}

.filter-bar select {
  margin-bottom: 0;
}

/* --- Inline-editable table cells --- */
/* Inputs inside table cells are compact and borderless, blending into the row.
   The form's submit button (✓) provides the save action. */
.cell-input,
table .cell-input {
  width: 100%;
  margin-bottom: 0;
  padding: calc(var(--pico-form-element-spacing-vertical) * 0.35) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
  font-size: 0.95rem;
  border: 1px solid var(--pico-muted-border-color, #ced4da);
  border-radius: calc(var(--pico-border-radius) * 0.5);
  background: transparent;
  color: var(--pico-color);
  transition: border-color var(--pico-transition), background var(--pico-transition);
}

table .cell-input:hover {
  border-color: var(--pico-muted-border-color);
}

table .cell-input:focus {
  border-color: var(--pico-primary-border);
  background: var(--pico-form-element-active-background-color);
  box-shadow: none;
}

.cell-num {
  text-align: right;
  max-width: 6rem;
}

/* --- Section rhythm --- */
main > section + section {
  margin-top: calc(var(--pico-typography-spacing-vertical) * 1.5);
}

/* --- Card sections on detail pages --- */
.detail-card {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.detail-card > h2 {
  margin-bottom: 0.75rem;
}

/* ===== Dark mode overrides ===== */
/* Pico v2 doesn't define named color variables (green-100, red-100, etc.)
   so our badge/flash CSS uses hardcoded hex values that are light-mode only.
   These overrides ensure readable contrast in dark mode via prefers-color-scheme
   and data-theme="dark". */

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Flash messages */
    .flash-success {
      background: #0f3526;
      color: #9be8c6;
      border-left-color: #20c997;
    }
    .flash-error {
      background: #3d1418;
      color: #f4a8ae;
      border-left-color: #e14646;
    }

    /* Badges */
    .badge-success {
      background: #0f3526;
      color: #9be8c6;
    }
    .badge-warning {
      background: #3d2f00;
      color: #ffdf8a;
    }
    .badge-danger {
      background: #3d1418;
      color: #f4a8ae;
    }
    .badge-info {
      background: #0a2440;
      color: #a3c8ff;
    }
    .badge-muted {
      background: #2a2f38;
      color: #b3b9c5;
    }

    /* Table hover */
    table tbody tr[data-href]:hover {
      background: #202632;
    }
    table tbody tr[data-href]:hover td {
      background: transparent;
    }

    /* Inline field errors */
    small.error {
      color: #f4a8ae;
    }
  }
}

[data-theme="dark"] {
  /* Flash messages */
  .flash-success {
    background: #0f3526;
    color: #9be8c6;
    border-left-color: #20c997;
  }
  .flash-error {
    background: #3d1418;
    color: #f4a8ae;
    border-left-color: #e14646;
  }

  /* Badges */
  .badge-success {
    background: #0f3526;
    color: #9be8c6;
  }
  .badge-warning {
    background: #3d2f00;
    color: #ffdf8a;
  }
  .badge-danger {
    background: #3d1418;
    color: #f4a8ae;
  }
  .badge-info {
    background: #0a2440;
    color: #a3c8ff;
  }
  .badge-muted {
    background: #2a2f38;
    color: #b3b9c5;
  }

  /* Table hover */
  table tbody tr[data-href]:hover {
    background: #202632;
  }
  table tbody tr[data-href]:hover td {
    background: transparent;
  }

  /* Inline field errors */
  small.error {
    color: #f4a8ae;
  }
}

/* --- Notification history entries (in confirmation modal) --- */
.notification-history-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color, #e9ecef);
  font-size: 0.9rem;
}
.notification-history-entry:last-child {
  border-bottom: none;
}

/* --- Print attendance list --- */

/* The attendance sheet carries up to nine columns, which does not fit a
   portrait A4 at a readable size. Landscape gives the columns room without
   shrinking the font. */
@page {
  size: A4 landscape;
  margin: 10mm;
}

.attendance-table {
  width: 100%;
  border-collapse: collapse;
}
.attendance-table th,
.attendance-table td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
}
.attendance-table th {
  background: #f5f5f5;
}
.checkbox-col {
  width: 3em;
  text-align: center;
}

/* Each session starts its own block so the sheet can be printed and signed
   per date rather than as one long list. */
.attendance-session {
  break-inside: avoid-page;
  page-break-inside: avoid;
  margin-bottom: 1.5rem;
}
.attendance-session-header h2 {
  margin-bottom: 0.15rem;
}
.attendance-session-date {
  font-weight: 400;
  font-size: 0.9em;
  margin-left: 0.5rem;
}
.attendance-session-location {
  margin-bottom: 0.35rem;
  font-size: 0.9em;
  color: var(--pico-muted-color, #6c757d);
}
.attendance-empty {
  font-size: 0.9em;
  color: var(--pico-muted-color, #6c757d);
}
.clear-both {
  clear: both;
}
.signature-line {
  margin-top: 2rem;
  border-top: 1px solid #333;
  width: 30%;
  float: right;
  text-align: center;
  padding-top: 4px;
  font-size: 0.9em;
}

@media print {
  .no-print,
  .top-nav,
  footer,
  .flash-success,
  .flash-error {
    display: none !important;
  }
  body {
    font-size: 9pt;
  }
  /* Use the full printable width: Pico caps .container at breakpoint
     widths, which shrinks the sheet to a narrow column on paper. */
  main.container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .print-header h1 {
    font-size: 14pt;
    margin-bottom: 0.2rem;
  }
  .attendance-table {
    width: 100%;
  }
  .attendance-table th,
  .attendance-table td {
    border: 1px solid #ccc;
    padding: 4px 6px;
  }
  .attendance-table th {
    background: #f0f0f0;
  }
  /* Compact columns never wrap — dates and phones stay on one line.
     Wide text columns (Name, E-Mail, …) keep word-break so long
     addresses wrap inside their cell instead of stretching the table. */
  .attendance-table th.col-dob,
  .attendance-table td.col-dob,
  .attendance-table th.col-phone,
  .attendance-table td.col-phone,
  .attendance-table th.num,
  .attendance-table td.num,
  .attendance-table .checkbox-col {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
  /* Other cells keep wrapping for long values */
  .attendance-table td {
    word-break: break-word;
  }
}

/* --- Import template example (in import modal) --- */
.import-template summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.import-template pre {
  max-height: 20rem;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--pico-muted-border-color, #ced4da);
  border-radius: var(--pico-border-radius, 0.25rem);
  background: var(--pico-secondary-background, #f8f9fa);
}

/* --- Course info page (flyer layout: facts column + description) --- */
.course-info-header {
  margin-bottom: 1.5rem;
}
.course-info-header h1 {
  margin-bottom: 0.5rem;
}
.course-info-kicker {
  margin-bottom: 0.25rem;
  color: var(--pico-muted-color, #6c757d);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.course-info-lead {
  font-size: 1.1em;
  color: var(--pico-muted-color, #6c757d);
}
.course-info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .course-info-layout {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}
.course-info-facts {
  padding: 1rem 1.25rem;
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color, #e9ecef);
  border-radius: var(--pico-border-radius, 0.25rem);
  background: var(--pico-card-background-color, transparent);
}
.course-info-facts section,
.course-info-main section {
  margin-bottom: 1.25rem;
}
.course-info-facts section:last-child,
.course-info-main section:last-child {
  margin-bottom: 0;
}
.course-info-facts h2 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pico-primary, #007bff);
}
.course-info-facts h3 {
  font-size: 0.95rem;
  margin: 0.75rem 0 0.25rem;
}
.course-info-facts p,
.course-info-facts address {
  margin-bottom: 0.25rem;
}
.course-info-main h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.course-info-main h3 {
  font-size: 1rem;
  margin: 1rem 0 0.25rem;
}
.course-info-main ul,
.course-info-facts ul {
  padding-left: 1.25rem;
}
.course-info-main li {
  margin-bottom: 0.25rem;
}
ul.info-dates {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.5rem;
}
ul.info-dates li {
  margin-bottom: 0.35rem;
}
.course-info-page a {
  word-break: break-word;
}
.osm-map {
  margin-top: 1rem;
  border-radius: var(--pico-border-radius, 0.25rem);
  overflow: hidden;
}
.venue-address {
  font-style: normal;
  margin-bottom: 0.5rem;
}
.venue-coords {
  margin-bottom: 1rem;
}
.osm-map iframe {
  display: block;
  border: 1px solid var(--pico-muted-border-color, #333);
  border-radius: var(--pico-border-radius, 0.25rem);
}

/* ===== Mobile responsive (≤768px) ===== */

/* --- Responsive list tables: card mode --- */
/* At ≤768px, tables with the .responsive-card class switch from
   column layout to stacked cards. Each <td> shows its data-label
   attribute as a muted caption via ::before. The first column
   (linked name) renders as the card title. */
@media screen and (max-width: 768px) {
  .responsive-card thead {
    display: none;
  }
  .responsive-card,
  .responsive-card tbody,
  .responsive-card tr,
  .responsive-card td {
    display: block;
    width: 100%;
  }
  .responsive-card tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--radius-card);
    background: var(--pico-background-color);
  }
  .responsive-card tr:last-child {
    margin-bottom: 0;
  }
  .responsive-card td {
    padding: 0.3rem 0;
    border: none;
    text-align: left;
    white-space: normal; /* reset nowrap from desktop numeric/action cells */
  }
  .responsive-card td::before {
    content: attr(data-label);
    display: inline-block;
    width: 5rem;
    margin-right: var(--space-2);
    color: var(--pico-muted-color);
    font-size: var(--text-micro);
    font-weight: 600;
    vertical-align: top;
  }
  /* Cells without data-label: no empty label box */
  .responsive-card td:not([data-label])::before {
    display: none;
  }
  /* First column (linked name) — render as card title */
  .responsive-card td:first-child {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
  }
  .responsive-card td:first-child::before {
    display: none;
  }
  .responsive-card td:first-child a {
    font-weight: 700;
  }
  /* Numeric cells: align value to the right of the label */
  .responsive-card td.num::before {
    text-align: right;
  }
  /* "—" muted cells: compact */
  .responsive-card td:empty,
  .responsive-card td .text-muted {
    color: var(--pico-muted-color);
  }
  /* Badge cells: inline */
  .responsive-card td .badge {
    margin-top: 0;
  }
  /* Action cells: full-width buttons stacked */
  .responsive-card td:last-child .action-group,
  .responsive-card td:last-child .inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .responsive-card td:last-child .btn-sm,
  .responsive-card td:last-child button {
    margin-bottom: 0;
  }

  /* Hide the .table-scroll wrapper at ≤768px for responsive-card tables
     — the card mode has no horizontal overflow */
  .table-scroll:has(> table.responsive-card) {
    overflow-x: visible;
  }
}

/* --- Mobile nav improvements (≤767px) --- */
@media (max-width: 767.98px) {
  /* 44px tap targets with 8px gap */
  .js-nav-collapse .nav-links > ul > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
  }
  .js-nav-collapse .nav-links > ul {
    gap: var(--space-2);
  }
  /* Active item: left accent bar + surface-raised background, no full-width underline */
  .js-nav-collapse .nav-links a[aria-current="page"] {
    border-bottom: none;
    border-left: 3px solid var(--pico-primary);
    background: var(--pico-secondary-background);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--pico-border-radius, 0.25rem);
  }
  /* Close on outside tap — the expanded nav-links area closes on click */
  .js-nav-collapse .nav-links[data-open] {
    position: relative;
  }
}

/* --- Buttons ≤576px: primary full width --- */
@media (max-width: 575.98px) {
  /* Primary buttons in page-header-actions: full width, stacked */
  .page-header-actions button,
  .page-header-actions [role="button"] {
    width: 100%;
    margin-bottom: var(--space-1);
  }
  /* Course detail action grid: 2-column grid on mobile */
  .course-actions {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .course-actions > a,
  .course-actions > form,
  .course-actions > button {
    width: 100%;
  }
  .course-actions button,
  .course-actions [role="button"] {
    width: 100%;
    margin-bottom: 0;
  }
}

/* --- Filter bar ≤768px: stacked --- */
@media screen and (max-width: 768px) {
  /* Filtern button goes below, full width */
  .filter-bar .action-group {
    width: 100%;
  }
  .filter-bar .action-group button {
    width: 100%;
  }
  /* Stammdaten search: input and button same baseline */
  form[role="search"] input[type="search"] {
    margin-bottom: 0;
  }
  form[role="search"] button {
    margin-bottom: var(--pico-spacing);
  }
}

/* --- Form fieldset ≤768px: collapse double padding --- */
@media screen and (max-width: 768px) {
  fieldset.form-section {
    border: none;
    padding: 0;
    padding-top: 0;
    margin-bottom: var(--pico-typography-spacing-vertical);
  }
  fieldset.form-section legend {
    padding: 0;
    font-size: var(--text-section-title);
    margin-bottom: var(--space-2);
  }
  /* Nested fieldsets keep a subtle separator */
  fieldset.form-section fieldset.form-section {
    border-top: 1px solid var(--pico-muted-border-color);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
  }
}

/* --- Sticky save bar ≤768px --- */
@media screen and (max-width: 768px) {
  .sticky-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--pico-background-color);
    border-top: 1px solid var(--pico-muted-border-color);
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  .sticky-save-bar button[type="submit"] {
    width: auto;
    margin-bottom: 0;
  }
  /* Body padding to prevent content being hidden behind the bar */
  body:has(.sticky-save-bar) {
    padding-bottom: 4rem;
  }
}

/* --- Modal bottom sheet ≤576px --- */
@media (max-width: 575.98px) {
  dialog {
    align-items: flex-end;
  }
  dialog article {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    max-height: 90vh;
  }
  dialog article > footer {
    flex-direction: column-reverse;
  }
  dialog article > footer button,
  dialog article form > footer button {
    width: 100%;
    margin-bottom: var(--space-1);
  }
  dialog article > footer button[type="submit"],
  dialog article form > footer button[type="submit"] {
    margin-bottom: var(--space-2);
  }
}

/* --- Settings tabs ≤768px: scroll-snap + fade mask --- */
@media screen and (max-width: 768px) {
  .settings-tabs {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.5rem, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 0.5rem, #000 calc(100% - 2rem), transparent 100%);
  }
  .settings-tabs a {
    scroll-snap-align: start;
  }
}

/* --- KPI cards ≤768px: single column --- */
@media screen and (max-width: 768px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .dashboard-cards article {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
  }
  .dashboard-cards article header {
    font-size: 1.75rem;
    padding: 0.5rem 0 0.5rem 1rem;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: center;
  }
  .dashboard-cards article > small {
    padding: 0;
    text-align: left;
    flex: 1;
  }
  .dashboard-cards article footer {
    flex-shrink: 0;
  }
  .dashboard-cards article footer:empty::before {
    content: "";
  }
}

/* --- Page header ≤768px: clamp H1, overflow-wrap --- */
@media screen and (max-width: 768px) {
  .page-header h1,
  hgroup > h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    overflow-wrap: anywhere;
  }
}

/* --- Inline-edit tables ≤768px: edit card mode --- */
@media screen and (max-width: 768px) {
  /* Termingruppen and Termine tables: each row becomes an edit card */
  .responsive-edit thead {
    display: none;
  }
  .responsive-edit,
  .responsive-edit tbody,
  .responsive-edit tr,
  .responsive-edit td {
    display: block;
    width: 100%;
  }
  .responsive-edit tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--radius-card);
    background: var(--pico-background-color);
  }
  .responsive-edit tr:last-child {
    margin-bottom: 0;
  }
  .responsive-edit td {
    padding: 0.3rem 0;
    border: none;
  }
  .responsive-edit td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--pico-muted-color);
    margin-bottom: 0.15rem;
  }
  /* Inputs fill width */
  .responsive-edit .cell-input {
    width: 100%;
  }
  .responsive-edit .cell-num {
    max-width: 100%;
  }
  /* Save button: full width at card bottom */
  .responsive-edit td:last-child {
    margin-top: var(--space-2);
  }
  .responsive-edit td:last-child .inline-form,
  .responsive-edit td:last-child form {
    width: 100%;
  }
  .responsive-edit td:last-child button {
    width: 100%;
  }
  .responsive-edit td:last-child .btn-sm {
    width: 100%;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  }
}

/* --- Action cell in responsive card: compact buttons --- */
@media (max-width: 575.98px) {
  .responsive-card td:last-child .btn-sm,
  .responsive-card td:last-child button {
    width: auto;
    margin-bottom: 0;
  }
}

/* --- Notification preview (send dialogs) and admin portal preview --- */
.notification-preview {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color, #e9ecef);
  border-radius: var(--pico-border-radius, 0.25rem);
}
.notification-preview h4 {
  margin-bottom: 0.25rem;
}
.notification-preview-meta {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--pico-muted-color, #6c757d);
}
.notification-preview-body,
.notification-log-body pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.75rem;
}
.notification-log-body summary {
  cursor: pointer;
}
.preview-banner {
  border-left: 4px solid var(--pico-primary, #0172ad);
  padding: 0.75rem 1rem;
}
.preview-banner a {
  display: inline-block;
  margin-left: 0.5rem;
}

/* --- Settings: intro texts, placeholder legend, template tools --- */
.settings-intro {
  margin-top: -0.5rem;
  color: var(--pico-muted-color, #6c757d);
}
.settings-tab-hint {
  color: var(--pico-muted-color, #6c757d);
  max-width: 50rem;
}
.placeholder-legend {
  margin-bottom: var(--pico-typography-spacing-vertical);
}
.placeholder-legend dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
}
.placeholder-legend dd {
  margin: 0;
}
.info-template-tools form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.info-template-tools button {
  align-self: flex-start;
  margin-top: 0.5rem;
}
.table-actions {
  white-space: nowrap;
}
.table-actions > * {
  margin: 0 0.25rem 0 0;
}
.form-hint {
  margin-bottom: 0.5rem;
}

/* Keep line breaks of free text entered by participants. */
.pre-line { white-space: pre-line; }