/* Badminton Spielplan – modernes, responsives Design ohne Build-Schritt */
:root {
  color-scheme: light dark;
  --bg: light-dark(oklch(97% 0.008 250), oklch(18% 0.015 255));
  --surface: light-dark(#fff, oklch(23% 0.016 255));
  --surface-2: light-dark(oklch(96% 0.01 250), oklch(27% 0.017 255));
  --text: light-dark(oklch(24% 0.02 255), oklch(94% 0.01 250));
  --muted: light-dark(oklch(52% 0.02 255), oklch(72% 0.02 250));
  --line: light-dark(oklch(91% 0.01 250), oklch(32% 0.018 255));
  --accent: light-dark(oklch(56% 0.19 255), oklch(72% 0.15 255));
  --on-accent: light-dark(#fff, oklch(20% 0.03 255));
  --yes: oklch(68% 0.17 150);
  --maybe: oklch(80% 0.16 85);
  --no: oklch(62% 0.2 25);
  --radius: 14px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06);
  --name-w: 7.5rem;
  --cell-w: 4.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9rem; }

/* ---------- Kopf ---------- */
.top {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;

  img { border-radius: 12px; background: #fff; }
  h1 { font-size: clamp(1.25rem, 4vw, 1.75rem); margin: 0; letter-spacing: -.02em; }
}
.sync { margin-left: auto; font-size: .85rem; color: var(--muted); &.bad { color: var(--no); font-weight: 600; } }

main, footer { max-width: 72rem; margin: 0 auto; }
footer { padding: 1.5rem 0 2rem; color: var(--muted); font-size: .8rem; }

/* ---------- Karten ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 1.25rem;

  h2 { margin: 0 0 .75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
}
.plan-card { padding: 0; overflow: hidden; }

/* ---------- Tabelle ---------- */
.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-left: var(--name-w);
}

.plan {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  text-align: center;

  th, td { padding: 0; border-bottom: 1px solid var(--line); }
  thead th {
    position: sticky; top: 0;
    background: var(--surface);
    padding: .6rem .25rem;
    min-width: var(--cell-w);
    font-weight: 500;
    line-height: 1.2;
    border-bottom: 2px solid var(--line);
  }
  .wd { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .dm { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
  .past { opacity: .45; }

  /* Namensspalte bleibt beim Scrollen stehen */
  tbody th, .corner {
    position: sticky; left: 0; z-index: 2;
    width: var(--name-w); min-width: var(--name-w); max-width: var(--name-w);
    background: var(--surface);
    text-align: left;
    padding-inline: .9rem .5rem;
    box-shadow: 1px 0 0 var(--line);
  }
  .corner { z-index: 3; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  tbody tr:nth-child(even) :is(th, td) { background-color: color-mix(in oklab, var(--surface), var(--text) 3%); }
  tbody tr:nth-child(even) th { background: color-mix(in oklab, var(--surface), var(--text) 3%); }
  tbody tr:last-child :is(th, td) { border-bottom: 0; }
  tbody tr:hover :is(td, th) { background-color: color-mix(in oklab, var(--surface), var(--accent) 8%); }
  tbody tr:hover th { background: color-mix(in oklab, var(--surface), var(--accent) 8%); }
}

.pname {
  display: block; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-weight: 600; text-align: left;
  padding: .7rem 0;
  &.edit { background: none; border: 0; color: inherit; cursor: pointer; &:hover { color: var(--accent); } }
  &.regular { color: var(--accent); }
}

.cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; min-height: 3.25rem;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  transition: background-color .12s;
  &:hover { background: color-mix(in oklab, transparent, var(--accent) 10%); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
}

.sub {
  font-size: .65rem; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
}

/* ---------- Status-Pille ---------- */
.pill {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  font-weight: 800; font-size: 1rem; line-height: 1;
  flex: none;

  &.yes   { background: color-mix(in oklab, var(--yes), transparent 78%);   color: light-dark(oklch(42% 0.12 150), var(--yes)); }
  &.maybe { background: color-mix(in oklab, var(--maybe), transparent 70%); color: light-dark(oklch(48% 0.1 85), var(--maybe)); }
  &.no    { background: color-mix(in oklab, var(--no), transparent 80%);    color: light-dark(oklch(48% 0.17 25), var(--no)); }
  &.none  { color: var(--line); font-weight: 400; }
}

.plan-actions { padding: 1rem; border-top: 1px solid var(--line); }

/* ---------- Infos ---------- */
.info {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

  .legend { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .5rem; }
  .legend li { display: flex; align-items: center; gap: .6rem; }
  .steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; font-size: .95rem; }
  .links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
}


/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 600;
  padding: .65rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  cursor: pointer;
  &:hover { filter: brightness(.97); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  &.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  &.danger { color: var(--no); }
}

.icon-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 0; background: var(--surface-2); color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none;
}

/* ---------- Dialoge (Bottom-Sheet auf Mobilgeräten) ---------- */
.sheet {
  border: 0; padding: 0;
  background: var(--surface); color: var(--text);
  border-radius: 20px 20px 0 0;
  width: min(100%, 28rem);
  max-width: 100%;
  margin: auto auto 0;
  box-shadow: 0 -8px 40px rgb(0 0 0 / .25);
  &::backdrop { background: rgb(0 0 0 / .4); backdrop-filter: blur(2px); }
  &[open] { animation: rise .2s ease-out; }
  @media (min-width: 40rem) { margin: auto; border-radius: 20px; }
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }

.sheet-body {
  padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  display: grid; gap: 1rem;

  > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  h3 { margin: 0; font-size: 1.2rem; }
  p { margin: 0; }
  fieldset { border: 0; padding: 0; margin: 0; &[hidden] { display: none; } }
  legend { padding: 0; margin-bottom: .5rem; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
}

.choices { display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: center; gap: .75rem;
  font: inherit; font-weight: 600; text-align: left;
  padding: .6rem .8rem; border-radius: 12px;
  border: 2px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer;
  &:hover { background: var(--surface-2); }
  &.on { border-color: var(--accent); background: color-mix(in oklab, var(--surface), var(--accent) 12%); }
}
.chips { display: flex; flex-wrap: wrap; }
.chip { padding: .4rem .85rem; border-radius: 99px; }

.field { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
input {
  font: inherit; padding: .7rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
.error { color: var(--no); font-size: .9rem; min-height: 1.2em; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 40rem) {
  :root { --name-w: 6.25rem; --cell-w: 3.6rem; }
  .card { padding: 1rem; }
  .plan-card { padding: 0; }
  .pill { width: 1.85rem; height: 1.85rem; }
}