/* Custom styles for vis.js network and Tailwind compatibility */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Dark theme network background */
#network {
	background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

/* Modern glass morphism effects */
.backdrop-blur-xl {
	backdrop-filter: blur(16px);
}

/* Custom select styling for dark theme */
select option {
	background-color: #1f2937;
	color: white;
}

/* File input styling for dark theme */
input[type="file"] {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: white;
}

input[type="file"]::-webkit-file-upload-button {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

input[type="file"]::-webkit-file-upload-button:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Animation for algorithm visualization */
.algorithm-highlight {
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* Visual feedback for edge creation */
.edge-source {
	box-shadow: 0 0 15px #f59e0b !important;
	border: 3px solid #f59e0b !important;
}

/* Status indicators */
.status-visited {
	background-color: #10b981 !important;
}

.status-current {
	background-color: #f59e0b !important;
}

.status-queue {
	background-color: #3b82f6 !important;
}

.status-stack {
	background-color: #8b5cf6 !important;
}

/* Edge dragging styles */
.dragging-edge {
	cursor: crosshair !important;
}

.dragging-edge #network {
	cursor: crosshair !important;
}

.edge-target-hover {
	border: 3px solid #ef4444 !important;
	box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
	transform: scale(1.2) !important;
	transition: all 0.2s ease !important;
}

/* Custom scrollbar for log container */
#logContainer {
	/* Ograniczenie wysokości - kontener nie będzie się zwiększać */
	max-height: 100%;
	height: 100%;
	/* Ensure stable dimensions */
	position: relative;
	/* Smooth scrolling behavior */
	scroll-behavior: smooth;
	/* Prevent content from jumping */
	overflow-anchor: none;
	/* Ensure proper flex behavior */
	min-height: 0;
	/* Maintain scroll position stability */
	overflow-x: hidden;
	overflow-y: scroll; /* Zawsze pokazuj scrollbar */
	/* Zapobieganie zwiększaniu się kontenera */
	flex-shrink: 0;
	/* Absolutne ograniczenie rozmiaru */
	contain: layout style size;
}

#logContainer::-webkit-scrollbar {
	width: 8px;
}

#logContainer::-webkit-scrollbar-track {
	background: #1f2937;
	border-radius: 4px;
}

#logContainer::-webkit-scrollbar-thumb {
	background: #4b5563;
	border-radius: 4px;
	border: 1px solid #374151;
}

#logContainer::-webkit-scrollbar-thumb:hover {
	background: #6b7280;
}

/* Prevent log entries from causing layout shifts */
.log-entry {
	flex-shrink: 0;
	min-height: fit-content;
	/* Zapobieganie rozciąganiu wpisów */
	max-width: 100%;
	word-wrap: break-word;
}

/* Stały rozmiar panelu activity log */
.col-span-3.row-span-15 {
	max-height: 100%;
	overflow: hidden;
}

/* Modal backdrop blur effect */
.modal {
	backdrop-filter: blur(8px);
}

/* Collapsible sections animation */
.collapsible-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.collapsible-content.expanded {
	max-height: 500px; /* Adjust based on content */
}

/* Chevron rotation animation */
.chevron-rotate {
	transition: transform 0.3s ease;
}

/* Smooth hover effects for section headers */
.section-header:hover {
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
}

/* Custom slider styling for dark theme */
.slider {
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.2);
	outline: none;
	border-radius: 12px;
	position: relative;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #06b6d4, #0891b2);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
	transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(6, 182, 212, 0.6);
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #06b6d4, #0891b2);
	cursor: pointer;
	border: none;
	box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
	transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(6, 182, 212, 0.6);
}

.slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.2);
	height: 8px;
	border-radius: 12px;
}