/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --color-bg:            #f6f7f9;
    --color-surface:       #ffffff;
    --color-border:        #e1e4e8;
    --color-text:          #1a1d23;
    --color-text-muted:    #6b7280;

    --color-header-bg:     #0f1b2d;
    --color-header-text:   #f6f7f9;

    --color-accent:        #0f6d5c;
    --color-accent-dark:   #0b5346;
    --color-accent-light:  #e6f2ef;

    --color-success:       #0f6d5c;
    --color-warning:       #b45309;
    --color-danger:        #b3261e;

    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Page-specific background images. The .page-container below sits on top
   with a translucent white backing, so content stays fully legible no
   matter what's happening in the image behind it. */
body.bg-login       { background-image: url("/static/images/backgrounds/login.a118693070fa.jpg"); }
body.bg-dashboard    { background-image: url("/static/images/backgrounds/dashboard.1c43d9aebf2d.jpg"); }
body.bg-account      { background-image: url("/static/images/backgrounds/account.50a72908555e.jpg"); }
body.bg-stats        { background-image: url("/static/images/backgrounds/stats.f86eb636b93d.jpg"); }
body.bg-cup          { background-image: url("/static/images/backgrounds/cup.63beb0b867b9.jpg"); }
body.bg-mini-leagues { background-image: url("/static/images/backgrounds/mini_leagues.4f7e7ecd02d4.jpg"); }
body.bg-predictions  { background-image: url("/static/images/backgrounds/predictions.ea75ff6e008b.jpg"); }
body.bg-results      { background-image: url("/static/images/backgrounds/results.5fcf3fe97bd3.jpg"); }
body.bg-rules        { background-image: url("/static/images/backgrounds/rules.a7716a64f225.jpg"); }
body.bg-standings    { background-image: url("/static/images/backgrounds/standings.642861b96f5b.jpg"); }

h1, h2, h3 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5em 0;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; color: var(--color-text-muted); }

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ==========================================================================
   Layout
   ========================================================================== */
.page-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    min-height: 100vh;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

/* Login is a single small form, not a page of tables, so let the
   background image show through everywhere except a tight card
   right around the form itself. */
body.bg-login .page-container {
    background: transparent;
    box-shadow: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.login-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem 2.5rem;
    max-width: 380px;
    width: 100%;
}

/* ==========================================================================
   Top navigation
   ========================================================================== */
.site-header {
    background-image: url("/static/images/nav_banner.5fd9a1f19378.jpg");
    background-size: cover;
    background-position: left bottom;
    color: var(--color-header-text);
}

.site-nav {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
    position: relative;
}

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--color-header-text);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .nav-hamburger {
        display: block;
        order: 3;
    }
    .nav-user {
        order: 4;
    }
    .nav-spacer {
        order: 2;
    }
    .nav-links {
        display: none;
        order: 10;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        background: rgba(15, 27, 45, 0.15);
        border-radius: var(--radius);
        padding: 0.75rem;
        margin-top: 0.5rem;
    }
    .nav-links.open {
        display: flex;
    }
    .site-nav .nav-links a {
        text-align: center;
        color: var(--color-header-text);
        opacity: 1;
    }
}

.site-nav a {
    color: var(--color-header-text);
    opacity: 0.85;
    font-weight: 500;
    font-size: 1.08rem;
}
.site-nav a:hover {
    opacity: 1;
    text-decoration: none;
    color: #ffffff;
}

.site-nav .nav-spacer { margin-left: auto; }

.site-nav .nav-user {
    font-size: 0.85rem;
}

.btn, button, input[type="submit"] {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5em 1em;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}
.btn:hover, button:hover { border-color: var(--color-accent); }

.btn-primary, button[type="submit"], input[type="submit"] {
    background: #ffffff;
    color: #000000;
    border-color: var(--color-border);
}
.btn-primary:hover, button[type="submit"]:hover { background: #f0f0f0; }

.site-nav .btn, .site-nav button {
    background: transparent;
    color: var(--color-header-text);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.35em 0.9em;
    font-size: 0.85rem;
}
.site-nav .btn:hover, .site-nav button:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.92rem;
}

table th {
    background: #fafbfc;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.65em 0.85em;
    border-bottom: 1px solid var(--color-border);
}

table td {
    padding: 0.6em 0.85em;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

table tr:last-child td { border-bottom: none; }
table tr:nth-child(even) td { background: #fbfcfd; }

/* ==========================================================================
   Forms
   ========================================================================== */
input, select, textarea {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.5em 0.7em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

label { font-weight: 500; font-size: 0.9rem; }

/* ==========================================================================
   Badges / pills (trophies, statuses)
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.4em 0.7em;
    background: var(--color-surface);
    font-size: 0.85rem;
}
.badge.badge-unearned {
    opacity: 0.4;
    filter: grayscale(100%);
    background: #f0f0f0;
}
.badge .badge-icon { font-size: 1.4em; }
.badge .badge-count { font-weight: 700; }

.pill {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.pill-muted { background: #eef0f2; color: var(--color-text-muted); }
.pill-accent { background: var(--color-accent-light); color: var(--color-accent-dark); }

.text-muted { color: var(--color-text-muted); }

/* ==========================================================================
   Nav-style pagination (prev/next week or season)
   ========================================================================== */
.week-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.week-nav .week-nav-disabled {
    color: #c3c8ce;
}

/* ==========================================================================
   Sortable tables
   ========================================================================== */
.sortable-th {
    cursor: pointer;
    user-select: none;
}
.sortable-th:hover {
    background: var(--color-accent-light);
}

/* ==========================================================================
   Trophy cabinets, 6-across on desktop (account page), wrap-flex in the
   profile popup; both collapse to a clean 2-column grid on mobile
   ========================================================================== */
.trophy-cabinet-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6em;
    max-width: 960px;
}

.trophy-cabinet-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
}

.trophy-cabinet-flex > span {
    min-width: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .trophy-cabinet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .trophy-cabinet-flex {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .trophy-cabinet-flex > span {
        min-width: 0 !important;
    }
    .trophy-cabinet-flex .trophy-icon {
        font-size: 6.75em !important;
    }
}

/* ==========================================================================
   Gameweek navigation: full clickable strip on desktop, prev/next arrows
   on mobile
   ========================================================================== */
.gw-strip {
    display: grid;
    grid-template-columns: repeat(19, auto);
    justify-content: start;
    gap: 0.35em 0.8em;
    align-items: center;
    margin-top: 0.6em;
    font-size: 0.95em;
}

.gw-strip-current {
    font-weight: 800;
    background: var(--color-accent-light);
    border-radius: 6px;
    padding: 0.15em 0.5em;
}

.gw-arrows {
    display: none;
}

@media (min-width: 769px) {
    .gw-arrows { display: none; }
}

@media (max-width: 768px) {
    .gw-strip { display: none; }
    .gw-arrows {
        display: flex;
        align-items: center;
        gap: 1em;
        margin-top: 0.5em;
    }
}