/* =========================================================
   1x2BOT – custom.css (refactored, consolidated)
   - Header grid: logo full width, dropdown right, titlebar below dropdown (right column)
   - Titlebar: SubTitle left, Title right (stable, no "fake" left align issues)
   - Table: min-width 1400px + horizontal scroll
   - Wrapping: LEAGUE/HOME/AWAY wrap only at word boundaries
   - THEAD: softer color based on logo #155A90
   ========================================================= */

/* =========================
   Base / Global
   ========================= */
:root{
  --content-width: 1400px;
  --brand-blue: #155A90;
  --brand-blue-dark: #175A93; /* Subtitle / Accent */
  --thead-bg: #e9f0f6;

  --dd-min: 360px;
  --dd-max: 720px;
}


html, body{
  margin: 0;
  padding: 0;
}

/* =========================
   Layout: Main / Header / Content
   ========================= */
#main .header,
#main .content{
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/*
  Header Grid:
  Row 1: Logo full width
  Row 2: Dropdown in right column
  Row 3: Titlebar in right column (below dropdown)
*/
#main .header{
  display: grid;
  grid-template-columns: 1fr minmax(var(--dd-min), var(--dd-max));
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
}

/* Logo full width */
#main .header h1{
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  text-align: left;
}

/* Ensure header h2 defaults don't push layout around */
#main .header h2{
  margin: 0; /* critical: remove UA default margins */
}

#main .header .header-actions{
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  align-self: start;

  display: block;     /* statt flex */
}
/* Dropdown-Wrapper soll die komplette rechte Spalte ausfüllen */
#main .header .header-actions .leaguebar{
  width: 100%;
}

/* Row soll nicht "rechts zusammenfallen", sondern volle Breite nutzen */
#main .header .header-actions .leaguebar-row{
  justify-content: stretch; /* statt flex-end */
}

/* Dropdown selbst füllt die verfügbare Breite */
#main .header .header-actions .league-dd{
  width: 100%;
}

/* Titlebar: right column, row 3 (below dropdown) */
#main .header .titlebar{
  grid-column: 2;
  grid-row: 3;
  justify-self: stretch;
  width: 100%;

  display: flex;
  align-items: baseline;
  gap: 12px;

  /* Titel links, SubTitle rechts – stabil */
  justify-content: flex-start;

  /* zusätzlicher Abstand zur Tabelle (Variante A) */
  margin-bottom: 10px;
}
/* SubTitle: left in the bar, can shrink with ellipsis */
#main .header .titlebar #DynamicSubTitle{
  flex: 1 1 auto;
  min-width: 0;

  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title: pushed to the right */
#main .header .titlebar #DynamicTitle{
  flex: 0 0 auto;
  margin-left: auto; /* pushes it to the far right */

  text-align: right !important;
  white-space: nowrap;
}

/* Neutralize <center> inside header (if any) */
#main .header center{
  display: contents;
}

/* =========================
   League Dropdown (Custom, PureCSS-like)
   ========================= */

/* Keep spacing to table via leaguebar margin (your requirement) */
.leaguebar{
  margin: 10px 0 14px;
}

.leaguebar-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.league-dd{
  position: relative;
  display: inline-block;
  min-width: var(--dd-min);
  max-width: var(--dd-max);
  width: 100%;
}

.league-dd__btn{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  border: 1px solid #ccc;
  background: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.league-dd__btn:focus{
  outline: 1px auto #129FEA;
}

.league-dd__btn-left{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.league-dd__label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-dd__caret{
  margin-left: 10px;
  color: #777;
}

.league-dd__panel{
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  max-height: 420px;
  overflow: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 9999;
  display: none;
  box-sizing: border-box;
}

.league-dd.is-open .league-dd__panel{
  display: block;
}

.league-dd__searchwrap{
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.league-dd__search{
  width: 100%;
  box-sizing: border-box;
}

.league-dd__group-title{
  padding: 6px 10px;
  font-weight: bold;
  color: #565d64;
  text-transform: uppercase;
  font-size: 12px;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
}

.league-dd__divider{
  height: 1px;
  background: #e5e5e5;
  margin: 6px 0;
}

.league-dd__item{
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.league-dd__item:hover{
  background: #eee;
}

.league-dd__item.is-active{
  background: #e0e0e0;
}

.league-dd__item-left{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.league-dd__item-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-dd__flag{
  display: inline-block;
  border: 0;
}

.league-dd__count{
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #f2f2f2;
  color: #777;
  flex: 0 0 auto;
}

.league-dd__count.is-hot{
  background: #ffe5e5;
  color: #c00;
  font-weight: bold;
}

/* =========================
   Table: Width / Scroll / Wrapping
   ========================= */
#main .content{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#main .content .pure-table{
  width: 100%;
  min-width: 1400px;
  table-layout: auto;
}

/* THEAD styling */
.pure-table thead{
  background-color: var(--thead-bg);
  color: var(--brand-blue);
  border-bottom: 2px solid var(--brand-blue);
}

.pure-table thead th{
  font-weight: 600;
}

/* Default: allow wrapping */
#main .content .pure-table th,
#main .content .pure-table td{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}

/* From column 5 onwards: keep single-line */
#main .content .pure-table th:nth-child(n+5),
#main .content .pure-table td:nth-child(n+5){
  white-space: nowrap;
}

/* DATE always single-line */
#main .content .pure-table th:nth-child(1),
#main .content .pure-table td:nth-child(1){
  white-space: nowrap;
}

/* LEAGUE/HOME/AWAY: wrap allowed, but not mid-word */
#main .content .pure-table th:nth-child(2),
#main .content .pure-table td:nth-child(2),
#main .content .pure-table th:nth-child(3),
#main .content .pure-table td:nth-child(3),
#main .content .pure-table th:nth-child(4),
#main .content .pure-table td:nth-child(4){
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}
/* === Titlebar: Title links bündig zum Dropdown, Subtitle rechts === */
#main .header .titlebar{
  display: flex;
  width: 100%;
}

/* DynamicTitle LINKS (startet exakt am linken Rand der rechten Spalte = Dropdown-Kante) */
#main .header .titlebar #DynamicTitle{
  order: 1;
  flex: 0 0 auto;          /* nicht mehr strecken */
  text-align: left !important;
  margin: 0;
  margin-right: auto;      /* schiebt alles andere nach rechts */
  white-space: nowrap;
}

/* DynamicSubTitle RECHTS */
#main .header .titlebar #DynamicSubTitle{
  order: 2;
  flex: 0 0 auto;
  text-align: right !important;
  margin: 0;
  margin-left: auto;       /* bleibt rechts */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header – linker Platzhalter, bündig mit Dropdown-Oberkante */
#main .header .header-left-placeholder{
  grid-column: 1;
  grid-row: 2;          /* gleiche Zeile wie Dropdown */
  align-self: start;    /* Oberkante ausrichten */

  text-align: left;
  font-weight: 600;
  opacity: 0.6;         /* optional */
}
#DynamicSubTitle{
  color: var(--brand-blue-dark);
}