/* Dark colour scheme for the website front end.

   Picked under Front-end settings > Appearance > Color Scheme, and loaded by
   php/includes/page-head.php after the theme stylesheet, the site stylesheet and the settings CSS,
   so it recolours what those leave light without any of them having to know it exists.

   What it deliberately leaves alone:

     - .navbar-inverse / .site-header. The header is the brand bar and is recoloured by the theme,
       the site stylesheet and the Header settings tab. Repainting it here would throw away a
       dealership's header colour the moment dark mode was switched on.
     - .btn-primary, .primary-bg, .banner-row. Those come from the Main Color setting and are
       printed with !important by css-from-settings.php.

   Extending it: a theme adds themes/<theme>/css/themes/dark.css and a site adds
   site/css/themes/dark.css - page-head.php loads both straight after this file, and redefining the
   custom properties below is the one place either has to touch to shift the whole palette.

   ! A page that includes its own stylesheet does so after the shared head include, so a page-level
   ! file naming the same selector wins over this one on order alone. Anything a theme or site has
   ! to take back from a page stylesheet needs the selector to be more specific than the page's, or
   ! !important. */

:root {
	--aduvio-dark-page: #0e0d12;           /* the page behind everything */
	--aduvio-dark-surface: #1e1f22;        /* panels, wells, modals, cards */
	--aduvio-dark-surface-raised: #26282c; /* a surface sitting on a surface, and hover states */
	--aduvio-dark-border: #34363a;
	--aduvio-dark-text: #e8eaed;
	--aduvio-dark-text-muted: #a0a4ab;
	--aduvio-dark-link: #4da3ff;
	--aduvio-dark-link-hover: #81d4fa;

	/* Draws the browser's own furniture - scrollbars, spinners, the date picker, the default form
	   control look - in dark rather than light */
	color-scheme: dark;
}

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

/*	! .content only. .content-container is the width wrapper, and css/style.css gives it
	! `background: none` on purpose - it is used *inside* coloured bands, so painting it here put a
	! page-coloured slab over the middle of every one of them */
.content {
	background: var(--aduvio-dark-page);
}

a {
	color: var(--aduvio-dark-link);
}

a:hover,
a:focus {
	color: var(--aduvio-dark-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--aduvio-dark-text);
}

hr {
	border-top-color: var(--aduvio-dark-border);
}

.text-muted {
	color: var(--aduvio-dark-text-muted);
}

/* Sections
   .sectn_white is the one section class written as a light band. The black ones already read as
   dark and the transparent ones take whatever is behind them. */

.sectn_white {
	background: var(--aduvio-dark-page);
}

/* Boxes, wells and titles */

.box {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

.title_box {
	background: var(--aduvio-dark-surface);
	color: var(--aduvio-dark-text);
	border-top-color: var(--aduvio-dark-border);
}

.well {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

/* Panels and cards */

.panel {
	background-color: var(--aduvio-dark-surface);
}

.panel-default {
	border-color: var(--aduvio-dark-border);
}

.panel-default > .panel-heading,
.panel-footer {
	color: var(--aduvio-dark-text);
	background-color: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
}

.panel-body .well {
	background: var(--aduvio-dark-surface-raised);
}

.thumbnail {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

/*	! The light background here is written with !important in css/style.css, so the dark one has to
	! carry it as well or the card stays white on every site that draws one */
.aduvio-feature-card {
	background: var(--aduvio-dark-surface) !important;
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

/* List groups */

.list-group-item {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

a.list-group-item {
	color: var(--aduvio-dark-text);
}

a.list-group-item:hover,
a.list-group-item:focus {
	background-color: var(--aduvio-dark-surface-raised);
	color: var(--aduvio-dark-link);
}

.list-group-item.disabled,
.list-group-item.disabled:focus,
.list-group-item.disabled:hover {
	background-color: var(--aduvio-dark-page);
	color: var(--aduvio-dark-text-muted);
}

/* Tables */

table.table {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
	border-color: var(--aduvio-dark-border);
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
	background-color: var(--aduvio-dark-surface-raised);
}

.table-hover > tbody > tr:hover {
	background-color: var(--aduvio-dark-surface-raised);
	color: var(--aduvio-dark-link);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
	border-color: var(--aduvio-dark-border);
}

/* Breadcrumbs, pagination and tabs */

.breadcrumb {
	background-color: var(--aduvio-dark-surface);
	color: var(--aduvio-dark-text);
}

.breadcrumb > li > a {
	color: var(--aduvio-dark-link);
}

.breadcrumb > .active {
	color: var(--aduvio-dark-text-muted);
}

.pagination > li > a,
.pagination > li > span {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
	background-color: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-link);
}

.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span {
	background-color: var(--aduvio-dark-page);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text-muted);
}

.resultspagination span,
.resultspagination a {
	color: var(--aduvio-dark-text);
}

.nav-tabs {
	border-bottom-color: var(--aduvio-dark-border);
}

.nav-tabs > li > a {
	color: var(--aduvio-dark-text);
}

.nav > li > a:focus,
.nav > li > a:hover {
	background-color: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	border-bottom-color: transparent;
	color: var(--aduvio-dark-link);
}

.tab-content > .active {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

/* Dropdowns */

.dropdown-menu {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

.dropdown-menu > li > a {
	color: var(--aduvio-dark-text);
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
	background-color: var(--aduvio-dark-surface-raised);
	color: var(--aduvio-dark-link);
}

.dropdown-menu .divider {
	background-color: var(--aduvio-dark-border);
}

/* Modals */

.modal-content,
.modal-body {
	background-color: var(--aduvio-dark-surface);
	color: var(--aduvio-dark-text);
}

.modal-header,
.modal-footer {
	border-color: var(--aduvio-dark-border);
}

.modal-body .well {
	background-color: var(--aduvio-dark-surface-raised);
}

.close {
	color: var(--aduvio-dark-text);
	opacity: .6;
	text-shadow: none;
}

.close:hover,
.close:focus {
	color: var(--aduvio-dark-text);
	opacity: 1;
}

/* Form controls
   Bootstrap's .form-control and the bare inputs the older pages still use are both white boxes with
   dark text, which is the one thing that cannot be left as it is on a dark page. */

.form-control,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='date'],
input[type='url'],
select,
textarea {
	background-color: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.form-control:focus {
	border-color: var(--aduvio-dark-link);
	box-shadow: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: var(--aduvio-dark-page);
	color: var(--aduvio-dark-text-muted);
}

::placeholder {
	color: var(--aduvio-dark-text-muted);
	opacity: 1;
}

.input-group-addon {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.btn-default {
	background-color: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-link);
}

/* Sky forms - the public forms (contact, financing, trade-in, review) are all built with these */

.sky-form {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.sky-form header {
	background: var(--aduvio-dark-surface);
	border-bottom-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.sky-form fieldset {
	background: var(--aduvio-dark-surface);
}

.sky-form fieldset + fieldset {
	border-top-color: var(--aduvio-dark-border);
}

.sky-form footer {
	background: var(--aduvio-dark-surface);
	border-top-color: var(--aduvio-dark-border);
}

.sky-form label.label,
.sky-form .radio,
.sky-form .checkbox,
.sky-form .note {
	color: var(--aduvio-dark-text);
}

.sky-form .input input,
.sky-form .select select,
.sky-form .textarea textarea {
	background: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.sky-form fieldset .well {
	background: var(--aduvio-dark-surface-raised);
}

/* Chosen, the autocomplete list and Dropzone each draw their own light panel */

/*	! Same again - css/style.css writes Chosen's white ground and its border with !important */
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
	background: var(--aduvio-dark-surface-raised) !important;
	border-color: var(--aduvio-dark-border) !important;
	color: var(--aduvio-dark-text);
}

.chosen-container .chosen-drop {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

.chosen-container .chosen-results li {
	color: var(--aduvio-dark-text);
}

.chosen-container .chosen-results li.highlighted {
	background: var(--aduvio-dark-surface-raised);
	color: var(--aduvio-dark-link);
}

.autocomplete-container .item {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

.autocomplete-container .item:hover {
	background: var(--aduvio-dark-surface-raised);
}

.dropzone {
	background: var(--aduvio-dark-surface);
	border-color: var(--aduvio-dark-border);
}

.dz-message {
	color: var(--aduvio-dark-text-muted);
}

/* Datepicker - the calendar every date field opens. Its stylesheet paints a white panel with greys written for one,
   and the select rule above was already darkening the month and year boxes, which left dark boxes on a white calendar.
   ! html-prefixed: css/style.css sets the panel's white ground after this file on some pages */

html .ui-datepicker {
	background: var(--aduvio-dark-surface-raised);
	border: 1px solid var(--aduvio-dark-border);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
	color: var(--aduvio-dark-text);
}

html .ui-datepicker a {
	color: var(--aduvio-dark-text);
}

html .ui-datepicker-header {
	border-bottom-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

html .ui-datepicker-header select {
	background: var(--aduvio-dark-surface);
	border: 1px solid var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

/* The previous and next arrows are dark glyphs on a sprite, so they are flipped to light rather than recoloured */
html .ui-datepicker-prev .ui-icon,
html .ui-datepicker-next .ui-icon {
	filter: invert(1);
}

html .ui-datepicker-calendar th {
	color: var(--aduvio-dark-text-muted);
}

html .ui-datepicker-calendar a {
	color: var(--aduvio-dark-text);
}

html .ui-datepicker-calendar a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--aduvio-dark-link-hover);
}

/* A day that cannot be picked: still readable, plainly not clickable */
html .ui-datepicker-calendar span {
	color: var(--aduvio-dark-text-muted);
	opacity: 0.5;
}

html .ui-datepicker-calendar .ui-state-active {
	background: rgba(255, 255, 255, 0.16);
	color: var(--aduvio-dark-text);
}

html .ui-datepicker-today a {
	color: var(--aduvio-dark-link);
}

/* FAQ block */

.faq-list,
.faq-item {
	border-color: var(--aduvio-dark-border);
}

/* The legacy footer classes. A theme with its own footer markup is untouched by these. */

.footer {
	background: var(--aduvio-dark-page);
}

.footertop {
	background: var(--aduvio-dark-surface);
}

.footercontent a {
	color: var(--aduvio-dark-link);
}

/* AI sales chat widget */

.aduvio-ai-chat-panel {
	background: var(--aduvio-dark-surface);
	border: 1px solid var(--aduvio-dark-border);
}

.aduvio-ai-chat-messages {
	background: var(--aduvio-dark-page);
}

.aduvio-ai-chat-message-assistant {
	background: var(--aduvio-dark-surface);
	color: var(--aduvio-dark-text);
}

.aduvio-ai-chat-message-assistant a {
	color: var(--aduvio-dark-link);
}

.aduvio-ai-chat-message-thinking {
	background: var(--aduvio-dark-surface);
	color: var(--aduvio-dark-text-muted);
}

.aduvio-ai-chat-footer {
	background: var(--aduvio-dark-surface);
	border-top: 1px solid var(--aduvio-dark-border);
}

.aduvio-ai-chat-footer textarea {
	background: var(--aduvio-dark-surface-raised);
	border-color: var(--aduvio-dark-border);
	color: var(--aduvio-dark-text);
}

/* A chart drawn as inline SVG labels itself in the page text colour */

svg text {
	fill: var(--aduvio-dark-text);
}