/* ==========================================================================
   Llabtoof design tokens
   Palette + type direction: see the "Give the scoreboard some colour" brief.
   ========================================================================== */

:root {
    --plum-900: #1E1030;
    --plum-800: #2E1A47;
    --plum-700: #402568;
    --plum-500: #6B4A99;
    --plum-200: #DCD2EC;
    --plum-100: #EDE7F6;

    --matchday-red: #D6293F;
    --matchday-red-dim: #B01F33;
    --pitch-green: #2F9E5C;
    --pitch-green-bg: #E3F5EA;
    --topper-amber: #D98A1F;
    --topper-amber-bg: #FBF0DD;

    --bg: #F7F5FB;
    --bg-raised: #FFFFFF;
    --ink: #211533;
    --ink-dim: #5B5170;
    --line: #DFD7EC;
}

/* ---------- Base ---------- */

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-wrap: balance;
    color: var(--ink);
}

a {
    color: var(--plum-700);
}
a:hover {
    color: var(--matchday-red);
}

/* Anything meant to read like a scoreboard number. */
.scoreboard-num {
    font-family: 'Anton', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* ---------- Navbar ---------- */

.--bg-purple {
    background-color: var(--plum-800);
    color: white;
}

.navbar-brand {
    font-family: 'Anton', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: white !important;
}

/* Account dropdown toggle: pinned to light text at every state so it
   always reads against the dark navbar, regardless of any Bootstrap
   link-color utility that might end up alongside it. */
#dropdownUser1,
#dropdownUser1:hover,
#dropdownUser1:focus {
    color: white !important;
}

/* ---------- Buttons ---------- */

.btn-primary {
    background-color: var(--plum-800);
    border-color: var(--plum-800);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--plum-700) !important;
    border-color: var(--plum-700) !important;
}

.btn-warning {
    background-color: var(--matchday-red);
    border-color: var(--matchday-red);
    color: white;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--matchday-red-dim) !important;
    border-color: var(--matchday-red-dim) !important;
    color: white !important;
}

.btn-outline-secondary {
    color: var(--plum-700);
    border-color: var(--plum-200);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--plum-100);
    border-color: var(--plum-500);
    color: var(--plum-800);
}

.btn-light {
    background-color: white;
    border-color: white;
    color: var(--plum-800);
}

/* ---------- Badges & pills ---------- */

.badge.text-bg-secondary {
    background-color: var(--plum-100) !important;
    color: var(--plum-800) !important;
}

.badge.text-bg-warning {
    background-color: var(--matchday-red) !important;
    color: white !important;
}

/* Countdown-to-deadline pill (Locked badge already reuses text-bg-secondary above) */
.deadline-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--matchday-red);
    color: white;
}

.points-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background-color: var(--pitch-green-bg);
    color: var(--pitch-green);
}

/* ---------- List groups / cards ---------- */

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--plum-100);
}

.bg-body-tertiary {
    background-color: var(--plum-100) !important;
}

/* ---------- Score chip (fixture rows) ---------- */

.score-chip {
    font-family: 'Anton', sans-serif;
    font-size: 1.1rem;
    color: var(--ink);
    background: var(--plum-100);
    padding: 3px 12px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Team names wrap onto a second line on narrow screens so both teams
   stay readable; the score chip next to it is protected separately
   (white-space: nowrap; flex-shrink: 0 above) so it never splits. */
.fixture-teams {
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
    text-align: center;
}

/* ---------- Team crest (initials badge) ---------- */

.crest {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--plum-100);
    color: var(--plum-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Anton', sans-serif;
    font-size: 0.68rem;
    flex-shrink: 0;
    object-fit: cover;
}

/* ---------- Fixtures & Results table (league page) ----------
   Unchanged table layout at desktop widths - on narrow screens it
   degrades into a stack of labelled cards (CSS-only, no separate
   mobile markup) so nothing gets cramped. */

/* Round navigation: on mobile the title takes its own centered row so
   the prev/next buttons aren't squeezed for space (which was forcing
   their label text - and so the buttons themselves - to wrap and grow).
   From md upward this collapses back to the original single row with
   the title between the two buttons. */
.fixtures-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1rem;
    text-align: center;
}
.fixtures-nav-title {
    order: -1;
    flex: 0 0 100%;
    margin-bottom: 4px;
}
@media (min-width: 768px) {
    .fixtures-nav {
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: left;
    }
    .fixtures-nav-title {
        order: 0;
        flex: 1 1 auto;
        margin-bottom: 0;
        text-align: center;
    }
    .fixtures-nav-btn {
        flex: 0 0 auto;
    }
}

.predict-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.predict-inputs input {
    width: 4.5rem;
}

/* Save button: sits right under the "Round N Fixtures & Results" heading
   and stays pinned to the top of the viewport while the list below it
   scrolls, so it's never more than a glance away. */
.predictions-save-bar {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    background: var(--bg-raised);
    border-radius: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(30, 16, 48, 0.1);
}

@media (max-width: 767.98px) {
    .fixtures-table thead {
        display: none;
    }
    .fixtures-table, .fixtures-table tbody, .fixtures-table tr, .fixtures-table td {
        display: block;
        width: 100%;
    }
    .fixtures-table tr {
        margin-bottom: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 14px;
        background: var(--bg-raised);
    }
    .fixtures-table tr:last-child {
        margin-bottom: 0;
    }
    .fixtures-table td {
        border: none;
        padding: 6px 0;
        text-align: center;
    }
    .fixtures-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        text-align: center;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-dim);
        margin-bottom: 2px;
    }
    /* Bigger, roomier touch targets for the score inputs on mobile only -
       the desktop table keeps its original compact size. */
    .predict-inputs input {
        width: 5.25rem;
        height: 3.25rem;
        font-family: 'Anton', sans-serif;
        font-size: 1.4rem;
        font-variant-numeric: tabular-nums;
        border-radius: 10px;
    }
    .predict-inputs .sep {
        font-family: 'Anton', sans-serif;
        font-size: 1.4rem;
        color: var(--ink-dim);
    }
}

@media (max-width: 400px) {
    .predict-inputs input {
        width: 6rem;
        height: 3.5rem;
        font-size: 1.6rem;
    }
}

/* ---------- Leaderboard leader row ---------- */

.leader-row {
    background-color: var(--topper-amber-bg);
}
.leader-row .rank {
    color: var(--topper-amber);
}

/* ---------- "How it works" tiles ---------- */

.how-it-works-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.how-it-works-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--plum-100);
    color: var(--plum-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ---------- Hero (home page) ---------- */

/* Bouncing chevron inviting a scroll on mobile, where the hero would
   otherwise look like the whole page rather than an intro banner. */
.hero-scroll-cue {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: var(--plum-500);
    font-size: 1.3rem;
    animation: hero-scroll-bounce 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue {
        animation: none;
    }
}
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@media (max-width: 767.98px) {
    /* A smaller heading and a horizontal (icon-beside-text, not
       icon-above-text) layout for the three tiles keeps the mobile hero
       short enough that the rest of the page is visibly there to scroll
       to, rather than looking like the whole screen. Placed after the
       base rules above so it wins on narrow screens without !important. */
    .hero-title {
        font-size: 1.65rem;
    }
    .how-it-works-tile {
        flex-direction: row;
        align-items: center;
    }
    .how-it-works-text {
        min-width: 0;
    }
    .how-it-works-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* ---------- Tables ---------- */

.table > :not(caption) > * > * {
    color: var(--ink);
}

/* Leaderboard: keep rank/points narrow so the name column truncates
   instead of forcing the whole table to scroll sideways. */
.table-fixed-cols {
    table-layout: fixed;
}
.table-fixed-cols th:first-child,
.table-fixed-cols td:first-child {
    width: 2.5rem;
}
.table-fixed-cols th:last-child,
.table-fixed-cols td:last-child {
    width: 4.5rem;
}
.leaderboard-name {
    max-width: 0; /* let table-layout: fixed hand this column the remaining space */
    overflow: hidden;
}

/* ---------- Legacy carousel (kept for any page still using it) ---------- */

.carousel-item {
    height: 32rem;
    background-color: var(--plum-700);
    color: white;
    position: relative;
}