/* ══════════════════════════════════════════════════════════════
 * SMF Shortcodes — Frontend CSS  (v3.6)
 * Design analog: Floorball-Facts Tabellen-Layout
 * ══════════════════════════════════════════════════════════════ */

.smf-sc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 820px;
    margin: 0 auto;
    color: #1a1a2e;
}
.smf-sc__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 14px;
}

/* ── Filter ──────────────────────────────────────────────────── */
.smf-filter-details { margin-bottom: 14px; }

.smf-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e2e2ea;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    list-style: none;
    user-select: none;
}
.smf-filter-toggle::-webkit-details-marker { display: none; }
.smf-filter-toggle::marker { display: none; }
.smf-filter-toggle::after {
    content: "▾";
    margin-left: auto;
    font-size: 16px;
    color: #999;
    transition: transform .2s;
}
details[open] > .smf-filter-toggle::after { transform: rotate(180deg); }

.smf-filter-active-hint {
    font-size: 11px;
    font-weight: 700;
    background: #c0392b;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
}
.smf-filter-box {
    background: #f7f7fb;
    border: 1.5px solid #e2e2ea;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 18px 14px;
}
.smf-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.smf-filter-field {
    flex: 1 1 150px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smf-filter-field label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #999;
}
.smf-filter-field select {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    background: #fff;
    color: #222;
    cursor: pointer;
}
.smf-filter-field select:focus {
    outline: none;
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192,57,43,.12);
}
.smf-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.smf-filter-btn {
    padding: 8px 22px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.smf-filter-btn:hover { background: #a93226; }
.smf-filter-reset {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    border-bottom: 1px dashed #ccc;
}
.smf-filter-reset:hover { color: #c0392b; }
.smf-filter-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #888;
}

/* ── Tabellen-Container ──────────────────────────────────────── */
.smf-table-wrap {
    overflow: hidden;
    border-radius: 16px;
    background: #f0f1f7;
    padding: 8px 8px 10px;
    clear: both;
}

/* ── Tabelle ─────────────────────────────────────────────────── */
.smf-players-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
}

/* Header */
.smf-players-table thead th {
    padding: 4px 10px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9a9ab5;
    text-align: left;
    background: transparent;
    border: none;
}
.smf-players-table thead th.col-rank,
.smf-players-table thead th.col-logo,
.smf-players-table thead th.col-sp,
.smf-players-table thead th.col-g,
.smf-players-table thead th.col-a,
.smf-players-table thead th.col-tpg,
.smf-players-table thead th.col-pkt,
.smf-players-table thead th.col-pen2,
.smf-players-table thead th.col-pen2x2,
.smf-players-table thead th.col-pen10,
.smf-players-table thead th.col-penms { text-align: center; }

/* Zeilen */
.smf-players-table tbody td {
    padding: 12px 10px;
    border: none;
    border-top: 5px solid #f0f1f7;
    background: #fff;
}
.smf-players-table tbody tr:first-child td { border-top: none; }

/* Top-3 Hintergrund */
.smf-row--gold   td { background: #fdf6e3; }
.smf-row--silver td { background: #f0f3f8; }
.smf-row--bronze td { background: #fdf0e3; }

/* Top-3 linker farbiger Rand */
.smf-row--gold   td:first-child { box-shadow: inset 4px 0 0 0 #c8a84b; }
.smf-row--silver td:first-child { box-shadow: inset 4px 0 0 0 #7f96b0; }
.smf-row--bronze td:first-child { box-shadow: inset 4px 0 0 0 #b87333; }

/* Rang */
.smf-players-table td.col-rank { text-align: center; width: 38px; }
.smf-rank {
    font-size: 19px;
    font-weight: 800;
    color: #b8b8d0;
}
.smf-row--gold   .smf-rank { color: #c8a84b; }
.smf-row--silver .smf-rank { color: #7f96b0; }
.smf-row--bronze .smf-rank { color: #b87333; }

/* Logo */
.smf-players-table td.col-logo { text-align: center; width: 54px; padding: 8px 6px; }
.smf-team-logo {
    width: 42px; height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
}
.smf-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 8px;
    background: #eee;
    font-size: 12px;
    font-weight: 800;
    color: #888;
    border: 1px solid #ddd;
}

/* Name */
.smf-player-first {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #1a1a2e;
    margin-bottom: 1px;
}
.smf-player-last {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.15;
}
.smf-captain { color: #c8a84b; font-size: 12px; vertical-align: top; margin-left: 2px; }
.smf-player-team {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #9a9ab5;
    margin-top: 2px;
}

/* Zahlenspalten */
.smf-players-table td.col-sp,
.smf-players-table td.col-g,
.smf-players-table td.col-a,
.smf-players-table td.col-tpg,
.smf-players-table td.col-pen2,
.smf-players-table td.col-pen2x2,
.smf-players-table td.col-pen10,
.smf-players-table td.col-penms {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    width: 40px;
}
/* SP-Spalte: etwas mehr Abstand links (Trennung von Namenspalte) */
.smf-players-table th.col-sp,
.smf-players-table td.col-sp {
    padding-left: 18px;
}
.smf-players-table td.col-tpg {
    font-size: 13px;
    color: #666;
}
/* Strafen-Spalten: leicht enger */
.smf-players-table th.col-pen2,
.smf-players-table th.col-pen2x2,
.smf-players-table th.col-pen10,
.smf-players-table th.col-penms,
.smf-players-table td.col-pen2,
.smf-players-table td.col-pen2x2,
.smf-players-table td.col-pen10,
.smf-players-table td.col-penms {
    width: 36px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 13px;
    color: #888;
}
/* MS-Strafe: rot hervorheben wenn > 0 */
.smf-players-table td.col-penms:not(:empty) {
    color: #c0392b;
    font-weight: 700;
}
/* Trennlinie vor Strafen-Gruppe */
.smf-players-table th.col-pen2,
.smf-players-table td.col-pen2 {
    border-left: 2px solid #f0f1f7;
}
.smf-players-table td.col-pkt { text-align: center; width: 66px; }

/* Punkte-Badge */
.smf-pkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid #dedee8;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a2e;
    background: #fff;
    padding: 0 6px;
}
.smf-pkt--first { border-color: #c0392b; color: #c0392b; }

/* Leer */
.smf-empty {
    text-align: center;
    padding: 36px 20px;
    color: #aaa;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .smf-players-table thead th.col-a,
    .smf-players-table tbody td.col-a,
    .smf-players-table thead th.col-tpg,
    .smf-players-table tbody td.col-tpg,
    .smf-players-table thead th.col-pen2x2,
    .smf-players-table tbody td.col-pen2x2,
    .smf-players-table thead th.col-pen10,
    .smf-players-table tbody td.col-pen10,
    .smf-players-table thead th.col-penms,
    .smf-players-table tbody td.col-penms  { display: none; }
    .smf-team-logo, .smf-logo-fallback     { width: 32px; height: 32px; }
    .smf-pkt { min-width: 34px; font-size: 14px; height: 28px; }
}
@media (max-width: 400px) {
    .smf-players-table thead th.col-pen2,
    .smf-players-table tbody td.col-pen2   { display: none; }
}

/* ── Spieler-Badges (Kapitän, MVP) ───────────────────────────── */
.smf-player-badges {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    vertical-align: middle;
    margin-left: 2px;
}
.smf-badge-cap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #c8a84b;
    cursor: default;
}
.smf-badge-mvp {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    background: #c0392b;
    color: #fff;
    border-radius: 5px;
    padding: 1px 5px;
    letter-spacing: .03em;
    cursor: default;
}

/* ── Ligen-Anzahl Badge ──────────────────────────────────────── */
.smf-league-count {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Ligen-Info über Teamnamen ───────────────────────────────── */
.smf-player-leagues {
    display: block;
    font-size: 11px;
    color: #9a9ab5;
    margin-top: 3px;
    margin-bottom: 1px;
}
.smf-player-leagues .smf-league-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 5px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
}