/* Shared UI chrome for both the main configurator and the door-communication
   sub-configurator: full-screen canvas + floating panels, accordions/tiles,
   form basics, buttons, context menu. App-specific SVG content styling
   (module/locator colors etc.) stays in each app's own stylesheet. */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	font-family: system-ui, sans-serif;
	color: #1a1a1a;
	background: #e5e7ea;
}

h1 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

h3 {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
	margin: 1.1rem 0 0.6rem 0;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
}
h3:first-of-type {
	margin-top: 0;
}

/* A panel's title acts as its collapse toggle: click it to hide everything
   else in that .tcs-floating box, leaving just the header bar. Used to keep
   the canvas reachable on narrow screens (see the max-width media query
   below), but works as a manual toggle at any width. */
.tcs-panel-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	cursor: pointer;
}
.tcs-panel-header::after {
	content: '▾';
	font-size: 0.7rem;
	color: #999;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.tcs-floating.collapsed .tcs-panel-header::after {
	transform: rotate(-90deg);
}
.tcs-floating.collapsed > *:not(.tcs-panel-header):not(.tcs-back-link) {
	display: none !important;
}
.tcs-floating.collapsed h3.tcs-panel-header {
	border-bottom: none;
	margin-bottom: 0;
}

.tcs-back-link {
	display: inline-block;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	color: #555;
	text-decoration: none;
}
.tcs-back-link:hover {
	color: #111;
	text-decoration: underline;
}

/* The work surface fills the whole viewport; the palette and inspector are
   floating panels on top of it (like a design-tool canvas), not grid columns
   squeezing its size down. */
.tcs-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: #ffffff;
	touch-action: none;
}

.tcs-floating {
	background: white;
	border: 1px solid #ddd;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	padding: 1.1rem;
	overflow: hidden;
}

.tcs-floating-left {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 280px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	z-index: 10;
	/* reserves the scrollbar's width even while it isn't needed yet, so
	   content doesn't reflow/rewrap the moment an accordion grows tall
	   enough to trigger one */
	scrollbar-gutter: stable;
}

/* Right side is a stack of independent boxes (e.g. module inspector, then an
   always-visible actions box below it) rather than one fixed panel, so a
   lower box moves up cleanly when the one above it is hidden. */
.tcs-right-stack {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	z-index: 10;
}

.tcs-palette-area {
	display: flex;
	flex-direction: column;
}

/* Below this width the two fixed-width side panels would overlap each
   other (and most of the canvas). Instead of floating side by side, they
   become full-width bars stacked top (config) and bottom (inspector/
   summary), both collapsed to just their header by default via
   wirePanelCollapse() — tap a header to expand it over the canvas. */
@media (max-width: 700px) {
	.tcs-floating-left {
		left: 1rem;
		right: 1rem;
		width: auto;
		max-height: 70vh;
	}

	.tcs-right-stack {
		left: 1rem;
		right: 1rem;
		top: auto;
		bottom: 1rem;
		width: auto;
	}
}

.tcs-accordion {
	border-bottom: 1px solid #e5e5e5;
}
.tcs-accordion:first-child {
	border-top: 1px solid #e5e5e5;
}

.tcs-accordion-header {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.6rem 0.1rem;
	cursor: pointer;
	font-size: 0.95rem;
}
.tcs-accordion-header:hover {
	background: #fafafa;
}
.tcs-accordion-subtitle {
	color: #888;
	font-size: 0.8rem;
}

.tcs-accordion-content {
	padding: 0 0.1rem 0.75rem 0.1rem;
}
.tcs-accordion.collapsed .tcs-accordion-content {
	display: none;
}

.tcs-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 0.5rem;
}

.tcs-tile {
	border: 1px solid #ddd;
	padding: 0.4rem;
	text-align: center;
	cursor: pointer;
	min-width: 0;
}
.tcs-tile:hover {
	border-color: #999;
}
.tcs-tile.active {
	border-color: #111;
	border-width: 2px;
	padding: calc(0.4rem - 1px);
}
.tcs-tile img {
	width: 100%;
	height: 44px;
	object-fit: contain;
	display: block;
}
.tcs-tile-caption {
	font-size: 0.68rem;
	color: #555;
	margin-top: 0.3rem;
	line-height: 1.2;
}

.tcs-single-variant-link {
	display: inline-block;
	color: #1a1a1a;
	text-decoration: underline;
	font-size: 0.9rem;
}
.tcs-single-variant-link:hover {
	color: #555;
}

.tcs-dimension-row {
	display: flex;
	gap: 0.5rem;
}
.tcs-dimension-row input {
	flex: 1;
	min-width: 0;
}

label {
	display: block;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

input, select {
	width: 100%;
	padding: 0.4rem;
	margin-top: 0.15rem;
	border: 1px solid #ccc;
	font-size: 0.9rem;
	background: white;
	color: #1a1a1a;
}

a.tcs-action {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.5rem 1rem;
	background: #111;
	color: white;
	text-decoration: none;
	font-size: 0.85rem;
}
a.tcs-action:hover {
	background: #333;
}
a.tcs-action.tcs-action-secondary {
	background: white;
	color: #111;
	border: 1px solid #111;
}
a.tcs-action.tcs-action-secondary:hover {
	background: #f0f0f0;
}

.tcs-hint {
	font-size: 0.8rem;
	color: #999;
	margin-top: 0.75rem;
}

#tcs-inspector-panel p {
	margin: 0.3rem 0;
	font-size: 0.9rem;
}
#tcs-inspector-module-type {
	font-weight: 600;
}

.tcs-context-menu {
	position: fixed;
	z-index: 1000;
	background: white;
	border: 1px solid #ccc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	min-width: 120px;
}
.tcs-context-menu a {
	display: block;
	padding: 0.5rem 0.9rem;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.9rem;
}
.tcs-context-menu a:hover {
	background: #f4f4f4;
}
/* Only "Löschen" is destructive — the Rückwand actions stay neutral so
   they don't read as a warning. */
.tcs-context-menu #tcs-context-delete {
	color: #c0392b;
}

/* Engraved/applied module content (Hausnummer, Straßenname, Vektorgrafik,
   Grafikfolie — see js/shared/engraving.js) shared by both the main
   configurator and the ENY sub-configurator. */
#tcs-inspector-content label:first-child {
	margin-top: 0.75rem;
}
#tcs-inspector-content input[type="file"] {
	padding: 0.3rem;
}
.tcs-content-remove {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #c0392b;
	text-decoration: underline;
}
.tcs-content-remove:hover {
	color: #8e2c1f;
}

.tcs-engrave-text {
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	user-select: none;
}
/* Durchgangsgravur: letters cut fully through the panel — rendered light,
   as if daylight/backlight were showing through the cut. */
.tcs-engrave-durchgang {
	fill: #f2f2f2;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
/* Ausgelegte Gravur: engraved and filled with a contrasting (typically
   black) resin inlay — solid fill, no glow. */
.tcs-engrave-ausgelegt {
	fill: #111111;
}
/* Hinterleuchtete Gravur: illuminated from behind — white fill plus a white
   glow halo (not a warm/yellow one). */
.tcs-engrave-hinterleuchtet {
	fill: #ffffff;
	filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
}
/* Day and Night Glas: solid black by day like Ausgelegte Gravur, but has its
   own backlight that switches on at night (see the tcs-night-active rule
   below), unlike Ausgelegte Gravur which stays plain black around the clock. */
.tcs-engrave-day-night-glas {
	fill: #111111;
}

.tcs-engrave-graphic {
	pointer-events: none;
}
.tcs-engrave-graphic.tcs-engrave-durchgang {
	filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
.tcs-engrave-graphic.tcs-engrave-ausgelegt {
	filter: brightness(0);
}
.tcs-engrave-graphic.tcs-engrave-hinterleuchtet {
	filter: brightness(0) invert(1) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
}
.tcs-engrave-graphic.tcs-engrave-day-night-glas {
	filter: brightness(0);
}

.tcs-foil-graphic {
	pointer-events: none;
}

/* Nacht-Ansicht (see tcs-night-toggle in both apps): dims the visible
   material so the backlit/through engraving styles' glow reads clearly by
   contrast, same idea as dimming a room to see a lit sign. Drawn ON TOP of
   the material but BELOW any module content, so it darkens only the bare
   surface — never the engraved text/graphics drawn after it. pointer-events
   is off so clicks still reach whatever's underneath (the module rect). */
.tcs-night-overlay {
	fill: #04060a;
	fill-opacity: 0.72;
	pointer-events: none;
}
/* Boosted while night mode is active (see the tcs-night-active class toggled
   on <body>) — but ONLY hinterleuchtete Gravur, since it has its own light
   source behind it. */
body.tcs-night-active .tcs-engrave-hinterleuchtet {
	filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-hinterleuchtet {
	filter: brightness(0) invert(1) drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
/* Day and Night Glas switches on the same backlight as Hinterleuchtete
   Gravur once night falls, instead of just staying black like Ausgelegte
   Gravur does (see body.tcs-night-active .tcs-engrave-durchgang below). */
body.tcs-night-active .tcs-engrave-day-night-glas {
	fill: #ffffff;
	filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-day-night-glas {
	filter: brightness(0) invert(1) drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
/* Durchgangsgravur has no light source of its own — at night, with nothing
   shining through it, it must go DARKER than its daylight look, not stay at
   the same brightness (which would read as lit by contrast with the dimmed
   material around it). Overrides the daylight drop-shadow entirely instead
   of stacking onto it. */
body.tcs-night-active .tcs-engrave-durchgang {
	fill: #2a2a2a;
	filter: none;
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-durchgang {
	filter: brightness(0.12);
}
/* Plain product photos (button/nameplate faces, module front plates) have no
   light source either — dim them at night the same way the bare material
   already is, so they don't sit at full brightness against a dark station
   and read as illuminated when they aren't. */
body.tcs-night-active .tcs-eny-preview-image,
body.tcs-night-active .tcs-module-icon {
	filter: brightness(0.35);
}

/* Tag/Nacht toggle badge drawn on the canvas next to the station (see
   js/shared/engraving.js's appendNightToggle) — small and quiet by design,
   not a UI chrome element. */
.tcs-night-toggle {
	cursor: pointer;
}
.tcs-night-toggle-hit {
	fill: transparent;
}
.tcs-night-toggle-body {
	fill: #ffd54f;
	stroke: #e0a800;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-night-toggle.night .tcs-night-toggle-body {
	fill: #2b3a55;
	stroke: #1a2438;
}
.tcs-night-toggle:hover .tcs-night-toggle-body {
	stroke-width: 2;
}
.tcs-night-toggle-rays line {
	stroke: #ffd54f;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.85;
}
.tcs-night-toggle-crescent {
	fill: #ffffff;
}

/* Rückwand-Overlay Sichtbarkeits-Toggle (see js/shared/engraving.js's
   appendBackWallToggle) — same on-canvas badge pattern as the Tag/Nacht
   toggle. Off (grey) by default; blue/active once toggled on, matching the
   overlay's own .tcs-backwall accent color in css/style.css. */
.tcs-backwall-toggle {
	cursor: pointer;
}
.tcs-backwall-toggle-hit {
	fill: transparent;
}
.tcs-backwall-toggle-body {
	fill: #e8ecf5;
	stroke: #aab4c8;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-backwall-toggle:hover .tcs-backwall-toggle-body {
	stroke-width: 2;
}
.tcs-backwall-toggle-icon rect {
	fill: #aab4c8;
}
.tcs-backwall-toggle.active .tcs-backwall-toggle-body {
	fill: #2f6fed;
	stroke: #1d4fb8;
}
.tcs-backwall-toggle.active .tcs-backwall-toggle-icon rect {
	fill: #ffffff;
}

/* Rückwand-Schraubenmodus-Toggle (see js/shared/engraving.js's
   appendScrewModeToggle) — same on-canvas badge pattern again; active (red,
   matching .tcs-backwall-screw's marker color) means "alle Schrauben". */
.tcs-screwmode-toggle {
	cursor: pointer;
}
.tcs-screwmode-toggle-hit {
	fill: transparent;
}
.tcs-screwmode-toggle-body {
	fill: #e8ecf5;
	stroke: #aab4c8;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-screwmode-toggle:hover .tcs-screwmode-toggle-body {
	stroke-width: 2;
}
.tcs-screwmode-toggle-icon circle {
	fill: #aab4c8;
}
.tcs-screwmode-toggle.active .tcs-screwmode-toggle-body {
	fill: #d4351c;
	stroke: #a32913;
}
.tcs-screwmode-toggle.active .tcs-screwmode-toggle-icon circle {
	fill: #ffffff;
}

/* Architectural-style dimension lines (see js/shared/dimension.js) — thin,
   neutral, and clearly secondary to the station drawing itself. */
.tcs-dim-line,
.tcs-dim-tick,
.tcs-station-dim-line,
.tcs-station-dim-tick,
.tcs-camera-dim-line,
.tcs-camera-dim-tick {
	stroke: #888;
	stroke-width: 1;
	pointer-events: none;
}
.tcs-dim-label,
.tcs-station-dim-label,
.tcs-camera-dim-label {
	font-size: 11px;
	fill: #666;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	user-select: none;
}