/*#################################################*/
/* DARK THEME FOR THE MODERN UI (tracking.php, cpanel.php, index.php)
/* Loaded after the page's *.modern.css. Everything dark hangs off html.tmc-dark, which
/* func/fn_ui_theme.php sets before the first paint and js/gs.theme.modern.js keeps up to date.
/* Most of the work is done by giving the --tm-* tokens of the modern CSS dark values; the rest
/* covers the classic layers underneath (jQuery UI, jqGrid, style.css) that the light theme
/* never had to restyle. Also holds the theme button, menu and tip, which show in both themes.
/* Brand accents (--theme-accent-*) stay the admin's colours, lifted a little for contrast.
/*#################################################*/

/*#################################################*/
/* TOKENS
/*#################################################*/

html.tmc-dark { color-scheme: dark; }

html.tmc-dark body.tmc-modern,
html.tmc-dark body#cpanel.tmc-modern {
	--tm-accent: color-mix(in srgb, var(--theme-accent-1, #2B82D4) 82%, #ffffff);
	--tm-accent-soft: color-mix(in srgb, var(--tm-accent) 16%, var(--tm-card));
	--tm-accent-line: color-mix(in srgb, var(--tm-accent) 50%, var(--tm-card));
	--tm-ink: #ECEEF4;
	--tm-ink-2: #C3C8D4;
	--tm-muted: #8D95A6;
	--tm-faint: #687083;
	--tm-line: #2A303D;
	--tm-line-soft: #222733;
	--tm-line-2: #3A4252;
	--tm-line-3: #4A5366;
	--tm-track: #2A303D;
	--tm-soft: #20252F;
	--tm-hover: #1E232D;
	--tm-ground: #0E1117;
	--tm-card: #161A22;
	--tm-field: #1B2029;
	--tm-map-bg: #191D25;
	--tm-on-ink: #10131A;
	--tm-moving: #22C55E;
	--tm-idle: #F59E0B;
	--tm-stopped: #F05252;
	--tm-offline: #7C8292;
	--tm-danger: #F05252;
	--tm-ok: #22C55E;
	--tm-warn: #F59E0B;
	--tm-off: #7C8292;
	--tm-ok-ink: #4ADE80;
	--tm-ok-soft: #133A26;
	--tm-warn-ink: #FBBF24;
	--tm-warn-soft: #2E2614;
	--tm-warn-soft-2: #3A2E12;
	--tm-warn-line: #6B5417;
	--tm-bad-ink: #F87171;
	--tm-bad-soft: #351C20;
	--tm-bad-soft-2: #42202A;
	--tm-bad-line: #6A2A33;
	--tm-bad-line-2: #8A3440;
	--tm-info-ink: #93C5FD;
	--tm-info-soft: #1B2D4D;
	--tm-info-bg: #172238;
	--tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--tm-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
	--tm-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
	--tm-shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
	color-scheme: dark;
}

/* one short cross-fade when the theme is switched by hand */
html.tmc-theme-anim body.tmc-modern,
html.tmc-theme-anim body.tmc-modern *,
html.tmc-theme-anim body.tmc-modern *::before,
html.tmc-theme-anim body.tmc-modern *::after {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
	html.tmc-theme-anim body.tmc-modern,
	html.tmc-theme-anim body.tmc-modern *,
	html.tmc-theme-anim body.tmc-modern *::before,
	html.tmc-theme-anim body.tmc-modern *::after { transition: none !important; }
}

/*#################################################*/
/* THEME BUTTON, MENU AND ONE-TIME TIP (both themes)
/*#################################################*/

.tmc-modern #top_panel .tmc-theme-btn a { position: relative; }
.tmc-modern #top_panel .tmc-theme-btn a[aria-expanded="true"] { background-color: var(--tm-accent-soft); color: var(--tm-accent); }

/* soft pulse around the button while the tip is open */
.tmc-modern #top_panel .tmc-theme-btn.tmc-theme-pulse a { background-color: var(--tm-accent-soft); color: var(--tm-accent); }
.tmc-modern #top_panel .tmc-theme-btn.tmc-theme-pulse a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-accent) 45%, transparent);
	animation: tmc-theme-pulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes tmc-theme-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-accent) 45%, transparent); }
	70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--tm-accent) 0%, transparent); }
}

.tmc-theme-pop,
.tmc-theme-tip {
	position: fixed;
	z-index: 20000;
	box-sizing: border-box;
	border-radius: 14px;
	background: var(--tm-card, #ffffff);
	box-shadow: var(--tm-shadow-lg);
	color: var(--tm-ink-2);
	font-family: "Manrope", "open sans", system-ui, sans-serif;
	font-size: 12.5px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s var(--tm-ease), visibility 0s linear 0.18s;
}
.tmc-theme-pop.is-open,
.tmc-theme-tip.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease, transform 0.18s var(--tm-ease), visibility 0s; }

.tmc-theme-pop { padding: 12px; }
.tmc-theme-pop .tmc-theme-title { margin: 0 2px 9px; color: var(--tm-ink); font-size: 12.5px; font-weight: 800; }
.tmc-theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 11px; background: var(--tm-soft); }
.tmc-theme-seg button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 9px 4px 7px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--tm-muted);
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tmc-theme-seg button:hover { color: var(--tm-ink); }
.tmc-theme-seg button.is-on { background: var(--tm-card); color: var(--tm-accent); box-shadow: var(--tm-shadow-sm), 0 0 0 1px var(--tm-line); }
.tmc-theme-seg button:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 1px; }
.tmc-theme-pop .tmc-theme-note { margin: 8px 2px 0; color: var(--tm-muted); font-size: 11.5px; line-height: 1.4; }

/* dark map switch */
.tmc-theme-map {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 10px;
	padding: 10px 2px 0;
	border-top: 1px solid var(--tm-line);
	color: var(--tm-ink-2);
	font-weight: 600;
	cursor: pointer;
}
.tmc-theme-map.is-off { opacity: 0.55; }
.tmc-theme-map .tmc-ic { flex: 0 0 auto; color: var(--tm-muted); }
.tmc-theme-map span { flex: 1 1 auto; line-height: 1.3; }
.tmc-theme-map input { position: absolute; opacity: 0; pointer-events: none; }
.tmc-theme-map i {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 20px;
	border-radius: 10px;
	background: var(--tm-line-2);
	transition: background-color 0.2s ease;
}
.tmc-theme-map i::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: left 0.2s var(--tm-ease);
}
.tmc-theme-map input:checked + i { background: var(--tm-accent); }
.tmc-theme-map input:checked + i::after { left: 17px; }
.tmc-theme-map input:focus-visible + i { outline: 2px solid var(--tm-accent); outline-offset: 2px; }

.tmc-theme-tip { padding: 14px 16px 14px; }
.tmc-theme-tip .tmc-theme-tip-arrow {
	position: absolute;
	top: -6px;
	width: 14px;
	height: 14px;
	border-radius: 3px 0 0 0;
	background: inherit;
	transform: rotate(45deg);
}
.tmc-theme-tip .tmc-theme-tip-icons { display: flex; gap: 6px; margin-bottom: 8px; color: var(--tm-accent); }
.tmc-theme-tip .tmc-theme-tip-icons .tmc-ic { padding: 6px; border-radius: 9px; background: var(--tm-accent-soft); }
.tmc-theme-tip b { display: block; margin-bottom: 4px; color: var(--tm-ink); font-size: 13.5px; font-weight: 800; }
.tmc-theme-tip p { margin: 0 0 12px; line-height: 1.45; }
.tmc-theme-tip .tmc-theme-tip-btns { display: flex; justify-content: flex-end; gap: 8px; }
.tmc-theme-tip button {
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--tm-line);
	border-radius: 9px;
	background: var(--tm-card);
	color: var(--tm-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}
.tmc-theme-tip button:hover { border-color: var(--tm-accent-line); color: var(--tm-accent); }
.tmc-theme-tip button.tmc-theme-tip-ok { border-color: var(--tm-accent); background: var(--tm-accent); color: #ffffff; }
.tmc-theme-tip button.tmc-theme-tip-ok:hover { color: #ffffff; filter: brightness(1.08); }

/*#################################################*/
/* MAP: street tiles dimmed with a filter (free, no other tile server); markers, routes,
/* zones and popups sit in other panes and keep their colours
/*#################################################*/

html.tmc-dark body.tmc-map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.55); }
:where(html.tmc-dark) .tmc-modern #map,
:where(html.tmc-dark) .tmc-modern .leaflet-container { background: var(--tm-map-bg); }
:where(html.tmc-dark) .tmc-modern .leaflet-bar a,
:where(html.tmc-dark) .tmc-modern .leaflet-control-layers,
:where(html.tmc-dark) .tmc-modern .leaflet-control-zoom a { background-color: var(--tm-card); border-color: var(--tm-line); color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .leaflet-bar a:hover { background-color: var(--tm-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .leaflet-bar a.leaflet-disabled { background-color: var(--tm-card); color: var(--tm-faint); }
:where(html.tmc-dark) .tmc-modern .leaflet-control-attribution { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .leaflet-control-attribution a { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .leaflet-control-scale-line { border-color: var(--tm-muted); background: color-mix(in srgb, var(--tm-card) 80%, transparent); color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .leaflet-popup-content-wrapper,
:where(html.tmc-dark) .tmc-modern .leaflet-popup-tip { background: var(--tm-card); color: var(--tm-ink-2); box-shadow: var(--tm-shadow-lg); }
:where(html.tmc-dark) .tmc-modern .leaflet-popup-content table,
:where(html.tmc-dark) .tmc-modern .leaflet-popup-content td { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .leaflet-container a.leaflet-popup-close-button { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .leaflet-tooltip { border-color: var(--tm-line); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .leaflet-tooltip-top::before { border-top-color: var(--tm-card); }
:where(html.tmc-dark) .tmc-modern .leaflet-tooltip-bottom::before { border-bottom-color: var(--tm-card); }
:where(html.tmc-dark) .tmc-modern .leaflet-tooltip-left::before { border-left-color: var(--tm-card); }
:where(html.tmc-dark) .tmc-modern .leaflet-tooltip-right::before { border-right-color: var(--tm-card); }
/* map labels drawn by the app (vehicle names, place names) */
:where(html.tmc-dark) .tmc-modern .leaflet-marker-pane div[style*="background"] { color: inherit; }

/*#################################################*/
/* GREY IMAGE ICONS (theme/images/*.svg, drawn #6F6F6F for white backgrounds)
/*#################################################*/

html.tmc-dark .tmc-modern img[src*="theme/images/"],
html.tmc-dark .tmc-modern input[type="image"][src*="theme/images/"] { filter: brightness(1.75); }
html.tmc-dark .tmc-modern .ui-jqgrid img[src*="theme/images/"] { filter: brightness(1.75); }
/* toolbar image buttons carry their own background, which the lift above brightens 1.75x:
   start from a darker one so they end up on the soft panel colour */
html.tmc-dark .tmc-modern .panel-button img,
html.tmc-dark #cpanel.tmc-modern .tmc-card .ui-jqgrid .ui-jqgrid-title .panel-button img { background: #12151B; }
html.tmc-dark .tmc-modern .panel-button img:hover,
html.tmc-dark #cpanel.tmc-modern .tmc-card .ui-jqgrid .ui-jqgrid-title a:hover .panel-button img { background: color-mix(in srgb, var(--tm-accent) 12%, #0C0F14); }

/* the same grey icons used as CSS backgrounds (map controls, history route bar, menus) */
html.tmc-dark .tmc-modern span[class^="icon-"],
html.tmc-dark .tmc-modern span[class*=" icon-"],
html.tmc-dark .tmc-modern .leaflet-control a span { filter: brightness(1.75); }

/* the logo: dark lettering turned light, colours kept (an inverted, hue-turned copy) */
html.tmc-dark .tmc-modern #top_panel img.tmc-logo,
html.tmc-dark .tmc-modern #loading_panel img.logo { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

/* status icons in colour (green / orange / red) only need a little lift */
html.tmc-dark .tmc-modern img[src*="theme/images/"][src*="-green"],
html.tmc-dark .tmc-modern img[src*="theme/images/"][src*="-red"],
html.tmc-dark .tmc-modern img[src*="theme/images/"][src*="-orange"],
html.tmc-dark .tmc-modern img[src*="theme/images/"][src*="-yellow"] { filter: brightness(1.1); }

/* small icons drawn in data URIs with a dark stroke */
html.tmc-dark .tmc-modern #side_panel_history_parameters .tmc-hf-actions input.tmc-hf-hide { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D95A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 6.1A10.6 10.6 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3.1 3.7M6.2 7.3C3.6 9 2 12 2 12s3.6 6 10 6c1.5 0 2.9-.3 4.1-.9'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.1 4.1'/%3E%3C/svg%3E"); }
html.tmc-dark .tmc-modern #side_panel_history_parameters .tmc-hf-actions input.tmc-hf-io { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D95A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v14M3.5 14.5 7 18l3.5-3.5M17 20V6M13.5 9.5 17 6l3.5 3.5'/%3E%3C/svg%3E"); }
html.tmc-dark .tmc-modern #side_panel_dragbar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C8D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
html.tmc-dark .tmc-modern.tmc-side-hidden #side_panel_dragbar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C8D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
html.tmc-dark .tmc-modern:not(.tmc-bp-open) #bottom_panel_dragbar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C8D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"); }

/*#################################################*/
/* CLASSIC LAYERS UNDER THE MODERN UI: jQuery UI, jqGrid, style.css
/*#################################################*/

:where(html.tmc-dark) .tmc-modern,
:where(html.tmc-dark) .tmc-modern .ui-widget,
:where(html.tmc-dark) .tmc-modern .ui-widget-content { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .ui-widget-content { border-color: var(--tm-line); background: var(--tm-card); }
:where(html.tmc-dark) .tmc-modern .ui-widget-header { border-color: var(--tm-line); background: var(--tm-card); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-widget-content a { color: var(--tm-accent); }
:where(html.tmc-dark) .tmc-modern .ui-state-default,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-default,
:where(html.tmc-dark) .tmc-modern .ui-widget-header .ui-state-default { border-color: var(--tm-line); background: var(--tm-soft); color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .ui-state-hover,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-hover,
:where(html.tmc-dark) .tmc-modern .ui-state-focus,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-focus { border-color: var(--tm-line-2); background: var(--tm-hover); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-state-active,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-active { border-color: var(--tm-accent-line); background: var(--tm-accent-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-state-highlight,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-highlight { border-color: var(--tm-accent-line); background: var(--tm-accent-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-state-error,
:where(html.tmc-dark) .tmc-modern .ui-widget-content .ui-state-error { border-color: var(--tm-bad-line); background: var(--tm-bad-soft); color: var(--tm-bad-ink); }
:where(html.tmc-dark) .tmc-modern .ui-state-disabled { opacity: 0.45; }

/* tabs */
:where(html.tmc-dark) .tmc-modern .ui-tabs .ui-tabs-nav { background: transparent; border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-tabs .ui-tabs-nav li { border-color: transparent; background: transparent; }
:where(html.tmc-dark) .tmc-modern .ui-tabs .ui-tabs-nav li a { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-tabs .ui-tabs-panel { background: transparent; }

/* dialogs */
:where(html.tmc-dark) .tmc-modern .ui-dialog { background: var(--tm-card); border-color: var(--tm-line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07); }
:where(html.tmc-dark) .tmc-modern .ui-dialog .ui-dialog-titlebar { background: var(--tm-card); border-color: var(--tm-line); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-dialog .ui-dialog-title { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-dialog .ui-dialog-buttonpane { background: var(--tm-card); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-widget-overlay { background: rgba(0, 0, 0, 0.55); }
/* close, pin and other title icons: white images that the light theme turns dark grey */
html.tmc-dark .tmc-modern .ui-dialog .ui-dialog-titlebar .ui-icon,
html.tmc-dark .tmc-modern .ui-dialog .ui-dialog-titlebar img { filter: brightness(0) invert(1) opacity(0.6); }
html.tmc-dark .tmc-modern .ui-dialog .ui-dialog-titlebar-close:hover .ui-icon { filter: brightness(0) invert(1) opacity(0.95); }
:where(html.tmc-dark) .tmc-modern .ui-dialog .ui-dialog-titlebar-close { border-color: transparent; background: transparent; }

/* form rows of style.css */
:where(html.tmc-dark) .tmc-modern .title-block { color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .row,
:where(html.tmc-dark) .tmc-modern .row2,
:where(html.tmc-dark) .tmc-modern .row3 { color: var(--tm-ink-2); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern input::placeholder,
:where(html.tmc-dark) .tmc-modern textarea::placeholder { color: var(--tm-faint); }
:where(html.tmc-dark) .tmc-modern select option,
:where(html.tmc-dark) .tmc-modern select optgroup { background: var(--tm-card); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern hr { border-color: var(--tm-line); background: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern fieldset { border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern legend { color: var(--tm-ink); }

/* jqGrid */
/* grids sit on cards: transparent like the light theme (the cpanel card titles show through) */
:where(html.tmc-dark) .tmc-modern .ui-jqgrid,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-view,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-bdiv,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-btable { background: transparent; color: var(--tm-ink-2); border-color: var(--tm-line); }
/* the header band keeps the modern soft background; the cells on it stay clear */
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-hdiv { border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-htable th,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-th-column { background: transparent; border-color: var(--tm-line); color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-titlebar { background: var(--tm-card); color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgrow td { border-color: var(--tm-line-soft); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.ui-row-ltr td { border-color: var(--tm-line-soft); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgrow.ui-state-hover,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgrow:hover td { background: var(--tm-hover); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.ui-state-highlight td,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgrow.ui-state-highlight { background: var(--tm-accent-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgroup td { background: var(--tm-card); color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-pager,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-toppager { background: var(--tm-card); border-color: var(--tm-line); color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-pg-input,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-pg-selbox { background: var(--tm-field); color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-sortable,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-jqgrid-resize { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .loading { background: var(--tm-card); color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.jqgfirstrow td { border-color: transparent; }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .jqgrid-rownum { background: transparent; color: var(--tm-faint); }
:where(html.tmc-dark) .tmc-modern .ui-jqgrid .ui-subgrid,
:where(html.tmc-dark) .tmc-modern .ui-jqgrid tr.ui-subgrid td { background: var(--tm-soft); }

/* menus, date picker, autocomplete */
:where(html.tmc-dark) .tmc-modern .menu ul,
:where(html.tmc-dark) .tmc-modern .ui-menu { background: var(--tm-card); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .menu ul li a,
:where(html.tmc-dark) .tmc-modern .ui-menu .ui-menu-item a { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .menu ul li a:hover { background: var(--tm-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-datepicker { background: var(--tm-card); border-color: var(--tm-line); color: var(--tm-ink-2); box-shadow: var(--tm-shadow-lg); }
:where(html.tmc-dark) .tmc-modern .ui-datepicker .ui-datepicker-header { background: var(--tm-card); color: var(--tm-ink); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-datepicker td a,
:where(html.tmc-dark) .tmc-modern .ui-datepicker td span { background: transparent; border-color: transparent; color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .ui-datepicker td a:hover { background: var(--tm-soft); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-datepicker th { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .ui-timepicker-div,
:where(html.tmc-dark) .tmc-modern .ui-slider { background: var(--tm-soft); border-color: var(--tm-line); }

/* jquery.multiple dropdowns */
:where(html.tmc-dark) .tmc-modern .ms-drop { background: var(--tm-card); color: var(--tm-ink-2); border-color: var(--tm-line) !important; }
:where(html.tmc-dark) .tmc-modern .ms-drop ul > li label { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .ms-drop ul > li:hover,
:where(html.tmc-dark) .tmc-modern .ms-drop ul > li.hide-radio.selected,
:where(html.tmc-dark) .tmc-modern .ms-drop ul > li.selected { background-color: var(--tm-soft); }
:where(html.tmc-dark) .tmc-modern .ms-drop ul > li label span { color: inherit; }
:where(html.tmc-dark) .tmc-modern .ms-choice { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ms-choice > span { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ms-choice > span.placeholder { color: var(--tm-faint); }
:where(html.tmc-dark) .tmc-modern .ms-choice > div { filter: invert(0.8); }
:where(html.tmc-dark) .tmc-modern .ms-search input { background-color: var(--tm-field); color: var(--tm-ink); }

/* tokenize (cpanel e-mail lists) */
:where(html.tmc-dark) .tmc-modern div.Tokenize ul.TokensContainer { background: var(--tm-field); }
:where(html.tmc-dark) .tmc-modern div.Tokenize ul.TokensContainer li.Token { background: var(--tm-soft); border-color: var(--tm-line-2); color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern div.Tokenize ul.Dropdown { background: var(--tm-card); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern div.Tokenize ul.Dropdown li.Hover { background: var(--tm-soft); }

/* qtip tooltips */
html.tmc-dark .qtip,
html.tmc-dark .qtip-default { background: var(--tm-card, #161A22); border-color: #2A303D; color: #C3C8D4; }
html.tmc-dark .qtip-titlebar { background: #20252F; color: #ECEEF4; }

/* pnotify notifications */
:where(html.tmc-dark) .tmc-modern .ui-pnotify-container { color: var(--tm-ink-2); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .ui-pnotify-title { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .ui-pnotify-text { color: var(--tm-ink-2); }

/* loading screen */
:where(html.tmc-dark) .tmc-modern #loading_panel { background: var(--tm-ground); }

/* graphs drawn by flot (history, expenses): labels and the grid */
:where(html.tmc-dark) .tmc-modern .flot-tick-label,
:where(html.tmc-dark) .tmc-modern .tickLabel,
:where(html.tmc-dark) .tmc-modern .flot-text { color: var(--tm-muted) !important; }
:where(html.tmc-dark) .tmc-modern .legend > div { background-color: var(--tm-card) !important; }
:where(html.tmc-dark) .tmc-modern .legend table,
:where(html.tmc-dark) .tmc-modern .legendLabel { color: var(--tm-ink-2); }

/* expenses (style.css) */
:where(html.tmc-dark) .tmc-modern .expenses-summary,
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-title { color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern .expenses-summary .expenses-summary-cat,
:where(html.tmc-dark) .tmc-modern .expenses-file,
:where(html.tmc-dark) .tmc-modern .expenses-kpi { background-color: var(--tm-soft); }
:where(html.tmc-dark) .tmc-modern .expenses-summary .expenses-summary-cat:hover { background-color: var(--tm-line-2); }
:where(html.tmc-dark) .tmc-modern .expenses-file a,
:where(html.tmc-dark) .tmc-modern .expenses-kpi-value { color: var(--tm-ink); }
:where(html.tmc-dark) .tmc-modern .expenses-audit,
:where(html.tmc-dark) .tmc-modern .expenses-file-pending,
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-period,
:where(html.tmc-dark) .tmc-modern .expenses-kpi-label,
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-notes { color: var(--tm-muted); }
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-table th { background-color: var(--tm-card); color: var(--tm-muted); border-color: var(--tm-line); }
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-table td { border-color: var(--tm-line-soft); }
:where(html.tmc-dark) .tmc-modern .expenses-dashboard-table tr.expenses-dashboard-total td { border-color: var(--tm-line); }

/* map controls of style.css: layer select, camera and street view boxes, print sizes */
:where(html.tmc-dark) .tmc-modern .map-layer-control,
:where(html.tmc-dark) .tmc-modern .camera-control,
:where(html.tmc-dark) .tmc-modern .street-view-control,
:where(html.tmc-dark) .tmc-modern #map li.browser-print-mode { background-color: var(--tm-card); color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern #map li.browser-print-mode:hover { background-color: var(--tm-soft); }

/* gallery, chat and the "please wait" box */
:where(html.tmc-dark) .tmc-modern #image_gallery_img_data,
:where(html.tmc-dark) .tmc-modern #chat_msgs_dt { background-color: var(--tm-soft); color: var(--tm-ink-2); }
:where(html.tmc-dark) .tmc-modern #blocking_panel_text { background-color: var(--tm-card); color: var(--tm-ink); }

/* history route bar over the map */
:where(html.tmc-dark) .tmc-modern .history-view-control { background-color: var(--tm-card); }
:where(html.tmc-dark) .tmc-modern .history-view-control a:hover { background-color: var(--tm-accent-soft); }

/* bulk action bar: stays dark (on light it is ink coloured) */
:where(html.tmc-dark) .tmc-modern .ui-dialog .tmc-bulk { background: #2A3140; color: #ECEEF4; }

/*#################################################*/
/* DASHBOARD: its own dark palette follows the theme; its separate moon switch is hidden
/*#################################################*/

.tmc-modern #dialog_dashboard button[onclick^="dashboardDarkToggle"] { display: none; }
html.tmc-dark .tmc-modern #dialog_dashboard.dash-dark {
	--dash-bg: var(--tm-ground);
	--dash-card: var(--tm-card);
	--dash-line: var(--tm-line);
	--dash-soft: var(--tm-soft);
	--dash-ink: var(--tm-ink-2);
	--dash-muted: var(--tm-muted);
}

/*#################################################*/
/* LOGIN PAGE (theme/login.modern.css, every rule there starts with body#login)
/* only the card and its controls go dark: the photo and the animated journey (whose sky follows
/* the time in Sri Lanka) stay as they are
/*#################################################*/

html.tmc-dark body#login.tmc-modern {
	--tm-accent: color-mix(in srgb, var(--theme-accent-1, #2B82D4) 82%, #ffffff);
	--tm-accent-soft: color-mix(in srgb, var(--tm-accent) 16%, #161A22);
	--tm-ink: #ECEEF4;
	--tm-ink-2: #C3C8D4;
	--tm-muted: #8D95A6;
	--tm-line: #2A303D;
	--tm-soft: #20252F;
	--tm-card: #161A22;
	color-scheme: dark;
}
html.tmc-dark body#login.tmc-modern .wrapper .inner-wrapper { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85); }
html.tmc-dark body#login.tmc-modern .wrapper .inner-wrapper::before { background: rgba(22, 26, 34, 0.88); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
html.tmc-dark body#login.tmc-modern .logo { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
html.tmc-dark body#login.tmc-modern input.inputbox { background-color: rgba(27, 32, 41, 0.9); color: var(--tm-ink); }
html.tmc-dark body#login.tmc-modern input.inputbox:hover { background-color: #1B2029; border-color: #3A4252; }
html.tmc-dark body#login.tmc-modern input.inputbox:focus { background-color: #1B2029; }
html.tmc-dark body#login.tmc-modern input.inputbox::placeholder { color: #687083; }
html.tmc-dark body#login.tmc-modern .content-block .reveal { filter: brightness(1.8); }
html.tmc-dark body#login.tmc-modern .wrapper .content-block .submit-btn .remember-block::before { background: #3A4252; box-shadow: none; }
html.tmc-dark body#login.tmc-modern .server-select .ms-choice { background-color: rgba(27, 32, 41, 0.9); }
html.tmc-dark body#login.tmc-modern .footer { border-top-color: rgba(255, 255, 255, 0.08); }
html.tmc-dark body#login.tmc-modern .tml-app { background: rgba(27, 32, 41, 0.9); }
html.tmc-dark body#login.tmc-modern .tml-app:hover { border-color: var(--tm-accent); background: #1B2029; }
html.tmc-dark body#login.tmc-modern .tml-app:nth-child(2) svg { color: #ECEEF4; }
html.tmc-dark body#login.tmc-modern .footer .ms-choice { background: rgba(27, 32, 41, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C8D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E") center / 17px 17px no-repeat !important; }
html.tmc-dark body#login.tmc-modern .footer .ms-choice:hover { background-color: #1B2029 !important; }
html.tmc-dark body#login.tmc-modern .ms-drop { background: #161A22; color: #C3C8D4; }
html.tmc-dark body#login.tmc-modern .ms-drop ul > li:hover { background: #20252F; }
html.tmc-dark body#login.tmc-modern .ms-drop ul > li label span { color: inherit; }
html.tmc-dark body#login.tmc-modern .ui-dialog,
html.tmc-dark body#login.tmc-modern .ui-dialog .ui-dialog-titlebar,
html.tmc-dark body#login.tmc-modern .ui-dialog .ui-dialog-content { background: #161A22; border-color: #2A303D; color: var(--tm-ink-2); }
html.tmc-dark body#login.tmc-modern .ui-dialog .ui-dialog-titlebar { color: var(--tm-ink); }
html.tmc-dark body#login.tmc-modern .ui-dialog .ui-dialog-titlebar .ui-icon { filter: brightness(0) invert(1) opacity(0.6); }
html.tmc-dark body#login.tmc-modern .ui-widget-overlay { background: rgba(0, 0, 0, 0.55); }
/* the "log in to track" hint floats over the scene, not the card: same dark pill as in light mode
   (it is drawn in --tm-ink, which the dark card turns light) */
html.tmc-dark body#login.tmc-modern .tml-hint { background: #1E1B2E; color: #ffffff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12); }
html.tmc-dark body#login.tmc-modern .tml-hint::after { border-top-color: #1E1B2E; }