/* IronPAX custom theme */

[data-bs-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #161b22;
    --bs-body-color: #e6edf3;
}

html,
body {
    height: 100%;
}

main {
    flex: 1;
}

main {
    animation: fadeIn .15s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body,
.card,
.navbar,
.table {
    transition: background-color .2s ease, color .2s ease;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: 1rem;
}

.theme-toggle .theme-icon {
    color: white;
    font-size: .85rem;
    opacity: .8;
}

.theme-toggle .form-check {
    padding-left: 0;
    margin-bottom: 0;
}

.theme-toggle .form-check-input {
    width: 2.8rem;
    height: 1.4rem;
    margin: 0;
    cursor: pointer;
}

[data-bs-theme="light"] .sun-icon,
[data-bs-theme="dark"] .moon-icon {
    opacity: 1;
}

[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-dropdown {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .active {
    background-color: var(--bs-secondary-bg);
}

/* Selected value */
[data-bs-theme="dark"] .ts-control .item {
    color: var(--bs-body-color);
}

/* Placeholder */
[data-bs-theme="dark"] .ts-control .item[data-value=""] {
    color: var(--bs-secondary-color);
}

/* Search input */
[data-bs-theme="dark"] .ts-control input {
    color: var(--bs-body-color);
}

/* Dropdown options */
[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}

.footer {
    font-size: .875rem;
}

.footer small {
    opacity: .75;
}

/* ========================================
   Tom Select Dark Mode Fixes
   ======================================== */

[data-bs-theme="dark"] .ts-wrapper .ts-control {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* [data-bs-theme="dark"] .ts-wrapper .ts-control .item {
    color: var(--bs-body-color);
}*/

[data-bs-theme="dark"] .ts-wrapper .ts-control input {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
    color: var(--bs-secondary-color);
}


/* Dropdown */
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .active {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}


/* Selected option */
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .selected {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Tom Select dark mode focus/input fixes */

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
    color: var(--bs-secondary-color);
}

/* Text while typing/searching */
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
    caret-color: var(--bs-body-color);
}

/* Dropdown search field (if enabled) */
[data-bs-theme="dark"] .ts-dropdown .dropdown-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.ts-control {
    border-radius: .375rem;
    padding: .5rem .75rem;
    min-height: 38px;
}

/* Tom Select dark mode - search/focus states */

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper .ts-control input,
[data-bs-theme="dark"] .ts-wrapper .dropdown-input {
    background-color: #1b2027 !important;
    color: #f8f9fa !important;
    border-color: #495057 !important;
}

[data-bs-theme="dark"] .ts-wrapper .dropdown-input::placeholder,
[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
    background-color: #1b2027 !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option {
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .active {
    background-color: #343a40 !important;
    color: #ffffff !important;
}


/* Video link icon */

[data-bs-theme="light"] .leaderboard-video-link {
    color: inherit;
    text-decoration: none;
}

[data-bs-theme="light"] .leaderboard-video-link .bi-camera-video-fill {
    color: #6c757d;
}

[data-bs-theme="dark"] .leaderboard-video-link {
    color: inherit;
    text-decoration: none;
}

[data-bs-theme="dark"] .leaderboard-video-link .bi-camera-video-fill {
    color: #ffffff;
}

.tournament-info-chevron {
    transition: transform 0.2s ease;
}

button[aria-expanded="true"]
.tournament-info-chevron {
    transform: rotate(180deg);
}


/* Leaderboard table */

#leaderboardHeaders th,
#leaderboardResults td {
    vertical-align: middle;
}


/*
 * Allow long participant, region, and sector
 * names to wrap rather than widening the table.
 */

.leaderboard-table .leaderboard-name,
.leaderboard-table .leaderboard-region,
.leaderboard-table .leaderboard-group-name {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}


/*
 * Keep short numeric and action columns compact.
 */

.leaderboard-rank,
.leaderboard-age,
.leaderboard-participants,
.leaderboard-result,
.leaderboard-reactions {
    white-space: nowrap;
}


/*
 * Prevent the reactions column from consuming
 * unnecessary table width.
 */

.leaderboard-reactions {
    width: 1%;
    text-align: end;
}


/*
 * Rank and age should remain small.
 */

.leaderboard-rank,
.leaderboard-age {
    width: 1%;
}


/*
 * Give name columns a reasonable amount of space.
 */

.leaderboard-name,
.leaderboard-group-name {
    min-width: 10rem;
}


.leaderboard-region {
    min-width: 9rem;
}


.container {

    max-width: 960px;

}


.stats-table {

    width: 100%;
    table-layout: fixed;

}


.stats-table th:not(:first-child),
.stats-table td:not(:first-child) {

    text-align: center;

}


.stats-table th:first-child,
.stats-table td:first-child {

    width: 35%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;

}

.stats-table th:not(:first-child) {
    white-space: nowrap;
}


.rate-cell {

    width: 25%;
    min-width: 90px;

}


.rate-cell .progress {

    width: 100%;

}

.stats-table th,
.stats-table td {
    vertical-align: middle;
}


.stats-table th:nth-child(2),
.stats-table td:nth-child(2),
.stats-table th:nth-child(3),
.stats-table td:nth-child(3),
.stats-table th:nth-child(4),
.stats-table td:nth-child(4),
.stats-table th:nth-child(5),
.stats-table td:nth-child(5) {

    text-align: center;

}

.reaction-button {

    border-radius: 50rem;

    min-width: 50px;

    transition: transform .15s ease;

}


.reaction-button:hover {

    transform: scale(1.1);

}


.reaction-button.active {

    background-color: var(--bs-primary);

    color: white;

}

.reaction-display {

    border-radius: 50rem;

}


.reaction-display.active {

    border-color: var(--bs-primary);

    background-color: var(--bs-primary-bg-subtle);

}


.reaction-picker {

    padding: .5rem;

    border-radius: .5rem;

    background-color:
        var(--bs-tertiary-bg);

}

.leaderboard-reactions {

    font-size: .85rem;

}

.leaderboard-reactions {

    display:inline-block;

    margin-left:.5rem;

}


.leaderboard-reactions .badge {

    font-size:.75rem;

}


.reaction-choice {

    font-size:1.2rem;

    margin:2px;

}


.reaction-choice.active {

    background-color:
        var(--bs-primary);

}

.leaderboard-result {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;

}

.result-value {

    display: flex;
    align-items: center;
    gap: .35rem;

    font-weight: 600;

}

.leaderboard-reactions {

    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;

    font-size: .85rem;

}

.leaderboard-reactions .badge {

    margin: 0;

}

/* Tom Select styling */

.ts-wrapper {

    width: 100%;

}


.ts-control {

    border-radius: .375rem;

    padding: .5rem .75rem;

    min-height: 38px;

}


.ts-control input {

    padding-left: .25rem;

}


.ts-dropdown {

    border-radius: .375rem;

}


@media (max-width: 576px) {


    .stats-table th:first-child,
    .stats-table td:first-child {

        width: 30%;

    }

    .stats-table th {
        font-size: 0.7em;
    }

    .rate-cell {

        width: 30%;

    }

    .leaderboard th, tr {
        font-size: 0.75em;
    }


}