/* ==========================================================================
   My_Leagues — widgety ligowe (komplet stylów, bez potrzeby Dodatkowego CSS)

   Kolory:
   - akcent: Ustawienia → My Leagues, a gdy puste: główny kolor motywu
     SmartMag (--c-main) → Primary z Elementora → kolor motywu blokowego WP,
   - kolor nazw (--ml-ink): Ustawienia → My Leagues, domyślnie granat.
   Czcionka: globalna czcionka tekstu Elementora albo czcionka motywu.

   Tryb nocny: włącza się razem z przełącznikiem motywu (SmartMag .s-dark)
   i popularnymi wtyczkami/konwencjami (data-theme="dark", .dark-mode,
   WP Dark Mode, Bootstrap). Karty mają własne tło i kolor tekstu, więc
   w nierozpoznanym ciemnym otoczeniu pozostają czytelne (jasne karty).
   Celowo bez prefers-color-scheme: o trybie decyduje strona, nie system.
   ========================================================================== */

/* --- Paleta jasna (także jasna sekcja wewnątrz ciemnej strony) ---------- */

.ml,
.s-dark .s-light .ml {
    --ml-accent: var(--ml-accent-base);
    --ml-ink: var(--ml-ink-base);
    --ml-muted: #6f7280;
    --ml-surface: #fff;
    --ml-surface-hover: #fff;
    --ml-soft: #f7f8fb;
    --ml-border: #e8eaf0;
    --ml-shadow: 0 5px 16px rgba(20, 25, 70, 0.06);
    --ml-shadow-hover: 0 9px 24px rgba(20, 25, 70, 0.12);
    --ml-leader-bg: linear-gradient(90deg, #f4efe2, var(--ml-surface));
    --ml-leader-badge: var(--ml-ink);
    --ml-leader-badge-text: #fff;
    --ml-ink-soft: rgba(20, 25, 70, 0.07);
    --ml-accent-soft: rgba(128, 128, 128, 0.1);
    --ml-accent-line: rgba(128, 128, 128, 0.35);
    --ml-accent-glow: 0 7px 22px rgba(0, 0, 0, 0.06);
}

.ml {
    /* Zmienne Elementora/motywu są zdefiniowane na <body> lub :root, więc to
       odwołanie musi żyć na .ml (w :root fallback wygrałby zawsze).
       SmartMag przed Elementorem: tam Primary Elementora zwykle zostaje domyślny. */
    --ml-accent-base: var(--c-main, var(--e-global-color-primary, var(--wp--preset--color--primary, #35825f)));
    --ml-ink-base: #141946;
    --ml-on-accent: #fff;

    --ml-radius: 12px;
    --ml-radius-card: 14px;
    --ml-crest: 22px;
    --ml-font-size: 14px;

    display: block;
    width: 100%;
    color: var(--ml-ink);
    /* Brak zmiennej Elementora → deklaracja nieważna → czcionka dziedziczona z motywu. */
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-size: var(--ml-font-size);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* --- Paleta nocna --------------------------------------------------------- */

.s-dark .ml,
.site-s-dark .ml,
html.dark .ml,
html.dark-mode .ml,
body.dark-mode .ml,
html[data-theme="dark"] .ml,
body[data-theme="dark"] .ml,
[data-bs-theme="dark"] .ml,
html.wp-dark-mode-active .ml,
html[data-wp-dark-mode-active] .ml,
body.is-dark-theme .ml {
    --ml-accent: var(--ml-accent-base);
    --ml-ink: #f1f3ff;
    --ml-muted: #a9adbd;
    --ml-surface: #1b1b1d;
    --ml-surface-hover: #222225;
    --ml-soft: #262629;
    --ml-border: rgba(255, 255, 255, 0.13);
    --ml-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    --ml-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.42);
    --ml-leader-bg: linear-gradient(90deg, #332d20 0%, #242426 50%, #1b1b1d 100%);
    --ml-leader-badge: #d6ad45;
    --ml-leader-badge-text: #17130a;
    --ml-ink-soft: rgba(255, 255, 255, 0.07);
}

/* Odcienie liczone z koloru akcentu i nazw (z prostymi wartościami powyżej jako fallback). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ml,
    .s-dark .s-light .ml {
        --ml-accent-soft: color-mix(in srgb, var(--ml-accent) 9%, transparent);
        --ml-accent-line: color-mix(in srgb, var(--ml-accent) 32%, transparent);
        --ml-accent-glow: 0 7px 22px color-mix(in srgb, var(--ml-accent) 9%, transparent);
        --ml-ink-soft: color-mix(in srgb, var(--ml-ink) 7%, transparent);
        --ml-shadow: 0 5px 16px color-mix(in srgb, var(--ml-ink) 6%, transparent);
        --ml-shadow-hover: 0 9px 24px color-mix(in srgb, var(--ml-ink) 12%, transparent);
    }

    .s-dark .ml,
    .site-s-dark .ml,
    html.dark .ml,
    html.dark-mode .ml,
    body.dark-mode .ml,
    html[data-theme="dark"] .ml,
    body[data-theme="dark"] .ml,
    [data-bs-theme="dark"] .ml,
    html.wp-dark-mode-active .ml,
    html[data-wp-dark-mode-active] .ml,
    body.is-dark-theme .ml {
        /* Czysty akcent (np. #f00) jest na ciemnym tle ciężki — lekko rozjaśniamy. */
        --ml-accent: color-mix(in srgb, var(--ml-accent-base) 80%, #fff);
        --ml-ink: color-mix(in srgb, var(--ml-ink-base) 6%, #fff);
        --ml-accent-soft: color-mix(in srgb, var(--ml-accent) 15%, transparent);
        --ml-accent-line: color-mix(in srgb, var(--ml-accent) 50%, transparent);
        --ml-accent-glow: 0 7px 22px color-mix(in srgb, var(--ml-accent) 12%, transparent);
        --ml-ink-soft: rgba(255, 255, 255, 0.07);
        --ml-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
        --ml-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.42);
    }
}

/* --- Reset stylów motywu / Elementora ----------------------------------- */

.ml,
.ml *,
.ml *::before,
.ml *::after {
    box-sizing: border-box;
}

.ml .ml-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml .ml-list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml .ml-list > li::marker {
    content: none;
}

.ml abbr[title] {
    border: 0;
    text-decoration: none;
    cursor: help;
}

.ml .ml-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Herb ---------------------------------------------------------------- */

.ml .ml-crest {
    display: block;
    flex: 0 0 auto;
    width: var(--ml-crest);
    height: var(--ml-crest);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

/* Ciemne herby na ciemnych kartach: delikatna jasna obwódka. */
.s-dark .ml .ml-crest,
.site-s-dark .ml .ml-crest,
html.dark .ml .ml-crest,
html.dark-mode .ml .ml-crest,
body.dark-mode .ml .ml-crest,
html[data-theme="dark"] .ml .ml-crest,
body[data-theme="dark"] .ml .ml-crest,
[data-bs-theme="dark"] .ml .ml-crest,
html.wp-dark-mode-active .ml .ml-crest,
html[data-wp-dark-mode-active] .ml .ml-crest,
body.is-dark-theme .ml .ml-crest {
    filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.35));
}

.s-dark .s-light .ml .ml-crest {
    filter: none;
}

/* Brak pliku: puste miejsce o wymiarach herbu — nazwy pozostają wyrównane. */
.ml .ml-crest--empty {
    visibility: hidden;
}

/* --- Wspólne: karta, pigułki, pozycja ------------------------------------ */

.ml .ml-row,
.ml .ml-match {
    position: relative;
    overflow: hidden;
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    box-shadow: var(--ml-shadow);
    color: var(--ml-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ml .ml-row:hover,
.ml .ml-match:hover {
    background-color: var(--ml-surface-hover);
    border-color: var(--ml-accent-line);
    box-shadow: var(--ml-shadow-hover);
    transform: translateY(-1px);
}

/* Pasek akcentu: zawsze przy meczach, przy obserwowanej drużynie w tabelach. */
.ml .ml-match::before,
.ml .ml-row.is-followed::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--ml-accent);
    transition: top 0.2s ease, bottom 0.2s ease, border-radius 0.2s ease;
}

.ml .ml-match:hover::before,
.ml .ml-row.is-followed:hover::before {
    top: 0;
    bottom: 0;
    border-radius: 0;
}

.ml .ml-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ml-ink-soft);
    color: var(--ml-ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.ml .ml-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 26px;
    padding: 3px 4px;
    border-radius: 8px;
    background: var(--ml-soft);
    color: var(--ml-ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ml .ml-pill--accent {
    background: var(--ml-accent-soft);
    color: var(--ml-accent);
    font-weight: 900;
}

/* --- Tabele (tabela ligowa, strzelcy, asysty) ---------------------------- */
/* Semantyczna <table> dla SEO i czytników; wiersze rysowane jako karty (grid). */

.ml .ml-table {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

.ml .ml-table > thead,
.ml .ml-table > tbody {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ml .ml-table tr {
    display: grid;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
}

.ml .ml-standings tr {
    grid-template-columns: minmax(28px, 36px) minmax(0, 1fr) repeat(2, minmax(30px, 42px)) minmax(34px, 46px);
}

.ml .ml-players tr {
    grid-template-columns: minmax(28px, 36px) minmax(0, 1fr) minmax(36px, 52px);
}

.ml .ml-standings .ml-row,
.ml .ml-players .ml-row {
    border-radius: var(--ml-radius);
}

/* Specyficzność ponad resety tabel motywów (np. "table tbody>tr:nth-child(odd)>td" w Hello Elementor). */
.ml .ml-table tr > th,
.ml .ml-table tr > td {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: middle;
}

.ml .ml-table tr > .ml-col-rank,
.ml .ml-table tr > .ml-col-num {
    justify-content: center;
    text-align: center;
}

.ml .ml-table .ml-head {
    padding-top: 0;
    padding-bottom: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.ml .ml-table .ml-head > th[scope] {
    color: var(--ml-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ml .ml-team {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
}

.ml .ml-team__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ml .ml-team__name,
.ml .ml-team__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml .ml-team__sub {
    margin-top: 2px;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 500;
}

.ml .ml-players .ml-pill {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 14px;
}

/* Lider tabeli / klasyfikacji */
.ml .ml-row.is-leader {
    background: var(--ml-leader-bg);
}

.ml .ml-row.is-leader .ml-rank {
    background: var(--ml-leader-badge);
    color: var(--ml-leader-badge-text);
}

/* Obserwowana drużyna (plain z ustawień widgetu) i jej zawodnicy */
.ml .ml-row.is-followed {
    border-color: var(--ml-accent-line);
    box-shadow: var(--ml-accent-glow);
}

/* --- Mecze -------------------------------------------------------------- */

.ml .ml-matches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    --ml-crest: 22px;
}

.ml .ml-matches > .ml-match {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px 11px 14px;
    border-radius: var(--ml-radius-card);
}

.ml .ml-match__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 7px 6px;
    border: 1px solid var(--ml-ink-soft);
    border-radius: 11px;
    background: var(--ml-soft);
    line-height: 1.15;
}

.ml .ml-match__day {
    color: var(--ml-ink);
    font-size: 14px;
    font-weight: 800;
}

.ml .ml-match__time {
    margin-top: 3px;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 700;
}

.ml .ml-match__teams {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ml .ml-match__team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 750;
}

.ml .ml-match__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml .ml-match__score {
    display: grid;
    gap: 6px;
    min-width: 42px;
    padding: 7px 10px;
    border-radius: 11px;
    background: var(--ml-ink-soft);
    color: var(--ml-ink);
    font-size: 17px;
    font-weight: 900;
    line-height: var(--ml-crest);
    text-align: center;
}

.ml .ml-match__team.is-loser,
.ml .ml-match__score .is-loser {
    color: var(--ml-muted);
}

.ml .ml-match__team.is-followed .ml-match__name {
    font-weight: 900;
}

/* --- Węższe kontenery i preferencje ruchu -------------------------------- */

@media (max-width: 380px) {
    .ml .ml-matches > .ml-match {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 10px 10px 12px;
    }

    .ml .ml-table tr {
        gap: 5px;
        padding: 7px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ml .ml-row,
    .ml .ml-match,
    .ml .ml-match::before,
    .ml .ml-row.is-followed::before {
        transition: none;
    }

    .ml .ml-row:hover,
    .ml .ml-match:hover {
        transform: none;
    }
}