/* ==================================================
   New Yorker Lions Spielplan Notiz
   Eigenständig, Darkmode Cattppuccin Mocha
   View Mode Only
   ================================================== */

/* ---------- Farben ---------- */
:root {
  --lions-darkblue: #13324E;
  --lions-white: #FFFFFF;
  --lions-red: #AF443B;
  --lions-grayblue: #425E72;
}

/* ---------- Hintergrund - View Mode Only ---------- */
.gfl-table-note.markdown-preview-view {
  background: linear-gradient(135deg, rgba(19, 50, 78, 0.5) 0%, rgba(66, 94, 114, 0.4) 100%) !important;
  padding: 1.5em !important;
}

/* ---------- H1 Titel ---------- */
.gfl-table-note.markdown-preview-view h1 {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: var(--lions-white) !important;
  border-bottom: 4px solid var(--lions-red) !important;
  padding-bottom: 0.3em !important;
  margin-bottom: 1em !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

/* ---------- H2 Heim/Auswärtsspiel ---------- */
.gfl-table-note.markdown-preview-view h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--lions-white) !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  text-align: center !important;
  border-bottom: 3px solid var(--lions-red) !important;
  padding-bottom: 0.25em !important;
}

/* ---------- H3 Spieltage ---------- */
.gfl-table-note.markdown-preview-view h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--lions-white) !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.5em !important;
  margin-left: 1em !important;
  border-left: 6px solid var(--lions-red) !important;
  padding-left: 0.5em !important;
}

/* ---------- Links ---------- */
.gfl-table-note.markdown-preview-view a {
  color: var(--lions-red) !important;
  text-decoration: underline !important;
}

.gfl-table-note.markdown-preview-view a:hover {
  color: var(--lions-grayblue) !important;
}

/* ---------- HR ---------- */
.gfl-table-note.markdown-preview-view hr {
  border: 2px solid var(--lions-red) !important;
  margin: 1em 0 !important;
}

/* ---------- Checkbox Listen zentral ---------- */
.gfl-table-note.markdown-preview-view ul.task-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1em !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5em 0 1.5em 0 !important;
}

/* Box-Format für Checkbox-Items */
.gfl-table-note.markdown-preview-view ul.task-list li {
  background-color: rgba(175, 68, 59, 0.15) !important;
  border: 2px solid var(--lions-red) !important;
  border-radius: 8px !important;
  padding: 0.5em 0.75em !important;
  min-width: 220px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover Effekt für Checkbox Box */
.gfl-table-note.markdown-preview-view ul.task-list li:hover {
  background-color: rgba(66, 94, 114, 0.2) !important;
}

/* Checkbox Styling */
.gfl-table-note.markdown-preview-view input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--lions-red) !important;
  border-radius: 4px !important;
  margin-right: 0.5em !important;
  position: relative !important;
  cursor: pointer !important;
  background-color: var(--lions-grayblue) !important;
}

/* Checked State */
.gfl-table-note.markdown-preview-view input[type="checkbox"]:checked::after {
  content: "✔" !important;
  color: var(--lions-white) !important;
  position: absolute !important;
  top: 0 !important;
  left: 1px !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

/* Text bei erledigten Tasks */
.gfl-table-note.markdown-preview-view li.is-checked {
  text-decoration: line-through !important;
  color: var(--lions-white) !important;
}

/* ---------- Tabellen Styling ---------- */
.gfl-table-note.markdown-preview-view table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0.8em 0 1.5em 0 !important;
  font-size: 0.95rem !important;
  color: var(--lions-white) !important;
  background-color: rgba(19, 50, 78, 0.4) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Tabellenkopf */
.gfl-table-note.markdown-preview-view thead tr {
  background-color: var(--lions-darkblue) !important;
}

.gfl-table-note.markdown-preview-view th {
  color: var(--lions-white) !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  text-align: left !important;
  border-bottom: 2px solid var(--lions-red) !important;
}

/* Tabellenzellen */
.gfl-table-note.markdown-preview-view td {
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--lions-white) !important;
}

/* Zebra-Streifen */
.gfl-table-note.markdown-preview-view tbody tr:nth-child(even) {
  background-color: rgba(66, 94, 114, 0.15) !important;
}

/* Hover: Text lesbar */
.gfl-table-note.markdown-preview-view tbody tr:hover {
  background-color: rgba(175, 68, 59, 0.3) !important;
  color: var(--lions-white) !important;
}

/* Ergebnis Spalte zentriert */
.gfl-table-note.markdown-preview-view td:last-child {
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--lions-red) !important;
}

/* Uhrzeit Spalte */
.gfl-table-note.markdown-preview-view td:nth-child(1) {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Stadion Spalte */
.gfl-table-note.markdown-preview-view td:nth-child(4) {
  font-size: 0.9em !important;
  color: var(--lions-white) !important;
}

/* Mobile Support */
@media (max-width: 800px) {
  .gfl-table-note.markdown-preview-view table {
    display: block !important;
    overflow-x: auto !important;
  }
  
  .gfl-table-note.markdown-preview-view ul.task-list {
    flex-direction: column !important;
    align-items: center !important;
  }
}

.gfl-table-note img {
  display: block;
  margin: 0 auto;
}