/* ==========================================
   Version 1.1
   ========================================== */

:root {
  /* Vereinsfarben */
  --club-bordeaux: #5b0000;
  --club-yellow:   #F0EC74;
  /* Grautöne/Neutrals */
  --bg-page:   #f6f7f9;
  --bg-card:   #ffffff;
  --border:    #d0d7de;
  --text:      #111;
  --text-dim:  #475569;
  --muted:     #6b7280;
  --btn-bg:    #f9fafb;
  --btn-bdr:   #C7C9C7;
  --btn-hover: #C7C9C7;
  --okay:      #22c55e; /* Ja */
  --maybe:     #facc15; /* Unsicher */
  --nope:      #f97373; /* Nein */
}

/* Grundlayout */
html, body { height: 100%; }
body { font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: var(--bg-page); color: var(--text); }
main { max-width: 900px; margin: 16px auto; padding: 0 12px; }

/* ======= HEADER (3-Spalten-Grid) ======= */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* links / mitte / rechts */
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--club-bordeaux);
  border-bottom: 4px solid var(--club-yellow);
  position: -webkit-sticky; /* Alt-iOS Safari */
  position: sticky;
  top: 0;
  z-index: 10;
  color: #fff;
}
.header-left  { justify-self: start;  min-width: 0; }
.header-center{ justify-self: center; }
.header-right { justify-self: end;    display: none; gap: 8px; align-items: center; flex-wrap: wrap; color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: transparent; display: block; }
.brand-title { color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand-sub   { color: #fff; opacity: .9; white-space: nowrap; }

#userbar { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #fff; }
#whoami { color: #fff !important; font-weight: 600; }

/* Kalender-Button (auch im Header-Zentrum) */
.calendar-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--club-yellow);
  text-decoration: none;
  color: #222223;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: all .15s;
}
.calendar-btn:hover { background: #ffffff; color: var(--club-bordeaux); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,.15); }

/* Globaler Button-Stil */
button, .btn {
  background: var(--btn-bg);
  color: #222223;
  border: 1px solid var(--btn-bdr);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease-in-out, color .15s ease-in-out, border-color .15s;
}
button:focus-visible { outline: 2px solid var(--club-yellow); outline-offset: 2px; }
button:hover:not(.active) { background: var(--btn-hover); border-color: var(--btn-hover); }
button.active { background: var(--club-yellow); border-color: var(--btn-bdr); color: #222223; font-weight: 600; }
button.active:hover { background: #e6e065; }
button.danger { border-color: #fecaca; }
button.danger:hover { background: #fef2f2; }
button.secondary { border-color: #d4d4d8; background: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }
a.btn { text-decoration: none; }

/* Karten/Events */
.card { background: var(--bg-card); border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.row { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; }
.when { background: #f1f5f9; border-radius: 12px; padding: 8px; text-align: center; }
.date { font-weight: 700; }
.time { font-size: 12px; color: var(--text-dim); }
.title { font-weight: 600; margin-bottom: 4px; }
.meta  { font-size: 14px; color: var(--text-dim); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.event-notes { margin-bottom: 6px; padding: 4px 8px; border-radius: 8px; background: #fffde7; border: 1px dashed var(--club-yellow); font-size: 13px; color: #222223; }

/* Edit-Block */
.edit-block.card { background-color: #fffde7; border: 1px solid #e0dca5; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.05); padding: 16px 20px; margin-bottom: 24px; }
.edit-block h4 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; color: #222; }
.edit-grid { display: grid; grid-template-columns: 2fr 160px 120px 1fr 1.2fr; gap: 8px; align-items: center; }
.edit-grid input, .edit-grid textarea { width: 100%; height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: .95rem; box-sizing: border-box; background: #fff; }
.edit-grid textarea { min-height: 38px; resize: vertical; }
.edit-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }

/* Banner (offline / info) */
#offline-banner { max-width: 900px; margin: 0 auto; background: #fee2e2; border-bottom: 1px solid #fecaca; color: #991b1b; font-size: 13px; padding: 6px 12px; display: none; }
#offline-banner.visible { display: block; }
#banner { display: none; position: sticky; top: 0; z-index: 99999; padding: 10px 12px; background: #fff3cd; border-bottom: 1px solid #ffeeba; font-weight: 600; }
#banner.visible { display: block; }

/* Map- & Kalender-Buttons in Karten */
.map-btn { border: 1px solid #dbeafe; background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.map-btn:hover { background: #dbeafe; }
.cal-btn { border: 1px solid #bbf7d0; background: #dcfce7; color: #166534; border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.cal-btn:hover { background: #bbf7d0; }

/* Duplizieren-Dialog */
.dup-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: none; align-items: center; justify-content: center; z-index: 50; }
.dup-dialog-card { background: #fff; border-radius: 16px; padding: 16px; border: 1px solid #e5e7eb; max-width: 320px; width: 90%; box-shadow: 0 10px 25px rgba(15,23,42,.25); }
.dup-dialog-card h4 { margin: 0 0 8px; font-size: 15px; }
.dup-dialog-card p { margin: 0 0 10px; font-size: 13px; color: #4b5563; }
.dup-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Abgesagte Termine */
.card.canceled { background: #fef2f2; border-color: #fecaca; }
.canceled-row .title { color: #991b1b; }
.badge-canceled { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fee2e2; border: 1px solid #fecaca; font-size: 11px; color: #b91c1c; font-weight: 600; text-transform: uppercase; }
.canceled-note { margin-top: 4px; font-size: 12px; color: #b91c1c; font-weight: 500; }
.cancel-btn.active { background: #fee2e2; border-color: #f97373; }

/* Actions-Leisten */
.actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.actions.toggle-buttons { justify-content: flex-start; } /* linksbündig */

/* Admin-Formular */
#adminForm { display: grid; grid-template-columns: 2fr 160px 120px 1fr 1fr auto; gap: 8px; align-items: center; }
#adminForm input, #adminForm select, #adminForm textarea { height: 38px; border-radius: 6px; border: 1px solid var(--border); padding: 6px 10px; box-sizing: border-box; margin: 0; }
#adminForm textarea { resize: vertical; min-height: 38px; }
#adminForm .series-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: #4b5563; }
#adminForm .series-fields label { display: flex; align-items: center; gap: 6px; margin: 0; }
#adminForm .series-fields input { width: 70px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; box-sizing: border-box; }
#adminForm .series-fields span { white-space: nowrap; font-size: 13px; color: #555; margin-left: 4px; }
#adminForm button[type="submit"] { grid-column: 1 / -1; justify-self: flex-start; }

/* Statistik */
.stats-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; color: #374151; }
.stats-controls select, .stats-controls input[type="month"], .stats-controls input[type="number"] { padding: 4px 8px; border-radius: 999px; border: 1px solid #e5e7eb; font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.stat-card { background: #f9fafb; border-radius: 12px; padding: 8px; border: 1px solid #e5e7eb; }
.stat-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.stat-value { font-size: 16px; font-weight: 600; color: #111827; }
.stats-chart { margin-top: 10px; border-top: 1px dashed #e5e7eb; padding-top: 8px; }
.stats-bar-row { display: grid; grid-template-columns: 120px 1fr 40px; gap: 6px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.stats-bar-label { color: #4b5563; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.stats-bar-track { position: relative; height: 10px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.stats-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #9ca3af; }
.stats-bar-fill.yes   { background: var(--okay); }
.stats-bar-fill.maybe { background: var(--maybe); }
.stats-bar-fill.no    { background: var(--nope); }
.stats-bar-value { text-align: right; color: #111827; font-variant-numeric: tabular-nums; }

/* Archiv */
#archiveSection .row { padding-top: 8px; margin-top: 8px; }
#archiveSection .row + .row { border-top: 1.5px dashed #d1d5db; margin-top: 14px; padding-top: 12px; }
#archiveSection .row:first-child { border-top: none; margin-top: 0; }
.archive-rsvp { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.archive-rsvp-toggle { margin-top: 6px; font-size: 13px; }
.archive-rsvp-toggle.active { background: var(--club-yellow); border-color: #e5e7eb; }

/* Benutzerverwaltung */
#useradmin table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
#useradmin th, #useradmin td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; }
#useradmin thead th { font-weight: 600; color: #4b5563; }
#useradmin tbody tr:nth-child(even) { background: #f9fafb; }
#useradmin td:last-child { white-space: nowrap; }

/* Login-Abstände */
.login-container input[type="email"],
.login-container input[type="password"] { margin-right: 8px; margin-bottom: 6px; }
.login-container button { margin-right: 8px; margin-top: 6px; }

/* Log-Tabelle */
.log-block { margin-top: 16px; }
.log-title { font-weight: 600; margin-bottom: 6px; }
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th, .log-table td { padding: 4px 8px; text-align: left; vertical-align: top; }
.log-table thead th { border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.log-table tbody tr:nth-child(odd) { background-color: #f9fafb; }
.log-table tbody tr:nth-child(even) { background-color: #ffffff; }
.log-table tbody tr:hover { background-color: #f1f5f9; }

/* „Dein nächstes Training“ & „Deine Zusagen“ */
.next-training-line { font-size: 1.1rem; font-weight: 500; margin-bottom: .6rem; }
.my-list { padding-left: 0; }
.confirmed-item { font-size: 1rem; line-height: 1.6; list-style: none; margin-left: 0; }
.confirmed-item::before { content: ""; }

/* Togglebar: Buttons + Export-Label wie Buttons */
#togglebar .toggle-buttons button,
#togglebar .toggle-buttons label[role="button"],
#btn-toggle-nextinfo,
#btn-toggle-export { all: unset; }
#togglebar .toggle-buttons button,
#togglebar .toggle-buttons label[role="button"],
#btn-toggle-nextinfo,
#btn-toggle-export {
  display: inline-block; background: var(--btn-bg); color: #222223; border: 1px solid var(--btn-bdr); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 500; line-height: normal; cursor: pointer; user-select: none; transition: all .15s;
}

/* Hover-Effekt */
#togglebar .toggle-buttons button:hover:not(.active),
#togglebar .toggle-buttons label[role="button"]:hover:not(.active),
#btn-toggle-nextinfo:hover:not(.active),
#btn-toggle-export:hover:not(.active) { background: var(--btn-hover); border-color: var(--btn-hover); }

/* Links ausrichten + „Benutzer“ nach rechts */
#togglebar .toggle-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
#btn-toggle-users { margin-left: auto; }

/* Aktiv-Zustand über :has() für die zwei Checkbox-Labels */
main:has(#toggle-nextinfo:checked) #btn-toggle-nextinfo,
main:has(#toggle-export:checked)    #btn-toggle-export {
  background: var(--club-yellow); border-color: var(--btn-bdr); color: #222223; font-weight: 600;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 900px) {
  .brand-sub { display: none; } /* Untertitel bei wenig Platz ausblenden */
}
@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr auto; grid-auto-rows: minmax(0, auto); }
  .header-left  { grid-column: 1 / 2; }
  .header-center{ grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
  .header-right { grid-column: 2 / 3; }
  #togglebar .toggle-buttons { gap: 8px; }
  .edit-grid { grid-template-columns: 1fr; }
  #adminForm { grid-template-columns: 1fr 1fr; }
  #adminForm textarea, #adminForm .series-fields, #adminForm button[type="submit"] { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar-row { grid-template-columns: 100px 1fr 32px; }
}

/* ===== FIX: Toggle-Buttons IMMER gelb, wenn .active ===== */
#togglebar .toggle-buttons > button.active,
#togglebar .toggle-buttons > label[role="button"].active,
#btn-toggle-nextinfo.active,
#btn-toggle-export.active {
  background-color: var(--club-yellow) !important;
  border-color: var(--btn-bdr) !important;
  color: #222223 !important;
  font-weight: 600 !important;
}

/* Optionale Klarheit: Hover soll .active nicht überblenden */
#togglebar .toggle-buttons > button.active:hover,
#togglebar .toggle-buttons > label[role="button"].active:hover {
  background-color: var(--club-yellow) !important;
}

/* Brand-Link kapselt Logo + Titel + Untertitel */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;     /* keine Unterstreichung */
  color: #fff;               /* Text im roten Header weiss */
}

/* Logo wie bisher */
.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  background: transparent;
  display: block;
}

/* Titel/Untertitel im Link erben Weiss */
.brand-title { color: #fff; font-weight: 700; white-space: nowrap; }
.brand-sub   { color: #fff; opacity: .9;     white-space: nowrap; }


/* Admin-Buttons konsequent vertikal anordnen */
.admin-actions {
  display: flex;
  flex-direction: column;   /* vertikal statt nebeneinander */
  gap: 8px;                 /* gleichmäßiger Abstand */
  align-items: flex-start;  /* linksbündig */
}

/* Optional: Buttons auf volle Breite strecken (für Mobile) */
.admin-actions button,
.admin-actions form button {
  width: 100%;              /* volle Breite */
  text-align: center;
}


/* ========== Admin-Buttons: zentrale Breite + responsiv ========== */
:root {
  /* Passe die Breite nach Geschmack an (z. B. 160px, 180px, 200px) */
  --admin-btn-width: 180px;
}

.admin-actions {
  display: flex;
  flex-direction: column;   /* vertikal untereinander */
  gap: 8px;                 /* konsistenter Abstand */
  align-items: flex-start;  /* linksbündig */
}

/* Einheitliche Breite für alle Buttons in der Admin-Spalte */
.admin-actions button,
.admin-actions form button {
  width: var(--admin-btn-width);
  min-width: var(--admin-btn-width);  /* verhindert Schrumpfen */
  text-align: center;
}

/* Falls ein Button in einem <form> steckt, soll das Form nicht nebeneinander bauen */
.admin-actions form {
  display: block;           /* statt inline-flex */
  margin: 0;
}

/* Mobile: volle Breite für bessere Trefferfläche */
@media (max-width: 700px) {
  .admin-actions button,
  .admin-actions form button {
    width: 100%;
    min-width: 0;
  }
}