.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background: #fff; }
.dataset { margin: 10px 0; padding: 15px; border: 1px solid #adadad; border-radius: 5px; background: #fafafa; }
.zone-item { margin: 5px 0; padding: 8px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer; }
.zone-item:hover { background-color: #f0f8ff; }
.zone-item.selected { background-color: #e3f2fd; border-color: #2196f3; }
.checkbox { margin-right: 10px; transform: scale(1.2); }
textarea { width: 100%; height: 200px; font-family: monospace; padding: 10px; border: 1px solid #ccc; border-radius: 5px; resize: vertical; }
.status { color: #28a745; margin: 10px 0; padding: 10px; background: #d4edda; border-radius: 5px; }
.error { color: #dc3545; background: #f8d7da; }
.warning { color: #856404; background: #fff3cd; }
.json-input { height: 150px; font-family: 'Courier New', monospace; }
h4 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 5px; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.dataset-info { margin-top: 8px; font-size: 12px; color: #666; }
.info-item { margin: 2px 0; }
.active-true { color: #28a745; font-weight: bold; }
.active-false { color: #dc3545; }
.schedule-info { background: #e9ecef; padding: 4px 8px; border-radius: 3px; margin-top: 5px; }
.format-buttons { display: flex; gap: 5px; margin: 10px 0; }
.format-buttons button { flex: 1; }
.imgs {text-align: center;}
.imgs img {border: 1px solid #ccc;max-width: 350px;display: inline;width:100%}

/* Контейнер для карты */
#map { width: 100%; height: 400px; margin: 15px 0; border-radius: 5px; border: 1px solid #ddd; }
.map-controls { display: flex; gap: 10px; margin: 10px 0; }

/* Модальные окна */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.modal {
	background: white;
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	max-width: 500px;
	width: 90%;
	text-align: center;
}
.modal h3 {
	margin: 0 0 15px 0;
	color: #dc3545;
}
.modal p {
	margin: 0 0 20px 0;
	line-height: 1.5;
}
.modal-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
}
.modal-buttons button {
	min-width: 100px;
}

/* Анимации */
.fade-in {
	animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Индикатор сохранения */
.save-indicator {
	position: fixed;
	top: 10px;
	right: 10px;
	padding: 8px 12px;
	background: #28a745;
	color: white;
	border-radius: 20px;
	font-size: 12px;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1001;
}
.save-indicator.show {
	opacity: 1;
}

/* Адаптивная верстка */
@media (max-width: 768px) {
	.container { padding: 10px; }
	.action-buttons { flex-direction: column; }
	#map { height: 300px; }
	.format-buttons { flex-direction: column; }
}
/* Стили для кастомного балуна с фиксированным заголовком */
.ymaps-balloon__content {
    padding: 0 !important;
    max-height: 300px !important;
    overflow: hidden !important;
}

.balloon-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #007bff;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.balloon-content {
    padding: 5px;
    max-height: 230px;
    overflow-y: auto;
    font-size: 14px;
    color: #555;
}

.balloon-content::-webkit-scrollbar {
    width: 6px;
}

.balloon-content::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.balloon-content::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.balloon-content::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

.balloon-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 5px;
    border-top: 1px solid #e9ecef;
    text-align: center;
    z-index: 100;
}

/* Убираем стандартные отступы балуна */
.ymaps-balloon_layout_normal .ymaps-balloon__content {
    padding: 0 !important;
}

/* Улучшаем внешний вид балуна */
.ymaps-balloon {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.ymaps-balloon__tail {
    display: none !important;
}

.ymaps-balloon__close-button {
    top: 10px !important;
    right: 10px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
}

/* Стили для кнопки в балуне */
/*
.balloon-footer button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    transition: background-color 0.2s ease;
}

.balloon-footer button:hover {
    opacity: 0.9;
}
*/
/* Стили для выбранного состояния */
.zone-item.selected {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.zone-item {
    transition: background-color 0.2s ease;
}
/* Стили для трека и маркера местоположения */
.track-polyline {
    stroke: #FF0000;
    stroke-width: 4;
    stroke-opacity: 0.8;
}

.user-marker {
    background: #4285F4;
    border: 2px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.user-accuracy {
    fill: #4285F4;
    fill-opacity: 0.2;
    stroke: #4285F4;
    stroke-width: 1;
    stroke-opacity: 0.4;
}