/* Measurements Menu Styles */
.measurements-menu.show {
    display: flex !important;
    animation: measurementsMenuSlideIn 0.3s ease-out;
}

@keyframes measurementsMenuSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Annotations Menu Styles */
.annotations-menu.show {
    display: flex !important;
    animation: annotationsMenuSlideIn 0.3s ease-out;
}

@keyframes annotationsMenuSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Measurement Button Tooltips */
.measurement-button {
    position: relative;
}

.measurement-button:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    background: rgba(26, 32, 44, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Annotation Button Tooltips */
.annotation-button {
    position: relative;
}

.annotation-button:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    background: rgba(26, 32, 44, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Profile Window Styles */
#profile_window {
    box-sizing: border-box;
}

#profile_window:not([style*="display: none"]) {
    display: flex !important;
}

#profile_window[style*="display: none"] {
    display: none !important;
}

/* Allow profile window to be draggable freely - remove forced positioning */
#profile_window {
    cursor: default;
}

#profile_window #profile_titlebar {
    cursor: move;
    user-select: none;
}

/* Close button should have pointer cursor, not move cursor */
#profile_window #closeProfileContainer {
    cursor: pointer !important;
}

#profile_window #closeProfileContainer:hover {
    cursor: pointer !important;
}

/* Viewport Settings Modal Styles */
.viewport-settings-modal.show {
    display: flex !important;
}

.viewport-settings-modal.hidden {
    display: none !important;
}

/* Settings Modal Styles */
.settings-modal.show {
    display: flex !important;
}

.settings-modal.hidden {
    display: none !important;
}

/* Camera Modal Styles */
.camera-modal.show {
    display: flex !important;
}

.camera-modal.hidden {
    display: none !important;
}

/* Create Annotation Modal Styles */
.create-annotation-modal.show {
    display: flex !important;
}

.create-annotation-modal.hidden {
    display: none !important;
}

/* Navigation Menu Styles */
.navigation-menu.show {
    display: flex !important;
    animation: navigationMenuSlideIn 0.3s ease-out;
}

@keyframes navigationMenuSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Navigation Button Tooltips */
.navigation-button {
    position: relative;
}

.navigation-button:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    background: rgba(26, 32, 44, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Layers Modal Styles */
.layers-modal {
    transition: right 0.3s ease-out, transform 0.3s ease-out;
}

.layers-modal.show {
    display: flex !important;
    animation: modalSlideIn 0.3s ease-out;
}

.layers-modal.shifted {
    right: calc(2.5rem + 360px + 8px) !important; /* right-10 (2.5rem) + properties modal width (360px) + gap (8px) */
    transform: translateY(-50%) !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Accordion Styles */
.accordion-content {
    transition: all 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
}

.accordion-content:not(.hidden) {
    max-height: 1000px;
    animation: accordionSlideDown 0.3s ease-out;
}

.accordion-content.hidden {
    animation: accordionSlideUp 0.3s ease-out;
}

@keyframes accordionSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

@keyframes accordionSlideUp {
    from {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
}

/* Slider Styles */
.slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
}

/* Layers Modal Shifted State */
.layers-modal.shifted {
    transform: translateX(-368px) translateY(-50%);
    transition: transform 0.3s ease-out;
}

/* Dataset Properties Modal Styles */
.dataset-properties-modal.show {
    display: flex !important;
    animation: modalSlideInLeft 0.3s ease-out;
}

.dataset-properties-modal.hidden {
    display: none !important;
}

/* Measurement Properties Modal Styles */
.measurement-properties-modal.show {
    display: flex !important;
    animation: modalSlideInLeft 0.3s ease-out;
}

.measurement-properties-modal.hidden {
    display: none !important;
}

/* Annotation Properties Modal Styles */
.annotation-properties-modal.show {
    display: flex !important;
    animation: modalSlideInLeft 0.3s ease-out;
}

.annotation-properties-modal.hidden {
    display: none !important;
}

/* Delete Confirmation Modal Styles */
.delete-confirmation-modal.show {
    display: flex !important;
}

.delete-confirmation-modal.hidden {
    display: none !important;
}

@keyframes modalSlideInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.accordion-arrow {
    transition: transform 0.3s ease-out;
}

/* Custom scrollbar for light theme */
.layers-modal::-webkit-scrollbar {
    width: 8px;
}

.layers-modal::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.layers-modal::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.layers-modal::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Dark mode scrollbar styles */
.dark .layers-modal::-webkit-scrollbar-track {
    background: #374151;
}

.dark .layers-modal::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark .layers-modal::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}