/* TVP Spielplan — Frontend-Styling
   Farben kommen als CSS-Variablen aus den Plugin-Einstellungen
   (TVP Spielplan → Einstellungen), mit Fallback-Werten hier. */

.tvp-spielplan-widget {
  font-family: 'Inter', sans-serif;
  background: var(--tvp-ink, #10141F);
  color: var(--tvp-chalk, #FAFAF7);
  border: 1px solid rgba(250, 250, 247, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.tvp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(250, 250, 247, 0.14);
}

.tvp-tab {
  background: transparent;
  border: none;
  color: rgba(250, 250, 247, 0.55);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 9px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.tvp-tab.active {
  background: var(--tvp-volt, #C6FF3D);
  color: var(--tvp-ink, #10141F);
}

.tvp-panel { display: none; padding: 6px; }
.tvp-panel.active { display: block; }

.tvp-show-all .tvp-panel {
  display: block;
  border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.tvp-show-all .tvp-panel:last-child { border-bottom: none; }

.tvp-hb-container { min-height: 80px; padding: 10px; }

.tvp-attribution {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: 11px;
  color: rgba(250, 250, 247, 0.35);
  border-top: 1px solid rgba(250, 250, 247, 0.1);
}
.tvp-attribution a {
  color: rgba(250, 250, 247, 0.4);
  text-decoration: underline;
}

.tvp-spielplan-empty,
.tvp-spielplan-error {
  padding: 20px;
  font-size: 13px;
  color: rgba(250, 250, 247, 0.5);
}

/* =========================================================================
   WIDGET-INTERNALS — hier nach dem ersten Live-Test nachtragen!

   handball.net rendert sein eigenes Markup in .tvp-hb-container hinein.
   Die genauen Klassennamen sind nicht öffentlich dokumentiert und können
   sich mit Widget-Updates ändern. Vorgehen:

   1. Plugin aktivieren, Team anlegen, Shortcode auf eine Seite setzen.
   2. Seite im Browser öffnen, Rechtsklick auf eine Spielzeile → "Untersuchen".
   3. Echte Klassen-/ID-Namen ablesen und hier gezielt überschreiben, z. B.:

      .tvp-hb-container .irgendeine-hb-klasse {
        font-family: 'JetBrains Mono', monospace;
        color: var(--tvp-chalk, #FAFAF7);
      }

   Das Logo/den Namen "handball.net" NICHT per CSS ausblenden oder
   überlagern — das ist laut deren Nutzungsbedingungen nicht erlaubt.
   ========================================================================= */