/* dark via device preference, only when no explicit theme or data-theme="device" */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]),
	:root[data-theme="device"] {
		--color-bg: #121212;
		--color-text: #f3f4f6;
		--color-muted: #9aa0a6;
		--color-border: rgba(255,255,255,0.12);
		--color-surface: #0b0b0c;
		--color-sidebar: #2a2a2a;
		--color-sidebar-context: #333333;
		--color-form-group: #1f1f1f;
	}

	:root:not([data-theme]) #bottom-nav a:hover,
	:root[data-theme="device"] #bottom-nav a:hover {
		background-color: rgba(255,255,255,0.08);
	}

	:root:not([data-theme]) #bottom-nav a.is-active,
	:root[data-theme="device"] #bottom-nav a.is-active {
		background-color: rgba(255,255,255,0.06);
	}

	:root:not([data-theme]) a,
	:root[data-theme="device"] a {
		color: #0678d4;
	}

	:root:not([data-theme]) a:visited,
	:root[data-theme="device"] a:visited {
		color: #0678d4;
	}

	:root:not([data-theme]) a:hover,
	:root[data-theme="device"] a:hover {
		color: #0878b2;
	}
}

/* explicit dark forces dark regardless of device */
:root[data-theme="dark"] {
	--color-bg: #121212;
	--color-text: #f3f4f6;
	--color-muted: #9aa0a6;
	--color-border: rgba(255,255,255,0.12);
	--color-surface: #0b0b0c;
	--color-sidebar: #2a2a2a;
	--color-sidebar-context: #333333;
	--color-form-group: #1f1f1f;
}

:root[data-theme="dark"] #bottom-nav a:hover {
	background-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] #bottom-nav a.is-active {
	background-color: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] a {
	color: #0678d4;
}

:root[data-theme="dark"] a:visited {
	color: #0678d4;
}

:root[data-theme="dark"] a:hover {
	color: #0878b2;
}

/* Buttons (device dark) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) button:hover,
	:root[data-theme="device"] button:hover,
	:root:not([data-theme]) input[type="button"]:hover,
	:root[data-theme="device"] input[type="button"]:hover,
	:root:not([data-theme]) input[type="submit"]:hover,
	:root[data-theme="device"] input[type="submit"]:hover,
	:root:not([data-theme]) input[type="reset"]:hover,
	:root[data-theme="device"] input[type="reset"]:hover,
	:root:not([data-theme]) a[role="button"]:hover,
	:root[data-theme="device"] a[role="button"]:hover {
		background-color: rgba(255,255,255,0.08);
	}

	:root:not([data-theme]) button:active,
	:root[data-theme="device"] button:active,
	:root:not([data-theme]) input[type="button"]:active,
	:root[data-theme="device"] input[type="button"]:active,
	:root:not([data-theme]) input[type="submit"]:active,
	:root[data-theme="device"] input[type="submit"]:active,
	:root:not([data-theme]) input[type="reset"]:active,
	:root[data-theme="device"] input[type="reset"]:active,
	:root:not([data-theme]) a[role="button"]:active,
	:root[data-theme="device"] a[role="button"]:active {
		background-color: rgba(255,255,255,0.10);
	}
}

/* Buttons (explicit dark) */
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] input[type="button"]:hover,
:root[data-theme="dark"] input[type="submit"]:hover,
:root[data-theme="dark"] input[type="reset"]:hover,
:root[data-theme="dark"] a[role="button"]:hover {
	background-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] button:active,
:root[data-theme="dark"] input[type="button"]:active,
:root[data-theme="dark"] input[type="submit"]:active,
:root[data-theme="dark"] input[type="reset"]:active,
:root[data-theme="dark"] a[role="button"]:active {
	background-color: rgba(255,255,255,0.10);
}

/* Tables (device dark) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) tbody tr:nth-child(even),
	:root[data-theme="device"] tbody tr:nth-child(even) {
		background-color: rgba(255,255,255,0.04);
	}

	:root:not([data-theme]) tbody tr:hover,
	:root[data-theme="device"] tbody tr:hover {
		background-color: rgba(255,255,255,0.08);
	}
}

/* Form Inputs (device dark) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) input[type="text"]:hover,
	:root[data-theme="device"] input[type="text"]:hover,
	:root:not([data-theme]) input[type="email"]:hover,
	:root[data-theme="device"] input[type="email"]:hover,
	:root:not([data-theme]) input[type="password"]:hover,
	:root[data-theme="device"] input[type="password"]:hover,
	:root:not([data-theme]) input[type="url"]:hover,
	:root[data-theme="device"] input[type="url"]:hover,
	:root:not([data-theme]) input[type="search"]:hover,
	:root[data-theme="device"] input[type="search"]:hover,
	:root:not([data-theme]) input[type="tel"]:hover,
	:root[data-theme="device"] input[type="tel"]:hover,
	:root:not([data-theme]) input[type="number"]:hover,
	:root[data-theme="device"] input[type="number"]:hover,
	:root:not([data-theme]) input[type="date"]:hover,
	:root[data-theme="device"] input[type="date"]:hover,
	:root:not([data-theme]) input[type="time"]:hover,
	:root[data-theme="device"] input[type="time"]:hover,
	:root:not([data-theme]) input[type="datetime-local"]:hover,
	:root[data-theme="device"] input[type="datetime-local"]:hover,
	:root:not([data-theme]) input[type="month"]:hover,
	:root[data-theme="device"] input[type="month"]:hover,
	:root:not([data-theme]) input[type="week"]:hover,
	:root[data-theme="device"] input[type="week"]:hover,
	:root:not([data-theme]) textarea:hover,
	:root[data-theme="device"] textarea:hover,
	:root:not([data-theme]) select:hover,
	:root[data-theme="device"] select:hover {
		background-color: rgba(255,255,255,0.04);
	}

	:root:not([data-theme]) input[type="color"]:hover,
	:root[data-theme="device"] input[type="color"]:hover {
		opacity: 0.8;
	}

	:root:not([data-theme]) .checkbox-row:hover,
	:root[data-theme="device"] .checkbox-row:hover,
	:root:not([data-theme]) .radio-row:hover,
	:root[data-theme="device"] .radio-row:hover {
		background-color: rgba(255,255,255,0.06);
	}

	:root:not([data-theme]) .btn-primary:hover,
	:root[data-theme="device"] .btn-primary:hover {
		box-shadow: 0 2px 8px rgba(6, 120, 212, 0.4);
	}

	:root:not([data-theme]) details:hover,
	:root[data-theme="device"] details:hover {
		box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
	}

	:root:not([data-theme]) details[open],
	:root[data-theme="device"] details[open] {
		box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
	}

	:root:not([data-theme]) dt,
	:root[data-theme="device"] dt {
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}

	:root:not([data-theme]) dd,
	:root[data-theme="device"] dd {
		background-color: rgba(255, 255, 255, 0.04);
		border-left-color: var(--color-accent);
	}

	:root:not([data-theme]) dd:hover,
	:root[data-theme="device"] dd:hover {
		background-color: rgba(255, 255, 255, 0.08);
	}

	:root:not([data-theme]) code,
	:root[data-theme="device"] code {
		background-color: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.12);
	}

	:root:not([data-theme]) pre,
	:root[data-theme="device"] pre {
		background-color: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.12);
	}

	:root:not([data-theme]) pre:hover,
	:root[data-theme="device"] pre:hover {
		border-color: var(--color-accent);
	}

	:root:not([data-theme]) address,
	:root[data-theme="device"] address {
		background-color: rgba(255, 255, 255, 0.08);
		border-left-color: var(--color-accent);
	}

	:root:not([data-theme]) address:hover,
	:root[data-theme="device"] address:hover {
		background-color: rgba(255, 255, 255, 0.12);
	}

	:root:not([data-theme]) mark,
	:root[data-theme="device"] mark {
		background-color: rgba(245, 158, 11, 0.15);
		color: var(--color-text);
	}

	:root:not([data-theme]) figure img,
	:root[data-theme="device"] figure img {
		box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
	}

	:root:not([data-theme]) figure img:hover,
	:root[data-theme="device"] figure img:hover {
		box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
	}

	:root:not([data-theme]) figcaption,
	:root[data-theme="device"] figcaption {
		background-color: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.12);
	}

	:root:not([data-theme]) figcaption:hover,
	:root[data-theme="device"] figcaption:hover {
		background-color: rgba(255, 255, 255, 0.12);
		border-color: var(--color-accent);
	}

	:root:not([data-theme]) fieldset,
	:root[data-theme="device"] fieldset {
		background-color: #0f1419;
	}
}

/* Form Inputs (explicit dark) */
:root[data-theme="dark"] input[type="text"]:hover,
:root[data-theme="dark"] input[type="email"]:hover,
:root[data-theme="dark"] input[type="password"]:hover,
:root[data-theme="dark"] input[type="url"]:hover,
:root[data-theme="dark"] input[type="search"]:hover,
:root[data-theme="dark"] input[type="tel"]:hover,
:root[data-theme="dark"] input[type="number"]:hover,
:root[data-theme="dark"] input[type="date"]:hover,
:root[data-theme="dark"] input[type="time"]:hover,
:root[data-theme="dark"] input[type="datetime-local"]:hover,
:root[data-theme="dark"] input[type="month"]:hover,
:root[data-theme="dark"] input[type="week"]:hover,
:root[data-theme="dark"] textarea:hover,
:root[data-theme="dark"] select:hover {
	background-color: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] input[type="color"]:hover {
	opacity: 0.8;
}

:root[data-theme="dark"] .checkbox-row:hover,
:root[data-theme="dark"] .radio-row:hover {
	background-color: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .btn-primary:hover {
	box-shadow: 0 2px 8px rgba(6, 120, 212, 0.4);
}

:root[data-theme="dark"] details:hover {
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] details[open] {
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* Tables (explicit dark) */
:root[data-theme="dark"] tbody tr:nth-child(even) {
	background-color: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] tbody tr:hover {
	background-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] dt {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] dd {
	background-color: rgba(255, 255, 255, 0.04);
	border-left-color: var(--color-accent);
}

:root[data-theme="dark"] dd:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] code {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] pre {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] pre:hover {
	border-color: var(--color-accent);
}

:root[data-theme="dark"] address {
	background-color: rgba(255, 255, 255, 0.08);
	border-left-color: var(--color-accent);
}

:root[data-theme="dark"] address:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] mark {
	background-color: rgba(245, 158, 11, 0.15);
	color: var(--color-text);
}

:root[data-theme="dark"] figure img {
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] figure img:hover {
	box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] figcaption {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] figcaption:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--color-accent);
}

:root[data-theme="dark"] fieldset {
	background-color: #0f1419;
}

/* Sidebar Navigation Hover State for Dark Theme */
:root[data-theme="dark"] .sidebar-nav a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #0678d4;
}

/* Sidebar Navigation Active State for Dark Theme */
:root[data-theme="dark"] .sidebar-nav a.is-active {
	background-color: rgba(6, 120, 212, 0.15);
	color: #0678d4;
	border-right: 3px solid #0678d4;
}

/* Current Item Styling for Dark Theme */
:root[data-theme="dark"] .plan-item.current-item {
	background-color: rgba(6, 120, 212, 0.15);
	border-color: rgba(6, 120, 212, 0.5);
	box-shadow: 0 2px 8px rgba(6, 120, 212, 0.3);
}

:root[data-theme="dark"] .plan-item.current-item .plan-item-word {
	color: #0678d4;
}

:root[data-theme="dark"] .plan-item.current-item.completed {
	background-color: rgba(34, 197, 94, 0.15);
	border-color: rgba(34, 197, 94, 0.5);
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Sidebar Navigation Active State for Device Dark Theme */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sidebar-nav a.is-active,
	:root[data-theme="device"] .sidebar-nav a.is-active {
		background-color: rgba(6, 120, 212, 0.15);
		color: #0678d4;
		border-right: 3px solid #0678d4;
	}
}

/* Device dark theme sidebar navigation hover */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sidebar-nav a:hover,
	:root[data-theme="device"] .sidebar-nav a:hover {
		background-color: rgba(255, 255, 255, 0.08);
		color: #0678d4;
	}
}

/* Device dark theme current item styling */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .plan-item.current-item,
	:root[data-theme="device"] .plan-item.current-item {
		background-color: rgba(6, 120, 212, 0.15);
		border-color: rgba(6, 120, 212, 0.5);
		box-shadow: 0 2px 8px rgba(6, 120, 212, 0.3);
	}

	:root:not([data-theme]) .plan-item.current-item .plan-item-word,
	:root[data-theme="device"] .plan-item.current-item .plan-item-word {
		color: #0678d4;
	}

	:root:not([data-theme]) .plan-item.current-item.completed,
	:root[data-theme="device"] .plan-item.current-item.completed {
		background-color: rgba(34, 197, 94, 0.15);
		border-color: rgba(34, 197, 94, 0.5);
		box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
	}
}

/* Logo styling for dark themes */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) img[src*="/img/logo.png"],
	:root[data-theme="device"] img[src*="/img/logo.png"] {
		filter: invert(1);
	}
}

:root[data-theme="dark"] img[src*="/img/logo.png"] {
	filter: invert(1);
}

/* Sidebar Version Link for Dark Theme */
:root[data-theme="dark"] .sidebar-version a {
	color: var(--color-muted);
}

:root[data-theme="dark"] .sidebar-version a:hover {
	color: var(--color-text);
}

/* Sidebar context background color */
:root[data-theme="dark"] .sidebar-context {
	background-color: rgba(255, 255, 255, 0.02);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sidebar-context,
	:root[data-theme="device"] .sidebar-context {
		background-color: rgba(255, 255, 255, 0.02);
	}
}