/* Hockey-Talent Verwaltung – dunkles, sportliches Theme, touch-first */
:root {
  color-scheme: dark;
  --bg: #0d1218;
  --surface-1: #161e27;
  --surface-2: #1d2731;
  --surface-3: #263241;
  --border: #2c3846;
  --text-primary: #f2f6fa;
  --text-secondary: #aab6c3;
  --text-muted: #7d8b99;
  --accent: #3ddc97;
  --accent-ink: #062016;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --ok: #3ddc97;
  --warn: #e0a83a;
  --bad: #e66767;
  --star: #f5c542;
  --radius: 14px;
  --tap: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 18, 24, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  font-size: 1.02rem;
}
.brand:hover { text-decoration: none; }
.brand .puck {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), #1c7f5c);
  display: inline-block; flex: 0 0 auto;
}
.brand small { display: block; font-size: 0.66rem; color: var(--text-muted); font-weight: 600; }
.topbar .spacer { flex: 1 1 auto; }

.role-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 700;
}
.role-chip.admin { color: var(--accent); border-color: rgba(61, 220, 151, 0.4); }

nav.main {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
nav.main ul {
  max-width: 1180px; margin: 0 auto; padding: 0 8px;
  display: flex; gap: 2px; list-style: none;
}
nav.main a {
  display: block; padding: 0 14px; line-height: var(--tap); min-height: var(--tap);
  color: var(--text-secondary); font-weight: 600; font-size: 0.92rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
nav.main a:hover { color: var(--text-primary); text-decoration: none; }
nav.main a.active { color: var(--accent); border-bottom-color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; padding: 18px 14px 64px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.2px; }
h2 { font-size: 1.12rem; margin: 26px 0 12px; }
h3 { font-size: 0.98rem; margin: 0 0 8px; }
.lead { color: var(--text-secondary); margin: 0 0 18px; font-size: 0.94rem; }

.page-head {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.page-head .spacer { flex: 1 1 auto; }

/* --- Karten --- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card { margin-top: 14px; }

.grid { display: grid; gap: 12px; }
.grid > * { min-width: 0; }
.card, .table-wrap, main { max-width: 100%; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kpi {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.kpi .label { color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; }
.kpi .value { font-size: 2rem; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.kpi .hint { color: var(--text-secondary); font-size: 0.8rem; }
.kpi.accent .value { color: var(--accent); }

/* --- Buttons --- */
.btn, button, input[type="submit"] {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-primary);
  font-weight: 650; cursor: pointer; text-align: center;
}
.btn:hover, button:hover { background: var(--surface-3); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 800; }
.btn-primary:hover { background: #55e7a9; }
.btn-danger { background: #3a1f22; border-color: #6d3236; color: #ffb4b4; }
.btn-danger:hover { background: #4c272b; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: 0.86rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.quick-actions { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.quick-actions .btn { min-height: 58px; font-size: 0.98rem; }

/* --- Formulare --- */
label { display: block; font-size: 0.8rem; color: var(--text-secondary); font-weight: 650; margin-bottom: 5px; }
input[type="text"], input[type="date"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  font: inherit; width: 100%;
  min-height: var(--tap); padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-primary);
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field { margin-bottom: 14px; }
.form-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 4px; }

.errors { background: #3a1f22; border: 1px solid #6d3236; color: #ffc9c9; border-radius: 11px; padding: 10px 14px; margin-bottom: 14px; }
.errors ul { margin: 0; padding-left: 18px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; flex: 1 1 150px; min-width: 130px; }
.filters .field.wide { flex: 2 1 240px; }

/* Segmentierte Level-Filter als grosse Checkbox-Buttons */
.toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  position: relative; display: inline-flex;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 16px;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary);
  font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.toggle input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Avatare & Badges --- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.86rem; color: #0c0f13; flex: 0 0 auto;
}
.avatar.lg { width: 62px; height: 62px; font-size: 1.24rem; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px;
  background: var(--surface-3); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.badge.hhv { color: #8ec5ff; border-color: #2c4f75; background: #16283a; }
.badge.dhb { color: #ffc08e; border-color: #7a4726; background: #3a2417; }
.badge.dosb { color: #a6f0cf; border-color: #1f6b4e; background: #123024; }
.badge.inactive { opacity: 0.5; text-decoration: line-through; }
.badge-list { display: flex; gap: 5px; flex-wrap: wrap; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; }
.status-anwesend { background: #123024; color: var(--ok); }
.status-entschuldigt { background: #362b12; color: var(--warn); }
.status-fehlend { background: #3a1f22; color: var(--bad); }
.status-offen { background: var(--surface-3); color: var(--text-muted); }

/* --- Tabellen --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--surface-1); }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.88rem; vertical-align: middle; }
th { background: var(--surface-2); color: var(--text-secondary); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; }
th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
th a.sorted { color: var(--accent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.name { white-space: nowrap; }
td .cell-name { display: flex; align-items: center; gap: 10px; }
td .cell-name strong { font-weight: 700; }

.only-mobile { display: none; }

.empty { color: var(--text-muted); padding: 22px; text-align: center; font-size: 0.9rem; }

/* --- Spielerliste als Karten (mobil) --- */
.player-cards { display: grid; gap: 10px; }
.player-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); min-height: var(--tap);
}
.player-card .meta { flex: 1 1 auto; min-width: 0; }
.player-card .meta strong { display: block; }
.player-card .meta span { display: block; color: var(--text-muted); font-size: 0.8rem; }
.player-card > .badge-list { flex: 0 0 auto; justify-content: flex-end; max-width: 38%; }

/* --- Sterne --- */
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label {
  margin: 0; cursor: pointer; font-size: 1.62rem; line-height: 1;
  color: var(--surface-3);
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  transition: color 0.08s ease-in-out;
}
.stars input:checked ~ label { color: var(--star); }
.stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.stars:hover label { color: var(--surface-3); }
.stars label:hover, .stars label:hover ~ label { color: #ffdc7a; }
.criterion { margin-bottom: 10px; }
.criterion .crit-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.stars-static { color: var(--star); letter-spacing: 1px; font-size: 0.95rem; white-space: nowrap; }
.stars-static .off { color: var(--surface-3); }

/* --- Tabs --- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tabs a {
  padding: 0 16px; line-height: var(--tap); min-height: var(--tap);
  color: var(--text-secondary); font-weight: 700; font-size: 0.92rem;
  border-bottom: 3px solid transparent;
}
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs a:hover { text-decoration: none; color: var(--text-primary); }

/* --- Anwesenheit --- */
.att-row {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); padding: 12px; margin-bottom: 10px;
}
.att-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.att-head .who { flex: 1 1 auto; min-width: 0; }
.att-head .who strong { display: block; }
.att-head .who span { color: var(--text-muted); font-size: 0.78rem; }
.att-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.att-buttons button { min-height: 50px; font-size: 0.88rem; font-weight: 700; padding: 0 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-buttons button.sel-anwesend { background: #123024; border-color: #1f6b4e; color: var(--ok); }
.att-buttons button.sel-entschuldigt { background: #362b12; border-color: #7a5b1e; color: var(--warn); }
.att-buttons button.sel-fehlend { background: #3a1f22; border-color: #6d3236; color: var(--bad); }
.att-remark { margin-top: 8px; }

/* --- Bewertungskarten --- */
.rating-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); margin-bottom: 10px; overflow: hidden;
}
.rating-card[open] { border-color: #3a4b5d; }
.rating-card > summary {
  list-style: none; cursor: pointer; padding: 12px;
  display: flex; align-items: center; gap: 11px; min-height: var(--tap);
}
.rating-card > summary::-webkit-details-marker { display: none; }
.rating-card summary .who { flex: 1 1 auto; min-width: 0; }
.rating-card summary .who strong { display: block; }
.rating-card summary .who span { color: var(--text-muted); font-size: 0.78rem; }
.rating-body { padding: 0 12px 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.metrics-toggle { margin: 6px 0 10px; }
.metrics-toggle > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-weight: 650; font-size: 0.88rem; list-style: none; }
.metrics-toggle > summary::-webkit-details-marker { display: none; }
.metrics-toggle > summary::before { content: "›"; display: inline-block; font-size: 1.2rem; line-height: 1; transition: transform 0.12s ease-in-out; }
.metrics-toggle[open] > summary::before { transform: rotate(90deg); }
.saved-flag { color: var(--accent); font-size: 0.75rem; font-weight: 800; }

/* --- Chart --- */
.chart-box { position: relative; height: 300px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* --- Rollenauswahl --- */
.role-screen { max-width: 520px; margin: 8vh auto; padding: 0 16px; }
.role-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
.role-options { display: grid; gap: 12px; margin-top: 18px; }
.role-options button { min-height: 76px; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px 18px; text-align: left; }
.role-options button strong { font-size: 1.05rem; }
.role-options button span { font-weight: 500; font-size: 0.82rem; color: var(--text-secondary); }
.role-options button.btn-primary span { color: rgba(6, 32, 22, 0.8); }

.demo-note { margin-top: 18px; color: var(--text-muted); font-size: 0.78rem; }

.meta-list { list-style: none; padding: 0; margin: 0; }
.meta-list li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.meta-list li:last-child { border-bottom: none; }
.meta-list li b { flex: 0 0 116px; color: var(--text-muted); font-weight: 650; font-size: 0.8rem; }
.meta-list li span { flex: 1 1 auto; word-break: break-word; }

.history-entry { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); padding: 13px; margin-bottom: 10px; }
.history-entry .head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.history-entry .head .date { font-weight: 800; }
.history-entry .crits { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.history-entry .crits div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: var(--text-secondary); }
.history-entry .comment { margin-top: 9px; font-size: 0.88rem; color: var(--text-primary); }
.history-entry .metrics { margin-top: 7px; font-size: 0.78rem; color: var(--text-muted); }

.bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: 7px; }
.bar > i { display: block; height: 100%; background: var(--accent); }

.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink); font-weight: 800;
  padding: 10px 18px; border-radius: 999px; z-index: 50; font-size: 0.86rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

@media (max-width: 640px) {
  main { padding: 14px 12px 60px; }
  .att-buttons button { font-size: 0.8rem; }
  .brand small { font-size: 0.6rem; }
  h1 { font-size: 1.28rem; }
  .kpi .value { font-size: 1.62rem; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .hide-sm { display: none !important; }
  .only-desktop { display: none !important; }
  .only-mobile { display: block !important; }
  .meta-list li { flex-direction: column; gap: 2px; }
  .meta-list li b { flex: none; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* --- Teilnehmer-Quellen (Gruppe / ad hoc / Historie) --- */
.source-list { margin-top: 4px; }
.source-list .badge { font-size: 0.68rem; padding: 1px 7px; }
.badge.source-adhoc { color: #ffd79a; border-color: #7a5b1e; background: #362b12; }
.badge.source-history { color: var(--text-muted); border-style: dashed; }