/*
	Dim theme (16 Oct 2026, for everyone the same day): a softer dark, charcoal instead of
	near-black, with off-white text instead of bright white. It IS dark mode
	(html keeps the .dark class, so every existing .dark fix and the grid theme
	still apply) with the colour tokens from styles.css swapped for lighter,
	slightly blue greys in the Midnight (#334350) family.

	Switched on by html.dim, which assets/dist/body_theme.php adds when the
	browser has dqhub-theme-dim = 1; the switch is in the user menu
	(assets/dist/toolbar.php, the Theme control). Loaded from head.php for
	everyone. html.dark.dim outranks styles.css's .dark, so load order
	does not matter.
*/
html.dark.dim {
	--background: oklch(29% 0.014 250);
	--foreground: oklch(92% 0.006 250);
	--card: oklch(32% 0.015 250);
	--card-foreground: oklch(92% 0.006 250);
	--popover: oklch(34% 0.015 250);
	--popover-foreground: oklch(92% 0.006 250);
	--secondary: oklch(40% 0.016 250);
	--secondary-foreground: oklch(78% 0.012 250);
	--muted: oklch(36% 0.015 250);
	--muted-foreground: oklch(70% 0.014 250);
	--accent: oklch(38% 0.016 250);
	--accent-foreground: oklch(94% 0.006 250);
	--mono: oklch(88% 0.006 250);
	--border: oklch(42% 0.016 250);
	--input: oklch(44% 0.016 250);
	--ring: oklch(52% 0.02 250);
	color-scheme: dark;
}

/* Scrollbars and native controls follow the softer ground. */
html.dark.dim body { background-color: var(--background); }

/* Browser autofill (a saved login, an address) paints its own pale blue behind
   the text whatever the page says, which glares on a dark ground. The inset
   shadow is the only paint Chrome lets a page put over it. Dark and Dim alike,
   so it is keyed on .dark, not .dim. */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--background) inset !important;
	box-shadow: 0 0 0 1000px var(--background) inset !important;
	-webkit-text-fill-color: var(--foreground) !important;
	caret-color: var(--foreground);
	transition: background-color 9999s ease-out 0s;
}

/* The --kt-card-bg / --kt-gray-* names are used about 360 times in page CSS,
   always with a LIGHT-mode fallback (var(--kt-card-bg, #fff), var(--kt-gray-900,
   #111827)), and nothing defined them, so in Dark and Dim those surfaces came
   out navy, white or dark-on-dark (the support ticket page, 16 Oct 2026). Here
   they follow the theme, the grey scale turned over as dark mode does: 50-300
   are surfaces and lines, 400-900 are text, lightest last. Keyed on .dark so
   Dark and Dim both get them; Soft light defines its own in dqhub_soft.css. */
html.dark {
	--kt-card-bg: var(--card);
	--kt-gray-50: var(--muted);
	--kt-gray-100: var(--accent);
	--kt-gray-200: var(--border);
	--kt-gray-300: var(--input);
	--kt-gray-400: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
	--kt-gray-500: var(--muted-foreground);
	--kt-gray-600: var(--muted-foreground);
	--kt-gray-700: var(--secondary-foreground);
	--kt-gray-800: var(--foreground);
	--kt-gray-900: var(--foreground);
}

/* Mention and status tags typed into a comment (@name, #Completed) carry their
   own pale background inline, but the dark rules that make comment text light
   reach them too, which left white text on pale yellow. Their own dark text
   back, in the editor and in the timeline alike. */
html.dark .note-editor .note-editable span[style*="background-color:#ffecb3"],
html.dark .note-editor .note-editable span[style*="background-color:#d1ecf1"],
html.dark span[style*="background-color:#ffecb3"],
html.dark span[style*="background-color:#d1ecf1"] {
	color: #0c5460 !important;
}

/* Outline badges (ticket status, priority, and the like across the app) are
   drawn in dark mode as a near-black tint with mid-tone text, which reads on
   Dark but turns muddy on Dim's lighter grey (support list, 16 Oct 2026).
   On Dim: a lighter tint and pale text, the hue kept. */
html.dark.dim .kt-badge.kt-badge-outline.kt-badge-warning,
html.dark.dim .kt-badge-outline .kt-badge-warning {
	background-color: color-mix(in oklab, oklch(76% 0.16 70) 30%, transparent);
	border-color: color-mix(in oklab, oklch(76% 0.16 70) 60%, transparent);
	color: oklch(94% 0.06 80);
}
html.dark.dim .kt-badge.kt-badge-outline.kt-badge-destructive {
	background-color: color-mix(in oklab, oklch(64% 0.21 25) 32%, transparent);
	border-color: color-mix(in oklab, oklch(64% 0.21 25) 60%, transparent);
	color: oklch(94% 0.06 20);
}
html.dark.dim .kt-badge.kt-badge-outline.kt-badge-success {
	background-color: color-mix(in oklab, oklch(70% 0.17 150) 30%, transparent);
	border-color: color-mix(in oklab, oklch(70% 0.17 150) 60%, transparent);
	color: oklch(94% 0.06 155);
}
html.dark.dim .kt-badge.kt-badge-outline.kt-badge-info {
	background-color: color-mix(in oklab, oklch(65% 0.18 293) 32%, transparent);
	border-color: color-mix(in oklab, oklch(65% 0.18 293) 60%, transparent);
	color: oklch(94% 0.06 293);
}
html.dark.dim .kt-badge.kt-badge-outline.kt-badge-primary {
	background-color: color-mix(in oklab, oklch(65% 0.17 255) 32%, transparent);
	border-color: color-mix(in oklab, oklch(65% 0.17 255) 60%, transparent);
	color: oklch(94% 0.06 252);
}