/* Общие настройки страницы */
body {
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: sans-serif; /* Добавил для чистоты шрифта */
}

/* Основная область с чертежом */
.main-view {
    margin-right: 350px;
    flex: 1;
    background: #f0f0f0;
    height: 100vh;
    position: relative;
}

#svg-wrapper {
    width: 100%;
    height: 100%;
    background: white;
    cursor: grab;
}
#svg-wrapper:active { cursor: grabbing; }

/* ПРАВАЯ ПАНЕЛЬ */
.properties-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    height: 100vh;
    background: white;
    border-left: 2px solid #ccc;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.properties-panel.disabled-panel {
    opacity: 0.4 !important;
    pointer-events: none;
    filter: grayscale(1);
}

/* Группы полей ввода */
h3 { margin-top: 0; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; color: #333; }
.prop-group { margin-bottom: 12px; }
.prop-group label {
    display: block;
    font-weight: bold;
    font-size: 0.75em;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.prop-group input, .prop-group select, .prop-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 13px;
}
.prop-group input:focus { border-color: #007bff; outline: none; }

/* ЛЕВОЕ МЕНЮ (Слои и Статусы) */
.layer-controls, .status-filters {
    position: fixed;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 200px;
    user-select: none;
    -webkit-user-select: none;
}

.layer-controls { top: 20px; }
.status-filters { top: 200px; } /* Смещаем вниз, чтобы не накладывались */

.layer-controls h4, .status-filters h4 { margin: 0 0 10px 0; font-size: 14px; border-bottom: 1px solid #eee; }

.layer-controls label, .status-filters label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
}

.layer-controls input, .status-filters input { margin-right: 10px; cursor: pointer; }

/* Цвета индикаторов */
.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.columns { background: #666; }
.beams { background: #000; }
.axes { background: #aaa; }

/* Эффекты выделения */
.searching-mode svg path:not(.selected-element) {
    filter: brightness(0.6) grayscale(0.5);
    opacity: 0.3;
    transition: all 0.3s ease;
}

.selected-element {
    filter: drop-shadow(0 0 8px #FF00FF) !important;
    opacity: 1 !important;
    stroke: #FF00FF !important;
    stroke-width: 3 !important;
}

path { transition: fill 0.3s ease; }
path:hover { filter: brightness(0.8); cursor: pointer; }

.save-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    margin-top: 10px;
}
.save-btn:hover { background: #0056b3; }

/* Игнор осей */
#Layer_Axes, [id^="Layer_Axes"], #layer-oc1 { pointer-events: none !important; }
#Layer_Axes path, [id^="Layer_Axes"] path, #layer-oc1 path {
    pointer-events: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.table-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #28a745;
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-link-btn:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}