/* tables.css
 * Enthält alle Styles für Tabellen, Tabellen-Wrapper und tabellenbezogene Komponenten.
 * Layout, Farben, Typografie und Responsive-Regeln für Tabellen werden hier gebündelt.
 */

/* Tipp-Tabelle */
.tipp-tabelle {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.tipp-tabelle th,
.tipp-tabelle td {
  text-align: center;
  padding: 8px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.tipp-tabelle thead tr:first-child th {
  border-top: none;
}

.tipp-tabelle tbody tr:last-child td {
  border-bottom: none;
}

.tipp-tabelle th:first-child,
.tipp-tabelle td:first-child {
  border-left: none;
}

.tipp-tabelle th:last-child,
.tipp-tabelle td:last-child {
  border-right: none;
}

.alternative-view tbody tr.current-user {
  background-color: #fff3e6;
}

.tipp-tabelle .tipp-team-home-cell {
  text-align: right;
  padding: 8px;
  width: 230px;
  border-right: none;
}

.tipp-tabelle .tipp-vs-cell {
  text-align: center;
  color: #666;
  font-weight: 600;
  padding: 8px 4px;
  width: 20px;
  border-left: none;
  border-right: none;
}

.tipp-tabelle .tipp-team-away-cell {
  text-align: left;
  padding: 8px;
  width: 230px;
  border-left: none;
}

/* Tabellen-Wrapper für horizontalen Scroll */
.tipp-tabelle-wrapper, .alternative-view {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
  margin: 8px 0 20px 0;
  background: #ffffff;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tipp-tabelle th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.tipp-result-header, .tipp-result-cell {
  border: 1px solid #ddd;
}

/* Partie-Header mit Filter-Icon */
.partie-header {
  position: relative;
  text-align: center;
}

.partie-text {
  display: inline-block;
}

/* Filter-Bereich (Count + Icon) */
.filter-area {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Filter-Count */
.filter-count {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

/* Filter-Icon im Tabellenkopf */
.filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: #666;
  text-decoration: none;
  vertical-align: middle;
}

.filter-icon:hover {
  background-color: rgba(255, 140, 25, 0.1);
  color: #FF8C19;
}

.filter-icon.active {
  background-color: #FF8C19;
  color: white;
}

.filter-icon.active:hover {
  background-color: #ff9f3d;
}

.filter-icon.disabled {
  opacity: 0.4;
  cursor: default;
}

.filter-icon svg {
  display: block;
}

.tipp-richtig {
  background-color: #90EE90;
}

.tipp-penalties-row td {
  background-color: #f9f9f9;
  font-weight: 600;
}

.tipp-penalties-label {
  text-align: left;
  font-weight: 700;
}

.tipp-penalty-cell {
  background-color: #fdf7ec;
}

.tipp-penalties-row .tipp-penalty-active {
  background-color: #ffcccc;
}

.tipp-prognose-row td {
  background-color: #f0f0f0;
  font-weight: 600;
}

.tipp-prognose-label {
  font-weight: 700;
}

  /* Prognose-Balken für Tipp-Übersicht */
.tipp-prognose-bar-container {
  position: relative;
  width: 70px;
  height: 22px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.tipp-prognose-bar-bg {
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  border-radius: 3px;
  position: relative;
}
.tipp-prognose-bar {
  height: 100%;
  background: #ff9800;
  transition: width 1.8s;
  border-radius: 3px 0 0 3px;
  position: absolute;
  left: 0;
  top: 0;
}
.tipp-prognose-bar-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  pointer-events: none;
}

/* ### MOBILE ANPASSUNGEN ### */
@media (max-width: 768px) {
    /* Partie-Text linksbündig in mobiler Ansicht */
  .tipp-tabelle .partie-header {
    text-align: left;
  }
  
  .partie-text {
    margin-left: 8px;
  }
  
  .filter-count {
    font-size: 0.75rem;
  }

  /* Team-Namen: Auf Mobile kurze Namen anzeigen - NUR in Tipp-Tabelle */
  .tipp-tabelle-wrapper .tipp-team-name-long {
    display: none;
  }
  
  .tipp-tabelle-wrapper .tipp-team-name-short {
    display: inline-block;
  }
  
  /* Spieler-Spalten: Desktop ausblenden, Mobile anzeigen */
  .tipp-header-desktop,
  .tipp-cell-desktop {
    display: none;
  }
  
  .tipp-header-mobile,
  .tipp-cell-mobile {
    display: table-cell;
  }
  
  /* Mobile Anpassungen NUR für klassische Ansicht */
  .tipp-tabelle-wrapper .tipp-tabelle {
    width: auto;
    table-layout: auto;
    font-size: 12px;
  }

    .alternative-view .tipp-tabelle {
    table-layout: auto;
    font-size: 12px;
  }

  .alternative-view .tipp-tabelle td {
    padding:4px;
  }
  
  
  /* Partie-Spalten kompakt */
  .tipp-tabelle-wrapper .tipp-tabelle .tipp-team-home-cell {
    width: 70px;
    max-width: 70px;
  }
  
  .tipp-tabelle-wrapper .tipp-tabelle .tipp-vs-cell {
    width: 25px;
    max-width: 25px;
  }
  
  .tipp-tabelle-wrapper .tipp-tabelle .tipp-team-away-cell {
    width: 70px;
    max-width: 70px;
  }
  
  /* Ergebnis-Spalte */
  .tipp-tabelle-wrapper .tipp-tabelle tbody tr td:nth-child(4),
  .tipp-tabelle-wrapper .tipp-tabelle thead tr th:nth-child(4) {
    width: 50px;
    max-width: 50px;
  }
  

  /* Einheitliche Breite für alle Spieler-Spalten (Mobile) */
  .tipp-tabelle-wrapper .tipp-header-mobile,
  .tipp-tabelle-wrapper .tipp-cell-mobile {
    width: 55px;
    max-width: 55px;
    min-width: 55px;
  }

  .tipp-tabelle .tipp-prognose-bar-container {
    width: 55px;
    height: 16px;
  }
  
  .tipp-tabelle-wrapper .tipp-tabelle th,
  .tipp-tabelle-wrapper .tipp-tabelle td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 4px;
  }
  
  /* Icons kleiner auf Mobile */
  .tipp-tabelle-wrapper .tipp-team-icon {
    width: 16px;
    height: 16px;
  }
}

/* Desktop: Mobile-Spalten ausblenden */
@media (min-width: 769px) {
  .tipp-header-mobile,
  .tipp-cell-mobile {
    display: none;
  }
  
  .tipp-header-desktop,
  .tipp-cell-desktop {
    display: table-cell;
  }

  /* Einheitliche Breite für alle Spieler-Spalten (Desktop) */
  .tipp-tabelle-wrapper .tipp-header-desktop,
  .tipp-tabelle-wrapper .tipp-cell-desktop,
  .tipp-tabelle-wrapper .tipp-result-header {
    width: 75px;
    max-width: 75px;
    min-width: 75px;
  }
}

/* Badge für richtigen Tipp (Pastell) */
  .tipp-badge-richtig {
    display: inline-block;
    background: #b7e4c7;
    border-radius: 3px;
    padding: 3px;
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    vertical-align: middle;
    margin: 0 2px;
  }

 /* ### AUSZAHLUNGS-TABELLE ### */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 10px 0;
}

.auszahlung-tabelle {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auszahlung-tabelle th,
.auszahlung-tabelle td {
  width: 110px;
}

.auszahlung-tabelle th:first-child,
.auszahlung-tabelle td:first-child {
  width: 100px;
}

.auszahlung-tabelle thead {
  background-color: #666666;
}

.auszahlung-tabelle th {
  padding: 14px 12px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border: none;
  text-align: center;
}

.auszahlung-tabelle th:first-child {
  text-align: left;
  padding-left: 16px;
}

.auszahlung-tabelle tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #e0e0e0;
}

.auszahlung-tabelle tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.auszahlung-tabelle tbody tr:hover {
  background-color: #ffd9a6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Hervorhebung für eingeloggten User und aktuellen Spieltag */
.auszahlung-tabelle tbody tr.current-user,
.auszahlung-tabelle tbody tr.current-matchday {
  background-color: #fff3e6;
  border-left: 4px solid #FF8C19;
}

.auszahlung-tabelle tbody tr.current-user:nth-child(even),
.auszahlung-tabelle tbody tr.current-matchday:nth-child(even) {
  background-color: #ffe8cc;
  border-left: 4px solid #FF8C19;
}

.auszahlung-tabelle tbody tr.current-user:hover,
.auszahlung-tabelle tbody tr.current-matchday:hover {
  background-color: #ffd9a6;
  border-left: 4px solid #FF8C19;
}

/* Hervorhebung für fehlerhafte Match-Anzahl */
.auszahlung-tabelle td.match-count-error {
  color: red;
  font-weight: bold;
}

.auszahlung-tabelle td {
  padding: 12px;
  color: #333;
  border: none;
  text-align: center;
}

.auszahlung-tabelle td:first-child {
  font-weight: 600;
  text-align: left;
  background-color: #f2f2f2;
  padding-left: 16px;
  min-width: 100px;
}

.auszahlung-tabelle tbody tr:hover td:first-child {
  background-color: #eeeeee;
}

/* Farbmarkierung für positive und negative Werte */
.auszahlung-tabelle td.value-positive {
  color: #28a745 !important;
  font-weight: 700;
}

.auszahlung-tabelle td.value-negative {
  color: #dc3545 !important;
  font-weight: 700;
}

/* Responsive Optimierungen für Auszahlungs-Tabelle */
@media (max-width: 768px) {
  .auszahlung-tabelle {
    font-size: 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .auszahlung-tabelle th,
  .auszahlung-tabelle td {
    padding: 8px 6px;
  }
  
  .auszahlung-tabelle th {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .auszahlung-tabelle {
    font-size: 0.75rem;
  }
  
  .auszahlung-tabelle th,
  .auszahlung-tabelle td {
    padding: 6px 4px;
  }
  
  .auszahlung-tabelle th {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
  }
  .auszahlung-tabelle td:first-child {
    min-width: 85px;
  }
}

/* Allgemeine Icon-Klasse für Tabellen-Icons */
.table-icon {
  margin-left: 4px;
}

.performance-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

.performance-table th:not(:first-child),
.performance-table td:not(:first-child) {
    min-width: 80px;
}

.performance-table td:first-child a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.performance-table td:first-child a:hover {
    color: #FF8C19;
    text-decoration: underline;
}

.performance-sum-row {
    font-weight: 600;
    background-color: #f5f5f5 !important;
    border-top: 2px solid #FF8C19;
}

.performance-sum-row:hover {
    background-color: #f5f5f5 !important;
}

.performance-sum-row td:first-child {
    background-color: #f5f5f5 !important;
}

.season-stats-table {
  width: 100%;
  border-collapse: collapse;
}

.season-stats-table .table-header {
  background-color: #f5f5f5;
}

.season-stats-table th,
.season-stats-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.season-stats-table th {
  border-bottom: 2px solid #ddd;
}

.season-info-table {
  width: 100%;
  border-collapse: collapse;
}

.season-info-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.season-info-table .table-row-last td {
  border-bottom: none;
}

.archived-seasons-table {
  margin-top: 15px;
}