@import url(font-awesome.min.css);

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@500;700;900&display=swap");



/*

	Modern Soccer Statistics CSS - SoccerDBData

	Optimized for professional sports data presentation

*/



/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block;

}



html, body {

    width: 100%;

    margin: 0;

    padding: 0;

}



body {

    line-height: 1;

}



ol, ul {

    list-style: none;

}



    ul.icons {

        cursor: default;

        list-style: none;

        padding-left: 0;

    }



        ul.icons li {

            display: inline-block;

            padding: 0 1em 0 0;

        }



            ul.icons li:last-child {

                padding-right: 0;

            }



            ul.icons li .icon {

                color: inherit;

            }



                ul.icons li .icon:before {

                    font-size: 1.25em;

                }



blockquote, q {

    quotes: none;

}



    blockquote:before, blockquote:after, q:before, q:after {

        content: '';

        content: none;

    }



body {

    -webkit-text-size-adjust: none;

}



/* Box Model */

*, *:before, *:after {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



/* Grid System */

.row {

    border-bottom: solid 1px transparent;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



    .row > * {

        float: left;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

    }



    .row:after, .row:before {

        content: '';

        display: block;

        clear: both;

        height: 0;

    }



    .row.uniform > * > :first-child {

        margin-top: 0;

    }



    .row.uniform > * > :last-child {

        margin-bottom: 0;

    }



    .row > * {

        padding: 0 0 0 1.5em;

    }



.row {

    margin: 0 0 -1px -1.5em;

}



    .row.uniform > * {

        padding: 1.5em 0 0 1.5em;

    }



    .row.uniform {

        margin: -1.5em 0 -1px -1.5em;

    }



.\31 2u, .\31 2u\24 {

    width: 100%;

    clear: none;

    margin-left: 0;

}



.\31 1u, .\31 1u\24 {

    width: 91.6666666667%;

    clear: none;

    margin-left: 0;

}



.\31 0u, .\31 0u\24 {

    width: 83.3333333333%;

    clear: none;

    margin-left: 0;

}



.\39 u, .\39 u\24 {

    width: 75%;

    clear: none;

    margin-left: 0;

}



.\38 u, .\38 u\24 {

    width: 66.6666666667%;

    clear: none;

    margin-left: 0;

}



.\37 u, .\37 u\24 {

    width: 58.3333333333%;

    clear: none;

    margin-left: 0;

}



.\36 u, .\36 u\24 {

    width: 50%;

    clear: none;

    margin-left: 0;

}



.\35 u, .\35 u\24 {

    width: 41.6666666667%;

    clear: none;

    margin-left: 0;

}



.\34 u, .\34 u\24 {

    width: 33.3333333333%;

    clear: none;

    margin-left: 0;

}



.\33 u, .\33 u\24 {

    width: 25%;

    clear: none;

    margin-left: 0;

}



.\32 u, .\32 u\24 {

    width: 16.6666666667%;

    clear: none;

    margin-left: 0;

}



.\31 u, .\31 u\24 {

    width: 8.3333333333%;

    clear: none;

    margin-left: 0;

}



/* Core Styling */

@-ms-viewport {

    width: device-width;

}



body {

    -ms-overflow-style: scrollbar;

    background: #f5f7fa;

}



    body.is-loading *, body.is-loading *:before, body.is-loading *:after,

    body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {

        -moz-animation: none !important;

        -webkit-animation: none !important;

        -ms-animation: none !important;

        animation: none !important;

        -moz-transition: none !important;

        -webkit-transition: none !important;

        -ms-transition: none !important;

        transition: none !important;

    }



/* Modern Typography */

body, input, select, textarea {

    color: #2d3748;

    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



@media screen and (max-width: 1680px) {

    body, input, select, textarea {

        font-size: 14px;

    }

}



@media screen and (max-width: 1280px) {

    body, input, select, textarea {

        font-size: 13px;

    }

}



a {

    -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;

    -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;

    -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;

    transition: color 0.2s ease, border-bottom-color 0.2s ease;

    border-bottom: none;

    color: #2563eb;

    text-decoration: none;

    font-weight: 500;

}



    a:hover {

        color: #1d4ed8;

    }



strong, b {

    color: #1a202c;

    font-weight: 600;

}



em, i {

    font-style: italic;

}



p {

    margin: 0 0 1.5em 0;

}



/* Headers - Sports Optimized */

h1, h2, h3, h4, h5, h6 {

    color: #1a202c;

    font-family: "Roboto", "Inter", sans-serif;

    font-weight: 700;

    line-height: 1.25;

    margin: 0 0 1em 0;

    letter-spacing: -0.025em;

}



    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

        color: inherit;

        text-decoration: none;

    }



h1 {

    font-size: 2.25em;

    font-weight: 900;

    margin: 0 0 0.5em 0;

}



h2 {

    font-size: 1.75em;

    font-weight: 800;

}



h3 {

    font-size: 1.35em;

    font-weight: 700;

}



h4 {

    font-size: 1.1em;

    font-weight: 600;

}



h5 {

    font-size: 1em;

    font-weight: 600;

}



h6 {

    font-size: 0.875em;

    font-weight: 600;

}



@media screen and (max-width: 736px) {

    h1 {

        font-size: 1.85em;

    }



    h2 {

        font-size: 1.4em;

    }

}



/* Professional Table Styling - Sports Data Focused */

.table {

    width: 100%;

    margin-bottom: 28px;

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);

    border: 1px solid #e2e8f0;

}



    .table thead > tr > th,

    .table tbody > tr > th,

    .table tfoot > tr > th,

    .table thead > tr > td,

    .table tbody > tr > td,

    .table tfoot > tr > td {

        padding: 12px 14px;

        line-height: 1.5;

        vertical-align: middle;

        border: none;

        font-size: 14px;

    }



    /* Table Header - Clean & Professional */

    .table thead > tr > th {

        background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);

        color: #ffffff;

        font-weight: 700;

        text-align: center;

        vertical-align: middle;

        border: none;

        text-transform: uppercase;

        font-size: 11px;

        letter-spacing: 0.08em;

        padding: 14px 12px;

        border-bottom: 3px solid #1e3a8a;

    }



    /* Table Body - Enhanced Readability */

    .table tbody > tr {

        transition: background-color 0.15s ease, box-shadow 0.15s ease;

    }



        .table tbody > tr:hover {

            background-color: #f0f9ff;

            box-shadow: inset 0 0 0 1px #dbeafe;

        }



        .table tbody > tr > td {

            border-bottom: 1px solid #e5e7eb;

            color: #374151;

            font-weight: 500;

        }



            /* Numeric Data Emphasis */

            /*.table tbody > tr > td:not(:first-child) {

                text-align: center;

                font-variant-numeric: tabular-nums;

                font-feature-settings: "tnum";

            }*/



            .table tbody > tr > td:first-child {

                font-weight: 600;

                color: #1f2937;

            }



/* Bordered Table Variant */

.table-bordered {

    border: 1px solid #d1d5db;

    border-radius: 10px;

    overflow: hidden;

}



    .table-bordered tr:nth-child(even) td {

        background: #f9fafb;

    }



    .table-bordered tr:nth-child(odd) td {

        background: #ffffff;

    }



    .table-bordered tr:hover td {

        background: #eff6ff !important;

    }



    .table-bordered > thead > tr > th {

        border: none;

        background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);

    }



    .table-bordered > tbody > tr > td,

    .table-bordered > tbody > tr > th {

        border: none;

        border-bottom: 1px solid #e5e7eb;

    }



    .table-bordered > tbody > tr:last-child > td {

        border-bottom: none;

    }



/* Inverted Table - Premium Style */

.table-bordered-inverted {

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}



    .table-bordered-inverted th {

        background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

        color: #ffffff;

        font-weight: 700;

        text-align: center;

        padding: 14px 12px;

        border: none;

        text-transform: uppercase;

        font-size: 11px;

        letter-spacing: 0.08em;

    }



    .table-bordered-inverted tr:nth-child(even) td {

        background: #f8fafc;

    }



    .table-bordered-inverted tr:nth-child(odd) td {

        background: #ffffff;

    }



    .table-bordered-inverted tr:hover td {

        background: #eff6ff !important;

    }



    .table-bordered-inverted > thead > tr > th,

    .table-bordered-inverted > tbody > tr > th,

    .table-bordered-inverted > tbody > tr > td {

        border: none;

        border-bottom: 1px solid #e2e8f0;

    }



    .table-bordered-inverted > tbody > tr:last-child > td {

        border-bottom: none;

    }



/* Buttons - Clean & Professional */

input[type="submit"],

input[type="reset"],

input[type="button"],

button,

.button {

    -moz-appearance: none;

    -webkit-appearance: none;

    -ms-appearance: none;

    appearance: none;

    -moz-transition: all 0.2s ease;

    -webkit-transition: all 0.2s ease;

    -ms-transition: all 0.2s ease;

    transition: all 0.2s ease;

    background: #2563eb;

    border-radius: 6px;

    border: none;

    color: #ffffff;

    cursor: pointer;

    display: inline-block;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 600;

    height: 40px;

    letter-spacing: 0.01em;

    line-height: 40px;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    padding: 0 20px;

    box-shadow: none;

}



    /* Button links inside divs */

    .button a {

        color: #ffffff;

        text-decoration: none;

        display: block;

        width: 100%;

        height: 100%;

    }



    input[type="submit"]:hover,

    input[type="reset"]:hover,

    input[type="button"]:hover,

    button:hover,

    .button:hover {

        background: #1d4ed8;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    }



    input[type="submit"]:active,

    input[type="reset"]:active,

    input[type="button"]:active,

    button:active,

    .button:active {

        background: #1e40af;

        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    }



    input[type="submit"].selected,

    input[type="reset"].selected,

    input[type="button"].selected,

    button.selected,

    .button.selected {

        background: #059669;

        box-shadow: none;

    }



        .button.selected:hover {

            background: #047857;

        }



        .button.selected a {

            color: #ffffff;

        }



/* Forms - Clean & Modern */

input[type="text"],

input[type="password"],

input[type="email"],

input[type="tel"],

input[type="search"],

input[type="url"],

select,

textarea {

    -moz-appearance: none;

    -webkit-appearance: none;

    -ms-appearance: none;

    appearance: none;

    background: #ffffff;

    border-radius: 7px;

    border: 1.5px solid #d1d5db;

    color: #374151;

    display: block;

    outline: 0;

    padding: 0 14px;

    text-decoration: none;

    width: 100%;

    transition: all 0.2s ease;

    font-size: 14px;

}



    input[type="text"]:focus,

    input[type="password"]:focus,

    input[type="email"]:focus,

    input[type="tel"]:focus,

    input[type="search"]:focus,

    input[type="url"]:focus,

    select:focus,

    textarea:focus {

        border-color: #2563eb;

        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

        background: #ffffff;

    }



input[type="text"],

input[type="password"],

input[type="email"],

input[type="tel"],

input[type="search"],

input[type="url"],

select {

    height: 42px;

}



textarea {

    padding: 12px 14px;

    min-height: 120px;

}



/* Sidebar - Clean Navigation */

#sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: 260px;

    height: 100%;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;

    box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.05);

    transform: translateX(0);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 1000;

    padding: 2em 1.25em;

    overflow-y: auto;

}



    #sidebar.inactive {

        transform: translateX(-100%);

    }



    #sidebar.active {

        transform: translateX(0);

    }



/* Toggle Button */

.toggle {

    position: fixed;

    top: 1.2em;

    left: 1em;

    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);

    color: white;

    border: none;

    border-radius: 6px;

    padding: 0.4em 0.7em;

    font-size: 1.1em;

    cursor: pointer;

    z-index: 1001;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

}



    .toggle:hover {

        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);

        transform: scale(1.05);

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    }



/* Main Content */

#main {

    flex-grow: 1;

    margin-left: 260px;

    padding: 2.5em 3em;

    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: #f5f7fa;

    min-height: 100vh;

}



@media (max-width: 768px) {

    #main {

        margin-left: 0;

        padding: 1.5em;

    }



    #sidebar {

        transform: translateX(-100%);

    }



        #sidebar.active {

            transform: translateX(0);

        }

}



/* Header - Professional Banner */

#header {

    display: -moz-flex;

    display: -webkit-flex;

    display: -ms-flex;

    display: flex;

    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

    border-bottom: 3px solid #2563eb;

    padding: 28px 0 22px 0;

    position: relative;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

    margin-bottom: 2em;

}



    #header > * {

        -moz-flex: 1;

        -webkit-flex: 1;

        -ms-flex: 1;

        flex: 1;

        margin-bottom: 0;

    }



    #header .logo {

        border-bottom: 0;

        color: #1e3a8a;

        font-family: "Roboto", sans-serif;

        font-size: 1.5em;

        font-weight: 900;

        letter-spacing: -0.03em;

        text-transform: uppercase;

    }



    #header .icons {

        text-align: right;

    }



/* Menu - Modern Navigation */

#menu ul {

    color: #374151;

    font-family: "Inter", sans-serif;

    font-weight: 500;

    list-style: none;

    margin-bottom: 0;

    padding: 0;

}



    #menu ul a, #menu ul span {

        border-bottom: 0;

        color: #4b5563;

        cursor: pointer;

        display: block;

        font-size: 0.95em;

        padding: 11px 14px;

        border-radius: 7px;

        transition: all 0.2s ease;

        margin: 3px 0;

        font-weight: 500;

    }



        #menu ul a:hover, #menu ul span:hover {

            background: #eff6ff;

            color: #1e40af;

            transform: translateX(4px);

            font-weight: 600;

        }



#menu > ul > li {

    border-top: none;

    margin: 6px 0;

    padding: 0;

}



    #menu > ul > li:first-child {

        margin-top: 0;

    }



/* Search - Enhanced */

#search form {

    position: relative;

}



    #search form input[type="text"] {

        padding-right: 44px;

        background: #f9fafb;

        border: 1.5px solid #e5e7eb;

        height: 44px;

    }



        #search form input[type="text"]:focus {

            background: #ffffff;

            border-color: #2563eb;

        }



    #search form:before {

        color: #9ca3af;

        content: '\f002';

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        display: block;

        font-size: 1.1em;

        height: 44px;

        line-height: 44px;

        position: absolute;

        right: 0;

        text-align: center;

        top: 0;

        width: 44px;

        pointer-events: none;

    }



/* Wrapper */

#wrapper {

    width: 100%;

    display: flex;

    flex-direction: row;

    min-height: 100vh;

}



/* Utility Classes */

.box {

    border-radius: 10px;

    border: 1px solid #e5e7eb;

    margin-bottom: 24px;

    padding: 24px;

    background: #ffffff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



hr {

    border: 0;

    border-bottom: 2px solid #e5e7eb;

    margin: 32px 0;

}



/* Image */

.image {

    border-radius: 8px;

    border: 0;

    display: inline-block;

    position: relative;

    overflow: hidden;

}



    .image img {

        border-radius: 8px;

        display: block;

    }



/* Additional Stats Utilities */

.stat-highlight {

    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);

    padding: 3px 8px;

    border-radius: 4px;

    font-weight: 600;

    color: #1e40af;

}



.stat-positive {

    color: #059669;

    font-weight: 600;

}



.stat-negative {

    color: #dc2626;

    font-weight: 600;

}



.badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.badge-primary {

    background: #dbeafe;

    color: #1e40af;

}



.badge-success {

    background: #d1fae5;

    color: #047857;

}



.badge-warning {

    background: #fed7aa;

    color: #92400e;

}