.floorplan {
    width: 100%;
    display: block;
}

.floor-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.floor-btn {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    user-select: none;
}

    .floor-btn:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .floor-btn.active {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }

.floor-svg {
    display: none;
}

    .floor-svg.active {
        display: block;
    }

.svg-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #ccc;
    cursor: grab;
}

    .svg-container.panning {
        cursor: grabbing;
    }

    .svg-container svg {
        width: 100%;
        height: auto;
        display: block;
        transform-origin: 0 0;
        transition: transform 0.3s ease;
    }

.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
    pointer-events: auto;
}

.zoom-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    user-select: none;
    transition: background-color 0.2s;
    pointer-events: auto;
    touch-action: manipulation;
}

    .zoom-btn:hover {
        background: rgba(255, 255, 255, 1);
    }

    .zoom-btn:active {
        background: rgba(230, 230, 230, 1);
    }

    .zoom-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.clickable-area {
    fill: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .clickable-area:hover {
        fill: rgba(0, 123, 255, 0.3);
        stroke: rgba(0, 123, 255, 0.8);
        stroke-width: 3;
    }

    .clickable-area.selected {
        fill: rgba(255, 7, 7, 0.4) !important;
        stroke: rgb(255, 7, 7) !important;
        stroke-width: 10 !important;
        stroke-dasharray: 10 0 10;
        animation: dashed-border 10s linear infinite;
    }

        .clickable-area.selected:hover {
            fill: rgba(255, 7, 7, 0.4) !important;
            stroke: rgb(255, 7, 7) !important;
            stroke-width: 10 !important;
            stroke-dasharray: unset;
            animation: unset;
        }

/*.rect {
    fill: none;*/ /* Make the rectangle transparent */
    /*stroke: #3498db;*/ /* Color of the border */
    /*stroke-width: 5;*/ /* Width of the border */
    /*stroke-dasharray: 15;*/ /* Dash length */
    /*stroke-dashoffset: 0;*/ /* Initial offset for the dashes */
    /*animation: dashed-border 2s linear infinite;*/ /* Animation timing */
/*}*/

.panning .clickable-area {
    pointer-events: none;
}

.panning .zoom-controls {
    pointer-events: auto;
}

.panning .zoom-btn {
    pointer-events: auto;
}

/* Disable anchor clicks while preserving other functionality */
.floorplan.not-clickable a {
    pointer-events: none !important;
}

    .floorplan.not-clickable a rect {
        pointer-events: auto;
        cursor: default !important;
    }

.floorplan a.not-clickable {
    pointer-events: none !important;
}

    .floorplan a.not-clickable rect {
        pointer-events: auto;
        cursor: default !important;
    }

    /* Additional visual indication for disabled state */
    .floorplan.not-clickable a rect,
    .floorplan a.not-clickable rect {
        opacity: 0.6;
    }

@keyframes dashed-border {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -1000;
    }
}