/* --- Глобальные переменные и сброс стилей --- */
:root {
    --bg-color: #f4f7fa;
    --sidebar-bg: #ffffff;
    --panel-bg-1: #ffffff;
    --panel-bg-2: #fafbfc;
    --panel-bg-3: #f5f8fa;
    --panel-bg-4: #edf2f7;
    --text-color: #2d3748;
    --text-color-light: #718096;
    --border-color: #e2e8f0;
    --primary-color: #4299e1;
    --primary-color-hover: #2b6cb0;
    --danger-color: #e53e3e;
    --danger-color-hover: #c53030;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --border-radius: 8px;
    --header-height: 65px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow-y: auto;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
}

/* --- Основная структура --- */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Используем height вместо min-height */
}

.app-header {
    background-color: var(--sidebar-bg);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    height: auto;
    flex-shrink: 0;
	margin: 20px;
    border-radius: 8px;
}

.header-content {
    width: auto; /* Ограничиваем ширину текста для читаемости */
    padding: 1rem 0;
}
.header-content p {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-color-light);
}
.header-content ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    list-style: disc;
}
.header-content li {
    margin-bottom: 0.25rem;
}

h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.main-content {
    display: flex;
    flex-direction: column; /* Теперь это вертикальный контейнер */
    gap: 1.5rem;
    padding: 1.5rem;
}

.sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    padding-right: 8px;
}

/* ИЗМЕНЕНИЕ: Теперь вся правая колонка имеет прокрутку */
.canvas-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow-y: hidden; /* <--- ЗАМЕНИТЬ 'auto' НА 'hidden' */
    padding-right: 8px;
}

/* --- Стили панелей в сайдбаре --- */
.panel {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: visible; 
    flex-shrink: 0;
    position: relative; 
}
.panel-title { 
    font-size: 1rem; 
    font-weight: 600; 
    margin: 0; 
    padding: 0.75rem 1rem; 
    border-bottom: 1px solid var(--border-color); 
    background-color: rgba(0,0,0,0.02);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.panel-content { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.panel-add    { background-color: var(--panel-bg-1); }
.panel-edit   { background-color: var(--panel-bg-2); }
.panel-tools  { background-color: var(--panel-bg-3); }
.panel-export { background-color: var(--panel-bg-4); }
#selectedShapeInfo { font-weight: 500; padding: 0.5rem; background-color: #e2e8f0; border-radius: 4px; text-align: center; }

/* --- Элементы форм --- */
label { font-weight: 500; color: var(--text-color-light); margin-bottom: -0.25rem; }
input[type="number"], input[type="text"], select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; background-color: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3); }
.coordinates-group { display: flex; gap: 0.5rem; }
.coordinates-group > div { flex: 1; }
.checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-wrapper input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.checkbox-wrapper label { font-weight: 400; color: var(--text-color); }
#edit-controls-container { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.rotation-control { margin-top: 0.5rem; }
.rotation-inputs { display: flex; align-items: center; gap: 0.75rem; }
#rotationInput { flex-grow: 1; }
#rotationValue { font-weight: 500; background-color: #e2e8f0; padding: 0.25rem 0.5rem; border-radius: 4px; min-width: 45px; text-align: center; font-size: 0.875rem; }
#manualRotationInput { width: 70px; flex-shrink: 0; text-align: right; }

/* --- Кнопки (с последними изменениями) --- */
.btn { display: inline-block; padding: 0.6rem 1rem; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; transition: all 0.2s; }
.btn-primary { background-color: var(--primary-color); color: #fff; }
.btn-primary:hover { background-color: var(--primary-color-hover); }
.btn-action { background-color: #2d3748; color: #fff; font-size: 1rem; padding: 0.75rem 1.5rem; }
.btn-action:hover { background-color: #1a202c; }
.btn-danger { background-color: #f15e5e; color: #fff; }
.btn-danger:hover { background-color: var(--danger-color-hover); }
.panel-actions { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.btn-full-width { width: 100%; }
.btn-secondary { background-color: var(--text-color-light); color: #fff; }
.btn-secondary:hover { background-color: var(--text-color); }
.btn-outline { background-color: transparent; border-color: var(--border-color); color: var(--text-color-light); }
.btn-outline:hover { background-color: var(--bg-color); color: var(--text-color); border-color: #cbd5e0; }
.panel-actions .button-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
h1 { text-align: center; font-size: 1.8em; margin-bottom: 1em;}
h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.3em;}
h3 { font-size: 1.3em; } h4 { font-size: 1.1em; } p { margin-bottom: 0.8em; }

/* --- Холст (НОВЫЕ СТИЛИ ДЛЯ СТАБИЛЬНОЙ ВЫСОТЫ) --- */
.canvas-wrapper {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ИЗМЕНЕНИЕ: Заставляем его расти, а не задаем жесткую высоту */
    flex-grow: 1;
    min-height: 0; /* Важное свойство для flex-элементов */
}
canvas { display: block; width: 100%; height: 100%; }
#coordinateIndicator { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.9); padding: 4px 8px; border-radius: 4px; font-size: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.canvas-actions { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; }
.canvas-actions button { width: 36px; height: 36px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background-color 0.2s; }
.canvas-actions button:hover { background-color: #fff; }
.main-actions { margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; flex-shrink: 0; }

/* --- Секция с результатами (НОВЫЕ СТИЛИ БЕЗ СКРОЛЛА) --- */
.results-section {
    margin-top: 0; /* <--- ЗАМЕНИТЬ '1.5rem' НА '0' */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: visible; 
    flex-shrink: 0;
    padding-right: 0;
}
.result-panel { background-color: #fff; padding: 1.5rem; border-radius: var(--border-radius); border: 1px solid #ccc; margin: 5px; }
#detailedViewControls h4 { margin-top: 0; }
.view-controls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.scale-controls { display: flex; align-items: center; gap: 0.5rem; }
.scale-controls label { margin: 0; }
.scale-controls input { width: 80px; }
#detailedPlotContainer { text-align: center; background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1rem; margin: 5px;}
#detailedPlotContainer canvas {
    display: block;          /* 1. Делаем холст блочным элементом */
    margin-left: auto;       /* 2. Автоматический отступ слева */
    margin-right: auto;      /* 3. Автоматический отступ справа */
    max-width: 100%;         /* 4. Не даем вылезти за пределы контейнера */
    height: auto;
    border: none;
}

/* --- Модальное окно --- */
.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; }
.modal-content { background-color: #fefefe; padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow-md); width: 90%; max-width: 500px; position: relative; animation: fadeIn 0.3s; }
.modal-content h2 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1rem; }
.modal-close { color: #aaa; position: absolute; top: 1rem; right: 1rem; font-size: 28px; font-weight: bold; cursor: pointer; }
.modal-close:hover { color: black; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.centroid-result p { margin: 0.5rem 0; }

/* --- Утилиты и стильный скроллбар --- */
.error-message { color: var(--danger-color); font-size: 0.875rem; background-color: #fef2f2; padding: 0.75rem; border-radius: 6px; border: 1px solid #fecaca; }
.error-message:empty { display: none; }
.custom-unit-fields { display: none; }
#unitSelect:has(option[value="custom"]:checked) + .custom-unit-fields { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.sidebar, .canvas-section {
    scrollbar-width: thin;
    scrollbar-color: #a0aec0 var(--bg-color);
}
.sidebar::-webkit-scrollbar, .canvas-section::-webkit-scrollbar {
    width: 8px;
}
.sidebar::-webkit-scrollbar-track, .canvas-section::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb, .canvas-section::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border-radius: 10px;
    border: 2px solid var(--bg-color);
}
.sidebar::-webkit-scrollbar-thumb:hover, .canvas-section::-webkit-scrollbar-thumb:hover {
    background-color: #718096;
}

.field-error {
    color: var(--danger-color);
    font-size: 0.875rem; /* Чуть меньше основного текста */
    padding-top: 4px;    /* Небольшой отступ сверху */
    min-height: 1.2em;   /* Резервируем место, чтобы верстка не "прыгала" */
}

/* Правило, которое скрывает блок, если в нем нет текста */
.field-error:empty {
    display: none;
}

.edit-checkbox {
    margin-top: 1rem;      /* Отступ сверху */
    margin-bottom: 0.5rem; /* Отступ снизу (перед кнопкой "Применить") */
}

/* --- Стили для заблокированной кнопки расчета --- */
#computeCentroidBtn:disabled,
#computeCentroidBtn:disabled:hover {
    background-color: var(--text-color-light);
    cursor: not-allowed;
    opacity: 0.7;
    /* Убираем любые эффекты тени или transform при наведении на заблокированную кнопку */
    box-shadow: none;
    transform: none;
}

/* --- Стили для нового кастомного селекта --- */
.custom-select-wrapper {
    position: relative;
    cursor: pointer;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none; /* Запрещаем выделение текста */
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
}

.custom-select-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.custom-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    transition: background-color 0.2s;
}

.custom-select-option:hover {
    background-color: var(--bg-color);
}

.custom-select-option.selected {
    background-color: #e2e8f0;
    font-weight: 500;
}
.editor-area {
    display: flex;
    gap: 1.5rem;
    /* Задаем высоту как часть видимой области экрана, например 65%. 
       Это и есть ограничение по высоте. */
    height: 100vh; 
    min-height: 450px; /* Минимальная высота, чтобы редактор не схлопывался */
    flex-shrink: 0;
}

/* --- Стили для кнопки "Быстрый ответ" --- */
#quickAnswerBtn {
    /* 1. Основной стиль контурной кнопки */
    background-color: transparent;
    border: 2px solid var(--primary-color); /* Рамка в основном цвете */
    color: var(--primary-color); /* Текст в основном цвете */
    padding: 0.75rem 1.5rem; /* Делаем ее того же размера, что и основная кнопка */
    transition: all 0.2s ease-in-out; /* Плавный переход */
}

/* 2. Эффект при наведении курсора */
#quickAnswerBtn:hover {
    background-color: var(--primary-color); /* Заливка цветом при наведении */
    color: #fff; /* Белый текст */
    transform: translateY(-2px); /* Небольшой "подъем" кнопки */
    box-shadow: var(--shadow-md); /* Добавляем тень для объема */
}

/* 3. Добавляем иконку-молнию для привлечения внимания */
#quickAnswerBtn::before {
    content: '⚡'; /* Иконка молнии */
    margin-right: 0.5rem; /* Отступ от текста */
    font-weight: bold;
}

/* --- Стили для панели экспорта --- */
.export-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

.export-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Расстояние между элементами внутри группы */
}

.export-group strong {
    font-weight: 600;
    font-size: 1rem;
}

.export-group small {
    color: var(--text-color-light);
    margin-top: -0.25rem; /* Придвигаем текст ближе к заголовку */
    margin-bottom: 0.25rem;
}

/* --- Адаптивность --- */
@media (max-width: 1200px) {
    html, body { overflow: auto; }
    .app-container { height: auto; }
    .main-content { overflow: visible; } /* Возвращаем видимость для мобильных */

    /* Новый блок для управления editor-area на мобильных */
    .editor-area {
        flex-direction: column;
        height: auto;
    }

    .sidebar { 
        width: 100%; 
        height: auto; 
        overflow-y: visible; 
        padding-right: 0; 
        flex-direction: row; 
        flex-wrap: wrap;
    }
    .panel { flex: 1 1 300px; }
    .canvas-section { 
        height: auto; 
        overflow: visible; 
        padding-right: 0; 
        /* Задаем высоту холста для мобильных */
        min-height: 65vh; 
    }
}