/* Dark theme: every colour override, scoped under .dark-theme. Load last. */

body.dark-theme {
    background-color: var(--color-black-primary);
    color: var(--color-white-e0);
}

.dark-theme .container {
    background-color: var(--color-black-primary);
}

.dark-theme .container h1 {
    color: var(--color-white-e0);
}

.dark-theme input,
.dark-theme textarea,
.dark-theme select,
.dark-theme button {
    border: var(--border-thin) var(--color-grey-4) solid;

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

    color: var(--color-white-e0);
}

.dark-theme button {
    border: none;

    background-color: var(--color-orange);

    color: var(--color-white-primary);
}

.dark-theme button.outline {
    border: var(--border-thick) var(--color-grey-5) solid;

    background-color: var(--color-black-secondary);

    color: var(--color-white-e0);
}

.dark-theme input:focus::placeholder {
    color: var(--color-white-primary);
}

.dark-theme .game-entry {
    border: var(--border-thin) var(--color-grey-3) solid;

    background-color: var(--color-black-secondary);

    box-shadow:
        5px 5px 10px #1e1e1e,
        -5px -5px 10px #272626;
}

.dark-theme .game-entry:hover {
    background-color: var(--color-black-primary);
}

.dark-theme .game-round {
    background-color: var(--color-white-e0);
    color: var(--color-black-primary);
}

.dark-theme .game-meta {
    color: var(--color-white-b0);
}

.dark-theme .game-meta .game-meta-right {
    color: var(--color-grey-8);
}

.dark-theme .game-result {
    color: var(--color-white-d);
}

.dark-theme .player-white span,
.dark-theme .player-black span {
    color: var(--color-white-d);
}

.dark-theme .player-rating {
    color: var(--color-white-d);
}

.dark-theme .delete-game-btn {
    background-color: var(--color-black-primary);
    color: var(--color-white-e0);

    /* Override to keep colour changes instant in dark mode */
    transition:
        background-color 0s,
        color 0s,
        transform 0.1s;
}

.dark-theme .delete-game-btn:hover {
    background-color: var(--color-white-e0);
    color: var(--color-black-primary);
}

.dark-theme .tournament-header {
    border-top: var(--color-white-e0-light) 2px solid;
    border-bottom: var(--color-white-e0) 2px solid;

    color: var(--color-white-e0);
}

.dark-theme .meta-bar {
    border-top: 2px var(--color-grey-3) solid;

    background-color: var(--color-black-secondary);
}

.dark-theme .meta-bar #game-count,
.dark-theme .meta-bar #tournament-count {
    color: var(--color-white-e0);
}

.dark-theme,
.dark-theme .custom-select {
    --select-bg: var(--color-black-primary);
    --select-text-color: var(--color-grey-c);
    --select-border-color: var(--color-grey-4);
    --select-item-color: var(--color-grey-c);
    --select-hover-bg: rgba(255, 255, 255, 0.1);
}

.dark-theme .dropdown,
.dark-theme .dropdown::before,
.dark-theme .dropdown::after {
    border: var(--border-thick) var(--color-grey-3) solid;

    background-color: var(--select-bg);
}

.dark-theme .menu-item-content i {
    color: var(--color-white-e0);
}

.dark-theme .search-hint {
    border-color: var(--color-grey-5);

    color: var(--color-grey-8);
}

.dark-theme .dropdown .dropdown-item {
    border: none;

    background-color: transparent;

    color: var(--select-item-color);
}

.dark-theme .dropdown .dropdown-item:hover {
    background-color: var(--select-hover-bg);

    color: var(--color-white-e0);
}

.dark-theme [type="date"]::-webkit-calendar-picker-indicator {
    content: "";
    position: relative;
    right: 18px;

    width: 16px;
    height: 16px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e0e0e0' viewBox='0 0 448 512'%3E%3Cpath d='M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}

.dark-theme .select-selected::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 18px;

    width: 16px;
    height: 16px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e0e0e0' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}

.dark-theme .modal {
    border: var(--border-thick) var(--color-grey-3) solid;

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

    color: var(--color-white-e0);
}

.dark-theme #player-profile {
    color: var(--color-white-e0);
}

.dark-theme .player-points {
    background: var(--color-grey-4);
}

.dark-theme table {
    border: var(--border-thin) var(--color-grey-3) solid;
}

.dark-theme th,
.dark-theme td {
    border: 1px var(--color-grey-3) solid;
}

.dark-theme th {
    background: var(--color-grey-4);
}

.dark-theme tr:nth-child(even) td {
    background: var(--color-grey-3);
}

.dark-theme #note {
    color: var(--color-white-e0);
}

.dark-theme #theme-toggle-btn {
    color: var(--color-white-primary);
}