/*
 * NICHRAUM AUTARK MODUL
 *
 * Modul:      LED Screen 2Lead
 * Bereich:    UI Element / LED
 * Pfad:       /sys/ui/elements/led/led-screen-2lead/led-screen-2lead.css
 * Version:    1-20260726-164128
 *
 * Zweck:
 * Portalunabhängige, zweistellige LED-Anzeige mit verbindlichem
 * aktivem und inaktivem Darstellungszustand.
 *
 * Grundsätze:
 * - Das Bauteil besitzt ein vollständiges Standarddesign.
 * - Inhalt und Zustand werden von der einbindenden Anwendung gesetzt.
 * - Kontrollierte Anpassungen erfolgen ausschließlich über die
 *   freigegebenen CSS Custom Properties.
 * - Interne Struktur, Zustandslogik und Funktionsweise bleiben
 *   Bestandteil des Bauteils.
 * - Projektspezifische Fachlogik ist nicht zulässig.
 */


/* ==========================================================================
   BEREICH 1: GEMEINSAME SCHRIFT
   ========================================================================== */

@font-face {
	font-family:"DSEG7 Classic";

	src:
		url("/sys/ui/fonts/dseg7-classic-latin-300-normal.woff2")
		format("woff2"),
		url("/sys/ui/fonts/dseg7-classic-latin-300-normal.woff")
		format("woff"),
		url("/sys/ui/fonts/dseg7-classic-latin-300-normal.ttf")
		format("truetype");

	font-weight:300;
	font-style:normal;
	font-display:swap;
}


/* ==========================================================================
   BEREICH 2: STANDARDWERTE UND FREIGEGEBENE OVERRIDES
   ========================================================================== */

.ui-led-screen-2lead {
	/*
	 * Geometrie
	 */
	--ui-led-screen-width:34px;
	--ui-led-screen-height:32px;
	--ui-led-screen-padding:1px 1px 0 1px;
	--ui-led-screen-border-width:1px;
	--ui-led-screen-border-radius:4px;

	/*
	 * Typografie
	 */
	--ui-led-screen-font-family:
		"DSEG7 Classic",
		"Courier New",
		monospace;

	--ui-led-screen-font-size:15px;
	--ui-led-screen-font-weight:300;
	--ui-led-screen-letter-spacing:-1px;

	/*
	 * Inaktiver Zustand
	 */
	--ui-led-screen-inactive-border:#660000;
	--ui-led-screen-inactive-center:#330000;
	--ui-led-screen-inactive-middle:#4d0000;
	--ui-led-screen-inactive-edge:#770000;
	--ui-led-screen-inactive-color:#ff6200;

	--ui-led-screen-inactive-text-shadow:
		0 0 3px #ff3300,
		0 0 6px #800000;

	--ui-led-screen-inactive-box-shadow:
		inset 0 1px 0 rgba(255,115,65,.15),
		0 1px 0 rgba(255,255,255,.72),
		0 2px 3px rgba(0,0,0,.24);

	--ui-led-screen-inactive-reflection-top:
		rgba(255,185,135,.12);

	--ui-led-screen-inactive-reflection-middle:
		rgba(255,120,65,.035);

	/*
	 * Aktiver Zustand
	 */
	--ui-led-screen-active-border:#7d1800;
	--ui-led-screen-active-center:#3b0500;
	--ui-led-screen-active-middle:#651000;
	--ui-led-screen-active-edge:#9a2600;
	--ui-led-screen-active-color:#ffad27;

	--ui-led-screen-active-text-shadow:
		0 0 2px #ffe08a,
		0 0 4px #ff7a18,
		0 0 8px #9a1e00;

	--ui-led-screen-active-box-shadow:
		inset 0 1px 0 rgba(255,190,95,.22),
		0 1px 0 rgba(255,255,255,.68),
		0 2px 3px rgba(0,0,0,.24),
		0 0 4px rgba(255,105,12,.18);

	--ui-led-screen-active-reflection-top:
		rgba(255,215,145,.18);

	--ui-led-screen-active-reflection-middle:
		rgba(255,145,55,.05);

	--ui-led-screen-active-offset-y:1px;

	/*
	 * Deaktivierter Zustand
	 */
	--ui-led-screen-disabled-opacity:.48;
	--ui-led-screen-disabled-grayscale:.35;

	/*
	 * Ungültiger Inhalt
	 */
	--ui-led-screen-invalid-border:#4b0000;
	--ui-led-screen-invalid-color:#8f3b22;

	--ui-led-screen-invalid-text-shadow:
		0 0 2px rgba(143,59,34,.35);

	--ui-led-screen-invalid-box-shadow:
		inset 0 1px 2px rgba(0,0,0,.40),
		0 1px 0 rgba(255,255,255,.55);

	/*
	 * Übergänge
	 */
	--ui-led-screen-transition-duration:.16s;


	/* ======================================================================
	   FESTES BAUTEILGEHÄUSE
	   ====================================================================== */

	position:relative;

	display:inline-flex;
	align-items:center;
	justify-content:center;

	flex:
		0
		0
		var(--ui-led-screen-width);

	width:var(--ui-led-screen-width);
	min-width:var(--ui-led-screen-width);
	max-width:var(--ui-led-screen-width);

	height:var(--ui-led-screen-height);
	min-height:var(--ui-led-screen-height);
	max-height:var(--ui-led-screen-height);

	box-sizing:border-box;

	margin:0;
	padding:var(--ui-led-screen-padding);

	border:
		var(--ui-led-screen-border-width)
		solid
		var(--ui-led-screen-inactive-border);

	border-radius:var(--ui-led-screen-border-radius);

	background:
		radial-gradient(
			ellipse at center,
			var(--ui-led-screen-inactive-center) 0%,
			var(--ui-led-screen-inactive-center) 76%,
			var(--ui-led-screen-inactive-middle) 88%,
			var(--ui-led-screen-inactive-edge) 100%
		);

	color:var(--ui-led-screen-inactive-color);

	font-family:var(--ui-led-screen-font-family);
	font-size:var(--ui-led-screen-font-size);
	font-weight:var(--ui-led-screen-font-weight);
	font-style:normal;
	line-height:1;
	letter-spacing:var(--ui-led-screen-letter-spacing);

	text-align:center;
	vertical-align:middle;

	text-shadow:
		var(--ui-led-screen-inactive-text-shadow);

	box-shadow:
		var(--ui-led-screen-inactive-box-shadow);

	overflow:hidden;
	user-select:none;

	transition:
		background
		var(--ui-led-screen-transition-duration)
		ease,

		border-color
		var(--ui-led-screen-transition-duration)
		ease,

		color
		var(--ui-led-screen-transition-duration)
		ease,

		text-shadow
		var(--ui-led-screen-transition-duration)
		ease,

		box-shadow
		var(--ui-led-screen-transition-duration)
		ease,

		transform
		var(--ui-led-screen-transition-duration)
		ease;
}


/* ==========================================================================
   BEREICH 3: ANZEIGEINHALT
   ========================================================================== */

.ui-led-screen-2lead__value {
	position:relative;
	z-index:2;

	display:block;

	width:100%;
	max-width:100%;

	margin:0;
	padding:0;

	color:inherit;
	font:inherit;
	line-height:inherit;
	letter-spacing:inherit;
	text-align:center;
	white-space:nowrap;

	pointer-events:none;
}


/* ==========================================================================
   BEREICH 4: GLASREFLEXION
   ========================================================================== */

.ui-led-screen-2lead::after {
	content:"";

	position:absolute;
	top:1px;
	right:2px;
	left:2px;
	z-index:3;

	height:8px;

	border-radius:
		calc(
			var(--ui-led-screen-border-radius) - 1px
		)
		calc(
			var(--ui-led-screen-border-radius) - 1px
		)
		50%
		50%;

	background:
		linear-gradient(
			to bottom,
			var(--ui-led-screen-inactive-reflection-top) 0%,
			var(--ui-led-screen-inactive-reflection-middle) 65%,
			rgba(255,255,255,0) 100%
		);

	pointer-events:none;
}


/* ==========================================================================
   BEREICH 5: INAKTIVER ZUSTAND
   ========================================================================== */

.ui-led-screen-2lead[data-state="inactive"],
.ui-led-screen-2lead:not([data-state]) {
	border-color:
		var(--ui-led-screen-inactive-border);

	background:
		radial-gradient(
			ellipse at center,
			var(--ui-led-screen-inactive-center) 0%,
			var(--ui-led-screen-inactive-center) 76%,
			var(--ui-led-screen-inactive-middle) 88%,
			var(--ui-led-screen-inactive-edge) 100%
		);

	color:
		var(--ui-led-screen-inactive-color);

	text-shadow:
		var(--ui-led-screen-inactive-text-shadow);

	box-shadow:
		var(--ui-led-screen-inactive-box-shadow);

	transform:none;
}

.ui-led-screen-2lead[data-state="inactive"]::after,
.ui-led-screen-2lead:not([data-state])::after {
	background:
		linear-gradient(
			to bottom,
			var(--ui-led-screen-inactive-reflection-top) 0%,
			var(--ui-led-screen-inactive-reflection-middle) 65%,
			rgba(255,255,255,0) 100%
		);
}


/* ==========================================================================
   BEREICH 6: AKTIVER ZUSTAND
   ========================================================================== */

.ui-led-screen-2lead[data-state="active"] {
	border-color:
		var(--ui-led-screen-active-border);

	background:
		radial-gradient(
			ellipse at center,
			var(--ui-led-screen-active-center) 0%,
			var(--ui-led-screen-active-center) 72%,
			var(--ui-led-screen-active-middle) 88%,
			var(--ui-led-screen-active-edge) 100%
		);

	color:
		var(--ui-led-screen-active-color);

	text-shadow:
		var(--ui-led-screen-active-text-shadow);

	box-shadow:
		var(--ui-led-screen-active-box-shadow);

	transform:
		translateY(
			var(--ui-led-screen-active-offset-y)
		);
}

.ui-led-screen-2lead[data-state="active"]::after {
	background:
		linear-gradient(
			to bottom,
			var(--ui-led-screen-active-reflection-top) 0%,
			var(--ui-led-screen-active-reflection-middle) 65%,
			rgba(255,255,255,0) 100%
		);
}


/* ==========================================================================
   BEREICH 7: DEAKTIVIERTES BAUTEIL
   ========================================================================== */

.ui-led-screen-2lead[aria-disabled="true"],
.ui-led-screen-2lead[data-disabled="true"] {
	opacity:
		var(--ui-led-screen-disabled-opacity);

	filter:
		grayscale(
			var(--ui-led-screen-disabled-grayscale)
		);
}


/* ==========================================================================
   BEREICH 8: UNGÜLTIGER INHALT
   ========================================================================== */

.ui-led-screen-2lead[data-invalid="true"] {
	border-color:
		var(--ui-led-screen-invalid-border);

	color:
		var(--ui-led-screen-invalid-color);

	text-shadow:
		var(--ui-led-screen-invalid-text-shadow);

	box-shadow:
		var(--ui-led-screen-invalid-box-shadow);
}


/* ==========================================================================
   BEREICH 9: DRUCKDARSTELLUNG
   ========================================================================== */

@media print {
	.ui-led-screen-2lead {
		border:1px solid #555;
		background:#fff;
		color:#111;
		text-shadow:none;
		box-shadow:none;
		transform:none !important;
	}

	.ui-led-screen-2lead::after {
		display:none;
	}
}