: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: 180px;
	height: 32px;
}

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

.geom-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: 180px;
	height: 32px;
}

.geom-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;
}


/* --- STYLIZACJA ca-calc- --- */
        
.ca-calc-container {
	background: #ffffff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	display: inline-block;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

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

.ca-calc-input-group { display: flex; align-items: center; gap: 10px; }
.ca-calc-container input[type="text"] {
	padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
	background-color: #e9ecef; color: #495057; width: 150px; text-align: right; font-weight: bold;
	cursor: not-allowed;
}

.ca-calc-btn-main {
	padding: 8px 16px; cursor: pointer; background-color: #007bff; color: white;
	border: none; border-radius: 4px; font-size: 1rem; transition: background 0.2s;
}
.ca-calc-btn-main:hover { background-color: #0056b3; }

/* --- MODAL --- */
.ca-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: 10000;
}
.ca-calc-modal-overlay.ca-calc-visible { opacity: 1; pointer-events: all; }

.ca-calc-modal-content {
	background: white; padding: 20px; border-radius: 8px; width: 1000px; max-width: 95%; height: 90vh;
	display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.3); box-sizing: border-box;
}

.ca-calc-top-bar {
	display: flex; justify-content: space-between; align-items: center;
	border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
}
.ca-calc-modal-title { margin: 0; font-size: 1.25rem; color: #222; }

.ca-calc-view-switch { display: flex; gap: 5px; background: #f1f3f5; padding: 3px; border-radius: 4px; }
.ca-calc-view-btn {
	border: none; background: transparent; padding: 5px 15px; cursor: pointer;
	border-radius: 3px; font-weight: bold; color: #666; font-size: 0.9rem;
}
.ca-calc-view-btn.active { background: white; color: #007bff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.ca-calc-editor-layout { display: flex; flex: 1; gap: 20px; overflow: hidden; }

.ca-calc-col-left { flex: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.ca-calc-viewport-container {
	flex: 1; border: 1px solid #ccc; background: #fafafa; position: relative;
	border-radius: 4px; overflow: hidden;
}

canvas#caPreviewCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
canvas#caPreviewCanvas:active { cursor: grabbing; }

#caView3D { width: 100%; height: 100%; display: none; } 

.ca-calc-obj-list {
	height: 180px; overflow-y: auto; border: 1px solid #eee; border-radius: 4px;
	padding: 5px; background: #fff;
}
.ca-calc-obj-item {
	display: flex; justify-content: space-between; align-items: center; padding: 8px 10px;
	border-bottom: 1px solid #f0f0f0; font-size: 0.9rem;
}
.ca-calc-obj-item.ca-calc-editing { background-color: #e8f0fe; border-left: 4px solid #007bff; }
.ca-calc-item-actions { display: flex; gap: 5px; }
.ca-calc-btn-sm { border: none; border-radius: 3px; padding: 4px 8px; cursor: pointer; font-size: 0.8rem; color: white; }
.ca-calc-btn-edit { background: #ffc107; color: #212529; }
.ca-calc-btn-del { background: #dc3545; }
/* Styl dla zablokowanego przycisku usuwania */
.ca-calc-btn-del:disabled { background: #e9ecef; color: #adb5bd; cursor: not-allowed; }

.ca-calc-col-right {
	flex: 1; background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef;
	display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
}
.ca-calc-form-header { font-weight: bold; margin-bottom: 10px; color: #495057; border-bottom: 2px solid #ddd; padding-bottom: 5px; }
.ca-calc-form-group label { display: block; font-size: 0.85rem; margin-bottom: 2px; font-weight: bold; color: #555; }
.ca-calc-form-group input, .ca-calc-form-group select {
	width: 100%; padding: 6px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;
}
.ca-calc-form-actions { margin-top: 15px; display: flex; flex-direction: column; gap: 5px; }
.ca-calc-btn-action { color: white; border: none; padding: 10px; width: 100%; border-radius: 4px; cursor: pointer; font-weight: bold; }
.ca-calc-btn-add { background-color: #28a745; }
.ca-calc-btn-save { background-color: #007bff; }
.ca-calc-btn-cancel-edit { background-color: transparent; color: #6c757d; border: 1px solid #ced4da; margin-top: 5px; }

.ca-calc-modal-footer {
	margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px;
}
.ca-calc-btn { padding: 8px 20px; cursor: pointer; border: none; border-radius: 4px; font-size: 1rem; color: white; }
.ca-calc-btn-cancel { background-color: #6c757d; }
.ca-calc-btn-ok { background-color: #007bff; }
.ca-calc-hidden { display: none !important; }

.ca-calc-overlay-info {
	position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,0.8);
	padding: 5px 10px; border-radius: 4px; font-size: 0.75rem; color: #555; pointer-events: none;
	z-index: 10;
}

/* Style dla edytora sekcji */
.section-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}
.section-item-header {
    grid-column: 1 / -1;
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
    display:flex;
    justify-content: space-between;
}


/*
  Tabela
*/
table.cv-table {
  border: 1px solid #1C6EA4;
  background-color: #E2E2E2;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.cv-table td, table.cv-table th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.cv-table tbody td {
  font-size: 13px;
}
table.cv-table td:nth-child(even) {
  background: #E9F59E;
}
table.cv-table thead {
  background: #A48238;
  background: -moz-linear-gradient(top, #bba16a 0%, #ad8e4c 66%, #A48238 100%);
  background: -webkit-linear-gradient(top, #bba16a 0%, #ad8e4c 66%, #A48238 100%);
  background: linear-gradient(to bottom, #bba16a 0%, #ad8e4c 66%, #A48238 100%);
  border-bottom: 2px solid #444444;
}
table.cv-table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #F5F34F;
}
table.cv-table thead th:first-child {
  border-left: none;
}

table.cv-table tfoot td {
  font-size: 14px;
}
table.cv-table tfoot .links {
  text-align: right;
}
table.cv-table tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}