/* Layer Sidebar Styles */
.layer-sidebar {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-right: 1px solid #dee2e6;
}

.layer-item {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef !important;
}

.layer-item:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}

.layer-item.selected {
    border-color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: 0 3px 10px rgba(13, 110, 253, 0.15);
}

.btn-sm {
    transition: all 0.2s ease;
}

.btn-sm:hover {
    transform: translateY(-1px);
}

/* Ensure proper text truncation for long layer names */
.layer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Prevent layout breaking with long text */
.layer-content {
    min-width: 0;
    flex: 1;
}

/* Color Picker Styles */
.color-picker-container {
    transition: border-color 0.2s ease;
}

.color-picker-container:hover {
    border-color: #0d6efd !important;
}

.color-swatch {
    transition: all 0.2s ease;
    position: relative;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #0d6efd !important;
    z-index: 1;
}

.color-swatch:active {
    transform: scale(0.95);
}

.color-preview-large {
    transition: all 0.2s ease;
}

.color-preview-large:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #0d6efd !important;
}

/* Color picker animation */
.color-picker-container .color-swatch:nth-child(odd) {
    animation-delay: 0.05s;
}

.color-picker-container .color-swatch:nth-child(even) {
    animation-delay: 0.1s;
}

@keyframes colorSwatchIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.color-picker-container .color-swatch {
    animation: colorSwatchIn 0.3s ease forwards;
}

/* Hex input styling */
.color-picker-container input[type="text"] {
    transition: border-color 0.2s ease;
}

.color-picker-container input[type="text"]:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Hide Google Maps Drawing Manager controls - COMPREHENSIVE RULES */
/* Hide the main drawing control toolbar */
.gm-style .gmnoprint[style*="background-color: rgb(255, 255, 255)"] {
    display: none !important;
}

/* Hide drawing control panels by position and size */
.gm-style .gmnoprint > div[style*="background-color: rgb(255, 255, 255)"][style*="border"] {
    display: none !important;
}

/* Hide any small white panels that could be drawing controls */
.gm-style .gmnoprint > div[style*="background-color: white"] {
    display: none !important;
}

.gm-style .gmnoprint > div[style*="background-color: #ffffff"] {
    display: none !important;
}

.gm-style .gmnoprint > div[style*="background-color:#ffffff"] {
    display: none !important;
}

/* Hide specific drawing tool buttons */
.gm-style .gmnoprint [role="button"][title*="Draw a marker"] {
    display: none !important;
}

.gm-style .gmnoprint [role="button"][title*="Draw a line"] {
    display: none !important;
}

.gm-style .gmnoprint [role="button"][title*="Draw a shape"] {
    display: none !important;
}

.gm-style .gmnoprint [role="button"][title*="Draw a rectangle"] {
    display: none !important;
}

/* Additional comprehensive hiding rules */
.gm-style .gmnoprint div[style*="background-color: rgb(255, 255, 255)"],
.gm-style .gmnoprint div[style*="background-color: white"],
.gm-style .gmnoprint div[style*="border"],
.gm-style div[style*="background-color: rgba(255, 255, 255, 1)"],
.gmnoprint > div[style*="background"],
div[style*="background-color: rgba(0, 0, 0, 0.8)"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Ensure our custom toolbar remains visible */
#drawing-toolbar-container,
.custom-toolbar,
.toolbar-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.gm-style .gmnoprint [role="button"][title*="Draw a circle"] {
    display: none !important;
}

.gm-style .gmnoprint [role="button"][title*="Draw a polygon"] {
    display: none !important;
}

/* Hide drawing manager toolbar by class and structure */
.gm-style .gmnoprint > div > div[style*="padding"] {
    display: none !important;
}

/* Hide any drawing-related tooltips */
.gm-style div[style*="background-color: rgba(0, 0, 0, 0.8)"] {
    display: none !important;
}

/* More aggressive - hide any small control panels */
.gm-style .gmnoprint > div[style*="width"][style*="height"] {
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Hide drawing controls by their typical structure */
.gm-style .gmnoprint[style*="left"][style*="top"] > div {
    display: none !important;
}

/* Nuclear option - hide any control that might be drawing-related */
.gm-style .gmnoprint:not(.gm-bundled-control):not([class*="zoom"]):not([class*="pan"]) {
    display: none !important;
}

/* Edit Mode Styles */
#edit-controls {
    animation: slideInRight 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#edit-controls button {
    transition: all 0.2s ease;
}

#edit-controls button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#panorama-edit-mode-indicator {
    animation: slideInLeft 0.3s ease-out;
    backdrop-filter: blur(5px);
    border: 1px solid #ffc107;
}

/* Drawing edit state styles */
.drawing-editing {
    stroke-opacity: 1 !important;
    fill-opacity: 0.4 !important;
    filter: brightness(1.2) !important;
    z-index: 1000 !important;
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Enhanced info window styles for edit/delete buttons */
.gm-style-iw-c .gm-style-iw-d {
    padding: 12px !important;
}

.gm-style-iw .d-flex.gap-2 button {
    min-width: 70px;
    font-size: 11px;
    padding: 4px 8px;
}

.gm-style-iw .d-flex.gap-2 button i {
    font-size: 10px;
}