﻿/* ====================================== */
/*       ROOT VARIABLES FOR DARK MODE     */
/* ====================================== */
body.dark {
	/* BACKGROUND */
	--mud-palette-background: #011627 !important;
	/* CARD / SURFACE */
	--mud-palette-surface: #0E2232 !important;
	/* APPBAR */
	--mud-palette-appbar-background: #0E2232 !important;
	--mud-palette-appbar-text: #FFFFFF !important;
	/* SIDEBAR */
	--mud-palette-drawer-background: #011627 !important;
	--mud-palette-drawer-text: rgba(255,255,255,0.85) !important;
	--mud-palette-drawer-icon: #FFFFFF !important;
	/* TEXT */
	--mud-palette-text-primary: #FFFFFF !important;
	--mud-palette-text-secondary: rgba(255,255,255,0.6) !important;
	/* INPUT */
	--mud-palette-lines-inputs: rgba(255,255,255,0.2) !important;
	background-color: #011627 !important;
}


	/* ====================================== */
	/*             COMPONENT STYLES           */
	/* ====================================== */

	body.dark .mud-paper,
	body.dark .login-card {
		background: #0E2232 !important;
		color: var(--mud-palette-text-primary) !important;
		border-radius: 16px;
	}

	/* ====================================== */
	/* INPUTS CLEAN */
	/* ====================================== */

	/* samo MudTextField */
	body.dark .mud-text-field .mud-input-control,
	body.dark .mud-text-field .mud-input-slot {
		background: #ffffff !important;
		border-radius: 12px;
	}

	/* ukloni outline */
	body.dark .mud-text-field .mud-input-outlined,
	body.dark .mud-text-field .mud-input-outlined-border {
		border: none !important;
		background: transparent !important;
	}

	/* tekst */
	body.dark .mud-text-field input {
		color: #000 !important;
	}

		/* placeholder */
		body.dark .mud-text-field input::placeholder {
			color: #666 !important;
		}


	/* BORDER (outlined) */
	body.dark .mud-input-outlined-border {
		border: none !important;
	}

	body.dark .mud-input-outlined {
		background: transparent !important;
	}

	body.dark .mud-input-outlined-border {
		border-color: rgba(255,255,255,0.20) !important;
	}

	body.dark .mud-appbar {
		background: var(--mud-palette-appbar-background) !important;
		color: var(--mud-palette-appbar-text) !important;
	}

	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 .login-links .mud-link {
		color: #fff !important;
	}

	body.dark .login-card,
	body.dark .mud-paper {
		background: #0E2232 !important;
		border-radius: 16px;
	}

	/* ====================================== */
	/* STATIC INPUT */
	/* ====================================== */

	body.dark .mud-input-static {
		background: transparent !important;
		color: var(--mud-palette-text-primary) !important;
	}

		body.dark .mud-input-static .mud-input-control {
			background: transparent !important;
			box-shadow: none !important;
		}

	/* ====================================== */
	/* AWESOMPLETE FIX (DARK MODE)           */
	/* ====================================== */

	body.dark .awesomplete input {
		color: var(--mud-palette-text-primary) !important;
		background: transparent !important;
	}

		body.dark .awesomplete input::placeholder {
			color: var(--mud-palette-text-secondary) !important;
			opacity: 1 !important;
		}