:root,
[data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bg-navy: #001f3f;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bg-olive: #3d9970;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
}

.bg-body-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
    background-color: var(--bs-success-bg-subtle) !important;
}

.bg-info-subtle {
    background-color: var(--bs-info-bg-subtle) !important;
}

.bg-warning-subtle {
    background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-danger-subtle {
    background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-light-subtle {
    background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
    background-color: var(--bs-dark-bg-subtle) !important;
}

.bg-gradient {
    background-image: var(--bs-gradient) !important;
}

.bg-green {
    background-color: var(--bs-green) !important;
}

.bg-olive {
    background-color: var(--bg-olive) !important;
}

.bg-navy {
    background-color: var(--bg-navy) !important;
}

.bg-purple {
    background-color: #6610f2 !important;
}

.bd-navbar::after {
    background-image: linear-gradient(rgba(61, 153, 112, 1), rgba(61, 153, 112, 0.95)) !important;
}

.bd-navbar .offcanvas-lg {
    background-color: #419B73 !important;
}

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bd-sidebar-link-bg: rgba(61, 153, 112, .15);
    --bd-toc-color: #3d9970;
}

.bd-sidebar {
    border-right: 2px solid var(--bs-border-color);
}

.bd-sidebar::after {
    background-image: linear-gradient(rgba(61, 153, 112, 1), rgba(61, 153, 112, 0.95));
}

.bd-sidebar .bd-links-link > i:not(.fas) {
    margin-right: .5rem !important;
    display: inline-block;
    vertical-align: .002em;
}

.bd-sidebar .bd-links-link > i.fas,
.bd-sidebar .bd-links-link > .bd-link-icon {
    min-width: 18px !important;
    margin-right: .25rem !important;
    display: inline-block;
    vertical-align: .002em;
    text-align: center;
}

.bd-sidebar .bd-links-link > .bd-link-icon > svg {
    vertical-align: -0.2em;
}

.auth-container {
    height: 100vh;
}

.msg-bubble {
    max-width: 70%;
}

@media (max-width: 575.98px) {
    .msg-bubble {
        max-width: 90%;
    }
}

.auth-form {
    max-width: 430px;
}

.register-box-msg {
    margin: 0;
    padding: 0 20px 20px;
    text-align: center;
}

.help {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

.low-rating {
    background-color: #ffcccc;
}

.medium-low-rating {
    background-color: #ffd966;
}

.medium-rating {
    background-color: #b3d9ff;
}

.medium-high-rating {
    background-color: #66a80f;
}

.high-rating {
    background-color: #2b8a3e;
}

/* Fatigue badge — first penalty band (between LIGHT and HEAVY thresholds in
   MatchResultWeights). Bootstrap has no stock orange badge utility, and we
   need a distinct color from bg-warning (approaching) and bg-danger (heavy
   penalty). */
.bg-fatigue-mid {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.pos-badge {
    background-color: rgb(248, 249, 250) !important;
    border: solid 1px darkgrey !important;
}

.pos-ls,
.pos-st,
.pos-rs {
    color: #1c7ed6;
}

.pos-lw,
.pos-lf,
.pos-cf,
.pos-rf,
.pos-rw {
    color: #1c7ed6;
}

.pos-lam,
.pos-cam,
.pos-ram {
    color: #5c940d;
}

.pos-lm,
.pos-lcm,
.pos-cm,
.pos-rcm,
.pos-rm {
    color: #5c940d;
}

.pos-ldm,
.pos-cdm,
.pos-rdm {
    color: #5c940d;
}

.pos-lwb,
.pos-lb,
.pos-lcb,
.pos-cb,
.pos-rcb,
.pos-rb,
.pos-rwb {
    color: #e67700;
}

.pos-gk {
    color: #c92a2a;
}

.bd-content > h3 {
    margin-top: 0 !important;
}

.bd-main.order-1 {
    margin-top: 0;
    padding-top: 0;
}

@media (min-width: 768px) {
    .bd-main {
        gap: initial !important;
    }
}

.bd-links-link:hover,
.bd-links-link:focus,
.bd-links-link.active {
    background-color: #d1e7dd !important;
}

p {
    margin-bottom: .5rem !important;
}

.field-bg {
    width: 100%;
    height: 495px;
    position: relative;
    padding: 30px 0 30px;
    background-position-x: center;
    background-position-y: center;
    background-size: initial;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-origin: initial;
    background-clip: initial;
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: .25rem;
    margin: .75rem 0 2rem 0;
}

.alerts-wrap {
    position: fixed;
    top: 82px;
    right: 1rem;
    z-index: 9999;
}

.alerts-wrap .alert {
    min-width: 350px;
}

.field {
    position: relative;
    padding: 30px 0 30px;
    background: transparent url(//cdn.sofifa.net/img/field.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: .25rem;
    margin: .75rem 0 .75rem 0;
}

.lineup {
    height: 100%;
}

.lineup-row {
    width: 100%;
}

.lineup-col {
    min-width: 20%;
    min-height: 100px;
}

.panel-btn {
    height: 100px;
    width: 100px;
    background-color: #f0f0f0;
    margin-bottom: 1rem;
}

.text-bg-primary {
    color: #fff!important;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-header.sort-asc::after,
.sortable-header.sort-desc::after {
    margin-left: 0.25rem;
    font-size: 0.7em;
    opacity: 0.8;
}

.sortable-header.sort-asc::after {
    content: '\25B2';
}

.sortable-header.sort-desc::after {
    content: '\25BC';
}

/* ===== Lineup field — variant 1: fixed 5x7 grid ===== */

.field-v1 {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: .75rem auto;
    border-radius: .5rem;
    background: #4a8c2b url("../images/field_v1_bg-7a9CgSt.png") no-repeat center center;
    background-size: cover;
    padding: 1.25rem .75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.field-v1__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
    gap: .5rem .25rem;
}

.field-v1__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: .25rem .15rem;
    background-color: rgba(35, 80, 25, .85);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: .35rem;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.field-v1__cell--fit-exact   { border-color: #1db954;            border-width: 2px; }
.field-v1__cell--fit-similar { border-color: var(--bs-warning); border-width: 2px; }
.field-v1__cell--fit-foreign { border-color: var(--bs-danger);  border-width: 2px; }

.field-v1__cell--fit-exact-b   { border-bottom: 3px solid #1db954; }
.field-v1__cell--fit-similar-b { border-bottom: 3px solid var(--bs-warning); }
.field-v1__cell--fit-foreign-b { border-bottom: 3px solid #dc2626; }

.field-v1__pos {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    /* The .pos-* color from player_position() applies here through the cell's class. */
}

.field-v1__name {
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.field-v1__meta {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .15rem;
}

.field-v1__rating {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background-color: rgba(0, 0, 0, .35);
    border-radius: .25rem;
    padding: 0 .3rem;
}

.field-v1__select {
    margin-top: .25rem;
    width: 100%;
}

.field-v1__select select {
    font-size: .7rem;
    padding: .1rem .25rem;
    height: auto;
    line-height: 1.1;
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
}

/* ===== Lineup field — variant 2: absolutely-positioned baskets ===== */

.field-v2 {
    width: 100%;
    max-width: 720px;
    margin: .75rem auto;
}

.field-v2__pitch {
    position: relative;
    width: 100%;
    /* keeps the pitch portrait — height tracks width */
    aspect-ratio: 680 / 950;
    background: #4a8c2b url("../images/field_v2_bg-AFXXGU0.png") no-repeat center top;
    background-size: 100% 100%;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.field-v2__basket {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    line-height: 1.1;
}

.field-v2__pos {
    font-size: .7rem;
    font-weight: 700;
    background-color: #fff;
    padding: 0 .35rem;
    border-radius: .2rem;
    border: solid 1px darkgrey;
    margin-bottom: .15rem;
    /* color comes from .pos-* class supplied by player_position() */
}

.field-v2__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.field-v2__shirt {
    font-size: .9rem;
}

.field-v2__shirt--empty {
    color: #999;
}

.field-v2__rating {
    margin-top: .15rem;
    padding: 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    border-radius: .2rem;
    color: #fff;
    /* background colour set by .high-rating / .medium-rating / etc. */
}

.field-v2__name {
    margin-top: .15rem;
    font-size: .7rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-v2__name--empty {
    opacity: .65;
    font-style: italic;
}

.field-v2__select {
    margin-top: .25rem;
    width: 100%;
}

.field-v2__select select {
    font-size: .65rem;
    padding: .1rem .25rem;
    height: auto;
    line-height: 1.1;
}


/* Club links — keep club names on a single line everywhere */
a[href*="/club/"] {
    white-space: nowrap;
}

/* Action-column buttons go full-width on mobile (<md). */
@media (max-width: 767.98px) {
    .text-md-end > .btn,
    .text-md-end > form,
    .text-md-end > form > .btn {
        display: block !important;
        width: 100%;
    }
}

/* Coin-action button — muted teal with white text, used for premium-coin
   spends where the gold 🪙 emoji needs high-contrast readability. CSS vars
   drive Bootstrap's :hover / :active / :disabled states so the button stays
   opaque on click. */
.btn-coin {
    --bs-btn-color: #fff;
    --bs-btn-bg: #67b7c1;
    --bs-btn-border-color: #67b7c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #51a2ad;
    --bs-btn-hover-border-color: #51a2ad;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #408d98;
    --bs-btn-active-border-color: #408d98;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #67b7c1;
    --bs-btn-disabled-border-color: #67b7c1;
}

/* News */
.news-body p { margin-bottom: 0.75rem; }
.news-body h2, .news-body h3, .news-body h4 { margin-top: 1.25rem; margin-bottom: 0.5rem; }
.news-body ul { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.news-body code { background: #f1f3f5; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.9em; }
.news-body a { text-decoration: underline; }

.table-main > tbody > tr.row-in-lineup {
    --bs-table-bg: #eaf6ef;
    --bs-table-striped-bg: #e1f0e7;
    --bs-table-hover-bg: #d8e9de;
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}