/* ===========================================
   Equipment Item Styles
   Styles for sidebar equipment items
   =========================================== */

/* Base styles for all equipment items */
.equipment-item {
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Individual item adjustments if needed */
#drums-1-tom img {
    max-width: 120px;
}

#drums-3-tom img {
    max-width: 160px;
}

#e-guitar img,
#b-guitar img {
    max-height: 90px;
}

#mic-stand img {
    max-height: 100px;
}

#mic img {
    max-height: 55px;
}

#g-amp img,
#b-amp img {
    max-height: 80px;
}

#p-board img {
    max-height: 40px;
}

#keyboard img {
    max-height: 70px;
}

#stage-monitor img {
    max-height: 70px;
}

#person img {
    max-height: 90px;
}

/* Stage item specific styles */
.stage-item {
    position: absolute !important;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.stage-item:hover {
    z-index: 100 !important;
}

.stage-item.selected {
    outline: 2px dashed #2563eb;
    outline-offset: 6px;
    z-index: 101 !important;
}

.stage-item.dragging {
    opacity: 0.85;
    z-index: 1000 !important;
    cursor: grabbing;
}

.stage-item img {
    display: block;
    max-height: 120px;
    width: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Larger drum kits on stage */
.stage-item[data-item-type="drums-1-tom"] img {
    max-height: 150px;
}

.stage-item[data-item-type="drums-3-tom"] img {
    max-height: 180px;
}

/* Equipment category header */
.equipment-category h4 {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 8px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Item label in sidebar */
.equipment-item .item-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}