/* ========= Globales Set-up ========= */
:root{
  --tile-title-size: 20.5px;                 /* Überschriften-Größe zentral steuerbar */
  --stat-tone: rgba(255,255,255,0.70);       /* einheitlicher Grauton für Stats */
  --tile-min-width: 310px;                   /* minimale Kachelbreite global */
  --stats-gap: clamp(1ch, 1.4vw, 1.5ch);     /* Abstand zw. Stats ≈ zwei Leerzeichen */
}

#app .content .item .details .title{
  font-size: var(--tile-title-size) !important;
}

/* ========= Livestats – robust, ohne Überlaufen ========= */
/* 0) Platz rechts für Pfeil/Overlay */
#app .content .item .details .livestats-container,
#app .content .item .details .livestats-container.white{
  box-sizing: border-box !important;
  padding-right: 96px !important;     /* Reserve für den Pfeil */
  max-width: 100% !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/* 1) In einer Zeile, einheitlicher Abstand (ul.livestats + .labels/.values) */
#app .content .item .details .livestats-container ul.livestats,
#app .content .item .details .livestats-container .labels,
#app .content .item .details .livestats-container .stats .labels,
#app .content .item .details .livestats-container .values,
#app .content .item .details .livestats-container .stats .values{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  white-space: nowrap !important;
  gap: var(--stats-gap) !important;
}

/* Fallback, falls ein Theme flex-gap neutralisiert */
#app .content .item .details .livestats-container ul.livestats > li + li,
#app .content .item .details .livestats-container .labels > * + *,
#app .content .item .details .livestats-container .values > * + *{
  margin-left: var(--stats-gap) !important;
}

/* 2) Items dürfen schrumpfen */
#app .content .item .details .livestats-container ul.livestats > li{
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* 3) Zahlen – fein, ruhige Ziffern */
#app .content .item .details .livestats-container ul.livestats > li > strong{
  font-family: inherit !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  font-size: clamp(8px, 0.72vw, 10px) !important;
  line-height: 1.05 !important;
}

/* 4) Farb-Lock: Labels & Zahlen exakt gleicher Ton */
#app .content .item .details .livestats-container ul.livestats,
#app .content .item .details .livestats-container.white ul.livestats{
  color: var(--stat-tone) !important;
}
#app .content .item .details .livestats-container ul.livestats *,
#app .content .item .details .livestats-container.white ul.livestats *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

/* ========= Emby-scope ONLY: deutsche Labels (FILME/SERIEN/EPISODEN) ========= */
#app .content .item:has(a[href*="emby"]) .details
  .livestats-container ul.livestats > li > span.title{
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 2px !important;
}
#app .content .item:has(a[href*="emby"]) .details
  .livestats-container ul.livestats > li > span.title::before{
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: clamp(8px, 0.72vw, 10px) !important;
  line-height: 1.05 !important;
  content: "";
}
#app .content .item:has(a[href*="emby"]) .details
  .livestats-container ul.livestats > li:nth-child(1) > span.title::before{ content: "FILME"; }
#app .content .item:has(a[href*="emby"]) .details
  .livestats-container ul.livestats > li:nth-child(2) > span.title::before{ content: "SERIEN"; }
#app .content .item:has(a[href*="emby"]) .details
  .livestats-container ul.livestats > li:nth-child(3) > span.title::before{ content: "EPISODEN"; }

/* ========= Non-Emby: Label-Typo angleichen ========= */
#app .content .item:not(:has(a[href*="emby"])) .details
  .livestats-container ul.livestats > li > span.title,
#app .content .item:not(:has(a[href*="emby"])) .details
  .livestats-container .livestats > li > .title{
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: clamp(8px, 0.72vw, 10px) !important;
  line-height: 1.05 !important;
  color: var(--stat-tone, rgba(255,255,255,.70)) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ========= Globale Kachelbreite ========= */
#app .content .item{
  min-width: clamp(280px, 26vw, var(--tile-min-width)) !important;
}
/* Such-Provider-Dropdown ausblenden + Eingabefeld auf volle Breite */
#app .search .input-group > .input-group-prepend { 
  display: none !important; 
}
#app .search .input-group > .form-control {
  border-top-left-radius: .5rem !important;
  border-bottom-left-radius: .5rem !important;
}