/**
 * NWK Traffic Tracker - front-end styles.
 *
 * Responsive split-grid card with severity color-coding. Colors are driven by
 * CSS custom properties so the card adapts to light/dark automatically and can
 * be themed by the host site.
 */

.nwk-tt {
	--nwk-tt-bg: #ffffff;
	--nwk-tt-fg: #1a1f24;
	--nwk-tt-muted: #5a6572;
	--nwk-tt-border: #e3e7ec;
	--nwk-tt-panel: #f6f8fa;
	--nwk-tt-accent: #1a73e8;

	--nwk-tt-critical: #b3261e;
	--nwk-tt-major: #d1470c;
	--nwk-tt-moderate: #b8860b;
	--nwk-tt-minor: #2166ac;

	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem 1.25rem;
	border: 1px solid var(--nwk-tt-border);
	border-radius: 14px;
	background: var(--nwk-tt-bg);
	color: var(--nwk-tt-fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.45;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.nwk-tt *,
.nwk-tt *::before,
.nwk-tt *::after {
	box-sizing: border-box;
}

.nwk-tt-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--nwk-tt-border);
}

.nwk-tt-title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--nwk-tt-fg);
}

.nwk-tt-updated {
	margin: 0;
	font-size: 0.8rem;
	color: var(--nwk-tt-muted);
}

.nwk-tt-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.7fr ) minmax( 0, 1fr );
	gap: 1.25rem;
}

.nwk-tt-panel-heading {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nwk-tt-muted);
}

/* Left panel: official DOT alerts */
.nwk-tt-alerts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.nwk-tt-alert {
	display: flex;
	gap: 0.7rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--nwk-tt-border);
	border-left: 4px solid var(--nwk-tt-minor);
	border-radius: 8px;
	background: var(--nwk-tt-panel);
}

.nwk-tt-alert--critical { border-left-color: var(--nwk-tt-critical); }
.nwk-tt-alert--major { border-left-color: var(--nwk-tt-major); }
.nwk-tt-alert--moderate { border-left-color: var(--nwk-tt-moderate); }
.nwk-tt-alert--minor { border-left-color: var(--nwk-tt-minor); }

.nwk-tt-alert-badge {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: var(--nwk-tt-minor);
}

.nwk-tt-alert--critical .nwk-tt-alert-badge { background: var(--nwk-tt-critical); }
.nwk-tt-alert--major .nwk-tt-alert-badge { background: var(--nwk-tt-major); }
.nwk-tt-alert--moderate .nwk-tt-alert-badge { background: var(--nwk-tt-moderate); }
.nwk-tt-alert--minor .nwk-tt-alert-badge { background: var(--nwk-tt-minor); }

.nwk-tt-alert-body {
	min-width: 0;
}

.nwk-tt-alert-title {
	margin: 0 0 0.15rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--nwk-tt-fg);
}

.nwk-tt-alert-type {
	font-weight: 700;
}

.nwk-tt-alert-headline {
	font-weight: 500;
	color: var(--nwk-tt-muted);
}

.nwk-tt-alert-headline::before {
	content: " \2014 ";
	color: var(--nwk-tt-muted);
}

.nwk-tt-alert-road {
	margin: 0.1rem 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--nwk-tt-accent);
}

.nwk-tt-alert-desc {
	margin: 0.1rem 0;
	font-size: 0.85rem;
	color: var(--nwk-tt-fg);
}

.nwk-tt-alert-time {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--nwk-tt-muted);
}

/* Right panel: Waze community reports */
.nwk-tt-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.nwk-tt-tag {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.5rem 0.65rem;
	border-radius: 8px;
	background: var(--nwk-tt-panel);
	border: 1px solid var(--nwk-tt-border);
}

.nwk-tt-tag-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--nwk-tt-fg);
}

.nwk-tt-tag--critical .nwk-tt-tag-label { color: var(--nwk-tt-critical); }
.nwk-tt-tag--major .nwk-tt-tag-label { color: var(--nwk-tt-major); }
.nwk-tt-tag--moderate .nwk-tt-tag-label { color: var(--nwk-tt-moderate); }

.nwk-tt-tag-road {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--nwk-tt-accent);
}

.nwk-tt-tag-desc {
	font-size: 0.76rem;
	color: var(--nwk-tt-muted);
}

/* Waze iframe fallback */
.nwk-tt-waze-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--nwk-tt-border);
}

.nwk-tt-waze-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.nwk-tt-embed-note {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--nwk-tt-muted);
}

.nwk-tt-empty {
	margin: 0;
	padding: 0.6rem 0;
	font-size: 0.85rem;
	color: var(--nwk-tt-muted);
}

.nwk-tt-credit {
	margin: 1rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--nwk-tt-border);
	font-size: 0.72rem;
	color: var(--nwk-tt-muted);
}

.nwk-tt-error {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: #fdecea;
	color: #b3261e;
	font-size: 0.9rem;
}

/* Responsive: stack to one column on small screens */
@media ( max-width: 640px ) {
	.nwk-tt-grid {
		grid-template-columns: 1fr;
	}
}

/* Dark mode: follow the visitor's device preference */
@media ( prefers-color-scheme: dark ) {
	.nwk-tt {
		--nwk-tt-bg: #1b1f24;
		--nwk-tt-fg: #ffffff;
		--nwk-tt-muted: #c3ccd6;
		--nwk-tt-border: #333b45;
		--nwk-tt-panel: #232a31;
		--nwk-tt-accent: #7db0f0;

		--nwk-tt-critical: #ff6b61;
		--nwk-tt-major: #ff9d5c;
		--nwk-tt-moderate: #e6c05a;
		--nwk-tt-minor: #7db0f0;

		box-shadow: none;
	}

	.nwk-tt-alert--critical .nwk-tt-alert-badge,
	.nwk-tt-alert--major .nwk-tt-alert-badge,
	.nwk-tt-alert--moderate .nwk-tt-alert-badge,
	.nwk-tt-alert--minor .nwk-tt-alert-badge {
		color: #14181c;
	}
}

/* Block preset styles */
.nwk-tt.is-style-compact {
	padding: 0.75rem 0.9rem;
}

.nwk-tt.is-style-compact .nwk-tt-alert {
	padding: 0.5rem 0.6rem;
}

.nwk-tt.is-style-bordered {
	border-width: 2px;
	box-shadow: none;
}