/* Slot Components */

.slot-base {
    background: #111;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.slot-base:hover {
    border-color: var(--accent);
    cursor: pointer;
}

/* Mini Slots (Squad/Roster) */
.mini-slot {
    width: 16px;
    height: 16px;
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
}

.mini-slot.filled {
    background: var(--accent);
}

.mini-slot.equip-slot {
    border-color: #555;
    background: #222;
}

/* Equipment Slots (Hero Details) */
.equip-slot {
    width: 54px;
    height: 54px;
    background: #222;
    border: 2px solid #444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #555;
    text-align: center;
    background-size: cover;
    position: relative;
    transition: border-color var(--transition-fast);
}

.equip-slot:hover {
    border-color: var(--gold);
    cursor: pointer;
}

.equip-slot.filled {
    border-style: solid;
}

.equip-slot.empty {
    border-style: dashed;
}

/* Skill Slots */
.skill-card-slot {
    display: flex;
    gap: 8px;
    background: #2a2a30;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #444;
    align-items: center;
    transition: border-color var(--transition-fast);
}

.skill-card-slot:hover {
    border-color: var(--accent);
}

.slot-icon {
    width: 32px;
    height: 32px;
    background: #444;
    border-radius: 4px;
}

.slot-icon.filled {
    background: var(--accent);
}

/* Gem Sockets on Equipment Icons */
.inv-icon, .hero-equipment-icon, .hero-selection-item-icon {
    position: relative;
}

.gem-sockets-container {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: flex;
    gap: 1px;
    pointer-events: none;
}

.gem-socket-mini {
    width: 10px;
    height: 10px;
    border: 1px solid #444;
    border-radius: 50%;
    background: #111;
    background-size: cover;
    flex-shrink: 0;
}

.gem-socket-mini.filled {
    border-color: var(--gold);
    box-shadow: 0 0 3px var(--gold);
}

.socketing-item-row:hover {
    border-color: var(--gold) !important;
}