/* =========================================================================
   Strecke — Drückjagd Manager   |   styles
   Mobile-first. A calm forest palette with real depth. Phone + desktop.

   Design system (read me first):
   - COLOUR tokens live in :root. Hues are forest greens; we layer surfaces
     bg < surface < surface-2 < surface-3 to build depth.
   - SPACING uses an 8px-ish scale (--sp-1 … --sp-6) so gaps stay consistent.
   - ELEVATION uses --sh-1/2/3 shadows + a hairline top highlight on cards so
     panels feel raised, not just outlined.
   - MOTION is deliberately FAST (≤220ms): this is a field tool, snappy > showy.
   ========================================================================= */

:root {
  /* ---- surfaces (dark → light = further from / closer to the eye) ---- */
  --bg:        #12160d;   /* app background (deepest)          */
  --bg-2:      #161b0f;   /* background gradient foot          */
  --surface:   #1d2415;   /* cards / panels                    */
  --surface-2: #28311d;   /* raised elements / inputs          */
  --surface-3: #323d25;   /* hover / pressed raised            */
  --line:      #3a4630;   /* borders                           */
  --line-soft: #2c351f;   /* hairline dividers                 */

  /* ---- ink ---- */
  --text:   #edf2e6;      /* main text                         */
  --muted:  #a3b491;      /* secondary text                    */
  --faint:  #9aa888;      /* tertiary / placeholders (AA 5.4:1 on --surface-2) */

  /* ---- brand + semantic ---- */
  --accent:    #83b450;   /* hunting green accent              */
  --accent-l:  #98c862;   /* accent highlight (gradient top)   */
  --accent-d:  #5c8a32;   /* accent shade                      */
  --accent-ink:#11160a;   /* text on an accent fill            */
  --gold:      #dcb863;   /* Wildmarke / highlight             */
  --gold-l:    #ecca78;
  --danger:    #e06a54;   /* unsafe / error / wound            */
  --danger-l:  #ec8470;
  --ok:        #74c578;   /* success / kill / synced           */
  --amber:     #e6b045;   /* warning                           */
  --info:      #6fc0d6;   /* trichinella / syncing             */

  /* ---- stage progression ramp (early warm → late green) ----
     Drives the status / Nachsuche overview bars so left→right reads as clear
     forward progress, in the app's earthy palette (rust/brown → orange → gold →
     olive → green). Tune the whole ramp here; light-mode variants are below. */
  --stage-1:   #d8c49a;   /* earliest / raw — pale warm sand (lightest) */
  --stage-2:   #b1552a;   /* deep terracotta (dark — big step off sand) */
  --stage-3:   #ea9438;   /* bright orange                     */
  --stage-4:   #eccb4d;   /* warm yellow / gold                */
  --stage-5:   #8fbf55;   /* lime / olive green                */
  --stage-6:   #3f9f57;   /* latest / done — forest green (deep) */
  --stage-new: #d64e2b;   /* Nachsuche entry — clear red, needs triage */

  /* ---- spacing scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;

  /* ---- radii ---- */
  --r-sm: 9px; --r: 13px; --r-lg: 17px; --r-xl: 22px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 6px 16px rgba(0,0,0,.34);
  --sh-3: 0 16px 38px rgba(0,0,0,.46);
  --glow: 0 4px 16px rgba(108,160,60,.34);
  /* hairline top-light that makes a panel read as raised */
  --edge: inset 0 1px 0 rgba(255,255,255,.045);

  --topbar-h: 58px;
  --nav-h:    66px;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ---- LIGHT THEME (daylight / sun-readable) — overrides the tokens above ---- */
:root[data-theme="light"] {
  --bg: #e9ede1; --bg-2: #dde2d3;
  --surface: #ffffff; --surface-2: #f1f4ec; --surface-3: #e7ecdf;
  --line: #d4dbc8; --line-soft: #e6ebde;
  --text: #1a2315; --muted: #556547; --faint: #626f4b;  /* faint now AA 4.9:1 on light --surface-2 */
  --accent: #3f7a24; --accent-l: #58982f; --accent-d: #2f5e1a; --accent-ink: #ffffff;
  --gold: #876a0f; --gold-l: #a5841c;
  --danger: #b93d27; --danger-l: #d05c46;
  --ok: #2d8c41; --amber: #946809; --info: #24769f;
  /* stage ramp — darker/more-saturated so the swatches read on white cards;
     spaced in lightness + hue (tan → dark terracotta → orange → gold → olive → green) */
  --stage-1: #b3924f; --stage-2: #9c4620; --stage-3: #d67d18; --stage-4: #c2a41c;
  --stage-5: #6d9b2f; --stage-6: #2f8c43; --stage-new: #b23c18;
  --sh-1: 0 1px 2px rgba(20,30,12,.10);
  --sh-2: 0 6px 16px rgba(20,30,12,.12);
  --sh-3: 0 16px 38px rgba(20,30,12,.20);
  --glow: 0 4px 14px rgba(63,122,36,.22);
  --edge: inset 0 1px 0 rgba(255,255,255,.6);
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(120% 80% at 50% -10%, #f4f7ef 0%, rgba(244,247,239,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
:root[data-theme="light"] #topbar { background: rgba(255,255,255,.82); box-shadow: 0 1px 12px rgba(20,30,12,.06); }
:root[data-theme="light"] #bottomnav { background: rgba(255,255,255,.86); box-shadow: 0 -1px 12px rgba(20,30,12,.07); }
:root[data-theme="light"] .list > .list-item:hover,
:root[data-theme="light"] .list-item:hover { background: rgba(20,30,12,.035); }
:root[data-theme="light"] .list > .list-item:active { background: rgba(20,30,12,.06); }
:root[data-theme="light"] .backbtn:hover { background: rgba(63,122,36,.10); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #1b2212 0%, rgba(27,34,18,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;          /* iOS body size */
  line-height: 1.45;
  font-variant-numeric: tabular-nums;   /* aligned figures everywhere */
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(131,180,80,.35); color: #fff; }

/* tidy desktop scrollbars */
@media (min-width: 720px) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: var(--accent-d); background-clip: content-box; }
}

/* ---------- Top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(31,38,22,.92), rgba(27,33,19,.86));
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 2px 14px rgba(0,0,0,.30);
  z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--accent-l), var(--accent-d));
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: var(--sh-1), var(--edge);
}
.logo svg { width: 20px; height: 20px; color: var(--accent-ink); }
.title-block { min-width: 0; }
.app-title { font-weight: 800; font-size: 17px; line-height: 1.05; letter-spacing: .01em; }
.hunt-name {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: .04em; transition: background .14s, border-color .14s;
}
.lang-toggle:hover { background: var(--surface-3); border-color: var(--accent-d); }
.lang-toggle:active { transform: translateY(1px); }
.lang-toggle.icon-btn { padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.lang-toggle.icon-btn svg { width: 17px; height: 17px; display: block; }
/* role switcher — always shows the current mode AND flips it on tap. Neutral pill
   for Jäger, accent-green fill for Admin, so which mode you're in is obvious. */
.role-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .01em; transition: background .14s, border-color .14s, color .14s;
}
.role-toggle svg { width: 15px; height: 15px; }
.role-toggle:hover { border-color: var(--accent-d); }
.role-toggle:active { transform: translateY(1px); }
.role-toggle.admin {
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-d); box-shadow: var(--sh-1);
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  letter-spacing: .02em; border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.badge-offline { background: rgba(230,176,69,.12); color: var(--amber); border-color: rgba(230,176,69,.28); }
.badge-online  { background: rgba(116,197,120,.12); color: var(--ok); border-color: rgba(116,197,120,.30); }
.badge-syncing { background: rgba(111,192,214,.12); color: var(--info); border-color: rgba(111,192,214,.30); }
.badge-local   { background: rgba(163,180,145,.10); color: var(--muted); border-color: var(--line); }
.badge-local::before { box-shadow: none; opacity: .8; }

/* ---------- Main view ---------- */
#view {
  padding: 16px 14px;
  padding-top: calc(var(--topbar-h) + 16px);
  padding-bottom: calc(var(--nav-h) + 28px);
  max-width: 720px; margin: 0 auto;   /* tighter, app-like column on wide screens */
}
/* whole-view entrance — re-triggered by the router on every navigation */
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
#view.viewin { animation: viewIn .2s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Bottom nav ---------- */
#bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch; justify-content: space-around;
  background: linear-gradient(180deg, rgba(31,38,22,.90), rgba(24,30,17,.96));
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -3px 18px rgba(0,0,0,.34);
  z-index: 50;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600;
  padding-top: 8px; transition: color .15s;
}
.nav-item.active { color: var(--accent); }
.nav-item:active { opacity: .6; }
/* flat iOS-style tabs — every tab the same; the active one just tints accent */
.nav-ico { line-height: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-ico svg { width: 26px; height: 26px; display: block; }
.nav-lbl { font-size: 11px; letter-spacing: .01em; }
/* "N nicht abgesendet" counter — rides the tab that leads to the un-submitted
   entries, so a forgotten Absenden stays visible from every screen. Red on
   purpose: this is the one number that means "an animal is missing from the
   Strecke". `hidden` needs an explicit rule because .nav-badge is a flex box. */
.nav-badge {
  position: absolute; top: -5px; left: 50%; margin-left: 5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0;
  border-radius: 9px; border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.nav-badge[hidden] { display: none; }
:root[data-theme="light"] .nav-badge { border-color: #fff; }
/* On wide screens (tablet/laptop at the Blockhaus) keep the tab bar under the same
   720px content column instead of spreading the tabs across the whole viewport. */
@media (min-width: 760px) {
  #bottomnav {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: 720px;
    border-radius: 16px 16px 0 0;
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  }
}

/* iOS-style back chevron at the top of detail screens */
.backbtn {
  display: inline-flex; align-items: center; gap: 1px; margin: -2px 0 8px -7px;
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 4px 7px; border-radius: 9px;
  transition: background .14s, opacity .1s;
}
.backbtn:hover { background: rgba(131,180,80,.10); }
.backbtn:active { opacity: .6; }
.backbtn svg { width: 21px; height: 21px; margin-right: -1px; }

/* ---------- Generic building blocks ---------- */
h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 16px; }
h2 {
  font-size: 12px; margin: 24px 0 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
p  { line-height: 1.5; }
.muted { color: var(--muted); }
.center { text-align: center; }
b, strong { font-weight: 700; }

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px;
  box-shadow: var(--sh-1), var(--edge);
}
.card.tap { cursor: pointer; transition: border-color .15s, transform .08s, box-shadow .15s; }
.card.tap:hover { border-color: var(--accent-d); box-shadow: var(--sh-2), var(--edge); }
.card.tap:active { transform: scale(.992); }

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); border: none; border-radius: var(--r-sm);
  padding: 12px 17px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .12s, transform .06s, box-shadow .12s; line-height: 1.1;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); filter: brightness(.95); box-shadow: var(--sh-1); }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; }
.btn.secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--sh-1), var(--edge);
}
.btn.secondary:hover { background: var(--surface-3); border-color: var(--accent-d); filter: none; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-d); box-shadow: none; }
.btn.ghost:hover { background: rgba(131,180,80,.10); filter: none; }
.btn.danger { background: linear-gradient(180deg, var(--danger-l), var(--danger)); color: #2a0f0a; }
.btn.gold   { background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: #2a2208; }
.btn.lg { padding: 16px 22px; font-size: 16px; border-radius: var(--r); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }

/* ---------- form fields ---------- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
input, select, textarea {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; font-size: 16px;
  font-family: inherit; transition: border-color .14s, box-shadow .14s, background .14s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(131,180,80,.20);
  background: var(--surface-3);
}
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3b491' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text);
}
.chip.gold { background: rgba(220,184,99,.14); color: var(--gold); border-color: rgba(220,184,99,.36); }
.chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Komplett" cue — a freshly-complete animal on the Strecke */
.done-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(116,197,120,.16); color: var(--ok); border: 1px solid rgba(116,197,120,.42);
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em;
}
.done-badge svg { flex: 0 0 auto; }

/* selectable pill buttons (sex, age, species, station) */
.opt {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 14px; cursor: pointer; font-weight: 600;
  transition: background .13s, border-color .13s, color .13s, transform .06s, box-shadow .13s;
  box-shadow: var(--sh-1);
}
.opt:hover { border-color: var(--accent-d); background: var(--surface-3); }
.opt:active { transform: translateY(1px); }
.opt.sel {
  background: linear-gradient(180deg, var(--accent-l), var(--accent)); color: var(--accent-ink);
  border-color: var(--accent); box-shadow: var(--sh-1), 0 2px 10px rgba(108,160,60,.28);
}
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
/* a vertical single-select list (e.g. the Nachsuche-Status selector) */
.opt-col { display: flex; flex-direction: column; gap: 8px; }
.opt-col .opt { width: 100%; text-align: center; }

/* ---------- iOS-style segmented control (Geschlecht, Verbleib) ----------
   Connected segments in a recessed track; the selected one is a raised,
   accent-tinted thumb. Same data-model as the .opt pills, different look. */
.segctl {
  display: flex; gap: 3px; padding: 3px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.segctl .seg-opt {
  flex: 1 1 0; min-width: 0; appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  padding: 9px 8px; border-radius: calc(var(--r-sm) - 3px); min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .16s, color .16s, box-shadow .16s;
}
.segctl .seg-opt:hover { color: var(--text); }
.segctl .seg-opt:active { transform: translateY(1px); }
.segctl .seg-opt.sel {
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); box-shadow: var(--sh-1), 0 2px 8px rgba(108,160,60,.28);
}
.segctl .seg-opt .swatch { flex: 0 0 auto; }

/* ---------- iOS-style toggle switch (ja/nein binaries) ---------- */
.switch-row { padding: 4px 0; }
.switch-row .lbl { font-size: 15px; font-weight: 600; color: var(--text); }
.switch {
  position: relative; flex: 0 0 auto; -webkit-appearance: none; appearance: none;
  width: 50px; height: 30px; padding: 0; margin: 0; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line); cursor: pointer;
  transition: background .18s, border-color .18s;
}
.switch .switch-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #f4f7ef; box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform .18s cubic-bezier(.4,.1,.3,1);
}
.switch[aria-checked="true"] {
  background: linear-gradient(180deg, var(--accent-l), var(--accent)); border-color: var(--accent-d);
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(131,180,80,.28); }
@media (prefers-reduced-motion: reduce) { .switch .switch-knob { transition: none; } }

/* dashboard subtitle under the H1 (hunt place + join code) — replaces the
   old standalone date card; the date already lives in the top bar. */
.page-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 0 18px; color: var(--muted); font-size: 14px;
}

/* ---------- Anschuss radial "Skizze" map ---------- */
.amap-modes { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.amap-svg {
  width: 100%; max-width: 330px; display: block; margin: 0 auto; aspect-ratio: 1;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  touch-action: none;
}
.amap.ro .amap-svg { max-width: 260px; }
.amap-ring    { fill: none; stroke: var(--line); stroke-width: 1; }
.amap-axis    { stroke: var(--line-soft); stroke-width: 1; }
.amap-ringlbl { fill: var(--faint); font-size: 11px; font-family: inherit; }
.amap-blick   { stroke: var(--muted); stroke-width: 2; }
.amap-blicklbl{ fill: var(--muted); font-size: 11px; font-weight: 600; font-family: inherit; }
.amap-stand rect { fill: var(--accent); stroke: none; }
.amap-stand line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.amap-anschuss line { stroke: #f08a24; stroke-width: 3.4; stroke-linecap: round; }
.amap-flucht  { stroke: var(--danger); stroke-width: 2.4; }
.amap-arrow-flucht { fill: var(--danger); }   /* arrowhead matches the Flucht line */
.amap-arrow-blick  { fill: var(--muted); }    /* arrowhead matches the Blickrichtung line */
.amap-landmark-ro { margin-top: 10px; font-size: 14px; color: var(--text); }

/* ---------- Nachsuche priority badges ---------- */
.prio { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.prio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prio-hoch    { background: rgba(224,106,84,.16);  color: var(--danger); }
.prio-mittel  { background: rgba(230,176,69,.16);  color: var(--amber); }
.prio-niedrig { background: var(--surface-2); color: var(--muted); }

/* photo of the Anschuss (orange-tape marker) */
.anschuss-photo { width: 100%; max-width: 340px; border-radius: var(--r); border: 1px solid var(--line); display: block; margin: 4px auto 0; }
.anschuss-photo.thumb { max-width: 120px; }

/* status badges along the chain — ONE calm neutral pill; the stage is shown by
   a small coloured dot, not a different fill each time (keeps the rainbow down) */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, #9aa39a); flex: 0 0 auto; }
.st-neu       { --dot: #9aa39a; }
.st-erlegt    { --dot: var(--amber); }
.st-gewogen   { --dot: #a7d36b; }
.st-trichine  { --dot: var(--info); }
.st-markiert  { --dot: var(--gold); }
.st-strecke   { --dot: var(--ok); }
.st-abgegeben { --dot: #c3aae0; }

/* iOS-style grouped inset list: ONE rounded container, rows split by a hairline
   that insets to align under the text (not a stack of separate floating cards) */
.list {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 55%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-1), var(--edge); margin-bottom: 12px;
}

/* list item */
.list-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 9px;
  cursor: pointer; box-shadow: var(--sh-1), var(--edge);
  transition: border-color .14s, transform .07s, box-shadow .14s, background .12s;
}
.list-item:hover { border-color: var(--accent-d); box-shadow: var(--sh-2), var(--edge); }
.list-item:active { transform: scale(.994); }
/* inside a .list, rows go flat — no per-row border/radius/shadow, just a hairline */
.list > .list-item {
  border: none; border-radius: 0; margin: 0; box-shadow: none; background: transparent;
  padding: 10px 14px; transition: background .12s;
}
.list > .list-item:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; right: 0; bottom: 0; height: 1px; background: var(--line-soft);
}
.list > .list-item:hover { border: none; box-shadow: none; background: rgba(255,255,255,.035); }
.list > .list-item:active { transform: none; background: rgba(255,255,255,.06); }
.li-main { min-width: 0; flex: 1; }
.li-title { font-weight: 700; }
.li-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-chev { color: var(--faint); display: flex; }
.li-chev svg { width: 18px; height: 18px; }

/* big scan area — a viewfinder "stage" with an animated scan beam */
.scan-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(130% 120% at 50% 38%, #12180d, #090c06);
  border: 1px solid var(--line); box-shadow: var(--edge), var(--sh-1);
}
/* On a phone the rear camera hands us a PORTRAIT stream (e.g. 720x1280). Shown
   with `object-fit: cover` inside a 4:3 landscape box, most of that frame is
   cropped away top and bottom — so the user sees only a narrow band and has to
   fight to get the tag into it. A SQUARE stage on narrow screens keeps far more
   of the frame visible (and suits a square QR target). v69. */
@media (max-width: 520px) { .scan-stage { aspect-ratio: 1 / 1; } }
/* html5-qrcode writes `position: relative` INLINE onto #reader, which beats a
   stylesheet `position: absolute` — so `inset: 0` stops stretching it and the
   element grows to the video's NATURAL height (e.g. 460px inside a 259px stage).
   `overflow: hidden` then cuts the library's centred reticle in half: that was
   the "scan box cut off" bug, not the qrbox size. Pin the box explicitly so it
   matches the visible stage whichever position mode the library forces. */
#reader { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: hidden; }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* Belt and braces: the library's own shaded overlay is laid out by geometry we
   don't control, so hide it and draw the viewfinder ourselves (.vf-box below),
   inside our own box, where it can never be clipped. */
#reader #qr-shaded-region, #reader img[alt="Info icon"] { display: none !important; }
.scan-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--accent); pointer-events: none;
}
/* While the camera runs, keep OUR viewfinder square on screen but drop the idle
   hint text, so the user still has something to aim with. */
.scan-stage.live .scan-hint { display: none; }
.scan-stage.live .vf { opacity: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)); }
.vf-box { position: relative; width: 54%; max-width: 220px; aspect-ratio: 1; }
.vf { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.vf-beam {
  position: absolute; left: 13%; right: 13%; top: 50%; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 9px 1px var(--accent);
  animation: vfscan 2.3s ease-in-out infinite;
}
@keyframes vfscan {
  0%, 100% { transform: translateY(-34px); opacity: .35; }
  50%      { transform: translateY(34px);  opacity: 1; }
}
.scan-hint { color: var(--muted); font-size: 13px; margin: 0; text-align: center; padding: 0 24px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 12px; text-align: center;
  box-shadow: var(--sh-1), var(--edge);
}
.stat .num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.stat .lbl { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.stat.hero .num { color: var(--accent); }
/* dashboard hero total (replaces the old stat tiles) */
.stat-total { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding: 44px 18px; }
.empty .big {
  font-size: 32px; color: var(--muted); margin: 0 auto 14px; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--sh-1), var(--edge);
}
.empty .big svg { width: 31px; height: 31px; }
.empty p { margin: 0 0 16px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: var(--r); font-weight: 600; z-index: 100;
  box-shadow: var(--sh-3); max-width: 90vw; text-align: center;
  animation: toastIn .26s cubic-bezier(.22,.61,.36,1) both; transition: opacity .2s;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-ico { display: flex; flex: 0 0 auto; }
.toast.ok    { border-color: rgba(116,197,120,.55); }
.toast.ok .toast-ico  { color: var(--ok); }
.toast.err   { border-color: rgba(224,106,84,.6); }
.toast.err .toast-ico { color: var(--danger); }
.toast.with-action { gap: 16px; padding-right: 12px; }
.toast-undo { background: none; border: none; color: var(--accent-l); font-weight: 800; cursor: pointer; font-size: 13px; padding: 4px 6px; letter-spacing: .02em; }
.toast-undo:active { opacity: .6; }

/* success flash — the "it worked" moment after submitting an animal */
.success-ov {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,6,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: ovIn .14s ease both;
}
.success-ov.out { animation: ovOut .2s ease both; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovOut { to { opacity: 0; } }
.success-card { display: flex; flex-direction: column; align-items: center; gap: 13px; color: #f0f4ea; font-weight: 700; font-size: 16px; }
.success-check {
  width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent-l), var(--accent-d)); color: #fff;
  box-shadow: var(--glow), 0 8px 24px rgba(0,0,0,.45);
  animation: checkPop .42s cubic-bezier(.2,.8,.3,1.4) both;
}
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .success-check { animation: none; } }

.divider { height: 1px; background: var(--line-soft); margin: 16px 0; border: none; }

/* tag print sheet — small QR codes, many per page */
.tag-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.tag-cell { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 8px; text-align: center; background: #fff; color: #111; }
.tag-cell img { display: block; width: 100%; max-width: 100px; height: auto; margin: 0 auto; image-rendering: pixelated; }
.tag-cell .code { font-family: ui-monospace, monospace; font-size: 11px; margin-top: 5px; font-weight: 700; }

/* Hunt-invite sheet (#/invite) — pinned up at the Blockhaus, so it is drawn on
   WHITE with black text at all times (like .tag-cell), never in the dark theme:
   what you see on screen is exactly what comes out of the printer. */
.invite-sheet {
  background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 20px 20px; text-align: center; box-shadow: var(--sh-1);
}
.inv-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #667; }
.inv-name { font-size: 27px; font-weight: 800; line-height: 1.15; margin: 8px 0 4px; }
.inv-meta { font-size: 14px; color: #556; }
.inv-qr { margin: 20px auto 14px; width: 216px; max-width: 74%; }
.inv-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.inv-how { font-size: 14px; font-weight: 600; max-width: 30ch; margin: 0 auto; }
.inv-code-lbl { font-size: 12px; color: #667; margin-top: 16px; }
.inv-code {
  font-family: ui-monospace, monospace; font-size: 26px; font-weight: 700; letter-spacing: .12em;
  margin-top: 3px; word-break: break-all;
}
.inv-foot { font-size: 11px; color: #889; margin-top: 18px; }

@media print {
  #topbar, #bottomnav, .no-print { display: none !important; }
  /* the invite is the whole page when printed: no border, centred, colours kept */
  .invite-sheet {
    border: 0; box-shadow: none; break-inside: avoid; padding-top: 8vh;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .inv-qr { width: 260px; max-width: 60%; }
  body { background: #fff; }
  #view { padding: 0; max-width: none; }
  /* make sure the black QR + dashed cut-lines actually print */
  .tag-sheet, .tag-cell, .tag-cell img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tag-sheet { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
  .tag-cell { border: 1px solid #999; break-inside: avoid; }
  .tag-cell img { max-width: 92px; }
  /* Anschussprotokoll: show the print header, keep colours, avoid ugly breaks */
  .print-only { display: block !important; }
  h2 { break-after: avoid; }
  .entry-head, .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .anschuss-photo, .amap-svg, #as_roShot svg, .status, .prio, .chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .anschuss-photo { max-width: 320px; }
}

/* desktop niceties */
@media (min-width: 720px) {
  .nav-lbl { font-size: 12px; }
  #view { padding-left: 24px; padding-right: 24px; }
}

/* ---------- group-colour swatches + colour pills ---------- */
.swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.30); vertical-align: middle;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
.opt.color { display: inline-flex; align-items: center; gap: 7px; }
.opt.color.sel .swatch { border-color: rgba(0,0,0,.35); }

/* ---------- entry detail: identity header ---------- */
.entry-head { padding: 15px 16px; }
.eh-top { display: flex; align-items: center; gap: 13px; }
.eh-emoji {
  font-size: 29px; width: 52px; height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px;
}
.eh-emoji svg { width: 24px; height: 24px; color: var(--muted); }
.eh-id { flex: 1; min-width: 0; }
.eh-title { font-size: 18px; font-weight: 800; line-height: 1.15; }
.eh-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.eh-status { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.eh-tag {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
}
.eh-tag .mono { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .03em; color: var(--text); }

/* edit-form: grouped inset sections + a submit that sticks above the tab bar */
.form-sec { padding: 14px 16px; }
.form-sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
/* The Absenden bar STICKS in the thumb zone just above the tab bar for as long as
   the form is scrolled, then settles into its natural place at the end of the
   form. Absenden is load-bearing (only a submitted animal reaches the Strecke),
   so it must never be scrolled out of reach — and it is the only primary-styled
   action on the form. Sticky, not fixed: it stays in the document flow, so the
   Verlauf timeline below it is still reachable. */
.submit-bar {
  position: sticky; bottom: calc(var(--nav-h) + 10px); z-index: 35;
  margin: 16px -4px 0; padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.submit-bar .btn { margin: 0; }

/* ---------- read-only field rows (View detail) ---------- */
.ro-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.ro-row:last-of-type { border-bottom: none; }
.ro-k { color: var(--muted); font-size: 14px; }
.ro-v { font-weight: 700; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ---------- icon helpers (search field, More menu tiles) ---------- */
.search-wrap { position: relative; }
.search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-wrap input { padding-left: 40px; }
.menu-card { padding: 14px 16px; }
.menu-ico {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--accent);
}
.menu-ico svg { width: 22px; height: 22px; }

/* ---------- Trefferlage: shot-placement map ---------- */
.shotmap {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%),
    var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; overflow: hidden; box-shadow: var(--edge);
}
.shotmap svg {
  width: 100%; height: auto; display: block; touch-action: none; /* let us drag without scrolling */
}
.shotmap .sil path { transition: none; }
.shotmap .dots circle {
  fill: var(--danger); stroke: #fff; stroke-width: 2; cursor: grab;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.shotmap .dots .dot:active circle { cursor: grabbing; }
.shotmap.ro .dots circle { cursor: default; }
.shotmap .dots text {
  fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none;
  font-family: system-ui, sans-serif;
}
/* uploaded-image variant: a light panel (so a white-background drawing looks
   clean) with the picture and the dot overlay stacked exactly on top */
.shotmap.has-img {
  position: relative; aspect-ratio: 440 / 300; padding: 0;
  background: #fff;   /* light panel so black-on-transparent silhouettes show */
  border: 1px solid var(--line);   /* separates the white panel from white cards in light mode */
}
.shotmap.has-img .sil-img,
.shotmap.has-img .dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(.8); transform-origin: 50% 50%;  /* 20% smaller; image + dots scale together so dots stay aligned */
}
.shotmap.has-img .sil-img { object-fit: contain; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Anschuss pose-sheet: a 2x3 grid per species (top half = boar, bottom half = deer
   via object-position). ~3:2 box keeps the shot dot round (was a 6:1 row → oval). */
.shotmap.has-img.wide-sil { aspect-ratio: 1086 / 724; }
.shotmap.has-img.wide-sil .sil-img, .shotmap.has-img.wide-sil .dots { transform: none; }

/* Settings → Trefferlage-Bilder: per-species image picker */
.sil-thumb {
  width: 58px; height: 40px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.sil-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sil-thumb .muted { font-size: 10px; }

/* ---------- admin Strecke: inline edit + delete + confirm ---------- */
.btn.sm { padding: 9px 11px; font-size: 14px; line-height: 1; border-radius: var(--r-sm); }
/* Comfortable ~40px hit area for the small icon actions (edit/delete on list rows) —
   easier to hit with cold or gloved hands in the field, without bloating the visuals. */
.btn.icon { padding: 9px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn.icon svg { width: 17px; height: 17px; }
.opt.sm { padding: 8px 10px; font-size: 13px; }
.pill-row.sm { gap: 6px; }
/* the reset button uses the [hidden] attribute to toggle; .btn's display:flex
   would otherwise override the UA [hidden]{display:none}, so force it here */
.strk-reset[hidden] { display: none; }
.strk-row { padding: 12px 13px; }
/* complete + on the Strecke: an obvious green left bar + tint */
.strk-row.complete {
  border-color: rgba(116,197,120,.40);
  box-shadow: inset 4px 0 0 0 var(--ok), var(--sh-1), var(--edge);
  background:
    linear-gradient(180deg, rgba(116,197,120,.055), rgba(116,197,120,0) 42%),
    var(--surface);
}
.strk-row.complete .li-sub { color: var(--muted); }
.strk-row.staged-del { opacity: .55; border-color: var(--danger); }
.strk-row.staged-del .li-title { text-decoration: line-through; }
.strk-editor { margin-top: 4px; }

/* ---- swipe-to-reveal row actions ----
   The head and the action tray sit side by side in a flex slider that is clipped
   by .strk-swipe, so the tray is genuinely off-frame until you drag — no opaque
   overlay is needed and the row's own .complete tint / left bar (painted on
   .strk-row, outside the clip) stay visible throughout.
   `touch-action: pan-y` hands VERTICAL scrolling back to the browser, so dragging
   down the list can never be swallowed by a row (see wireSwipeRow in app.js). */
.strk-swipe { overflow: hidden; touch-action: pan-y; margin: -2px 0; padding: 2px 0; }
.strk-slider {
  display: flex; align-items: stretch;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.strk-slider > .strk-head { flex: 0 0 100%; }
/* Compact icon-over-label columns, so the tray takes under half the row and the
   drag needed to open it stays short. */
.strk-actions { flex: 0 0 auto; display: flex; align-items: stretch; gap: 6px; padding-left: 10px; }
.sw-act {
  flex-direction: column; gap: 4px; width: 74px; padding: 8px 4px;
  font-size: 11px; font-weight: 700; line-height: 1.1; white-space: nowrap; box-shadow: var(--sh-1);
}
.sw-act svg { width: 18px; height: 18px; }
.sw-del { background: linear-gradient(180deg, var(--danger-l), var(--danger)); color: #2a0f0a; }
/* Dim the row text once the tray is out, so the half-scrolled-off title reads as
   "this row is parked open", not as broken layout. */
.strk-openrow { transition: opacity .18s; }
.strk-row.sw-open .strk-openrow { opacity: .38; }
/* The inline pencil/trash stay VISIBLE on touch too (user's call): a button you can
   see beats a gesture you have to know about, especially for anyone handed the app
   on hunt day. The swipe tray is then a shortcut on top, not the only way in. */
/* With a mouse the tray is redundant, so don't let a stray drag reveal it. */
@media (hover: hover) and (pointer: fine) {
  .strk-actions { display: none; }
}
.strk-row .btn.sm.sel { background: linear-gradient(180deg, var(--accent-l), var(--accent)); color: var(--accent-ink); border-color: var(--accent); }
/* grouped inset: flatten the rows inside the .list container, hairline between */
.strk-list > .strk-row {
  border: none; border-radius: 0; margin: 0; box-shadow: none; background: transparent; padding: 11px 13px;
}
.strk-list > .strk-row:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.strk-list > .strk-row.complete {
  box-shadow: inset 3px 0 0 0 var(--ok);
  background: linear-gradient(90deg, rgba(116,197,120,.06), rgba(116,197,120,0) 28%);
}
.strk-list > .strk-row.staged-del { opacity: .55; background: transparent; }
/* a closed (erledigt) Nachsuche case reads calmer than the open ones */
.strk-list > .strk-row.as-done { opacity: .72; }
.strk-row.as-done .li-title { color: var(--muted); }
/* Nachsuche assignment / sign-off chips on the admin list rows */
.as-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.as-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.as-chip.as-assigned  { color: var(--accent); border-color: var(--accent-d); background: rgba(131,180,80,.12); }
.as-chip.as-unassigned{ color: var(--amber);  border-color: rgba(230,176,69,.42); background: rgba(230,176,69,.12); }
.as-chip.as-signoff   { color: var(--muted);  background: var(--surface-2); }
/* an urgent (high-priority) open search gets a red accent bar so it stands out */
.strk-list > .strk-row.as-hoch {
  box-shadow: inset 3px 0 0 0 var(--danger);
  background: linear-gradient(90deg, rgba(214,58,58,.07), rgba(214,58,58,0) 30%);
}
/* print-only blocks (e.g. the Anschussprotokoll header) — hidden on screen */
.print-only { display: none; }
.print-head { margin-bottom: 12px; }
.print-title { font-size: 22px; font-weight: 800; }

/* central-log search / filter / sort controls */
.strk-controls { padding: 13px 13px; position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 30; }
.strk-controls select { flex: 1 1 130px; width: auto; min-width: 116px; padding: 10px 30px 10px 11px; font-size: 14px; }
.strk-controls input[type=search] { width: 100%; }

.update-bar {
  position: fixed; left: 0; right: 0; bottom: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-top: 1px solid var(--line);
  z-index: 40; box-shadow: 0 -6px 20px rgba(0,0,0,.4);
  animation: barIn .22s ease both;
}
@keyframes barIn { from { transform: translateY(100%); } to { transform: none; } }
/* the `hidden` attribute alone can't hide a flex element — make it explicit */
.update-bar[hidden] { display: none; }

.modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200;
  animation: ovIn .16s ease both;
}
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; max-width: 400px; width: 100%; box-shadow: var(--sh-3);
  animation: modalIn .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 18px; margin: 0 0 8px; }

/* ---------- provenance timeline (animal detail) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: 13px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.tl-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--surface-2); border: 1px solid var(--line); line-height: 1;
  box-shadow: var(--sh-1), var(--edge);
}
.tl-line { flex: 1; width: 2px; background: var(--line); margin: 3px 0; min-height: 10px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { flex: 1; min-width: 0; padding: 6px 0 20px; }
.tl-item:last-child .tl-body { padding-bottom: 2px; }
.tl-title { font-weight: 700; font-size: 14px; }
.tl-time { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tl-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tl-chips .chip { font-size: 11px; padding: 3px 9px; }
.tl-item.now .tl-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(131,180,80,.22), var(--sh-1); }
.tl-item.now .tl-title { color: var(--accent); }

/* dashboard chain-of-custody status bar (segmented) + legend */
.statusbar { display: flex; gap: 2px; height: 14px; }
.statusbar .seg { min-width: 5px; border-radius: 3px; transition: flex .3s ease; }
.status-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.lg-item { display: inline-flex; align-items: center; gap: 7px; }
.lg-item b { color: var(--text); font-weight: 700; }
.lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
/* Stage colours = the early→late ramp (see the --stage-* tokens), so the overview
   bars show clear forward progress in the brand palette. Animal chain uses the 6
   below (neu→…→strecke); the Nachsuche bar uses the dedicated .seg-as* ramp. */
.seg-neu       { background: var(--stage-1); }
.seg-erlegt    { background: var(--stage-2); }
.seg-gewogen   { background: var(--stage-3); }
.seg-trichine  { background: var(--stage-4); }
.seg-markiert  { background: var(--stage-5); }
.seg-strecke   { background: var(--stage-6); }
/* Nachsuche stages: eingereicht → freigegeben → in_arbeit → erledigt, an even
   red → orange → gold → green ramp (early = urgent, right = done). */
.seg-as1 { background: var(--stage-new); }
.seg-as2 { background: var(--stage-3); }
.seg-as3 { background: var(--stage-4); }
.seg-as4 { background: var(--stage-6); }

/* dashboard "by species" rows are tappable -> open the filtered central log */
.species-row { padding: 12px 4px; cursor: pointer; border-bottom: 1px solid var(--line-soft); transition: padding-left .14s; }
.species-row:last-child { border-bottom: none; }
.species-row:hover { padding-left: 8px; }
.species-row:hover b { color: var(--accent); }
.species-row:active { opacity: .65; }
/* skeleton shimmer for loading states */
.skel {
  position: relative; overflow: hidden; border-radius: var(--r-sm);
  background: var(--surface-2); color: transparent;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- drafts (not-yet-submitted entries) --------------------------------- */
/* Amber = "attention, not done". Warm literals so it reads the same in both themes. */
.draft-banner {
  border: 1px solid rgba(224, 168, 62, .40);
  border-left: 4px solid #e0a83e;
  background: rgba(224, 168, 62, .08);
}
.draft-banner .draft-chip {
  background: #e0a83e; color: #2a1e05; font-weight: 700;
}
/* The "must hit Absenden" note under the entry form. */
.draft-note {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(224, 168, 62, .40);
  border-left: 4px solid #e0a83e;
  background: rgba(224, 168, 62, .10);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}
.draft-note b { color: #e0a83e; }