:root {
    /* Shared win/draw/loss palette - toned down from the original neon
       #91fc8d/#fc9797 so result-colored rows and pills stay readable
       without shouting. Same colors everywhere a result is shown
       (match rows, form pills, stat chips, rating chart points). */
    --result-win: #8fbf8a;
    --result-loss: #d98c8c;
    --result-draw: #a8aca9;
    --result-text: #1a1a1a;

    /* Same three colors, low-alpha - for a wide element like a full table row, a solid fill
       reads as a wall of color; a tint over the normal row background stays legible as a hint
       without dominating the row the way it's fine to on a small pill or chip. */
    --result-win-row: rgba(143, 191, 138, 0.18);
    --result-loss-row: rgba(217, 140, 140, 0.18);
    --result-draw-row: rgba(168, 172, 169, 0.18);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-color: #ddd;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.card {
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: calc(0.75rem - 1px);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn {
    border-radius: 50rem;
}

.sublink > a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 50rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    color: rgba(255, 255, 255, 0.7);
}

.sublink > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Higher specificity than ".sublink > a" (adds the .nav-pill-active class to the same
   selector) so the active state reliably wins regardless of the base link rules above. */
.sublink > a.nav-pill-active {
    background-color: rgba(8, 203, 0, 0.2);
    color: #08CB00;
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px rgba(8, 203, 0, 0.55);
}

.sublink > a.nav-pill-active:hover {
    background-color: rgba(8, 203, 0, 0.28);
    color: #08CB00;
}

.page-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, #08CB00, #FF2DD1);
    box-shadow: 0 0 10px rgba(255, 45, 209, 0.7), 0 0 5px rgba(8, 203, 0, 0.7);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
}

.page-loading-bar.page-loading-bar-active {
    opacity: 1;
    animation: page-loading-progress 1.1s cubic-bezier(0.15, 0.75, 0.25, 1) forwards;
}

@keyframes page-loading-progress {
    0% { width: 0%; }
    15% { width: 45%; }
    60% { width: 72%; }
    100% { width: 90%; }
}

@media (max-width: 767px) {
    .sublink > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 1.1rem;
    }

    /* Up to 9 icons (group pages + settings + account + theme) must fit a 375px phone. */
    .navbar-expand .navbar-nav > .nav-link {
        padding-left: 1px;
        padding-right: 1px;
    }

    .navbar-expand .navbar-nav > .theme-toggle-item {
        margin-left: 2px;
        padding-left: 4px;
    }
}

.theme-toggle-item {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.bg-body {
    background-color: #ddd !important;
}

a {
    color: white;
    text-decoration: none;
}

.navbar {
    background-color: #001e28;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #000000d1;
    border-color: #000000d1;
}

.custom-selected, .custom-selected > td, .custom-selected > th {
    background-color: #787878 !important; /* lighter dark grey */
    color: white !important; /* setting text to white for better visibility on dark background */
    border-color: transparent !important; /* setting border color to transparent */
}

.table-info {
    --bs-table-bg: #787878; /* soft light blue */
    --bs-table-color: #000; /* keep text dark */
    --bs-table-hover-bg: #787878;
}

table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > tbody > tr > td {
    border: 1px solid #dee2e6; /* Bootstrap 5 border color */
}

.scaled-icon {
    transform: scale(1.2); /* increase scale as needed */
    display: inline-block;
    vertical-align: middle; /* align it to the middle if needed */
}

/* Team colours come from the group's settings (set as variables in _Layout); these are fallbacks. */
.orange-color {
    color: var(--team-orange, #FF2DD1);
}

.blue-color {
    color: var(--team-blue, #08CB00);
}

.bg-loss td {
    background-color: var(--result-loss-row) !important;
}

.bg-win td {
    background-color: var(--result-win-row) !important;
}

.bg-draw td {
    background-color: var(--result-draw-row) !important;
}

.form-cell {
    white-space: nowrap;
}

.form-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--result-text);
}

.form-win {
    background-color: var(--result-win);
}

.form-loss {
    background-color: var(--result-loss);
}

.form-draw {
    background-color: var(--result-draw);
}

@media (max-width: 767px) {
    .form-pill {
        width: 15px;
        height: 15px;
        font-size: 8px;
        margin-right: 2px;
    }

    /* Keep only the 3 most recent results (pills are oldest -> newest) so the column fits.
       nth-last-child counts from the end, so this always keeps the last 3 regardless of
       how many pills a player actually has (unlike nth-child(1)/(2), which would hide
       everything for a player with 2 or fewer matches). */
    .form-cell .form-pill:nth-last-child(n+4) {
        display: none;
    }
}

[data-bs-theme="dark"] body {
    background-color: #15181b;
}

[data-bs-theme="dark"] .bg-body {
    background-color: #15181b !important;
}

[data-bs-theme="dark"] .card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] table.dataTable.table-bordered > thead > tr > th,
[data-bs-theme="dark"] table.dataTable.table-bordered > tbody > tr > td {
    border-color: var(--bs-border-color);
}