/* ==UserStyle==
@name         UPS.com - Dark Mode
@version      20241114.23.54
@namespace    typpi.online
@description  UPS.com - Dark Mode
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues

@var color dark-background "Dark Background" #282a36
@var color border "Border" #6272a4
@var color button-background "Button Background" #662f10
@var color hover-color "Hover Color" #50fa7b
@var color input-background "Input Background" #44475a
@var color text "Text Color" #f8f8f2
@var color black "Black" #000000
@var color white "White" #ffffff
==/UserStyle== */
@-moz-document domain("ups.com") {
	:root {
		--dark-background: var(dark-background);
		--border: var(border);
		--button-background: var(button-background);
		--hover-color: var(hover-color);
		--input-background: var(input-background);
		--text: var(text);
		--black: var(black);
		--white: var(white);
	}

	/* Base dark mode filter */
	html {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	/* Specific elements to exclude from inversion */
	:is(
		img,
		svg,
		video,
		iframe,
		[class*='footer'],
		[id*='footer'],
		.logo,
		.button,
		.btn,
		.input,
		.textarea,
		.card,
		.panel,
		.table,
		.modal,
		#ups-header_logo > img,
		.ups-cta.ups-cta-primary.d-none.d-md-block.ups-analytics
			> span,
		.ups-socialicon_facebook,
		.ups-socialicon_google,
		.brown.arc-container.apps-container.section,
		#tabs_0_tabContent_0
			> div
			> div
			> div
			> div
			> div.package-tracker,
		#tracking-numbers
	) {
		filter: invert(1) hue-rotate(180deg);
	}

	.hero-img > div > picture > img {
		filter: unset !important;
	}

	/* Additional styling for better dark mode experience */
	a,
	li:nth-child(n) > a > span.icon.ups-icon-link_newwindow,
	.icon-new-window > svg,
	#sublist-ups-companies-2
		> li:nth-child(n)
		> a
		> span
		> svg
		> use,
	#sublist-ups-sites-1 > li:nth-child(n) > a > span > svg,
	#sublist-this-site-0 > li:nth-child(n) > a > span > svg,
	.icon-facebook > svg > use,
	.icon-x > svg > use,
	.icon-instagram > svg > use,
	.icon-linkedin > svg > use,
	.icon-youtube > svg,
	.toggle-help > span > svg > use {
		color: var(--black) !important;
	}

	a > span.icon.ups-icon-link_newwindow,
	#ups-footer_legalLinks > li:nth-child(n) > a,
	#ups-footer_connectLinks
		> li:nth-child(n)
		> a
		> span.icon.ups-icon-link_newwindow,
	#sublist-legal-0 > li:nth-child(n) > a,
	#sublist-ups-companies-2 > li:nth-child(n) > a,
	#sublist-ups-sites-1 > li:nth-child(n) > a,
	#sublist-this-site-0 > li:nth-child(n) > a,
	#sublist-connect-with-us-3 > li:nth-child(n) > a,
	#tabs_0_tab_2 > h2,
	#tabs_0_tab_3 > h2,
	.help-content > p > a,
	#ups-footer_connectLinks > li:nth-child(n) > a {
		color: var(--white) !important;
	}

	.button,
	.btn {
		border: none !important;
		background-color: var(--button-background) !important;
		color: var(--text) !important;
	}

	.button:hover,
	.btn:hover {
		color: var(--hover-color) !important;
	}

	.input,
	.textarea {
		border: 1px solid var(--border) !important;
		background-color: var(--input-background) !important;
		color: var(--text) !important;
	}

	.input:focus,
	.textarea:focus {
		border-color: var(--hover-color) !important;
	}

	.card,
	.panel {
		border: 1px solid var(--border) !important;
		background-color: var(--input-background) !important;
		color: var(--text) !important;
	}

	.table {
		background-color: var(--input-background) !important;
		color: var(--text) !important;
	}

	.table th,
	.table td {
		border: 1px solid var(--border) !important;
	}

	.modal {
		background-color: var(--dark-background) !important;
		color: var(--text) !important;
	}
}