/* ============================================================================
 * head.css — Design-Tokens + App-Shell-Styling (aus index.html ausgelagert).
 * ----------------------------------------------------------------------------
 * Native CSS-Nesting (iOS 16.5+). Descendant-Selektoren als `& x`, compound/
 * Pseudo als `&:hover` / `&.active` — beides gültig in strikter UND relaxter
 * Nesting-Syntax, damit auch alte 16.5-WebKit nicht stolpert.
 * Modul-Styles werden ans Ende injiziert (Marker `@inject:styles`).
 * ========================================================================== */

/* ========================= Design-Tokens ================================= */
/* Vereinsfarben nach der Website schiklub-ranshofen.at:
 * Primär #ff4870 (Akzent), Sekundär #1b1c26 (Text/Markenfläche). */
:root, :root[data-theme="light"] {
  --bg:#f6f6f8; --surface:#ffffff; --surface-2:#f0f0f4;
  --line:#e2e2e9; --text:#1b1c26; --muted:#6b6c7a;
  --accent:#ff4870; --accent-ink:#ffffff;
  --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
  --panel:#1b1c26; --panel-ink:#f3f3f6; --panel-line:#32333f;
  --radius:16px; --radius-sm:10px;
  --font: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:64px; --top-h:56px;
}
:root[data-theme="dark"] {
  --bg:#131420; --surface:#1b1c26; --surface-2:#242532;
  --line:#32333f; --text:#f3f3f6; --muted:#9a9bab;
  --accent:#ff4870; --accent-ink:#ffffff;
  --panel:#f3f3f6; --panel-ink:#1b1c26; --panel-line:#c9cad3;
}
/* Statusfarben — Signalfarben, keine Flächenfarben. In beiden Themes gleich,
 * damit „aktiv" immer dasselbe Grün ist. Flächen entstehen per color-mix mit
 * --surface (siehe panel.css), nicht durch eigene Hell/Dunkel-Werte. */
:root {
  --st-pending:#f59e0b;      /* Anmeldung wartet auf Freigabe */
  --st-aktiv:#10b981;        /* freigegeben / bezahlt */
  --st-inaktiv:#9ca3af;
  --st-abgelehnt:#ef4444;    /* abgelehnt / storniert / Fehler */
  --st-gebucht:#3b82f6;
  --st-warteliste:#8b5cf6;
}
*, *::before, *::after {
  box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;
  transition: background-color .2s, border-color .2s, color .15s;
}
html { height:100%; }
/* min-height statt height: bei height:100% ignoriert ÜBERLAUFENDER Inhalt das
   padding-bottom und rutscht hinter die fixe Bottom-Nav. min-height lässt den
   Body mitwachsen, der Save-Space unten bleibt erhalten. */
body {
  min-height:100%;
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
}
/* Save-Space nur reservieren, wenn die jeweilige Bar auch existiert (generierte
   App ohne Topbar/Bottombar bekommt sonst Phantom-Rand). :has() = iOS 16.5+. */
body:has(app-topbar) { padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px)); }
body:has(app-bottom-nav) { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 20px); }

/* ========================= Topbar ======================================= */
app-topbar {
  position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; gap:10px;
  height:calc(var(--top-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 16px 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-title { font-weight:700; font-size:18px; letter-spacing:-.01em; margin-right:auto; }
.icon-btn {
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:17px; cursor:pointer;
  &:active { transform:scale(.94); }
}

/* ========================= Content ====================================== */
main { max-width:720px; margin:0 auto; padding:18px 16px 32px; }
.view {
  display:flex; flex-direction:column; gap:14px;
  &[hidden] { display:none; }  /* sonst überschreibt display:flex das hidden-Attribut */
}
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  & h2 { font-size:15px; font-weight:700; }
  & p { color:var(--muted); font-size:14px; }
  /* Gleichmäßiger vertikaler Abstand zwischen direkten Kindern (h2, .row,
     Listen, Ausgaben) — sonst kleben Inputs an Folge-Inhalten. */
  & > * + * { margin-top:12px; }
}
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.count { font-size:34px; font-weight:800; letter-spacing:-.02em; min-width:2ch; text-align:center; }
/* Alle Text-artigen Felder einheitlich (nicht nur type=text). Zeit- und
   Datum-Felder gehören dazu: ohne sie fällt ein <input type=time> auf das
   nackte Browser-Aussehen zurück und passt in kein Formular. */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], input[type=month], input[type=week],
textarea, select {
  flex:1; min-width:0; width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; color:var(--text); font:inherit; font-size:15px;
  appearance:none; -webkit-appearance:none;
  &:focus { outline:none; border-color:var(--accent); }
}
textarea { resize:vertical; min-height:80px; line-height:1.5; }
select { cursor:pointer; }
input[type=file] {
  font-size:13px; color:var(--muted); max-width:100%;
  &::file-selector-button {
    margin-right:10px; padding:8px 12px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface); color:var(--text); font:inherit; font-size:13px; cursor:pointer;
  }
}
.list { display:flex; flex-direction:column; gap:8px; }
.item {
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px;
  & .txt { flex:1; font-size:14.5px; }
  & .del { border:none; background:none; color:var(--muted); font-size:18px; cursor:pointer; }
}
.empty { color:var(--muted); font-size:14px; text-align:center; padding:18px 0; }

/* Buttons */
.btn-accent {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:14px; border:none; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:14.5px; cursor:pointer;
  &:active { transform:scale(.98); }
}
.btn-ghost {
  padding:11px 15px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-weight:600; font-size:13.5px; cursor:pointer;
}
.add-btn {
  width:44px; height:44px; border-radius:12px; border:none; background:var(--accent);
  color:var(--accent-ink); font-size:22px; cursor:pointer;
}

/* ========================= Bottom-Nav =================================== */
app-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:none; background:none; color:var(--muted); font:inherit; font-size:11px; cursor:pointer;
  & .nav-ico { font-size:20px; line-height:1; }
  &.active { color:var(--accent); }
}

/* ========================= Sidebar (Slide-in links) ===================== */
app-sidebar {
  position:fixed; inset:0; z-index:95; display:block; pointer-events:none;
  &.show { pointer-events:auto; }
  & .sidebar-backdrop {
    position:absolute; inset:0; background:rgba(4,5,8,0);
    transition:background .28s ease, backdrop-filter .28s ease;
  }
  &.show .sidebar-backdrop { background:rgba(4,5,8,.62); backdrop-filter:blur(7px); }
  & .sidebar-inner {
    position:absolute; top:0; bottom:0; left:0; width:min(300px,82vw);
    background:var(--surface); border-right:1px solid var(--line); box-shadow:18px 0 44px rgba(0,0,0,.28);
    transform:translateX(calc(-100% - 64px)); /* +64px damit der Schatten offscreen bleibt */
    transition:transform .28s cubic-bezier(.22,.84,.22,1); will-change:transform;
    overflow:auto; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 18px;
  }
  &.show .sidebar-inner { transform:translateX(0); }
}
.sidebar-content {
  & h2 { font-size:18px; font-weight:700; margin-bottom:14px; }
}
.side-link {
  display:block; width:100%; text-align:left; padding:12px 14px; border-radius:12px;
  border:none; background:none; color:var(--text); font:inherit; font-size:15px; cursor:pointer;
  &:hover, &.active { background:var(--surface-2); color:var(--accent); }
}

/* ========================= Drawer (Bottom-Sheet) ======================== */
/* display:block + pointer-events:none im Ruhezustand — sonst keine Slide-in-
 * Transition und der Backdrop (inset:0) fängt nach dem Schließen alle Klicks. */
app-drawer {
  position:fixed; inset:0; z-index:90; display:block; overflow:hidden; pointer-events:none;
  &.show { pointer-events:auto; }
  & .drawer-backdrop {
    position:absolute; inset:0; background:rgba(4,5,8,0);
    transition:background .28s ease, backdrop-filter .28s ease;
  }
  & .drawer-inner {
    position:absolute; left:0; right:0; bottom:0; width:min(720px,calc(100vw - 24px));
    margin:0 auto; max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
    background:var(--surface); border:1px solid var(--line); border-bottom:none; border-radius:28px 28px 0 0;
    box-shadow:0 -18px 44px rgba(0,0,0,.28); transform:translateY(calc(100% + 64px)); /* +64px: Schatten offscreen */
    transition:transform .28s cubic-bezier(.22,.84,.22,1); will-change:transform;
    @media (max-width:760px) { width:100%; margin:0; border-radius:28px 28px 0 0; }
  }
  &.show .drawer-backdrop { background:rgba(4,5,8,.62); backdrop-filter:blur(7px); }
  &.show .drawer-inner { transform:translateY(0); }
}
.drawer-handle {
  display:flex; align-items:flex-start; justify-content:center; width:100%; height:54px;
  padding-top:12px; touch-action:none;
  &::after {
    content:''; width:72px; height:6px; border-radius:999px;
    background:color-mix(in srgb, var(--text) 24%, transparent);
  }
}
.drawer-content {
  padding:0 18px calc(30px + env(safe-area-inset-bottom,0px)); overflow:auto;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 86px); overscroll-behavior:contain;
  touch-action:pan-y; -webkit-overflow-scrolling:touch;
  & h2 { font-size:18px; font-weight:700; margin-bottom:10px; }
}

/* ========================= Modal ======================================== */
app-modal {
  & .overlay {
    position:fixed; inset:0; z-index:100; background:rgba(4,5,8,.64); backdrop-filter:blur(7px);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  & .modal {
    background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px;
    max-width:380px; width:100%; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); animation:pop .25s ease;
    &.celebrate { border-radius:28px; padding:34px 28px; text-align:center; }
  }
}
.modal-emoji { font-size:60px; line-height:1; margin-bottom:10px; }
.modal-title { font-weight:700; font-size:21px; letter-spacing:-.02em; margin-bottom:8px; }
.modal-body { color:var(--muted); font-size:14.5px; line-height:1.5; margin-bottom:22px; }
.modal-actions { display:flex; gap:10px; }
.mbtn {
  flex:1; padding:13px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  &.confirm { border:none; background:var(--accent); color:var(--accent-ink); font-weight:700; }
}
@keyframes pop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }

/* ========================= Update-Toast / Overlay ======================= */
.update-toast {
  position:fixed; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px)); left:50%;
  transform:translateX(-50%); z-index:110; width:min(560px,calc(100vw - 24px));
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5); animation:pop .25s ease;
  & .ut-body { flex:1; min-width:0; }
  & .ut-title { font-weight:700; font-size:15px; }
  & .ut-text { color:var(--muted); font-size:13px; margin-top:2px; }
  & .btn-accent { width:auto; flex-shrink:0; }
}
.update-overlay {
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(4,5,8,.62); backdrop-filter:blur(7px);
  & .panel {
    display:flex; align-items:center; gap:12px; color:#fff; font-size:14px;
    padding:18px 22px; border-radius:16px; background:color-mix(in srgb, var(--panel) 90%, black);
  }
}
.spinner {
  width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }