/* =========================================================
   RingerPlugin – Frontend Styles (2025)
   - Responsives Layout für Tabelle, Begegnungen & Widget
   - Mobile-Optimierungen (Buttons nebeneinander, kompakte Zeilen)
   - Einzelkämpfe mit festen Spaltenbreiten (colgroup)
   ========================================================= */

/* ============== Grundlayout Container/Tabelle ============== */
#ringen-table-container{
  margin:20px auto;
  padding:1rem;
  background:#ffffff;
  border-radius:6px;  
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:auto;
}

/* Logos über der Tabelle */
#ringen-liga-logos-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:center;
  justify-items:center;
  margin-bottom:1rem;
}
.ringen-header-logo-item img{max-width:100%;height:auto;display:block;}

/* Optionaler Liga-Name (per Option ein-/ausblendbar) */
#ringen-liga-name-container{
  display:none;
  text-align:center;
  background:#f0f0f0;
  color:#000;
  font-size:clamp(1rem,2vw,1.25rem);
  padding:.5rem 1rem;
  margin-bottom:1rem;
  border-radius:6px;
}

/* ===== NAV: nur Buttons; rechter Button bündig rechts ===== */
.kampftag-nav{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:1rem 0;
  width:100%;
  justify-content:flex-start;           /* kein space-between o.Ä. */
}
.kampftag-nav .ringen-button{ margin-right:0 !important; }
.kampftag-nav .ringen-button:last-child{ margin-left:auto !important; }

/* (Legacy) Header mit Titel – bleibt kompatibel, wird aber nicht mehr genutzt */
#ringen-table-container .kampftag-header{
  display:grid;
  grid-template-columns:auto 1fr auto; /* Prev | Title | Next */
  align-items:center;
  gap:.75rem;
  margin-bottom:1rem;
}
#ringen-table-container .kampftag-header-title{
  text-align:center;
  font-size:clamp(1rem,3vw,1.6rem);
  font-weight:700;
}
#ringen-table-container .ringen-button{
  background:#e31313; /* CI-Rot */
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.55rem 1rem;
  cursor:pointer;
  font-weight:600;
  font-size:clamp(.95rem,2vw,1.05rem);
}

/* ============== Haupttabelle ============== */
.ringen-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;             /* stabile Spaltenbreiten */
  font-size:clamp(.9rem,1vw,1rem);
}
.ringen-table thead th,
.ringen-table td{
  padding:.75rem;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
}
.ringen-table tr{ border-bottom:1px solid #e9ecef; }
.ringen-table tr:hover{ background:#fefefe; }

/* Sinnvolle Standardbreiten (können per CSS/Theme überschrieben werden) */
.ringen-table thead th:nth-child(1){ width:6ch; }   /* Platz */
.ringen-table thead th:nth-child(2){ width:auto; }  /* Team (flex) */
.ringen-table thead th:nth-child(3){ width:8ch; }   /* Kämpfe */
.ringen-table thead th:nth-child(4){ width:12ch; }  /* Punkte */
.ringen-table thead th:nth-child(5){ width:8ch; }   /* Diff */
.ringen-table thead th:nth-child(6){ width:12ch; }  /* Wertungen */

.team-cell{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.team-cell img{ width:clamp(1.6rem,5vw,3rem); height:auto; object-fit:contain; flex:0 0 auto; }

.diff-positive{ color:#28a745; }
.diff-negative{ color:#dc3545; }

/* ============== Begegnung (AC) ============== */
.ac-match-item{ text-align:center; margin-bottom:1.5rem; }
.ac-match-item .kampftag-title{ font-size:clamp(1rem,2vw,1.25rem); font-weight:700; }
.ac-match-item .kampftag-datum{
  font-size:clamp(.9rem,2vw,1.1rem);
  opacity:.9;
  margin:.2rem 0 .9rem;          /* mehr Luft zum ersten Team */
}

/* stabile 3-Spalten-Reihe – Mitte garantiert zentriert */
.ac-match-row{
  --enc-logo-w:48px;
  --enc-logo-h:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
  grid-template-areas:"home score guest";
  align-items:center;
  column-gap:clamp(16px,6vw,56px);
  margin-top:.25rem;             /* kleine konstante Luft */
}
.ac-team{ display:grid; align-items:center; gap:.6rem; }
.ac-team.home{ grid-area:home; grid-template-columns:minmax(0,1fr) auto; justify-items:end; text-align:right; }
.ac-team.guest{ grid-area:guest; grid-template-columns:auto minmax(0,1fr); justify-items:start; text-align:left; }
.ac-team .team-logo{ width:var(--enc-logo-w); height:var(--enc-logo-h); object-fit:contain; }
.ac-team .team-name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ac-score{
  grid-area:score;
  justify-self:center;
  text-align:center;
  font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  white-space:nowrap;
  min-width:6ch;
}

/* „kampffrei“ – Logo + Text in der Mitte */
.ac-bye{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:.6rem; white-space:nowrap; }
.ac-bye .team-logo{ width:var(--enc-logo-w); height:var(--enc-logo-h); object-fit:contain; }

/* Wenn .ac-match-row.bye → volle Mitte, keine Spalten links/rechts */
.ac-match-row.bye{
  grid-template-columns:1fr;
  grid-template-areas:"score";
  column-gap:0;
}
.ac-match-row.bye .ac-score{ min-width:0; }

/* ============== AC-Widget (kommender Kampftag) ============== */
.ac-widget{ text-align:center; margin-bottom:1.5rem; }
.ac-widget .kampftag{ margin-bottom:.2rem; font-weight:700; font-size:clamp(1.05rem,2.4vw,1.35rem); }
.ac-widget .kampftag-date{ margin-bottom:.9rem; opacity:.85; font-size:clamp(.9rem,2vw,1.05rem); }
.ac-widget .ac-match-row{ --enc-logo-w:clamp(56px,8vw,96px); --enc-logo-h:clamp(56px,8vw,96px); }

/* WICHTIG: Namen unter den Logos (Widget) */
.ac-widget .ac-team{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  text-align:center;
}
.ac-widget .ac-team.home,
.ac-widget .ac-team.guest{
  grid-template-columns:unset;   /* Grid-Layout aus .ac-team überschreiben */
  justify-items:center;
}
.ac-widget .team-name{
  font-size:var(--w-team-name-fz, 1rem);  /* PHP kann --w-team-name-fz setzen */
  margin-top:.25rem;
}

/* Kampffrei im Widget (Fallback für ältere Markups) */
.ac-widget .match-container{ display:flex; justify-content:center; align-items:center; text-align:center; margin-top:.5rem; }
.ac-widget .bye-inline{ display:inline-flex; align-items:center; gap:.6rem; }
.ac-widget .bye-inline .team-logo{ width:clamp(48px,8vw,90px); height:auto; object-fit:contain; }
.ac-widget .bye-inline span{ font-size:1.15rem; line-height:1.3; }

/* ============== Einzelkämpfe ============== */
.single-matches-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;           /* in Verbindung mit colgroup → stabile Breiten */
  margin:1rem auto;
  font-size:clamp(.9rem,1vw,1rem);
}
.single-matches-table th,
.single-matches-table td{
  padding:.75rem;
  border:1px solid #e9ecef;
  vertical-align:middle;

  /* alles zentriert + keine Buchstaben-Trennung */
  text-align:center;
  word-break:normal;
  overflow-wrap:normal;
}
.single-matches-table th{ white-space:nowrap; }

/* Spaltenbreiten aus dem colgroup in PHP (Fallback hier) */
.single-matches-table col.col-stil { width:15%; }
.single-matches-table col.col-heim { width:25%; }
.single-matches-table col.col-erg  { width:20%; }  /* Ergebnis + Wertung */
.single-matches-table col.col-gast { width:25%; }
.single-matches-table col.col-zeit { width:15%; }

.single-matches-table .cell-erg{ text-align:center; }
.single-matches-table .result-main{ font-weight:700; white-space:nowrap; }
.single-matches-table .result-sub{ display:block; margin-top:.15rem; font-size:.9em; color:#dc3545; }
.single-matches-table .nowrap{ white-space:nowrap; }
.single-matches-table .muted{ opacity:.85; }

/* ============== Responsive Regeln ============== */

/* Buttons mobil nebeneinander (neue .kampftag-nav), Titel-Header ausblenden */
@media (max-width:768px){
  .kampftag-nav{ gap:.5rem; }
  #ringen-table-container .kampftag-header{
    grid-template-columns:1fr 1fr; /* nur Buttons */
    gap:.5rem;
  }
  #ringen-table-container .kampftag-header-title{ display:none; }

  /* Haupttabelle – etwas kompakter */
  .ringen-table thead th, .ringen-table td{ padding:.6rem; }
}

/* Begegnung/Widget: mobil untereinander – Ergebnis zwischen den Logos */
@media (max-width:600px){
  .ac-match-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "home"
      "score"
      "guest";
    row-gap:.75rem;
  }
  .ac-team.home, .ac-team.guest{
    grid-template-columns:auto;
    justify-items:center;
    text-align:center;
  }
  .ac-team .team-name{ white-space:normal; overflow:visible; text-overflow:clip; }
  .ac-score{ min-width:0; }
}

/* sehr kleine Geräte: feine Anpassungen */
@media (max-width:480px){
  .ac-widget .bye-inline .team-logo{ width:40px; }
  .ac-widget .bye-inline span{ font-size:1rem; }

  .single-matches-table th, .single-matches-table td{ padding:.55rem .45rem; }
  
}

/* ---- Fix: "Nächster Kampftag" wirklich rechtsbündig ---- */
#ringen-table-container .kampftag-header{
  display:flex !important;           /* Grid überschreiben */
  align-items:center;
  gap:.75rem;
  width:100%;
}
#ringen-table-container .kampftag-header > .ringen-button:last-child{
  margin-left:auto !important;       /* schiebt den letzten Button ganz nach rechts */
  justify-self:end !important;       /* falls Grid-Styles doch greifen */
}
/* --- Breiten NUR für die Ligatabelle, NICHT für Einzelkämpfe --- */
.ringen-table:not(.single-matches-table) thead th:nth-child(1){ width:6ch; }
.ringen-table:not(.single-matches-table) thead th:nth-child(2){ width:auto; }
.ringen-table:not(.single-matches-table) thead th:nth-child(3){ width:8ch; }
.ringen-table:not(.single-matches-table) thead th:nth-child(4){ width:12ch; }
.ringen-table:not(.single-matches-table) thead th:nth-child(5){ width:8ch; }
.ringen-table:not(.single-matches-table) thead th:nth-child(6){ width:12ch; }

/* --- Einzelkämpfe: Colgroup bestimmt die Breite --- */
.ringen-table.single-matches-table{ table-layout:fixed; }

.ringen-table.single-matches-table thead th,
.ringen-table.single-matches-table tbody td{
  width:auto !important;                 /* gibt die Steuerung an <colgroup> */
  text-align:center !important;          /* alles zentriert */
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* „Kampfzeit“ u.a. im Kopf nicht umbrechen */
.ringen-table.single-matches-table thead th{ white-space:nowrap !important; }

/* Fallback-Breiten, falls mal kein colgroup rendert */
.ringen-table.single-matches-table col.col-stil { width:15%; }
.ringen-table.single-matches-table col.col-heim { width:25%; }
.ringen-table.single-matches-table col.col-erg  { width:20%; }
.ringen-table.single-matches-table col.col-gast { width:25%; }
.ringen-table.single-matches-table col.col-zeit { width:15%; }

/* Button ganz rechts – ohne rechten Restabstand */
.kampftag-nav{ display:flex; align-items:center; gap:.75rem; width:100%; padding-right:0; }
.kampftag-nav .ringen-button:last-child{ margin-left:auto !important; margin-right:0 !important; }