/* --- Hour Grid & Cells --- */

.hour-grid {
    display: grid;
    grid-template-rows: repeat(var(--total-slots), 1fr);
    height: 340px;
    transition: height 0.3s ease-in-out;
}

/* --- Стили для визуальной группировки сетки --- */
.hour-cell {
    border-top: 1px solid transparent; /* Скрываем все границы по умолчанию */
    position: relative;
}

/* --- Вид на 60 минут --- */
.view-60 .is-hour-marker {
    border-top: 1px solid var(--tracker-grid-line-strong);
}

/* --- Вид на 30 минут --- */
.view-30 .is-half-hour-marker {
    border-top: 1px solid var(--tracker-grid-line);
}
.view-30 .is-hour-marker {
    border-top: 1px solid var(--tracker-grid-line-strong);
}

/* --- Вид на 15 минут --- */
.view-15 .hour-cell {
    border-top: 1px solid var(--tracker-grid-line);
}
.view-15 .is-hour-marker {
    border-top-color: var(--tracker-grid-line-strong);
}

.hour-cell:hover {
    background-color: var(--tracker-cell-hover);
}

.hour-cell.drop-target {
    background-color: var(--tracker-drop-target) !important;
}

.overtime-marker {
    border-top: 1px dashed var(--color-error) !important;
}

/* --- Vector Cell States --- */

.hour-cell.vector-cell {
    background-color: var(--tracker-vector-cell-bg);
    cursor: pointer;
}

.hour-cell.vector-cell.overtime-cell {
    background-color: var(--tracker-overtime-cell) !important;
}

.hour-cell.overhead-cell {
    background-color: var(--tracker-overhead-cell);
}

.hour-cell.completed-cell {
    background-color: var(--tracker-completed-bg);
}

.hour-cell.vector-start {
    outline: 2px solid var(--tracker-highlight-bg);
    outline-offset: -2px;
}

.hour-cell.vector-highlight {
    background-color: var(--tracker-highlight-bg) !important;
}

.hour-cell.empty-highlight {
    background-color: var(--tracker-empty-highlight);
}

.hour-cell.overtime-cell.vector-highlight {
    background-color: var(--tracker-overtime-highlight) !important;
}

/* --- Vector Selected State --- */
.hour-cell.vector-selected {
    background-color: var(--tracker-highlight-bg) !important;
}

.svg-overlay g.vector-selected,
.svg-overlay g.multi-vector-selected {
    visibility: visible !important;
}

.svg-overlay g.vector-selected > path,
.svg-overlay g.vector-selected > polyline {
    stroke: var(--tracker-highlight-stroke) !important;
    stroke-width: 4 !important;
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

.svg-overlay g.vector-selected > circle {
    fill: var(--tracker-highlight-stroke) !important;
    stroke: none !important;
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

/* --- Ctrl+MultiPick Selection State --- */
.hour-cell.ctrl-pick-highlight {
    background-color: var(--tracker-highlight-bg) !important;
}

/* --- Shift+Drag Rectangle Selection State --- */
.hour-cell.shift-drag-highlight {
    background-color: var(--tracker-highlight-bg) !important;
}

/* --- Multi-Vector Selection State (Ctrl+Click на векторах) --- */
.hour-cell.multi-vector-selected {
    background-color: var(--tracker-highlight-bg) !important;
}

/* SVG линии для мульти-выбора (должны выглядеть как одиночный выбор) */
g.multi-vector-selected path,
g.multi-vector-selected polyline {
    stroke: var(--tracker-highlight-stroke) !important;
    stroke-width: 4 !important;
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

g.multi-vector-selected circle {
    stroke: var(--tracker-highlight-stroke) !important;
    stroke-width: 4 !important;
    fill: var(--tracker-highlight-stroke) !important;
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

body.shift-drag-mode {
    cursor: crosshair;
    user-select: none;
}

body.shift-drag-mode .hour-cell {
    cursor: crosshair;
}

#vector-edit-btn {
    pointer-events: auto;
}

#vector-edit-btn:hover rect {
    fill: var(--brand-primary-hover, #2563eb);
}

/* --- SVG Overlay & Vectors --- */

.svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 15;
}

.svg-overlay g {
    transition: opacity 0.3s ease-in-out 0.6s;
}

.vector-completed > path,
.vector-completed > polyline,
.vector-completed > circle {
    stroke: var(--tracker-completed-stroke);
}

.vector-completed > text,
.vector-completed > circle {
    fill: var(--tracker-completed-stroke);
}

.vector-line-highlight path,
.vector-line-highlight polyline {
    stroke: var(--tracker-highlight-stroke);
    stroke-width: 4;
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

.vector-line-highlight circle {
    stroke: var(--tracker-highlight-stroke);
    stroke-width: 4;
    fill: var(--tracker-highlight-stroke);
    filter: drop-shadow(0 0 5px rgba(var(--text-inverse-rgb), 0.7));
}

/* ======================= НАЧАЛО ЗАМЕНЫ ======================= */
.draggable-vector {
    pointer-events: all;
}

.draggable-vector > * {
    pointer-events: none;
}

/* Общие стили для кружка, без курсора и трансформаций */
.draggable-vector > circle {
    pointer-events: auto;
    transition: transform 0.2s ease;
    transform-origin: center;
    transform-box: fill-box;
}

/* Применяем интерактивные стили ТОЛЬКО к перетаскиваемым векторам */

.draggable-vector:not(.is-undraggable) > circle {
    cursor: grab;
}

.draggable-vector:not(.is-undraggable) > circle:active {
    cursor: move;
}

.draggable-vector:not(.is-undraggable):hover > :not(text) {
    stroke: var(--tracker-highlight-stroke);
    stroke-width: 4;
}

.draggable-vector:not(.is-undraggable):hover > circle {
    fill: var(--tracker-highlight-stroke);
}

.draggable-vector:not(.is-undraggable) > circle:hover {
    transform: scale(1.5);
}
/* ======================= КОНЕЦ ЗАМЕНЫ ======================= */

/* --- Preview Vector (при создании задачи) --- */
.preview-vector {
    pointer-events: none;
    animation: preview-pulse 1.5s ease-in-out infinite;
}

@keyframes preview-pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

/* --- Day Types & Headers --- */

.day-off-weekend {
    background-color: var(--tracker-dayoff-weekend);
}

.day-off-holiday {
    background-color: var(--tracker-dayoff-holiday);
}

.day-off-transferred {
    background-color: var(--tracker-dayoff-transferred);
}

.day-header.day-off .date-number {
    color: var(--tracker-dayoff-text);
    font-weight: bold;
}

/* --- FIX: Override hover highlight for completed vectors --- */

.hour-cell.completed-cell.vector-highlight {
    background-color: var(--tracker-completed-hover) !important;
}
/* ... (существующие стили) ... */

.hour-cell.selected-hour-cell {
    outline: 2px solid var(--tracker-highlight-stroke);
    outline-offset: -2px;
    background-color: var(--tracker-cell-selected);
}

.interaction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Сам слой не ловит клики */
    z-index: 20; /* Выше чем SVG, но ниже чем модалки */
}

.interaction-wrapper {
    position: absolute;
    pointer-events: all; /* А вот обертки ловят */
    cursor: pointer;
}

/* ADDED: Additive rule to override cursor style during vector creation */
body.creating-vector-mode,
body.creating-vector-mode * {
    cursor: default !important;
}