/* --- Main Layout Grids --- */

.main-grid {
    align-items: end;
}

/* Profile block should align with hour-grid bottom, not calendar headers */
@media (min-width: 1024px) {
    .profile-block {
        height: 340px; /* Same as hour-grid height */
        margin-bottom: 0;
        transition: height 0.3s ease-in-out;
    }

    .member-block.is-collapsed .profile-block {
        height: 80px; /* Match collapsed hour-grid height for sync animation */
    }
}

/* --- Member Block Layout & Collapse --- */

/* ======================= НАЧАЛО ИЗМЕНЕНИЯ ======================= */
.member-block {
    /* Создаем контекст позиционирования для дочерних элементов */
    position: relative;
}

[data-action='toggle-collapse'] {
    position: absolute;
    top: 8px; /* Отступ от верхнего края */
    left: 0px; /* ПРИМЕЧАНИЕ: Это значение может потребовать корректировки */
    z-index: 30; /* Убедимся, что кнопка поверх других элементов */

    /* Стилизация самой кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition:
        background-color 0.2s ease-in-out,
        transform 0.3s ease-in-out;
}

[data-action='toggle-collapse']:hover {
    background-color: var(--bg-hover);
}

/* Анимация поворота стрелки внутри кнопки при сворачивании */
.member-block.is-collapsed [data-action='toggle-collapse'] {
    transform: rotate(-180deg);
}
/* ======================= КОНЕЦ ИЗМЕНЕНИЯ ======================= */

.profile-details-text {
    transition:
        opacity 0.3s ease-in-out,
        max-height 0.3s ease-in-out,
        margin 0.3s ease-in-out,
        padding 0.3s ease-in-out;
    overflow: hidden;
    max-height: 100px;
}

.y-axis {
    transition:
        opacity 0.3s ease-in-out,
        max-height 0.3s ease-in-out;
    max-height: 340px; /* Same as hour-grid height */
    overflow: hidden;
    margin-top: 68px; /* Align with calendar grid lines */
}

.date-number {
    transition: opacity 0.3s ease-in-out;
}

/* сворвачивание всего блока профиля не нужно */
/* .member-block.is-collapsed .profile-details-text {
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
} */

.member-block.is-collapsed .y-axis {
    opacity: 0;
    max-height: 80px; /* Match collapsed hour-grid height */
}

.member-block.is-collapsed .date-number {
    opacity: 0;
}

.member-block.is-collapsed .svg-overlay g {
    opacity: 0;
}

.member-block.is-collapsed .hour-cell {
    border-top-color: transparent;
}

.member-block.is-collapsed .hour-grid {
    height: 80px !important;
}

/* --- Drag & Drop Layout --- */

.dragging {
    opacity: 0.4;
}

.drop-indicator-before {
    border-top: 3px solid var(--tracker-drop-indicator) !important;
}

.drop-indicator-after {
    border-bottom: 3px solid var(--tracker-drop-indicator) !important;
}

/* --- Separator Drag Handle --- */

.separator-drag-handle {
    position: relative;
    border-top: 2px solid var(--border-primary);
    margin-top: 1rem;
    height: 1.25rem;
    transition: all 0.2s ease;
    z-index: 25;
}

.separator-drag-handle:hover {
    border-top-width: 4px;
    border-top-color: var(--tracker-drop-indicator);
}

.drag-oval {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 9999px;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: grab;
}

.drag-oval:active {
    cursor: move;
}

.separator-drag-handle:hover .drag-oval {
    opacity: 1;
}

#app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-secondary);
}