/* Dark mode styles */

:root {
    /* Should make it easier to change colors in the future */
    --text: #e4e4e4;
    --background: #1b1b1b;

    --button-color: #353535;
    --button-hover: var(--background);
    --button-selected: #232e51;
    --fieldset-color: #2a2a2a;

    --column-1: #2a2a2a;
}

html, body {
    color: var(--text);
    background-color: var(--background);
    color-scheme: dark;
}
header {
    margin: 0 0 30px 0;
    padding: 2px;
    background: #5a5c5f;
    background: -webkit-gradient(linear, left top, left bottom, from(#5d5e60), to(#4c4e4e));
    background: -moz-linear-gradient(top,  #5d5e60,  #4c4e4e);
    background: linear-gradient(top,  #5d5e60,  #4c4e4e);
    border-bottom: 1px solid #444;
    box-shadow: inset 1px 1px 0 rgba(60, 60, 60, .6), 0px 2px 2px rgba(0, 0, 0, .15);
    min-height: 50px;

}

.btn {
    background-color: var(--button-color);
    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: var(--text);
    background: var(--button-selected);
}

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

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

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

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: var(--background);
    color: var(--text);
}

.wrapper {
    background-color: var(--background);
    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: var(--background);
    color: var(--text);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    background-image: none;
}

.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);
}

.locked-move:checked + .btn {
    background: #00867b;
}

.locked-weather:checked + .btn {
    background: #00867b;
}