/* HandballTracker – Farbwelt HC Erlangen: Rot, Dunkelblau (Navy), Weiß */
:root {
  --bg: #0e1430;
  --bg-card: #182050;
  --bg-card-2: #212b63;
  --border: #2f3b7d;
  --text: #f4f6fc;
  --text-dim: #a3adda;
  --accent: #e30613;            /* HCE-Rot (Flächen, Buttons) */
  --accent-hi: #ff4b55;         /* helleres Rot für Text auf Navy */
  --accent-soft: rgba(227, 6, 19, 0.18);
  --green: #3ddc84;
  --yellow: #ffd24d;
  --red: #ff5566;
  --blue: #6ea8ff;
  --radius: 14px;
  --nav-h: 62px;
}

* { box-sizing: border-box; }

/* hidden-Attribut gewinnt immer – auch gegen .form input { display:block } */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 15, 38, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--accent); /* rote Linie wie im HCE-Look */
}
.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo { font-size: 1.05rem; letter-spacing: 0.3px; }
.icon-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
}

/* ---------- Layout ---------- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 28px);
}
h1 { font-size: 1.45rem; margin: 8px 0 16px; }
.hint { color: var(--text-dim); font-size: 0.88rem; margin: -8px 0 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card-title { font-weight: 600; margin-bottom: 12px; font-size: 0.95rem; }
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.card-grid .card { margin-bottom: 0; }

.stat-card { text-align: center; }
.stat-label { color: var(--text-dim); font-size: 0.78rem; margin-bottom: 6px; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--accent-hi); }
.stat-sub { color: var(--text-dim); font-size: 0.78rem; margin-top: 4px; }

/* ---------- Formulare ---------- */
.form label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.form input, .form select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  background: var(--bg-card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
}
.form input:focus, .form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form input[type="range"] { padding: 0; accent-color: var(--accent); height: 28px; }
.form-row { display: flex; gap: 12px; }
.form-row > label, .form-row > button { flex: 1; min-width: 0; }
.form-row.row-bottom { align-items: flex-end; }
.form-row .grow { flex: 1; margin-bottom: 0; }
.btn-inline { flex: 0 0 auto; width: auto; padding: 11px 18px; white-space: nowrap; }

.btn {
  display: inline-block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn-primary:active { transform: scale(0.98); }
.btn-small { width: auto; padding: 6px 12px; font-size: 0.82rem; }

/* Chips (Trainingsart) */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); font-weight: 600; }

/* ---------- Listen ---------- */
.entry-list { display: flex; flex-direction: column; gap: 8px; }
.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.entry-icon { font-size: 1.3rem; }
.entry-main { flex: 1; min-width: 0; }
.entry-title { font-weight: 600; font-size: 0.92rem; }
.entry-sub { color: var(--text-dim); font-size: 0.8rem; margin-top: 2px; }
.entry-value { font-weight: 700; color: var(--accent-hi); white-space: nowrap; }
.entry-del {
  background: none; border: none; color: var(--text-dim);
  font-size: 1rem; cursor: pointer; padding: 4px;
}
.entry-del:hover { color: var(--red); }
.simple-list { color: var(--text-dim); font-size: 0.9rem; display: flex; flex-direction: column; gap: 8px; }
.simple-list .entry { padding: 8px 12px; }

/* ---------- Charts ---------- */
.chart-box { position: relative; height: 220px; }
.chart-box-tall { height: 320px; }
.legend-note { color: var(--text-dim); font-size: 0.8rem; margin-top: 8px; text-align: center; }

/* ---------- ACWR / Readiness ---------- */
.acwr-row { display: flex; align-items: center; gap: 12px; }
.acwr-badge {
  min-width: 64px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  background: var(--bg-card-2);
}
.acwr-badge.ok { background: rgba(61, 220, 132, 0.15); color: var(--green); }
.acwr-badge.warn { background: rgba(255, 210, 77, 0.15); color: var(--yellow); }
.acwr-badge.danger { background: rgba(255, 85, 102, 0.15); color: var(--red); }
.acwr-badge.low { background: rgba(91, 157, 255, 0.15); color: var(--blue); }
.acwr-text { font-size: 0.88rem; color: var(--text-dim); flex: 1; }

.readiness-score { font-size: 2rem; font-weight: 700; }
.readiness-bar {
  height: 10px; border-radius: 6px; background: var(--bg-card-2);
  overflow: hidden; margin: 10px 0;
}
.readiness-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s; }

/* ---------- Potenzial ---------- */
.focus-item {
  background: var(--bg-card-2);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.focus-item h3 { margin: 0 0 6px; font-size: 0.95rem; }
.focus-item ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 0.85rem; }
.focus-item li { margin-bottom: 3px; }
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-dim); }

.slider-row { margin-bottom: 14px; }
.slider-row .slider-head {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-dim); margin-bottom: 4px;
}
.slider-row .slider-head b { color: var(--text); }

/* ---------- Ziele ---------- */
.goal-progress {
  height: 8px; background: var(--bg-card-2);
  border-radius: 5px; overflow: hidden; margin-top: 8px;
}
.goal-progress-fill { height: 100%; background: var(--green); border-radius: 5px; }
.goal-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- Tests ---------- */
.test-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 12px 0;
}
.test-stat { text-align: center; background: var(--bg-card-2); border-radius: 10px; padding: 10px 6px; }
.test-stat .v { font-weight: 700; font-size: 1.1rem; }
.test-stat .l { color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; }
.pb-flash { color: var(--green); font-weight: 700; }

/* ---------- Navigation ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(12, 17, 42, 0.97);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 30;
}
.nav-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.62rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.nav-btn span { font-size: 1.25rem; }
.nav-btn.active { color: var(--accent-hi); font-weight: 700; }

/* ---------- Dialog & Toast ---------- */
dialog {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: min(92vw, 460px);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog .btn { font-size: 0.92rem; padding: 11px 12px; }
dialog .form label { margin-bottom: 10px; }

/* Sektionen im Einstellungs-Dialog */
.settings-sec {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dialog-list { margin: 10px 0 4px; }
.dialog-list:empty { display: none; }

.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 20px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card-2);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  z-index: 50;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Segmente (Training/Spiele/Geplant) ---------- */
.seg {
  display: flex; gap: 6px; margin-bottom: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
}
.seg-btn {
  flex: 1; padding: 9px; border: none; border-radius: 9px;
  background: none; color: var(--text-dim); font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.seg-btn.active { background: var(--accent); color: #fff; }

/* ---------- Badges ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge { text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--bg-card-2); }
.badge .b-icon { font-size: 1.6rem; }
.badge .b-label { font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; line-height: 1.25; }
.badge.locked { opacity: 0.35; filter: grayscale(1); }
.badge.earned { outline: 1px solid var(--accent); }

/* ---------- Trainer-Ansicht ---------- */
.view-as {
  background: var(--bg-card-2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px; padding: 6px 8px; font-size: 0.85rem;
  max-width: 160px;
}
.share-code {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: 10px; font-family: ui-monospace, monospace; font-size: 1.2rem;
  letter-spacing: 2px; color: var(--accent-hi); font-weight: 700;
}
/* Read-only: fremde Daten ansehen, nichts ändern */
body.readonly form, body.readonly .entry-del, body.readonly .goal-actions,
body.readonly #btn-import, body.readonly #card-tasks button,
body.readonly #task-list input, body.readonly #btn-ics-import { pointer-events: none; }
body.readonly form, body.readonly .entry-del, body.readonly .goal-actions { opacity: 0.35; }
.readonly-banner {
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent-hi); border-radius: 10px; padding: 8px 12px;
  font-size: 0.85rem; font-weight: 600; margin-bottom: 14px;
}

/* ---------- Aufgaben ---------- */
.task-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.task-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.task-row.done .task-text { text-decoration: line-through; color: var(--text-dim); }
.task-cat { font-size: 0.7rem; color: var(--accent-hi); display: block; }

/* ---------- Druck / PDF ---------- */
@media print {
  .topbar, .bottom-nav, form, .btn, dialog, .icon-btn, .seg { display: none !important; }
  body { background: #fff; color: #000; }
  .card { background: #fff; border-color: #bbb; break-inside: avoid; }
  .card-title, h1, .stat-value, .entry-title { color: #000; }
  .entry, .test-stat, .badge { background: #f5f5f5; }
  .stat-label, .entry-sub, .hint, .acwr-text { color: #444; }
  .view[hidden] { display: none; }
  main { padding-bottom: 0; max-width: 100%; }
}

@media (min-width: 640px) {
  .chart-box { height: 260px; }
  h1 { font-size: 1.7rem; }
}