/* Dark mode styles */

:root {
    /* Should make it easier to change colors in the future */
    --text: #e4e4e4;
    --background: #1b1b1b;
    --button-hover: black;
    --button-selected: #cfcfcf;
    --fieldset-color: #2a2a2a;

    --column-1: #2a2a2a;
}

html, body {
    color: var(--text);
    background-color: var(--background);
    color-scheme: dark;
}

.btn {
    background-color: rgb(31, 31, 31);
    color: var(--text);
}

.btn:hover {
    z-index: 10;
    background: var(--button-hover);
}

.visually-hidden:focus + .btn,
.btn:hover {
    z-index: 10;
    background: var(--button-hover);
}

.visually-hidden:checked + .btn {
    font-weight: bold;
    color: #2c2c2ce0;
    background: var(--button-selected);
}

.switch-risk + .btn {
    background: #8A0000;
}
.switch-risk:hover + .btn {
    background: #610000;
}
.visually-hidden:checked.switch-risk + .btn {
    background: #610000;
}

#info-cc-field > b {
    color: #4b4b4b;
}

.visually-hidden:disabled + .btn {
    color: var(--button-hover);
}

fieldset {
    background-color: var(--fieldset-color);
}

select {
    background-color: rgb(31, 31, 31);
    color: var(--text);
}
input[type="number"] {
    background:  rgb(31, 31, 31);
}

a.links-lighten {
    color: #7A9CFF;
}

a.links-lighten:hover {
    color: #C2D0FF;
}

a.links-lighten:visited {
    color: #BC8BEA;
}

a.links-lighten:visited:hover {
    color: #DACAF7;
}

input {
    background-color: var(--background);
    color: var(--text);
}

textarea {
    background-color: rgb(31, 31, 31);
    color: var(--text);
}

.wrapper {
    color: var(--text);
}

a.collapsible-link {
    color: var(--text);
}

.bs-btn {
    background-color: var(--background);
    color: var(--text);
}

.bs-btn:hover {
    z-index: 10;
    background: var(--button-hover);
    color: var(--text);
}

.dataTables_info {
    color: var(--text) !important; /* I know, don't use !important, but w/e */
}

.search-label {
    color: var(--text);
}

tr.odd, tr.even {
    background-color: var(--background) !important;
}


td.sorting_1 {
    background-color: var(--column-1) !important;
}


label:not(.btn) {
    color: var(--text);
}

/* Select2 Dropdown stylings */

.select2-container .select2-choice {
    background: var(--background);
    background-image: linear-gradient(#333, 70%, #1b1b1b);
    /* Not fully satisfied w/ this gradient, but it's w/e */
    color: var(--text);
}

.select2-container .select2-choice .select2-arrow {
    background: none;
    border-left: none;
}

.select2-dropdown-open .select2-choice {
    -webkit-box-shadow: 0 1px 0 var(--background) inset;
    box-shadow: 0 1px 0 var(--background) inset;
    background-image: none;
}

.select2-drop {
    background-color: rgb(31, 31, 31);
    color: var(--text);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    background-image: none;
    background-color: rgb(31, 31, 31);
}

.select2-no-results {
    background-color: var(--background) !important;
}

input.select2-input {
    color: var(--text);
    /* 
    * I have to use this URL because this CSS file is in the dist/css folder,
    * whereas the Select2 CSS file is right next to the select2.png file
    */
    background: url('../js/vendor/select2/select2.png') no-repeat 100% -22px, var(--background);
}

.game.visually-hidden:disabled + .btn {
    color: #999999;
    background-color: #2c2c2c;
}


#p1, .playerSettings{
    
    background: repeating-linear-gradient(
        135deg, 
        #3f3f3f7c, 
        #3f3f3f7c 50px, 
        #c6c6c67c 50px, 
        #c6c6c67c 51px
    );
    /* background-color: #72041a7c; */
}
#p2, .opposingSettings{
    background: repeating-linear-gradient(
        135deg, 
        #3f3f3f7c, 
        #3f3f3f7c 50px, 
        #c6c6c67c 50px, 
        #c6c6c67c 51px
    );
    /* background-color: #1b41897c; */
}
#p3, .fieldSettings{
    background: repeating-linear-gradient(
        135deg, 
        #3f3f3f7c, 
        #3f3f3f7c 50px, 
        #c6c6c67c 50px, 
        #c6c6c67c 51px
    );
    /* background-color: #9779257c; */
}

#p4{
    background: repeating-linear-gradient(
        135deg, 
        #101010e0, 
        #101010e0 5px, 
        #202020e0 5px, 
        #202020e0 10px
    );
}
#p5 {
    background: repeating-linear-gradient(
        135deg, 
        #3f3f3f7c, 
        #3f3f3f7c 50px, 
        #c6c6c67c 50px, 
        #c6c6c67c 51px
    );
}