/*
 * ============================================================
 *  ISHD Team Widget – Spielplan Stylesheet
 *  
 *
 *  Datei ablegen unter:
 *  /wp-content/plugins/ishd-team-widget/spielplan.css
 *
 *  Sektionen:
 *   1. Wrapper & Fehler
 *   2. Stand-Zeile
 *   3. Tabelle – Grundstruktur
 *   4. Tabelle – Kopfzeile (thead)
 *   5. Tabelle – Zeilen & Zellen (tbody)
 *   6. Heimspiel-Markierung
 *   7. BULLY-Spalte (Datum/Link)
 *   8. LIGA-Badge
 *   9. Team-Zellen & Logos
 *  10. vs.-Trenner
 *  11. Ergebnis-Spalte
 *  12. Info / Halle
 *  13. Legende
 *  14. Team-Card
 *  15. Responsive (max-width: 680px)
 * ============================================================
 */


/* ============================================================
 *  1. WRAPPER & FEHLER
 * ============================================================ */

.ishd-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    color: #333333;
    margin: 12px 0 24px;
    line-height: 1.4;
}

.ishd-error {
    background: #fff0f0;
    border-left: 3px solid #cc0000;
    padding: 8px 12px;
    color: #cc0000;
    margin: 8px 0;
    font-size: 12px;
}


/* ============================================================
 *  2. STAND-ZEILE
 *  Wird oberhalb der Tabelle angezeigt (Datum der letzten
 *  Aktualisierung + Hinweistext).
 * ============================================================ */

.ishd-stand {
	font-family: Roboto;
    font-size: 12px;
    color: #01ffc6;
    margin-bottom: 6px;
}

.ishd-stand em {
    font-style: italic;
    color: #888888;
}


/* ============================================================
 *  3. TABELLE – GRUNDSTRUKTUR
 * ============================================================ */

.ishd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #e0e0e0;
}


/* ============================================================
 *  4. TABELLE – KOPFZEILE (thead)
 *  Grauer Hintergrund, uppercase, kompakt.
 *  Zum Anpassen: background, color, font-size ändern.
 * ============================================================ */

.ishd-table thead tr {
    background: #000;
    border-bottom: 2px solid #fff;
}

.ishd-table thead th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
    border-right: 1px solid #dddddd;
}

.ishd-table thead th:last-child {
    border-right: none;
}


/* ============================================================
 *  5. TABELLE – ZEILEN & ZELLEN (tbody)
 *  Zebra-Streifen auf geraden Zeilen, Hover-Effekt.
 * ============================================================ */

.ishd-table tbody tr {
    border-bottom: 1px solid #e8e8e8;
	background: #fafafa;
}

.ishd-table tbody tr:last-child {
    border-bottom: none;

}

/* Zebra-Streifen – auskommentieren zum Deaktivieren */
.ishd-table tbody tr:nth-child(even) {
    background: #fafafa;
}

/*.ishd-table tbody tr:hover {
    background: #f0f4ff !important;
}
*/
.ishd-table td {
    padding: 5px 8px;
    vertical-align: middle;
    border-right: 1px solid #efefef;
}

.ishd-table td:last-child {
    border-right: none;
}


/* ============================================================
 *  6. HEIMSPIEL-MARKIERUNG
 *  Zeilen, bei denen das eigene Team Heimrecht hat,
 *  werden leicht bläulich hinterlegt.
 *  Farbe hier anpassen: background
 * ============================================================ */

/*.ishd-table tbody tr.ishd-heimspiel {
    background: #edf0ff;
}

.ishd-table tbody tr.ishd-heimspiel:hover {
    background: #dce2ff !important;
}
*/

/* ============================================================
 *  7. BULLY-SPALTE (Datum als ISHD-Link)
 *  Enthält Datum + Uhrzeit, verlinkt auf die ISHD-Spielseite.
 * ============================================================ */

.ishd-td-bully {
	white-space: nowrap;
    font-size: 12px;
}

.ishd-td-bully a {
    color: #1a0dab;       /* Linkfarbe – nach Belieben anpassen */
    text-decoration: none;
    font-weight: 600;
}

.ishd-td-bully a:hover {
	color: #1a0dab!important;
    text-decoration: underline;
}

/* Uhrzeit-Zeile unterhalb des Datums */
.ishd-td-bully .ishd-uhr {
    display: block;
    font-size: 11px;
    color: #888888;
    font-weight: 400;
    margin-top: 1px;
}


/* ============================================================
 *  8. LIGA-BADGE
 *  Kleines Badge mit Liga-Kürzel (z.B. "2.BLN"), verlinkt
 *  auf die ISHD-Ligaseite.
 * ============================================================ */

.ishd-liga-link {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #1a0dab;
    text-decoration: none;
    white-space: nowrap;
    background: #f0f0f0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1px 5px;
}

.ishd-liga-link:hover {
    background: #000;
}


/* ============================================================
 *  9. TEAM-ZELLEN & LOGOS
 *  .ishd-td-team  – Zelle mit Teamname (+ optionalem Link)
 *  .ishd-logo     – Vereinslogo (30×30 px)
 *  Logogröße anpassen: width + height in .ishd-logo
 * ============================================================ */

.ishd-td-team {
    white-space: nowrap;
}

.ishd-td-team a {
    color: #1a0dab;
    text-decoration: none;
}

.ishd-td-team a:hover {
	color: #1a0dab !important;
    text-decoration: underline;
}

/* Vereinslogo – Größe hier anpassen */
.ishd-logo {
    width: 30px;           /* ← Breite Logo */
    height: 30px;          /* ← Höhe Logo  */
    object-fit: contain;
    vertical-align: middle;
    border-radius: 3px;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    padding: 1px;
}


/* ============================================================
 *  10. vs.-TRENNER
 * ============================================================ */

.ishd-td-vs {
    text-align: center;
    color: #000;
    font-size: 11px;
    padding: 5px 2px;
    white-space: nowrap;
}


/* ============================================================
 *  11. ERGEBNIS-SPALTE
 *  Farben für Sieg / Niederlage / Unentschieden anpassen.
 * ============================================================ */

.ishd-td-result {
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    font-size: 13px;
    min-width: 54px;
}

/* Noch kein Ergebnis */
.ishd-res-offen {
    color: #bbbbbb;
    font-weight: 400;
}

/* Sieg */
.ishd-res-sieg {
    color: #1a7a1a;        /* ← Farbe Sieg anpassen */
}

/* Niederlage */
.ishd-res-nied {
    color: #cc0000;        /* ← Farbe Niederlage anpassen */
}

/* Unentschieden */
.ishd-res-remis {
    color: #666666;        /* ← Farbe Unentschieden anpassen */
}


/* ============================================================
 *  12. INFO / HALLE
 *  Rechte Spalte mit Hallenname und ggf. Warnungstext
 *  (z.B. "neue Uhrzeit").
 * ============================================================ */

.ishd-td-info {
    font-size: 11px;
    color: #1a1a1a;
    max-width: 200px;
}

.ishd-warnung {
    display: block;
    color: #b84000;        /* ← Warnfarbe anpassen */
    font-size: 11px;
    margin-top: 2px;
}


/* ============================================================
 *  13. LEGENDE
 *  Unterhalb der Tabelle: Erklärung der Farben/Markierungen.
 * ============================================================ */

.ishd-legende {
    font-size: 11px;
    color: #999999;
    margin-top: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* Heimspiel-Kästchen in der Legende */
.ishd-heim-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #edf0ff;   /* ← muss mit Heimspiel-Hintergrund übereinstimmen */
    border: 1px solid #aab0dd;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 3px;
}


/* ============================================================
 *  14. TEAM-CARD  ([ishd_team])
 *  Kompakte Info-Karte mit Header-Farbe aus den Trikotfarben.
 * ============================================================ */

.ishd-team-card {
    max-width: 480px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
}

/* Header – Hintergrundfarbe wird inline aus API-Daten gesetzt */
.ishd-tc-header {
    padding: 16px 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ishd-tc-header img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 4px;
    flex-shrink: 0;
}

.ishd-tc-header h2 {
    margin: 0 0 2px;
    font-size: 1.15em;
    font-weight: 700;
}

.ishd-tc-header p {
    margin: 0;
    font-size: 0.8em;
    opacity: 0.9;
}

/* Info-Tabelle in der Card */
.ishd-tc-body table {
    width: 100%;
    border-collapse: collapse;
}

.ishd-tc-body td {
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    vertical-align: top;
}

.ishd-tc-body td:first-child {
    color: #999999;
    width: 36%;
    font-weight: 500;
}

.ishd-tc-body td:last-child {
    font-weight: 600;
}

.ishd-tc-body tr:last-child td {
    border-bottom: none;
}

/* Trikot-Farbkästchen */
.ishd-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
    margin-right: 2px;
}

/* Footer mit Website-Link */
.ishd-tc-footer {
    background: #f7f7f7;
    border-top: 1px solid #ebebeb;
    padding: 6px 12px;
    font-size: 11px;
    color: #aaaaaa;
    text-align: center;
}

.ishd-tc-footer a {
    color: #666666;
    text-decoration: none;
}

.ishd-tc-footer a:hover {
    text-decoration: underline;
}


/* ============================================================
 *  15. RESPONSIVE
 *  Unter 680px werden Liga- und Info-Spalte ausgeblendet,
 *  Logos werden etwas kleiner.
 *  Breakpoint hier anpassen: max-width
 * ============================================================ */

@media (max-width: 680px) {

    .ishd-col-liga {
        display: none;
    }

    .ishd-col-info {
        display: none;
    }

    .ishd-table {
        font-size: 12px;
    }

    /* Logos auf Mobilgeräten verkleinern */
    .ishd-logo {
        width: 24px;           /* ← Mobile Breite Logo */
        height: 24px;          /* ← Mobile Höhe Logo  */
    }
}