/*
 * Modernization layer — Phase 1 + 2.
 * Loaded after the legacy template stylesheets (style.css, boxed.css,
 * colors/orange.css, buttons.css) so it can override them without
 * rewriting the underlying float-based layout or the fixed 960px grid.
 */

:root {
	--font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--font-body: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

	/* light (default) palette — matches the site's current look */
	--bg: #efefef;
	--surface: #ffffff;
	--border: #e2e2e2;
	--text: #303030;
	--text-dim: #666666;
	--text-faint: #999999;

	--accent: #E8551F;
	--accent-ink: #FFFFFF;

	--svc-politie: #5b9bff;
	--svc-brandweer: #ff5c5c;
	--svc-ambulance: #F1DD38;
	--svc-lifeliner: #00539F;
	--svc-knrm: #FF6A00;
	--svc-dares: #d9a83e;
	--svc-default: #6B7785;
}

/* dark palette — swaps in automatically under prefers-color-scheme.
   Light mode above is untouched by this block, so the current default
   appearance can't regress. */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f1216;
		--surface: #171c22;
		--border: #2a323b;
		--text: #e8edf2;
		--text-dim: #a8b4c0;
		--text-faint: #78848f;

		--accent: #ff6a3d;
		--accent-ink: #1a0800;

		--svc-politie: #5b9bff;
		--svc-brandweer: #ff5c5c;
		--svc-ambulance: #F1DD38;
		--svc-lifeliner: #00539F;
		--svc-knrm: #FF6A00;
		--svc-dares: #d9a83e;
		--svc-default: #01080f;
	}

	body {
		background: var(--bg);
		color: var(--text-dim);
	}

	#wrapper {
		background: var(--surface);
		box-shadow: 0 0 16px rgba(0, 0, 0, .5);
	}

	a, a:visited, p a, p a:visited {
		color: var(--accent);
	}

	#navigation {
		background: var(--surface);
	}

	#navigation ul li a {
		color: var(--text);
	}

	/* base.css sets a blanket h1-h6{color:#333} and strong{color:#333} —
	   every heading and bold run on every page falls back to that
	   unless something more specific overrides it, so this has to be
	   just as blanket or headings go dark-on-dark almost everywhere. */
	h1, h2, h3, h4, h5, h6, strong {
		color: var(--text);
	}

	#tagline {
		color: var(--text);
	}

	.large-notice {
		background: var(--surface);
		border-color: var(--border);
	}

	.large-notice p {
		color: var(--text-dim);
	}

	input[type="text"], input[type="password"], input[type="email"], textarea, select {
		background: var(--surface);
		border-color: var(--border);
		color: var(--text-dim);
	}

	#footer {
		background: var(--bg);
	}

	.footer-headline h4 {
		background-color: var(--surface);
	}

	/* .headline h3/h4 has its own hardcoded background-color:#fff — a
	   white "mask" that sits over the headline-bg.png divider line so
	   the line doesn't run through the heading text. It's paired with
	   the blanket h1-h6 color fix above (var(--text), i.e. light in
	   dark mode), so without this the heading text would go light-on-
	   white instead of dark-on-white. #page-title's divider is the
	   same light-gray-on-transparent situation as headline-bg.png. */
	.headline h3, .headline h4 {
		background-color: var(--surface);
	}

	#page-title {
		border-bottom-color: var(--border);
	}

	/* .replink is the link class kept on incident message text
	   (getincidentcard() in alarmeringdroid-2.js) — it hardcodes
	   color:#000 in style.css, which sat directly on .incident's new
	   dark background. .comment-by (artikel.php) has the same
	   hardcoded-black problem. */
	.replink, .replink:visited,
	.comment-by {
		color: var(--text);
	}

	/* logo.png is a raster wordmark with black "ALARMERING" text baked
	   in on a transparent background — no white variant exists in the
	   image assets, and there's no way to recolor a flattened PNG from
	   CSS. Give it a fixed light backing plate instead of trying to
	   theme the image itself; #fff on purpose, not a token, since this
	   exists specifically to counteract the dark theme. */
	#logo {
		background: #fff;
		display: inline-block;
		padding: 10px 16px;
		border-radius: 8px;
	}

	/* .item-description a (index.php news cards) and .post-title h2 a
	   (artikel.php/nieuws.php headlines) have no background of their
	   own — same "no color, falls back to a light-mode hardcoded gray"
	   problem as the headings above. */
	.item-description a,
	.post-title h2 a {
		color: var(--text);
	}

	label span, legend span {
		color: var(--text);
	}

	/* These three DO carry their own light background (#fbfbfb/#fafafa)
	   paired with dark text, so they were still legible as-is — just a
	   light card stranded in an otherwise dark page. Recolor the pair
	   together rather than only the text, or flipping just the text
	   color would break the pairing the other way round. */
	.acc-trigger {
		background: var(--surface);
		border-color: var(--border);
		color: var(--text-dim);
	}

	.acc-trigger a {
		color: var(--text-dim);
	}

	.acc-trigger a:hover, .acc-trigger.active a {
		color: var(--text);
	}

	.tabs-nav li a {
		background-color: var(--surface);
		border-color: var(--border);
		color: var(--text-dim);
	}

	.tabs-nav li.active a {
		color: var(--text);
	}

	table.standard-table th {
		background-color: var(--surface);
		border-color: var(--border);
		color: var(--text);
	}

	table.standard-table td {
		border-color: var(--border);
	}

	table.standard-table tr:hover td {
		background-color: var(--surface);
	}
}

/* ---------- Typography ---------- */

body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
#tagline,
.headline h3, .headline h4,
#page-title h2,
.large-notice h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* the dispatch text itself reads like a pager readout */
.incident-msg {
	font-family: var(--font-mono);
}

.incident-time {
	font-variant-numeric: tabular-nums;
}

/* ---------- One intentional accent, not a blanket color ---------- */

#navigation ul li a:hover,
#navigation ul li:hover > a,
#bolded-line,
.button.gray:hover,
.button.light:hover,
.button.color,
input[type="button"],
.flex-direction-nav .flex-prev:hover,
.flex-direction-nav .flex-next:hover,
#scroll-top-top a,
.post-icon,
.mr-rotato-prev:hover,
.mr-rotato-next:hover,
li.current,
.tags a:hover,
#filters a:hover,
.selected,
#portfolio-navi a:hover {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.capclick {
	background: none;
	color: var(--accent);
}

/* ---------- Incident feed component ---------- */
/* Purpose-built markup, replacing the old .report/.avatar/testimonial-
   carousel skeleton that getreport() in alarmeringdroid-2.js and
   toonmelding.php used to reuse from the template's testimonials
   widget. Shared by the live monitor, search results, and the
   single-incident detail page — all three build the same .incident
   structure now (JS via getincidentcard(), PHP via toonmelding.php). */

.incident-thread {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

.incident {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 6px;
}

.incident--sub {
	width: calc(100% - 20px);
	margin-left: 20px;
}

.incident-rail {
	flex: 0 0 4px;
	background: var(--svc-default);
}

.incident--politie .incident-rail   { background: var(--svc-politie); }
.incident--brandweer .incident-rail { background: var(--svc-brandweer); }
.incident--ambulance .incident-rail { background: var(--svc-ambulance); }
.incident--lifeliner .incident-rail { background: var(--svc-lifeliner); }
.incident--knrm .incident-rail      { background: var(--svc-knrm); }
.incident--dares .incident-rail     { background: var(--svc-dares); }

.incident--prio {
	box-shadow: 0 0 0 1px var(--accent) inset;
}

.incident-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
}

.incident-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-bottom: 4px;
}

.incident-time {
	margin-left: auto;
	font-size: 11px;
	color: var(--text-faint);
	white-space: nowrap;
}

.incident-loc {
	font-size: 12px;
	font-weight: bold;
	color: var(--text);
	margin-bottom: 4px;
}

.incident-loc a {
	color: inherit;
}

.incident-msg {
	font-size: 12px;
	line-height: 1.5;
	color: var(--text);
}

.incident-msg .original {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 3px;
}

.incident-capcodes {
	margin-top: 6px;
	font-size: 11px;
	color: var(--text-faint);
}

.badge {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 99px;
	margin-right: 5px;
	border: 1px solid transparent;
	color: #fff;
}

.badge-svc--politie   { background: var(--svc-politie); }
.badge-svc--brandweer { background: var(--svc-brandweer); }
.badge-svc--ambulance { background: var(--svc-ambulance); }
.badge-svc--lifeliner { background: var(--svc-lifeliner); }
.badge-svc--knrm      { background: var(--svc-knrm); }
.badge-svc--dares     { background: var(--svc-dares); }
.badge-svc--default   { background: var(--svc-default); }

.badge-prio {
	background: var(--accent);
}

.badge-info {
	background: var(--surface);
	color: var(--text-dim);
	border-color: var(--border);
}

/* ad slot / adblock notice inserted into the feed by getreportlist() */
.feed-notice {
	box-sizing: border-box;
	background: var(--surface);
	border: 1px dashed var(--border);
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 6px;
	float: left;
	width: 100%;
}

.feed-notice-label {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-faint);
	margin-bottom: 6px;
}

.feed-notice-body {
	font-size: 12px;
	color: var(--text-dim);
}

/* ---------- Filter bar ---------- */
/* Toggle-chip / segmented replacements for the plain <select>s on
   livemonitor.php. Each group keeps a hidden <input id="..."> in
   sync (see initSegmented() in alarmeringdroid-2.js) so livemonitor()
   reads the exact same values a <select> would have produced. */

.seg-group, .chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 15px 0;
}

.seg, .chip {
	font-family: var(--font-body);
	font-size: 12px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-dim);
	border-radius: 99px;
	padding: 5px 12px;
	cursor: pointer;
	box-sizing: border-box;
}

.seg.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}

.chip {
	--svc: var(--svc-default);
	padding-left: 10px;
}

.chip::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--svc);
	margin-right: 6px;
	vertical-align: middle;
}

.chip.neutral::before {
	display: none;
}

.chip.active {
	background: var(--svc);
	border-color: var(--svc);
	color: #fff;
	font-weight: 600;
}

.chip.active::before {
	background: #fff;
}

.chip.neutral.active {
	background: var(--text-dim);
	border-color: var(--text-dim);
	color: #fff;
}

/* Toggle switches, replacing the plain checkboxes for prio1 / lline.
   The real <input type="checkbox"> stays in the DOM and keeps working
   exactly as before ($(...).is(':checked')) — this only restyles it. */

.toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.switch {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
	flex: none;
}

.switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.switch-track {
	position: absolute;
	inset: 0;
	background: var(--border);
	border-radius: 99px;
	transition: background .15s;
	pointer-events: none;
}

.switch-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: var(--surface);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transition: transform .15s;
}

.switch input:checked + .switch-track {
	background: var(--accent);
}

.switch input:checked + .switch-track::after {
	transform: translateX(14px);
}