/*
 * Night theme — overrides :root color tokens defined in style.css.
 * Only structural/behavioural rules that can't be expressed as color tokens remain below.
 */
:root {
    --clr-page-bg:         black;
    --clr-surface:         #303030;
    --clr-surface-alt:     #444444;
    --clr-surface-hover:   #666666;
    --clr-border:          #555555;
    --clr-border-subtle:   #252525;
    --clr-text:            #EBEBEB;
    --clr-text-muted:      #c7c7c7;
    --clr-error:           #ff3333;
    --clr-link:            #63a7e1;
    --clr-input-bg:        #555555;
    --clr-input-border:    #252525;
    --clr-dropdown-bg:     #444444;
    --clr-modal-bg:        #727272;
    --clr-modal-header-bg: #3C3C3C;
    --clr-table-bg:        #555555;
    --clr-table-row-alt:   #444444;
    --clr-toggle-inactive: #666666;
}

/* Links use a custom colour in dark mode */
a:not(.btn) {
    color: var(--clr-link);
}

/* Buttons get a subtle white shadow in dark mode for depth */
.btn {
    box-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
}

/* Borders on interactive controls */
.btn:not(.btn-danger),
.btn-default,
input,
select,
textarea,
.advanced-button,
.list-group-item {
    border-color: var(--clr-input-border) !important;
}

.advanced-button {
    background-color: var(--clr-surface-alt);
}

/* Sidebar section header */
.col2 h3 {
    background: none repeat scroll 0 0 var(--clr-surface-alt);
}

/* Various elements that need the alt surface */
.catTable,
.dropdown-menu .divider,
.Key tr:nth-child(odd),
.language:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-logo:hover,
.quoteBlock,
.server-disabled,
#serverResponse,
.table>tbody>tr:nth-child(odd),
.table-striped>tbody>tr:nth-child(odd),
ul.tabs li.active a,
select[disabled],
select:hover {
    background-color: var(--clr-surface-alt) !important;
    color: var(--clr-text) !important;
}

/* Button hovers */
.btn:not(.btn-danger):hover,
.btn:not(.btn-danger):active:focus {
    background-color: var(--clr-surface-hover);
}

.btn:not(.btn-danger):active {
    color: var(--clr-text);
}

/* Error / failed colour */
.failed {
    color: var(--clr-error) !important;
}

/* Secondary text */
#rightGreyText,
small {
    color: var(--clr-text-muted) !important;
}

/* Controls and form elements using input bg */
.advanced-buttonSeperator,
.alt,
.infoTableSeperator.alt,
.btn:not(.btn-danger),
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
a.btn.btn-default,
select.form-control,
.form-control[disabled],
.input-group-addon,
#inner,
.navbar-default,
.search-box input,
.select,
.table-striped>tbody>tr:nth-child(even),
.table>tbody>tr:nth-child(even),
.tab-pane tr:nth-child(odd),
textarea,
ul.tabs a.active,
a.list-group-item,
.dropdown-menu>li>a,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
input[type="password"],
input[disabled],
select {
    background-color: var(--clr-input-bg);
    color: var(--clr-text);
}

.Categories form.sorting-row:nth-child(2n-1) tr {
     background-color: var(--clr-surface);
}

/* Focus / active border */
.btn-default:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #707070 !important;
    outline: initial !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
}

/* Modal backdrop */
.modal-backdrop {
    background-color: #262626 !important;
}

/* Table structural */
.Key tr,
.Config .table {
    border: none;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.infoTableSeperator,
.data-row {
    border-top: none;
}

.modal-footer {
    border-top: 1px solid rgb(131 131 131);
}

hr {
    border-top: 1px solid var(--clr-border);
}

/* Danger button dark border */
.btn-danger {
    border-color: #7b2b28;
}

/* Section borders */
.tab-content .catTable tbody,
ul.tabs a,
.section,
#addFeed,
#addFeedContent,
#subscriptions,
.RSS form[action="add_rss_feed"] tr:nth-child(even) {
    border: 1px solid var(--clr-border);
}

/* Hover states */
.Categories form:first-of-type tr:last-of-type,
.default,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background-color: var(--clr-surface-hover);
}

/* Elements using primary text colour */
.activeRSS,
.activeRSS a,
.activeRSS a:visited,
.btn-default,
.checkbox label,
.feed-row td,
.help-block,
#content,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a>.glyphicon,
.path,
.Servers .ct-label,
.time,
.main-restarting.in,
#search-dropdown .dropdown-header,
ul.tabs a,
a.wizard-advanced-settings,
.quoteBlock a,
a.main-helplink,
.col2 h3 a,
.text-center a,
.text-center a:hover {
    color: var(--clr-text);
}

/* Remove backgrounds on container/content wrappers */
.container,
#content {
    background-color: unset !important;
}

/* Server chart lines */
.Servers .ct-series-a .ct-line,
.Servers .ct-series-a .ct-point {
    stroke: var(--clr-text);
}

/* Sections/cards use dark surface */
#inner,
.section,
#addFeed,
#addFeedContent {
    background-color: var(--clr-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Active tab uses card surface */
.nav.nav-tabs li a {
    color: var(--clr-text);
}

.nav.nav-tabs li a:hover {
    background-color: var(--clr-surface-alt);
    border-color: var(--clr-border);
    border-bottom: none;
}

.nav.nav-tabs li.active a,
.nav.nav-tabs li.active a:hover {
    border-color: var(--clr-border);
    border-bottom: none;
    background-color: var(--clr-surface);
    color: var(--clr-text);
}

/* QR modal needs light background */
#modal_qr .modal-body {
    background-color: #EBEBEB;
}

/* RSS icon */
.rss-icon-svg {
    fill: white;
}

.rss-symbol {
    fill: var(--clr-input-bg);
}

/* Placeholder */
::placeholder {
    color: var(--clr-text) !important;
    opacity: 0.5;
}

/* Tooltip — inverted (light tooltip on dark page) */
.tooltip-inner {
    background-color: #E4E4E4 !important;
    color: #000 !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #E4E4E4 !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #E4E4E4 !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #E4E4E4 !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #E4E4E4 !important;
}

.Special .glyphicon-asterisk {
    color: #E4E4E4 !important;
}