/* SoccerPrediction.io - Top League Stats mobile fix */

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .tls-page,
    .tls-page *,
    .tls-hero,
    .tls-hero-single,
    .tls-table-card,
    .tls-grid,
    .tls-card,
    .tls-table-wrap {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tls-page {
        width: 100% !important;
        padding: 0 10px 24px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .tls-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px 2px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .tls-hero,
    .tls-hero-single {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 18px 14px !important;
        overflow: hidden !important;
    }

    .tls-hero > div,
    .tls-hero-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tls-hero h1,
    .tls-hero-single h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 8px !important;
        font-size: 24px !important;
        line-height: 1.14 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tls-hero p,
    .tls-hero-single p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tls-hero-actions {
        width: 100% !important;
        margin-top: 14px !important;
    }

    .tls-month-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 14px !important;
        margin: 0 !important;
    }

    .tls-month-form label,
    .tls-month-form select,
    .tls-month-form button,
    .tls-month-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .tls-month-form select {
        height: 40px !important;
    }

    .tls-month-form button {
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Index cards */
    .tls-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .tls-card {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .tls-card-img {
        width: 92px !important;
        min-width: 92px !important;
        height: 100% !important;
    }

    .tls-card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .tls-card-body {
        min-width: 0 !important;
        padding: 13px !important;
    }

    .tls-card-body h2,
    .tls-card-body p {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Detail ranking */
    .tls-table-card {
        width: 100% !important;
        padding: 14px 10px !important;
        overflow: hidden !important;
    }

    .tls-table-head {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .tls-table-head h2 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .tls-date-range {
        width: fit-content !important;
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 11px !important;
    }

    .tls-table-wrap {
        width: 100% !important;
        overflow: visible !important;
    }

    .tls-table {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    .tls-table thead {
        display: none !important;
    }

    .tls-table tbody {
        width: 100% !important;
        display: grid !important;
        gap: 10px !important;
    }

    .tls-table tr {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 8px 10px !important;
        padding: 12px !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.025) !important;
    }

    .tls-table td {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .tls-table td:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .tls-table td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .tls-table td:nth-child(3),
    .tls-table td:nth-child(4) {
        grid-column: span 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,.035) !important;
    }

    .tls-table td:nth-child(3)::before,
    .tls-table td:nth-child(4)::before {
        content: attr(data-label) !important;
        color: #8fa3bd !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
    }

    .tls-table td:nth-child(5) {
        grid-column: 1 / -1 !important;
        padding-top: 3px !important;
    }

    .tls-league-cell {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
    }

    .tls-league-cell > div:last-child {
        min-width: 0 !important;
    }

    .tls-league-cell strong,
    .tls-league-cell small {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tls-league-logo {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .tls-score-cell {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tls-score-cell > strong {
        display: block !important;
        margin-bottom: 6px !important;
    }

    .tls-bar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tls-info-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        overflow: hidden !important;
    }

    .tls-formula {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 430px) {
    .tls-page {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .tls-hero h1,
    .tls-hero-single h1 {
        font-size: 22px !important;
    }

    .tls-table tr {
        grid-template-columns: 46px minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    .tls-card {
        grid-template-columns: 78px minmax(0, 1fr) !important;
    }

    .tls-card-img {
        width: 78px !important;
        min-width: 78px !important;
    }
}


/* Fix Matches / metric rows on mobile */
@media (max-width: 900px) {
    .tls-table td:nth-child(3),
    .tls-table td:nth-child(4) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 9px 11px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,.045) !important;
    }

    .tls-table td:nth-child(3)::before,
    .tls-table td:nth-child(4)::before {
        content: attr(data-label) !important;
        display: block !important;
        margin: 0 !important;
        color: #8fa3bd !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .tls-table td:nth-child(3) .tls-number,
    .tls-table td:nth-child(4) .tls-number {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: #fff !important;
    }
}