/*
 * Roxzone components CSS — lifted from claude.ai/design export `theme.css`.
 *
 * Loaded AFTER `web/dist/app.css` (the Tailwind build) so it can override
 * resets and supply the `rx-*` semantic classes the templ files reference.
 *
 * Token values are duplicated here as `--bg`/`--ink`/`--accent`/... so the
 * design's rx-* selectors keep working. The same values are also exposed
 * to Tailwind as `--color-roxzone-*` in `app.css`'s @theme block. Keep the
 * two in sync (see comment at the top of app.css).
 *
 * Light theme + design-tool density selectors were dropped from the export.
 * Re-add when light mode lands (deferred). The photo-slider selectors
 * (rx-slide*) were re-added for the cinematic landing hero.
 */

:root {
  --bg:        #0a0a0a;
  --bg-2:      #131313;
  --bg-3:      #1c1c1c;
  --line:      #2a2a2a;
  --line-2:    #3a3a3a;
  --ink:       #f5f3ee;
  --ink-2:     #c8c5be;
  --ink-3:     #8a877f;
  --ink-4:     #5a5852;
  --accent:    #fab413;
  --accent-ink:#0a0a0a;
  --ok:        #7ad15a;
  --warn:      #ffb800;
  --danger:    #ff3b3b;
  --radius:    14px;
  --radius-sm: 8px;
  --pad:       16px;
  --font-display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;
  --font-grotesk: 'Space Grotesk', system-ui, sans-serif;
  --font-jbmono: 'JetBrains Mono', ui-monospace, monospace;
}

.rx-screen {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-grotesk);
  width: 100%;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.005em;
}
.rx-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Topbar */
.rx-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink:0;
}
.rx-topbar .rx-logo { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em; }
.rx-topbar .rx-logo .rx-slash { color: var(--accent); }

/* Wordmark */
.rx-wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  display:inline-flex; align-items:baseline;
}
.rx-wordmark .rx-zero {
  display:inline-block;
  position: relative;
  color: var(--accent);
}
.rx-wordmark .rx-zero::after {
  content:""; position:absolute; left: 50%; top: 50%;
  width: 70%; height: 2px; transform: translate(-50%, -50%) rotate(-22deg);
  background: var(--accent);
}

/* Bottom tab bar */
.rx-tabbar {
  display:grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-shrink:0;
  padding: 6px 0 8px;
}
.rx-tab {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding: 6px 4px;
  color: var(--ink-3);
  font-size: 10px;
  font-family: var(--font-jbmono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center; /* two-line labels (PARTNER FINDEN) stay centered */
  position: relative; /* anchors .rx-tab-badge */
}
.rx-tab-badge {
  /* Exactly centered above the tab (beta feedback 2026-07-21 Punkt 1) —
     was offset 16px right of center. Occupies the dot slot (y 0..15,
     label starts at 15) so it never touches the label text; the dot
     underneath is hidden via :has below (feedback 2026-07-22 Punkt 1). */
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.rx-tab.is-active { color: var(--ink); }
.rx-tab.is-active .rx-tab-dot { background: var(--accent); width: 18px; height: 2px; border-radius: 0; }
.rx-tab-dot { width:6px; height:6px; border-radius: 50%; background: var(--ink-4); }
/* The badge replaces the dot instead of sitting on top of it. Width/height
   pin the hidden dot to its 6px inactive footprint: .rx-tab.is-active
   shrinks the dot to a 2px underline, which pulled the label 4px up under
   the 15px badge (feedback 2026-07-22 round 5 Punkt 3 — badge sat on the
   active tab's text). Equal specificity, so source order lets this win. */
.rx-tab:has(.rx-tab-badge) .rx-tab-dot { visibility: hidden; width: 6px; height: 6px; }

/* Buttons */
.rx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 15px;
  cursor:pointer;
  letter-spacing: -0.005em;
  text-decoration:none;
  white-space: nowrap;
}
.rx-btn-primary { background: var(--accent); color: var(--accent-ink); }
.rx-btn-secondary { background: var(--bg-3); color: var(--ink); border: 1px solid var(--line); }
.rx-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.rx-btn-block { width: 100%; }
.rx-btn-sm { padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.rx-btn-xs { padding: 6px 10px; font-size: 11px; border-radius: 8px; font-family: var(--font-jbmono); letter-spacing: 0.04em; text-transform: uppercase; }

/* Pills / chips */
.rx-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-jbmono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg-2);
}
.rx-pill-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rx-pill-outline { background: transparent; }
.rx-pill-ok { color: var(--ok); border-color: rgba(122, 209, 90, 0.4); }
.rx-pill-warn { color: var(--warn); border-color: rgba(255, 184, 0, 0.4); }

/* Card */
.rx-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.rx-card-flat { background: transparent; border-bottom: 1px solid var(--line); border-radius:0; padding: 14px 16px; }

/* Flash banner tints for /settings and similar surfaces. The base shape
   is rx-card; these classes tint border + background per status. */
.settings-flash-ok {
  border-color: var(--ok);
  background: rgba(122, 209, 90, 0.08);
  color: var(--ok);
  font-size: 13px;
}
.settings-flash-danger {
  border-color: var(--danger);
  background: rgba(255, 59, 59, 0.08);
  color: var(--danger);
  font-size: 13px;
}

/* Lane stripes */
.rx-stripes {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 30px,
    rgba(255,255,255,0.04) 30px 31px
  );
}
.rx-stripes-accent {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 8px,
    transparent 8px 16px
  );
}

/* Input */
.rx-input {
  width: 100%;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-grotesk);
  font-size: 15px;
  outline: none;
}
.rx-input:focus { border-color: var(--accent); }
.rx-label {
  font-family: var(--font-jbmono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display:block;
  margin-bottom: 6px;
}

/* Stronger section header for grouped form fields */
.rx-label-lg {
  font-family: var(--font-jbmono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display:block;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  line-height: 1;
}

/* Mono num */
.rx-mono { font-family: var(--font-jbmono); font-variant-numeric: tabular-nums; }
.rx-num-xl { font-family: var(--font-jbmono); font-weight: 700; font-size: 36px; letter-spacing: -0.02em; line-height: 1; }
.rx-num-lg { font-family: var(--font-jbmono); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1; }

/* Section header (mono caps) */
.rx-eyebrow {
  font-family: var(--font-jbmono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rx-h1 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}
.rx-h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}
.rx-h3 {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
}

/* Avatars */
.rx-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--bg-3);
  color: var(--ink);
  font-family: var(--font-jbmono);
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex-shrink:0;
}

/* Lane number badge */
.rx-lane {
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-jbmono);
  font-weight: 800;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  letter-spacing: 0.05em;
}

/* Big stat row */
.rx-stat-row {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 12px;
}

/* Skel cell */
.rx-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ============================================================
   Background photo slider (crossfade)
   Lifted from the design export's theme.css (the photo-slider block
   originally dropped in PR 1 — see header comment), adapted for the
   vanilla hero-slider.js port: the crossfade opacity lives on
   .rx-slide/.is-active instead of React inline styles, and each slide
   wraps an <img> (object-fit) instead of a background-image so the
   templ markup needs no dynamic style attribute.
   ============================================================ */
.rx-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Crossfade: opacity eases over 1700ms as slides swap. */
  transition: opacity 1700ms ease-in-out;
  will-change: opacity;
}
.rx-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rx-slide.is-active {
  opacity: 1;
}

/* Global page background (WP14, beta feedback 18.07): every non-hero
   page carries the arena photo, fixed, under a heavy scrim so text +
   cards keep their contrast. Hero pages (.rx-hero-bleed) render their
   own slider instead.

   Stacking: html carries its own --bg background, so the body's opaque
   background would paint OVER a negative-z child (negative z-index
   descendants sit between the canvas and in-flow block backgrounds in
   the root stacking context). The :has() rule clears the body's
   background on pages that render the layer so the photo shows through;
   the html background stays as the paint-first fallback. */
body:has(> .rx-page-bg) { background: transparent; }
.rx-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.82), rgba(10, 10, 10, 0.9)),
    url("/static/img/hero/arena.webp");
  background-size: cover;
  background-position: center;
}

/* Cinematic full-bleed landing (HomeAnon): Layout sets .rx-hero-bleed on
   <body> via LayoutProps.FullBleed. The topbar then floats transparent
   over the photo hero (design mobile variant A overlays logo + log-in on
   the imagery) and its ghost button picks up the on-photo treatment. */
body.rx-hero-bleed .rx-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: none;
}
body.rx-hero-bleed .rx-topbar .rx-btn-ghost {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  background: rgba(255,255,255,0.05);
}

/* WP3 (Jonathan item 8c): the hero photo is a FIXED full-viewport
   background; the eyebrow/headline/ticks live in a relative content layer
   that fills the first viewport, and the CTAs/top-events (.rx-over-hero)
   plus the footer scroll up over the fixed imagery. .rx-hero-root is the
   data-hero-slider root — relative so the reduced-motion absolute fallback
   below has a containing block; the fixed bg ignores it and pins to the
   viewport. */
.rx-hero-root { position: relative; }
.rx-hero-bg {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
.rx-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,0.6) 0%, rgba(8,8,8,0.05) 30%, rgba(8,8,8,0.2) 55%, rgba(8,8,8,0.9) 100%);
}
.rx-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Background photo shows through the top ~22% of the viewport, then the
     headline/subline/ticks begin. Beta feedback 2026-07-21 Punkt 1 asked
     for the content to start deutlich higher than the earlier 40vh. */
  padding: 22vh 16px 28px;
  padding: 22dvh 16px 28px;
}
.rx-over-hero {
  position: relative;
  z-index: 1;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(2px);
}
body.rx-hero-bleed .rx-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  /* The slider doesn't auto-rotate under reduced motion; degrade the fixed
     background to absolute so it scrolls with the page (no pinned-photo
     parallax) — it attaches to .rx-hero-root and overlaps .rx-hero-content
     for the first viewport. */
  .rx-hero-bg { position: absolute; }
}

/* Divider with stripes */
.rx-bar {
  height: 6px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 6px,
    transparent 6px 12px
  );
}

/* Hover-ish for clickable */
.rx-clickable { cursor: pointer; transition: transform 0.1s ease, border-color 0.1s ease; }
.rx-clickable:hover { border-color: var(--line-2); }
.rx-clickable:active { transform: scale(0.99); }

/* List rows */
.rx-row {
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* WP7: stepwise partner-search lock. matches-form.js adds .is-locked to a
   step until the prior step is answered (event → ticket → gender →
   divisions). Pointer-events: none blocks interaction; the dimming signals
   "answer the step above first". No-JS users never get .is-locked. */
.rx-form-step.is-locked {
  opacity: .35;
  pointer-events: none;
}

/* Form pickers (segmented) */
.rx-seg {
  display:flex;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.rx-seg button,
.rx-seg label.rx-seg-option {
  flex:1;
  background: transparent;
  color: var(--ink-2);
  border: none;
  font-family: var(--font-jbmono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 6px;
  border-radius: 7px;
  cursor: pointer;
}
.rx-seg label.rx-seg-option {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.rx-seg button.is-on,
.rx-seg label.rx-seg-option:has(input:checked) {
  background: var(--ink);
  color: var(--bg);
}
/* Visually hide the radio inside a segmented label but keep it focusable
   for keyboard users (focus ring shown on the wrapping label). */
.rx-seg label.rx-seg-option > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rx-seg label.rx-seg-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Range chips */
.rx-rangechip {
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: var(--font-jbmono);
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rx-rangechip.is-on,
.rx-rangechip:has(input:checked) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
/* Hide the <input> inside .rx-rangechip when it's used as <label>+input */
.rx-rangechip > input[type="checkbox"],
.rx-rangechip > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Divisions accordion row — used by matches form. Hide the default
   <details>/<summary> disclosure triangle so we can render our own
   chevron + clear-✕ controls on the right of the row. Rotate the
   chevron when the row is open.

   OPEN ⇔ SELECTED: matches-form.js mirrors the row's open state into
   the hidden category_id checkbox; every selected-state visual below
   derives from :has(input:checked) (same recipe as .rx-rangechip) so
   tapping a row selects it instantly without a server round trip. */
.rx-div-row > summary { list-style: none; }
.rx-div-row > summary::-webkit-details-marker { display: none; }
.rx-div-row > summary::marker { display: none; }
.rx-div-row[open] > summary .rx-div-chevron { transform: rotate(180deg); display: inline-block; }
.rx-div-chevron { transition: transform 0.15s ease; display: inline-block; }
.rx-div-row > summary input[name="category_id"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rx-div-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
  background: transparent;
  color: transparent;
}
.rx-div-clear {
  display: none;
  font-size: 10px;
  color: var(--ink-3);
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  letter-spacing: 0.08em;
}
.rx-div-row:has(> summary input[name="category_id"]:checked) { background: rgba(250, 180, 19, 0.06); }
.rx-div-row:has(> summary input[name="category_id"]:checked) .rx-div-dot {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.rx-div-row:has(> summary input[name="category_id"]:checked) .rx-div-clear { display: inline-block; }

/* Ticket-form division rows — flat <label>+sr-only-radio rows (no
   details/summary like .rx-div-row above). Selected state must derive
   from :checked, not server-rendered styles, so the pick shows the
   moment the user taps it. */
.rx-tix-div-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.rx-tix-div-row:has(> input[name="category_id"]:checked) { background: rgba(250, 180, 19, 0.08); }
.rx-tix-div-row:has(> input[name="category_id"]:checked) .rx-tix-div-dot {
  border-color: var(--accent);
  background: var(--accent);
}
.rx-tix-div-row:has(> input[name="category_id"]:checked) .rx-tix-div-dot::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Ticket-type cards (Light Flex / Full Flex) — same :checked-driven
   recipe: selection must show without a server round-trip. */
.rx-type-card {
  cursor: pointer;
  display: block;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.rx-type-card:has(> input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* Event picker — custom dropdown that replaces a native <select> on the
   matches form. The <details>/<summary> wrap gives us a 0-JS open state
   for keyboard users; the inline <script> in form.templ layers on search
   filtering + selection. Hide the default disclosure triangle and
   rotate the chevron when opened, like rx-div-row. */
.rx-event-picker > summary { list-style: none; }
.rx-event-picker > summary::-webkit-details-marker { display: none; }
.rx-event-picker > summary::marker { display: none; }
.rx-event-picker[open] > summary .rx-event-picker-chevron { transform: rotate(180deg); }
.rx-event-picker-chevron { transition: transform 0.15s ease; display: inline-block; }
.rx-event-picker-row:hover { background: var(--bg-3); }
.rx-event-picker-row.is-on { background: var(--bg-3); }
.rx-event-picker-row:last-child { border-bottom: none; }

/* Post-login unread toast (WP10, beta feedback 18.07) — fixed pill
   under the topbar, whole thing is a link to the inbox. Auto-fades via
   keyframes: slide in, hold ~6s, fade out and drop out of hit-testing
   (visibility animates discretely at the keyframe boundary). */
.rx-unread-toast {
  position: fixed;
  top: 64px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  animation: rx-toast 7s ease forwards;
}
.rx-unread-toast-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
@keyframes rx-toast {
  0%       { opacity: 0; transform: translate(-50%, -10px); }
  5%, 88%  { opacity: 1; transform: translate(-50%, 0); }
  100%     { opacity: 0; visibility: hidden; transform: translate(-50%, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  /* no auto-fade under reduced motion — the toast is one-shot anyway
     and disappears on the next navigation. */
  .rx-unread-toast { animation: none; }
}

/* Match-tolerance tag */
.rx-tol {
  border: 1px dashed var(--warn);
  color: var(--warn);
  background: rgba(255,184,0,0.06);
}

/* Profile placeholder background */
.rx-pf-hero {
  background: var(--bg-3);
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.025) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.025) 22px 23px);
  position: relative;
  overflow: hidden;
}

/* Desktop layout */
.rx-desk-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
}
.rx-desk-nav .rx-logo { font-family: var(--font-display); font-size: 22px; }

/* Subtle accent text */
.rx-acc { color: var(--accent); }

/* Empty state */
.rx-empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-jbmono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sticky footer in screens */
.rx-footer {
  flex-shrink:0;
  padding: 12px 16px 14px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

/* --- Ticket browse tabs (beta feedback 2026-07-21 Punkt 5) ------------- */
.rx-browse-tab {
  flex: 1;
  /* Flex centering instead of text-align so the count pill can never
     wrap below the tab label (feedback 2026-07-22 Punkt 1). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 4px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rx-browse-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Unread chat row highlight (beta feedback 2026-07-21 Punkt 9): the
   whole row is tinted; the numeric per-row badge is gone. */
.inbox-row-unread {
  background: rgba(250, 180, 19, 0.07);
  border-left: 3px solid var(--accent);
}

/* Potenzielle-Matches tab (beta feedback 2026-07-21 Punkt 7) */
.matches-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
}
.matches-card-new {
  background: rgba(250, 180, 19, 0.07);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
.matches-group-new {
  border-color: var(--accent);
}

/* Early duplicate warning (beta feedback 2026-07-21 Punkt 4) */
.rx-div-row.rx-div-duplicate {
  background: rgba(255, 59, 59, 0.07);
  border-left: 3px solid var(--danger);
}

/* Feedback area chips (Punkt 12): sr-only radio, :has drives selection. */
label.rx-pill:has(input:checked) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* --- Event/division filter dropdowns (follow-up §1, feedback6) ----------
   Two side-by-side <details data-rx-dropdown> replace the horizontal chip
   rows that overflowed once the client added many events. Native
   <details>/<summary> for the open/close; filter-dropdown.js layers on the
   max-3 guard + live label. The panel is position:absolute so it overlays
   the rows below instead of pushing them, and can't be clipped by the
   result rows' own box. */
.rx-filter-row {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  align-items: flex-start;
}
.rx-filter {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.rx-filter > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: var(--font-jbmono);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.rx-filter > summary::-webkit-details-marker { display: none; }
.rx-filter > summary::marker { display: none; }
.rx-filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rx-filter-chevron {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: transform 0.15s ease;
}
.rx-filter[open] > summary { border-color: var(--accent); color: var(--ink); }
.rx-filter[open] > summary .rx-filter-chevron { transform: rotate(180deg); }
/* Any selection tints the closed summary so the active filter reads at a
   glance (mirrors the old accent chip). */
.rx-filter:has(input[type="checkbox"]:checked) > summary {
  border-color: var(--accent);
  color: var(--ink);
}
.rx-filter-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 4px;
}
.rx-filter-maxmsg {
  padding: 7px 8px;
  margin: 2px 2px 4px;
  border-radius: 6px;
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: var(--warn);
  font-family: var(--font-jbmono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.rx-filter-maxmsg[hidden] { display: none; }
.rx-filter-empty {
  padding: 10px 10px;
  color: var(--ink-3);
  font-family: var(--font-jbmono);
  font-size: 11px;
}
.rx-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
}
.rx-filter-option:hover { background: var(--bg-3); }
.rx-filter-option:has(input:disabled) {
  cursor: not-allowed;
  color: var(--ink-4);
  opacity: 0.55;
}
.rx-filter-option:has(input:disabled):hover { background: transparent; }
.rx-filter-option > input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.rx-filter-option:has(input:checked) { color: var(--ink); }
.rx-filter-option > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}