/*
 * Dark theme: what the script used to do element by element.
 *
 * The Material Dashboard template applies its dark theme in two ways. The class
 * `dark-version` on <body> covers the background, the sidebar and the cards - that is
 * CSS, it applies at the first paint. The rest - labels, separators, borders, icons -
 * was swapped in JavaScript, class by class, over a hundred or so nodes, by a function
 * called right at the bottom of the page.
 *
 * Two consequences. The page was painted light then repainted dark, on every load and
 * on every successful action, since navigating is a full reload. And the theme did not
 * apply at all on the pages that do not include the options panel, the function being
 * absent there.
 *
 * The rules below produce the same visual result, without JavaScript and before the
 * first paint. They carry `!important` because the utility classes they neutralise
 * carry it too; that is the only way to win without rewriting the template.
 *
 * The dimmer of the options screen keeps calling darkMode(): it does have to switch
 * without reloading. This file only makes that call useless at load time.
 */

/* Labels brought to the foreground, as the text-dark -> text-white swap used to do */
.dark-version span.text-dark,
.dark-version strong.text-dark,
.dark-version a.nav-link.text-dark,
.dark-version button:not(.btn) > .text-dark,
.dark-version .breadcrumb .text-dark,
.dark-version .btn.btn-link.text-dark,
.dark-version .material-icons.text-dark,
.dark-version h1.text-dark,
.dark-version h2.text-dark,
.dark-version h3.text-dark,
.dark-version h4.text-dark,
.dark-version h5.text-dark,
.dark-version h6.text-dark,
.dark-version p.text-dark,
.dark-version td.text-dark,
.dark-version th.text-dark,
.dark-version label.text-dark {
	color: #ffffff !important;
}

/* text-secondary became text-white + opacity-8 */
.dark-version .text-secondary {
	color: #ffffff !important;
	opacity: 0.8;
}

/* bg-gray-100 became bg-gray-600 */
.dark-version .bg-gray-100 {
	background-color: #6c757d !important;
}

/* hr.dark became hr.light */
.dark-version hr.dark.horizontal {
	background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}
.dark-version hr.dark.vertical {
	background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* card.border received border-dark */
.dark-version .card.border {
	border-color: rgba(255, 255, 255, 0.4) !important;
}

/* The charts: the script forced fill="#fff" on the <g> that carried one */
.dark-version svg g[fill] {
	fill: #ffffff;
}

/* Form fields: the template does not cover them, and a white field on a dark
   background is the most visible flaw of the theme. */
.dark-version .form-control,
.dark-version .form-select,
.dark-version input[type="text"],
.dark-version input[type="number"],
.dark-version input[type="date"],
.dark-version input[type="email"],
.dark-version input[type="password"],
.dark-version select,
.dark-version textarea {
	color: #ffffff;
	background-color: #1a2035;
	border-color: rgba(255, 255, 255, 0.25);
}
.dark-version .form-control::placeholder,
.dark-version textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.dark-version option {
	color: #ffffff;
	background-color: #1a2035;
}

/* The listing tables, which carry the bulk of the content */
.dark-version .table > :not(caption) > * > * {
	color: #ffffff;
}
.dark-version .table thead th {
	color: rgba(255, 255, 255, 0.7);
}