/*
 * Nakładka buildera na style firmware SuplaDeviceGUI (sdg.css — kopia 1:1, ładowana wcześniej).
 * Tu tylko różnice: ciemne tło wokół zielonej ramki, elementy istniejące wyłącznie w builderze.
 */

:root {
	--url-ikona-nowe: url('../img/new.png');
	--url-ikona-test: url('../img/test.png');
	--tlo-strony: #171b24;
	--zielony: #00d151;
}

/* Ciemne tło strony, zielona ramka z zawartością (jak dotąd w builderze) */
body {
	background: var(--tlo-strony);
}

#logo {
	position: relative;
	z-index: 1;
	background: none;
}

#logo path {
	fill: #fff;
	stroke: var(--tlo-strony);
}

.form {
	background: var(--zielony);
	border: solid 3px #fff;
	border-radius: 10px;
}

/* Pasek w górnych rogach ramki, po obu stronach logo: wsparcie projektu i języki */
.top-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: -60px 0 20px;
	line-height: 1.2em;
}

#paypal, .flags-and-flash-info {
	max-width: calc(50% - 80px);
}

.flags-and-flash-info {
	text-align: right;
}

/* Parametry SPI Flash — pod formularzem, drobnym drukiem */
.flash-info {
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.4;
	opacity: .9;
}

.flag-icon {
	cursor: pointer;
	margin-left: 4px;
}

.versions {
	margin: 0 0 10px;
	font-size: 13px;
}

.linki {
	display: flex;
	flex-direction: row-reverse; /* w HTML blok prawy jest pierwszy (dawne float) */
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}

/* Wiersz linków: ikona po lewej, tekst i małe przyciski */
.links-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}
.links-row .icon-inline {
	margin-right: 0;
}

/* Mały przycisk-link w stylu przycisków SDG */
a.btn-small {
	display: inline-block;
	color: white;
	background: black;
	border-radius: 6px;
	padding: 2px 10px;
	font-size: 0.8em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
a.btn-small:hover {
	background: #333;
}

/* Wiersze formularza */
.form-field {
	position: relative;
}

/* Etykieta opcji zachowuje szerokość z SDG (250 px); suwak przy prawej krawędzi (w SDG wyśrodkowany) */
.form-field.right-checkbox > label:first-child {
	flex-shrink: 0;
}
.form-field.right-checkbox > label:last-child {
	text-align: right;
}

.form-field .tasmota-link {
	margin-right: 5px;
}

.new_option:after {
	content: var(--url-ikona-nowe);
	margin-left: 8px;
	vertical-align: sub;
}

.test_option:after {
	content: var(--url-ikona-test);
	margin-left: 8px;
	vertical-align: sub;
}

/* Podpowiedź do opcji (atrybut data-title) */
label[data-title]:hover:after, a[data-title]:hover:after {
	color: black;
	font-size: 0.8rem;
	font-weight: normal;
	display: block;
	position: absolute;
	left: 4em;
	bottom: 2.5em;
	content: attr(data-title);
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 5px 6px rgba(0, 0, 0, .3);
	width: 350px;
	max-width: calc(100% - 5em);
	padding: 6px 8px;
	line-height: 1.2rem;
	z-index: 10;
}

/* Opcja niedostępna na układzie wybranej płytki (pole „soc” w builder.yaml) — powód w podpowiedzi */
.option-unsupported > label {
	opacity: 0.45;
}
.option-unsupported .slider {
	cursor: not-allowed;
}
option.option-disabled {
	font-style: italic;
}

.form-summary {
	margin: 10px 0 0;
}

iframe {
	margin: auto;
	display: block;
}

/* Okno komunikatów (wynik kompilacji, instalacja) */
.c {
	background: #ffe836;
	position: fixed;
	width: 100%;
	color: #000;
	padding: 20px 10px;
	top: 0;
	left: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	text-align: center;
	font-size: 26px;
	line-height: 1.3;
	z-index: 3;
}

.closebtn {
	margin-left: 15px;
	color: black;
	font-weight: bold;
	float: right;
	font-size: 32px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.closebtn:hover {
	color: green;
}

/* Treść z serwera (Build.php) to elementy <span> — każdy w osobnej linii, jak dawniej */
.msgBoxContent, .msgBoxContent > span, .donation-label {
	display: block;
	margin: 10px 7px 14px;
}

/* Tabela GPIO szablonu JSON (JsonBoard) — zwarta, wyśrodkowana, kolumny po maksymalnie 14 wierszy */
.msgBoxContent table.json-board {
	width: auto;
	margin: 6px auto;
	font-size: 13px;
}
.msgBoxContent table.json-board th,
.msgBoxContent table.json-board td {
	padding: 2px 6px;
	text-align: left;
	white-space: nowrap;
}
.msgBoxContent table.json-board th {
	text-align: center;
}
.msgBoxContent table.json-board td.pin {
	text-align: right;
	font-weight: bold;
	padding-left: 14px;
}
.msgBoxContent table.json-board td.pin:first-child {
	padding-left: 6px;
}

.msgBoxInstall {
	font-size: 14px;
	max-width: 700px;
	margin: 0 auto;
}

.powered-by {
	margin-top: 10px;
	text-align: right;
	font-size: 0.9em;
}

/* ESP Web Tools — przycisk instalacji w stylu przycisków SDG */
esp-web-install-button {
	display: block;
}

#sel-firmware {
	width: 100%;
}

/* Klasy narzędziowe — zgodność z CSP */
.hidden { display: none; }
.d-inline { display: inline; }
.float-left { float: left; }
.float-right { float: right; }
.text-right { text-align: right; }
.clearfix { clear: both; }
.version-tag { display: inline; font-size: 0.8em; }
.icon-inline { height: 16px; vertical-align: middle; margin-right: 6px; }
.icon-inline-right { height: 16px; vertical-align: middle; margin-left: 6px; }
.copy-icon { vertical-align: middle; margin-left: 6px; cursor: pointer; }
.link-plain { color: black; text-decoration: none; }
.link-white { color: #ffffff !important; }
.link-dark { color: #333333 !important; font-weight: 600; }
.link-black-bold { color: #000 !important; font-weight: 600; }
.donation-label { font-style: italic; font-weight: bold; font-size: 0.5em; }
.img-donation-lg { width: 150px; }
.img-donation-sm { width: 100px; }
.paypal-label { font-style: italic; font-weight: bold; }
.steps-list { text-align: left; color: black; }
.espwt-slot { display: block; font-style: normal; background-color: black; color: white; text-align: center; padding: 10px; border-radius: 10px; }
.msg-box-inner { overflow: auto; max-height: 100%; }
.ajax-loader { vertical-align: middle; height: 32px; }
.hr-slim { width: 30%; }

/* SweetAlert2 — alerty w stylu SDG */
.gg-alert-dialog .swal2-popup {
	background-color: var(--zielony);
	border-radius: 10px;
}

.gg-alert-dialog .swal2-title {
	color: #000;
	font-size: 18px;
	font-weight: bold;
}

.gg-alert-dialog .swal2-html-container {
	color: #000;
	font-size: 14px;
}

.gg-alert-dialog .swal2-confirm {
	background-color: #000;
	color: #fff;
	border-radius: 10px;
	padding: 5px 10px;
	text-transform: uppercase;
}

.gg-alert-dialog .swal2-confirm:hover {
	background-color: #333;
}

/* Wąski ekran — próg jak w SDG */
@media (max-width: 530px) {
	.content {
		padding: 20px 0;
	}
	.form {
		border: none;
		border-radius: 0;
	}
	#logo {
		height: 110px;
	}
	.top-info {
		margin-top: -40px;
	}
	#paypal, .flags-and-flash-info {
		max-width: calc(50% - 60px);
	}
	/* Opcje z suwakiem w jednym wierszu także na telefonie (w SDG kolumna) — krótsza lista */
	.form-field.right-checkbox {
		flex-direction: row;
	}
	.form-field.right-checkbox > label:first-child {
		flex: 1 1 auto;
		width: auto;
	}
	.form-field.right-checkbox > label:last-child {
		width: auto;
	}
	.grecaptcha-badge {
		position: absolute !important;
		bottom: unset !important;
	}
	label[data-title]:hover:after, a[data-title]:hover:after {
		left: 0;
		max-width: 100%;
	}
}