/* Match Predictions – colour scheme: grey #4a4a4a / white / maroon #611825 */

:root {
    /* This app is always light-themed; force native controls (incl. the datalist
       dropdown) to render light so their text stays dark-on-white even when the OS
       is in dark mode. */
    color-scheme: light;

    --pd-grey:         #4a4a4a;
    --pd-maroon:       #611825;
    --pd-maroon-hover: #4c131d;
    --pd-maroon-tint:  #f4e4e6;

    /* Map Bootstrap's theme roles onto the scheme */
    --bs-primary:        var(--pd-maroon);
    --bs-primary-rgb:    97, 24, 37;
    --bs-link-color:     var(--pd-maroon);
    --bs-link-color-rgb: 97, 24, 37;
    --bs-link-hover-color: var(--pd-maroon-hover);
    --bs-body-color:     var(--pd-grey);
    --bs-body-color-rgb: 74, 74, 74;
    --bs-border-radius:  .5rem;
}

body {
    background-color: #f2f2f2;   /* fallback while the image loads */
    /* Fixed, dimmed pitch behind every page; cards float over it. */
    background-image:
        linear-gradient(rgba(248, 248, 248, 0.72), rgba(248, 248, 248, 0.72)),
        url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --- Navbar (maroon chrome, white text/icons) --- */
.pd-navbar {
    background-color: var(--pd-maroon);
}
.pd-navbar .navbar-brand,
.pd-navbar .nav-link {
    color: #fff;
}
.pd-navbar .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 #fff;
}
.pd-navbar .fa-trophy { color: #fff !important; }   /* keep brand trophy legible on grey */

/* --- Primary actions -> maroon --- */
.btn-success,
.btn-primary {
    --bs-btn-bg:               var(--pd-maroon);
    --bs-btn-border-color:     var(--pd-maroon);
    --bs-btn-hover-bg:         var(--pd-maroon-hover);
    --bs-btn-hover-border-color: var(--pd-maroon-hover);
    --bs-btn-active-bg:        var(--pd-maroon-hover);
    --bs-btn-active-border-color: var(--pd-maroon-hover);
    --bs-btn-color:            #fff;
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-color:     #fff;
    --bs-btn-disabled-bg:      var(--pd-maroon);
    --bs-btn-disabled-border-color: var(--pd-maroon);
    --bs-btn-disabled-color:   #fff;
}

/* --- Accents on white content -> maroon --- */
.text-success { color: var(--pd-maroon) !important; }   /* final scores */
.fa-trophy    { color: var(--pd-maroon) !important; }   /* winner trophies */
.border-info  { border-color: var(--pd-maroon) !important; }

/* --- Table row highlights --- */
.table-warning {                        /* per-match / leaderboard winner row */
    --bs-table-bg:           var(--pd-maroon-tint);
    --bs-table-striped-bg:   #ecdadd;
    --bs-table-hover-bg:     #e8d5d8;
    --bs-table-active-bg:    #e4d0d3;
    --bs-table-border-color: #e6cdd1;
    --bs-table-color:        var(--pd-grey);
    --bs-table-striped-color: var(--pd-grey);
}
.table-info {                           /* "this is you" row */
    --bs-table-bg:           #e9e9e9;
    --bs-table-striped-bg:   #e1e1e1;
    --bs-table-hover-bg:     #dedede;
    --bs-table-active-bg:    #dadada;
    --bs-table-border-color: #d8d8d8;
    --bs-table-color:        var(--pd-grey);
    --bs-table-striped-color: var(--pd-grey);
}

/* --- Bits --- */
.predict-form input[type="number"]::-webkit-outer-spin-button,
.predict-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.predict-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    font-weight: 700;
}
#whoami { font-style: italic; }

/* Floating "Save all" button — stays reachable while scrolling a long match list. */
.save-all-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    border-radius: 2rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35);
}

/* Clearance so the last card is never hidden behind the floating button. */
main.container { padding-bottom: 5.5rem; }

/* Collapsible result cards: header is the toggle; chevron flips when open. */
.card-header[data-bs-toggle="collapse"] { cursor: pointer; }
.game-chevron { transition: transform .2s ease; }
.card-header[aria-expanded="true"] .game-chevron { transform: rotate(180deg); }

/* Prediction page: a competition with a game in the next 7 days. */
.pd-comp-soon {
    border-left: 4px solid #d03b3b;
    padding-left: .75rem;
    background: linear-gradient(90deg, rgba(208, 59, 59, .07), transparent 60%);
    border-radius: .25rem;
}

/* Leaderboard movement arrows (explicit red/green — not the themed .text-success). */
.mv-up   { color: #0ca30c; white-space: nowrap; }
.mv-down { color: #d03b3b; white-space: nowrap; }

/* "Alerts on" state — explicit green (theme's .btn-success is maroon). */
.btn-alerts-on,
.btn-alerts-on:hover,
.btn-alerts-on:disabled {
    background-color: #0ca30c;
    border-color: #0ca30c;
    color: #fff;
    opacity: 1;
}

/* Add-to-home-screen banner. */
.pwa-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: #fff; border-top: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .15); padding: .75rem 1rem;
}
.pwa-banner-body { display: flex; align-items: center; gap: .75rem; max-width: 720px; margin: 0 auto; }
.pwa-banner-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Player avatars (leaderboard, results, profile, admin, nav) */
.pd-avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    background-color: var(--pd-maroon-tint);
    flex-shrink: 0;
}
.pd-avatar-fallback {
    background-color: var(--pd-maroon);
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
}

/* City-search timezone picker (custom dropdown, so its colours don't depend on the
   OS-drawn native <datalist> menu, which renders white-on-white in dark mode). */
.tz-combo { position: relative; }
.tz-suggest {
    position: absolute; z-index: 1080; left: 0; right: 0; top: 100%;
    margin-top: 2px; max-height: 16rem; overflow-y: auto;
    background: #fff; color: var(--pd-grey);
    border: 1px solid #ced4da; border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.tz-suggest-item { padding: .375rem .75rem; cursor: pointer; white-space: nowrap; }
.tz-suggest-item:hover,
.tz-suggest-item.active { background: var(--pd-maroon-tint); color: var(--pd-grey); }