/* ==========================================================================
   My_Leagues — widgety ligowe (komplet stylów, bez potrzeby Dodatkowego CSS)
   Projektowane pod motyw SmartMag + Elementor (atleti.pl, lechnews.pl):
   tabele jak w treści tych stron — nagłówek w kolorze klubu z białymi
   etykietami, ramka z zaokrągleniem, delikatne pasy wierszy.

   Kolory pochodzą z motywu, więc każda strona ma swoje barwy:
   - akcent (nagłówek):  Ustawienia → My Leagues, inaczej --c-main SmartMag
                          → Primary z Elementora → kolor motywu blokowego WP,
   - nazwy:   Ustawienia → My Leagues, inaczej --c-headings SmartMag,
   - linie, pasy, tekst pomocniczy: --c-separator i skala --c-contrast-*.
   Tryb nocny: SmartMag (.s-dark) sam przedefiniowuje te zmienne, więc
   widgety przełączają się razem ze stroną. Czcionka zawsze z motywu.

   Układ zależy od szerokości widgetu (container queries), nie ekranu:
   - wąski (sidebar, telefon): skrócone kolumny, mecz w dwóch liniach,
   - od 520 px (podstrony typu „Tabela”): pełne kolumny, mecz w jednej linii,
   - od 640 px: dodatkowo forma drużyn.
   Pełne dane są zawsze w HTML — boty wyszukiwarek widzą wszystko.
   ========================================================================== */

.ml {
    --ml-accent-base: var(--c-main, var(--e-global-color-primary, var(--wp--preset--color--primary, #35825f)));
    --ml-accent: var(--ml-accent-base);
    --ml-ink-base: var(--c-headings, currentColor);
    --ml-ink: var(--ml-ink-base);
    --ml-on-accent: #fff;
    --ml-muted: var(--c-contrast-450, rgba(128, 128, 128, 0.95));
    --ml-line: var(--c-separator, rgba(128, 128, 128, 0.2));
    --ml-zebra: var(--c-contrast-50, rgba(128, 128, 128, 0.06));
    --ml-hover: var(--c-contrast-75, rgba(128, 128, 128, 0.11));
    --ml-accent-soft: rgba(128, 128, 128, 0.1);
    --ml-score-bg: var(--ml-ink);
    --ml-score-text: var(--c-contrast-0, #fff);
    --ml-win: #2f9e56;
    --ml-draw: #9aa0a6;
    --ml-loss: #d64545;
    --ml-radius: 10px;
    --ml-crest: 20px;

    container: ml / inline-size;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ml {
        --ml-accent-soft: color-mix(in srgb, var(--ml-accent) 10%, transparent);
    }

    /* Tryb nocny SmartMag: akcent pasków/wyróżnień lekko rozjaśniony (nagłówek zostaje w kolorze klubu). */
    .s-dark .ml,
    .site-s-dark .ml {
        --ml-accent: color-mix(in srgb, var(--ml-accent-base) 78%, #fff);
        --ml-accent-soft: color-mix(in srgb, var(--ml-accent) 16%, transparent);
    }

    .site-s-dark .s-light .ml {
        --ml-accent: var(--ml-accent-base);
        --ml-accent-soft: color-mix(in srgb, var(--ml-accent) 10%, transparent);
    }
}

/* W trybie nocnym nazwy zawsze w kolorze nagłówków motywu — także gdy w ustawieniach
   wybrano własny (ciemny) kolor nazw, który na ciemnym tle byłby nieczytelny. */
.s-dark .ml,
.site-s-dark .ml {
    --ml-ink: var(--c-headings, currentColor);
}

.site-s-dark .s-light .ml {
    --ml-ink: var(--ml-ink-base);
}

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

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

/* --- 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 ciemnym tle: delikatna jasna obwódka. */
.s-dark .ml .ml-crest,
.site-s-dark .ml .ml-crest {
    filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.4));
}

.site-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;
}

/* --- Tabela: ramka i nagłówek -------------------------------------------- */
/* Strony SmartMag stylują tabele w treści (.post-content table …) z !important:
   table-layout: fixed, białe tło, cień, odstępy 14×16 px, wyrównanie do góry.
   Widgety stoją w treści podstron, więc te reguły trzeba tu przebić. */

.ml .ml-table[class] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--ml-line) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--ml-radius) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: none !important;
    table-layout: auto !important;
    color: inherit;
    font-size: inherit;
}

.ml .ml-table > thead {
    background: var(--ml-accent-base) !important;
    color: var(--ml-on-accent) !important;
}

/* Delikatny gradient do ciemniejszego odcienia koloru klubu (jak nagłówki tabel na psgonline.pl). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ml .ml-table > thead {
        background: linear-gradient(135deg, var(--ml-accent-base), color-mix(in srgb, var(--ml-accent-base) 80%, #000)) !important;
    }
}

.ml .ml-table > tbody > tr:nth-child(n) {
    background: none !important;
}

/* Komórki: odstępy i dolna linia sterowane zmiennymi, przypiętymi jednym !important.
   Reguły niżej zmieniają tylko zmienne — bez wyścigu na !important. */
.ml .ml-table th,
.ml .ml-table td {
    --ml-pt: 9px;
    --ml-pr: 5px;
    --ml-pb: 9px;
    --ml-pl: 5px;
    --ml-bb: 0px;
    --ml-bc: transparent;
}

.ml .ml-table th[class],
.ml .ml-table td[class] {
    padding: var(--ml-pt) var(--ml-pr) var(--ml-pb) var(--ml-pl) !important;
    border: 0 solid var(--ml-bc) !important;
    border-bottom-width: var(--ml-bb) !important;
    vertical-align: middle !important;
    word-break: normal !important;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: center;
    white-space: nowrap;
}

/* Nagłówki kolumn: białe wersaliki na kolorze klubu (jak tabele w treści stron). */
.ml .ml-table thead th[class][scope] {
    --ml-pt: 8px;
    --ml-pb: 8px;
    color: var(--ml-on-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Tabela: wiersze ------------------------------------------------------ */

.ml .ml-table tbody > tr > [class] {
    --ml-bb: 1px;
    --ml-bc: var(--ml-line);
}

.ml .ml-table tbody > tr:last-child > [class] {
    --ml-bb: 0px;
}

.ml .ml-table tbody > tr:nth-child(even) > [class] {
    background: var(--ml-zebra);
}

.ml .ml-table tbody > tr:hover > [class] {
    background: var(--ml-hover);
}

/* Obserwowana drużyna (plain z ustawień widgetu) i jej zawodnicy */
.ml .ml-table tbody > tr.is-followed > [class] {
    background: var(--ml-accent-soft);
    font-weight: 700;
}

.ml .ml-table tbody > tr.is-followed > :first-child {
    box-shadow: inset 3px 0 0 var(--ml-accent);
}

/* --- Tabela: kolumny ------------------------------------------------------ */

.ml .ml-table .ml-c-rank[class] {
    --ml-pl: 8px;
    width: 1%;
}

.ml .ml-rank {
    display: inline-block;
    min-width: 22px;
    padding: 3px 4px;
    border-radius: 3px;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.ml .ml-table tr.is-followed .ml-rank {
    background: var(--ml-accent);
    color: var(--ml-on-accent);
}

.ml .ml-table .ml-c-name[class] {
    /* width + max-width: 0 — nazwa wypełnia wolne miejsce i skraca się wielokropkiem. */
    width: 100%;
    max-width: 0;
    font-weight: 600;
    text-align: left;
}

.ml .ml-table tbody .ml-c-name[class] {
    color: var(--ml-ink);
}

.ml .ml-entity {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

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

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

.ml .ml-sub {
    overflow: hidden;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml .ml-table .ml-c-num[class] {
    width: 1%;
    min-width: 2.3em;
}

.ml .ml-table .ml-c-goals[class] {
    width: 1%;
    min-width: 4.2em;
}

.ml .ml-table .ml-c-main[class] {
    --ml-pr: 9px;
    font-weight: 800;
}

.ml .ml-table tbody .ml-c-main[class] {
    color: var(--ml-ink);
}

.ml .ml-table .ml-c-team[class] {
    width: 30%;
    max-width: 0;
    text-align: left;
}

/* Forma: Z / R / P */
.ml .ml-table .ml-c-form[class] {
    --ml-pr: 9px;
    width: 1%;
}

.ml .ml-form {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 3px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
}

.ml .ml-form:first-child {
    margin-left: 0;
}

.ml .ml-form--win { background: var(--ml-win); }
.ml .ml-form--draw { background: var(--ml-draw); }
.ml .ml-form--loss { background: var(--ml-loss); }

/* --- Widoczność kolumn zależna od szerokości widgetu --------------------- */

.ml .ml-wide-only,
.ml .ml-wider-only {
    display: none;
}

@container ml (min-width: 520px) {
    .ml th.ml-wide-only,
    .ml td.ml-wide-only {
        display: table-cell;
    }

    .ml span.ml-wide-only {
        display: inline;
    }

    .ml .ml-narrow-only {
        display: none;
    }

    .ml .ml-table th[class],
    .ml .ml-table td[class] {
        --ml-pl: 7px;
        --ml-pr: 7px;
    }

    .ml .ml-table .ml-c-rank[class] {
        --ml-pl: 10px;
    }

    .ml .ml-table .ml-c-main[class],
    .ml .ml-table .ml-c-form[class] {
        --ml-pr: 10px;
    }

    .ml .ml-table tbody > tr > [class] {
        --ml-pt: 10px;
        --ml-pb: 10px;
    }
}

@container ml (min-width: 640px) {
    .ml th.ml-wider-only,
    .ml td.ml-wider-only {
        display: table-cell;
    }
}

/* --- Mecze ---------------------------------------------------------------- */
/* Wąsko: data | drużyny jedna pod drugą | wynik (liczba przy każdej drużynie).
   Szeroko: data | gospodarze | wynik | goście w jednej linii.
   Wiersze to siatka (grid), więc tło i linie są na wierszu, nie na komórkach. */

.ml .ml-matches,
.ml .ml-matches > thead,
.ml .ml-matches > tbody {
    display: block;
}

.ml .ml-matches tr {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
        "date home score"
        "date away score";
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
    padding: 8px 9px;
}

.ml .ml-matches tr > [class],
.ml .ml-matches tbody > tr > [class],
.ml .ml-matches tbody > tr:last-child > [class],
.ml .ml-matches thead th[class][scope] {
    --ml-pt: 0px;
    --ml-pr: 0px;
    --ml-pb: 0px;
    --ml-pl: 0px;
    --ml-bb: 0px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.ml .ml-matches tbody > tr > [class],
.ml .ml-matches tbody > tr:nth-child(even) > [class],
.ml .ml-matches tbody > tr:hover > [class] {
    background: none;
}

.ml .ml-matches > tbody > tr:nth-child(n) {
    border-bottom: 1px solid var(--ml-line);
}

.ml .ml-matches > tbody > tr:last-child {
    border-bottom: 0;
}

.ml .ml-matches > tbody > tr:nth-child(even) {
    background: var(--ml-zebra) !important;
}

.ml .ml-matches > tbody > tr:hover {
    background: var(--ml-hover) !important;
}

.ml .ml-matches .ml-head {
    grid-template-areas: "date home score";
}

.ml .ml-matches .ml-head > .ml-m-away[class][scope] {
    display: none;
}

.ml .ml-matches .ml-m-date { grid-area: date; justify-content: center; }
.ml .ml-matches .ml-m-home { grid-area: home; }
.ml .ml-matches .ml-m-score { grid-area: score; justify-content: center; }
.ml .ml-matches .ml-m-away { grid-area: away; }

.ml .ml-matches thead .ml-m-home {
    justify-content: flex-start;
}

/* Terminarz (bez wyniku): godzina jest w kolumnie daty, środkowa kolumna zbędna. */
.ml .ml-matches--fixtures tr {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
        "date home"
        "date away";
}

.ml .ml-matches--fixtures .ml-head {
    grid-template-areas: "date home";
}

.ml .ml-matches--fixtures tr > .ml-m-score[class][role] {
    display: none;
}

.ml .ml-matches tbody .ml-m-date time {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.ml .ml-m-wday {
    display: none;
    color: var(--ml-muted);
    font-size: 12px;
}

.ml .ml-m-day {
    color: var(--ml-ink);
    font-size: 13px;
    font-weight: 600;
}

.ml .ml-m-time {
    color: var(--ml-muted);
    font-size: 12px;
}

.ml .ml-m-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ml-ink);
    font-weight: 600;
}

.ml .ml-m-team.is-winner,
.ml .ml-m-team.is-followed {
    font-weight: 800;
}

.ml .ml-m-team.is-loser {
    color: var(--ml-muted);
}

/* Wynik wąsko: liczby jedna pod drugą, na wysokości swoich drużyn. */
.ml .ml-matches tbody .ml-m-score {
    flex-direction: column;
    gap: 5px;
    min-width: 1.6em;
    color: var(--ml-ink);
    font-weight: 700;
}

.ml .ml-goals {
    display: block;
    line-height: var(--ml-crest);
}

.ml .ml-goals.is-winner {
    font-weight: 800;
}

.ml .ml-goals.is-loser {
    color: var(--ml-muted);
}

.ml .ml-m-sep {
    display: none;
}

.ml .ml-m-none {
    color: var(--ml-muted);
}

@container ml (min-width: 520px) {
    .ml .ml-matches tr,
    .ml .ml-matches--fixtures tr,
    .ml .ml-matches .ml-head,
    .ml .ml-matches--fixtures .ml-head {
        grid-template-columns: 104px minmax(0, 1fr) 72px minmax(0, 1fr);
        grid-template-areas: "date home score away";
        column-gap: 12px;
    }

    .ml .ml-matches tr {
        padding: 10px 12px;
    }

    .ml .ml-matches .ml-head {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .ml .ml-matches .ml-head > .ml-m-away[class][scope],
    .ml .ml-matches--fixtures tr > .ml-m-score[class][role] {
        display: flex;
    }

    .ml .ml-matches .ml-m-date {
        justify-content: flex-start;
    }

    .ml .ml-matches tbody .ml-m-date time {
        flex-direction: row;
        gap: 6px;
        align-items: baseline;
    }

    .ml .ml-m-wday {
        display: inline;
    }

    .ml .ml-matches tbody .ml-m-time {
        display: none;
    }

    /* Gospodarze do prawej (herb przy wyniku), goście do lewej. */
    .ml .ml-matches .ml-m-home,
    .ml .ml-matches thead .ml-m-home {
        justify-content: flex-end;
        text-align: right;
    }

    .ml .ml-matches .ml-m-home .ml-m-team {
        flex-direction: row-reverse;
    }

    .ml .ml-matches tbody > tr > td.ml-m-score[class] {
        --ml-pt: 4px;
        --ml-pb: 4px;
        --ml-pl: 8px;
        --ml-pr: 8px;
        flex-direction: row;
        gap: 4px;
        justify-content: center;
        justify-self: center;
        min-width: 58px;
        border-radius: 3px;
        background: var(--ml-score-bg);
        color: var(--ml-score-text);
        font-size: 15px;
        font-weight: 800;
    }

    .ml .ml-goals,
    .ml .ml-goals.is-loser {
        color: inherit;
        line-height: 1.2;
    }

    .ml .ml-m-sep {
        display: inline;
    }

    /* Terminarz: godzina w środku, na jasnym polu z ramką. */
    .ml .ml-matches--fixtures tbody > tr > td.ml-m-score[class] {
        background: var(--c-contrast-0, transparent);
        color: var(--ml-ink);
        box-shadow: inset 0 0 0 1px var(--ml-line);
        font-size: 14px;
        font-weight: 700;
    }
}