/*
 * ═══════════════════════════════════════════════════════
 *  BC Selb – Turnierkalender Override CSS
 *  Einbinden in turnierkalender.php, direkt vor </head>:
 *
 *  <link rel="stylesheet" href="turnierkalender-override.css">
 *
 *  (Datei in denselben Ordner wie turnierkalender.php legen)
 * ═══════════════════════════════════════════════════════
 */

/* ── 1. Farb-Variablen an das Hauptdesign angleichen ───── */
:root {
  --c-primary:      #00715D;   /* BC Selb Grün */
  --c-accent:       #f39c12;   /* BC Selb Amber */
  --c-accent-soft:  rgba(243,156,18,0.10);
  --c-header-bg:    #003d2e;   /* Header dunkelgrün */

  /* Disziplin-Farben */
  --c-pool:         #3b8ed4;   /* Blau für Pool */
  --c-snooker:      #00715D;   /* Grün für Snooker */
  --c-verein:       #e74c3c;   /* Rot für Vereins-Events */

  /* Typografie → Inter/Montserrat statt Barlow/DM Sans */
  --font-display: 'Montserrat', 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', 'DM Sans', sans-serif;
}

/* Dark Mode ebenfalls anpassen */
body.dark-mode {
  --c-primary:      #00b894;
  --c-accent:       #f39c12;
  --c-accent-soft:  rgba(243,156,18,0.12);
  --c-header-bg:    #030f09;
}

/* ── 2. Google Fonts laden ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ── 3. Header: Logo-Bild statt "BC"-Kürzel ────────────── */

/* Club-Badge verbergen & durch Logo ersetzen */
.club-badge {
  background: transparent !important;
  border-radius: 0 !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 0 !important;           /* Text ausblenden */
  color: transparent !important;
  background-image: url('../BCSelb_Logo_transparent.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* "1. BC Selb" Titel im Header */
.main-header h1 {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -.01em !important;
}

.main-header h1 span {
  color: var(--c-accent) !important;
}

/* "Zurück zur Startseite" Link – falls im PHP vorhanden,
   hier schöner gestaltet */
.start-link {
  gap: 12px !important;
}

/* ── 4. Monat-Navigation ────────────────────────────────── */
.month-nav-btn {
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

.month-nav-btn:hover {
  background-color: rgba(243,156,18,0.15) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

.month-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

/* ── 5. Kalender-Wochentage ─────────────────────────────── */
.calendar-weekday {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* ── 6. Event-Kacheln ───────────────────────────────────── */
.event-mini {
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: .72em !important;
  letter-spacing: .01em !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.event-mini:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.15) !important;
}

/* Heute-Tag hervorheben */
.calendar-day.today {
  border-color: var(--c-accent) !important;
  background-color: rgba(243,156,18,0.06) !important;
}

.calendar-day.today .day-number {
  background-color: var(--c-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 7. Modal / Event-Popup ─────────────────────────────── */
.modal-content {
  border-radius: 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.modal-content h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #003d2e !important;
}

body.dark-mode .modal-content h3 {
  color: #00b894 !important;
}

.close-button {
  color: #6b7c78 !important;
  font-size: 1.6rem !important;
  transition: color .2s !important;
}

.close-button:hover {
  color: var(--c-accent) !important;
}

/* ── 8. Buttons im Popup / Formular ─────────────────────── */
.btn-primary,
button[type="submit"],
.admin-save-btn {
  background-color: #00715D !important;
  border-color: #00715D !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  letter-spacing: .03em !important;
  transition: background .2s, transform .15s !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.admin-save-btn:hover {
  background-color: #003d2e !important;
  transform: translateY(-1px) !important;
}

.btn-danger,
.admin-delete-btn {
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* ── 9. Footer des Kalenders ────────────────────────────── */
.main-footer {
  background-color: #060e0b !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  font-family: 'Inter', sans-serif !important;
}

.main-footer a {
  color: rgba(255,255,255,.55) !important;
  transition: color .2s !important;
}

.main-footer a:hover {
  color: var(--c-accent) !important;
}

/* ── 10. Dark-Mode Toggle ───────────────────────────────── */
.dark-mode-toggle {
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
}

/* ── 11. Scroll-to-Today Button ─────────────────────────── */
.scroll-to-today-btn {
  background-color: var(--c-accent) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(243,156,18,.4) !important;
}

/* ── 12. Admin-Leiste ───────────────────────────────────── */
.admin-bar {
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px !important;
}

/* ── 13. Zurück-Link in der Seitenleiste / Navigation ───── */
/* Falls du einen Link "← zur Hauptseite" im PHP ergänzen möchtest,
   füge ihn so ein:
   <a href="../index.html" class="back-to-main">← Zur Hauptseite</a>

   Und dieser Stil greift dann: */
.back-to-main {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.65);
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.back-to-main:hover {
  color: var(--c-accent);
}