:root {
	/* Główny żółty z Elko-Bis */
	--elko-yellow: #ffdd10; 
	--elko-dark: #333333;
	--elko-gray: #f4f4f4;
	--elko-light: #ffffff;
	--elko-border: #dddddd;
	--elko-blue: #0056b3;
}

body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	overflow: hidden;
	background-color: var(--elko-gray);
	color: var(--elko-dark);
}

#ui-container {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 480px;
	max-height: 95vh;
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.98);
	padding: 25px;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	z-index: 100;
	/* Pasek górny na żółty */
	border-top: 6px solid var(--elko-yellow);
}

#ui-container::-webkit-scrollbar { width: 8px; }
#ui-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
#ui-container::-webkit-scrollbar-track { background: #f0f0f0; }

/* Nagłówek z miejscem na logo */
.header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
	border-bottom: 2px solid var(--elko-yellow);
	padding-bottom: 10px;
}

h2 {
	margin: 0;
	color: var(--elko-dark);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: 0.5px;
	padding-top: 5px;
}

/* Stylizacja Logo */
#logo-img {
	max-height: 40px;
	width: auto;
}

/* Ukryty obrazek logo służący tylko jako źródło dla Canvas/Screenshota */
#logo-source {
	display: none;
}

h3 {
	font-size: 1rem;
	margin-top: 25px;
	border-bottom: 1px solid var(--elko-border);
	padding-bottom: 5px;
	color: var(--elko-dark);
	font-weight: 500;
}

.input-group { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.input-group label { flex: 1; font-size: 0.9rem; color: #555; font-weight: 400; }

.input-group input[type="number"], .input-group select {
	width: 140px;
	padding: 8px;
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	border-radius: 2px;
	font-family: 'Roboto', sans-serif;
	transition: border-color 0.3s;
}

/* Focus na żółty */
.input-group input[type="number"]:focus, .input-group select:focus {
	border-color: #dcbf00; 
	outline: none;
	box-shadow: 0 0 3px rgba(255, 221, 16, 0.5);
}

.input-group input[type="checkbox"] { 
	width: auto; 
	margin-right: 130px; 
	transform: scale(1.3); 
	cursor: pointer;
	accent-color: var(--elko-yellow);
}

/* Styl dla sekcji pionowej */
.sub-section {
	background: #f9f9f9;
	padding: 15px;
	border-radius: 2px;
	border-left: 4px solid var(--elko-blue);
	margin-bottom: 15px;
	display: none;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.02);
}

/* Styl dla sekcji masztów - żółty */
.sub-section.mast-section {
	border-left: 4px solid var(--elko-yellow);
}

.btn-group { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

button {
	flex: 1;
	padding: 12px;
	/* Tło żółte */
	background-color: var(--elko-yellow);
	/* Tekst ciemny dla kontrastu */
	color: var(--elko-dark);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	transition: background 0.3s, transform 0.1s;
	min-width: 100px;
	text-transform: uppercase;
	font-size: 0.85rem;
}
button:hover { background-color: #e6c600; }
button:active { transform: translateY(1px); }

/* Secondary buttons - ciemne */
.btn-secondary { background-color: var(--elko-dark); color: white; }
.btn-secondary:hover { background-color: #555; }

/* Tertiary buttons - szare */
.btn-tertiary { background-color: #666; color: white; } 
.btn-tertiary:hover { background-color: #444; }

.view-controls { display: flex; gap: 10px; margin-top: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.view-btn { margin-top: 0; background-color: #e0e0e0; color: #333; font-weight: 400; }
.view-btn:hover { background-color: #d0d0d0; }
.view-btn.active { background-color: var(--elko-blue); color: white; }

#bom-table {
	width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.8rem;
}
#bom-table th, #bom-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
#bom-table th { 
	background-color: var(--elko-dark); 
	color: white; 
	font-weight: 500; 
	text-transform: uppercase;
	font-size: 0.7rem;
}
#bom-table td { background-color: #fff; color: #333; }
#bom-table td.text-left { text-align: left; }
#bom-table tr:nth-child(even) td { background-color: #f9f9f9; }

#canvas-container { width: 100vw; height: 100vh; background-color: #f4f4f4; }

.legend { margin-top: 20px; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 15px; padding-top: 10px; border-top: 1px solid #eee; }
.legend-item { display: flex; align-items: center; gap: 6px; color: #555; }
.dot { width: 12px; height: 12px; display: inline-block; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); }
.line-sample { width: 25px; height: 4px; display: inline-block; }

.alert-box {
	color: #d32f2f; font-size: 0.85rem; margin-top: 8px; display: none; font-weight: 500; background: #ffebee; padding: 5px; border-radius: 2px;
}

#disclaimer-overlay {
    position: absolute;
    bottom: 20px;
    /* Obliczamy środek wolnej przestrzeni: 
       480px (szerokość ui) + 20px (lewy margines ui) = 500px.
       Tekst zaczyna się od 500px i zajmuje resztę szerokości. */
    left: 560px;
    right: 20px;
    
    /* Flexbox wyśrodkuje tekst wewnątrz tego obszaru */
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: rgba(255, 255, 255, 0.85);
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center; /* Dodatkowe zabezpieczenie */
    color: #444;
    z-index: 50;
    pointer-events: none;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}