:root {
	--primary-color: #0056b3;
	--secondary-color: #008f5d;
	--accent-color: #6f42c1;
	--prot-color: #d63384;
	--bg-color: #FFF9C4;
	--container-bg: #ffffff;	
	--header-height: 60px;
	--footer-height: 70px;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--bg-color);
	color: #333;
	margin: 0;
	padding-top: calc(var(--header-height) + 20px);
	padding-bottom: calc(var(--footer-height) + 20px); 
	line-height: 1.5;
}

/* --- FIXED BARS --- */
.fixed-bar {
	position: fixed; left: 0; width: 100%; z-index: 1000;
	display: flex; align-items: center; padding: 0 20px; box-sizing: border-box;
}
.top-bar {
	top: 0; height: var(--header-height); background: #ffdd10; color: #f03523; justify-content: space-between; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.bottom-bar {
	bottom: 0; height: var(--footer-height); background: #222; border-top: 4px solid var(--primary-color); justify-content: center;
}

.app-title { font-weight: bold; font-size: 1.2rem; }
.live-results { display: flex; gap: 30px; font-family: 'Consolas', monospace; font-size: 1.1rem; color: white; }
.result-item { display: flex; flex-direction: column; align-items: center; }
.result-label { font-size: 0.75rem; color: #aaa; text-transform: uppercase; }
.result-value { font-weight: bold; color: #4cd137; }
.result-value.bad { font-weight: bold; color: #D65026; }
.result-value.inactive { color: #555; }

/* --- CONTAINER --- */
.container {
	max-width: 1000px; margin: 0 auto; background: var(--container-bg); padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 40px; color: #444; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.full-width { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }

.form-group { margin-bottom: 10px; }
label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.8rem; color: #555; }
input, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; transition: background-color 0.3s, opacity 0.3s; }
input:focus, select:focus { border-color: var(--primary-color); outline: none; }

/* --- DISABLED STATES --- */
input:disabled, select:disabled, textarea:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #dee2e6;
}

/* Dla customowych kontenerów (jak multi-select) gdy są nieaktywne */
.disabled-container {
    opacity: 0.5;
    pointer-events: none;
    background-color: #e9ecef;
}

/* --- DYNAMIC SECTIONS --- */
.dynamic-wrapper { border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 20px; border-radius: 8px; position: relative; animation: fadeIn 0.3s; }
.line-wrapper { background: #f8f9fa; border-left: 5px solid var(--secondary-color); }
.zone-wrapper { background: #fff; border-left: 5px solid var(--accent-color); border: 1px solid #dcdcdc; }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.zone-name-input { font-size: 1.1rem; font-weight: bold; color: var(--accent-color); border: none; border-bottom: 1px dashed #ccc; background: transparent; width: 300px; }
.line-name-input { font-size: 1.1rem; font-weight: bold; color: var(--secondary-color); border: none; border-bottom: 1px dashed #ccc; background: transparent; width: 300px; }

/* --- SEKCJA OCHRONY (PUNKT 6) --- */
.protection-section-wrapper {
	background: #fff0f6; border: 1px solid #fcc2d7; padding: 20px; border-radius: 6px; position: relative;
}
.protection-header { display: flex; align-items: center; margin-bottom: 20px; }
.protection-content { display: none; }

.prot-zone-card {
	background: white; border: 1px solid #eecfe0; border-radius: 6px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.prot-zone-title {
	font-weight: bold; color: var(--prot-color); border-bottom: 1px dashed #eee; padding-bottom: 5px; margin-bottom: 10px; font-size: 1rem;
}
.prot-line-row {
	display: grid; 
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px; 
    align-items: center; 
    background: #fafafa; 
    padding: 8px; 
    margin-top: 5px; 
    border-radius: 4px;
}
.prot-line-label { font-size: 0.85rem; padding-left: 10px; border-left: 3px solid var(--secondary-color); }

/* Przyciski */
.btn-remove { background: #dc3545; color: white; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.btn-add { background: var(--secondary-color); color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }
.btn-add-zone { background: var(--accent-color); }
.btn-generate { background: #f39c12; color: #fff; font-weight: bold; padding: 8px 20px; border:none; border-radius: 4px; cursor: pointer; }

.checkbox-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #fafafa; padding: 15px; border: 1px solid #eee; }
.risk-params-block { margin-top: 10px; padding: 10px; display:none; border:1px solid #eee; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .form-grid, .grid-3, .grid-4, .checkbox-group { grid-template-columns: 1fr; } }

/* Multi-select */
.multi-select-container {
	border: 1px solid #ccc; border-radius: 4px; padding: 8px; background: #fff; max-height: 100px; overflow-y: auto;
}
.multi-select-option { display: flex; align-items: center; margin-bottom: 4px; font-size: 0.85rem; }
.multi-select-option input { width: auto; margin-right: 6px; }

.top-actions {
    display: flex;
    gap: 10px;
}
.btn-action {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #f03523;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.btn-action:hover {
    background: rgba(255,255,255,0.5);
}

.scroll-box {
    border: 1px solid #d3d3d3;
    background-color: white;
    padding: 15px;
    box-sizing: border-box;
    height: 300px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar {
    width: 10px;
}
.scroll-box::-webkit-scrollbar-track {
    background: transparent; 
    margin: 5px;
}
.scroll-box::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 10px;
    border: 2px solid #f9f9f9;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}

.container .btn-action {
    background: transparent;          /* Przezroczyste tło */
    border: 1px solid #f03523;        /* Czerwona ramka (zamiast białej) */
    color: #f03523;                   /* Czerwony tekst (jak w nagłówku) */
}

.container .btn-action:hover {
    background: rgba(240, 53, 35, 0.1); /* Delikatne czerwone tło po najechaniu */
    border-color: #d62c1a;
}


/* Wszystkie style mają przedrostek "ks-calc-", 
   aby nie kolidowały z resztą strony.
*/

/* Kontener główny widgetu */
.ks-calc-container {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #ffffff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	display: inline-block; /* Żeby nie zajmował całej szerokości */
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.ks-calc-header {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1.2rem;
	color: #333;
}

.ks-calc-input-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Specyficzne style dla inputów wewnątrz naszego widgetu */
.ks-calc-container input[type="text"] {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	background-color: #e9ecef;
	color: #495057;
	width: 120px;
	text-align: right;
}

.ks-calc-btn-main {
	padding: 8px 16px;
	cursor: pointer;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	transition: background-color 0.2s;
	width: 120px;
	height: 32px;
}

.ks-calc-btn-main:hover {
	background-color: #0056b3;
}

/* --- Style Okna Modalnego (z przedrostkami) --- */

.ks-calc-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 9999; /* Wysoki index, żeby być nad wszystkim */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Reset czcionki w modalu */
}

/* Klasa aktywująca widoczność */
.ks-calc-modal-overlay.ks-calc-visible {
	opacity: 1;
	pointer-events: all;
}

.ks-calc-modal-content {
	background: white;
	padding: 25px;
	border-radius: 8px;
	width: 400px;
	max-width: 90%;
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
	text-align: left;
	box-sizing: border-box;
}

.ks-calc-modal-title {
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	font-size: 1.25rem;
	color: #222;
}

.ks-calc-form-row {
	margin-bottom: 15px;
}

.ks-calc-form-row label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 0.9rem;
	color: #444;
}

.ks-calc-form-row select, 
.ks-calc-form-row input {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.ks-calc-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 25px;
}

/* Style przycisków w modalu */
.ks-calc-btn {
	padding: 8px 20px;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	color: white;
	transition: opacity 0.2s;
}

.ks-calc-btn:hover {
	opacity: 0.9;
}

.ks-calc-btn-cancel {
	background-color: #6c757d;
}

.ks-calc-btn-ok {
	background-color: #28a745;
}