/*
 * Dark mode for the demo_5 (horizontal menu) layout.
 *
 * This is loaded IN ADDITION TO demo_5/style.css, never instead of it.
 * demo_5/style_dark.css cannot be used: despite its name and location it
 * contains zero .horizontal-menu rules and 91 .sidebar rules - it is the dark
 * stylesheet for a different NobleUI layout. Swapping style.css for it drops
 * all 590 horizontal-menu rules and the navigation collapses.
 *
 * Colours are taken from the theme's own dark palette in
 * assets/scss/dark/_variables.scss, so this matches what NobleUI intends
 * rather than being invented:
 *
 *   content-bg   #070d19      card-bg      #0c1427
 *   border-color #262f43      card-border  #172340
 *   body-color   #eef4ff      text-muted   #7886a1
 */

:root {
	--tj-content-bg:  #070d19;
	--tj-card-bg:     #0c1427;
	--tj-border:      #262f43;
	--tj-card-border: #172340;
	--tj-text:        #eef4ff;
	--tj-muted:       #7886a1;
	--tj-input-bg:    #0c1427;
}

/* --- base ------------------------------------------------------------- */
body,
.page-wrapper,
.page-content,
.main-wrapper {
	background: var(--tj-content-bg);
	color: var(--tj-text);
}

/* --- top navbar and horizontal menu ----------------------------------- */
.horizontal-menu .navbar,
.horizontal-menu .bottom-navbar,
.horizontal-menu .navbar.fixed-on-scroll,
.horizontal-menu .bottom-navbar.fixed-on-scroll {
	background: var(--tj-card-bg);
	border-color: var(--tj-border);
}

.horizontal-menu .navbar .navbar-content .navbar-brand,
.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link {
	color: var(--tj-text);
}

.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link:hover,
.horizontal-menu .bottom-navbar .page-navigation > .nav-item.active > .nav-link {
	color: #5E50F9;
}

.horizontal-menu .navbar .navbar-content .search-form .input-group-text,
.horizontal-menu .navbar .navbar-content .search-form .form-control {
	background: var(--tj-content-bg);
	border-color: var(--tj-border);
	color: var(--tj-text);
}

/* Mega-menu / dropdown panels hanging off the menu bar. */
.horizontal-menu .bottom-navbar .page-navigation .submenu,
.horizontal-menu .bottom-navbar .page-navigation > .nav-item .mega-submenu,
.dropdown-menu {
	background: var(--tj-card-bg);
	border-color: var(--tj-card-border);
	color: var(--tj-text);
}

.dropdown-menu .dropdown-item {
	color: var(--tj-text);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background: var(--tj-content-bg);
	color: var(--tj-text);
}

/* --- cards, the main surface ------------------------------------------ */
.card {
	background: var(--tj-card-bg);
	border-color: var(--tj-card-border);
	box-shadow: 3px 0 10px 0 #060b15;
}

.card .card-title,
.card .card-body,
h1, h2, h3, h4, h5, h6 {
	color: var(--tj-text);
}

.card .card-description,
.text-muted,
small {
	color: var(--tj-muted) !important;
}

/* --- tables ----------------------------------------------------------- */
.table {
	color: var(--tj-text);
}

.table th,
.table td {
	border-color: var(--tj-border);
}

.table thead th {
	color: var(--tj-muted);
	border-color: var(--tj-border);
}

.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, .03);
	color: var(--tj-text);
}

/* --- forms ------------------------------------------------------------ */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
	background: var(--tj-input-bg);
	border-color: var(--tj-border);
	color: var(--tj-text);
}

.form-control:focus {
	background: var(--tj-content-bg);
	border-color: #5E50F9;
	color: var(--tj-text);
}

.form-control::placeholder {
	color: var(--tj-muted);
}

.input-group-text {
	background: var(--tj-input-bg);
	border-color: var(--tj-border);
	color: var(--tj-muted);
}

label,
.col-form-label {
	color: var(--tj-text);
}

/* --- misc chrome ------------------------------------------------------ */
hr {
	border-color: var(--tj-border);
}

.breadcrumb {
	background: transparent;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
	color: var(--tj-muted);
}

.breadcrumb .breadcrumb-item.active {
	color: var(--tj-text);
}

.footer {
	background: var(--tj-content-bg);
	border-color: var(--tj-border);
	color: var(--tj-muted);
}

.footer a {
	color: var(--tj-muted);
}

/* --- DataTables (used by every listing) -------------------------------- */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	color: var(--tj-text);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--tj-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--tj-card-bg) !important;
	border-color: var(--tj-border) !important;
	color: var(--tj-text) !important;
}

/* --- auth pages (login, forgot, reset) --------------------------------- */
.auth-page .card,
.page-wrapper.full-page .card {
	background: var(--tj-card-bg);
	border-color: var(--tj-card-border);
}

.auth-form-wrapper .noble-ui-logo,
.auth-form-wrapper h5 {
	color: var(--tj-text);
}