/*
 * Components – reusable patterns built on design tokens
 *
 * Use @layer components so Tailwind utilities can still override when needed.
 * Because we run Tailwind CDN (no build step), we write plain CSS classes
 * instead of @apply. Tailwind's config maps the same tokens, so both worlds
 * share one colour set.
 */

/* ── Cards / Sections ────────────────────────────────────────────────── */
.lm-card {
  border-radius: var(--lm-radius-lg);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface-overlay);
}

.lm-card-inner {
  border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border-subtle);
  overflow: hidden;
}

/*
 * News-Feed- und Markt-Aktivitäts-Zeilen — horizontales Innenpadding zentral.
 * Tokens: --lm-news-feed-row-pad-* in tokens.css
 * Partials: includes/news_feed_list_partial.php, includes/transfers_recent_activity_partial.php
 */
.lm-news-feed-row-pad--compact {
  padding-top: var(--lm-news-feed-row-pad-y-compact);
  padding-bottom: var(--lm-news-feed-row-pad-y-compact);
  padding-left: var(--lm-news-feed-row-pad-x-compact);
  padding-right: var(--lm-news-feed-row-pad-x-compact);
}

@media (min-width: 640px) {
  .lm-news-feed-row-pad--compact {
    padding-left: var(--lm-news-feed-row-pad-x-compact-sm);
    padding-right: var(--lm-news-feed-row-pad-x-compact-sm);
  }
}

.lm-news-feed-row-pad--default {
  padding-top: var(--lm-news-feed-row-pad-y);
  padding-bottom: var(--lm-news-feed-row-pad-y);
  padding-left: var(--lm-news-feed-row-pad-x);
  padding-right: var(--lm-news-feed-row-pad-x);
}

@media (min-width: 640px) {
  .lm-news-feed-row-pad--default {
    padding-left: var(--lm-news-feed-row-pad-x-sm);
    padding-right: var(--lm-news-feed-row-pad-x-sm);
  }
}

/*
 * News feed rows — corner "Neu" stamp (Liga + Transfer feeds).
 * Partials: news_feed_list_partial.php, transfers_recent_activity_partial.php
 */
.lm-news-feed-row {
  position: relative;
  overflow: visible;
}

.lm-news-feed-row--fresh.lm-news-feed-row-pad--compact {
  padding-top: calc(var(--lm-news-feed-row-pad-y-compact) + 0.375rem);
}

.lm-news-feed-row--fresh.lm-news-feed-row-pad--default {
  padding-top: calc(var(--lm-news-feed-row-pad-y) + 0.25rem);
}

.lm-news-fresh-sticker {
  position: absolute;
  top: -0.45rem;
  left: 0.5rem;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.125rem;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.1875rem;
  border: 2px dashed var(--lm-action);
  background: var(--lm-action-bg-weak);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lm-action) 22%, transparent),
    0 3px 10px color-mix(in srgb, var(--lm-action) 28%, transparent);
  transform: rotate(-12deg);
  transform-origin: 50% 50%;
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lm-action);
}

/* Interest-phase countdown on Liga-News rows (digits green, unit labels white). */
.lm-interest-countdown__n {
  color: var(--lm-accent-muted);
}
.lm-interest-countdown__u {
  color: var(--lm-text);
}

.lm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--lm-backdrop);
}

.lm-modal-panel {
  border-radius: var(--lm-radius-lg);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-2xl);
}

/*
 * Long admin form modals (e.g. player-profile edit): trap scroll inside the panel so
 * iOS/Android keyboard focus does not scroll the dimmed page behind. Pair with
 * html.lm-modal-scroll-lock (set while modal is open) and optional JS max-height sync
 * from visualViewport (player-profile.php).
 */
html.lm-modal-scroll-lock,
html.lm-modal-scroll-lock body {
  overflow: hidden;
}

.lm-form-modal-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
}

@media (min-width: 640px) {
  .lm-form-modal-root {
    align-items: center;
    padding: 1rem;
  }
}

.lm-form-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: calc(100% - 1.5rem);
  max-width: min(34rem, calc(100vw - 1.5rem));
  flex-direction: column;
  max-height: min(88dvh, calc(100dvh - 1rem));
  margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border-radius: var(--lm-radius-lg);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-2xl);
}

@media (min-width: 640px) {
  .lm-form-modal-panel {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(85dvh, calc(100dvh - 2rem));
    margin-bottom: 0;
  }
}

.lm-form-modal-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Back navigation (page-level «Zurück …» controls) ─────────────────── */
.lm-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--lm-radius-lg);
  border: 1px solid var(--lm-interactive-border);
  background: var(--lm-surface-overlay);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lm-link);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.lm-back-link:hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
  color: var(--lm-link-hover);
}
.lm-back-link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}
.lm-back-link .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

/*
 * Interactive affordances — make clickable targets scannable app-wide.
 *
 * Tokens: --lm-action / --lm-link / --lm-interactive-border in tokens.css
 * (cyan, distinct from brand green). See AGENTS.md §4 and docs/features/UI_INTERACTIVE_AFFORDANCES.md.
 *
 *   .lm-link              inline text actions (player names, „Zum Markt“, …)
 *   .lm-tile-link         whole card/tile/block navigation (news row, squad row, …)
 *   .lm-row-link          list row inside a grouped container (inbox thread)
 *   .lm-row-click         clickable table row (opens modal / detail)
 *   .lm-disclosure-link   <summary> expand/collapse controls
 *   .lm-back-link         pill «Zurück …» navigation
 *   .lm-action-trigger    compact controls (avatar menu, team switcher chevron, ⋮, formation chip)
 *   .lm-click-chevron     persistent › on clickable rows (tables, news tiles)
 *   .lm-filter-field      filter inputs / selects / pill toggles
 *   .lm-pill-toggle        pill nav (Liga/Pokal, Markt-Untertabs); .is-active = green fill
 *   .lm-tab-bar / __link   underline tab row (Markt, Statistik)
 *   .lm-action-card        sheet primary card (cyan border, green title)
 *   .lm-quick-link         compact footer jump button (Schnelllinks)
 *   .lm-filter-bar          grouped filter row (News selects)
 *   .lm-inbox-pill          Posteingang filter pill (cyan border; active = green tint)
 *   .lm-inbox-compose       Posteingang „Neue Nachricht“ (cyan border, green tint)
 *   .lm-inbox-bell--has-unread  Shell-Glocke wiggles when unread count &gt; 0
 *   .lm-disclosure-panel   <details> with action border + summary
 *   .lm-link-plain        opt-out: neutral text, no accent
 *
 * New clickable UI in public/app/: use these classes — not ad-hoc border-primary / text-primary.
 * Exceptions: primary CTAs (submit), semantic state (danger/warning), sidebar/bottom nav.
 */
a.lm-link,
button.lm-link {
  color: var(--lm-link);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
a.lm-link:hover,
button.lm-link:hover {
  color: var(--lm-link-hover);
  text-decoration: underline;
}
a.lm-link:focus-visible,
button.lm-link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
button.lm-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
}
a.lm-link-plain,
button.lm-link-plain {
  color: inherit;
  text-decoration: none;
}
a.lm-link-plain:hover,
button.lm-link-plain:hover {
  text-decoration: none;
}

.lm-tile-link {
  border: 1px solid var(--lm-interactive-border);
  /* Radius: keep rounded-lg / rounded-xl on the element — do not override here. */
  background: var(--lm-surface-overlay);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
button.lm-tile-link {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.lm-tile-link:hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
.lm-tile-link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}

a.lm-row-link,
button.lm-row-link {
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-left-color 0.15s ease, background-color 0.15s ease;
}
a.lm-row-link:hover,
a.lm-row-link:focus-visible,
button.lm-row-link:hover,
button.lm-row-link:focus-visible {
  border-left-color: var(--lm-link);
  background: var(--lm-surface-raised);
}
button.lm-row-link {
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
}

summary.lm-disclosure-link {
  cursor: pointer;
  list-style: none;
  color: var(--lm-link);
  font-weight: 600;
  transition: color 0.15s ease;
}
summary.lm-disclosure-link:hover {
  color: var(--lm-link-hover);
  text-decoration: underline;
}
summary.lm-disclosure-link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
summary.lm-disclosure-link::-webkit-details-marker {
  display: none;
}

tr.lm-row-click {
  cursor: pointer;
  box-shadow: inset 2px 0 0 var(--lm-interactive-border);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
tr.lm-row-click:hover,
tr.lm-row-click:focus-visible {
  background: var(--lm-surface-raised);
  box-shadow: inset 2px 0 0 var(--lm-link);
}

/* Persistent cyan › on clickable rows (visible without hover — mobile). */
.lm-click-chevron {
  color: var(--lm-link);
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

/* Filter inputs / selects / pill toggles — action border (not brand green). */
.lm-filter-field {
  border-color: var(--lm-interactive-border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lm-filter-field:focus,
.lm-filter-field:focus-within {
  border-color: var(--lm-interactive-border-hover);
  outline: none;
  box-shadow: 0 0 0 1px var(--lm-action-ring);
}

/* Pill toggles — inactive: cyan border; active (.is-active): green fill. */
a.lm-pill-toggle,
button.lm-pill-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-full);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
a.lm-pill-toggle:not(.is-active):hover,
button.lm-pill-toggle:not(.is-active):hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
a.lm-pill-toggle:focus-visible,
button.lm-pill-toggle:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}
.lm-pill-toggle.is-active {
  border-color: transparent;
  background: var(--lm-accent);
  color: var(--lm-bg);
}
.lm-pill-toggle--compact {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.25;
}
.lm-pill-toggle:not(.lm-pill-toggle--compact) {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 500;
}
a.lm-pill-toggle:not(.is-active),
button.lm-pill-toggle:not(.is-active) {
  background: var(--lm-surface-raised);
  color: var(--lm-link);
}

/* Posteingang filter pills — cyan border always; active = green tint (not full fill). */
a.lm-inbox-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-lg);
  background: var(--lm-surface-input);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--lm-text-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
a.lm-inbox-pill:hover {
  background: var(--lm-surface-raised);
  color: var(--lm-text);
}
a.lm-inbox-pill.is-active {
  background: var(--lm-accent-bg);
  color: var(--lm-accent);
}
a.lm-inbox-pill:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}
.lm-inbox-pill__count {
  display: inline-flex;
  min-width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--lm-radius-full);
  padding: 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  background: var(--lm-surface-raised);
  color: rgba(255, 255, 255, 0.8);
}
a.lm-inbox-pill.is-active .lm-inbox-pill__count {
  background: var(--lm-accent-bg-hover);
  color: var(--lm-accent);
}

/* Posteingang compose control — cyan border, green accent fill/text. */
a.lm-inbox-compose {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-full);
  background: var(--lm-accent-bg);
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lm-accent);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.lm-inbox-compose:hover {
  background: var(--lm-accent-bg-hover);
  border-color: var(--lm-interactive-border-hover);
}
a.lm-inbox-compose:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}

/* Shell bell: gentle side-to-side wiggle while unread messages exist. */
a.lm-inbox-bell--has-unread .lm-inbox-bell-icon {
  display: inline-block;
  transform-origin: 50% 8%;
  animation: lm-inbox-bell-wiggle 1.1s ease-in-out infinite;
}
@keyframes lm-inbox-bell-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(16deg);
  }
  40% {
    transform: rotate(-14deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  a.lm-inbox-bell--has-unread .lm-inbox-bell-icon {
    animation: none;
  }
}

/* Underline tab bar (Markt main tabs, Statistik hub). */
.lm-tab-bar {
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--lm-border) 80%, transparent);
}
a.lm-tab-bar__link {
  flex: 1 1 0%;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lm-text-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.lm-tab-bar__link:hover {
  color: var(--lm-text);
}
a.lm-tab-bar__link.is-active {
  border-bottom-color: var(--lm-accent);
  color: var(--lm-accent);
}
a.lm-tab-bar__link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: -2px;
}

/* Bottom-sheet primary action card — cyan border, green title (see __title). */
a.lm-action-card,
button.lm-action-card {
  display: flex;
  gap: 0.75rem;
  border: 1px solid var(--lm-interactive-border);
  background: var(--lm-surface-overlay);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
button.lm-action-card {
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  width: 100%;
}
a.lm-action-card:hover,
button.lm-action-card:hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
a.lm-action-card:focus-visible,
button.lm-action-card:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}
.lm-action-card__title {
  display: block;
  font-weight: 600;
  color: var(--lm-accent);
}

/* Compact market jump buttons (Team/Spieler sheet Schnelllinks). */
a.lm-quick-link {
  display: inline-flex;
  min-height: 2.75rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-lg);
  background: var(--lm-surface-input);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lm-accent);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
a.lm-quick-link:hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
button.lm-quick-link:hover:not(:disabled) {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
button.lm-quick-link:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a.lm-quick-link:focus-visible,
button.lm-quick-link:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}
button.lm-quick-link {
  cursor: pointer;
  font: inherit;
}
a.lm-quick-link--wide {
  grid-column: span 2 / span 2;
}
.lm-quick-link--inline {
  width: auto;
  min-width: 10rem;
  min-height: 2.5rem;
}
.lm-quick-link--compact {
  width: auto;
  min-height: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.25;
}
.lm-quick-link--lg {
  min-height: 3rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Deep-link highlight when Markt pages load with ?player=<id> (player.php → Markt). */
.lm-market-player-focus {
  outline: 2px solid var(--lm-action);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-action) 22%, transparent);
}

/* Grouped filter controls (News feed bar, …). */
.lm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-lg);
  background: var(--lm-surface-input);
  padding: 0.625rem;
  transition: border-color 0.15s ease;
}

/* Expandable panel with action border (filter block, auction archive, …). */
details.lm-disclosure-panel {
  border: 1px solid var(--lm-interactive-border);
  border-radius: var(--lm-radius-xl);
  transition: border-color 0.15s ease;
}
details.lm-disclosure-panel > summary.lm-disclosure-link {
  padding: 0.75rem;
}

/* Compact icon/chip triggers (avatar, team switcher, ⋮ menu, formation pill). */
.lm-action-trigger {
  border: 1px solid var(--lm-interactive-border);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lm-action-trigger:hover {
  border-color: var(--lm-interactive-border-hover);
  background: var(--lm-surface-hover);
}
.lm-action-trigger:focus-visible {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}

/* ── Form controls ───────────────────────────────────────────────────── */
.lm-input {
  width: 100%;
  border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface-input);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--lm-text);
}
.lm-input::placeholder {
  color: var(--lm-text-placeholder);
}
.lm-input:focus {
  outline: 2px solid var(--lm-accent-ring);
  outline-offset: -1px;
}

.lm-select {
  width: 100%;
  border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface-input);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--lm-text);
}

/* Native date picker — calendar icon contrast on dark surfaces (WebKit/Blink). */
.lm-date-field {
  color-scheme: dark;
}
.lm-date-field::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.92;
  filter: invert(1) brightness(0.88);
}
.lm-date-field::-webkit-calendar-picker-indicator:hover {
  filter: invert(1) brightness(1);
}
[data-theme="light"] .lm-date-field {
  color-scheme: light;
}
[data-theme="light"] .lm-date-field::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.72;
}
[data-theme="light"] .lm-date-field::-webkit-calendar-picker-indicator:hover {
  opacity: 0.95;
}

/*
 * Remove the caret SVG that @tailwindcss/forms injects as a background-image
 * on <select>. Apply on top of Tailwind's appearance-none when we draw our
 * own caret (e.g. season / matchday dropdowns in league.php). Replaces the
 * inline `style="background-image: none;"` pattern.
 */
.lm-select-bare {
  background-image: none;
}

.lm-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--lm-text-muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.lm-btn-primary {
  border-radius: var(--lm-radius-sm);
  background: var(--lm-accent-bg);
  border: 1px solid var(--lm-accent-border);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lm-accent);
  cursor: pointer;
}
.lm-btn-primary:hover {
  background: var(--lm-accent-bg-hover);
}

.lm-btn-ghost {
  border-radius: var(--lm-radius-sm);
  background: var(--lm-surface-raised);
  border: 1px solid var(--lm-border);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lm-text-secondary);
  cursor: pointer;
}
.lm-btn-ghost:hover {
  background: var(--lm-surface-active);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.lm-thead {
  background: var(--lm-surface-thead);
  color: var(--lm-text-muted);
}

.lm-tbody-row {
  border-top: 1px solid var(--lm-border-subtle);
}
.lm-tbody-row:hover {
  background: var(--lm-surface-thead);
}

/* ── Dropdown / Popover ──────────────────────────────────────────────── */
.lm-dropdown {
  border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-xl);
}

/* ── Detail modal info row ───────────────────────────────────────────── */
.lm-detail-cell {
  border-radius: var(--lm-radius-sm);
  background: var(--lm-surface-thead);
  padding: 0.5rem 0.75rem;
}
.lm-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lm-text-muted);
}
.lm-detail-value {
  margin-top: 0.125rem;
  color: var(--lm-text);
}

/* ── KPI stat cards ──────────────────────────────────────────────────── */
.lm-kpi-card {
  border-radius: var(--lm-radius-sm);
  background: var(--lm-surface-raised);
  padding: 0.75rem;
}
.lm-kpi-label {
  font-size: 0.75rem;
  color: var(--lm-text-muted);
}

/* ── Pagination links ────────────────────────────────────────────────── */
.lm-page-link {
  border-radius: 0.375rem;
  border: 1px solid var(--lm-border);
  padding: 0.25rem 0.5rem;
  color: var(--lm-text-secondary);
}
.lm-page-link:hover {
  background: var(--lm-surface-active);
}

/* ── Chip / badge ────────────────────────────────────────────────────── */
.lm-chip-starter {
  background: var(--lm-accent-bg);
  color: var(--lm-accent);
}
.lm-chip-bench {
  background: var(--lm-bench-bg);
  color: var(--lm-bench);
}
.lm-chip-none {
  background: var(--lm-surface-raised);
  color: rgba(157,185,166, 0.4); /* text-muted/40 */
}

/* ── Error / alert boxes ─────────────────────────────────────────────── */
.lm-alert-danger {
  border-radius: var(--lm-radius-sm);
  background: var(--lm-danger-bg);
  border: 1px solid var(--lm-danger-border);
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--lm-danger);
}
.lm-alert-warning {
  border-radius: var(--lm-radius-lg);
  background: var(--lm-warning-bg);
  border: 1px solid var(--lm-warning-border);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--lm-warning-text);
}

/* ── Login page hero background ──────────────────────────────────────── */
/*
 * Full-bleed decorative background on public/app/index.php.
 * The image URL is token-driven so a theme or deployment can override it
 * without editing the template. Fallback is the current Stitch/Aida mock
 * asset; replace with a local asset under public/app/assets/ when possible
 * (see docs/reviews/2026-04-new-app-code-review.md, section 4.1).
 */
:root {
  --lm-login-hero-bg-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAy8WId8PiNa2ziiIeBgGCWYo8VmdcN2w8IWDuggcSyt_0uAS53AJXMOXfodOATzJC-uMamMU6_eQ7vHsuwzjuae4vkPrlZJogiPQ7Ib_Ddb_lczLmikXNDyVNdET_I_MJUizblKPbRQZ1L1ELnXeAsNOZ-aCP-18UKvwVJc3AD-8_lgg3oasG8EvrN-Unq06Pv2R6IKLWJ428aWbbGknPYz-pi8Ph9d8fLfo6miimJe6uGVbPafgRaD_9frbwFYpoGvQGAmO5sPFzes');
}

.lm-login-hero-bg {
  background-image: var(--lm-login-hero-bg-image);
}

/* Login/password-reset hero — theme-aware gradient over background image */
.lm-login-hero-overlay {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--lm-bg) 95%, transparent),
    color-mix(in srgb, var(--lm-bg) 90%, transparent),
    var(--lm-bg)
  );
}

/* Login / password-reset cards — theme-aware (tokens --lm-auth-*) */
.lm-auth-card {
  border: 1px solid var(--lm-border);
  background: var(--lm-auth-panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lm-auth-field {
  border: 1px solid var(--lm-border);
  background: var(--lm-auth-field-bg);
  color: var(--lm-text);
}

/*
 * Tailwind Forms plugin (Play CDN, loaded after this file) sets `.form-input`
 * background to white with the same single-class specificity as `.lm-auth-field`.
 * Because the CDN script wins on tie, direct inputs carrying both classes get a
 * white box while `.lm-auth-field` still forces light text — typed input vanishes.
 * Password on index.php avoids this: wrapper carries `.lm-auth-field`, inner input
 * uses `bg-transparent`. Higher specificity here fixes forgot/reset and any direct
 * `.lm-auth-field.form-input` usage.
 */
input.lm-auth-field.form-input,
textarea.lm-auth-field.form-input,
select.lm-auth-field.form-input {
  background-color: var(--lm-auth-field-bg);
  color: var(--lm-text);
}

.lm-auth-field::placeholder,
input.lm-auth-field.form-input::placeholder,
textarea.lm-auth-field.form-input::placeholder {
  color: var(--lm-text-placeholder);
}

/* Browser autofill paints an opaque light inset; keep theme text + field bg. */
input.lm-auth-field.form-input:-webkit-autofill,
input.lm-auth-field.form-input:-webkit-autofill:hover,
input.lm-auth-field.form-input:-webkit-autofill:focus,
input.lm-auth-field.form-input:-webkit-autofill:active,
.lm-auth-field input.form-input:-webkit-autofill,
.lm-auth-field input.form-input:-webkit-autofill:hover,
.lm-auth-field input.form-input:-webkit-autofill:focus,
.lm-auth-field input.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--lm-text);
  caret-color: var(--lm-text);
  -webkit-box-shadow: 0 0 0 1000px var(--lm-surface-input) inset;
  box-shadow: 0 0 0 1000px var(--lm-surface-input) inset;
  transition: background-color 99999s ease-out 0s;
}

/* Bottom-sheet drag handle (team.php, player.php) */
.lm-sheet-handle {
  background: var(--lm-surface-active);
}

/*
 * Theme preference (settings.php) — segmented switch, not navigation pills.
 * Track + sliding highlight; options are <label> with sr-only radio inside.
 */
.lm-theme-switch {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-full);
  background: var(--lm-surface-input);
}

.lm-theme-switch__option {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--lm-radius-full);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lm-text-muted);
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lm-theme-switch__option .material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

.lm-theme-switch__option:hover {
  color: var(--lm-text-secondary);
}

.lm-theme-switch__option:focus-within {
  outline: 2px solid var(--lm-action-ring);
  outline-offset: 2px;
}

.lm-theme-switch__option.is-active {
  background: var(--lm-surface);
  color: var(--lm-text);
  border-color: var(--lm-border-subtle);
  box-shadow: var(--lm-shadow-sm);
}

.lm-theme-switch__option.is-active .material-symbols-outlined {
  color: var(--lm-accent);
}

@media (prefers-reduced-motion: reduce) {
  .lm-theme-switch__option {
    transition: none;
  }
}

/* Light theme: padded cards get subtle lift (KPI tiles, settings sections). */
[data-theme="light"] .rounded-lg.bg-surface-raised,
[data-theme="light"] .rounded-xl.bg-surface-raised {
  border: 1px solid var(--lm-border-subtle);
  box-shadow: var(--lm-shadow-sm);
}

/* dashboard.php — next-match crest column (theme-aware; no hardcoded hex in PHP). */
.lm-dash-next-match-crest__bg {
  background: linear-gradient(
    to bottom right,
    var(--lm-dash-next-crest-1),
    var(--lm-dash-next-crest-2),
    var(--lm-dash-next-crest-3)
  );
}

.lm-dash-next-match-crest__logo {
  opacity: var(--lm-dash-next-crest-logo-opacity);
}

/*
 * luxmanager-logo.svg is bright cyan/teal — on light crest panel, darken via filter
 * (same asset as dark theme; no second SVG file).
 */
[data-theme="light"] .lm-dash-next-match-crest__logo img {
  filter: brightness(0.4) contrast(1.3) saturate(1.15);
}

.lm-dash-next-match-crest__scrim {
  background: linear-gradient(
    to top,
    var(--lm-dash-next-crest-scrim-1),
    var(--lm-dash-next-crest-scrim-2),
    var(--lm-dash-next-crest-scrim-3)
  );
}

.lm-dash-next-match-emblem {
  background: var(--lm-dash-next-emblem-bg);
}

/* team.php — optional stadium slogan; scroll on narrow viewports when long */
.lm-arena-slogan--marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 0.5rem,
    #000 calc(100% - 0.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 0.5rem,
    #000 calc(100% - 0.5rem),
    transparent 100%
  );
}

.lm-arena-slogan__track {
  display: inline-flex;
  width: max-content;
  gap: 2.5rem;
  white-space: nowrap;
}

.lm-arena-slogan__chunk {
  flex: 0 0 auto;
}

@media (max-width: 639px) {
  .lm-arena-slogan--marquee .lm-arena-slogan__track {
    animation: lm-arena-slogan-scroll 22s linear infinite;
  }
}

@media (min-width: 640px) {
  .lm-arena-slogan--marquee .lm-arena-slogan__track {
    animation: none;
    display: block;
    width: auto;
    white-space: normal;
  }

  .lm-arena-slogan--marquee .lm-arena-slogan__chunk + .lm-arena-slogan__chunk {
    display: none;
  }
}

@keyframes lm-arena-slogan-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-arena-slogan--marquee .lm-arena-slogan__track {
    animation: none;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* auction-bids.php — brief green flash after saving Erstgebot (interest phase) */
@keyframes lm-ab-interest-success-flash {
  0% {
    border-color: var(--lm-accent);
    box-shadow: 0 0 0 2px var(--lm-accent-ring);
    background-color: var(--lm-accent-bg);
  }
  100% {
    border-color: var(--lm-border);
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.lm-ab-interest-shell.lm-ab-interest-flash-success {
  animation: lm-ab-interest-success-flash 0.95s ease-out 1 forwards;
}

/* Injury hint — first-aid tile (squad + player pill, non-blocking). */
.lm-injury-mark-icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  vertical-align: middle;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.lm-injury-mark-icon--md {
  width: 0.875rem;
  height: 0.875rem;
}

.lm-injury-mark-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lm-injury-mark-icon__tile {
  fill: var(--lm-injury-mark-tile);
}

.lm-injury-mark-icon__cross {
  fill: none;
  stroke: var(--lm-injury-mark-disc);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Liga-Kartenhint (Kicker-Sperren) — Kader. PHP: {@see lm_render_card_suspension_mark_icon()}. */
.lm-league-card-mark {
  box-sizing: border-box;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
  width: 9px;
  height: 15px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--lm-border-subtle);
}

.lm-league-card-mark--yellow {
  background-color: var(--lm-card-mark-yellow);
}

.lm-league-card-mark--red {
  background-color: var(--lm-card-mark-red);
}

.lm-league-card-mark--yellow_red {
  background: linear-gradient(
    135deg,
    var(--lm-card-mark-yellow) 50%,
    var(--lm-card-mark-red) 50%
  );
}

.lm-league-card-mark--md {
  width: 11px;
  height: 18px;
}

/*
 * Player header portrait (player.php) — TM headshots are portrait-shaped; rounded rect
 * (not a circle) avoids empty corner wedges. Slight top bias keeps the full head in frame.
 */
.lm-player-portrait-frame {
  display: block;
  flex-shrink: 0;
  width: 3.25rem;
  height: 4rem;
  overflow: hidden;
  border-radius: var(--lm-radius-lg);
  background-color: var(--lm-surface-overlay);
}

.lm-player-portrait-frame .lm-player-portrait {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 18%;
}