/**
 * Kompakt-Liste — aktiv nur bei body[data-ui-design="mobile"][data-ui-list="1"].
 * Termine als Zeilen (Kopfzeile aus ui_design_list.js), Karteninhalt erst nach Aufklappen.
 * Classic und Kompakt sind davon nicht betroffen.
 */
body[data-ui-list="1"] {
  --sf-l-line: var(--sf-m-line, rgba(20, 61, 50, 0.12));
  --sf-l-ink: var(--sf-m-ink, #0f1f1a);
  --sf-l-muted: #5b6b66;
  --sf-l-surface: #fff;
  --sf-l-yes: #1f7a4d;
  --sf-l-no: #b42318;
  --sf-l-open: #5b6b66;
  --sf-l-warn-bg: #fdf0d5;
  --sf-l-warn-ink: #7a4a00;
}

/* —— Karte als Zeile —— */
body[data-ui-list="1"] .sf-l-card {
  padding: 0 !important;
  margin: 0 0 0.5rem !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--sf-l-surface) !important;
  border: 1px solid var(--sf-l-line) !important;
  box-shadow: none !important;
  display: block !important;
}

body[data-ui-list="1"] .sf-l-card:not(.sf-l-open) > :not(.sf-l-head):not(.public-light-vote-group) {
  display: none !important;
}

body[data-ui-list="1"] .sf-l-card.sf-l-open > :not(.sf-l-head) {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

body[data-ui-list="1"] .sf-l-card.sf-l-open > :last-child {
  padding-bottom: 0.85rem;
}

/* Titel/Datum stehen schon in der Kopfzeile — Route & Co. bleiben */
body[data-ui-list="1"] .sf-l-card.sf-l-open .attendance-session-row-main > strong,
body[data-ui-list="1"] .sf-l-card.sf-l-open .attendance-session-row-main > .meta:not(.sf-route-plan-row),
body[data-ui-list="1"] .sf-l-card--parent.sf-l-open > div:nth-child(2) > strong,
body[data-ui-list="1"] .sf-l-card--parent.sf-l-open > div:nth-child(2) > .meta:not(.sf-route-plan-row) {
  display: none !important;
}

body[data-ui-list="1"] .sf-l-head {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  color: var(--sf-l-ink);
  -webkit-tap-highlight-color: transparent;
}

body[data-ui-list="1"] .sf-l-head:focus-visible {
  outline: 2px solid var(--sf-m-green, #1f8f5f);
  outline-offset: -2px;
}

body[data-ui-list="1"] .sf-l-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  padding: 0.3rem 0;
  border-radius: 10px;
  background: var(--sf-m-mint, #e8f6ef);
  color: var(--sf-m-forest, #143d32);
}

body[data-ui-list="1"] .sf-l-date b {
  font-size: 1.15rem;
  font-weight: 700;
}

body[data-ui-list="1"] .sf-l-date__wd,
body[data-ui-list="1"] .sf-l-date__mon {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body[data-ui-list="1"] .sf-l-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

body[data-ui-list="1"] .sf-l-title {
  font-weight: 700;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-list="1"] .sf-l-sub {
  font-size: 0.82rem;
  color: var(--sf-l-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-list="1"] .sf-l-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin-top: 0.15rem;
}

body[data-ui-list="1"] #attendanceSessionList,
body[data-ui-list="1"] #publicLightKidSessions {
  gap: 0 !important;
}

body[data-ui-list="1"] .sf-l-counts {
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

body[data-ui-list="1"] .sf-l-c--yes { color: var(--sf-l-yes); }
body[data-ui-list="1"] .sf-l-c--no { color: var(--sf-l-no); }
body[data-ui-list="1"] .sf-l-c--open { color: var(--sf-l-open); }

body[data-ui-list="1"] .sf-l-side {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 9.5rem;
}

body[data-ui-list="1"] .sf-l-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: #eef1f0;
  color: var(--sf-l-muted);
}

body[data-ui-list="1"] .sf-l-badge--warn,
body[data-ui-list="1"] .sf-l-badge--open {
  background: var(--sf-l-warn-bg);
  color: var(--sf-l-warn-ink);
}

body[data-ui-list="1"] .sf-l-badge--yes {
  background: #e3f4ea;
  color: var(--sf-l-yes);
}

body[data-ui-list="1"] .sf-l-badge--no {
  background: #fde8e6;
  color: var(--sf-l-no);
}

body[data-ui-list="1"] .sf-l-chev {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--sf-l-muted);
  transition: transform 0.15s ease;
}

body[data-ui-list="1"] .sf-l-open .sf-l-chev {
  transform: rotate(90deg);
}

body[data-ui-list="1"] .sf-l-open > .sf-l-head {
  border-bottom: 1px solid var(--sf-l-line);
  margin-bottom: 0.6rem;
}

/* Filter „Braucht Aktion“ */
body[data-ui-list="1"] .sf-l-needs-only > .sf-l-card:not(.sf-l-needs) {
  display: none !important;
}

body[data-ui-list="1"] .sf-l-needs-chip {
  border-color: #e3b04b !important;
}

body[data-ui-list="1"] .sf-l-needs-chip.is-active {
  background: var(--sf-l-warn-bg) !important;
  color: var(--sf-l-warn-ink) !important;
}

/* —— Eltern: Abstimmen direkt in der Zeile —— */
body[data-ui-list="1"] .sf-l-card--parent > .public-light-vote-group {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 !important;
  padding: 0 0.75rem 0.65rem 4.35rem !important;
}

body[data-ui-list="1"] .sf-l-card--parent .public-light-vote-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.35rem 0.4rem !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

body[data-ui-list="1"] .sf-l-card--parent .public-light-vote-btn--open {
  display: none !important;
}

body[data-ui-list="1"] .sf-l-card--parent.sf-l-open > .public-light-vote-group {
  padding-left: 0.85rem !important;
}

/* —— Trainer-Kopfbereich straffen (wie Kompakt-Trainer-Hülle nur bis 960 px) —— */
@media (max-width: 960px) {
  body[data-ui-list="1"] .attendance-page--trainer .attendance-teilnahme-card-header {
    display: none !important;
  }

  body[data-ui-list="1"] .attendance-teilnahme-toolbar__actions {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }

  body[data-ui-list="1"] .attendance-teilnahme-toolbar__actions > .cta {
    width: auto !important;
    min-height: 2.5rem;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
  }
}

/* —— Dunkelmodus —— */
body[data-theme="dark"][data-ui-list="1"] {
  --sf-l-line: rgba(255, 255, 255, 0.12);
  --sf-l-ink: #e8efec;
  --sf-l-muted: #a7b5b0;
  --sf-l-surface: #18211e;
  --sf-l-yes: #6fd39b;
  --sf-l-no: #f2978d;
  --sf-l-open: #a7b5b0;
  --sf-l-warn-bg: #4a3712;
  --sf-l-warn-ink: #f6d48f;
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-date {
  background: #22352d;
  color: #cfe9dc;
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge {
  background: #26302d;
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--yes {
  background: #1d3b2b;
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--no {
  background: #43211d;
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--warn,
body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--open {
  background: var(--sf-l-warn-bg);
  color: var(--sf-l-warn-ink);
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--yes {
  color: var(--sf-l-yes);
}

body[data-theme="dark"][data-ui-list="1"] .sf-l-badge--no {
  color: var(--sf-l-no);
}

/* —— Eltern/Kind: Wischen statt Hamburger —— */
body[data-ui-list="1"][data-page="public-attendance-light-player"].sf-ui-mobile-active #mobileMenuButton {
  display: none !important;
}

body[data-ui-list="1"] #publicLightKidMain.sf-l-swipe-next {
  animation: sfListSwipeNext 0.3s ease-out;
}

body[data-ui-list="1"] #publicLightKidMain.sf-l-swipe-prev {
  animation: sfListSwipePrev 0.3s ease-out;
}

@keyframes sfListSwipeNext {
  from { opacity: 0.4; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes sfListSwipePrev {
  from { opacity: 0.4; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-list="1"] #publicLightKidMain.sf-l-swipe-next,
  body[data-ui-list="1"] #publicLightKidMain.sf-l-swipe-prev {
    animation: none;
  }
}