﻿/* ====================================== */
/*       ROOT VARIABLES FOR DARK MODE     */
/* ====================================== */
body.dark {
	/* Backgrounds */
	--mud-palette-background: #32333d !important; /* Main background */
	--mud-palette-background-gray: #27272f !important; /* Gray background */
	--mud-palette-surface: #373740 !important; /* Cards, surfaces */
	/* Text colors */
	--mud-palette-text-primary: rgba(255,255,255,0.85) !important;
	--mud-palette-text-secondary: rgba(255,255,255,0.60) !important;
	/* Top AppBar */
	--mud-palette-appbar-background: #373740 !important;
	--mud-palette-appbar-text: rgba(255,255,255,0.70) !important;
	/* Drawer */
	--mud-palette-drawer-background: #1E1E25 !important;
	--mud-palette-drawer-text: rgba(255,255,255,0.85) !important;
	--mud-palette-drawer-icon: rgba(255,255,255,0.85) !important;
	/* Inputs */
	--mud-palette-lines-inputs: rgba(255,255,255,0.12) !important;
	/* Optional overrides */
	color: var(--mud-palette-text-primary) !important;
	background-color: var(--mud-palette-background) !important;
}


	/* ====================================== */
	/*             COMPONENT STYLES           */
	/* ====================================== */

	/* Paper / Cards */
	body.dark .mud-paper {
		background: var(--mud-palette-surface) !important;
		color: var(--mud-palette-text-primary) !important;
	}

	/* Inputs */
	body.dark input,
	body.dark .mud-input-root,
	body.dark .mud-input-slot {
		background: #2b2b2b !important; /* you may set to Surface if you want */
		color: var(--mud-palette-text-primary) !important;
		border-color: rgba(255,255,255,0.20) !important;
	}

	body.dark .mud-input-outlined-border {
		border-color: rgba(255,255,255,0.20) !important;
	}

	/* AppBar */
	body.dark .mud-appbar {
		background: var(--mud-palette-appbar-background) !important;
		color: var(--mud-palette-appbar-text) !important;
	}

	/* Drawer */
	body.dark .mud-drawer {
		background: var(--mud-palette-drawer-background) !important;
		color: var(--mud-palette-drawer-text) !important;
	}

		body.dark .mud-drawer svg {
			color: var(--mud-palette-drawer-icon) !important;
		}

	/* Links */
	body.dark a {
		color: #1072eb !important; /* your Info color */
	}
