/* ViewBox og SVG Canvas */
.viewbox {
    width: 100%;
    height: 100%;
    position: relative;
    background: #f8f9fa;
}

.cargo-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
}

/* Cargo items styling */
.cargo-item {
    cursor: move;
    transition: opacity 0.2s;
}

.cargo-item:hover rect {
    stroke-width: 2;
    filter: brightness(1.1);
}

.cargo-item.selected rect {
    stroke: #2c3e50;
    stroke-width: 3;
}

.cargo-item.collision rect {
    fill: #e74c3c !important;
    stroke: #c0392b;
}

.cargo-item.dragging {
    opacity: 0.6;
}

/* Viewport controls */
.viewport-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

/* Grid pattern styling */
#grid path {
    stroke: #e0e0e0;
}

/* Cargo space bounds */
#cargo-space-bounds rect {
    stroke: #e74c3c;
    stroke-width: 3;
    stroke-dasharray: 10, 5;
    fill: none;
}

/* Compartment linjer */
#cargo-space-bounds line {
    pointer-events: none;
}

/* Compartment labels */
#cargo-space-bounds text {
    user-select: none;
    -webkit-user-select: none;
}